/*
 * Waymark: the Club Routes design system (#00219), for clubroutes.com, the committee portal and the staff portal.
 * Not for the members' app (public/club/), which keeps its own neutral look so each club's colour leads (#00222).
 *
 * Everything here applies inside <html class="wm"> only, so it can sit beside the current portal styles while
 * screens move over one at a time (#00220). Light or dark follows the device unless <html data-theme> says otherwise.
 *
 *   Colours    --wm-ground (map paper) · --wm-panel · --wm-well · --wm-ink (night navy) · --wm-accent (waymark yellow)
 *              --wm-link (bridleway blue) · ok / warn / bad · map. Text pairs pass 4.5:1, lines and controls 3:1, in
 *              both modes; colours differ in lightness as well as hue (for colourblind readers).
 *   Type       Overpass (from road signs) and Overpass Mono (labels, codes, figures). Six sizes: --wm-t1 … --wm-t6.
 *   Spacing    a 4px scale: --wm-s1 (4px) … --wm-s12 (48px).
 *   Corners    --wm-r1 (6px: tags, codes) · --wm-r2 (12px: fields, cards, tiles) · --wm-r3 (18px: panels, sheets);
 *              buttons are pills.
 *   Controls   --wm-h1 (36px, dense tables and toolbars) · --wm-h2 (44px, everything else).
 */

