/* ---------------------------------------------------------------------------
   Used one-handed, mid-set, in bad gym lighting.

   Decoration has a rule about where it's allowed:

     CHROME       — page header, bottom tab bar, primary buttons, empty states,
                    focus and active states. Gradients and glows live here.
     DATA SURFACE — any card where a number gets read, and the whole gym
                    screen. Flat fills, high contrast, no gradient, no glow.
                    Legibility beats richness on the surfaces you read mid-set.

   Glows take their colour from the discipline palette, never white, and never
   sit on text. Every gradient covering real area carries a noise overlay,
   because dark gradients band badly on OLED.
   --------------------------------------------------------------------------- */

:root {
  /* Ground. Near-true-black, so the discipline colours gain contrast rather
     than being dulled to sit against a lighter field. */
  --deep:     #060B0F;   /* page */
  --slab:     #0E1720;   /* cards */
  --raise:    #16232E;   /* chips and other RAISED, tappable things */
  --line:     #1D2C38;   /* hairlines */

  /* Text inputs are wells, not buttons: they sit BELOW their card, not above
     it. --raise is for things you press; this is for things you type into. */
  --sunken:   #0A1219;

  --chalk:    #E4EAED;   /* text */
  --mute:     #7C93A3;   /* secondary text */

  --swim:     #2BB3C0;
  --bike:     #F0A202;
  --run:      #E4572E;
  --strength: #9C8CD4;
  --soccer:   #4FA95C;

  --warn:     #F0A202;
  --good:     #4FA95C;

  --accent:   var(--mute);        /* per-card, set by [data-sport] */
  --chrome:   var(--swim);        /* the app's own accent, for chrome glows */

  /* Spacing — 4px base, and nothing off it. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;

  /* Type — real steps, reinforced by family and case, never a 1-2px nudge. */
  --t-title:   34px;   /* page title      Barlow Condensed, uppercase */
  --t-section: 22px;   /* section head    Barlow Condensed, uppercase */
  --t-card:    18px;   /* card title      Barlow Condensed, uppercase */
  --t-body:    15px;   /* body            IBM Plex Sans */
  --t-meta:    11px;   /* labels, meta    Barlow Condensed, uppercase */
  --t-stat:    32px;   /* headline number IBM Plex Mono */
  --t-figure:  17px;   /* inline number   IBM Plex Mono */

  --tap:    44px;
  --radius: 4px;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-well: inset 0 1px 3px rgba(0, 0, 0, 0.55);

  --ease: 150ms ease;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cond: "Barlow Condensed", var(--sans);

  /* Dither for large gradient areas. Inline SVG turbulence — no network. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-sport="swim"]     { --accent: var(--swim); }
[data-sport="bike"]     { --accent: var(--bike); }
[data-sport="run"]      { --accent: var(--run); }
[data-sport="strength"] { --accent: var(--strength); }
[data-sport="soccer"]   { --accent: var(--soccer); }
[data-sport="other"]    { --accent: var(--mute); }

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

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

body {
  margin: 0;
  background: var(--deep);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

h1, h2, h3, .eyebrow, .tab, .btn, legend, label, .label, .sport-name, .stat .k {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

h1 { font-size: var(--t-title);   line-height: 1.05; margin: 0; }
h2 { font-size: var(--t-section); line-height: 1.15; margin: 0 0 var(--s3); }
h3 { font-size: var(--t-card);    line-height: 1.2;  margin: 0; }

.eyebrow { font-size: var(--t-meta); color: var(--mute); margin: 0 0 var(--s1); }

/* EVERY number, without exception. Tabular figures so digits line up in a
   column and a changing value never shifts the layout around it. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
}

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

.wrap { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 var(--s4); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s4); top: var(--s2); z-index: 100;
  background: var(--raise); padding: var(--s3) var(--s4); border-radius: var(--radius);
}

/* --- Chrome: page header -------------------------------------------------- */
/* Gradient + dither. Chrome, not a data surface. */

.topbar {
  position: relative;
  isolation: isolate;
  padding: var(--s4) 0 var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #12202B 0%, var(--deep) 100%);
}

.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.045;
  pointer-events: none;
}

