/* The NFLPA dashboard's own stylesheet (PAL-1331), after tokens.css and components.css. Every colour, font, size and radius is a token
   (bun ../../Design/design-check.ts src). Pages are touch at every width (data-density="touch"); brand-cardinal is the sign-in accent
   (PAL-1311 ruling 6). */

/* Light only: the page a shade off the cards' white, not the token's grey (owner 2026-10-21); cards part from it by their hairline. The
   dark theme's own --surface-page outranks this (tokens.css's dark selectors are more specific), and keeps its token value. */
:root { --surface-page: color-mix(in srgb, var(--surface-sunk) 70%, var(--surface)); }

/* ===== Type: the board's nine roles (PAL-1331 type scale, owner 21 Oct; type-inventory/proposal.md), each a font shorthand on the system
   stack. Every text rule below sets `font: var(--type-…)` and a colour, nothing else about type: this block is the only place in the file
   that sets a font size, weight or line height (test/type.test.ts), and nothing here reads the touch layer's --fs-*. Tracking: tight on
   display, title and heading; caps (uppercase, .04em) only with --type-tag. */
/* type-roles:start */
:root {
  --type-display: var(--w-bold) 28px/34px var(--font-sans);      /* page title, stats figure, sign-in heading */
  --type-title: var(--w-semibold) 24px/30px var(--font-sans);    /* player name, empty-state titles */
  --type-heading: var(--w-semibold) 16px/1.4 var(--font-sans);   /* section and panel headings, card names, bar title, "Recent activity" */
  --type-body: var(--w-regular) 16px/24px var(--font-sans);      /* sentences you read: subtitle, text bubble, inputs, menu, toasts */
  --type-label: var(--w-medium) 14px/20px var(--font-sans);      /* every action link and button, row titles, form labels */
  --type-text: var(--w-regular) 14px/20px var(--font-sans);      /* secondary lines: card status, stats lines, the ask, counts */
  --type-meta: var(--w-regular) 13px/1.4 var(--font-sans);       /* dates, range, Updated, legends, hover card, copied line, debug ids */
  --type-tag: var(--w-semibold) 12px/16px var(--font-sans);      /* pills, initials, caps eyebrows, team codes */
  --type-small: var(--w-regular) 12px/18px var(--font-sans);     /* row detail, axis and game-day labels, the phone's key */
}
/* Bold inside a line is 600, never the browser's 700; a link inside a line takes the line's size at the label's 500. */
b, strong, .signin ul.rules li.unmet { font-weight: var(--w-semibold); }
/* Under 640 px the page header steps down (the comp's phone frames: title 26, subtitle 14, Updated 12); everything else keeps one size at
   every width. */
@media (max-width: 639.98px) {
  .nd-titles { --type-display: var(--w-bold) 26px/32px var(--font-sans); --type-body: var(--type-text); --type-meta: var(--type-small); }
}
/* type-roles:end */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* clip, not hidden: the full-bleed bar's 100vw counts a classic scrollbar, and clip keeps that sliver from scrolling sideways without
   making a scroll container that would unstick the bar. */
body { font: var(--type-body); overflow-wrap: anywhere; overflow-x: clip; }

/* ===== Sign-in pages: Mist surfaces and ink, cardinal on the button, the heading and the notice rail. */
.signin { width: 100%; max-width: 440px; margin: 0 auto;
  padding: max(var(--space-24), env(safe-area-inset-top)) max(var(--space-18), env(safe-area-inset-right)) max(var(--space-56), env(safe-area-inset-bottom)) max(var(--space-18), env(safe-area-inset-left)); }
.signin .logo { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 0 var(--space-28); color: var(--ink); }
.signin h1 { margin: 0 0 var(--space-16); font: var(--type-display); letter-spacing: var(--track-tight); color: var(--brand-cardinal); }
.signin label { display: block; margin: var(--space-18) 0 var(--space-6); font: var(--type-label); }
.signin input { display: block; width: 100%; max-width: 100%; min-height: var(--control); margin: 0; padding: var(--space-10) var(--space-12);
  font: var(--type-body); color: var(--ink); background: var(--surface); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); }
/* .signin input stays at 16 (--type-body): under it iOS zooms the page on focus. */
.signin input:focus-visible { outline: none; border-color: var(--brand-cardinal); box-shadow: var(--focus-ring); }
.signin input[readonly] { background: var(--surface-sunk); color: var(--ink-2); }
.signin button { display: block; width: 100%; max-width: 100%; min-height: var(--control); margin: var(--space-24) 0 0; padding: 0 var(--space-16);
  font: var(--type-label); color: var(--on-ink); background: var(--brand-cardinal);
  border: var(--hairline) solid var(--brand-cardinal); border-radius: var(--radius-sm); cursor: pointer; }
