/* ============================================================================
   Operation Quantum — design system
   ----------------------------------------------------------------------------
   Restrained executive software. Neutral graphite surfaces, one accent, three
   status colours, tabular figures, dense-but-breathing spacing. Colour is
   reserved for state; nothing is decorative.

   Everything is driven by tokens on :root so the light theme is a token swap
   rather than a second stylesheet.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces — a shallow stack, four steps only */
  --bg:          #0D1117;
  --surface:     #141A22;
  --surface-2:   #1A212B;
  --surface-3:   #212A36;
  --rail:        #10161D;
  /* The rail has its own text/surface ramp so the light theme can make the
     whole application light rather than pinning a dark sidebar to it. */
  --rail-text:   rgba(255,255,255,.68);
  --rail-strong: #FFFFFF;
  --rail-dim:    rgba(255,255,255,.42);
  --rail-group:  rgba(255,255,255,.32);
  --rail-icon:   rgba(255,255,255,.50);
  --rail-hover:  rgba(255,255,255,.06);
  --rail-active: rgba(255,255,255,.10);
  --rail-line:   rgba(255,255,255,.06);

  /* Lines */
  --line:        #232C38;
  --line-strong: #313D4D;

  /* Text */
  --text:        #E7ECF3;
  --text-2:      #9FADBF;
  --text-3:      #6B7889;
  --text-inv:    #0D1117;

  /* Accent — used for the current selection and primary action, nothing else */
  --acc:         #4D7CFE;
  --acc-hover:   #3F6DEC;
  --acc-soft:    rgba(77, 124, 254, .14);
  --acc-line:    rgba(77, 124, 254, .38);

  /* Status — the only other colours in the system */
  --ok:          #2FA36B;
  --ok-soft:     rgba(47, 163, 107, .14);
  --ok-line:     rgba(47, 163, 107, .40);
  --warn:        #C9902B;
  --warn-soft:   rgba(201, 144, 43, .14);
  --warn-line:   rgba(201, 144, 43, .42);
  --bad:         #D9584C;
  --bad-soft:    rgba(217, 88, 76, .14);
  --bad-line:    rgba(217, 88, 76, .42);
  --neutral:     #6B7889;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* 4px spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  --r1: 3px; --r2: 5px; --r3: 8px; --r4: 12px;

  --sh1: 0 1px 2px rgba(0,0,0,.35);
  --sh2: 0 6px 20px rgba(0,0,0,.35);
  --sh3: 0 24px 60px rgba(0,0,0,.50);

  --rail-w: 236px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme='light'] {
  color-scheme: light;
  --bg:          #F4F6F9;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9FB;
  --surface-3:   #EEF1F6;
  --rail:        #FFFFFF;
  --rail-text:   #4E5A6B;
  --rail-strong: #10151D;
  --rail-dim:    #78859A;
  --rail-group:  #8B97A8;
  --rail-icon:   #8B97A8;
  --rail-hover:  #F0F3F7;
  --rail-active: #E9EFF8;
  --rail-line:   #E1E6ED;
  --line:        #E1E6ED;
  --line-strong: #C8D1DC;
  --text:        #10151D;
  --text-2:      #4E5A6B;
  --text-3:      #78859A;
  --text-inv:    #FFFFFF;
  --acc:         #2C5CE6;
  --acc-hover:   #2450D3;
  --acc-soft:    rgba(44, 92, 230, .09);
  --acc-line:    rgba(44, 92, 230, .30);
  --ok:          #157F52;
  --ok-soft:     rgba(21, 127, 82, .10);
  --ok-line:     rgba(21, 127, 82, .32);
  --warn:        #96650A;
  --warn-soft:   rgba(150, 101, 10, .10);
  --warn-line:   rgba(150, 101, 10, .32);
  --bad:         #B3261E;
  --bad-soft:    rgba(179, 38, 30, .09);
  --bad-line:    rgba(179, 38, 30, .30);
  --neutral:     #78859A;
  --sh1: 0 1px 2px rgba(16,21,29,.06);
  --sh2: 0 4px 14px rgba(16,21,29,.10);
  --sh3: 0 20px 48px rgba(16,21,29,.18);
}