/* The gym screen is read mid-set. No gradient anywhere on it. */
.surface-data .topbar { background: var(--deep); }
.surface-data .topbar::after { display: none; }

.topbar .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
}

/* --- Data surface: cards -------------------------------------------------- */
/* Flat fill, hairline border, soft shadow for elevation. No gradients here. */

.card {
  position: relative;
  background: var(--slab);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s2);
}

.card.plain { border-left-color: var(--line); }

.card-pad { padding: var(--s3) var(--s4); }

/* Session card: content is a link, delete is its own control beside it. */
.session { display: grid; grid-template-columns: 1fr var(--tap); overflow: hidden; }

.session-main {
  display: block;
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .session-main, .chip, .btn, .tab, .sportgrid a, .btn-del {
    transition: background-color var(--ease), border-color var(--ease),
                box-shadow var(--ease), color var(--ease), opacity var(--ease);
  }
}

.session-main:active { background: var(--raise); }

.session-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.sport-name { font-size: var(--t-card); color: var(--accent); }

.session-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin-top: var(--s2);
}

/* Numbers outrank their labels: bigger, brighter, heavier. */
.session-stats .label {
  font-size: var(--t-meta);
  color: var(--mute);
  margin-right: var(--s1);
}
.session-stats .num { font-size: var(--t-figure); color: var(--chalk); }

.notes {
  margin: var(--s2) 0 0;
  color: var(--mute);
  font-size: var(--t-body);
}

.meta { color: var(--mute); font-size: var(--t-meta); }
.meta.num { font-size: 13px; }

.section { margin-bottom: var(--s6); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.section-head h2 { margin: 0; }

/* --- Delete --------------------------------------------------------------- */

.session-del { display: flex; }

.btn-del {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--mute);
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.btn-del:hover, .btn-del:active { color: var(--run); background: var(--raise); }

/* Two-step confirm. Covers the card so the destructive tap is deliberate and
   can't be reached by the same reflex that opened it. */
.session-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  background: var(--slab);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* On a full-width card (the session edit screen) the panel covers all of it. */
.card-pad > .session-confirm { border-radius: var(--radius); }

.session-confirm p {
  flex: 1;
  margin: 0;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 14px;
  color: var(--chalk);
}

.session-confirm .btn { min-height: 36px; padding: 0 var(--s3); font-size: 14px; }

/* --- Quick log ------------------------------------------------------------ */

.sportgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }

@media (max-width: 380px) { .sportgrid { grid-template-columns: repeat(2, 1fr); } }

.sportgrid a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--s2) var(--s1);
  background: var(--slab);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--chalk);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-card);
}

.sportgrid a:active {
  background: var(--raise);
  box-shadow: var(--shadow-card), 0 0 18px -4px var(--accent);
}

/* --- Stats ---------------------------------------------------------------- */

.statrow { display: flex; gap: var(--s5); flex-wrap: wrap; }

.stat .k { display: block; font-size: var(--t-meta); color: var(--mute); }

.stat .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-stat);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.stat .v .unit { font-size: 13px; color: var(--mute); font-weight: 500; }

/* --- Volume bars ---------------------------------------------------------- */

.bars { display: flex; flex-direction: column; gap: var(--s2); }

.bar-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: var(--s3);
}

.bar-label {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 13px;
  color: var(--accent);
}

/* Both need an explicit `display: block`: width and height do not apply to
   inline boxes. The track only works by accident (it's a grid item, and grid
   blockifies its children) but the fill is inside the track, which is not a
   grid container — without this every bar renders as an empty track. */
.bar-track {
  display: block;
  height: 10px;
  background: var(--sunken);
  border-radius: 2px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.bar-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--t-figure);
  min-width: 58px;
  text-align: right;
}

/* --- Forms ---------------------------------------------------------------- */

.field { margin-bottom: var(--s4); }

label, legend {
  display: block;
  font-size: var(--t-meta);
  color: var(--mute);
  margin-bottom: var(--s2);
  padding: 0;
}

