/* Himank World — design system
   Direction: a school results sheet. Hairlines, tabular figures, one accent.
   Palette: ink navy on cool paper, lane teal for actions, brass only for a personal best. */

:root {
  --ink: #12283c;
  --ink-2: #2c4459;
  --muted: #61798c;
  --paper: #edf1f3;
  --surface: #ffffff;
  --line: #cfdae1;
  --line-soft: #e2e9ed;
  --accent: #0f6e68;
  --accent-press: #0b534e;
  --accent-tint: #e4f0ef;
  --pb: #8f6410;
  --pb-tint: #f7efdd;
  --ok: #1f7a4d;
  --warn: #a33a2a;

  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  --sp: 8px;
  --wrap: 1080px;
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-press); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; background: var(--surface);
  padding: 10px 14px; border: 1px solid var(--ink); z-index: 50; transition: top .15s;
}
.skip:focus { top: 12px; }

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 30;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 60px;
}
.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.brand svg { display: block; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-s);
  padding: 7px 11px; border-radius: var(--r); font-weight: 600;
}
.site-nav a:hover { background: var(--paper); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-tint); }

.who {
  font-size: var(--fs-xs); color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 12px; margin-left: 6px;
  white-space: nowrap;
}
.who b { color: var(--ink); font-weight: 600; }

@media (max-width: 660px) {
  .site-head .wrap { flex-wrap: wrap; gap: 8px; padding-block: 10px; }
  .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; gap: 2px; }
  .site-nav a { padding: 6px 9px; font-size: var(--fs-xs); }
  .who { margin-left: auto; border-left: 0; padding-left: 0; }
}

/* ---------- hero: the join line ---------- */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: clamp(36px, 7vw, 72px) 0 clamp(32px, 6vw, 60px);
}
.hero p.lede { font-size: var(--fs-lg); color: var(--ink-2); max-width: 46ch; }

.joinbox { margin-top: 28px; }
.joinbox > label {
  display: block; font-size: var(--fs-s); font-weight: 600;
  color: var(--ink-2); margin-bottom: 10px;
}
.code-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.code-cells { display: flex; gap: 6px; }
.code-cells input {
  width: 46px; height: 58px; text-align: center;
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 700;
  text-transform: uppercase; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line); border-bottom-width: 3px;
  border-radius: var(--r);
}
.code-cells input:focus-visible {
  background: var(--surface); border-bottom-color: var(--accent);
}
@media (max-width: 400px) {
  .code-cells input { width: 40px; height: 52px; font-size: 1.25rem; }
}

/* ---------- buttons ---------- */

.btn {
  font: inherit; font-weight: 600; font-size: var(--fs-s);
  padding: 11px 20px; min-height: 44px;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; transition: background-color .12s ease, color .12s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-press); color: #fff; }
