/*
 * 전황판 — 등불 아래의 지도판.
 *
 * 이 화면은 대시보드가 아니라 천막 안의 지도판이다. 바탕은 검정이 아니라 등불이
 * 닿는 아세테이트의 깊은 청록이고, 구역은 떠 있는 카드가 아니라 같은 면 위에 그은
 * 괘선으로 나뉜다. 지휘관은 이 판을 몇 분마다 다시 들여다보며, 어느 전선이 먼저
 * 무너지는지를 한눈에 읽어야 한다.
 *
 * 이 파일의 중심은 전투 칩(.tile)이다. 60개의 칩이 등불 아래 놓이고, 칩 하나가
 * 전선 하나다. 왼쪽 띠는 보급로, 가운데는 병력, 오른쪽 홈은 압력의 열, 그리고
 * 우리가 붙들고 있는 전선에는 지휘관이 유성연필로 두른 테가 있다. 나머지는 전부
 * 조용하게 물러선다 — 대담함은 한 곳에만 쓴다.
 *
 * 바깥으로 나가지 않는다. 가져오는 글꼴도, 그림도, 주소도 없다. 화면의 경비가 셋
 * 다 막고 있고, 이 파일은 애초에 물어볼 일이 없게 쓰였다. 글꼴은 기계에 이미
 * 있는 것만 쓴다: 라틴 글자와 숫자는 압축된 도면체로, 한글은 그 기계의 본문체로.
 */

:root {
  color-scheme: dark;

  /* 지도판 */
  --table: #0d1a1c;
  --table-lit: #16292c;
  --table-sunk: #0a1618;
  --rule: #23403e;
  --rule-faint: #172c2d;

  /* 잉크 */
  --ink: #dae7e3;
  --ink-quiet: #8aa5a0;
  --ink-faint: #5c7a77;

  /* 등불과 유성연필 */
  --lamp: #e0a33c;
  --chinagraph: #d8564a;
  --standing: var(--lamp);
  --alarm: var(--chinagraph);
  --rising: #6f9c7f;
  --falling: #cf7a45;

  /* 압력의 열. 찬 쪽에서 뜨거운 쪽으로 가는 하나의 길이다. */
  --band-1: #3f6f7a;
  --band-2: #5f8a72;
  --band-3: #b39a4e;
  --band-4: #cf7a45;
  --band-5: #d8564a;

  /* 보급로 */
  --route-open: #6f9c7f;
  --route-congested: #b39a4e;
  --route-restricted: #cf7a45;
  --route-closed: #d8564a;

  /*
   * 도면체는 지도와 군용 표지의 글자다. 한글은 이 글꼴에 없으므로 그 다음
   * 본문체로 넘어간다 — 그래서 숫자와 부호는 압축된 도면체로, 우리말은 본문체로
   * 선다. 두 글자체가 한 줄 안에서 각자의 일을 한다.
   */
  --lettering: "Bahnschrift", "DIN Alternate", "Arial Narrow", "맑은 고딕", "Malgun Gothic", sans-serif;
  --running: "Pretendard Variable", "Pretendard", "맑은 고딕", "Malgun Gothic", system-ui, sans-serif;
  --reading: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;

  --ruled: var(--rule);
  --rule-line: 1px solid var(--rule);
  --rule-hair: 1px solid var(--rule-faint);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--table);
  color: var(--ink);
  font-family: var(--running);
  font-size: 15px;
  line-height: 1.55;
  /* 우리말은 낱말 안에서 끊기면 읽기 어렵다. 띄어쓰기에서만 줄을 넘긴다. */
  word-break: keep-all;
  display: grid;
  grid-template-columns: minmax(0, 84rem);
  justify-content: center;
  gap: 0;
  padding: 0 1.5rem 6rem;
}

/* ============================================================ 글자의 층위 */

h1, h2, h3, h4 {
  font-family: var(--lettering);
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 1.6rem 0 0.2rem;
}

/*
 * 구역의 머리. 차례를 매기지 않는다 — 이 판의 구역들은 차례가 아니라 자리이고,
 * 없는 차례를 붙이면 읽는 사람이 없는 순서를 찾게 된다.
 */