.signin button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.signin button.lw-btn--quiet { color: var(--ink-2); background: transparent; border-color: var(--line-strong); }
.signin a { color: var(--ink); }
.signin .links { margin: var(--space-24) 0 0; font: var(--type-text); color: var(--ink-2); }
.signin .notice { --lw-rail: var(--brand-cardinal); margin: 0 0 var(--space-16); }
.signin ul.rules { margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.signin ul.rules li::before { content: "\2022\00a0\00a0"; }
.signin ul.rules li.unmet::before { content: "\2715\00a0\00a0"; }
/* on-ink turns dark in dark mode; the cardinal button keeps light text. */
@media (prefers-color-scheme: dark) { .signin button:not(.lw-btn--quiet) { color: var(--ink); } }

/* ===== Director view (PAL-1331, board v3 comp 21 Oct): one sticky bar on top at every width, edge to edge (the brand, the title and ⋯; on
   a phone drilled into a player, ‹ Players, his place and ↑ ↓ instead of the brand and title); then the page title with Updated at its
   right, the stats card, and the list under its search box. Under 768px the list, or the player card as its own screen; from 768px the
   list in a 340px column with the player card sticky beside it under the bar; 360px from 1024px; from 1200px the page grows to 1300px
   and the list to 420px. Spacing keeps an 8-pt rhythm (4/8/16/24/32). Soft tints are color-mix of the status tokens, so both themes
   follow. No left rails: they never look right on rounded cards (owner); a selection is a tint and a ring. Motion is short and ease-out
   (120-220 ms): the bar's menu, disclosures (Board's useDisclose), the phone's push and pop (a view transition, else data-slide); none
   under reduced motion. */
.nd-main { max-width: var(--pane-max); margin: 0 auto;
  padding: 0 max(var(--space-16), env(safe-area-inset-right)) calc(var(--space-32) + env(safe-area-inset-bottom)) max(var(--space-16), env(safe-area-inset-left)); }
/* --nd-bar-h: the sticky bar's height, safe area included; whatever else sticks (the pane, the search box) sits under it. --nd-dock-h:
   the bar and the docked search box, which a sticky section heading and a card scrolled to sit under. --nd-lh-h: a section heading's height
   (--type-heading's 16px/1.4 line and .nd-lh's padding-block), which a card scrolled to also clears. */
.nd-board { --nd-bar-h: calc(var(--control) + env(safe-area-inset-top, 0px)); --nd-dock-h: calc(var(--nd-bar-h) + var(--control) + var(--space-16));
  --nd-lh-h: calc(1.4 * 16px + 2 * var(--space-8));
  display: flex; flex-direction: column; gap: var(--space-16); }

/* The bar's colour: opaque, the --surface-glass colour without its alpha in each theme (white; 31,36,45), which assets.ts's THEME_COLORS
   reads from the same tokens. Opaque and unblurred because Safari 26 ignores theme-color and tints its status area from a sticky top
   element's background colour, alpha dropped, and samples nothing from one with a backdrop-filter, falling back to the page's colour;
   the home-screen app does the same (iOS 26.5 and 27.0 simulators, 21 Oct). */
:root { --nd-bar: var(--surface); }
:root[data-theme="dark"] { --nd-bar: var(--surface-raised); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nd-bar: var(--surface-raised); } }
/* The board's card and panel surface: --surface in light; in dark a shade toward the page, so the cards part from it less harshly (owner
   22 Oct). --nd-sunk is the well inside a card (bar tracks, the draft, the reach-out box): dark --surface-sunk is what the card now
   mixes to, so the well moves toward the page with it and keeps its ~4 levels under the card. Inputs, pills, the bar and the kit keep
   --surface. */
:root { --nd-card: var(--surface); --nd-sunk: var(--surface-sunk); --nd-card-line: var(--line); --nd-ring: var(--line-accent);
  --nd-seg-need: color-mix(in srgb, var(--act) 56%, var(--nd-card)); --nd-seg-wait: color-mix(in srgb, var(--ink-dim) 14%, var(--nd-card));
  --nd-seg-hatch: color-mix(in srgb, var(--ink-dim) 55%, transparent); --nd-selected: var(--accent-soft); }
:root[data-theme="dark"] { --nd-card: color-mix(in oklab, var(--surface) 55%, var(--surface-page)); --nd-sunk: color-mix(in oklab, var(--surface-sunk) 30%, var(--surface-page));
  --nd-card-line: color-mix(in oklab, var(--line) 50%, var(--nd-card)); --nd-ring: color-mix(in oklab, var(--line-accent) 55%, var(--nd-card)); --nd-seg-need: color-mix(in srgb, var(--act) 70%, var(--ink)); --nd-seg-wait: color-mix(in srgb, var(--ink-dim) 45%, var(--nd-card)); --nd-seg-hatch: color-mix(in srgb, var(--nd-card) 55%, transparent); --nd-selected: color-mix(in oklab, var(--accent-soft) 35%, var(--nd-card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nd-card: color-mix(in oklab, var(--surface) 55%, var(--surface-page));
  --nd-sunk: color-mix(in oklab, var(--surface-sunk) 30%, var(--surface-page)); --nd-card-line: color-mix(in oklab, var(--line) 50%, var(--nd-card)); --nd-ring: color-mix(in oklab, var(--line-accent) 55%, var(--nd-card));
  --nd-seg-need: color-mix(in srgb, var(--act) 70%, var(--ink)); --nd-seg-wait: color-mix(in srgb, var(--ink-dim) 45%, var(--nd-card)); --nd-seg-hatch: color-mix(in srgb, var(--nd-card) 55%, transparent);
  --nd-selected: color-mix(in oklab, var(--accent-soft) 35%, var(--nd-card)); } }
/* The bar: the window's full width (its % is the board's, the page column), its content on the column's edges, ⋯ an outlined button
   flush with the right one; a hairline under it. Its top padding is the safe area, for a page drawn under the status bar. */
.nd-top { grid-area: top; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-8); min-height: var(--nd-bar-h);
  margin: 0 calc(50% - 50vw); padding: env(safe-area-inset-top, 0px) calc(50vw - 50%) 0;
  background: var(--nd-bar); border-bottom: var(--hairline) solid var(--line-soft); }
/* The brand (owner's header comp, 21 Oct): the bolt, then his wordmark "Lightning · NFLPA" (outlined, its grey and blue dot baked into
   the SVG, so no font or literal colour here), 114 px wide: the comp's 13 px text. The wordmark's alt names the brand; the bolt's
   is empty. */
.nd-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-10); user-select: none; }
.nd-brand img { flex: none; display: block; }
.nd-brand__mk { width: 20px; height: 22px; }
.nd-brand__wm { width: 114px; height: auto; }
.nd-back { flex: 1; display: inline-flex; align-items: center; white-space: nowrap; min-height: var(--control); color: var(--accent); font: var(--type-label);
  text-decoration: none; border-radius: var(--radius-sm); }
