/* ==========================================================================
   ZHL — Minimal Dashboard design system
   Built from the "Direction 3 - Minimal Dashboard" handoff (2026-08-20).
   Coexists with the legacy Tailwind/Archivo look used by not-yet-migrated
   pages: only --bg / --panel / --accent are redefined here (new values win
   for those three shared names); every other legacy token in base.html's
   :root block is untouched, so old pages keep rendering correctly.
   ========================================================================== */

:root {
  /* -- dark (default) -- */
  --bg:     #0e1013;
  --panel:  #14171c;
  --ink:    #eceef2;
  --ink2:   #a2a9b5;
  --ink3:   #6d7480;
  --line:   #23262d;
  --line2:  #1b1e24;
  --hover:  #171a20;
  --accent: #00b8d4;
  --accent-ink: #00232a;
  --gold:   #c9a227;
  --warn:   #c2410c;
  --warn-soft: rgba(194,65,12,.18);

  --crest-navy:  #1b2a4a;
  --crest-gold:  #c9a227;
  --crest-cream: #f2ebdc;

  --shell-sidebar-w: 216px;
  --shell-drawer-w: 252px;
  --content-maxw: 1240px;

  /* manager palette — one stable hue per owner index (0-15), oklch wheel,
     hue = i*22.5+250 per the handoff formula. Index mapping matches
     OWNER_COLORS in web.py, so templates just reference --mgr-{{ idx }}.
     Lightness alternates between two bands (even/odd index) on top of the
     hue rotation -- with 16 categories, hue spacing alone (22.5°) reads as
     "samey" in a few bands (yellow-green especially), so the lightness
     stagger gives every color a second, independent way to stand out from
     its neighbors. Chroma bumped from the original 0.11 for more pop. */
  --mgr-0:  oklch(74% 0.15 250);
  --mgr-1:  oklch(63% 0.15 272.5);
  --mgr-2:  oklch(74% 0.15 295);
  --mgr-3:  oklch(63% 0.15 317.5);
  --mgr-4:  oklch(74% 0.15 340);
  --mgr-5:  oklch(63% 0.15 2.5);
  --mgr-6:  oklch(74% 0.15 25);
  --mgr-7:  oklch(63% 0.15 47.5);
  --mgr-8:  oklch(74% 0.15 70);
  --mgr-9:  oklch(63% 0.15 92.5);
  --mgr-10: oklch(74% 0.15 115);
  --mgr-11: oklch(63% 0.15 137.5);
  --mgr-12: oklch(74% 0.15 160);
  --mgr-13: oklch(63% 0.15 182.5);
  --mgr-14: oklch(74% 0.15 205);
  --mgr-15: oklch(63% 0.15 227.5);

  /* roster-status chip colors (Kept/Prospect already covered by --gold/
     --accent above) -- Drafted/Traded/Waiver each need their own distinct
     band so the acquisition method reads at a glance on /teams/{short}. */
  --status-drafted: #4f9ddb;
  --status-traded:  #a78bfa;
  --status-waiver:  #34d399;
  --status-waiver-soft: rgba(52,211,153,.16);
}

:root[data-theme="light"] {
  --bg:     #fbfbfc;
  --panel:  #ffffff;
  --ink:    #14161a;
  --ink2:   #5f6672;
  --ink3:   #9aa0ab;
  --line:   #e6e8ec;
  --line2:  #f0f1f4;
  --hover:  #f2f3f6;
  --accent: #0e93a8;
  --accent-ink: #ffffff;
  --gold:   #b8860b;
  --warn:   #c2410c;
  --warn-soft: rgba(194,65,12,.10);

  --mgr-0:  oklch(60% 0.15 250);
  --mgr-1:  oklch(50% 0.15 272.5);
  --mgr-2:  oklch(60% 0.15 295);
  --mgr-3:  oklch(50% 0.15 317.5);
  --mgr-4:  oklch(60% 0.15 340);
  --mgr-5:  oklch(50% 0.15 2.5);
  --mgr-6:  oklch(60% 0.15 25);
  --mgr-7:  oklch(50% 0.15 47.5);
  --mgr-8:  oklch(60% 0.15 70);
  --mgr-9:  oklch(50% 0.15 92.5);
  --mgr-10: oklch(60% 0.15 115);
  --mgr-11: oklch(50% 0.15 137.5);
  --mgr-12: oklch(60% 0.15 160);
  --mgr-13: oklch(50% 0.15 182.5);
  --mgr-14: oklch(60% 0.15 205);
  --mgr-15: oklch(50% 0.15 227.5);

  --status-drafted: #2563a8;
  --status-traded:  #7c3aed;
  --status-waiver:  #15803d;
  --status-waiver-soft: rgba(21,128,61,.12);
}