.btn-quiet {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover { background: var(--paper); color: var(--ink); }
.btn-text { background: none; color: var(--accent); padding: 8px 4px; }
.btn-sm { padding: 7px 12px; min-height: 38px; font-size: var(--fs-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-danger { background: none; color: var(--warn); border-color: var(--line); }

/* ---------- sections ---------- */

.band { padding: clamp(40px, 6vw, 68px) 0; }
.band-alt { background: var(--surface); border-block: 1px solid var(--line); }
.band > .wrap > h2 { margin-bottom: 6px; }
.band-intro { color: var(--muted); max-width: 58ch; margin-bottom: 28px; }

/* two tools — deliberately different shapes, not a card kit */

.tools { display: grid; gap: 28px; }
@media (min-width: 760px) { .tools { grid-template-columns: 1.05fr 1fr; gap: 40px; } }

.tool-lead {
  border-top: 3px solid var(--ink);
  padding-top: 18px;
}
.tool-lead h3 { margin-bottom: 8px; }
.tool-lead ul { margin: 0 0 20px; padding-left: 18px; color: var(--ink-2); }
.tool-lead li { margin-bottom: 5px; }

/* results-sheet table */

.sheet-scroll { overflow-x: auto; }
.sheet {
  width: 100%; border-collapse: collapse;
  background: var(--surface); font-size: var(--fs-s);
}
.sheet caption {
  text-align: left; font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-s); color: var(--muted); padding-bottom: 8px;
}
.sheet th, .sheet td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.sheet thead th {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-xs);
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.sheet td.num, .sheet th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.sheet tr.is-next td { background: var(--accent-tint); }
.sheet tr.is-next td:first-child { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.sheet tr.is-done td:first-child { color: var(--muted); }
.tick { color: var(--ok); font-weight: 700; }

/* ---------- panels & forms ---------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(18px, 3vw, 26px);
}
.panel + .panel { margin-top: 20px; }
.panel > h3 { margin-bottom: 4px; }
.panel-note { color: var(--muted); font-size: var(--fs-s); margin-bottom: 18px; }

.field { margin-bottom: 16px; }
.field label, .field legend {
  display: block; font-size: var(--fs-s); font-weight: 600; margin-bottom: 6px; color: var(--ink-2);
}
.field .hint { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); display: block; margin-top: 4px; }
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  font: inherit; width: 100%; padding: 10px 12px; min-height: 44px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
textarea { min-height: 80px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
.row { display: grid; gap: 14px; }
@media (min-width: 620px) {
  .row-2 { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* option rows in the quiz builder / player */

.opt {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
  cursor: pointer;
}
.opt:hover { border-color: var(--muted); }
.opt input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.opt input[type="text"] { flex: 1; width: auto; min-width: 0; }
.opt span { flex: 1; }
.opt.is-right { border-color: var(--ok); background: #f0f8f3; }
.opt.is-wrong { border-color: var(--warn); background: #fbf1ef; }

/* ---------- small bits ---------- */

.tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--line);
}
.tag-pb { background: var(--pb-tint); color: var(--pb); border-color: #e6d3ac; }

.code-out {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.75rem); letter-spacing: .16em;
  color: var(--ink); background: var(--paper);
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 16px 18px; text-align: center; margin: 4px 0 16px;
}

/* The link is what actually gets sent, so it sits under the code and reads
   as one line, never wrapped into something unrecognisable. */
.link-out {
  font-size: var(--fs-s); color: var(--muted);
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 10px 12px; margin: 0 0 16px;
  overflow-wrap: anywhere; text-align: center;
}

/* Three small facts under the hero. Not badges, not a feature grid —
   the things someone actually weighs before trying a new site. */
.proof {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 40px;
  margin: 34px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.proof li { display: flex; flex-direction: column; }
.proof b {
  font-family: var(--f-display); font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
}
.proof span { font-size: var(--fs-xs); color: var(--muted); max-width: 22ch; }

.hero.deep { padding-bottom: clamp(34px, 5vw, 54px); }
.hero.deep h1 { letter-spacing: -0.03em; }

/* ================= deep water =================
   No wave graphics. A drawn wave reads as clip art at any size, and the
   sites this page competes with — federations, timing providers, kit brands
   — never use one. What they do use is depth, a hard edge, and a number big
   enough to be read from across a room. That is what is here.

   Depth comes from a single steep gradient; the lane markings are the same
   geometry used on the pool floor, straight lines vanishing into the dark. */

.waterhero {
  position: relative;
  isolation: isolate;
  padding: clamp(52px, 9vw, 104px) 0 clamp(48px, 8vw, 92px);
  background:
    radial-gradient(90% 120% at 88% 4%, rgba(56,190,204,.22), transparent 58%),
    linear-gradient(168deg, #10384f 0%, #0d2740 52%, #081a2b 100%);
  color: #e8f2f7;
  overflow: hidden;
  border-bottom: 3px solid var(--accent);
}

/* lane markings on the floor of the pool, in perspective */
.waterhero::before {
  content: "";
  position: absolute; inset: auto -30% -42% -30%; height: 78%;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.07) 0 2px, transparent 2px 84px);
  transform: perspective(300px) rotateX(58deg);
  transform-origin: bottom;
  pointer-events: none;
  z-index: -1;
}

.waterhero h1 {
  color: #fff;
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.waterhero .band-intro { color: #a9c6d6; max-width: 50ch; }
.waterhero .deep-kicker,
.waterhero .deep-kicker a { color: #5fcfcb; }

.waterhero .headline-num {
  color: #fff;
  font-size: clamp(3.4rem, 13vw, 6.2rem);
  line-height: .92;
  letter-spacing: -0.045em;
  margin: 18px 0 6px;
}
.waterhero .num-label {
  display: block;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: #6ea4bd; margin-bottom: 10px;
}

/* Club pages are working screens — the same water, much less of it. */
.waterhero--slim { padding: clamp(28px, 4.5vw, 46px) 0 clamp(26px, 4vw, 42px); }
.waterhero--slim .hero-line { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 6px; }
.waterhero--slim::before { display: none; }

.waves { display: none; }   /* retired: the drawn wave never looked like water */

@media print {
  .waterhero { background: none; color: var(--ink); padding: 0 0 12px; border-bottom: 2px solid var(--ink); }
  .waterhero::before { display: none; }
  .waterhero h1, .waterhero .headline-num { color: var(--ink); }
  .waterhero .band-intro, .waterhero .deep-kicker, .waterhero .num-label { color: var(--muted); }
}

/* One event, one line. Opens into its full history when asked.
   A swimmer with four seasons logged has a lot of rows, and a coach opening
   a profile wants the best time and the direction first, not a wall. */
.ev { border-bottom: 1px solid var(--line-soft); }
.ev:last-of-type { border-bottom: 0; }

.ev__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}
.ev__top::-webkit-details-marker { display: none; }
.ev__top:hover .ev__name { color: var(--accent); }

.ev__name { font-weight: 600; }
.ev__pool {
  display: inline-block; margin-left: 7px;
  font-family: var(--f-body); font-weight: 600;
  font-size: 0.7rem; letter-spacing: .06em;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; vertical-align: 2px;
}
.ev__best {
  font-family: var(--f-display); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: var(--fs-lg);
  grid-row: 1; grid-column: 2; text-align: right;
}
.ev__meta {
  grid-column: 1 / -1;
  font-size: var(--fs-xs); color: var(--muted);
}
.ev__body { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--muted); }

.ev[open] .ev__top { border-bottom: 1px solid var(--line-soft); }

.sheet-tight th, .sheet-tight td { padding: 5px 6px; font-size: var(--fs-xs); }
.sheet-tight { margin-bottom: 12px; }

/* ================= the lane =================
   A swimmer's question is never "what is the record" — it is "how far is
   the next one". So the ladder is drawn as a lane read from the bottom up:
   school meet at the water line, national best at the far end, and the
   swimmer's own mark sitting between two of them.

   Built from borders and gradients, no images and no script, so it prints
   and it still works on a phone with one bar of signal. */

.lane {
  --lane-w: 3px;
  position: relative;
  margin: 22px 0 26px;
  padding-left: 30px;
}

/* the rope: two-tone dashes, the way a lane divider reads from the deck */
.lane::before {
  content: "";
  position: absolute;
  left: 8px; top: 10px; bottom: 10px;
  width: var(--lane-w);
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--accent) 0 10px,
    var(--line) 10px 20px
  );
  opacity: .45;
}

.rung {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rung:last-child { border-bottom: 0; }

.rung::before {                       /* the node on the rope */
  content: "";
  position: absolute;
  left: -26px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
}

.rung__name { flex: 1; font-weight: 600; }
.rung__time {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
}
.rung__gap { font-size: var(--fs-xs); color: var(--muted); min-width: 74px; text-align: right; }

/* already behind you */
.rung.is-done::before { background: var(--accent); border-color: var(--accent); }
.rung.is-done .rung__name, .rung.is-done .rung__time { color: var(--ink-2); }
.rung.is-done .rung__gap { color: var(--accent); font-weight: 600; }

/* the one that matters: the next step up */
.rung.is-next {
  background: linear-gradient(90deg, var(--accent-tint), transparent 70%);
  border-radius: var(--r);
  padding-left: 10px;
  margin-left: -10px;
}
.rung.is-next::before {
  left: -16px;
  width: 15px; height: 15px; margin-top: -7px;
  background: var(--surface);
  border: 3px solid var(--accent);
}
.rung.is-next .rung__gap { color: var(--accent); font-weight: 700; font-size: var(--fs-s); }

/* where the swimmer actually is — sits between two rungs */
.lane__you {
  position: relative;
  margin: 2px 0 2px -10px;
  padding: 7px 12px;
  border-left: 3px solid var(--pb);
  background: var(--pb-tint);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--pb);
}

/* ================= water band =================
   One band at the top of a swim page. Layered, not a picture: three soft
   bands of the same navy, which reads as depth without costing a download. */

.deep {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15,110,104,.10), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--paper));
  border-bottom: 1px solid var(--line);
}
.deep::after {                        /* lane lines, fading with depth */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 46px,
    rgba(18,40,60,.05) 46px 47px
  );
  pointer-events: none;
}
.deep > .wrap { position: relative; }