/* --------------------------------------------------------------- baseline */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }
html {
  /* Without this, iOS Safari applies its own text-inflation heuristic and
     renders type larger than asked for, which reads as "the app is too big"
     and invites a pinch. 100% rather than `none` so the reader's own
     accessibility text size still works. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r1); }
::selection { background: var(--acc-soft); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mono { font-family: var(--mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ shell */

.app { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}
.rail__brand {
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--rail-line);
}
.rail__mark {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--rail-strong); font-weight: 650; letter-spacing: .14em; font-size: 12px;
}
.rail__mark:hover { text-decoration: none; color: var(--rail-strong); }
.rail__glyph {
  width: 26px; height: 26px; border-radius: var(--r2);
  background: var(--acc); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.rail__sub {
  margin-top: var(--s2); font-size: 11px; color: var(--rail-dim);
  letter-spacing: .04em;
}
.rail__nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s3) var(--s5); }
.rail__group {
  padding: var(--s4) var(--s3) var(--s2);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rail-group); font-weight: 600;
}
.rail__link {
  display: flex; align-items: center; gap: var(--s3);
  padding: 7px var(--s3); border-radius: var(--r2);
  color: var(--rail-text); font-size: 13.5px; font-weight: 500;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.rail__link:hover { background: var(--rail-hover); color: var(--rail-strong); text-decoration: none; }
.rail__link.is-active { background: var(--rail-active); color: var(--rail-strong); }
.rail__link.is-active .rail__icon { color: var(--acc); }
.rail__icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--rail-icon); }
.rail__badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--bad); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
.rail__badge--warn { background: var(--warn); }
.rail__foot {
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 1px solid var(--rail-line);
  display: flex; align-items: center; gap: var(--s2);
}
.rail__foot .btn { color: var(--rail-text); }
.rail__foot .btn:hover { color: var(--rail-strong); background: var(--rail-hover); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s6); height: 58px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__title { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.topbar__meta { font-size: 12px; color: var(--text-3); }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.topbar__burger { display: none; }

.page { padding: var(--s6); max-width: 1440px; width: 100%; }
@media (max-width: 900px) { .page { padding: var(--s4); } }

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }
.h-page { font-size: 20px; }
.h-sec {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650;
}
.h-card { font-size: 13.5px; font-weight: 600; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.strong { font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.figure { font-size: 26px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.figure--lg { font-size: 34px; }
.figure--sm { font-size: 19px; }
.wrap-pre { white-space: pre-wrap; }

/* --------------------------------------------------------------------- grid */

/* Flex and grid children default to min-width:auto, which means a wide table
   or a long button row pushes the whole page sideways instead of scrolling
   inside its own container. Everything that holds content is allowed to
   shrink; the scrollable wrappers then do their job. */
.grid > *, .stack > * { min-width: 0; }
.card { min-width: 0; }
.mrow__label, .mrow > * { min-width: 0; }

.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--main { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.grid--half { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack--tight { gap: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1; }
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--main { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- card */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
}
.card__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  min-height: 46px;
}
.card__head .h-card { margin-right: auto; }
.card__body { padding: var(--s5); }
.card__body--flush { padding: 0; }
.card__foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r3) var(--r3);
}
.card--flat { box-shadow: none; background: var(--surface-2); }
.card--accent { border-color: var(--acc-line); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 32px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--line-strong); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 15px; height: 15px; }

.btn--primary { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 550; }
.btn--primary:hover { background: var(--acc-hover); border-color: var(--acc-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }
.btn--danger { color: var(--bad); border-color: var(--bad-line); background: transparent; }
.btn--danger:hover { background: var(--bad-soft); }
.btn--ok { color: var(--ok); border-color: var(--ok-line); background: transparent; }
.btn--ok:hover { background: var(--ok-soft); }
.btn--sm { height: 26px; padding: 0 var(--s2); font-size: 12px; }
.btn--lg { height: 38px; padding: 0 var(--s5); font-size: 14px; }
.btn--icon { width: 32px; padding: 0; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r2) 0 0 var(--r2); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r2) var(--r2) 0; }

/* Segmented control — for view switches, never for data entry */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2);
}
.seg__btn {
  height: 26px; padding: 0 var(--s3); border-radius: var(--r1);
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-on { background: var(--surface-3); color: var(--text); box-shadow: var(--sh1); }

/* -------------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 500;
  transition: all .12s var(--ease);
}
.chip:hover { border-color: var(--text-3); color: var(--text); }
.chip.is-on {
  background: var(--acc-soft); border-color: var(--acc-line); color: var(--text);
}
.chip.is-on .chip__tick { opacity: 1; }
.chip__tick { opacity: 0; width: 13px; height: 13px; color: var(--acc); transition: opacity .12s; }
.chip--ok.is-on { background: var(--ok-soft); border-color: var(--ok-line); }
.chip--ok.is-on .chip__tick { color: var(--ok); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* -------------------------------------------------------------------- pills */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px; border-radius: var(--r1);
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid transparent; white-space: nowrap;
}
.pill--ok   { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok-line); }
.pill--warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.pill--bad  { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-line); }
.pill--acc  { background: var(--acc-soft);  color: var(--acc);  border-color: var(--acc-line); }
.pill--lg { height: 24px; padding: 0 var(--s2); font-size: 12px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); flex: 0 0 7px; }
.dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--bad); }