/* Recessed: darker than the card they sit in, with an inner shadow. */
input[type="text"], input[type="number"], input[type="date"],
input[type="time"], input[type="password"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-well);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 16px;                /* 16px stops iOS zooming on focus */
  padding: var(--s3);
}

input[inputmode="decimal"], input[inputmode="numeric"],
input[type="date"], input[type="time"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

textarea { min-height: 76px; resize: vertical; font-size: 16px; }

input::placeholder, textarea::placeholder { color: var(--mute); opacity: 1; }

fieldset { border: 0; margin: 0 0 var(--s4); padding: 0; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.row-dist { display: grid; grid-template-columns: 1fr 96px; gap: var(--s2); }

/* Form groups are cards, which is what gives the recessed inputs something to
   be recessed INTO. */
.formcard { padding: var(--s4); margin-bottom: var(--s3); }
.formcard > :last-child { margin-bottom: 0; }

/* Chips: radios that look and behave like buttons. One tap, no drag, no JS,
   and still keyboard and screen-reader operable. Raised, not recessed. */
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s3);
  margin: 0;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--chalk);
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.chip.num-chip { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Active state glow — discipline colour, on the container, never on the text. */
.chip:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--deep);
  box-shadow: 0 0 20px -4px var(--accent);
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
  box-shadow: 0 0 20px -4px var(--accent);
}

.effortrow { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--s1); }
.effortrow .chip { min-width: 0; padding: 0; font-size: 15px; }

.hint { color: var(--mute); font-size: 13px; margin: var(--s2) 0 0; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raise);
  color: var(--chalk);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

/* Chrome: gradient fill and a glow, both in the discipline colour. */
.btn-primary {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 100%, #fff 8%) 0%,
              color-mix(in srgb, var(--accent) 84%, #000) 100%);
  color: var(--deep);
  font-size: 19px;
  box-shadow: 0 6px 20px -6px var(--accent);
}

.btn-primary:active { box-shadow: 0 2px 10px -6px var(--accent); }

/* For actions that aren't about one discipline. A generic "Log a session"
   button must not wear the run colour — discipline colour is information, and
   borrowing it for chrome makes it a lie. Chrome uses the chrome accent. */
.btn-chrome { --accent: var(--chrome); }

.btn-danger { color: var(--run); border-color: color-mix(in srgb, var(--run) 40%, var(--line)); }
.btn-danger:active { background: color-mix(in srgb, var(--run) 18%, var(--raise)); }

.formactions { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s4); }
.formactions .btn { flex: 0 0 auto; }

/* --- Flash / errors ------------------------------------------------------- */

.flash, .errors {
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  background: var(--slab);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}

.errors { border-left-color: var(--warn); }
.errors ul { margin: 0; padding-left: var(--s5); }

.under { color: var(--warn); }

/* --- Empty states --------------------------------------------------------- */
/* Designed, with a next action. Chrome, so a gradient accent is allowed. */

.empty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--chrome) 9%, var(--slab)) 0%,
              var(--slab) 62%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s5) var(--s4);
  text-align: left;
}

.empty::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
}

.empty h3 { margin: 0 0 var(--s2); color: var(--chalk); }
.empty p  { margin: 0 0 var(--s4); color: var(--mute); font-size: var(--t-body); max-width: 40ch; }
.empty p:last-child { margin-bottom: 0; }
.empty .btn { min-width: 180px; }

/* Data surfaces keep their empty states flat too. */
.surface-data .empty { background: var(--slab); }
.surface-data .empty::after { display: none; }

/* --- Data surfaces: strip every gradient and glow -------------------------- */
/*
   The gym screens get used mid-set in bad lighting, so the decoration rule
   says flat and high-contrast. That has to cover the shared components too —
   a primary button carries a gradient fill and a coloured glow everywhere
   else in the app, and both have to come off here. Solid fill, hard edges,
   nothing bleeding.
*/

.surface-data .btn-primary {
  background: var(--accent);
  box-shadow: none;
}

.surface-data .chip:has(input:checked) { box-shadow: none; }
.surface-data .chip:has(input:focus-visible) { box-shadow: none; }
.surface-data .sportgrid a:active { box-shadow: none; }
.surface-data .card,
.surface-data .flash,
.surface-data .errors { box-shadow: none; }