/* ---------- Fonts (served from our own site: public/fonts, SIL Open Font License, OFL-overpass.txt) ---------- */
@font-face { font-family: "Overpass"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/overpass-400.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/overpass-600.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/overpass-700.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/overpass-800.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/overpass-900.woff2") format("woff2"); }
/* The middle dot: Overpass's has no width, so it sits hard against the next word ("route ·the"); this one character
   comes from Overpass Mono instead (walkthrough 22/10). Same weights as the faces above, so these win for U+00B7 */
@font-face { font-family: "Overpass"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-500.woff2") format("woff2"); unicode-range: U+00B7; }
@font-face { font-family: "Overpass"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-500.woff2") format("woff2"); unicode-range: U+00B7; }
@font-face { font-family: "Overpass"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-600.woff2") format("woff2"); unicode-range: U+00B7; }
@font-face { font-family: "Overpass"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-600.woff2") format("woff2"); unicode-range: U+00B7; }
@font-face { font-family: "Overpass"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-600.woff2") format("woff2"); unicode-range: U+00B7; }
@font-face { font-family: "Overpass Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-500.woff2") format("woff2"); }
@font-face { font-family: "Overpass Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/overpass-mono-600.woff2") format("woff2"); }

/* ---------- Tokens: light ---------- */
html.wm {
  --wm-ground: #EFEBDF; --wm-panel: #FFFDF7; --wm-well: #E8E2D2; --wm-hover: #F4F0E4;
  --wm-line: #DDD6C5; --wm-line-soft: #E6E0CF; --wm-line-strong: #8C8676;
  --wm-ink: #14233A; --wm-ink-2: #374151; --wm-ink-3: #4B5563; --wm-ink-4: #5A6473;
  --wm-on-ink: #FFFDF7;                                   /* text on a navy fill */
  --wm-night: #14233A;                                    /* navy that stays navy in dark mode: the yellow-on-navy label, the hero */
  --wm-accent: #F2C230; --wm-on-accent: #14233A; --wm-accent-soft: #FBF0C8;
  --wm-link: #2457C5; --wm-link-hover: #173E94; --wm-focus: #2457C5;
  --wm-ok: #1F6B3F; --wm-ok-bg: #DDEFE2;
  --wm-warn: #6B4E00; --wm-warn-bg: #FBF0C8;
  --wm-bad: #A3241A; --wm-bad-bg: #FBE3E0;
  --wm-map: #EAE4D2; --wm-contour: #D3C9AE; --wm-route: #14233A; --wm-route-case: #FFFDF7;
  --wm-shadow: 0 1px 2px rgba(20,35,58,.12), 0 6px 18px rgba(20,35,58,.08);
  --wm-shadow-lg: 0 12px 40px rgba(20,35,58,.22);
  --wm-scrim: rgba(20,35,58,.45);

  --wm-font: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wm-mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wm-t1: 12px; --wm-t2: 14px; --wm-t3: 16px; --wm-t4: 20px; --wm-t5: 28px; --wm-t6: 40px;

  --wm-s1: 4px; --wm-s2: 8px; --wm-s3: 12px; --wm-s4: 16px; --wm-s5: 20px; --wm-s6: 24px; --wm-s8: 32px; --wm-s10: 40px; --wm-s12: 48px;
  --wm-r1: 6px; --wm-r2: 12px; --wm-r3: 18px; --wm-pill: 999px;
  --wm-h1: 36px; --wm-h2: 44px;
  color-scheme: light;
}
/* ---------- Tokens: dark (a night map: navy ground, map-paper text; the yellow stays) ---------- */
@media (prefers-color-scheme: dark) {
  html.wm:not([data-theme="light"]) {
    --wm-ground: #0E1828; --wm-panel: #16243A; --wm-well: #1C2D47; --wm-hover: #1F304B;
    --wm-line: #2A3B57; --wm-line-soft: #22324B; --wm-line-strong: #6A7C9E;
    --wm-ink: #EFEBDF; --wm-ink-2: #D6D9DE; --wm-ink-3: #B4BCC8; --wm-ink-4: #A9B1BD;
    --wm-on-ink: #0E1828; --wm-night: #0A1220;
    --wm-accent: #F2C230; --wm-on-accent: #0E1828; --wm-accent-soft: #33301F;
    --wm-link: #8FB0FF; --wm-link-hover: #B7CCFF; --wm-focus: #8FB0FF;
    --wm-ok: #6FD39A; --wm-ok-bg: #173323;
    --wm-warn: #F2D27A; --wm-warn-bg: #33301F;
    --wm-bad: #FF9B85; --wm-bad-bg: #3A1D1A;
    --wm-map: #121F33; --wm-contour: #24344E; --wm-route: #EFEBDF; --wm-route-case: #0A1220;
    --wm-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.3);
    --wm-shadow-lg: 0 12px 40px rgba(0,0,0,.55);
    --wm-scrim: rgba(5,10,18,.6);
    color-scheme: dark;
  }
}
html.wm[data-theme="dark"] {
  --wm-ground: #0E1828; --wm-panel: #16243A; --wm-well: #1C2D47; --wm-hover: #1F304B;
  --wm-line: #2A3B57; --wm-line-soft: #22324B; --wm-line-strong: #6A7C9E;
  --wm-ink: #EFEBDF; --wm-ink-2: #D6D9DE; --wm-ink-3: #B4BCC8; --wm-ink-4: #A9B1BD;
  --wm-on-ink: #0E1828; --wm-night: #0A1220;
  --wm-accent: #F2C230; --wm-on-accent: #0E1828; --wm-accent-soft: #33301F;
  --wm-link: #8FB0FF; --wm-link-hover: #B7CCFF; --wm-focus: #8FB0FF;
  --wm-ok: #6FD39A; --wm-ok-bg: #173323;
  --wm-warn: #F2D27A; --wm-warn-bg: #33301F;
  --wm-bad: #FF9B85; --wm-bad-bg: #3A1D1A;
  --wm-map: #121F33; --wm-contour: #24344E; --wm-route: #EFEBDF; --wm-route-case: #0A1220;
  --wm-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.3);
  --wm-shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --wm-scrim: rgba(5,10,18,.6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
/* Base rules carry no weight (:where), so any component's own colours and type always win over them */
:where(html.wm) body { margin: 0; background: var(--wm-ground); color: var(--wm-ink); font: 400 var(--wm-t3)/1.5 var(--wm-font); -webkit-text-size-adjust: 100%; }
:where(html.wm) a { color: var(--wm-link); text-underline-offset: 2px; }
:where(html.wm) a:hover { color: var(--wm-link-hover); }
:where(html.wm) :focus-visible { outline: 2px solid var(--wm-focus); outline-offset: 2px; }
:where(html.wm) :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* Type: six sizes. Headings are heavy and tight, like road signs; labels and figures are mono. */
.wm .wm-h1 { margin: 0; font: 900 var(--wm-t6)/1 var(--wm-font); letter-spacing: -.015em; }
.wm .wm-h2 { margin: 0; font: 900 var(--wm-t5)/1.1 var(--wm-font); letter-spacing: -.01em; }
.wm .wm-h3 { margin: 0; font: 800 var(--wm-t4)/1.2 var(--wm-font); }
.wm .wm-body { font: 400 var(--wm-t3)/1.55 var(--wm-font); }
.wm .wm-small { font: 400 var(--wm-t2)/1.45 var(--wm-font); color: var(--wm-ink-3); }
.wm .wm-eyebrow { font: 600 var(--wm-t1)/1.3 var(--wm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wm-ink-4); }
.wm .wm-num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons: pills. Plain (outlined), primary (navy), go (yellow: the one key action on a screen), danger, quiet. ---------- */
.wm .wm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wm-s2); min-height: var(--wm-h2); padding: 0 var(--wm-s5);
  border-radius: var(--wm-pill); border: 1.5px solid var(--wm-ink); background: transparent; color: var(--wm-ink);
  font: 700 var(--wm-t2)/1 var(--wm-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.wm .wm-btn:hover { background: var(--wm-hover); color: var(--wm-ink); }
.wm .wm-btn.primary { background: var(--wm-ink); color: var(--wm-on-ink); border-color: var(--wm-ink); }
.wm .wm-btn.primary:hover { background: var(--wm-ink-2); border-color: var(--wm-ink-2); color: var(--wm-on-ink); }
.wm .wm-btn.go { background: var(--wm-accent); color: var(--wm-on-accent); border-color: var(--wm-accent); font-weight: 900; }
.wm .wm-btn.go:hover { filter: brightness(.95); background: var(--wm-accent); color: var(--wm-on-accent); }
.wm .wm-btn.danger { border-color: var(--wm-bad); color: var(--wm-bad); }
.wm .wm-btn.danger:hover { background: var(--wm-bad-bg); color: var(--wm-bad); }
.wm .wm-btn.quiet { border-color: transparent; }
.wm .wm-btn.small { min-height: var(--wm-h1); padding: 0 var(--wm-s4); font-size: 13.5px; }
.wm .wm-btn.icon { width: var(--wm-h2); padding: 0; }
.wm .wm-btn:disabled, .wm .wm-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.wm .wm-btn svg { width: 18px; height: 18px; flex: none; }
.wm .wm-btns { display: flex; flex-wrap: wrap; gap: var(--wm-s2); align-items: center; }

/* Segmented control (List · Month) and filter chips */
.wm .wm-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--wm-pill); background: var(--wm-well); }
.wm .wm-seg button { min-height: 38px; padding: 0 var(--wm-s4); border: 0; border-radius: var(--wm-pill); background: transparent; font: 700 var(--wm-t2)/1 var(--wm-font); cursor: pointer; }
.wm .wm-seg button[aria-selected="true"], .wm .wm-seg button[aria-pressed="true"] { background: var(--wm-panel); box-shadow: var(--wm-shadow); font-weight: 800; }
.wm .wm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--wm-s4); border-radius: var(--wm-pill);
  border: 1.5px solid var(--wm-line-strong); background: var(--wm-panel); color: var(--wm-ink); font: 700 13.5px/1 var(--wm-font); cursor: pointer; }