.nd-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nd-pos { font: var(--type-text); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nd-navr { display: flex; align-items: center; gap: var(--space-8); }
.nd-step { display: flex; gap: var(--space-4); }
.nd-step .lw-btn { min-width: var(--control-sm); padding: 0; color: var(--accent); }
.nd-step .lw-btn:disabled { color: var(--ink-dim); }
.nd-top .nd-step .lw-btn { background: none; border-color: transparent; }
.nd-more { --nd-more: calc(var(--control) - var(--hairline) - 2 * var(--space-8)); position: relative; flex: none; }
/* Inside the bar with --space-8 clear above and below (owner 22 Oct: it touched both edges); the dots and the word Menu, wider than tall
   (owner 22 Oct: dots alone were too small to read as a menu). ::after keeps the full bar height tappable (inset is measured from the
   padding box, so the hairline border is added to reach the bar's content height). */
.nd-more .nd-more__btn { position: relative; display: flex; align-items: center; gap: var(--space-6); width: auto; min-width: 0; height: var(--nd-more); min-height: 0;
  padding: 0 var(--space-10); font: var(--type-label); color: var(--accent); }
.nd-more__btn::after { content: ''; position: absolute; inset: calc(-1 * (var(--space-8) + var(--hairline))); }
.nd-more__btn svg { width: 16px; height: 16px; fill: currentColor; }
.nd-more__btn[aria-expanded="true"] { background: var(--accent-soft); }
/* top: .nd-more is the button, so the menu clears the button's --space-8 and border before its own --space-4 gap under the bar. */
.nd-pop { position: absolute; top: calc(100% + var(--space-8) + var(--hairline) + var(--space-4)); right: 0; z-index: 20; display: flex; flex-direction: column; gap: var(--space-4);
  min-width: calc(var(--control) * 5); max-width: calc(100vw - 2 * var(--space-16)); padding: var(--space-4); background: var(--surface-raised);
  border: var(--hairline) solid var(--line-pop); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  transform-origin: top right; animation: nd-pop-in .15s ease-out; }
.nd-pop[hidden] { display: none; }
.nd-menu { display: flex; flex-direction: column; }
.nd-menu form { margin: 0; display: contents; }
.nd-menu__h { margin: 0; padding: var(--space-8) var(--space-8) var(--space-4); font: var(--type-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-dim); }
.nd-menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; min-height: var(--control); padding: 0 var(--space-8);
  border: 0; border-radius: var(--radius-code); background: transparent; color: var(--ink); font: var(--type-body); text-align: left; cursor: pointer; }
.nd-menu__item:hover, .nd-menu__item:focus-visible { background: var(--control-3-hover); outline: none; }
.nd-menu__item .nd-ic { width: 16px; height: 16px; color: var(--accent); }
.nd-menu__sep { height: var(--hairline); margin: var(--space-4) 0; background: var(--line); }
.nd-menu__who { margin: 0; padding: var(--space-4) var(--space-8) var(--space-8); font: var(--type-meta); color: var(--ink-dim); }
@keyframes nd-pop-in { from { opacity: 0; transform: scale(.96); } }

/* The page header: the title and its one line, Updated with its status dot at the right. */
.nd-titles { grid-area: titles; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8) var(--space-16); flex-wrap: wrap;
  padding-top: var(--space-16); }
.nd-titles > div { min-width: 0; }
.nd-h1 { margin: 0; font: var(--type-display); letter-spacing: var(--track-tight); color: var(--ink); }
.nd-lede { margin: var(--space-2) 0 0; font: var(--type-body); color: var(--ink-2); }
.nd-sub { display: inline-flex; align-items: center; gap: var(--space-6); margin: 0; font: var(--type-meta); color: var(--ink-dim); }
.nd-sub__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.nd-sub--failed .nd-sub__dot { background: var(--act); }
.nd-list { grid-area: list; display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.nd-player { grid-area: player; }
.nd-diag { grid-area: diag; }
/* The partners' marks at the foot of the list screen (owner 21 Oct): NFLPA and the USC Center for Body Computing side by side, centred, in --ink-2 so
   they never compete with the board; NFLPA's shield keeps its red. Not on a phone's player screen. */
.nd-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); margin-top: var(--space-40); color: var(--ink-2); }
.nd-foot__logos { display: flex; justify-content: center; align-items: center; gap: var(--space-32); }
.nd-foot__support { margin: 0; font: var(--type-text); color: var(--ink-2); }
.nd-foot__support a { color: inherit; }
.nd-logo { display: block; width: auto; height: 24px; }

/* Shared bits: every action link is one face, --type-label in the accent (an inline one, the Undo in a line, too). */
.nd-link { appearance: none; margin: 0; padding: 0; background: none; border: 0; font: var(--type-label); color: var(--accent); cursor: pointer; text-align: left; }
.nd-link:focus-visible, .nd-showall:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.nd-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.nd-ic { flex: none; display: inline-block; width: 14px; height: 14px; }
.nd-ic--clock, .nd-ic--info { fill: currentColor; }
.nd-ic--tick path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nd-sw { flex: none; display: inline-block; width: 12px; height: 12px; margin: 1px; border-radius: var(--radius-code); }
.nd-sw--r { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--act) 72%, transparent) 0 1.3px, transparent 1.3px 3.5px),
  color-mix(in srgb, var(--act) 30%, transparent); }