/* The focus ring itself stays — it's an accessibility floor, not decoration.
   Only the coloured halo behind it goes. */
.surface-data input:focus-visible,
.surface-data textarea:focus-visible,
.surface-data select:focus-visible { box-shadow: var(--shadow-well); }

/* --- Week nav ------------------------------------------------------------- */

.weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.weeknav .btn { min-width: var(--tap); padding: 0 var(--s4); }
.weeknav .label { text-align: center; margin: 0; font-size: 13px; }

.daystrip { display: flex; flex-direction: column; gap: var(--s1); }

.dayrow {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.dayrow .dow {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--mute);
}

.dayrow.rest { opacity: 0.45; }
.dayrow.rest .spark { background: var(--sunken); border-radius: 2px; }

.spark { display: flex; gap: 3px; height: 10px; align-items: stretch; }
.spark span { display: block; border-radius: 1px; min-width: 3px; }

/* --- Gym: template list --------------------------------------------------- */

.ex-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.exlist { list-style: none; margin: 0 0 var(--s4); padding: 0; }

.exlist li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.exlist li:last-child { border-bottom: 0; }

.exlist-name   { font-size: var(--t-body); }
.exlist-target { font-family: var(--mono); font-variant-numeric: tabular-nums;
                 font-size: var(--t-figure); color: var(--mute); }

/* --- Gym: logging screen -------------------------------------------------- */
/* Everything below is flat by design. This is the screen that gets read
   mid-set in bad lighting, so contrast wins over richness — no gradients, no
   glows, nothing that costs legibility. */

.workbar {
  display: flex;
  gap: var(--s6);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.exercise {
  background: var(--slab);
  border: 1px solid var(--line);
  border-left: 4px solid var(--strength);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.exercise h3 { font-size: var(--t-card); }

.ex-target { color: var(--mute); font-size: var(--t-figure); }

.ex-note {
  margin: 0 0 var(--s3);
  color: var(--warn);
  font-size: 13px;
}

/* THE GHOST ROW.
   The one place on this screen to spend boldness: last session's sets, large
   and monospace, sitting directly above the input. Faded so it reads as
   history rather than as something you typed, but big enough to be the thing
   your eye lands on when you look up mid-set. */
.ghost-label {
  margin: 0 0 var(--s1);
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--mute);
}

.ghost {
  margin: 0 0 var(--s4);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--chalk);
  opacity: 0.5;
}

@media (max-width: 380px) { .ghost { font-size: 22px; } }

/* No history is a real state, not an empty row. */
.ghost-none {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  opacity: 0.55;
}

.stall {
  margin: calc(var(--s4) * -1 + var(--s2)) 0 var(--s4);
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--warn);
  background: var(--sunken);
  color: var(--warn);
  font-size: 13px;
}

/* --- Completed set chips -------------------------------------------------- */

.setchips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  padding: 0;
}

.setchip {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 0 var(--s1) 0 var(--s3);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.setchip .num { font-size: var(--t-figure); color: var(--chalk); }

/* Beat the equivalent set from last time. */
.setchip.beat { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }

.setchip .pr {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--good);
}

/* Every set individually deletable — mistyping is expected. */
.setdel { display: flex; }

.setdel button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: 0;
  color: var(--mute);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.setdel button:hover, .setdel button:active { color: var(--run); }

/* --- Set input ------------------------------------------------------------ */

.setinputs {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--s2);
  align-items: end;
}

.setinputs input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 17px;
  text-align: center;
}