.wm .wm-chip[aria-pressed="true"] { background: var(--wm-ink); border-color: var(--wm-ink); color: var(--wm-on-ink); }

/* ---------- Fields ---------- */
.wm .wm-field { display: grid; gap: 6px; }
.wm .wm-field > label, .wm .wm-label { font: 700 var(--wm-t2)/1.3 var(--wm-font); }
.wm .wm-field .hint { font-size: 13px; color: var(--wm-ink-3); }
.wm .wm-field .err { font-size: 13px; font-weight: 700; color: var(--wm-bad); }
.wm .wm-input, .wm .wm-field input:not([type=checkbox]):not([type=radio]), .wm .wm-field select, .wm .wm-field textarea {
  width: 100%; box-sizing: border-box; min-height: var(--wm-h2); padding: 10px 14px; border-radius: var(--wm-r2);
  border: 1.5px solid var(--wm-line-strong); background: var(--wm-panel); color: var(--wm-ink); font: 400 var(--wm-t3)/1.4 var(--wm-font); }
.wm .wm-field textarea { min-height: 96px; resize: vertical; }
.wm .wm-field input::placeholder, .wm .wm-field textarea::placeholder { color: var(--wm-ink-4); }
.wm .wm-field input:focus, .wm .wm-field select:focus, .wm .wm-field textarea:focus { outline: 2px solid var(--wm-focus); outline-offset: 1px; border-color: var(--wm-ink); }
.wm .wm-field[data-invalid] input, .wm .wm-field[data-invalid] select, .wm .wm-field[data-invalid] textarea { border-color: var(--wm-bad); border-width: 2px; }
.wm .wm-check { display: flex; gap: var(--wm-s3); align-items: flex-start; min-height: var(--wm-h2); padding: 10px 0; box-sizing: border-box; font-size: var(--wm-t3); cursor: pointer; }
.wm .wm-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--wm-ink); }

