/* The Fellowship: a field ledger for a 12-week quest.
   Navy ink on white paper, blue-gray rules, LandGeek orange used as flagging tape:
   the current week, the target line and the primary action. Fonts are self-hosted (OFL). */

@font-face { font-family: "Red Hat Display"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/fonts/red-hat-display-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/fonts/red-hat-display-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url(/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url(/fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Figures: the text face's slashed zero reads as a data-entry font, so digits come from the display face. */
@font-face { font-family: "Fellowship Figures"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/fonts/red-hat-display-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0030-0039, U+0025; }

:root {
  /* LandGeek brand */
  --navy: #162739;
  --orange: #ff683d;      /* marks, fills and lines only: 2.9:1 on white */
  --orange-mid: #ff9777;
  --orange-light: #ffc5b2;
  --cream: #fff4ec;
  --slate: #5d6b7b;       /* 5.4:1 on white */
  --bluegray: #bac9d9;
  --pale: #ecf4ff;
  /* Derived */
  --ink: var(--navy);
  --orange-ink: #b4421d;  /* orange for text: 5.6:1 */
  --rule: #d3dde8;        /* hairlines */
  --edge: #7a8899;        /* control borders: 3.6:1 */
  --good: #17734a; --good-mark: #2b9a66;
  --warn: #8a5300; --warn-mark: #d07a00;
  --bad: #b42318;  --bad-mark: #b42318;
  --none: #8593a3;
  /* Type */
  --display: "Red Hat Display", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text: "Fellowship Figures", "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Scale: 4px base */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --measure: 68ch;
  --gutter: 2.75rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.55 var(--text); color: var(--ink); background: #fff;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
h1, h2, h3, .auth-line { text-wrap: balance; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 var(--s3); letter-spacing: -.01em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: 1.3125rem; letter-spacing: -.015em; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 var(--s3); }
strong { font-weight: 700; }
code { font-size: .875em; background: var(--pale); padding: .05em .3em; }
.sr-only { position: absolute !important; 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: -999px; top: 0; background: var(--orange); color: var(--ink); padding: var(--s2) var(--s4); z-index: 10; font-weight: 700; }
.skip:focus { left: var(--s4); }
.muted { color: var(--slate); }
.small { font-size: .875rem; }
.block { display: block; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.num, .num-l, table, .route, .stats, .qty, .tally, .figure, .score { font-variant-numeric: tabular-nums lining-nums; }

/* Small-caps labels (synthesised from the text face) */
.label, .stat-label, thead th, dt, .quote-by, .ms-label, .role, td[data-label]::before {
  font-family: var(--text); font-variant-caps: all-small-caps; letter-spacing: .07em; font-weight: 700; color: var(--slate); }
h2.label { font-size: 1.125rem; margin-bottom: var(--s2); }

/* Facts: a run of meta set apart by thin vertical rules */
.facts { display: inline-flex; flex-wrap: wrap; margin-left: calc(-1.4em - 1px); clip-path: inset(0 0 0 calc(1.4em + 1px)); }
.facts > span { white-space: nowrap; }
.facts > span::before { content: ""; display: inline-block; width: 1px; height: .85em; background: var(--bluegray); margin: 0 .7em; vertical-align: -.05em; }

/* ---------- Masthead ---------- */
header.site { background: var(--navy); color: #fff; }
.mast { max-width: 1120px; margin: 0 auto; padding: 0 var(--s6); display: flex; align-items: stretch; gap: var(--s6); min-height: 3.75rem; }
.mast.wide { max-width: 1280px; }
.brand { display: flex; align-items: center; gap: var(--s3); color: #fff; text-decoration: none; font: 800 1.1875rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.logo { display: block; flex: none; aspect-ratio: 187.06 / 98.45; }
.brand-mark { height: 1.125rem; width: auto; }
header.site :focus-visible { outline-color: var(--orange); }
.topnav { flex: 1 1 auto; min-width: 0; display: flex; }
.topnav ul { list-style: none; display: flex; gap: var(--s5); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.topnav a { display: flex; align-items: center; height: 100%; color: #d5dfea; text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.topnav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }
.topnav a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: var(--orange); }
.who { display: flex; align-items: center; gap: var(--s4); font-size: .875rem; color: #d5dfea; white-space: nowrap; }
.who-name { overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.role { color: var(--bluegray); margin-left: .6em; padding-left: .6em; border-left: 1px solid rgba(186, 201, 217, .45); font-size: 1.0625rem; }
.logout { margin: 0; }
.linklike { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: var(--s2) 0; text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }

main { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s8); }
main.wide { max-width: 1280px; }
footer.site { border-top: 1px solid var(--rule); }
.foot { max-width: 1120px; margin: 0 auto; padding: var(--s4) var(--s6) var(--s6); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: .8125rem; color: var(--slate); }
.foot.wide { max-width: 1280px; }
.foot p { margin: 0; }
.foot p:first-child { font: 700 .875rem var(--display); color: var(--ink); }

/* ---------- Page head ---------- */
.page-head { margin-bottom: var(--s6); }
.page-head .sub { color: var(--slate); margin: var(--s3) 0 0; font-size: 1.0625rem; max-width: var(--measure); }
.page-head .sub strong { color: var(--ink); font-weight: 700; }
.dateline { color: var(--slate); font-size: .9375rem; margin: var(--s1) 0 0; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.head-row h1, .head-row p { margin-bottom: 0; }
.crumb { font-size: .875rem; color: var(--slate); margin-bottom: var(--s3); display: flex; gap: .55em; flex-wrap: wrap; }
.crumb span { color: var(--bluegray); }
.crumb a { color: var(--slate); }
.subnav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin-top: var(--s5); border-bottom: 1px solid var(--rule); }
.subnav a { font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--slate); padding: var(--s2) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); border-bottom-color: var(--bluegray); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.subnav .subnav-file { margin-left: auto; color: var(--ink); }

/* ---------- Sections: ruled, not boxed ---------- */
.card { border-top: 1px solid var(--ink); padding-top: var(--s4); margin-bottom: var(--s7); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.card-head h2 { margin: 0; }
.tally { color: var(--slate); font-size: .9375rem; }
.tally strong { color: var(--ink); }
.card.empty { padding-top: var(--s6); }
.lede { font-size: 1.1875rem; max-width: 40ch; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); }

/* ---------- Buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: 700 .9375rem/1.2 var(--text); padding: .625rem 1.125rem; min-height: 44px;
  border-radius: 2px; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--pale); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.btn.primary:hover { background: #f2562a; border-color: #f2562a; }
.btn.small { padding: .3125rem .75rem; min-height: 36px; font-size: .875rem; }
.btn.quiet, .btn.ghost { background: transparent; border-color: transparent; text-decoration: underline; text-decoration-color: var(--bluegray); text-underline-offset: 3px; padding-left: .5rem; padding-right: .5rem; }
.btn.quiet:hover, .btn.ghost:hover { background: var(--pale); text-decoration-color: var(--ink); }
.btn.danger { color: var(--bad); text-decoration-color: currentColor; }
.btn.danger:hover { background: #fdeceb; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .icon { width: 1rem; height: 1rem; }
label { display: block; font-weight: 700; font-size: .875rem; color: var(--ink); }
.hint { display: block; font-weight: 400; color: var(--slate); font-size: .8125rem; margin-top: 1px; }
input, select, textarea { display: block; width: 100%; margin-top: var(--s1); font: 400 1rem/1.4 var(--text); color: var(--ink); background: #fff;
  border: 1px solid var(--edge); border-radius: 2px; padding: .5625rem .6875rem; min-height: 44px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
input[type=number] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 0; }
input[disabled], textarea[disabled] { background: var(--pale); border-color: var(--rule); color: var(--ink); }
input[type=checkbox], input[type=radio] { display: inline-block; width: 1.0625rem; height: 1.0625rem; min-height: 0; margin: 0 .35rem 0 0; accent-color: var(--navy); vertical-align: -.15em; }
input.tiny { width: 5rem; display: inline-block; min-height: 36px; padding: .25rem .5rem; margin-top: 0; text-align: right; }
input.short { width: 9rem; }
.stack > * + * { margin-top: var(--s4); }
.stack.narrow { max-width: 26rem; }
.row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end; }
.row .grow { flex: 1 1 220px; }
.inline { display: inline; margin: 0; }
.inline-form { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0; font-weight: 400; }
.inline-form label { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.inline-form select { width: auto; margin-top: 0; min-height: 36px; padding: .25rem .5rem; }
fieldset { border: 0; border-top: 1px solid var(--rule); padding: var(--s3) 0 0; margin: 0; }
legend { font-weight: 700; font-size: .875rem; padding: 0 var(--s2) 0 0; }
.radio, .day { display: inline-flex; align-items: center; font-weight: 400; font-size: .9375rem; gap: .15rem; }
.radio input.tiny { margin-left: .4rem; }
.days { display: inline-flex; flex-wrap: wrap; gap: var(--s3); }

.notice { padding: var(--s3) var(--s4); margin-bottom: var(--s5); border-left: 3px solid var(--ink); background: var(--pale); max-width: var(--measure); }
.notice.error { border-left-color: var(--bad); background: #fdeceb; color: #7a1a12; }

/* ---------- Score marks ---------- */
.glyph { width: .625rem; height: .625rem; flex: none; fill: currentColor; stroke: currentColor; }
.band-green { --band: var(--good); --band-mark: var(--good-mark); }
.band-amber { --band: var(--warn); --band-mark: var(--warn-mark); }
.band-red { --band: var(--bad); --band-mark: var(--bad-mark); }
.band-none { --band: var(--slate); --band-mark: var(--none); }
.score { display: inline-flex; align-items: baseline; gap: .4em; white-space: nowrap; color: var(--band); }
.score .glyph { color: var(--band-mark); align-self: center; }
.score-n { font-weight: 700; color: var(--ink); }
.score-w { font-size: .875rem; font-weight: 600; }
.band-none .score-w { font-weight: 400; }

/* ---------- The route: 12 stations on a surveyed line ---------- */
.road-strip { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s2) 0; margin-bottom: var(--s6); overflow-x: auto; }
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 18rem; }
.stn > a, .stn-cell { display: grid; grid-template-rows: auto 1.75rem auto; justify-items: center; row-gap: .125rem; padding: var(--s2) 0; color: var(--ink); text-decoration: none; }
.stn > a:hover { background: var(--pale); }
.stn-w { font-size: .75rem; color: var(--slate); line-height: 1.2; }
.stn-pin { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.stn-pin::before, .stn-pin::after { content: ""; position: absolute; top: 50%; height: 0; border-top: 2px solid var(--ink); }
.stn-pin::before { left: 0; right: 50%; }
.stn-pin::after { left: 50%; right: 0; }
.stn.current .stn-pin::after, .stn.future .stn-pin::after, .stn.future .stn-pin::before { border-top: 1px dashed var(--edge); margin-top: .5px; }
.stn:first-child .stn-pin::before, .stn:last-child .stn-pin::after { display: none; }
.stn-pin .glyph { position: relative; z-index: 1; width: .75rem; height: .75rem; color: var(--band-mark); background: #fff; box-shadow: 0 0 0 3px #fff; }
.stn-tick { position: relative; z-index: 1; display: inline-block; width: 1px; height: .625rem; background: var(--edge); box-shadow: 0 0 0 3px #fff; }
.stn-stake { position: relative; z-index: 1; width: .875rem; height: 1.625rem; margin-top: -.875rem; stroke: var(--ink); fill: var(--orange); }
.stn-stake path:first-child { fill: none; }
.stn-p { font-size: .8125rem; font-weight: 700; line-height: 1.2; min-height: 1.2em; color: var(--band, var(--ink)); }
.stn.current .stn-w { color: var(--orange-ink); font-weight: 800; }
.stn.current .stn-p { color: var(--ink); }
.stn.current > a { background: var(--cream); }
.stn.current > a:hover { background: var(--pale); }
/* Full-size route on the road page */
.road-card { margin-bottom: var(--s6); }
.road-card .route { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.road-card .stn > a, .road-card .stn-cell { grid-template-rows: auto 2.75rem auto; padding: var(--s4) 0 var(--s3); }
.road-card .stn-w { font: 700 .875rem var(--display); color: var(--slate); }
.road-card .stn-pin .glyph { width: 1rem; height: 1rem; }
.road-card .stn-stake { width: 1.25rem; height: 2.375rem; margin-top: -1.25rem; }
.road-card .stn-p { font: 800 1.125rem var(--display); }
.road-card .stn.current .stn-w { color: var(--orange-ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: .8125rem; color: var(--slate); margin: var(--s3) 0 0; }
.legend > span { display: inline-flex; align-items: center; gap: .45em; }
.legend .glyph { color: var(--band-mark); }
.legend .stn-tick { box-shadow: none; }

/* ---------- Week: score + plan state ---------- */
.week-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--ink); margin-bottom: var(--s7); }
.score-card { padding: var(--s4) var(--s6) var(--s4) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); align-items: start; }
.score-card > h2, .score-card > p { grid-column: 1 / -1; }
.score-card > p { margin: var(--s4) 0 0; max-width: 52ch; }
.figure { margin: 0; color: var(--band); }
.figure-n { font: 800 clamp(3.75rem, 2.5rem + 4vw, 5.5rem)/.9 var(--display); letter-spacing: -.045em; color: var(--ink); margin: 0 0 var(--s2); }
.figure-w { display: flex; align-items: center; gap: .45em; font-weight: 700; margin: 0 0 var(--s3); }
.figure-w .glyph { color: var(--band-mark); width: .75rem; height: .75rem; }
.gauge { display: block; width: 100%; max-width: 21rem; height: auto; overflow: visible; }
.gauge-base { stroke: var(--ink); stroke-width: 1; }
.gauge-tick { stroke: var(--ink); stroke-width: 1; }
.gauge-fill { fill: var(--band-mark); }
.gauge-target { stroke: var(--orange); stroke-width: 2.5; }
.gauge-label { font: 600 11px var(--text); fill: var(--slate); }
.figure figcaption { font-size: .875rem; color: var(--slate); margin-top: var(--s2); }
.score-meta { margin: 0; display: grid; gap: var(--s4); padding-top: var(--s1); min-width: 8rem; }
.score-meta div { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.score-meta dt { font-size: 1.0625rem; }
.score-meta dd { margin: 0; color: var(--slate); font-size: .875rem; }
.score-meta dd strong { display: block; font: 800 2rem/1.05 var(--display); color: var(--ink); letter-spacing: -.02em; }
.plan-status { padding: var(--s4) 0 var(--s4) var(--s6); border-left: 1px solid var(--rule); }
.plan-status .state { font: 800 1.75rem/1.1 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); color: var(--orange-ink); }
.plan-status.is-locked .state { color: var(--ink); }
.plan-status .state .icon { width: 1.375rem; height: 1.375rem; }
.plan-status p { max-width: 44ch; }

/* ---------- Plan items ---------- */
.goal-block + .goal-block { margin-top: var(--s6); }
.ms-head { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); grid-template-areas: "no label" "no title"; align-items: baseline; margin-bottom: var(--s3); }
.ms-no { grid-area: no; font: 800 2rem/1 var(--display); color: var(--orange-ink); letter-spacing: -.03em; }
.ms-label { grid-area: label; font-size: 1.0625rem; line-height: 1.2; }
.ms-title { grid-area: title; font-size: 1.1875rem; }
.items { list-style: none; margin: 0 0 0 var(--gutter); padding: 0; border-top: 1px solid var(--ink); }
.item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.item > * { grid-column: 2; }
.item > .item-head { grid-column: 1; grid-row: 1 / span 3; }
.item-head { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; }
.item-title { font-weight: 700; margin: 0; position: relative; }
.done-mark { position: absolute; left: calc(-1 * var(--gutter) + .5rem); top: .2em; width: 1.125rem; height: 1.125rem; color: var(--good); }
.item-meta { font-size: .875rem; color: var(--slate); margin: var(--s1) 0 0; }
.stage { color: var(--ink); font-weight: 600; }
.item > .muted.small { margin: var(--s2) 0 0; }

/* Day cells */
.chips { display: flex; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--edge); background: #fff; color: var(--ink); cursor: pointer; font: inherit; }
.check:hover { background: var(--pale); }
.check.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.check.on:hover { background: #24394f; }
.check .icon { width: 1.125rem; height: 1.125rem; }
.check.chip { width: auto; min-width: 4rem; padding: 0 .625rem; font-weight: 700; font-size: .875rem; color: var(--slate); }
.check.chip.on { color: #fff; }
.check.chip .icon { width: .875rem; height: .875rem; }
.chips .inline + .inline .check, .chips .check + .check { margin-left: -1px; }
.check.static { cursor: default; }

/* Quantities: one ledger line per entry */
.qty { display: grid; grid-template-columns: 8.5rem 3rem minmax(4rem, 1fr) auto; align-items: center; column-gap: var(--s3); }
.qty-top { display: contents; }
.qty-num { grid-column: 1; grid-row: 1; font-size: .9375rem; color: var(--slate); white-space: nowrap; }
.qty-num strong { font: 800 1.125rem var(--display); color: var(--ink); }
.met-tag { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: .2em; font-size: .8125rem; font-weight: 700; color: var(--good); }
.met-tag .icon { width: .875rem; height: .875rem; }
.qty .meter { grid-column: 3; grid-row: 1; }
.qty-form { grid-column: 4; grid-row: 1; display: flex; gap: var(--s1); align-items: center; margin: 0; }
.daily-qty .qty { grid-template-columns: 2.25rem 8.5rem 3rem minmax(4rem, 1fr) auto; padding: var(--s1) 0; border-top: 1px dotted var(--bluegray); }
.daily-qty .qty:first-child { border-top: 0; padding-top: 0; }
.daily-qty .qty-day { grid-column: 1; grid-row: 1; font-weight: 700; font-size: .875rem; }
.daily-qty .qty-num { grid-column: 2; }
.daily-qty .met-tag { grid-column: 3; }
.daily-qty .meter { grid-column: 4; }
.daily-qty .qty-form { grid-column: 5; }
.meter { display: block; width: 100%; height: 6px; overflow: visible; }
.meter-track { fill: var(--edge); }
.meter-fill { fill: var(--navy); }
.qty.met .meter-fill, .lag-totals .meter-fill { fill: var(--good-mark); }
.add-row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin: var(--s5) 0 0 var(--gutter); padding: var(--s4); background: var(--pale); }
.add-row label { flex: 0 0 100%; margin-bottom: calc(-1 * var(--s2)); }
.add-row select { flex: 1 1 260px; width: auto; }
.add-row + p, #items-h ~ p.muted.small { margin-left: var(--gutter); margin-top: var(--s3); }

.lag-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s4) var(--s4); align-items: end; }
.lag-form label span { font-size: .875rem; }
.lag-form input { text-align: right; font-weight: 700; }
.lag-form .btn { grid-column: 1 / -1; justify-self: start; }
.notes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); max-width: var(--measure); }
.notes li { background: var(--cream); border-left: 3px solid var(--orange); padding: var(--s3) var(--s4); }
.notes li.private { background: var(--pale); border-left-color: var(--ink); }
.notes p { margin: 0; white-space: pre-wrap; }
.note-by { font-size: .8125rem; color: var(--slate); margin-top: var(--s2) !important; white-space: normal !important; }
.note-by .vis { font-weight: 700; color: var(--ink); }

/* ---------- Quest ---------- */
.goal { padding-top: var(--s5); margin-top: var(--s5); border-top: 1px solid var(--rule); }
.card-head + .goal { border-top: 0; margin-top: 0; padding-top: var(--s2); }
.goal-head { margin-bottom: var(--s3); }
.goal-head .item-meta, .goal-head .inline-form { margin-left: var(--gutter); }
.goal-head .inline-form { margin-top: var(--s3); }
.goal > table, .goal > .add-tactic { margin-left: var(--gutter); width: calc(100% - var(--gutter)); }
.waiting { display: inline-flex; align-items: center; gap: .35em; font-size: .875rem; font-weight: 700; color: var(--orange-ink); }
.waiting .icon { color: var(--orange); }
.add-tactic { margin-top: var(--s4); }
.add-tactic summary { cursor: pointer; font-weight: 700; padding: var(--s2) 0; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; width: max-content; }
.add-tactic form { margin-top: var(--s3); padding: var(--s5); background: var(--pale); }
.add-goal { border-top: 1px solid var(--rule); margin-top: var(--s6); padding-top: var(--s5); }
.add-goal h3 { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.add-goal h3 .tally { font: 400 .875rem var(--text); }

/* ---------- Tables: ledgers ---------- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: 1.0625rem; line-height: 1.2; border-bottom: 1.5px solid var(--ink); padding-top: 0; padding-bottom: var(--s2); vertical-align: bottom; }
tbody th[scope=row] { font-weight: 700; }
.num { text-align: right; white-space: nowrap; }
.of { color: var(--slate); font-weight: 400; }
.tactics { table-layout: fixed; }
.tactics th:nth-child(1) { width: 36%; } .tactics th:nth-child(2) { width: 20%; } .tactics th:nth-child(3) { width: 19%; } .tactics th:nth-child(5) { width: 6.5rem; }
.tactics td:first-child { font-weight: 600; }
.tactics td:last-child { text-align: right; }
.table-wrap { overflow-x: auto; }
table.data td, table.data th { font-size: .9375rem; }
details summary { cursor: pointer; font-weight: 700; margin-top: var(--s4); }

/* ---------- Coach dashboard ---------- */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: var(--s7); }
.stat { padding: var(--s3) var(--s5) var(--s4); border-left: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-label { display: block; font-size: 1.125rem; line-height: 1.3; }
.stat-value { display: block; font: 800 2.75rem/1 var(--display); letter-spacing: -.035em; margin-top: var(--s2); }
.stat-value small { font: 400 1rem var(--text); color: var(--slate); letter-spacing: 0; }
.stat.attn .stat-value { color: var(--orange-ink); }
.ledger-wrap { margin-bottom: var(--s6); }
.dash td, .dash th { padding-top: var(--s4); padding-bottom: var(--s4); }
.dash thead th { padding-top: 0; padding-bottom: var(--s2); }
.dash th[scope=row] { min-width: 12rem; }
.dash th[scope=row] a { font: 700 1.125rem/1.25 var(--display); text-decoration: none; letter-spacing: -.01em; }
.dash th[scope=row] a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.dash th[scope=row] .block { font-weight: 400; margin-top: 2px; }
.dash tbody tr { position: relative; }
.dash tr.has-flags th[scope=row] { box-shadow: inset 3px 0 0 var(--orange); padding-left: var(--s3); }
.dash tbody tr:hover { background: #f7faff; }
.dash td.num strong { font: 800 1.125rem var(--display); }
.dash .score-n { font: 800 1.125rem var(--display); }
.dash .actions { text-align: right; white-space: nowrap; }
.spark { display: block; overflow: visible; margin-top: 2px; }
.spark-bar.band-green { fill: var(--good-mark); } .spark-bar.band-amber { fill: var(--warn-mark); } .spark-bar.band-red { fill: var(--bad-mark); } .spark-bar.band-none { fill: var(--bluegray); }
.spark-base { stroke: var(--ink); stroke-width: 1; }
.spark-target { stroke: var(--orange); stroke-width: 1.5; }
.flag-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .875rem; line-height: 1.3; }
.flag-tags li { display: flex; gap: .4em; align-items: baseline; }
.flag-tags .icon, .flags .icon { color: var(--orange); flex: none; width: .875rem; height: .875rem; vertical-align: -.1em; }
.clear { display: inline-flex; align-items: center; gap: .35em; color: var(--good); font-weight: 700; font-size: .875rem; }
.key-note { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.key-note ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); font-size: .875rem; color: var(--slate); }
.key-note li { display: flex; align-items: baseline; gap: .5em; }
.key-note li::before { content: ""; width: .5rem; height: .5rem; background: var(--orange); flex: none; transform: translateY(-.05em); }

/* ---------- Road: chart + totals ---------- */
.chart { width: 100%; height: auto; display: block; max-height: 300px; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .grid.base { stroke: var(--ink); }
.chart .axis { font: 600 8px var(--text); fill: var(--slate); font-variant-numeric: tabular-nums; }
.chart .target { stroke: var(--orange); stroke-width: 2; }
.chart .target-label { fill: var(--orange-ink); font-weight: 800; }
.chart .bar.band-green rect { fill: var(--good-mark); } .chart .bar.band-amber rect { fill: var(--warn-mark); } .chart .bar.band-red rect { fill: var(--bad-mark); } .chart .bar.band-none rect { fill: var(--bluegray); }
.lag-totals { list-style: none; padding: 0; margin: 0; }
.lag-totals li { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.lag-totals .meter { grid-column: 1 / -1; }
.lt-value strong { font: 800 1.375rem var(--display); letter-spacing: -.02em; }

/* ---------- Campfire agenda ---------- */
.agenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); align-items: start; }
.step-sec { border-top: 1px solid var(--ink); padding-top: var(--s4); margin-bottom: var(--s6); }
.step-sec.span-all { grid-column: 1 / -1; }
.step-sec h2 { display: flex; align-items: baseline; gap: var(--s3); }
.step { font: 800 1.3125rem/1 var(--display); color: var(--orange-ink); min-width: 1.25rem; font-variant-numeric: tabular-nums; }
.last-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.last-score .score-n { font: 800 2.25rem/1 var(--display); letter-spacing: -.03em; }
.last-score .score-w { font-size: 1rem; }
.last-score > span:not(.score) { color: var(--slate); padding-left: var(--s5); border-left: 1px solid var(--rule); }
.last-score strong { color: var(--ink); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.checklist li:first-child { border-top: 1px solid var(--rule); }
.checklist .icon { width: .9375rem; height: .9375rem; transform: translateY(.1em); }
.checklist .muted { display: block; font-size: .875rem; }
.checklist .win .icon { color: var(--good); }
.checklist .miss .icon { color: var(--orange); }
.bullet { width: .4375rem; height: .4375rem; background: var(--ink); display: inline-block; transform: translateY(-.1em); }
blockquote { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); background: var(--cream); border-left: 3px solid var(--orange); white-space: pre-wrap; }
.quote-by { display: block; font-size: 1.0625rem; margin-bottom: var(--s1); white-space: normal; }
.points { margin: 0; padding-left: 1.125rem; display: grid; gap: var(--s2); list-style: square; }
.points li::marker { color: var(--orange); }
.flags { list-style: none; padding: 0; margin: 0; }
.flag { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.flag:first-child { border-top: 1px solid var(--rule); }
.flag .muted { display: block; font-size: .875rem; }
.ok-line { display: flex; gap: .45em; align-items: center; color: var(--good); font-weight: 700; }
.note-form { margin-top: var(--s5); max-width: var(--measure); }
.footnote { max-width: var(--measure); }

/* ---------- Admin ---------- */
.assignments { list-style: none; padding: 0; margin: var(--s5) 0 0; border-top: 1px solid var(--rule); }
.assignments li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--rule); padding: var(--s1) 0; }
.pair { display: flex; gap: .6em; align-items: baseline; flex-wrap: wrap; }
.who-coach { font-weight: 700; }
.pair-sep { color: var(--slate); font-size: .875rem; }
.status { font-size: .875rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4em; margin-right: var(--s1); }
.status::before { content: ""; width: .5rem; height: .5rem; background: currentColor; }
.status.on { color: var(--good); }
.status.off { color: var(--slate); }
.status.off::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.audit td { font-size: .875rem; }
.audit code { background: none; padding: 0; font-family: var(--text); font-weight: 700; font-size: .875rem; }

/* ---------- Sign-in ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin: var(--s4) 0 0; border-top: 1px solid var(--ink); }
.auth-aside { background: var(--navy); color: #fff; padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); min-height: 26rem; }
.auth-mark { height: 2rem; width: auto; align-self: flex-start; }
.auth-line { font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem)/1.08 var(--display); letter-spacing: -.03em; margin: auto 0 0; }
.auth-route { width: 100%; height: auto; }
.auth-route line { stroke: var(--bluegray); stroke-width: 1; }
.auth-route rect { fill: var(--navy); stroke: var(--bluegray); stroke-width: 1; }
.auth-route rect.done { fill: #fff; stroke: #fff; }
.auth-route rect.now { fill: var(--orange); stroke: var(--orange); }
.auth-main { padding: var(--s6) 0 var(--s6) var(--s6); max-width: 30rem; }
.auth-main h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem); }
.auth-main .sub { color: var(--slate); font-size: 1.0625rem; }
.auth-main form { margin: var(--s5) 0 var(--s4); }
.auth-main .btn { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .item { grid-template-columns: 1fr; row-gap: var(--s3); }
  .item > *, .item > .item-head { grid-column: 1; grid-row: auto; }
}
@media (max-width: 820px) {
  .two-col, .agenda { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1fr; }
  .plan-status { border-left: 0; border-top: 1px solid var(--rule); padding: var(--s4) 0; }
  .score-card { padding-right: 0; }
  .auth { grid-template-columns: 1fr; margin-top: 0; }
  .auth-aside { min-height: 0; padding: var(--s5); gap: var(--s4); }
  .auth-line { margin-top: 0; }
  .auth-main { padding: var(--s5) 0; }
}
@media (max-width: 760px) {
  /* Dashboard ledger becomes one ruled entry per client */
  .dash thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dash, .dash tbody, .dash tr, .dash td, .dash th { display: block; }
  .dash tr { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: var(--s4); border-top: 1px solid var(--ink); padding: var(--s3) 0 var(--s4); }
  .dash tbody tr:hover { background: none; }
  .dash td, .dash th { border: 0; padding: var(--s2) 0 0 !important; text-align: left; }
  .dash th[scope=row] { grid-column: 1 / -1; padding-bottom: var(--s1) !important; }
  .dash tr.has-flags th[scope=row] { padding-left: var(--s3) !important; }
  .dash td[data-label]::before { content: attr(data-label); display: block; font-size: 1.0625rem; line-height: 1.2; margin-bottom: 2px; }
  .dash td[data-label="This week"], .dash td[data-label="Last week"] { grid-column: span 1; }
  .dash td[data-label="Flags"] { grid-column: 1 / -1; }
  .dash td[data-label="Trend"] { grid-column: span 2; }
  .dash td.actions { grid-column: 1 / -1; padding-top: var(--s3) !important; }
  .dash td.actions .btn { width: 100%; }
}
@media (max-width: 640px) {
  :root { --gutter: 2rem; }
  .mast { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand who" "nav nav"; gap: 0 var(--s3); padding: 0 var(--s4); min-height: 0; }
  .mast.bare { grid-template-areas: "brand"; }
  .brand { grid-area: brand; padding: var(--s3) 0; font-size: 1.0625rem; gap: var(--s2); }
  .brand-mark { height: 1rem; }
  .who { grid-area: who; gap: var(--s3); font-size: .8125rem; }
  .who-name { max-width: 9rem; }
  .who .role { display: none; }
  .topnav { grid-area: nav; border-top: 1px solid rgba(186, 201, 217, .2); margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
  .topnav ul { gap: var(--s4); }
  .topnav a { padding: var(--s3) 0; font-size: .9375rem; }
  main { padding: var(--s5) var(--s4) var(--s7); }
  .foot { padding: var(--s4); }
  .page-head { margin-bottom: var(--s5); }
  .subnav { gap: 0 var(--s4); }
  .subnav .subnav-file { margin-left: 0; }
  .card { margin-bottom: var(--s6); }
  .road-strip { margin-bottom: var(--s5); }
  .week-grid { margin-bottom: var(--s5); }
  .stn > a, .stn-cell { padding: var(--s2) 0 var(--s1); }
  .stn-w { font-size: .6875rem; }
  .stn-p { font-size: .6875rem; }
  .stn-pin .glyph { width: .625rem; height: .625rem; box-shadow: 0 0 0 2px #fff; }
  .road-card .stn-p { font-size: .8125rem; }
  .road-card .stn-pin .glyph { width: .75rem; height: .75rem; }
  .score-card { grid-template-columns: 1fr; }
  .score-meta { grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
  .ms-no { font-size: 1.625rem; }
  .items, .add-row { margin-left: 0; }
  .add-row + p, #items-h ~ p.muted.small { margin-left: 0; }
  .done-mark { position: static; display: inline-block; margin-right: .35em; vertical-align: -.15em; }
  .item-head .btn { margin-right: -.5rem; }
  .qty, .daily-qty .qty { grid-template-columns: auto auto 1fr; row-gap: .375rem; }
  .daily-qty .qty { grid-template-columns: 2.5rem auto 1fr; padding: var(--s2) 0; }
  .qty-num, .daily-qty .qty-num { grid-column: 1; }
  .daily-qty .qty-num { grid-column: 2; }
  .met-tag, .daily-qty .met-tag { grid-column: 3; justify-self: end; }
  .qty .meter, .daily-qty .meter { grid-column: 1 / -1; grid-row: 2; }
  .qty-form, .daily-qty .qty-form { grid-column: 1 / -1; grid-row: 3; }
  .qty-form .btn.small { min-height: 40px; min-width: 44px; }
  .qty-form input.tiny { min-height: 40px; width: 5.5rem; }
  .check.chip { min-width: 0; flex: 1 1 0; padding: 0 .25rem; gap: .2rem; }
  .chips .inline { display: flex; flex: 1 1 0; }
  .chips .inline .check { width: 100%; }
  .lag-form { grid-template-columns: 1fr 1fr; }
  .stats { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { padding: var(--s2) var(--s3) var(--s3); }
  .stat-label { font-size: 1rem; }
  .stat-value { font-size: 2rem; }
  .goal-head .item-meta, .goal-head .inline-form { margin-left: 0; }
  .goal > table, .goal > .add-tactic { margin-left: 0; width: 100%; }
  .tactics { table-layout: auto; }
  .tactics thead { display: none; }
  .tactics, .tactics tbody, .tactics tr, .tactics td { display: block; width: auto !important; }
  .tactics tr { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
  .tactics td { border: 0; padding: 0 0 var(--s1); text-align: left !important; }
  .tactics td:nth-child(2), .tactics td:nth-child(3) { display: inline; font-size: .875rem; color: var(--slate); }
  .tactics td:nth-child(2)::after { content: ","; }
  .tactics td:nth-child(4) { margin-top: var(--s2); }
  .last-score > span:not(.score) { border-left: 0; padding-left: 0; }
  .auth-aside .auth-line { font-size: 1.5rem; }
}
@media print {
  header.site, footer.site, .no-print, .subnav, .crumb { display: none !important; }
  main { padding: 0; max-width: none; }
  .agenda { grid-template-columns: 1fr 1fr; }
  .step-sec { break-inside: avoid; }
  a { text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
#vision-h ~ form { max-width: 48rem; }