/* 함께 운동 시간표
   Court floor colours: A is the green court surface, B is the yellow line paint,
   C is the blue of a hard court, D the maple of a gym floor. Dark, light, dark, light,
   and a letter on every mark. The minutes everyone shares are a mat striped green and yellow.
   Radius means "you can press this" (6px); data surfaces stay square. No shadows. */

:root {
  color-scheme: light;
  --court: #1e5b49;
  --line: #f1c232;
  --hard: #2b5c93;
  --maple: #d39b5e;
  --ink: #1a2e28;
  --muted: #56655f;
  --floor: #e4ebe6;
  --paper: #ffffff;
  --rule: #c9d4ce;
  --edge: #8a9a93;
  --seam: repeating-linear-gradient(135deg, var(--court) 0 3px, var(--line) 3px 6px);
  --hour: 34px;
  --press: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: 36px; line-height: 1.25; font-weight: 800; letter-spacing: -0.035em; max-width: 24em; }
h2 { font-size: 21px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; }
a { color: var(--court); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--court); outline-offset: 2px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.help { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 60ch; }

/* ---------- shell ---------- */
.site-header, main, .site-footer { max-width: 1240px; margin-inline: auto; padding-inline: 40px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; border-bottom: 1px solid var(--rule); }
.brand { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 10px 12px; font-size: 15px; color: var(--muted); text-decoration: none; border-radius: var(--press); }
.nav a:hover { color: var(--ink); background: var(--floor); }
.nav a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--court); border-radius: 0; }
main { padding-top: 48px; padding-bottom: 72px; }
.skip-link { position: absolute; left: 12px; top: 12px; z-index: 5; padding: 10px 16px; background: var(--paper); color: var(--ink); border: 2px solid var(--court); border-radius: var(--press); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 56px; padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.site-footer p + p { margin-top: 6px; }
.site-footer strong { color: var(--ink); }
.site-footer .disclaimer { color: var(--ink); font-weight: 600; }

/* ---------- shared marks and buttons ---------- */
.who {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; font-size: 14px; font-weight: 800; font-style: normal; line-height: 1;
}
.who-a { background: var(--court); color: #fff; }
.who-b { background: var(--line); color: var(--ink); }
.who-c { background: var(--hard); color: #fff; }
.who-d { background: var(--maple); color: var(--ink); }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px;
  border: 1.5px solid var(--edge); border-radius: var(--press); background: var(--paper);
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { border-color: var(--ink); }
.button.primary { background: var(--court); border-color: var(--court); color: #fff; padding-inline: 26px; }
.button.primary:hover { background: var(--ink); border-color: var(--ink); }
.text-button { font-weight: 600; }

/* ---------- input: two people filling in one sheet ---------- */
.intro { max-width: 760px; margin-bottom: 44px; }
.intro h1 + p { margin-top: 14px; font-size: 17px; color: var(--muted); max-width: 52ch; }
.intro p + p { margin-top: 12px; }
.example-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.default-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
.example-note { padding: 10px 14px; background: var(--floor); font-size: 15px; }

/* Questions, not form rows: the two that decide the trip are big, the rest are quiet. */
.sheet { position: relative; max-width: 860px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.ask { display: grid; gap: 16px; }
.ask legend { margin-bottom: 16px; }
.ask h2 { font-size: 24px; letter-spacing: -0.03em; }
.ask + .ask { margin-top: 44px; }
.optional { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--rule); }
.optional-lead { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.ask-quiet h2 { font-size: 18px; letter-spacing: -0.02em; }
.ask-quiet + .ask-quiet { margin-top: 36px; }
.help b { color: var(--ink); font-weight: 600; }

/* who is going: the roster grows and shrinks by submitting the form back to this page */
.roster-list { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; }
.roster-list li { display: inline-flex; align-items: center; gap: 10px; }
.roster-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.button.add { border-color: var(--court); color: var(--court); }
.button.add::before { content: "+"; margin-right: 8px; font-size: 19px; font-weight: 800; line-height: 1; }
.button.add:hover { background: var(--floor); }
.button.quiet { border-color: var(--rule); color: var(--muted); font-weight: 400; }
.button.quiet:hover { border-color: var(--edge); color: var(--ink); }

/* weekdays: 나 and 짝 share the same seven columns */
.week { display: grid; grid-template-columns: 26px repeat(7, 60px); gap: 8px; align-items: center; justify-content: start; }
.day { position: relative; display: block; cursor: pointer; }
.day input, .cell input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.day > span {
  display: grid; place-items: center; height: 48px; border: 1.5px solid var(--rule); border-radius: var(--press);
  font-size: 17px; font-weight: 600; color: var(--muted); background: var(--paper);
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.day:hover > span { border-color: var(--edge); color: var(--ink); }
.day-a input:checked + span { background: var(--court); border-color: var(--court); color: #fff; font-weight: 800; }
.day-b input:checked + span { background: var(--line); border-color: var(--ink); color: var(--ink); font-weight: 800; }
.day-c input:checked + span { background: var(--hard); border-color: var(--hard); color: #fff; font-weight: 800; }
.day-d input:checked + span { background: var(--maple); border-color: var(--ink); color: var(--ink); font-weight: 800; }
.day input:focus-visible + span, .cell input:focus-visible + span { outline: 3px solid var(--court); outline-offset: 2px; }
.both-label { grid-column: 1; font-size: 12px; color: var(--muted); line-height: 1.2; text-align: center; }
.both { display: block; height: 30px; }
.both > span {
  display: none; height: 100%; padding-top: 10px; text-align: center; font-size: 13px; font-weight: 800;
  background: var(--seam) top / 100% 6px no-repeat;
}
/* "함께" shows under a day only when every person on the sheet has picked it. */
.week-2:has(#a-d0:checked):has(#b-d0:checked) .both-0 > span,
.week-2:has(#a-d1:checked):has(#b-d1:checked) .both-1 > span,
.week-2:has(#a-d2:checked):has(#b-d2:checked) .both-2 > span,
.week-2:has(#a-d3:checked):has(#b-d3:checked) .both-3 > span,
.week-2:has(#a-d4:checked):has(#b-d4:checked) .both-4 > span,
.week-2:has(#a-d5:checked):has(#b-d5:checked) .both-5 > span,
.week-2:has(#a-d6:checked):has(#b-d6:checked) .both-6 > span,
.week-3:has(#a-d0:checked):has(#b-d0:checked):has(#c-d0:checked) .both-0 > span,
.week-3:has(#a-d1:checked):has(#b-d1:checked):has(#c-d1:checked) .both-1 > span,
.week-3:has(#a-d2:checked):has(#b-d2:checked):has(#c-d2:checked) .both-2 > span,
.week-3:has(#a-d3:checked):has(#b-d3:checked):has(#c-d3:checked) .both-3 > span,
.week-3:has(#a-d4:checked):has(#b-d4:checked):has(#c-d4:checked) .both-4 > span,
.week-3:has(#a-d5:checked):has(#b-d5:checked):has(#c-d5:checked) .both-5 > span,
.week-3:has(#a-d6:checked):has(#b-d6:checked):has(#c-d6:checked) .both-6 > span,
.week-4:has(#a-d0:checked):has(#b-d0:checked):has(#c-d0:checked):has(#d-d0:checked) .both-0 > span,
.week-4:has(#a-d1:checked):has(#b-d1:checked):has(#c-d1:checked):has(#d-d1:checked) .both-1 > span,
.week-4:has(#a-d2:checked):has(#b-d2:checked):has(#c-d2:checked):has(#d-d2:checked) .both-2 > span,
.week-4:has(#a-d3:checked):has(#b-d3:checked):has(#c-d3:checked):has(#d-d3:checked) .both-3 > span,
.week-4:has(#a-d4:checked):has(#b-d4:checked):has(#c-d4:checked):has(#d-d4:checked) .both-4 > span,
.week-4:has(#a-d5:checked):has(#b-d5:checked):has(#c-d5:checked):has(#d-d5:checked) .both-5 > span,
.week-4:has(#a-d6:checked):has(#b-d6:checked):has(#c-d6:checked):has(#d-d6:checked) .both-6 > span { display: block; }

/* one line per person, the two lines side by side where there is room */
.spans { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.span-line { display: flex; align-items: center; gap: 12px; }

/* The time window reads as one value, "18:00 – 22:00"; each half is a native select
   so the phone's own picker opens, nothing invalid can be typed, and 24:00 is a choice. */
.span {
  display: inline-flex; align-items: stretch; height: 52px;
  border: 1.5px solid var(--edge); border-radius: var(--press); background: var(--paper);
}
.span:hover { border-color: var(--ink); }
.span select {
  appearance: none; -webkit-appearance: none; height: 100%; width: 104px; padding: 0 26px 0 14px;
  border: 0; border-radius: var(--press); background: transparent; cursor: pointer;
  font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); text-align: center; text-align-last: center;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%);
  background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat;
}
.span select:focus-visible { outline: 3px solid var(--court); outline-offset: 0; }
.span-dash { display: grid; place-items: center; padding: 0 4px; font-size: 21px; font-weight: 800; color: var(--muted); }

input[type="number"], input[type="text"] {
  height: 46px; padding: 8px 12px; border: 1.5px solid var(--edge); border-radius: var(--press);
  background: var(--paper); color: var(--ink); font-size: 17px; font-weight: 600; min-width: 0;
}
.money { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.money input { width: 148px; text-align: right; }
input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
input:hover { border-color: var(--ink); }

/* Sports: one control language, two meanings. Same cell, same person colours;
   the left pair picks one sport (✓), the right pair strikes sports out (✕). */
/* One column of rows per sport; each row holds n "✓" cells, a gap, then n "✕" cells. */
.sport-cols { --cell: 46px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.sport-cols:not(.sport-cols-2) { grid-template-columns: minmax(0, 640px); }
.sport-head, .sport-row {
  display: grid; column-gap: 6px; align-items: center;
  grid-template-columns: minmax(0, 1fr) repeat(var(--n), var(--cell)) 10px repeat(var(--n), var(--cell));
}
.sport-head { row-gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.sh { grid-column: span var(--n); text-align: center; font-weight: 800; color: var(--ink); font-size: 14px; }
.sh-who { text-align: center; }
.sport-row { min-height: 46px; padding: 4px 0; }
.sport-row.is-all { border-bottom: 1px solid var(--rule); }
.sport-name { font-size: 15px; line-height: 1.3; }
.is-all .sport-name { font-weight: 600; }
.sport-row:has(.want input:checked:not([value=""])) .sport-name { font-weight: 800; }
.cell { position: relative; display: block; }
.cell > span {
  display: grid; place-items: center; height: 38px; border: 1.5px solid var(--rule); border-radius: var(--press);
  font-size: 13px; font-weight: 600; color: var(--muted); background: var(--paper);
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.cell:hover > span { border-color: var(--edge); color: var(--ink); }
.cell input:checked + span { font-weight: 800; font-size: 14px; }
.cell input:checked + span .mark::before { margin-right: 2px; }
.want input:checked + span .mark::before { content: "✓"; }
.skip input:checked + span .mark::before { content: "✕"; }
.cell-a input:checked + span { background-color: var(--court); border-color: var(--court); color: #fff; }
.cell-b input:checked + span { background-color: var(--line); border-color: var(--ink); color: var(--ink); }
.cell-c input:checked + span { background-color: var(--hard); border-color: var(--hard); color: #fff; }
.cell-d input:checked + span { background-color: var(--maple); border-color: var(--ink); color: var(--ink); }
.sheet-submit { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }

/* ---------- results ---------- */
.query { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; padding: 18px 0 22px; margin-bottom: 32px; border-block: 1px solid var(--rule); }
.query-title { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.query-lines { display: grid; gap: 10px; }
.query-lines li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; max-width: 64ch; }
.query-lines .who { margin-top: 1px; }
.query-lines b { font-weight: 800; }
.query-actions { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.share summary { padding-block: 11px; cursor: pointer; font-size: 15px; color: var(--court); }
.share-body { display: grid; gap: 8px; width: min(520px, 80vw); padding-bottom: 8px; }
.share-body input { width: 100%; font-size: 14px; font-weight: 400; }
.share-body a { font-size: 14px; }

.answer-head { margin-bottom: 24px; }
.answer-head .lead { margin-top: 14px; font-size: 19px; line-height: 1.55; max-width: 48ch; }
.answer-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }

/* the week board: a court floor with white lines */
.board { --rail: 40px; --days: repeat(7, minmax(0, 1fr)); --pad: 4px; --gap: 8px; background: var(--floor); padding: 4px 12px 14px 4px; }
.board-head, .board-body { display: grid; grid-template-columns: var(--rail) var(--days); }
.day-head { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 52px; padding-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--muted); }
.day-head small { font-size: 11px; font-weight: 800; line-height: 1.2; }
.day-head.is-common { color: var(--ink); font-weight: 800; box-shadow: inset 0 -4px 0 var(--ink); }
.board-body {
  position: relative; height: calc(var(--hours) * var(--hour));
  background: repeating-linear-gradient(to bottom, #fff 0 1px, transparent 1px var(--hour)) 40px 0 / calc(100% - 40px) 100% no-repeat;
}
.rail span { display: block; height: var(--hour); padding: 3px 8px 0 0; text-align: right; font-size: 12px; line-height: 1; color: var(--muted); }
.col { position: relative; border-left: 2px solid #fff; }
.col:last-child { border-right: 2px solid #fff; }
.window, .block, .seam { position: absolute; top: calc(var(--t) * var(--hour)); height: calc(var(--h) * var(--hour)); }
.block {
  display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
  padding: 2px; font-size: 11px; line-height: 1.15;
}
.block b { font-size: 14px; font-weight: 800; }
.window { background: rgba(255, 255, 255, 0.78); }
/* lane i of n: equal slices of the column, a gap between neighbours */
.lane {
  left: calc(var(--pad) + var(--lane) * (100% - 2 * var(--pad)) / var(--lanes) + var(--gap) / 2);
  width: calc((100% - 2 * var(--pad)) / var(--lanes) - var(--gap));
}
.block-a { background: var(--court); color: #fff; }
.block-b { background: var(--line); color: var(--ink); }
.block-c { background: var(--hard); color: #fff; }
.block-d { background: var(--maple); color: var(--ink); }
/* the shared minutes: one striped mat under every lane, showing in the gaps */
.seam { left: var(--pad); right: var(--pad); background: var(--seam); }
.lanes-4 { --gap: 6px; }
/* With 3–4 people the days nobody shares are narrow: keep the mark, drop the start time. */
.lanes-3 .col:not(.is-common), .lanes-4 .col:not(.is-common) { --gap: 3px; --pad: 2px; }
.lanes-3 .col:not(.is-common) .block-time, .lanes-4 .col:not(.is-common) .block-time { display: none; }
.lanes-3 .col:not(.is-common) .block, .lanes-4 .col:not(.is-common) .block { padding: 0; }
.board-key { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 14px 0 0 40px; font-size: 13px; color: var(--muted); }
.board-key > span { display: inline-flex; align-items: center; gap: 8px; }
.board-key .who { width: 20px; height: 20px; font-size: 11px; }
.key-seam { display: inline-block; width: 10px; height: 20px; background: var(--seam); }
.key-window { display: inline-block; width: 20px; height: 20px; background: #fff; }
.board-key .key-order { flex-basis: 100%; }

.answer-side { display: grid; gap: 20px; }
.answer-side .button { width: 100%; }
.total { font-size: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.total { color: var(--muted); }
.total strong { display: block; color: var(--ink); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }

.pair-detail { display: grid; gap: 22px; }
.course h3 { display: flex; align-items: flex-start; gap: 10px; }
.course h3 .who { margin-top: 1px; }
.course-time { margin: 6px 0 8px 36px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.course-time span { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.course-line { margin-left: 36px; font-size: 16px; }
.course-line strong { font-weight: 800; }
.fine { margin: 8px 0 0 36px; font-size: 13px; color: var(--muted); }
.fine > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
.fine dd { color: var(--ink); }

/* lists of combinations */
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 64px; }
.list h2 { padding-bottom: 8px; }
.list h2 span { margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.list > .help { margin: 10px 0 12px; }
.none { padding: 14px 0; color: var(--muted); }
.picks { border-top: 1px solid var(--rule); }
.pick { border-bottom: 1px solid var(--rule); }
.pick > a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px;
  padding: 14px 12px 14px 14px; color: var(--ink); text-decoration: none; font-size: 15px;
}
.pick > a:hover { background: var(--floor); }
.pick.is-selected > a { background: var(--floor); box-shadow: inset 5px 0 0 var(--ink); }
.pick-courses { display: grid; gap: 6px; min-width: 0; }
.pick-courses > span { display: flex; align-items: baseline; gap: 8px; }
.pick-courses .who { width: 20px; height: 20px; font-size: 11px; align-self: center; }
.pick-time { font-weight: 800; white-space: nowrap; }
.pick-facts { display: grid; justify-items: end; align-content: start; gap: 2px; font-size: 13px; color: var(--muted); text-align: right; }
.pick-fee { font-size: 17px; font-weight: 800; color: var(--ink); }
.pick-state { margin-top: 4px; font-weight: 800; color: var(--ink); }

/* no combination: suggestions take the board's place */
.suggest-title { margin-bottom: 4px; }
.suggestions { display: grid; gap: 28px; }
.suggestion { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px 48px; padding: 24px 0 28px; border-top: 1px solid var(--rule); }
.suggestion-main { display: grid; gap: 20px; align-content: start; justify-items: start; }
.witness { padding: 20px; background: var(--floor); }
.witness-title { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.witness-total { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); }
.witness-total strong { display: block; font-size: 21px; color: var(--ink); }
.changes li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 600; }
.changes li + li { margin-top: 10px; }
.changes .who { margin-top: 1px; }
.cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 15px; color: var(--muted); }
.cost b { font-size: 19px; font-weight: 800; color: var(--ink); }
.method { margin-top: 28px; max-width: 70ch; font-size: 14px; color: var(--muted); }
.method summary { cursor: pointer; color: var(--court); font-size: 15px; padding: 8px 0; }
.method p + p { margin-top: 8px; }
.empty { padding: 22px 24px; background: var(--floor); }
.empty h2, .empty h3 { margin-bottom: 8px; }
.empty a { display: inline-block; margin-top: 10px; }

/* ---------- evidence ---------- */
.page-head { margin-bottom: 36px; }
.page-head p { margin-top: 12px; color: var(--muted); }
.provenance h2 { padding-bottom: 8px; border-bottom: 3px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); font-size: 15px; }
.facts .hash { overflow-wrap: anywhere; letter-spacing: 0.02em; }
.notes { margin-top: 18px; max-width: 70ch; font-size: 14px; color: var(--muted); }
.notes p + p { margin-top: 8px; }
.raw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.raw h2 { display: flex; align-items: flex-start; gap: 10px; }
.raw h2 .who { margin-top: 2px; }
.raw-summary { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 16px 36px; font-size: 15px; }
.raw-summary dt { font-size: 13px; color: var(--muted); }
.raw-summary dd { font-weight: 600; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
caption { text-align: left; padding: 10px 0; font-size: 14px; font-weight: 600; border-bottom: 3px solid var(--ink); }
th, td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
thead th { font-size: 13px; color: var(--muted); font-weight: 600; }
tbody th { width: 38%; font-weight: 400; color: var(--muted); }
.back { margin-top: 48px; }

/* ---------- error ---------- */
.error { max-width: 640px; }
.error-reason { margin: 20px 0 8px; padding: 14px 18px; background: var(--floor); font-size: 19px; font-weight: 600; }
.error > p:not(.error-reason) { color: var(--muted); margin-bottom: 28px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1080px) {
  .answer-body { grid-template-columns: minmax(0, 1fr); }
  .answer-side { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .answer-side .pair-detail { grid-row: span 2; }
  .suggestion { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .site-header, main, .site-footer { padding-inline: 20px; }
  .sport-cols { grid-template-columns: minmax(0, 1fr); }
  .sport-col + .sport-col .sport-head { display: none; }
  .query { grid-template-columns: minmax(0, 1fr); }
  .lists, .raw-pair { grid-template-columns: minmax(0, 1fr); }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  :root { --hour: 30px; }
  h1 { font-size: 26px; }
  main { padding-top: 28px; padding-bottom: 48px; }
  .site-header { min-height: 58px; padding-inline: 12px 8px; }
  .brand { font-size: 16px; }
  .nav a { padding: 10px 8px; font-size: 14px; }
  .intro { margin-bottom: 28px; }
  .intro h1 + p { font-size: 16px; }
  .week { grid-template-columns: 22px repeat(7, minmax(0, 1fr)); gap: 5px; justify-content: stretch; }
  .week .who { width: 22px; height: 22px; font-size: 12px; }
  .day > span { height: 44px; font-size: 16px; }
  .both-label { font-size: 10px; }
  .ask h2 { font-size: 21px; }
  .ask-quiet h2 { font-size: 17px; }
  .spans { flex-direction: column; }
  .span-line { gap: 10px; }
  .span { flex: 1; }
  .span select { flex: 1; width: auto; min-width: 0; font-size: 20px; }
  .span-line { width: 100%; }
  .witness { padding: 16px; margin-inline: -4px; }
  .answer-head .lead { font-size: 17px; }
  .sheet-submit .button { width: 100%; }
  .answer-side { grid-template-columns: minmax(0, 1fr); }
  .board { margin-inline: -20px; padding: 4px 8px 12px 0; }
  .board { --rail: 30px; --pad: 2px; --gap: 5px; }
  .lanes-3, .lanes-4 { --gap: 3px; }
  .board-body { background-position: 30px 0; background-size: calc(100% - 30px) 100%; }
  .rail span { padding-right: 5px; font-size: 11px; }
  .day-head { font-size: 15px; }
  .block { padding: 1px; }
  .block b { font-size: 12px; }
  .lanes-4 .block b { font-size: 11px; }
  .lanes-3 .col:not(.is-common), .lanes-4 .col:not(.is-common) { --gap: 2px; --pad: 1px; }
  .lanes-3 .col:not(.is-common) .block b, .lanes-4 .col:not(.is-common) .block b { font-size: 10px; letter-spacing: -0.05em; }
  .sport-cols { --cell: 42px; }
  .sport-cols-3 { --cell: 36px; }
  .sport-cols-4 { --cell: 30px; }
  .sport-cols-3 .sport-head, .sport-cols-3 .sport-row,
  .sport-cols-4 .sport-head, .sport-cols-4 .sport-row { column-gap: 3px; }
  .sport-cols-4 .cell > span { height: 34px; font-size: 12px; }
  .sport-cols-4 .sport-name { font-size: 14px; }
  .block-time { display: none; }
  .board-key { padding-left: 12px; }
  .course-time, .course-line, .fine { margin-left: 0; }
  .pick > a { grid-template-columns: minmax(0, 1fr); padding-inline: 10px; }
  .pick-facts { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 12px; align-items: baseline; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .changes li { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .day input:checked + span, .cell input:checked + span { outline: 3px solid Highlight; outline-offset: -4px; }
  .block, .seam, .who, .key-seam { forced-color-adjust: none; }
}