h3, .panel-title {
  font-family: var(--lettering);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

h4 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: none;
}

a {
  color: var(--lamp);
}

/* ============================================================== 길목 */

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.35rem;
  padding: 0.9rem 0 0.75rem;
  border-bottom: 2px solid var(--rule);
}

.way {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-quiet);
  font-family: var(--lettering);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.way:hover,
.way:focus-visible {
  color: var(--ink);
  background: var(--table-lit);
  outline: none;
}

.way.here {
  color: var(--lamp);
  border-bottom-color: var(--lamp);
  background: none;
}

/* 판이 내주는 다른 길. 길목과 같은 말씨이되 한 단 낮게 선다. */
.way-on {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0 0;
}

.way-on .way {
  border: var(--rule-hair);
  border-radius: 1px;
  font-size: 0.86rem;
}

/* ====================================================== 전황이 얼마나 새것인가 */

.standing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--ink-quiet);
  padding: 0.5rem 0;
}

nav .standing {
  flex: 1 1 22rem;
  justify-content: flex-end;
  padding: 0;
}

.standing-mark,
.mark {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid currentcolor;
  border-radius: 1px;
  background: none;
  font-family: var(--lettering);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-quiet);
}

.standing[data-state="fresh"] .standing-mark { color: var(--rising); }
.standing[data-state="ageing"] .standing-mark,
.standing[data-state="catching-up"] .standing-mark { color: var(--lamp); }
.standing[data-state="out-of-contact"] .standing-mark,

.standing-unknown .standing-mark { color: var(--chinagraph); }

.standing-tick,
.standing-behind {
  font-family: var(--reading);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.standing-words,
.standing-said {
  color: var(--ink-quiet);
}

.mark-held { color: var(--lamp); }
.mark-withdrawal { color: var(--lamp); }
.mark-uncertain { color: var(--chinagraph); }

/* ==================================================== 하나로 이어진 괘선 면 */

main {
  display: grid;
  gap: 0;
  min-width: 0;
}

main:focus {
  outline: none;
}

.view {
  display: grid;
  gap: 0;
  min-width: 0;
}

.view-title {
  color: var(--ink);
}

/*
 * 구역. 떠 있는 카드가 아니라 같은 면 위에 그어진 자리다. 테두리도 배경도 없고,
 * 위쪽 괘선 하나로만 앞 구역과 나뉜다.
 */
.panel,
section {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  background: none;
  border: 0;
  border-top: var(--rule-line);
  border-radius: 0;
  padding: 1.5rem 0 1.7rem;
  min-width: 0;
}

/* 답을 요구하는 구역은 왼쪽에 유성연필 자국이 그어진다. */
.panel.group {
  border-left: 3px solid var(--lamp);
  padding-left: 1.1rem;
}

/*
 * The campaign. It is the only thing on the table that says whether the
 * commander is winning, so it is lit like the lamp is over it and nothing
 * above it competes: no rule line, because there is nothing before it.
 */
.panel-campaign {
  border-top: 0;
  border-bottom: var(--rule-line);
  background:
    radial-gradient(120% 140% at 12% 0%, rgb(224 163 60 / 9%), transparent 62%);
  padding: 0.4rem 1.1rem 1.6rem;
}

.panel-campaign > h3 {
  color: var(--lamp);
  letter-spacing: 0.22em;
}

.panel-campaign .told {
  color: var(--chinagraph);
}

section section,
.panel .panel {
  border-top: var(--rule-hair);
  padding: 1rem 0 0.4rem;
}

/* ================================================================ 판독 값 */

.readings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.2rem 2rem;
}

.reading {
  display: grid;
  gap: 0.05rem;
  padding: 0.55rem 0;
  border-top: var(--rule-hair);
  min-width: 0;
}