/* ---------- Surfaces ---------- */
.wm .wm-card { background: var(--wm-panel); border: 1px solid var(--wm-line); border-radius: var(--wm-r3); padding: var(--wm-s6); }
.wm .wm-card.tight { padding: var(--wm-s4); border-radius: var(--wm-r2); }
.wm .wm-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wm-s4); margin-bottom: var(--wm-s3); }
.wm .wm-rule { border: 0; border-top: 1px solid var(--wm-line-soft); margin: var(--wm-s4) 0; }

/* The "Needs you" bar: yellow-soft, with a yellow disc */
.wm .wm-alert { display: flex; align-items: center; gap: var(--wm-s3); padding: var(--wm-s3) var(--wm-s4); border-radius: var(--wm-r2); background: var(--wm-accent-soft); color: var(--wm-ink); }
.wm .wm-alert .dot { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--wm-accent); color: var(--wm-on-accent); display: grid; place-items: center; font-weight: 900; }
.wm .wm-alert .txt { flex: 1; }
.wm .wm-alert.bad { background: var(--wm-bad-bg); } .wm .wm-alert.bad .dot { background: var(--wm-bad); color: var(--wm-panel); }
.wm .wm-alert.ok { background: var(--wm-ok-bg); } .wm .wm-alert.ok .dot { background: var(--wm-ok); color: var(--wm-panel); }

/* ---------- Tags and codes ---------- */
.wm .wm-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--wm-r1); border: 1.5px solid currentColor;
  font: 600 var(--wm-t1)/1.4 var(--wm-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--wm-ink); }
.wm .wm-tag.ok { color: var(--wm-ok); }
.wm .wm-tag.need { background: var(--wm-accent); border-color: var(--wm-accent); color: var(--wm-on-accent); }
.wm .wm-tag.bad { color: var(--wm-bad); }
.wm .wm-tag.solid { background: var(--wm-night); border-color: var(--wm-night); color: var(--wm-accent); }
.wm .wm-code { display: inline-block; padding: 0 6px; border: 2px solid var(--wm-ink); border-radius: var(--wm-r1); font: 600 13px/1.5 var(--wm-mono); color: var(--wm-ink); }

/* ---------- Figures: a big number over a small label ---------- */
.wm .wm-stats { display: flex; flex-wrap: wrap; gap: var(--wm-s6); }
.wm .wm-stat { display: grid; }
.wm .wm-stat b { font: 800 26px/1.1 var(--wm-font); font-variant-numeric: tabular-nums; }
.wm .wm-stat span { font-size: 13px; color: var(--wm-ink-4); }

/* ---------- Tiles: the members' app's Next Run tiles, for the portal (same shape, same meaning) ----------
   .k a small label · .v the big value · .k2 a detail line. act = the thing to do (navy), ask = a question not yet
   answered (dashed), done = answered (green edge), warn = something to know (yellow). */
.wm .wm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--wm-s2); }
.wm .wm-tile { display: grid; gap: 2px; align-content: start; min-height: 88px; padding: 10px 12px; box-sizing: border-box; text-align: left;
  background: var(--wm-panel); border: 1px solid var(--wm-line); border-radius: var(--wm-r2); color: var(--wm-ink); font: inherit; }