.btn-set {
  min-height: var(--tap);
  padding: 0 var(--s4);
  border: 1px solid var(--strength);
  border-radius: var(--radius);
  background: var(--strength);
  color: var(--deep);
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.btn-set:active { filter: brightness(0.92); }

@media (max-width: 380px) {
  .setinputs { grid-template-columns: 1fr 1fr; }
  .btn-set { grid-column: 1 / -1; }
}

/* --- Finish summary ------------------------------------------------------- */

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.summary-row:last-child { border-bottom: 0; }

.summary-name { font-size: var(--t-body); }
.summary-sets { font-size: 14px; color: var(--mute); text-align: right; }

/* --- Template editor ------------------------------------------------------ */

.txrow { margin-bottom: var(--s3); }
.txmove { flex-wrap: wrap; }
.txmove .btn { min-width: var(--tap); padding: 0 var(--s3); }
.txmove .btn[disabled] { opacity: 0.35; cursor: default; }

/* --- Food: fuel bars ------------------------------------------------------ */
/* Bars fill toward a FLOOR. Under is a warning; over is simply full. There is
   no over-limit state anywhere in this app. */

.fuelbars { display: flex; flex-direction: column; gap: var(--s4); }

/* Informational by default: a day in progress is under its floor by
   definition. Green only once the floor is actually cleared. Nothing here
   goes amber — that colour belongs to the under-fuelled-after-training
   interruption, which is the only thing worth alarming about. */
.fuelbar { --accent: var(--chrome); }
.fuelbar.is-met { --accent: var(--good); }

.fuelbar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.fuelbar-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--chalk);
}

.fuelbar-value .of {
  font-size: 13px;
  color: var(--mute);
  font-weight: 500;
  margin-left: var(--s2);
}

.fuelbar-note {
  margin: var(--s2) 0 0;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--mute);
}

/* Carbs and fat: present, deliberately quieter than the two that matter. */
.minormacros {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.minormacros .label { font-size: var(--t-meta); color: var(--mute); margin-right: var(--s2); }
.minormacros .num { font-size: var(--t-figure); color: var(--mute); }

/* --- Food: quick log ------------------------------------------------------ */

.quicklist { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: var(--s2); }

.quickrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.quicktap { display: flex; }

.quicktap button {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  background: none;
  border: 0;
  color: var(--chalk);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}

.quicktap button:active { background: var(--raise); }

.quick-name { font-size: var(--t-body); font-weight: 500; }
.quick-meta { font-size: 13px; color: var(--mute); }
.quick-meta .num { font-size: 13px; }

.quick-edit {
  display: flex;
  align-items: center;
  padding: 0 var(--s4);
  border-left: 1px solid var(--line);
  color: var(--mute);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 13px;
}

.quick-edit:active { background: var(--raise); color: var(--chalk); }

/* --- Food: source provenance ---------------------------------------------- */

.sourcecard { border-left: 4px solid var(--warn); }
.sourcecard.is-official { border-left-color: var(--good); }

.source-label {
  margin: 0 0 var(--s2);
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--mute);
}

.sourcecard.is-official .source-label { color: var(--good); }

/* The citation is a real link — tappable, and obviously one. */
.source-link {
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
  color: var(--chalk);
  font-size: var(--t-body);
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Marks figures taken from an official published page. */
.src {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line));
  border-radius: 2px;
  padding: 0 4px;
}

/* Marks numbers that came from an estimate and were never checked. */
.est {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: 2px;
  padding: 0 4px;
}

/* --- Food: entries -------------------------------------------------------- */

.entryactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.servingform { display: flex; align-items: center; gap: var(--s2); }
.servingform label { margin: 0; white-space: nowrap; }
.servingform input {
  width: 68px;
  min-height: 40px;
  padding: var(--s2);
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.servingform .btn { min-height: 40px; padding: 0 var(--s3); }
.entryactions .btn-danger { min-height: 40px; padding: 0 var(--s3); margin-left: auto; }

.stage {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--warn);
  margin: 0 var(--s2);
}

/* --- Chrome: bottom tab bar ----------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, #14212C 0%, #080F15 100%);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  /* Clips the active-tab glow to the bar. Without it the blur spills upward
     and lands on whatever heading happens to be scrolled to the bottom of the
     page, which reads as a rendering fault and dims the text under it. */
  overflow: hidden;
}

.tabbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: var(--mute);
  text-decoration: none;
  font-size: 14px;
}

/* Active tab: a bar and a soft glow in the chrome accent, above the label so
   the glow never touches the text. */
.tab[aria-current="page"] { color: var(--chalk); }