/* ---- base / type ------------------------------------------------------- */
.zd { color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.zd, .zd * { box-sizing: border-box; }
.zd a { color: inherit; text-decoration: none; }
.zd .mono { font-family: 'IBM Plex Mono', monospace; }
.zd .label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink3);
}
.zd h1.zd-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.4px; color: var(--ink); }
.zd .zd-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink3); }
.zd .zd-lede { margin: 0 0 22px; font-size: 13.5px; color: var(--ink2); max-width: 560px; line-height: 1.5; }
.zd .accent { color: var(--accent); }

/* ---- shell -------------------------------------------------------------- */
.zd-shell {
  min-height: 100vh; background: var(--bg); display: grid;
  grid-template-columns: var(--shell-sidebar-w) minmax(0,1fr);
}
.zd-sidebar {
  border-right: 1px solid var(--line); padding: 20px 16px; display: flex;
  flex-direction: column; gap: 26px; background: var(--bg); position: sticky;
  top: 0; height: 100vh; overflow-y: auto; z-index: 50;
}
.zd-sidebar-brand { display: flex; align-items: center; gap: 9px; }
.zd-sidebar-brand .zd-wordmark { font-size: 14px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
.zd-sidebar-brand .zd-v { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .6px; color: var(--ink3); }
.zd-navgroup { display: grid; gap: 2px; }
.zd-navgroup .label { padding: 0 8px 8px; }
.zd-navlink {
  text-align: left; padding: 7px 8px; border-radius: 6px; border: none; background: transparent;
  color: var(--ink2); font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; cursor: pointer;
  display: block; width: 100%;
}
.zd-navlink:hover { background: var(--hover); color: var(--ink); }
.zd-navlink.active { background: var(--hover); color: var(--ink); font-weight: 500; }
.zd-sidebar-foot { margin-top: auto; display: grid; gap: 10px; }
.zd-sidebar-stat { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink2); }
.zd-sidebar-stat span:last-child { color: var(--ink); }
.zd-theme-btn {
  text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--ink2); font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .4px; cursor: pointer;
}
.zd-theme-btn:hover { background: var(--hover); }

.zd-topbar {
  display: none; position: sticky; top: 0; z-index: 40; align-items: center; gap: 11px;
  padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.zd-burger {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: transparent;
  color: var(--ink); font-size: 15px; cursor: pointer; line-height: 1; flex: none;
}
.zd-topbar-title { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3); }
.zd-topbar-theme { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink2); font-size: 13px; cursor: pointer; flex: none; }
.zd-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.5); display: none; }

.zd-content { min-width: 0; padding: 28px 32px 60px; max-width: var(--content-maxw); }

/* Opt-in wider content column for data-dense pages (the draft board, 16
   pick columns wide) -- the site-wide 1240px cap left them BOTH wasting
   margin on a real desktop monitor AND forced into horizontal scroll at
   the same time, since the board's own internal row width (1360px
   minimum, 16 columns) already exceeds 1240px on its own. Gated to its own
   min-width query (matching the existing max-width:1100px breakpoint
   below) rather than relying on selector specificity to win against that
   breakpoint's `.zd-content { max-width: none }` -- the two rules only
   ever apply to non-overlapping viewport ranges this way, so mobile/tablet
   behavior (already max-width:none below 1100px) can't be affected by
   this class regardless of markup. */
@media (min-width: 1101px) {
  .zd-content.zd-content-wide { max-width: 1900px; }
}

.zd-footer { padding: 20px 32px 40px; border-top: 1px solid var(--line); margin-top: 10px; }
.zd-footer .zd-fname { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1.6px; color: var(--ink2); }
.zd-footer .zd-ftag { font-size: 11px; color: var(--ink3); margin-top: 2px; }

@media (max-width: 1100px) {
  .zd-shell { display: block; }
  .zd-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; width: var(--shell-drawer-w);
    transform: translateX(-102%); transition: transform .18s ease; z-index: 50;
  }
  .zd-sidebar.open { transform: translateX(0); }
  .zd-scrim.open { display: block; }
  .zd-topbar { display: flex; }
  .zd-content { padding: 16px 14px 90px; max-width: none; }
  .zd-footer { padding: 16px 14px 32px; }
}

/* ---- buttons / pills / inputs ------------------------------------------ */
.zd-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--ink2);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.zd-pill:hover { border-color: var(--ink3); }
.zd-pill.active { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); }
.zd-textbtn { border: none; background: transparent; color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; cursor: pointer; padding: 0; }
.zd-textbtn:hover { color: var(--ink); }
.zd-input, .zd-select {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  color: var(--ink); font-size: 13px; font-family: 'IBM Plex Sans', sans-serif; outline: none;
}
.zd-select { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; cursor: pointer; }
.zd-select.sm { padding: 4px 7px; font-size: 11px; color: var(--ink2); }
.zd-input:focus, .zd-select:focus { border-color: var(--accent); }
.zd-input::placeholder { color: var(--ink3); }