.nd-sw--g { background: color-mix(in srgb, var(--good) 45%, transparent); }
.nd-sw--pre { background: var(--nd-sunk); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.nd-board .lw-btn { font: var(--type-label); }
.nd-cp { display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); color: var(--accent); }
.nd-ic--copy { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.nd-uid { display: flex; align-items: center; gap: var(--space-4); margin: 0; font: var(--type-meta); color: var(--ink-dim); overflow-wrap: anywhere; }
.nd-uid .lw-mono { font-family: var(--font-mono); }
.nd-uid a.nd-cp { text-decoration: none; }
.nd-notsaved { margin: 0; font: var(--type-label); color: var(--broken-text); }
/* useDisclose: what a section shows past its height while it eases open or shut. clip, not hidden: hidden makes the section a scroll container
   for 220 ms, and the sticky headers and the search box inside it stick to it and jump (PAL-1331). */
.nd-clip { overflow: clip; }
/* The kit's toasts and empty states on the board's roles. */
.lw-toast { font: var(--type-body); }
.lw-toast__more { font: var(--type-meta); }
.lw-empty__title { font: var(--type-title); }
.lw-empty__text { font: var(--type-body); }

/* The director pills: one size everywhere (--type-tag, owner 21 Oct), a soft tint with coloured text, 24 px tall. Needs attention has no
   icon; the others lead with theirs. */
.nd-pill { flex: none; display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-pill); font: var(--type-tag); white-space: nowrap; }
.nd-pill .nd-ic { width: 11px; height: 10px; }
.nd-pill--reach { background: color-mix(in srgb, var(--act) 14%, transparent); color: var(--act-text); }
.nd-pill--waiting { background: color-mix(in srgb, var(--not-scored) 16%, transparent); color: var(--ink-2); }
.nd-pill--good { background: color-mix(in srgb, var(--good) 24%, transparent); color: var(--good-text); }
/* On us (A19): the design's on-us blue, a technical problem of ours, never an ask. */
.nd-pill--onus { background: var(--on-us-fill); color: var(--on-us); box-shadow: inset 0 0 0 var(--hairline) color-mix(in srgb, var(--on-us) 35%, transparent); }

/* Photo over initials. */
.nd-av { --tc: var(--accent); position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); font: var(--type-tag); user-select: none; }
.nd-av--t2 { --tc: var(--chart-3); }
.nd-av--t3 { --tc: var(--ink-2); }
.nd-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nd-av--lg { width: 56px; height: 56px; font: var(--type-heading); }

/* The stats card (board v3 comp): the figure and its line, the bar with its two captions; under a hairline, a tile per team. */
.nd-stat { grid-area: overview; display: flex; flex-direction: column; min-width: 0; background: var(--nd-card); border: var(--hairline) solid var(--nd-card-line);
  border-radius: var(--radius-lg); overflow: hidden; }
.nd-stat--clear { background: color-mix(in srgb, var(--good) 8%, var(--nd-card)); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.nd-stat__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-32); padding: var(--space-16) var(--space-24); }
.nd-stat__sum { flex: none; }
.nd-stat__fig { margin: 0; font: var(--type-heading); color: var(--ink); font-variant-numeric: tabular-nums; }
.nd-stat__fig strong { font: var(--type-display); color: var(--good-text); }
.nd-stat__sub { margin: 0; font: var(--type-text); color: var(--ink-2); }
.nd-stat__barw { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.nd-stat__caps { display: flex; justify-content: space-between; gap: var(--space-8); margin: 0; font: var(--type-text); color: var(--ink-2); }
.nd-bar { display: block; }
/* Stacked bars (Stack), the owner's comp (22 Oct; red-type weakness, so the segments differ by lightness): Good in --good, Needs you in --act over
   the card, Waiting hatched in neutral grey as the timeline hatches a stretch with no data (parts.tsx nd-strip-hatch). The track shows only a remainder. */
.nd-bar, .nd-meter { --nd-seg-good: var(--good); }
.nd-bar__track, .nd-meter__track { fill: var(--nd-sunk); }
.nd-bar__fill, .nd-meter__fill { fill: var(--nd-seg-good); }
.nd-bar__wait-bg, .nd-meter__wait-bg { fill: var(--nd-seg-wait); }
.nd-bar__hatch, .nd-meter__hatch { stroke: var(--nd-seg-hatch); stroke-width: 1.6; }
.nd-bar__need, .nd-meter__need { fill: var(--nd-seg-need); }
/* The team tiles: toggle filters on the list (owner, comp 73-74); the chosen one a soft tint and an accent bar along its foot. */
.nd-gstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); margin: 0; padding: 0; list-style: none; overflow: hidden; border-top: var(--hairline) solid var(--line); }
/* Each tile's own rule is its top and left edge, pulled out of the strip by overflow, so a sixth team wrapping to a second row is divided like the rest. */
.nd-gstrip li { display: flex; min-width: 0; container-type: inline-size; margin: calc(-1 * var(--hairline)) 0 0 calc(-1 * var(--hairline)); border-top: var(--hairline) solid var(--line); border-left: var(--hairline) solid var(--line); }
.nd-gstrip__team { appearance: none; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); min-width: 0; margin: 0;
  padding: var(--space-12) var(--space-8) var(--space-14); background: none; border: 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease-out, box-shadow .12s ease-out; }
.nd-gstrip__team:hover { background: var(--control-3-hover); }
.nd-gstrip__team:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nd-gstrip__team[aria-pressed="true"] { background: var(--nd-selected); box-shadow: inset 0 -2px 0 var(--accent); }
/* On a wrapped strip the next row's -1px margin and top border would paint over the selected tile's underline. */
.nd-gstrip li:has(> [aria-pressed="true"]) { position: relative; z-index: 1; }
.nd-gstrip__head { display: flex; align-items: center; gap: var(--space-6); }
.nd-gstrip__logo { flex: none; width: 24px; height: 24px; display: block; }
.nd-gstrip__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nd-gstrip__name { font: var(--type-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.nd-gstrip__n { font: var(--type-text); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A tile too narrow for logo and code side by side (5 teams on a phone) stacks the logo over the code. */
@container (max-width: 79px) { .nd-gstrip__head { flex-direction: column; gap: var(--space-4); } .nd-gstrip__team { padding-inline: var(--space-4); } }
.nd-gstrip__n b { font: var(--type-heading); color: var(--good-text); }
.nd-meter { display: block; }

/* The search box framing the list, docked under the bar as the list scrolls (owner 21 Oct), its box's top level with the player card's;
   the page colour around it hides the cards passing under. The negative margins keep it where it stood in the flow. */
.nd-search { position: sticky; top: var(--nd-bar-h); z-index: 6; display: flex; margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-4));
  padding: var(--space-8) var(--space-4); background: var(--surface-page); }
.nd-search__box { flex: 1; min-width: 0; min-height: var(--control); padding: 0 var(--control) 0 var(--space-14); font: var(--type-body); color: var(--ink);
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); appearance: none; }
.nd-search__box::placeholder { color: var(--ink-dim); }
.nd-search__box::-webkit-search-cancel-button { appearance: none; }
.nd-search__box:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.nd-search__clear { position: absolute; top: var(--space-8); right: var(--space-4); width: var(--control); height: var(--control); padding: 0; background: none; border: 0; border-radius: var(--radius-sm);
  font: var(--type-label); color: var(--ink-dim); cursor: pointer; }