.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: var(--chrome);
  box-shadow: 0 0 14px 1px var(--chrome);
}

.tab:focus-visible { outline: 2px solid var(--chalk); outline-offset: -4px; }

/* --- Accessibility floor -------------------------------------------------- */
/* The ring stays chalk — it has to survive bad lighting. The glow behind it
   carries the colour. */

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

input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: var(--shadow-well), 0 0 18px -4px var(--chrome);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[hidden] { display: none !important; }

/* ===========================================================================
   Home screen
   ---------------------------------------------------------------------------
   Dense by design: the whole point is answering "where am I" without
   scrolling. Panes are tighter than the cards elsewhere, and every number
   stays flat and high-contrast — the decoration rule applies here, so chrome
   (buttons, tab bar) may glow and data surfaces may not.
   =========================================================================== */

.pane {
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* Tight on purpose: the whole point of this screen is that the answers fit
     without scrolling, so vertical space is the scarce resource. */
  padding: var(--s2) var(--s3) var(--s3);
  margin-bottom: var(--s2);
}

.pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}
.pane-head h2 { margin: 0; font-size: var(--t-section); }

.pane-empty { margin: 0; color: var(--mute); font-size: var(--t-body); }
.paneActions { margin-top: var(--s2); }
.paneActions .btn { width: 100%; min-height: var(--tap); font-size: 17px; }

/* --- The one interruption ------------------------------------------------- */

.alert {
  background: var(--slab);
  border: 1px solid color-mix(in srgb, var(--run) 40%, var(--line));
  border-left: 4px solid var(--run);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
}
.alert.is-warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  border-left-color: var(--warn);
}

.alert-head {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--chalk);
}
.alert-body { margin: var(--s2) 0 0; font-size: 14px; color: var(--mute); }

/* --- Today's sessions ----------------------------------------------------- */

.doneList { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: var(--s2); }

.doneRow a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 3px solid var(--accent);
  color: var(--chalk);
  text-decoration: none;
}

.doneSport {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-cardtitle);
  color: var(--accent);
}

.doneStats { font-size: var(--t-figure); color: var(--chalk); white-space: nowrap; }

/* --- Pace ----------------------------------------------------------------- */
/* Behind pace is information, not a failure: the marker is neutral chalk and
   the note is muted. Only the floor itself uses the warning colour. */

.bar-track { position: relative; }

.pace-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--chalk);
  opacity: 0.55;
  border-radius: 1px;
}

.pace-note {
  margin: var(--s1) 0 0;
  font-size: 13px;
  color: var(--mute);
}

.fuelbar + .fuelbar { margin-top: var(--s3); }

/* --- Shoulder load -------------------------------------------------------- */

.shoulder { display: flex; align-items: center; gap: var(--s4); }

.shoulder-count {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--swim);
}
.shoulder.is-over .shoulder-count { color: var(--warn); }

.shoulder-body { display: flex; flex-direction: column; gap: 2px; }
.shoulder-of {
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--mute);
}
.shoulder-of .num { font-size: var(--t-figure); color: var(--chalk); }
.shoulder-note { margin: 0; font-size: 13px; color: var(--warn); }
.shoulder-note.quiet { color: var(--mute); }

/* --- Stalled lifts -------------------------------------------------------- */

.stallList { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: var(--s2); }
.stallRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.stallName { font-size: var(--t-body); color: var(--chalk); }
.stallHint { font-size: 13px; color: var(--warn); }

.emptyActions { margin-top: var(--s4); }
.emptyActions .btn { width: 100%; }

/* ===========================================================================
   Week view
   =========================================================================== */

.trend {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  height: 96px;
}
.trend-short { height: 64px; }

.trendCol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
  min-width: 0;
  height: 100%;
}

.trendBarWrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--sunken);
  border-radius: 2px;
  overflow: hidden;
}

.trendBar {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--mute);
  border-radius: 2px 2px 0 0;
}

.trendCol.is-current .trendBar { background: var(--accent, var(--swim)); }
.trendCol.is-spike .trendBar { background: var(--warn); }

