/* One look for every block, on every page. Shared by Card review and the Block Library.
   A card sits on the app's screen; designed blocks are drawn in Nathan's design (Stadium · Screens);
   blocks without a design are wireframes: plain white boxes in Composer blue, invented red and furniture teal. */
:root { --nd-screen: #151515; --nd-card: #212121; --nd-raised: #2C2C2C; --nd-text: #FFFFFF; --nd-muted: #8A8A8A; --nd-label: #9FA0A3; --nd-inv: #F87171;
  --nd-font: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, sans-serif; }

.ndscreen { background: var(--nd-screen); padding: 16px; }
.ndcard { background: var(--nd-card); border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); overflow: hidden; font-family: var(--nd-font); padding: 4px 0; }
.ndcard.slice { border-radius: 0; }
.ndcard.top { border-radius: 20px 20px 0 0; padding-bottom: 0; }
/* a graded card shows its grade only as the header chip (decided 9 Oct: no coloured edge); --g and --gi colour the chip */
.ndcard[data-grade="exceptional"] { --g: var(--g-exceptional); --gi: var(--g-exceptional-ink); }
.ndcard[data-grade="rare"] { --g: var(--g-rare); --gi: var(--g-rare-ink); }
.ndcard[data-grade="unusual"] { --g: var(--g-unusual); --gi: var(--g-unusual-ink); }
.ndcard[data-grade="ordinary"] { --g: var(--g-ordinary); --gi: var(--g-ordinary-ink); }
.ndcard .gchip { background: var(--g, #555); color: var(--gi, #fff); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; text-transform: lowercase; margin-left: 8px; }

.bk { padding: 12px 16px; min-width: 0; }
.bk.nd { color: var(--nd-text); }
.bk .inv, .bk.nd .inv { color: var(--nd-inv); }

/* Nathan · Card/Header */
.nd-header { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.nd-header .crest { width: 24px; height: 24px; border-radius: 50%; flex: none; background: #3A3A3A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nd-header .txt { min-width: 0; padding-top: 4.5px; font-size: 13px; line-height: 15px; letter-spacing: -0.1px; overflow-wrap: anywhere; }
.nd-header .name { color: var(--nd-text); font-weight: 590; margin-right: 8px; }
.nd-header .date { color: var(--nd-muted); font-weight: 510; white-space: nowrap; }
.nd-header .date.inv { color: var(--nd-inv); }

/* Nathan · Card/Headline, used for our title block: the title wraps when it runs long */
.nd-title { color: var(--nd-text); font-size: 18px; font-weight: 590; line-height: 24px; overflow-wrap: anywhere; }

/* Nathan · Card/Body, used for our headline block */
.nd-body { color: var(--nd-text); font-size: 15px; font-weight: 400; line-height: 21px; letter-spacing: -0.15px; overflow-wrap: anywhere; }

/* Nathan · Card/Quote block: the line in curly quotes, large and bold, on a raised tile */
.nd-quote { background: var(--nd-raised); border-radius: 12px; padding: 16px; color: var(--nd-text); font-size: 24px; font-weight: 700; line-height: 31px; overflow-wrap: anywhere; }

/* Nathan · Commentary block: its paragraph, whole, in his body type; no Read more (22 Oct) */
.nd-comm { display: grid; gap: 8px; justify-items: start; }
.nd-comm .txt { color: var(--nd-text); font-size: 15px; font-weight: 400; line-height: 21px; letter-spacing: -0.15px; overflow-wrap: anywhere; }
/* Nathan's player tile in his Commentary block (5084:36410): a 10% white tile, 12 x 16 pt padding, his Card/Avatar, 12 pt, the name;
   the minute and what happened on the right, all 15 pt semibold on 21 pt lines */
.nd-ptile { justify-self: stretch; display: flex; align-items: center; gap: 12px; background: var(--nd-raised); border-radius: 12px; padding: 12px 16px; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-ptile .lab { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nd-ptile .val { flex: none; text-align: right; }

/* Nathan · Stat block (single), for stats with one row: a raised tile, label left, the value large on the right; a long label wraps */
.nd-stat1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--nd-raised); border-radius: 12px; padding: 12px 16px; color: var(--nd-text); }
.nd-stat1 .lab { min-width: 0; font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; overflow-wrap: anywhere; }
.nd-stat1 .val { flex: none; font-size: 40px; font-weight: 760; line-height: 40px; font-stretch: 47%; font-variation-settings: "wdth" 47; white-space: nowrap; }

/* Nathan · Table block rows, for table and for stats with two or more rows: 13 pt semibold, 8 pt padding, 8 pt apart.
   His header row, divider, rank, crest and highlighted row are left out: our rows carry none of them */
/* stats: Nathan's stacked Stat block (5084:36232), one 10% white tile per row (19 Oct) */
.nd-stiles { display: grid; gap: 8px; }
.nd-stiles .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--nd-raised); border-radius: 12px; padding: 12px 16px; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-stiles .lab { min-width: 0; overflow-wrap: anywhere; }
.nd-stiles .val { flex: none; max-width: 50%; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Nathan's league table (5053:20452): header, 1 pt divider, rows 8 pt apart; 13 pt semibold on 15 pt lines; the club's own row on 10% white */
.nd-ltable { display: grid; gap: 12px; font-size: 13px; font-weight: 590; line-height: 15px; letter-spacing: -0.1px; color: var(--nd-text); }
.nd-ltable .head, .nd-ltable .row { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.nd-ltable .head { color: var(--nd-muted); }
.nd-ltable .team, .nd-ltable .cols { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.nd-ltable .cols { gap: 12px; }
.nd-ltable .cols > span { flex: 1 1 0; min-width: 0; font-variant-numeric: tabular-nums; }
.nd-ltable .rule { height: 1px; background: #383838; }
.nd-ltable .rows { display: grid; gap: 8px; }
.nd-ltable .row { padding: 8px; border-radius: 8px; }
.nd-ltable .row.own { background: var(--nd-raised); }
.nd-ltable .team { gap: 8px; }
.nd-ltable .rank { flex: none; width: 16px; text-align: center; }
.nd-ltable .club { display: flex; align-items: center; gap: 6px; }
.bk.nd .nd-ltable .crest { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #3A3A3A; }
.nd-trows { display: grid; gap: 8px; }
.nd-trows .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 590; line-height: 15px; letter-spacing: -0.1px; color: var(--nd-text); }
.nd-trows .lab { min-width: 0; overflow-wrap: anywhere; }
.nd-trows .val { flex: none; max-width: 50%; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Nathan · Ordered list block: one raised tile per item, the rank bold on the left, label beside it, value on the right.
   Nathan · Unordered list block uses the same tiles without the rank */
.nd-olist { display: grid; gap: 8px; }
.nd-olist .row { display: flex; align-items: center; gap: 12px; background: var(--nd-raised); border-radius: 12px; padding: 12px 16px; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-olist .rank { flex: none; width: 24px; text-align: center; font-size: 17px; font-weight: 700; line-height: 24px; letter-spacing: -0.43px; }
.nd-olist .lab { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nd-olist .val { flex: none; max-width: 50%; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the ordered list with players: Nathan's 5084:34462. Rank, 32 pt photo with the 12 pt crest in its corner (his Card/Avatar),
   the name over a grey line in the same 15 pt on 21 pt, the value in the name's type */
.nd-plist .ava, .nd-prog .ava, .nd-ptile .ava { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.nd-plist .badge, .nd-prog .badge, .nd-ptile .badge { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #4A4A4A; }
.nd-plist .badge.miss, .nd-prog .badge.miss, .nd-ptile .badge.miss { background: var(--nd-raised); box-shadow: inset 0 0 0 1.5px var(--nd-inv); }
.nd-plist .lab { display: grid; }
.nd-plist .sub { color: var(--nd-muted); font-weight: 400; }

/* Progress, from Nathan's Stat block and Spectrum track: one raised tile per subject, value / target on the right,
   a 6 pt track under the row (15% white) filling in 50% white toward the target, white when it is reached */
.nd-prog { display: grid; gap: 8px; }
.nd-prog .row { background: var(--nd-raised); border-radius: 12px; padding: 12px 16px 16px; display: grid; gap: 12px; }
.nd-prog .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-prog .lab { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nd-prog .val { flex: none; font-variant-numeric: tabular-nums; }
.nd-prog .track { height: 8px; border-radius: 999px; background: #444; overflow: hidden; }
.nd-prog .fill { height: 100%; border-radius: 999px; background: var(--nd-text); }

/* Nathan · Spectrum block: his track and dots; the title, labels and numbers are the block's own */
.nd-spec { display: grid; gap: 8px; }
.nd-spec .title { font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-spec .track { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(to right, rgba(255, 255, 255, .1), rgba(255, 255, 255, .25)); }
.nd-spec .dot { position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.nd-spec .dot.me { background: #FFFFFF; }
/* on a scaled value (Nathan's 5053:31527): end words 15 pt semibold, 8 pt to the track, then 12 pt to his list row (label and value) */
.nd-spec.scaled { gap: 0; }
.nd-spec.scaled .ends { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-spec.scaled .row { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--nd-raised); color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-spec .vals { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 17px; letter-spacing: -0.1px; }
.nd-spec .vals .v { min-width: 0; flex: 1 1 0; } .nd-spec .vals .v:last-child { text-align: right; } .nd-spec .vals .v:nth-child(2):not(:last-child) { text-align: center; }
.nd-spec .vals .lab { color: var(--nd-muted); }
.nd-spec .vals b { color: var(--nd-text); font-weight: 590; font-variant-numeric: tabular-nums; }
.nd-note { font-size: 12px; }

/* Nathan · Stacked bar chart block: the title, a row of segments sized by share (the lit one 50% white, the rest 15% white),
   and a raised tile with the lit segment's label and value. A tiny share keeps a sliver so it can still be tapped */
.nd-sbar { display: grid; gap: 12px; }
.nd-sbar .title { font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-sbar .bar { display: flex; gap: 4px; }
.nd-sbar .seg { flex-basis: 0; min-width: 8px; height: 24px; border-radius: 8px; background: #383838; cursor: pointer; }
.nd-sbar .seg.on { background: var(--nd-muted); }
.nd-sbar .seg:focus:not(:focus-visible) { outline: none; }
.nd-sbar .tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--nd-raised); border-radius: 12px; padding: 12px 16px; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-sbar .tile .lab { min-width: 0; overflow-wrap: anywhere; }
/* chart, line form: Nathan's Chart block (5562:16140; 21 Oct). The plot runs in from the card's left edge; its lines stop 86 pt short of the
   content's right edge, where each ends in an 8 pt dot and its latest value, 15 pt semibold, 6 pt after the dot */
.nd-line { display: grid; gap: 20px; }
.nd-line .plot { position: relative; height: 72px; margin-left: -16px; }
.nd-line .area { position: absolute; left: 0; top: 0; bottom: 0; right: 86px; touch-action: none; cursor: crosshair; }
.nd-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nd-line path { fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nd-line .end, .nd-line .sdot { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.nd-line .end { right: 78.5px; }
.nd-line .sdot { border: 1px solid var(--nd-card); }
.nd-line .lastv, .nd-line .sval { position: absolute; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nd-line .lastv { right: 0; width: 72.5px; }
/* a touch (5562:16266): a 1 pt grey line from top to bottom, the lines after it dimmed, the time under it in grey 13 pt medium */
.nd-line .scrub, .nd-line .dim, .nd-line .when { display: none; }
.nd-line.scrubbing .scrub { display: block; position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--nd-muted); }
.nd-line.scrubbing .dim { display: block; position: absolute; top: -4px; bottom: -4px; right: -4px; background: var(--nd-card); opacity: .6; }
.nd-line.scrubbing .lastv, .nd-line.scrubbing .end { opacity: .4; }
.nd-line.scrubbing .when { display: block; position: absolute; top: 74px; transform: translateX(-50%); color: var(--nd-muted); font-size: 13px; font-weight: 510; line-height: 15px; letter-spacing: -0.1px; white-space: nowrap; }
.nd-line .key { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 4px; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-line .ks { display: flex; align-items: center; gap: 8px; }
.nd-line .kd { width: 8px; height: 8px; border-radius: 50%; margin-right: -4px; }
.nd-line .kc { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.nd-line .kc.up { color: #1AD323; } .nd-line .kc.down { color: #E50C13; }
.nd-line .arr path { fill: currentColor; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; }
.nd-sbar .tile .val { flex: none; font-variant-numeric: tabular-nums; }
/* the blocks Nathan didn't draw, in his look and feel (17 Oct) */
.nd-hero { display: grid; gap: 8px; }
/* swing with a swing number (19 Oct): Nathan's Stat block, then the sentence. The value and the change sit together on the right */
.nd-swing { display: grid; gap: 12px; }
.nd-swing .vgrp { flex: none; display: flex; align-items: center; gap: 12px; }
.nd-swing .nd-stat1 .val { font-variant-numeric: tabular-nums; }
.nd-swing .chg { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 590; line-height: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nd-swing .chg.up { color: #1AD323; }   /* Nathan's latest green (stacked Stat block 5084:36232), chosen 20 Oct over #5FD35B */
.nd-swing .chg.down { color: var(--nd-muted); }
.nd-swing .chg .arr { font-size: 11px; line-height: 1; }
.nd-swing .txt { color: var(--nd-text); font-size: 15px; line-height: 21px; letter-spacing: -0.15px; overflow-wrap: anywhere; }
.nd-hero .num { color: var(--nd-text); font-size: 40px; font-weight: 760; line-height: 40px; font-stretch: 47%; font-variation-settings: "wdth" 47; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nd-hero .txt { color: var(--nd-text); font-size: 15px; line-height: 21px; letter-spacing: -0.15px; overflow-wrap: anywhere; }
/* versus as stacked list tiles (19 Oct): Nathan's unordered list tile with the player's photo, his name over Jim's label, his number right */
.nd-vlist .row { min-height: 66px; }
.nd-vlist .ava { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #3A3A3A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nd-vlist .badge { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #4A4A4A; }   /* Nathan's Card/Avatar: a 32 pt photo, the 12 pt crest inside its corner (5084:34902) */
.nd-vlist .badge.miss { background: var(--nd-raised); box-shadow: inset 0 0 0 1.5px var(--nd-inv); }
.nd-vlist .lab { display: grid; gap: 2px; }
.nd-vlist .sub { color: var(--nd-muted); font-size: 13px; font-weight: 400; line-height: 17px; letter-spacing: -0.1px; }
.nd-vlist .val { font-size: 20px; line-height: 24px; }
.nd-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.nd-vs .side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nd-vs .side.r { flex-direction: row-reverse; }
.nd-vs .who { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.nd-vs .ava { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #3A3A3A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nd-vs .badge { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: #4A4A4A; box-shadow: 0 0 0 2px var(--nd-card); }
.nd-vs .badge.miss { background: transparent; box-shadow: 0 0 0 2px var(--nd-card), inset 0 0 0 1.5px var(--nd-inv); }
.nd-vs .nm { color: var(--nd-text); font-size: 13px; font-weight: 590; line-height: 15px; letter-spacing: -0.1px; text-align: center; max-width: 110px; overflow-wrap: anywhere; }
.nd-vs .num { color: var(--nd-text); font-size: 40px; font-weight: 760; line-height: 40px; font-stretch: 47%; font-variation-settings: "wdth" 47; font-variant-numeric: tabular-nums; }
.nd-vs .word { color: var(--nd-muted); font-size: 13px; font-weight: 590; line-height: 16px; text-align: center; max-width: 72px; }
.nd-box { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 96px; padding: 16px 24px; border-radius: 12px; background: var(--nd-raised); }   /* Nathan: 16 pt padding, then his inner frame 8 pt in (5084:36990) */
.nd-box .side { display: flex; align-items: center; }
.nd-box .side.r { justify-content: flex-end; }
.bk.nd .nd-box .crest { width: 32px; height: 32px; margin: 8px; flex: none; background: none; }   /* bare, as in Nathan's 5084:36990 */
.bk.nd .nd-box .crest.miss { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--nd-inv); }   /* no club field yet (COMP-183): the ring fills the crest's own 32 pt */
.nd-box b { width: 64px; text-align: center; color: var(--nd-text); font-size: 40px; font-weight: 760; line-height: 40px; font-stretch: 47%; font-variation-settings: "wdth" 47; font-variant-numeric: tabular-nums; }
.nd-box .st { color: var(--nd-text); font-size: 12px; font-weight: 590; line-height: 16px; text-align: center; }
/* timeline: Nathan's Timeline block, latest set (5562:16738; 21 Oct). A strip of 314 pt tiles, 12 pt apart, that swipes sideways and runs
   to the card's edges, so the next tile shows there; 12 pt under it the label, 12 pt under that the 8 pt track with its 12 pt white dot */
.nd-tl { display: grid; gap: 12px; }
.nd-tl .strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 24px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.nd-tl .strip::-webkit-scrollbar { display: none; }
/* events: his unordered list tile (5562:17837): who on the left, what happened on the right, 15 pt semibold */
.nd-tl .tile { scroll-snap-align: start; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 12px 16px; border-radius: 12px; background: var(--nd-raised); color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-tl .tile.player { min-height: 66px; }
.nd-tl .tile .lab { min-width: 0; display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.nd-tl .tile .val { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nd-tl .ava { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.nd-tl .badge { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #4A4A4A; }
.nd-tl .badge.miss { background: var(--nd-raised); box-shadow: inset 0 0 0 1.5px var(--nd-inv); }
/* fixtures (5562:17039): a crest at each end, bare at 32 pt; between them the venue or date, 12 pt semibold, centred */
.nd-tl .tile.fx { display: grid; grid-template-columns: 32px 1fr 32px; gap: 8px; }
.nd-tl .mid { text-align: center; font-size: 12px; line-height: 15px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk.nd .nd-tl .crest { width: 32px; height: 32px; background: none; }
.bk.nd .nd-tl .crest.miss { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--nd-inv); }   /* no fixture fields yet (COMP-143) */
/* the label over the track and the dot on it sit under the middle of the tile in view; the track runs to the card's right edge, and to
   both once swiped */
.nd-tl .tlbar { position: relative; height: 41px; }
.nd-tl .tllab { position: absolute; top: 0; left: calc((100% - 24px) / 2); transform: translateX(-50%); white-space: nowrap; color: var(--nd-text); font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; font-variant-numeric: tabular-nums; transition: left .25s ease; }
.nd-tl .track { position: absolute; left: 0; right: -16px; bottom: 0; height: 8px; border-radius: 999px; background: var(--nd-raised); }
.nd-tl.swiped .track { left: -16px; }
.nd-tl .dot { position: absolute; bottom: -2px; left: calc((100% - 24px) / 2 - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--nd-text); transition: left .25s ease; }
.nd-foot { display: flex; gap: 8px; }
.nd-foot .fbtn { padding: 8px 16px; border-radius: 999px; background: var(--nd-raised); color: var(--nd-text); font-size: 13px; font-weight: 590; line-height: 15px; letter-spacing: -0.1px; }
.nd-declined { display: grid; gap: 6px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px #383838; }
.nd-declined .row { color: var(--nd-muted); font-size: 13px; line-height: 17px; letter-spacing: -0.1px; overflow-wrap: anywhere; }
.nd-declined .v { color: var(--nd-label); font-variant-numeric: tabular-nums; }
/* our column chart: one column per value, side by side, number above and label below, heights against the tallest */
.nd-cols { display: grid; gap: 12px; }
.nd-cols .title { font-size: 15px; font-weight: 590; line-height: 21px; letter-spacing: -0.15px; }
.nd-cols .cols { display: grid; gap: 12px; align-items: start; }
.nd-cols .col { display: grid; gap: 6px; justify-items: center; text-align: center; min-width: 0; }
.nd-cols .col b { color: var(--nd-text); font-size: 20px; font-weight: 590; line-height: 24px; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.nd-cols .track { width: 100%; height: 126px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.nd-cols .fill { flex: none; width: 100%; border-radius: 8px 8px 4px 4px; background: #383838; }
.nd-cols .col.me .fill { background: var(--nd-muted); }
.nd-cols .lab { color: var(--nd-muted); font-size: 13px; line-height: 17px; letter-spacing: -0.1px; overflow-wrap: anywhere; }
.nd-cols .col.me .lab:not(.inv) { color: var(--nd-text); }
/* three values or fewer: every value under the bar, in fixed columns (left, centre, right), so a thin segment never squeezes its label */
.nd-sbar.all .seg { cursor: default; }
.nd-sbar .vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nd-sbar .vals .v { display: grid; gap: 2px; min-width: 0; }
.nd-sbar .vals .v:nth-child(2):not(:last-child) { text-align: center; } .nd-sbar .vals .v:last-child:not(:first-child) { text-align: right; }
.nd-sbar .vals b { color: var(--nd-text); font-size: 22px; font-weight: 590; line-height: 28px; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.nd-sbar .vals .lab { color: var(--nd-muted); font-size: 13px; line-height: 17px; letter-spacing: -0.1px; overflow-wrap: anywhere; }
.nd-sbar .vals .v.me .lab:not(.inv) { color: var(--nd-text); }

/* Wireframe: a plain white box on the card */
.bk.wire { margin: 6px 16px; padding: 10px 12px; background: #FFFFFF; border: 1px solid #CBD5E1; display: grid; gap: 5px; font-family: var(--sans, inherit); color: #64748B; }
.bk.wire .c { color: var(--comp, #1D4ED8); }
.bk.wire .a { color: var(--app, #DC2626); }
.bk.wire .f { color: var(--furn, #0F766E); }
.bk.wire .f.box { border: 1px dashed var(--furn, #0F766E); border-radius: 4px; padding: 1px 6px; font-size: 11px; background: var(--furn-bg, #CCFBF1); }
.bk.wire .crest { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--furn, #0F766E); background: var(--furn-bg, #CCFBF1); display: inline-block; flex: none; }
.bk.wire .hdr { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.bk.wire .lead { font-size: 18px; font-weight: 600; font-family: var(--display, inherit); line-height: 1.25; }
.bk.wire .lead.key { font-size: 20px; }
.bk.wire .hl { font-size: 13px; line-height: 1.4; }
.bk.wire .stat { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.bk.wire .stat b { font-variant-numeric: tabular-nums; }
.bk.wire .bar { display: flex; gap: 2px; height: 12px; }
.bk.wire .bar span { background: var(--comp, #1D4ED8); opacity: .85; }
.bk.wire .bar span:nth-child(2) { opacity: .55; } .bk.wire .bar span:nth-child(3) { opacity: .35; }
.bk.wire .axis { display: flex; justify-content: space-between; gap: 6px; font-family: var(--mono, monospace); font-size: 10px; }
.bk.wire .prose { font-size: 13px; line-height: 1.45; }
.bk.wire .foot { display: flex; gap: 6px; }
/* versus: Ericson's doodle (14 Oct). Each side a photo with the club badge on it and the number beside it, mirrored; Jim's label between, on two lines */
.bk.wire .vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bk.wire .vs .side { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; }
.bk.wire .vs .side.r { flex-direction: row-reverse; }
.bk.wire .vs .who { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.bk.wire .vs .ava { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1.5px dashed var(--furn, #0F766E); background: var(--furn-bg, #CCFBF1); display: inline-block; }
.bk.wire .vs .badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--furn, #0F766E); background: #FFFFFF; }
.bk.wire .vs .badge.miss { border-color: var(--app, #DC2626); background: #FEE2E2; }
.bk.wire .vs .nm { font-size: 11.5px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; max-width: 110px; }
.bk.wire .vs .num { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.bk.wire .vs .word { font-size: 12.5px; font-weight: 600; text-align: center; max-width: 64px; line-height: 1.25; }   /* wraps to two lines, so the sides get the room */
.bk.wire .gchip { margin-left: 0; }

/* the review's zones: the block's name above it, and the hover link to its ledger group */
.ndcard .z { position: relative; transition: background .15s, box-shadow .15s; }
.ndcard .z .zl { display: block; font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #6F7276; padding: 8px 16px 0; }
.ndcard .z .zl + .bk.nd { padding-top: 4px; }
.ndcard .z .zl + .bk.wire { margin-top: 4px; }
.ndcard .z.hl { background: rgba(14, 163, 91, .14); box-shadow: inset 3px 0 0 #0EA35B; }

/* The review's wireframe tile: content only, no design. Same blocks, same words, drawn plainly. */
.wfcard { background: #FFFFFF; border: 1.5px solid #CBD5E1; border-radius: 14px; overflow: hidden; }
.wfcard[data-grade="exceptional"] { --g: var(--g-exceptional); --gi: var(--g-exceptional-ink); }
.wfcard[data-grade="rare"] { --g: var(--g-rare); --gi: var(--g-rare-ink); }
.wfcard[data-grade="unusual"] { --g: var(--g-unusual); --gi: var(--g-unusual-ink); }
.wfcard[data-grade="ordinary"] { --g: var(--g-ordinary); --gi: var(--g-ordinary-ink); }
.wfcard .gchip { background: var(--g, #555); color: var(--gi, #fff); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; text-transform: lowercase; }
.wfcard .z { padding: 10px 14px; border-bottom: 1px dashed #CBD5E1; display: grid; gap: 5px; transition: background .15s, box-shadow .15s; }
.wfcard .z:last-child { border-bottom: 0; }
.wfcard .z .zl { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--wf, #64748B); }
.wfcard .z.hl { background: color-mix(in srgb, #0EA35B 10%, #FFFFFF); box-shadow: inset 3px 0 0 #0EA35B; }
.wfcard .bk.wire { margin: 0; padding: 0; border: 0; background: transparent; }

/* Page styles can't reach a card (19 Oct). The pages that draw cards (Card review, Block Library, Day) style their own controls with the
   same bare class names the blocks use: .seg (segmented controls), .tile (library tiles, review columns), .tile .nm, .more (Day's button)
   and .crest (review's furniture). Inside a designed block those rules added outlines, padding, a mono font and a button background
   that Nathan's designs don't have. Each reset below undoes only what a page rule sets and the block's own rule doesn't. */
.bk.nd .seg { border: 0; padding: 0; overflow: visible; width: auto; display: block; }
.bk.nd .tile { border: 0; box-shadow: none; max-width: none; width: auto; margin: 0; cursor: auto; text-align: left; transition: none; }
.bk.nd .tile .nm { font-family: inherit; font-size: inherit; font-weight: inherit; }
.bk.nd .tile .nm:not(.inv) { color: inherit; }
.bk.nd .more { background: none; border: 0; border-radius: 0; padding: 0; cursor: auto; font-family: inherit; }
.bk.nd .crest { border: 0; }