button.wm-tile { cursor: pointer; }
button.wm-tile:hover { background: var(--wm-hover); }
.wm .wm-tile .k { font: 600 11px/1.3 var(--wm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wm-ink-4); }
.wm .wm-tile .v { display: inline-flex; align-items: center; gap: 6px; font: 800 24px/1.05 var(--wm-font); font-variant-numeric: tabular-nums; }
.wm .wm-tile .k2 { font-size: 13px; color: var(--wm-ink-3); }
.wm .wm-tile.act { background: var(--wm-ink); border-color: var(--wm-ink); color: var(--wm-on-ink); }
.wm .wm-tile.act:hover { background: var(--wm-ink-2); }
.wm .wm-tile.act .k, .wm .wm-tile.act .k2 { color: inherit; opacity: .85; }
.wm .wm-tile.ask { border: 1.5px dashed var(--wm-ink-3); }
.wm .wm-tile.done { border: 1.5px solid var(--wm-ok); } .wm .wm-tile.done .v svg { color: var(--wm-ok); }
.wm .wm-tile.warn { background: var(--wm-accent-soft); border-color: var(--wm-accent); }
.wm .wm-tile .v svg { width: 20px; height: 20px; flex: none; }

/* ---------- Lists and tables ---------- */
.wm .wm-list { display: grid; }
.wm .wm-list > * { display: flex; align-items: center; gap: var(--wm-s3); min-height: 56px; padding: var(--wm-s2) 0; border-top: 1px solid var(--wm-line-soft); }
.wm .wm-list > *:first-child { border-top: 0; }
.wm .wm-table { width: 100%; border-collapse: collapse; font-size: var(--wm-t2); }
.wm .wm-table th { text-align: left; font: 600 var(--wm-t1)/1.3 var(--wm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wm-ink-4);
  padding: var(--wm-s2) var(--wm-s3); border-bottom: 2px solid var(--wm-ink); }
.wm .wm-table td { padding: 0 var(--wm-s3); height: var(--wm-h2); border-bottom: 1px solid var(--wm-line-soft); font-variant-numeric: tabular-nums; }
.wm .wm-table tr:hover td { background: var(--wm-hover); }

/* ---------- Sheets (dialogs): a panel over a scrim; on a phone, a sheet from the bottom ---------- */
.wm dialog.wm-sheet { border: 0; padding: 0; border-radius: var(--wm-r3); background: var(--wm-panel); color: var(--wm-ink); box-shadow: var(--wm-shadow-lg); width: min(520px, calc(100vw - 32px)); }
.wm dialog.wm-sheet::backdrop { background: var(--wm-scrim); }
.wm .wm-sheet-in { display: grid; gap: var(--wm-s4); padding: var(--wm-s6); }
.wm .wm-sheet-foot { display: flex; justify-content: flex-end; gap: var(--wm-s2); padding-top: var(--wm-s2); }
@media (max-width: 600px) {
  .wm dialog.wm-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--wm-r3) var(--wm-r3) 0 0; }
  .wm .wm-sheet-foot { flex-direction: column-reverse; } .wm .wm-sheet-foot .wm-btn { width: 100%; }
}

/* ---------- Navigation item (left nav and phone tabs) ---------- */
.wm .wm-nav { display: grid; gap: var(--wm-s1); }
.wm .wm-nav a { display: flex; align-items: center; gap: var(--wm-s3); min-height: var(--wm-h2); padding: 0 var(--wm-s3); border-radius: 10px; color: var(--wm-ink); text-decoration: none; font-weight: 600; }
.wm .wm-nav a:hover { background: var(--wm-hover); }
.wm .wm-nav a[aria-current="page"] { background: var(--wm-ink); color: var(--wm-on-ink); font-weight: 700; }

/* ---------- The mark: a yellow disc with a navy waymark arrow ---------- */
.wm .wm-mark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 900 17px/1 var(--wm-font); letter-spacing: .01em; color: var(--wm-ink); text-decoration: none; text-transform: uppercase; }
.wm .wm-mark svg { width: 34px; height: 34px; flex: none; }