.nd-search__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nd-none { margin: 0; padding: 0 var(--space-4); font: var(--type-text); color: var(--ink-2); }

/* Cards. The current card is marked only beside the pane (from 768px): on a phone nothing stays selected. */
.nd-cards { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.nd-card { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-12) var(--space-16); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--nd-dock-h) + var(--nd-lh-h));
  background: var(--nd-card); border: var(--hairline) solid var(--nd-card-line); color: var(--ink); text-decoration: none;
  transition: background-color .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out; -webkit-tap-highlight-color: transparent; }
.nd-card:active { background: var(--nd-sunk); }
.nd-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nd-card--up { background: color-mix(in srgb, var(--good) 13%, var(--nd-card)); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.nd-card--dim { opacity: .55; background: transparent; border-style: dashed; }
.nd-card__top { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.nd-card__name { flex: 1; display: flex; align-items: baseline; gap: var(--space-6); min-width: 0; overflow: hidden; white-space: nowrap; font: var(--type-heading); }
.nd-nn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-tm { flex: none; font: var(--type-meta); color: var(--ink-dim); white-space: nowrap; }
.nd-card__line { font: var(--type-text); color: var(--ink); }
.nd-card__reason { color: var(--ink-2); }
.nd-card__diag { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hairline) dashed var(--line); font: var(--type-meta); font-family: var(--font-mono); color: var(--ink-dim); }
.nd-card__diag b { color: var(--ink); }

/* Sections */
.nd-lane { display: flex; flex-direction: column; gap: var(--space-8); scroll-margin-top: var(--nd-dock-h); }
/* Every section's heading sticks under the docked search box, inside its own section, so the next one pushes it up; the page colour hides
   the cards passing under it. */
.nd-lh { position: sticky; top: var(--nd-dock-h); z-index: 5; display: flex; align-items: baseline; gap: var(--space-8); margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-8); background: var(--surface-page); }
.nd-lh h2 { margin: 0; font: var(--type-heading); letter-spacing: var(--track-tight); }
.nd-lh__n { font: var(--type-text); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.nd-lh__more { margin-left: auto; }
.nd-lh__more + .nd-lh__more { margin-left: var(--space-12); }
/* The Wins section's line when no win is new, in the place of its cards. */
.nd-wins__none { margin: 0; padding: 0 var(--space-4); font: var(--type-text); color: var(--ink-2); }
/* A list's disclosure (Show all n, Show n more, Show fewer, the timeline's Show all): a quiet control that belongs to its list. */
.nd-showall { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-4); background: none; border: 0; font: var(--type-label);
  color: var(--accent); cursor: pointer; text-align: left; }
/* The timeline's, indented as its rows' text. */
.nd-evw > .nd-showall { padding: var(--space-8) var(--space-10) 0 calc(var(--space-10) + 16px + var(--space-16)); }
.nd-qdiv { display: flex; align-items: center; gap: var(--space-8); margin: 0; padding: var(--space-8) var(--space-4) 0; font: var(--type-tag); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-dim); }
.nd-qdiv::before, .nd-qdiv::after { content: ''; flex: 1; border-top: var(--hairline) solid var(--line); }
/* Between the period's activity rows and the earlier ones: indented as the rows' text, like the timeline's Show all. */
.nd-qdiv--ev { padding: var(--space-8) var(--space-10) var(--space-4) calc(var(--space-10) + 16px + var(--space-16)); }