/* ---------------------------------------------------------------- form bits */

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label { font-size: 12px; font-weight: 550; color: var(--text-2); }
.field__hint { font-size: 11.5px; color: var(--text-3); }
.field__error { font-size: 11.5px; color: var(--bad); }

.input, .select, .textarea {
  width: 100%; min-height: 34px; padding: 6px var(--s3);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  transition: border-color .12s var(--ease), background .12s var(--ease);
  font-size: 13.5px;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--acc); background: var(--surface);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--bad); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none; padding-right: var(--s7);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.input--sm { min-height: 28px; font-size: 12.5px; }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .5; }

.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; }
.switch__track {
  width: 34px; height: 20px; border-radius: 10px; background: var(--surface-3);
  border: 1px solid var(--line-strong); position: relative; transition: all .15s var(--ease);
  flex: 0 0 34px;
}
.switch__track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--text-3);
  transition: all .15s var(--ease);
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch input:checked + .switch__track { background: var(--acc); border-color: var(--acc); }
.switch input:checked + .switch__track::after { left: 16px; background: #fff; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ------------------------------------------------------------------- tables */

.tbl { font-size: 13px; }
.tbl th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  white-space: nowrap; background: var(--surface-2);
}
.tbl td {
  padding: 10px var(--s4); border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .1s var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .c { text-align: center; }
.tbl--tight td { padding: 7px var(--s4); }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* Wide enough for a measure name and its note on a desktop; released on a
   phone, where the secondary columns are dropped instead. */
.col-measure { min-width: 220px; }

/* -------------------------------------------------------------- metric rows */

.mrow {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: var(--s3);
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.mrow:last-child { border-bottom: 0; }
.mrow__label { color: var(--text-2); min-width: 0; }
.mrow__value { font-variant-numeric: tabular-nums; font-weight: 550; }
.mrow__bar { width: 64px; }

.meter { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.meter__fill { height: 100%; background: var(--acc); border-radius: 2px; transition: width .3s var(--ease); }
.meter__fill--ok { background: var(--ok); }
.meter__fill--warn { background: var(--warn); }
.meter__fill--bad { background: var(--bad); }
.meter--lg { height: 6px; }

/* -------------------------------------------------------------- pillar card */

.pillar {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r3); overflow: hidden;
}
.pillar__top {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s3);
}
.pillar__name { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.pillar__score { margin-left: auto; text-align: right; }
.pillar__num { font-size: 27px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.pillar__delta { font-size: 11.5px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.pillar__bar { height: 3px; background: var(--surface-3); }
.pillar__bar > i { display: block; height: 100%; }
.pillar__body { padding: var(--s3) var(--s5) var(--s4); flex: 1; }
.pillar--ok   .pillar__num { color: var(--ok); }
.pillar--warn .pillar__num { color: var(--warn); }
.pillar--bad  .pillar__num { color: var(--bad); }
.pillar--none .pillar__num { color: var(--text-3); }
.up { color: var(--ok); } .down { color: var(--bad); } .flat { color: var(--text-3); }

/* ---------------------------------------------------------------- day plan */

.plan { display: flex; flex-direction: column; }
.plan__row {
  display: grid; grid-template-columns: 92px 3px 1fr auto;
  gap: var(--s3); align-items: stretch;
  padding: 2px 0;
}
.plan__time {
  font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums;
  padding-top: 9px; white-space: nowrap;
}
.plan__spine { background: var(--line); border-radius: 2px; }
.plan__card {
  padding: 8px var(--s3); border-radius: var(--r2);
  border: 1px solid transparent; min-width: 0;
}
.plan__label { font-size: 13.5px; font-weight: 500; }
.plan__note { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.plan__side { display: flex; align-items: center; gap: var(--s2); padding-right: var(--s1); }

.plan__row.is-now .plan__spine { background: var(--acc); }
.plan__row.is-now .plan__card { background: var(--acc-soft); border-color: var(--acc-line); }
.plan__row.is-now .plan__time { color: var(--acc); font-weight: 600; }
.plan__row.is-next .plan__card { background: var(--surface-2); }
.plan__row.is-past { opacity: .48; }
.plan__row.is-done .plan__spine { background: var(--ok); }
.plan__row.is-missed .plan__spine { background: var(--bad); }

.kind-sprint  .plan__spine { background: var(--acc); }
.kind-swim    .plan__spine,
.kind-gym     .plan__spine,
.kind-exercise .plan__spine { background: var(--ok); }
.kind-reset   .plan__spine { background: #8A6DE9; }
.kind-admin   .plan__spine { background: var(--warn); }
.kind-free    .plan__spine { background: var(--line-strong); }

/* ------------------------------------------------------------ week rhythm */

.rhythm { overflow-x: auto; }
.rhythm__grid {
  display: grid; grid-template-columns: 104px repeat(7, minmax(46px, 1fr));
  min-width: 520px;
}
.rhythm__hd {
  padding: var(--s2) 6px; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.rhythm__hd.is-today { color: var(--acc); }
.rhythm__hd small { display: block; font-weight: 500; color: var(--text-3); font-size: 10px; }
.rhythm__lbl {
  padding: 7px var(--s2) 7px 0; font-size: 12px; color: var(--text-2);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px;
}
.rhythm__cell {
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
  display: grid; place-items: center; padding: 6px 0; min-height: 30px;
}
.rhythm__mk {
  width: 18px; height: 18px; border-radius: var(--r1);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.mk--done    { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.mk--planned { background: transparent; color: var(--text-3); border: 1px dashed var(--line-strong); }
.mk--missed  { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }
.mk--none    { background: transparent; color: transparent; border: 0; }

/* ------------------------------------------------------------ intervention */

.iv {
  display: grid; grid-template-columns: 3px 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r2);
  overflow: hidden; background: var(--surface-2);
}
.iv__flag { background: var(--warn); }
.iv--act .iv__flag { background: var(--bad); }
.iv__body { padding: var(--s3) var(--s4); }
.iv__title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: var(--s2); }
.iv__ev { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.iv__do {
  font-size: 12.5px; margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px dashed var(--line); color: var(--text);
}
.iv__do b { color: var(--text-2); font-weight: 600; }
.iv__acts { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }

/* -------------------------------------------------------------------- modal */

.backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,9,13,.62);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: var(--s5);
  animation: fade .12s var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.modal {
  width: min(680px, 100%); max-height: min(88vh, 900px);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r4); box-shadow: var(--sh3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: rise .16s var(--ease);
}
.modal--wide { width: min(940px, 100%); }
.modal--narrow { width: min(460px, 100%); }
.modal__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.modal__title { font-size: 15px; font-weight: 600; margin-right: auto; }
.modal__body { padding: var(--s5); overflow-y: auto; flex: 1; }
.modal__foot {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.modal__foot .spacer { flex: 1; }

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

.toasts {
  position: fixed; bottom: var(--s5); right: var(--s5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--s2); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4); border-radius: var(--r2);
  background: var(--surface-3); border: 1px solid var(--line-strong);
  box-shadow: var(--sh2); font-size: 13px; max-width: 380px;
  animation: rise .16s var(--ease); pointer-events: auto;
}
.toast--bad { border-color: var(--bad-line); }
.toast--ok { border-color: var(--ok-line); }

/* -------------------------------------------------------------- empty/load */

.empty {
  padding: var(--s8) var(--s5); text-align: center; color: var(--text-3);
}
.empty__title { font-size: 14px; color: var(--text-2); font-weight: 550; }
.empty__body { font-size: 12.5px; margin-top: 5px; max-width: 380px; margin-inline: auto; }
.empty__act { margin-top: var(--s4); }

.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
  border-radius: var(--r2);
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
.skel--line { height: 12px; margin-bottom: 8px; }
.skel--card { height: 118px; }

.banner {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r2);
  border: 1px solid var(--line-strong); background: var(--surface-2); font-size: 13px;
}
.banner--bad { border-color: var(--bad-line); background: var(--bad-soft); }
.banner--warn { border-color: var(--warn-line); background: var(--warn-soft); }
.banner--ok { border-color: var(--ok-line); background: var(--ok-soft); }

/* ------------------------------------------------------------------ charts */

.chart { width: 100%; }
.chart text { font-size: 10px; fill: var(--text-3); font-family: var(--font); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .series { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series--req { stroke: var(--text-3); stroke-dasharray: 4 4; stroke-width: 1.5; }
.chart .series--fc { stroke: var(--warn); stroke-dasharray: 3 3; stroke-width: 1.5; }
.chart .area { fill: var(--acc-soft); stroke: none; }
.chart .bar { fill: var(--acc); }
.chart .bar--ok { fill: var(--ok); } .chart .bar--warn { fill: var(--warn); } .chart .bar--bad { fill: var(--bad); }
.chart .pt { fill: var(--acc); }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); }
.legend i { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 6px; }

.spark { width: 78px; height: 22px; }
.spark path { fill: none; stroke: var(--text-3); stroke-width: 1.5; }

/* -------------------------------------------------------------- misc utils */

.divider { height: 1px; background: var(--line); margin: var(--s4) 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s4); font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { font-variant-numeric: tabular-nums; }
.link-quiet { color: var(--text-2); }
.link-quiet:hover { color: var(--text); }
.hoverable:hover { background: var(--surface-2); }
.clickable { cursor: pointer; }
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); }
.mb2 { margin-bottom: var(--s2); } .mb3 { margin-bottom: var(--s3); } .mb4 { margin-bottom: var(--s4); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  /* On a phone a header row that cannot wrap widens the page. Wrapping is the
     right failure mode for every one of them. */
  .row { flex-wrap: wrap; }
  .card__head { flex-wrap: wrap; row-gap: var(--s2); }

  /* Columns that are context rather than answer are dropped on a phone, so
     the ones that matter fit instead of the table scrolling sideways. */
  .col-target, .col-trend { display: none; }
  .col-measure { min-width: 0; }

  /* Tab strips scroll rather than wrap: seven settings tabs stacked two deep
     costs more vertical space than a swipe costs effort. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg__btn { flex: 0 0 auto; }

  .rail {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .18s var(--ease);
    box-shadow: var(--sh3);
  }
  .rail.is-open { transform: none; }
  .rail-scrim {
    position: fixed; inset: 0; background: rgba(6,9,13,.55); z-index: 39;
  }
  .topbar__burger { display: inline-flex; }
  .topbar { padding: 0 var(--s4); gap: var(--s3); }
  .topbar__meta { display: none; }
  /* On a phone the block controls would squeeze the label into one-word
     lines, so they move to their own row underneath it. */
  /* The block controls move to their own full-width row: sharing the line
     would squeeze the label down to one word per line. `1 / -1` is safe here
     because the columns are explicit, unlike the rows. */
  /* Wide enough for "05:00-05:10" at full size without it ever wrapping or
     clipping: squeezing the column to buy label width made the one column you
     read on every row the hardest one to read. */
  .plan__row { grid-template-columns: 78px 3px minmax(0, 1fr) auto; row-gap: 0; }
  .plan__time { font-size: 12px; }

  /* A bare tick sits on the row happily. A Start button next to it does not:
     it squeezes the label down to one word per line. So only the row carrying
     a timer drops its controls onto a line of their own, which used to be
     every row and cost about forty pixels on each of the eleven that had
     nothing to put there. */
  .plan__row.has-timer { grid-template-columns: 78px 3px minmax(0, 1fr); }
  .plan__row.has-timer .plan__side { grid-column: 1 / -1; justify-content: flex-end; padding: 0 0 6px; }
  .plan__side:empty { display: none; }
  .modal { max-height: 92vh; width: 100%; border-radius: var(--r4) var(--r4) 0 0; }
  .backdrop { padding: 0; align-items: flex-end; }
  .toasts { left: var(--s4); right: var(--s4); bottom: var(--s4); }
  .toast { max-width: none; }
}

/* ------------------------------------------------------------------ density

   Below this width the desktop spacing is simply too generous. The dashboard
   ran to five and a half screens on a phone and reading it meant pinching out
   to see anything in context, which is the layout admitting it does not fit.

   Two levers do nearly all the work. Shrinking the spacing scale itself
   reaches every gap, every card and every page margin at once, and pulling
   the display type down closes the rest: 34px figures are sized for a monitor
   two feet away, not a phone held at arm's length.

   What this deliberately does NOT shrink is anything you touch. Buttons,
   inputs and the check-in chips keep their full size, because a control that
   is awkward to hit costs far more than a few pixels of whitespace saves. */

@media (max-width: 560px) {
  :root {
    --s3: 10px; --s4: 12px; --s5: 14px;
    --s6: 16px; --s7: 22px; --s8: 28px; --s9: 36px;
  }

  .h-page      { font-size: 17px; }
  .figure      { font-size: 21px; }
  .figure--lg  { font-size: 24px; }
  .figure--sm  { font-size: 17px; }
  .pillar__num { font-size: 22px; }
  .topbar__title { font-size: 14px; }

  /* Row padding is the other half of the height: a dozen list rows each
     giving back three or four pixels is worth more than any single card. */
  .card__head  { padding: var(--s3) var(--s4); min-height: 40px; }
  .card__body  { padding: var(--s4); }
  .card__foot  { padding: var(--s2) var(--s4); }
  .pillar__top { padding: var(--s3) var(--s4) var(--s2); }
  .pillar__body { padding: var(--s2) var(--s4) var(--s3); }
  .mrow        { padding: 5px 0; }
  .tbl th      { padding: var(--s2) var(--s3); }
  .tbl td      { padding: 7px var(--s3); }
  .tbl--tight td { padding: 5px var(--s3); }
  .task__row   { padding: 7px 0; }
  .plan__card  { padding: 6px var(--s3); }
  .iv__body    { padding: var(--s3); }
  .modal__body { padding: var(--s4); }
  .empty       { padding: var(--s6) var(--s4); }
  .topbar      { height: 52px; }

  /* Touch targets are held at their full size on purpose. */
  .btn      { height: 32px; }
  .btn--lg  { height: 38px; }
  .input, .select, textarea.input { min-height: 34px; }
}

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

@media print {
  .rail, .topbar__actions, .btn { display: none !important; }
  body { background: #fff; }
}

/* ------------------------------------------------------------- day flags */

/* One-tap day type. A segmented control would imply the four are exhaustive;
   these are buttons, and none of them being on is a valid state (the day
   follows the standard pattern). */
.flagrow { display: inline-flex; flex-wrap: wrap; gap: var(--s2); }
.flagrow__btn { font-weight: 500; }
.flagrow__btn.is-on {
  background: var(--acc-soft);
  border-color: var(--acc-line);
  color: var(--acc);
  font-weight: 600;
}
.flagrow__btn.is-on:hover { background: var(--acc-soft); }

/* ------------------------------------------------------------------ tasks */

.task {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: start; gap: var(--s3);
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: 0; }
.task__box {
  width: 17px; height: 17px; margin-top: 1px; border-radius: var(--r1);
  border: 1.5px solid var(--line-strong); background: transparent;
  display: grid; place-items: center; color: transparent; flex: 0 0 17px;
  transition: all .12s var(--ease);
}
.task__box:hover { border-color: var(--acc); }
.task__box svg { width: 12px; height: 12px; }
.task.is-done .task__box { background: var(--ok); border-color: var(--ok); color: #fff; }
.task.is-done .task__title { text-decoration: line-through; color: var(--text-3); }
.task__title { font-size: 13.5px; line-height: 1.4; }
.task__meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.task__meta .is-late { color: var(--bad); font-weight: 600; }
.task__meta .is-soon { color: var(--warn); }
.task__acts { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.task:hover .task__acts, .task:focus-within .task__acts { opacity: 1; }
@media (hover: none) { .task__acts { opacity: 1; } }
.task__flag { color: var(--warn); }

.taskgroup + .taskgroup { margin-top: var(--s4); }
.taskgroup__hd {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650; padding-bottom: var(--s1);
}
.taskgroup__hd .pill { text-transform: none; letter-spacing: 0; }

/* Quick-add sits at the top of the list and is the fastest path in. */
.taskadd { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.taskadd .input { flex: 1; }

/* --------------------------------------------------------------- block tick */

/* One tap, at the end. The control is a checkbox rather than a button row
   because "did this happen" is a single yes/no, and the answer for an
   un-ticked block on a day that is over is already no. */
.tick {
  width: 26px; height: 26px; border-radius: var(--r2); flex: 0 0 26px;
  border: 1.5px solid var(--line-strong); background: transparent;
  display: grid; place-items: center; color: transparent;
  transition: all .12s var(--ease);
}
.tick:hover { border-color: var(--ok); color: var(--ok-line); }
.tick.is-on { background: var(--ok); border-color: var(--ok); color: #fff; }
.tick svg { width: 15px; height: 15px; }

/* A pillar heading inside the outcomes table, so ten measures read as four
   groups rather than one long list. */
.tbl tr.outgroup td {
  background: var(--surface-2);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650;
  padding-top: var(--s3); padding-bottom: var(--s3);
}