.reading-name,
.label {
  font-family: var(--lettering);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reading-value {
  font-size: 1.05rem;
}

.pairs {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 0.35rem 1.2rem;
  align-items: baseline;
}

dd {
  all: initial;
  display: block;
  font: inherit;
  font-variant-numeric: inherit;
  color: inherit;
  min-width: 0;
}

.value,
.words,
.said {
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.brief {
  color: var(--ink-quiet);
  font-family: var(--reading);
  font-size: 0.86rem;
}

.note,
.empty {
  color: var(--ink-quiet);
  font-size: 0.88rem;
}

/* 유성연필로 쓴 것. 지휘관이 놓쳐서는 안 되는 줄. */
.told {
  color: var(--chinagraph);
  font-family: var(--reading);
  font-size: 0.87rem;
}

.statement {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.45;
  font-family: var(--lettering);
  letter-spacing: 0.01em;
}

.line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

/* 숫자는 상황보고서처럼 자리를 맞춰 선다. */
.count,
.share,
.handle,
.stage-name,
.report-tick,
.event-tick,
.event-size,
.event-front,
.break-ticks {
  font-family: var(--reading);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.count,
.share {
  color: var(--ink);
  cursor: help;
}

.count[data-sign="-1"],
.share[data-sign="-1"] { color: var(--falling); }
.count[data-sign="1"],
.share[data-sign="1"] { color: var(--rising); }
.count.none,
.share.none,
.handle.none,
.none { color: var(--ink-faint); }

.handle {
  color: var(--ink-faint);
  font-size: 0.85rem;
  cursor: help;
}

.event-kind,
.stage-name {
  font-family: var(--lettering);
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ======================================================= 전황도 — 이 판의 중심 */

.board-group {
  display: grid;
  gap: 0.35rem;
  border: 0;
  padding: 1rem 0 0;
}

.board-group h4 {
  color: var(--ink);
}

/*
 * 등불. 지도판 위에 갓을 씌운 등이 하나 걸려 있고, 그 빛이 판의 위쪽에 떨어진다.
 * 그림을 가져오지 않고 빛만으로 판에 깊이를 준다.
 */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.45rem;
  padding: 1rem 1rem 1.2rem;
  background-color: var(--table-sunk);
  background-image:
    radial-gradient(120% 90% at 50% -18%, rgba(224, 163, 60, 0.13), rgba(224, 163, 60, 0) 62%),
    linear-gradient(var(--table-lit), var(--table-sunk));
  border-top: var(--rule-line);
  border-bottom: var(--rule-line);
}

/*
 * 전투 칩. 지도 위에 놓는 부대 표지다. 왼쪽 띠가 보급로, 가운데가 병력,
 * 오른쪽 홈이 압력의 열.
 */
.tile {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  min-height: 5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.55rem;
  text-align: left;
  color: var(--ink);
  background-color: #122224;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
  border: 1px solid #24393b;
  border-left: 4px solid var(--ruled);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  cursor: pointer;
  font: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.tile:hover,
.tile:focus-visible {
  border-color: var(--lamp);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  transform: translateY(-1px);
  outline: none;
}

.tile-face {
  flex: 1 1 auto;
  display: grid;
  gap: 0.1rem;
  align-content: start;
  min-width: 0;
}

/* 부대 표지. 지도 글자체로, 작게, 자간을 벌려. */
.tile-mark {
  font-family: var(--lettering);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.tile-pressure {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--reading);
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  color: var(--ink);
}

.tile-pressure .count {
  font-size: inherit;
  color: inherit;
}

.tile-arrow {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.tile[data-band="5"] .tile-arrow,
.tile[data-band="4"] .tile-arrow { color: var(--band-5); }

.tile-held {
  font-size: 0.8rem;
  color: var(--ink-quiet);
  min-width: 0;
}

/* 압력의 홈. 이 칩이 얼마나 눌리고 있는지. */
.tile-bar {
  flex: 0 0 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1px;
  overflow: hidden;
}

.tile-bar-fill {
  width: 100%;
  height: 0;
  background: var(--ruled);
}

.tile[data-band="5"] .tile-bar-fill { height: 100%; background: var(--band-5); }
.tile[data-band="4"] .tile-bar-fill { height: 78%;  background: var(--band-4); }
.tile[data-band="3"] .tile-bar-fill { height: 56%;  background: var(--band-3); }
.tile[data-band="2"] .tile-bar-fill { height: 34%;  background: var(--band-2); }
.tile[data-band="1"] .tile-bar-fill { height: 16%;  background: var(--band-1); }

.tile[data-route="open"]       { border-left-color: var(--route-open); }
.tile[data-route="congested"]  { border-left-color: var(--route-congested); }
.tile[data-route="restricted"] { border-left-color: var(--route-restricted); }
.tile[data-route="closed"]     { border-left-color: var(--route-closed); }

/* 우리가 붙들고 있는 전선. 지휘관이 유성연필로 테를 둘렀다. */
.tile[data-held="held"] {
  background-color: #1a2a24;
  border-color: rgba(224, 163, 60, 0.55);
  box-shadow: inset 0 0 0 1px rgba(224, 163, 60, 0.22), 0 1px 0 rgba(0, 0, 0, 0.45);
}

.tile[data-held="held"] .tile-held {
  color: var(--lamp);
  font-family: var(--reading);
  font-variant-numeric: tabular-nums;
}

/* 정찰이 빠진 채 돌아온 곳은 테두리가 끊긴다. */
.tile[data-scouts="with-gaps"] {
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
}

/* 병력이 드나드는 방향. */
.tile[data-movement="leaving"] .tile-held { color: var(--falling); }
.tile[data-movement="arriving"] .tile-held { color: var(--rising); }

/*
 * 철수가 끝나지 않은 전선. 이 판에서 유일하게 움직이는 것이고, 그래야 하는
 * 이유가 있다 — 지휘관이 절대 지나쳐서는 안 되는 한 가지이기 때문이다.
 */
.tile[data-withdrawal="unfinished"] {
  border-color: var(--chinagraph);
  background-color: #2a1a1a;
  animation: breathing 2.6s ease-in-out infinite;
}

@keyframes breathing {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(216, 86, 74, 0.85), 0 1px 0 rgba(0, 0, 0, 0.45); }
  50%      { box-shadow: inset 0 0 0 2px rgba(216, 86, 74, 0.35), 0 1px 0 rgba(0, 0, 0, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile[data-withdrawal="unfinished"] {
    animation: none;
    box-shadow: inset 0 0 0 2px rgba(216, 86, 74, 0.85);
  }
}

/* 급한 전선 줄에 붙는 작은 표지. */
.tile-inline {
  font-family: var(--lettering);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.1rem 0.5rem;
  color: var(--ink);
  background: #122224;
  border: 1px solid #24393b;
  border-left: 3px solid var(--ruled);
  border-radius: 2px;
  cursor: pointer;
}

.tile-inline:hover,
.tile-inline:focus-visible {
  border-color: var(--lamp);
  outline: none;
}

.tile-inline[data-route="open"]       { border-left-color: var(--route-open); }
.tile-inline[data-route="congested"]  { border-left-color: var(--route-congested); }
.tile-inline[data-route="restricted"] { border-left-color: var(--route-restricted); }
.tile-inline[data-route="closed"]     { border-left-color: var(--route-closed); }

/* ------------------------------------------------------------- 판 읽는 법 */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.8rem;
  color: var(--ink-quiet);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-swatch {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  background: #122224;
  border: 1px solid #24393b;
  border-radius: 2px;
}

.legend-swatch[data-band="5"] { background: var(--band-5); border-color: var(--band-5); }
.legend-swatch[data-band="4"] { background: var(--band-4); border-color: var(--band-4); }
.legend-swatch[data-band="3"] { background: var(--band-3); border-color: var(--band-3); }
.legend-swatch[data-band="2"] { background: var(--band-2); border-color: var(--band-2); }
.legend-swatch[data-band="1"] { background: var(--band-1); border-color: var(--band-1); }

.legend-swatch.legend-route {
  background: #122224;
  border-left: 3px solid var(--ruled);
}

.legend-swatch.legend-route[data-route="open"]       { border-left-color: var(--route-open); }
.legend-swatch.legend-route[data-route="congested"]  { border-left-color: var(--route-congested); }
.legend-swatch.legend-route[data-route="restricted"] { border-left-color: var(--route-restricted); }
.legend-swatch.legend-route[data-route="closed"]     { border-left-color: var(--route-closed); }

.legend-swatch[data-held="held"] {
  background: #1a2a24;
  border-color: rgba(224, 163, 60, 0.7);
}

.legend-swatch[data-withdrawal="unfinished"] {
  background: #2a1a1a;
  border-color: var(--chinagraph);
}

.legend-swatch[data-scouts="with-gaps"] {
  border-style: dashed;
  border-color: var(--ink-faint);
}

/* ============================================================== 줄지어 선 것 */

.breaks,
.plain-list,
.finding-list,
.evidence-list,
.revisions,
.scenarios,
.groups {
  display: grid;
  gap: 0;
}

.event,
.report,
.break,
.generation,
.chain-link,
.revision,
.evidence-item,
.evidence,
.finding,
.plain-item,
.scenario,
.principle,
.record,
.pack,
.fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.1rem 0.55rem 0.75rem;
  border-left: 2px solid var(--rule);
  border-bottom: var(--rule-hair);
  font-size: 0.9rem;
  min-width: 0;
}

.finding,
.break { border-left-color: var(--chinagraph); }
.principle,
.pack { border-left-color: var(--lamp); }

.stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/*
 * 기록의 구멍은 표 안에서는 표의 줄로 서야 한다. 그러지 않으면 칸이 머리와
 * 어긋난다.
 */
table.grid tr.break {
  display: table-row;
  border-left: 0;
  border-bottom: 0;
  padding: 0;
  font-size: inherit;
}

table.grid tr.break td:first-child {
  border-left: 2px solid var(--chinagraph);
}

/* ================================================================= 괘선 표 */

.scrolls {
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

table.grid th,
table.grid td {
  padding: 0.45rem 0.9rem 0.45rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: var(--rule-hair);
  white-space: nowrap;
}

table.grid th {
  font-family: var(--lettering);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: var(--rule-line);
}

table.grid tbody tr:hover td {
  background: var(--table-lit);
}

tr.front-held td:first-child { box-shadow: inset 2px 0 0 var(--lamp); }
tr.front-withdrawal-unfinished td:first-child { box-shadow: inset 2px 0 0 var(--chinagraph); }

/* 순서를 고르는 단추 */
.sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0;
}

.sequence .way[data-chosen="chosen"] {
  color: var(--lamp);
  border-bottom-color: var(--lamp);
}

/* --------------------------------------------------------- 접어 둔 판독표 */

details.reading-table {
  border-top: var(--rule-line);
  padding: 1.2rem 0 1.4rem;
}

details.reading-table > summary {
  cursor: pointer;
  font-family: var(--lettering);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

details.reading-table > summary:hover,
details.reading-table > summary:focus-visible {
  color: var(--ink);
  outline: none;
}

details.reading-table[open] > summary {
  color: var(--ink-quiet);
}

details.reading-table .panel,
details.reading-table section {
  border-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ================================================================== 교범 */

.manual-section {
  border-top: var(--rule-hair);
}

.manual-line {
  color: var(--ink);
  font-family: var(--running);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 68ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre.manual-line {
  background: none;
  border: 0;
  padding: 0;
}

/* ====================================================== 아무것도 없을 때 */

.nothing,
.line-down {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
  padding: 3rem 1rem;
  border-top: var(--rule-line);
  color: var(--ink-quiet);
  font-size: 0.95rem;
}

.line-down {
  border: 1px dashed var(--chinagraph);
  border-radius: 2px;
  color: var(--chinagraph);
}

.line-down .note {
  color: var(--ink-quiet);
}

/* ============================================================= 눈에 띄기 */

:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  body { padding: 0 0.9rem 5rem; font-size: 14px; }
  h2 { font-size: 1.4rem; }
  .board { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); padding: 0.75rem; }
  .readings { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.2rem 1rem; }
}