/* The empty roster */
.nd-empty { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-lg); background: var(--nd-card); border: var(--hairline) solid var(--nd-card-line); }
.nd-empty p { margin: 0; color: var(--ink-2); }
.nd-empty .nd-empty__title { font: var(--type-title); letter-spacing: var(--track-tight); color: var(--ink); }
.nd-teams { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.nd-teams li { padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--nd-sunk); border: var(--hairline) solid var(--line);
  font: var(--type-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }

/* The player card (board v3 comp): one card; its parts share its side padding, the reach-out, the timeline and the footer run edge to edge
   under a hairline. Three zones (owner round 2, 2026-10-21): who he is, the reach-out, the evidence; padding first, 32 px each side of the
   two hairlines between them (owner round 3; the card's 16 px gap plus 16 more, on the reach-out's margin and padding). */
.nd-player { --nd-pad: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; padding-top: var(--space-12);
  background: var(--nd-card); border: var(--hairline) solid var(--nd-card-line); border-radius: var(--radius-lg); }
.nd-player > * { margin-inline: var(--nd-pad); }
.nd-player > :is(.nd-do, .nd-tl, .nd-pfoot) { margin: 0; padding: var(--nd-pad); border-top: var(--hairline) solid var(--line); }
.nd-player > .nd-do { margin-top: var(--space-16); padding-block: var(--space-32) var(--space-16); }
.nd-player > .nd-tl { padding-top: var(--space-32); }
.nd-pick { margin: var(--space-16) 0; color: var(--ink-dim); }
.nd-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--control); }
.nd-eyebrow { margin: 0; font: var(--type-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-dim); }
.nd-phead { container-type: inline-size; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-16); min-width: 0; }
.nd-who { flex: 1 1 12em; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nd-nrow { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.nd-nrow > .nd-name { flex: 1 1 auto; }
/* His pill: beside his name on a wide screen; on a phone in the card's top-right corner, level with "Player overview", where the row
   is empty (owner, 2026-10-22: beside the name a phone name had 133 px and wrapped). A tablet pane whose header is under 440 px left
   a title-size name 128-194 px beside the pill and cut it, so the name takes the heading role there. */
.nd-navpill { display: none; }
@media (min-width: 768px) {
  @container (max-width: 439.98px) {
    .nd-phead .nd-name { font: var(--type-heading); }
    .nd-phead :is(.nd-name, .nd-nn) { white-space: normal; text-wrap: balance; }
  }
}
.nd-name { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-title); letter-spacing: var(--track-tight); }
.nd-name:focus { outline: none; }
.nd-stats { margin: 0; font: var(--type-text); color: var(--ink-dim); }
.nd-pfoot { font: var(--type-meta); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
/* The player's "Data timeline" (owner's mock-up, timeline v2 2026-10-21) on the board's roles: title heading, range and dates meta, row
   title label, row detail and axis small. Rows: 16 px icon, 16 px to the text, 11/10 px padding, 14 px below the list heading, --control
   minimum height, 2 px apart; the selected row a soft rounded fill. */
.nd-tl { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.nd-tl__h { display: flex; flex-direction: column; gap: var(--space-2); }
.nd-tl__h h3 { margin: 0; font: var(--type-heading); letter-spacing: var(--track-tight); color: var(--ink); }
.nd-tl__h p { margin: 0; font: var(--type-meta); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
/* The labels row sits 4 px under the header, 8 px closer than the panel's gap. */
.nd-tl > .nd-stripw { margin-top: calc(var(--space-4) - var(--space-16) + var(--space-8)); }
.nd-tl__div { margin: 0; border: 0; border-top: var(--hairline) solid var(--line); }
.nd-tl__lh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.nd-tl__lh h4 { margin: 0; font: var(--type-heading); letter-spacing: var(--track-tight); color: var(--ink); }
.nd-tl__lh span { font: var(--type-meta); color: var(--ink-dim); white-space: nowrap; }
.nd-strip { display: block; overflow: visible; box-sizing: border-box; padding: 0 9px; font-family: var(--font-sans); } /* STRIP_PAD: a pin radius and 1px, so a pin on the first or last day sits inside */
/* The phone's key, small and dim at the timeline's foot; where the pointer hovers, each stretch's card is the key (owner 2026-10-21). */
.nd-key { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); margin: calc(var(--space-4) - var(--space-16)) 0 0; padding: var(--space-12) 0 0;
  border-top: var(--hairline) solid var(--line-soft); list-style: none; font: var(--type-small); color: var(--ink-dim); }
.nd-key li { display: flex; align-items: center; gap: var(--space-6); }
.nd-key .nd-sw { width: 12px; height: 8px; margin: 0; border-radius: var(--radius-marker); }
.nd-key .nd-ic { width: 18px; height: 18px; }
@media (hover: hover) { .nd-key { display: none; } }
/* Hover both ways (Strip, useHot): a lit pin wears an accent ring, a lit stretch deepens, a lit row takes a soft fill; the lit state is the
   focus indicator for the strip's parts. The card sits over its pin (under a game or a stretch) at --nd-tip-x/-y, set on the CSSOM. */
.nd-stripw { position: relative; min-width: 0; }
.nd-mk, .nd-gm, .nd-strip__seg, .nd-strip__gap { cursor: pointer; outline: none; }
.nd-mk, .nd-gm, .nd-strip__seg, .nd-strip__gap, .nd-ev li { -webkit-tap-highlight-color: transparent; }
.nd-mk__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity .12s ease-out; }
.nd-mk--on .nd-mk__ring, .nd-gm--on .nd-mk__ring { opacity: 1; }
.nd-pin--stop { fill: var(--act); }
.nd-pin--fix { fill: var(--good); }
.nd-pin--msg, .nd-pin--join, .nd-pin--done { fill: var(--accent); }
.nd-pin--wait { fill: var(--not-scored); }
.nd-glyph { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nd-glyph--dark { stroke: var(--on-status); }
.nd-glyph--light { stroke: var(--on-ink); }
.nd-glyph--solid { fill: var(--on-ink); stroke: none; }
/* A pin's stem: LogWatch's Participant History drop (LogWatch/dashboard/index.html .hist .drop), 1 px dotted, in its pin's colour. */
.nd-strip__stem { stroke-width: 1; stroke-dasharray: 1 3; }
.nd-strip__stem--stop { stroke: var(--act); }
.nd-strip__stem--fix { stroke: var(--good); }
.nd-strip__stem--msg, .nd-strip__stem--join { stroke: var(--accent); }
/* A game day (Strip): a small football in the accent's two tones, the strong one filled for home, the lighter one outlined for away (owner
   2026-10-21); its 20 px box takes the pointer. */
.nd-gm__hit { fill: transparent; }
.nd-fb { --nd-fb-away: color-mix(in srgb, var(--accent) 60%, var(--nd-card)); }
.nd-fb path { fill: var(--accent); stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
.nd-fb .nd-fb__lace { fill: none; stroke: var(--on-ink); stroke-width: 1.3; stroke-linecap: round; }
.nd-fb--away path, .nd-fb--away .nd-fb__lace { stroke: var(--nd-fb-away); }
/* Filled with the panel's surface, not left empty: a week-grid line behind it must not show through. */
.nd-fb--away path:not(.nd-fb__lace) { fill: var(--nd-card); }
/* Two classes: the kind's own fill below comes later in the sheet. */
.nd-strip__seg--r.nd-strip__seg--on { fill: color-mix(in srgb, var(--act) 52%, transparent); }
.nd-strip__seg--g.nd-strip__seg--on { fill: color-mix(in srgb, var(--good) 70%, transparent); }
.nd-strip__gap.nd-strip__gap--on { fill: var(--line); }
/* The kit's .lw-hover, centred under what it describes (over a pin). */
.nd-tip { position: absolute; left: var(--nd-tip-x, 0); top: var(--nd-tip-y, 0); z-index: 5; width: max-content; max-width: min(var(--info-max), 100%);
  gap: var(--space-2); padding: var(--space-8) var(--space-12); pointer-events: none; animation: nd-fade .12s ease-out; }
.nd-tip p { margin: 0; font: var(--type-meta); }
.nd-tip .nd-tip__d { color: var(--ink-2); }
@keyframes nd-fade { from { opacity: 0; } }
.nd-strip__ends { rx: var(--radius-code); }
.nd-strip__track { fill: var(--nd-sunk); }
.nd-strip__seg--g { fill: color-mix(in srgb, var(--good) 45%, transparent); }
.nd-strip__seg--r { fill: color-mix(in srgb, var(--act) 30%, transparent); }
.nd-strip__gap { fill: transparent; }
/* Phone data paused is hatched over its red: the stretch reads apart from the green without colour. */
.nd-strip__hatch { stroke: color-mix(in srgb, var(--act) 72%, transparent); stroke-width: 1.6; }
.nd-strip__hatched { pointer-events: none; }
/* The grid (Strip): one faint line family, over the stretches, from the label row to the track's foot. */
.nd-strip__grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.nd-strip__lb, .nd-strip__gd { fill: var(--ink-dim); font: var(--type-small); font-variant-numeric: tabular-nums; }
/* "Today": the tag role's weight at the axis size; SVG text has no line box. */
.nd-strip__lb--now { fill: var(--ink); font: var(--type-tag); }
/* The activity rows: icon, title over its detail, the date at the right; a row lights its pin and a lit pin lights its row (useHot). */
.nd-evw { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nd-tl__lh { margin-bottom: calc(var(--space-14) - var(--space-2)); }
.nd-ev { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.nd-ev li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-16); min-height: var(--control);
  padding: 11px var(--space-10); border-radius: var(--radius-sm); cursor: pointer; transition: background-color .12s ease-out; }
.nd-ev li:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nd-ev li.nd-ev--on { background: var(--accent-softer); }
/* Your reach-out of the last 10 minutes: a stronger wash, until it is older. */
.nd-ev li.nd-ev--new:not(.nd-ev--on) { background: var(--accent-soft); }
.nd-ev__mk { display: flex; }
.nd-ic--pin { width: 16px; height: 16px; overflow: visible; }
.nd-ev__tx { display: flex; flex-direction: column; min-width: 0; }
.nd-ev__t { font: var(--type-label); color: var(--ink-rest); }
.nd-ev li.nd-ev--on .nd-ev__t { color: var(--ink); }
.nd-ev--earlier .nd-ev__t { color: var(--ink-2); }
.nd-ev__d { font: var(--type-small); color: var(--ink-dim); }
.nd-ev time { font: var(--type-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The reach-out (owner's comps 2026-10-21): one box per state, its actions under it. The box takes a soft tint and edge of his pill's
   colour (owner round 2): Needs attention and Follow up the act pink, Waiting the neutral, a win and Good the good green, On us
   its blue; no pill (not scored yet) the sunk surface. Long gone keeps the frame with its words dimmed (lead ruling 2026-10-21). The draft
   stays sunk with no edge, so it reads as text to copy, never as a field to type in. */
.nd-do { --nd-tint: var(--nd-sunk); --nd-edge: var(--line); container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-16); }
.nd-do--reach { --nd-tint: color-mix(in srgb, var(--act) 6%, var(--nd-card)); --nd-edge: color-mix(in srgb, var(--act) 30%, transparent); }
/* 6% of --act vanishes on the dark card: the box read as grey, not the Needs attention pink (owner, 2026-10-22). */
:root[data-theme="dark"] .nd-do--reach { --nd-tint: color-mix(in srgb, var(--act) 14%, var(--nd-card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-do--reach { --nd-tint: color-mix(in srgb, var(--act) 14%, var(--nd-card)); } }
.nd-do--waiting { --nd-tint: color-mix(in srgb, var(--not-scored) 8%, var(--nd-card)); --nd-edge: color-mix(in srgb, var(--not-scored) 25%, transparent); }
.nd-do--good { --nd-tint: color-mix(in srgb, var(--good) 9%, var(--nd-card)); --nd-edge: color-mix(in srgb, var(--good) 35%, transparent); }
.nd-do--onus { --nd-tint: var(--on-us-fill); --nd-edge: color-mix(in srgb, var(--on-us) 35%, transparent); }
.nd-ask { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16); border: var(--hairline) solid var(--nd-edge);
  border-radius: var(--radius-md); background: var(--nd-tint); }
.nd-ask__h { display: flex; align-items: center; gap: var(--space-8); margin: 0; font: var(--type-heading); color: var(--ink); }
.nd-ask__h .nd-ic { width: 16px; height: 16px; color: var(--ink-2); }
.nd-ask--won .nd-ask__h .nd-ic { color: var(--good-text); }
.nd-ask__was { margin: 0; font: var(--type-text); color: var(--ink); }
.nd-help { margin: 0; font: var(--type-body); color: var(--ink-2); }
.nd-ask--gone :is(.nd-ask__h, .nd-ask__was, .nd-help) { color: var(--ink-dim); }
.nd-rec__how { display: flex; align-items: center; gap: var(--space-6); margin: var(--space-4) 0 0; font: var(--type-meta); color: var(--ink-2); }
.nd-rec__next { margin: var(--space-8) 0 0; padding-top: var(--space-12); border-top: var(--hairline) solid var(--line); font: var(--type-text); color: var(--ink); }
.nd-recbar { display: flex; justify-content: space-between; gap: var(--space-16); }
.nd-tool { display: flex; flex-direction: column; gap: var(--space-8); }
.nd-sh { margin: var(--space-8) 0 0; font: var(--type-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-dim); }
.nd-draft { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-14) var(--space-16); border-radius: var(--radius-md); background: var(--nd-sunk); }
.nd-draft p { margin: 0; font: var(--type-body); color: var(--ink); }
.nd-draft .nd-draft__link { font: var(--type-text); color: var(--ink-2); overflow-wrap: normal; }
/* One OR choice (owner round 2): Copy message, a muted "or", I reached out another way; stacked full width, the "or" centred, where the
   pair does not fit side by side. */
.nd-or { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-12); margin-top: var(--space-4); }
.nd-or__or { font: var(--type-meta); color: var(--ink-2); }
@container (max-width: 459.98px) {
  .nd-or { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .nd-or > .lw-btn { justify-content: center; }
  .nd-or > .nd-or__or { text-align: center; }
}
:is(.nd-do, .nd-rc) .nd-cp { padding: 0 var(--space-16); color: var(--ink); }
:is(.nd-do, .nd-rc) .nd-cp.lw-btn--primary { color: var(--on-ink); }
/* Recruit a player: one card on the list's own surface and border (.nd-card), with nothing in it that looks pressable but its button. */
.nd-rc { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); background: var(--nd-card);
  border: var(--hairline) solid var(--nd-card-line); border-radius: var(--radius-lg); }
.nd-rc__head { display: flex; flex-direction: column; gap: var(--space-4); }
.nd-hint { display: flex; align-items: center; gap: var(--space-6); margin: 0; font: var(--type-meta); color: var(--ink-2); }
.nd-ro { flex: none; display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-16); }
.nd-dbg { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border: var(--hairline) dashed var(--line-strong); border-radius: var(--radius-sm); }
.nd-dbg p { margin: 0; font: var(--type-meta); color: var(--ink-dim); }
.nd-diag .lw-label { font: var(--type-tag); text-transform: uppercase; letter-spacing: .04em; }
.nd-diag .lw-mono { font: var(--type-meta); font-family: var(--font-mono); }

/* The phone's push and pop: the page slides, the bar cross-fades in place (Board's slide()). data-nav is set for a view transition,
   data-slide where the browser has none. */
@keyframes nd-from-right { from { transform: translateX(100%); } }
@keyframes nd-to-left { to { transform: translateX(-25%); opacity: .6; } }
@keyframes nd-from-left { from { transform: translateX(-25%); opacity: .6; } }
@keyframes nd-to-right { to { transform: translateX(100%); } }

@media (max-width: 767.98px) {
  .nd-board:not([data-open]) .nd-player { display: none; }
  .nd-board[data-open] :is(.nd-titles, .nd-stat, .nd-list, .nd-brand) { display: none; }
  .nd-main:has(.nd-board[data-open]) .nd-foot { display: none; }
  .nd-board[data-open] .nd-player { margin-top: var(--space-8); }
  /* The bar carries his place and ↑ ↓ on a phone; the card keeps its eyebrow. */
  .nd-player .nd-nav .nd-navr { display: none; }
  .nd-navpill { display: flex; }
  .nd-nrow > .nd-pill { display: none; }
  .nd-stat__top { padding: var(--space-16); }
  .lw-toasts { left: var(--space-16); right: var(--space-16); align-items: center; }
  .nd-top { view-transition-name: nd-top; }
  :root[data-nav]::view-transition-group(*) { animation-duration: .22s; animation-timing-function: ease-out; }
  :root[data-nav]::view-transition-old(root), :root[data-nav]::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; mix-blend-mode: normal; }
  :root[data-nav="push"]::view-transition-new(root) { animation-name: nd-from-right; }
  :root[data-nav="push"]::view-transition-old(root) { animation-name: nd-to-left; }
  :root[data-nav="pop"]::view-transition-new(root) { animation-name: nd-from-left; }
  :root[data-nav="pop"]::view-transition-old(root) { z-index: 1; animation-name: nd-to-right; }
  :root[data-slide="push"] .nd-player { animation: nd-from-right .22s ease-out; }
  :root[data-slide="pop"] .nd-list { animation: nd-from-left .22s ease-out; }
}
@media (min-width: 768px) {
  .nd-board { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: var(--space-24);
    grid-template-areas: "top top" "titles titles" "overview overview" "list player" "diag diag"; }
  /* A pane taller than the window scrolls inside itself; contain stops that scroll carrying on into the page's at either end. */
  .nd-player { --nd-pad: var(--space-24); position: sticky; top: calc(var(--nd-bar-h) + var(--space-8)); align-self: start;
    max-height: calc(100dvh - var(--nd-bar-h) - var(--space-16)); overflow-y: auto; overscroll-behavior: contain; padding-top: var(--space-16); }
  .nd-top :is(.nd-back, .nd-navr) { display: none; }
  .nd-card:is([aria-current], [data-pane]) { background: var(--nd-selected); border-color: var(--nd-ring); box-shadow: 0 0 0 var(--hairline) var(--nd-ring); }
  .nd-card:is([aria-current], [data-pane]):focus-visible { box-shadow: var(--focus-ring); }
  .nd-gstrip__head { justify-content: flex-start; }
  .nd-gstrip__team { align-items: stretch; padding: var(--space-14) var(--space-24) var(--space-16); text-align: left; }
}
@media (min-width: 1024px) {
  .nd-board { grid-template-columns: 360px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .nd-main { max-width: 1300px; }
  .nd-board { grid-template-columns: 420px minmax(0, 1fr); column-gap: var(--space-32); }
}
@media (prefers-reduced-motion: reduce) {
  .nd-card, .nd-pop, .nd-tip, .nd-mk__ring, .nd-ev li, .nd-gstrip__team { transition: none; animation: none; }
  :root[data-slide] :is(.nd-player, .nd-list) { animation: none; }
}