.deep-kicker {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.headline-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 4px 0 2px;
}

@media print {
  .deep::after { display: none; }
  .lane::before { opacity: 1; background: var(--line); }
  .rung.is-next { background: none; }
}

/* Club module: coach roster and parent panel. */

/* Editing happens in the row, not on another page. */
.edit-row { width: 100%; display: grid; gap: 10px; }
@media (min-width: 620px) {
  .edit-row { grid-template-columns: 1fr 1fr; align-items: end; }
  .edit-row .actions, .edit-row [data-rowmsg] { grid-column: 1 / -1; }
}
.edit-row .field { margin-bottom: 0; }
.edit-row label { font-size: var(--fs-xs); }
.list-strip li:has(.edit-row) { background: var(--paper); border-radius: var(--r); padding: 12px; }
.howto-list { margin: 6px 0 10px; padding-left: 20px; }
.howto-list li { margin-bottom: 10px; font-size: var(--fs-s); }
#howto > summary { cursor: pointer; font-family: var(--f-display); font-weight: 600; }
#joinlink { overflow-wrap: anywhere; }
.club-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.club-bar h1, .club-bar h2 { margin: 0 0 2px; }
.sub { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

/* Growth report. It gets read twice — on a phone by a child, and on paper
   by a coach — so it has to survive being printed. */

.rep-top { padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 24px; }
.rep-top h2 { margin: 0 0 2px; }

.rep-sub { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

.rep-event { margin: 0 0 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.rep-event h3 { margin: 0 0 10px; }
.rep-pool { font-family: var(--f-body); font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }

.rep-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.rep-big { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 2rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rep-gain { margin: 6px 0 0; font-size: var(--fs-s); color: var(--ok); font-weight: 600; }

.rep-spark { flex: 0 1 260px; color: var(--accent); }
.spark { width: 100%; height: 56px; display: block; }
.rep-sparks { display: flex; flex-wrap: wrap; gap: 24px; margin: 14px 0 18px; color: var(--accent); }
.rep-sparks > div { flex: 1 1 200px; }

.sheet .is-best td { font-weight: 600; }
.sheet .down { color: var(--ok); }
.sheet .up { color: var(--muted); }
.delta { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }

.rep-growth { margin-top: 32px; }

@media print {
  .no-print, .site-head, .site-foot { display: none !important; }
  body { background: #fff; }
  main.band { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .rep-event { break-inside: avoid; }
  .sheet { font-size: 10pt; }
  a[href]::after { content: ""; }
}

/* Paste mode. Closed by default — most children type, most teachers paste. */
.paste-panel > summary {
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 600;
  margin-bottom: 4px;
}
.paste-panel > summary::marker { color: var(--muted); }
.paste-panel[open] > summary { margin-bottom: 10px; }
.paste-panel textarea { min-height: 160px; font-size: var(--fs-s); }

.paste-help {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.paste-help p { margin: 0 0 8px; }
.paste-help pre {
  margin: 0 0 10px;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-2);
}

.paste-msg { margin: 12px 0 0; font-size: var(--fs-s); min-height: 1.4em; }
.paste-msg.is-ok { color: var(--ok); }
.paste-msg.is-warn { color: var(--pb); }

/* How far along the quiz is. Quiet until it turns into permission to save. */
.qcount {
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-s);
}
.qcount.is-ready { border-left-color: var(--ok); color: var(--ok); }

/* The daily quiz. The only thing on the site that is different tomorrow,
   so it gets the one warm colour and everything else stays quiet. */
.panel-daily { border-color: var(--pb); box-shadow: inset 3px 0 0 var(--pb); }

.daily-date {
  font-size: var(--fs-xs); color: var(--muted);
  letter-spacing: .04em; margin: 0 0 2px;
}
.daily-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-lg); margin: 0 0 6px;
}
.daily-done {
  display: inline-block; margin: 10px 0 0;
  background: var(--pb-tint); color: var(--pb);
  border: 1px solid #e6d3ac; border-radius: var(--r);
  padding: 6px 10px; font-size: var(--fs-s);
}

.daily-strip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin-top: 20px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--pb); border-radius: var(--r);
}
.daily-strip .daily-title { margin: 0; }

/* Event lists on the swim pages: many short links, read down not across. */
.cols {
  columns: 2 14rem; column-gap: 28px;
  list-style: none; margin: 0 0 28px; padding: 0;
}
.cols li { break-inside: avoid; padding: 5px 0; }

.list-strip .ls-plays {
  display: block; font-size: var(--fs-xs); color: var(--accent); margin-top: 2px;
}

/* The one panel on the result screen that is asking for something. */
.panel-lead {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.panel-lead > h3 { margin-bottom: 0; }

.notice {
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  padding: 12px 14px; border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--fs-s); margin-bottom: 18px;
}
.notice-warn { border-left-color: var(--warn); background: #fbf1ef; }
.notice p:last-child { margin-bottom: 0; }

.empty {
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 28px 20px; text-align: center; color: var(--muted);
}
.empty p { margin-inline: auto; }

.list-strip {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.list-strip li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 2px; border-bottom: 1px solid var(--line-soft);
}
.list-strip .ls-main { flex: 1; min-width: 180px; }
.list-strip .ls-main b { display: block; font-weight: 600; }
.list-strip .ls-sub { font-size: var(--fs-xs); color: var(--muted); }
.list-strip .ls-val {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}

.stat-row { display: flex; flex-wrap: wrap; gap: 28px; margin: 18px 0 0; }
.stat b {
  display: block; font-family: var(--f-display); font-size: var(--fs-2xl);
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--fs-xs); color: var(--muted); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 16px 2px; font-weight: 600;
  font-family: var(--f-display); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 2px 16px; color: var(--ink-2); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--ink); color: #c3d2dd;
  padding: 40px 0 32px; font-size: var(--fs-s);
}
.site-foot a { color: #fff; }
.site-foot h4 { color: #fff; font-size: var(--fs-s); margin-bottom: 10px; }
.foot-grid { display: grid; gap: 26px; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 6px; }
.foot-base {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid #2c4459;
  font-size: var(--fs-xs); color: #91a7b6;
}

/* ---------- toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r);
  font-size: var(--fs-s); z-index: 60; max-width: calc(100% - 32px);
}
#toast[hidden] { display: none; }

.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}