/* ---- panels / stat strips ------------------------------------------------ */
.zd-panel { border: 1px solid var(--line); border-radius: 8px; }
.zd-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; margin-bottom: 26px; }
.zd-strip-cell { padding: 11px 14px; border-right: 1px solid var(--line); }
.zd-strip-cell:last-child { border-right: none; }
.zd-strip-cell .label { margin-bottom: 5px; }
.zd-strip-cell .zd-val { font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 500; color: var(--ink); }
.zd-strip-cell .zd-note { font-size: 11px; color: var(--ink3); margin-top: 3px; }
@media (max-width: 1100px) {
  .zd-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(140px,1fr); overflow-x: auto; }
}

/* ---- chips --------------------------------------------------------------- */
.zd-chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink3); white-space: nowrap;
}
.zd-chip.keeper { border-color: var(--gold); color: var(--gold); }
.zd-chip.accent { border-color: var(--accent); color: var(--accent); }
.zd-chip.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.zd-chip.seed { border-color: var(--line); color: var(--ink3); font-size: 10px; padding: 1px 6px; }
.zd-chip.drafted { border-color: var(--status-drafted); color: var(--status-drafted); }
.zd-chip.traded { border-color: var(--status-traded); color: var(--status-traded); }
.zd-chip.waiver { border-color: var(--status-waiver); color: var(--status-waiver); }
/* "Called-up Prospect" (called up, not yet declared a free keeper) needs its
   own band distinct from both "Prospect" (--accent) and "Free Keeper"
   (--gold, same as Kept) -- reuses --warn rather than adding a new token. */
.zd-chip.called-up { border-color: var(--warn); color: var(--warn); }
/* Filled, not just outlined -- every other status chip is an outline, so a
   SOLID fill is what makes "can I actually take this player" stand out from
   everything else in the same column at a glance, not just a same-weight
   color swap. */
.zd-chip.available { border-color: var(--status-waiver); color: var(--bg); background: var(--status-waiver); font-weight: 700; }
.zd-swatch { display: inline-block; flex: none; }
.zd-swatch.sq { width: 8px; height: 8px; border-radius: 2px; }
.zd-swatch.sq-sm { width: 7px; height: 7px; border-radius: 2px; }
.zd-swatch.dot { width: 6px; height: 6px; border-radius: 50%; }

/* ---- dense flex table ----------------------------------------------------- */
.zd-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.zd-thead, .zd-row {
  display: flex; min-width: max-content; align-items: center; padding: 7px 14px;
}
.zd-thead {
  border-bottom: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3);
}
.zd-row { padding: 8px 14px; border-bottom: 1px solid var(--line2); font-size: 12.5px; }
.zd-row:last-child { border-bottom: none; }
.zd-row:hover { background: var(--hover); }
.zd-thead > div, .zd-row > div { flex: 0 0 auto; }
.zd-thead .sortable { cursor: pointer; }
.zd-col-num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.zd-col-pin {
  position: -webkit-sticky; position: sticky; background: var(--bg);
  /* Forces its own compositing layer -- without this, iOS Safari can
     visibly tear/ghost a sticky column during momentum-scroll of a wide
     horizontally-scrolling flex table (confirmed on the /teams roster
     table, 2026-08-28): the sticky cell repaints a frame behind the
     content scrolling under it instead of staying cleanly opaque. */
  will-change: transform;
  transform: translateZ(0);
}
.zd-row:hover .zd-col-pin { background: var(--hover); }
.zd-name-link {
  font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  color: var(--ink);
}
.zd-name-link:hover { text-decoration-color: var(--accent); }

/* ---- managers grid (home) -------------------------------------------------- */
.zd-mgr-btn {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border: 1px solid var(--line);
  border-radius: 6px; background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.zd-mgr-btn:hover { border-color: var(--ink3); }
.zd-mgr-btn .zd-mgr-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ink); }
.zd-mgr-btn .zd-mgr-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-mgr-btn .zd-mgr-record { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink3); padding-left: 14px; }

/* ---- draft board grid (home preview + /draft) ----------------------------- */
.zd-board-row { display: flex; border-bottom: 1px solid var(--line2); min-width: 940px; }
.zd-board-row:last-child { border-bottom: none; }
.zd-board-gutter { flex: none; width: 34px; padding: 6px 0 6px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink3); }
.zd-board-cells { flex: 1; display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); }
.zd-board-cell {
  margin: 1px; padding: 6px 8px; border-radius: 3px;
  background: color-mix(in oklch, var(--cell-color, var(--ink3)) 42%, transparent);
  transition: opacity .15s;
}
.zd-board-cell .owner { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.zd-board-cell.dim { opacity: .22; }

/* ---- trade cards ------------------------------------------------------------ */
.zd-trade-card { border-bottom: 1px solid var(--line); }
.zd-trade-card:last-child { border-bottom: none; }
.zd-trade-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--hover); border-bottom: 1px solid var(--line2); }
.zd-trade-body { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 10px; padding: 10px 14px; align-items: start; }
.zd-trade-asset { font-size: 12.5px; font-weight: 500; display: flex; gap: 7px; align-items: center; }
.zd-trade-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink3); }

/* ---- crest --------------------------------------------------------------- */
.zd-crest { flex: none; }