.trendLabel {
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  white-space: nowrap;
}
.trendCol.is-current .trendLabel { color: var(--chalk); }

/* --- Day-by-day table ----------------------------------------------------- */

/* Wide content scrolls inside its own box; the page body never does. */
.dayTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dayTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dayTable th, .dayTable td {
  padding: var(--s2) var(--s2);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.dayTable thead th {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--mute);
  white-space: nowrap;
}

.dayTable tbody th {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 13px;
  color: var(--chalk);
  white-space: nowrap;
}

.dayTable .numcol { text-align: right; white-space: nowrap; }
.dayTable td.num { font-size: var(--t-figure); color: var(--chalk); }
.dayTable tr.is-rest th, .dayTable tr.is-rest td { color: var(--mute); }
.dayTable tbody tr:last-child th,
.dayTable tbody tr:last-child td { border-bottom: 0; }

/* --- Food: meal slots ----------------------------------------------------- */

.mealtabs {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--s3);
  padding-bottom: var(--s1);
}

.mealtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s3);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--mute);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 14px;
  white-space: nowrap;
}

.mealtab.is-on {
  background: var(--chrome);
  border-color: var(--chrome);
  color: var(--deep);
}

.mealgroup { margin-bottom: var(--s4); }

.mealgroup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.mealgroup-head h3 { font-size: var(--t-card); color: var(--chalk); }

.mealgroup-total { font-size: var(--t-figure); color: var(--chalk); }
.mealgroup-total .sub { color: var(--mute); font-size: 13px; margin-left: var(--s2); }

/* Changing an entry's slot: one tap, no dropdown. */
.mealpick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.mealpick-btn {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 0 var(--s2);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--mute);
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 12px;
  cursor: pointer;
}

.mealpick-btn.is-on {
  background: var(--raise);
  border-color: color-mix(in srgb, var(--chrome) 45%, var(--line));
  color: var(--chalk);
}

/* --- Weight --------------------------------------------------------------- */

.weightHead {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.weightAvg {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--chalk);
}
.weightAvg .unit { font-size: 14px; color: var(--mute); margin-left: 2px; }

.weightRate { font-size: var(--t-figure); color: var(--good); }
.weightRate.is-warn { color: var(--warn); }

.weightNote { margin: var(--s2) 0 0; font-size: 13px; color: var(--mute); }
.weightNote.is-warn { color: var(--warn); }

/* One number, one tap. */
.weightForm {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}
.weightForm input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-figure);
  font-weight: 600;
  text-align: center;
}
.weightForm .btn { flex: 0 0 auto; width: auto; padding: 0 var(--s5); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Months of history in one glance. Flat and unglowing — it's a data surface. */
.weightTrend {
  display: block;
  width: 100%;
  height: 72px;
  margin: var(--s3) 0 var(--s1);
  overflow: visible;
}
.weightTrend polyline {
  fill: none;
  stroke: var(--swim);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.weightAxis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mute);
}
.weightAxis .num { font-size: 11px; }

/* Shoulder load sits inside the week pane, divided from the bars above it. */
.pane .shoulder {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}
.pane .shoulder-count { font-size: 28px; }

/* --- Parked templates ----------------------------------------------------- */
/* Visibly set aside, not hidden and not disabled-looking — it's a routine
   you're coming back to, and it stays fully editable. */

.card.is-parked { border-left-color: var(--mute); opacity: 0.86; }

.parkedTag {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
}

.parkedWhy {
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--chalk);
  padding-left: var(--s2);
  border-left: 2px solid var(--line);
}

/* ===========================================================================
   Login
   =========================================================================== */

.loginPage {
  padding: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #12202B 0%, var(--deep) 62%);
}

.loginPage::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.045;
  pointer-events: none;
}

.loginBox {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
  text-align: center;
}

.loginMark {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 76px;
  margin: 0 auto var(--s5);
}
.loginMark span { display: block; height: 9px; border-radius: 2px; }
.loginMark span:nth-child(1) { background: var(--swim);     width: 100%; }
.loginMark span:nth-child(2) { background: var(--bike);     width: 74%; }
.loginMark span:nth-child(3) { background: var(--run);      width: 88%; }
.loginMark span:nth-child(4) { background: var(--strength); width: 56%; }

.loginPage h1 { font-size: var(--t-title); margin: 0 0 var(--s1); }
.loginSub { margin: 0 0 var(--s5); color: var(--mute); font-size: var(--t-body); }

.loginPage label { text-align: left; }

.loginPage input[type="password"] {
  margin-bottom: var(--s3);
  text-align: center;
  font-size: 17px;
}

.loginPage .btn-primary { width: 100%; }

.loginError {
  margin: 0 0 var(--s4);
  padding: var(--s3);
  border: 1px solid color-mix(in srgb, var(--run) 40%, var(--line));
  border-left: 3px solid var(--run);
  border-radius: var(--radius);
  background: var(--slab);
  color: var(--chalk);
  font-size: 14px;
  text-align: left;
}

.loginNote { margin: var(--s4) 0 0; color: var(--mute); font-size: 13px; }

/* Unobtrusive: the end of the page, quiet, and out of the way. */
.logoutFoot { margin: var(--s6) 0 var(--s5); text-align: center; }
.logoutFoot button {
  background: none;
  border: 0;
  color: var(--mute);
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: var(--t-meta);
  min-height: var(--tap);
  padding: 0 var(--s4);
  cursor: pointer;
}
.logoutFoot button:hover { color: var(--chalk); }

/* ===========================================================================
   Wide screens
   ---------------------------------------------------------------------------
   Mobile is the real device and stays exactly as it was below 700px. Above
   that the layout changes shape rather than stretching: navigation moves to
   the top, the column widens, and the panes pair up side by side.
   =========================================================================== */

/* The top nav doesn't exist on narrow screens. */
.topnav { display: none; }

@media (min-width: 700px) {
  body {
    /* No bottom bar up here, so no need to reserve room for it. */
    padding-bottom: var(--s6);
  }

  .tabbar { display: none; }

  .topnav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, #12202B 0%, #0A141C 100%);
    border-bottom: 1px solid var(--line);
  }

  .topnav-inner {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: 60px;
  }

  .topnav-brand {
    font-family: var(--cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 19px;
    color: var(--chalk);
  }

  .topnav-links { display: flex; gap: var(--s1); margin-right: auto; }

  .topnav-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--s4);
    border-radius: var(--radius);
    color: var(--mute);
    text-decoration: none;
    font-family: var(--cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: 16px;
  }
  .topnav-links a:hover { color: var(--chalk); }
  .topnav-links a[aria-current="page"] {
    color: var(--deep);
    background: var(--chrome);
    box-shadow: 0 0 18px color-mix(in srgb, var(--chrome) 45%, transparent);
  }

  .logoutForm button {
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--mute);
    font-family: var(--cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: 13px;
    min-height: 36px;
    padding: 0 var(--s3);
    cursor: pointer;
  }
  .logoutForm button:hover { color: var(--chalk); border-color: var(--mute); }

  /* The narrow-screen logout is redundant once it's in the top bar. */
  .logoutFoot { display: none; }

  .wrap { max-width: 860px; }

  .topbar { margin-bottom: var(--s4); }

  /* Two columns, and the panes pair up. Items are placed by source order, so
     the mobile order is also the reading order here. */
  .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
    align-items: start;
  }
  .cols > .col-full { grid-column: 1 / -1; }

  .sportgrid { grid-template-columns: repeat(6, 1fr); }

  /* The gym logging screen is a focused task, not a dashboard: it stays one
     column and stays large, however wide the window is. */
  .surface-data .wrap { max-width: 620px; }
  .surface-data .cols { grid-template-columns: 1fr; }
}

@media (min-width: 1100px) {
  .wrap { max-width: 1100px; }
  .cols { gap: var(--s4); }
  /* Still one column, still large. */
  .surface-data .wrap { max-width: 660px; }
}

/* On narrow screens .cols is a plain block — the grid only starts at 700px,
   so the mobile layout is byte-for-byte what it was. */
.cols > .section, .cols > .pane { min-width: 0; }