/* Colour tokens. Dark is the default; [data-theme="light"] (set before first paint by the
   inline script in index.html, from the saved choice or the system setting) swaps them. */
/* T-390: until Inter arrives, Arial sized to Inter's metrics, so the swap barely moves the text
   (a layout shift was most of the static pages' lost Lighthouse points). */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
/* T-845 (8 Oct): our own copies of Inter (one variable file for every weight) and Cinzel 700, both under the SIL Open Font
   License (docs/fonts/OFL-*.txt, from the fontsource packages), so no page asks Google for its fonts. Latin first; the
   latin-ext files load only for a character they hold. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cinzel-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cinzel-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* T-1275B (Jordan, 27 Oct: the whole site in the calculator's look): IBM Plex Sans for the words, Barlow Semi Condensed for
   headings and numbers, our own copies (docs/fonts/, the fontsource packages, each with its SIL Open Font License: OFL-IBMPlexSans.txt,
   OFL-BarlowSemiCondensed.txt). Plex is one variable file for weights 100 to 700 (800 and 900 draw as 700); Barlow 700 and 800.
   Until they arrive, Arial sized to each one's width and line (measured on a paragraph of the site's words), so the swap barely
   moves the text. --font-body and --font-head carry them; Inter (T-390, T-845) stays in docs/fonts for the lab pages that name it. */
@font-face { font-family: "Plex Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 101.18%; ascent-override: 101.31%; descent-override: 27.18%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 85.72%; ascent-override: 116.66%; descent-override: 23.33%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-ext-800.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #0B1120;
  /* T-936: the panel a step above the page and the border a step up, so dark surfaces read without more boxes. */
  --panel: #131C2E;
  --panel-2: #1E293B;
  --panel-3: #0F172A;
  --border: #3B4A61;
  --text: #F8FAFC;
  --text-dim: #94A3B8;
  --text-faint: #8391A7;   /* 4.5:1 or better on every dark panel (T-389; was #64748B) */
  --text-2: #CBD5E1;
  --att: #3B82F6;
  --def: #8B5CF6;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #F87171;   /* T-1352P: 4.5:1 or better as text on every dark ground (was #EF4444, 3.9:1 on the panel) */
  --gold: #FFD700;
  --lead: #FFD700;   /* leaders and the simulated roll: yellow, never orange (T-297) */
  --lead-bg: rgba(255,215,0,0.12);
  --nh-fill: linear-gradient(180deg, #FFE45C, #E9B800); --nh-on: #1F1700;   /* the New here? card's gold button (T-1428P) */
  /* Paper (T-475): your own list, wherever it shows; cream, never the leaders' yellow. */
  --paper: rgba(251,240,205,0.11); --paper-ink: #F3E7C4; --paper-edge: rgba(243,231,196,0.5); --paper-strong: rgba(251,240,205,0.18);
  --teal: #22D3EE;
  /* T-389: fills that carry white text, 4.5:1 or better (the bright tokens stay for text and lines). */
  --att-fill: #2563EB; --def-fill: #7C3AED; --green-fill: #047857; --def-text: #A78BFA;
  /* The filled buttons wear a gradient (T-827, Jordan 7 Oct): blue to indigo, purple to magenta. SIMULATE is the brand
     red (T-935: no longer pink like the S tier; T-984: the main buttons' --brand, #D2373D, a step under the pip's #e5484d
     so white words keep 4.8:1 where the gradient starts and 6.3:1 where it ends). */
  --brand: #D2373D; --on-brand: #FFFFFF;
  --sim: var(--brand);
  --sim-grad: linear-gradient(135deg, var(--sim), #b8262b);
  --att-grad: linear-gradient(135deg, var(--att-fill), #4F46E5); --def-grad: linear-gradient(135deg, var(--def-fill), #A21CAF);
  --att-soft: #93C5FD;
  --def-soft: #C4B5FD;
  --soft: rgba(255,255,255,0.05);
  --chip-bg: rgba(255,255,255,0.1);
  --chip-border: rgba(255,255,255,0.2);
  --warn-bg: rgba(255,179,0,0.15);
  --danger-bg: rgba(239,68,68,0.2);
  --shadow: rgba(0,0,0,0.5);
  --shadow-sm: rgba(0,0,0,0.15);
  --svg-label: #888888;
  /* attrition funnel: purple round the colour wheel to green, stepping away from the panel
     (dark to light here, light to dark in the light theme) */
  --c0: #7347af; --c1: #6469d3; --c2: #498beb; --c3: #04b2e0; --c4: #0fd3c3; --c5: #76e993;
  /* The tier ramp (T-1029S, Jordan 11 Oct: back to the original, T-356's): S gold, A emerald, B sky, C violet, D slate, as
     outlined coins, a 16% tint inside the colour's edge and the letter in a lighter shade of it (after T-828's logo ramp,
     T-983's classic red-to-grey tiles and T-1027S's funnel ramp). --tier-x the edge and tint, --tier-x-ink the letter,
     --tier-x-edge the edge, --tier-x-tile the tier board's solid row head (a dark letter on it, 6.5:1 or better). */
  --tier-s: #fbbf24; --tier-a: #34d399; --tier-b: #38bdf8; --tier-c: #a78bfa; --tier-d: #64748b;
  --tier-s-ink: #fcd34d; --tier-a-ink: #6ee7b7; --tier-b-ink: #7dd3fc; --tier-c-ink: #c4b5fd; --tier-d-ink: #94a3b8;
  --tier-s-tile: #fbbf24; --tier-a-tile: #34d399; --tier-b-tile: #38bdf8; --tier-c-tile: #a78bfa; --tier-d-tile: #94a3b8;
  --tier-s-edge: #fbbf24; --tier-a-edge: #34d399; --tier-b-edge: #38bdf8; --tier-c-edge: #a78bfa; --tier-d-edge: #64748b;
  /* T-1275B (Jordan, 27 Oct): one colour per side of the galaxy, site-wide: a small square on army chips, the edge of list cards,
     the side filter's line. Gold Imperium, blue Space Marines (split from Imperium), red Chaos, purple Xenos. */
  --side-imp: #E8B53A; --side-sm: #3B82F6; --side-cha: #EF4444; --side-xen: #A855F7;
  color-scheme: dark;
}
/* The design system (T-932 to T-937, batch A, 9 Oct; reports/site-review/2026-10-09/layout-appraisal.md): one set of
   tokens for the app and the static pages (pages.css reads these). Use a token, not a number; a value off the scale
   needs a reason in a comment.
   Breakpoints (T-937; custom properties can't hold them): 560px (phone), 760px (the app's tab bar along the bottom),
   900px (tablet; the results sheet below it, the calculator's two columns from it, T-940, and the header's tagline), 1180px
   (desktop; the side lists). 1100px is left only on Army vs Army's pairing panel. Max-width rules use the number, min-width
   rules the number + 1; the calculator's 900 is the exception (min-width: 900px, max-width: 899px, as layout.js and
   respanel.js test it). Two exceptions: 380px (the Modifiers grid on the smallest phones) and 1000px (the Armory dock's one row, T-931). */
:root {
  /* Type (T-1065S): four text sizes, 12, 14, 16 and 20, and three display sizes for numbers and titles (24, 30, 40); nothing
     under 12px on any page. The old names stay as aliases, so micro, xs and sm are all 12 and ui and body both 14. */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px;
  --fs-micro: var(--fs-12); --fs-xs: var(--fs-12); --fs-sm: var(--fs-12); --fs-ui: var(--fs-14); --fs-body: var(--fs-14); --fs-lead: var(--fs-16);
  --fs-h3: var(--fs-16); --fs-h2: var(--fs-20); --fs-num: 24px; --fs-h1: 30px; --fs-hero: 40px;
  --track: 0.08em;   /* the one letter-spacing for uppercase labels */
  /* T-1275B: the words and the headings and numbers (the faces at the top). */
  --font-body: "IBM Plex Sans", "Plex Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow Fallback", var(--font-body);
  /* Space. */
  --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px;
  /* Corners: tags, controls (buttons, inputs, tiles), cards and sheets, chips and toggles. 50% only for circles. */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  /* Control heights: small (chips, table buttons), medium (buttons), large (a phone's main actions). */
  --h-sm: 28px; --h-md: 36px; --h-lg: 44px;
  /* The page: one width for the app and the static pages, header and footer included, and one side gutter. */
  --page-w: 1240px; --gutter: 16px;
}
/* T-1377P (the 26 Oct review: on a phone 12 px carried half to three quarters of the words): secondary text (--fs-sm) a step up
   on phones; labels and tags keep 12 px (--fs-xs, --fs-micro). */
@media (max-width: 760px) { :root { --fs-sm: 13px; } }
/* Colour roles (T-935, T-984): each hue one job.
   Tier hues (--tier-*): tier letters and tier tiles only.  Sides: --att blue the attacker, --def purple the defender, in
   the calculator.  --brand (red, --sim): SIMULATE and the main action buttons, white words on it (--accent-fill and
   --on-accent are its old names, kept for the buttons that read them).  --accent (T-984, Jordan 10 Oct: the amber accent
   retired): a neutral, the near-white text colour on the dark page and near-black on the light one, for links (underlined),
   focus rings, the current tab and sub-nav marker and the selected pick-one (a tint of the text colour and a border in it).
   Secondary buttons are outlines (a neutral border, the text colour).  --amber stays for warnings and melee only.
   --green / --red: better and worse.  --lead (yellow): leaders.  --paper (cream): your own list. */
:root {
  --accent: #E2E8F0; --accent-fill: var(--brand); --on-accent: var(--on-brand);
  --pick-bg: color-mix(in srgb, var(--text) 13%, var(--panel)); --pick-bd: var(--text); --pick-fg: var(--text);
}
:root[data-theme="light"] { --accent: #1E293B; --pick-bg: color-mix(in srgb, var(--text) 8%, var(--panel)); }
:root[data-theme="light"] {
  --c0: #b88dfe; --c1: #7c83f7; --c2: #347ae0; --c3: #027493; --c4: #01655c; --c5: #005423;
  --bg: #E3E8EF;   /* T-1478P (Jordan, 29 Oct: "a bit more shading ... It's so white still"): a greyer page, the white cards on it (was #F1F5F9) */
  --panel: #FFFFFF;
  --panel-2: #EEF2F6;   /* T-1478P: inner fills a step down from the cards (was #F8FAFC) */
  --panel-3: #FFFFFF;
  --border: #B4C0D0;   /* T-1205B: cards' edges visible on white (was #CBD5E1) */
  --text: #0F172A;
  --text-dim: #475569;
  --text-faint: #4F5E72;   /* 4.5:1 or better on the light background, #E3E8EF since T-1478P (T-389; was #5B6B80) */
  --text-2: #334155;
  --att: #2563EB;
  --def: #7C3AED;
  --green: #047857;
  --amber: #B45309;
  --red: #B91C1C;   /* T-1352P: 4.5:1 or better on the light grounds (was #DC2626) */
  --gold: #D97706;
  --lead: #A16207;   /* T-1476P (Jordan, 29 Oct, the light review): warmer, not olive; 4.9:1 on white, 4.6:1 on --lead-bg (was #806500) */
  --lead-bg: #FEF9C3;
  --nh-fill: linear-gradient(180deg, #FDE047, #FACC15); --nh-on: #1F1700;   /* T-1476P: the brand yellow with near-black text, not a muddy olive */
  --paper: #FBF6E6; --paper-ink: #4A3A10; --paper-edge: #CDBB8A; --paper-strong: #F5ECCF;
  --teal: #0E7490;
  --att-fill: #2563EB; --def-fill: #7C3AED; --green-fill: #047857; --def-text: #7C3AED;
  --att-soft: #1D4ED8;
  --def-soft: #6D28D9;
  --soft: #F1F5F9;
  --chip-bg: #F1F5F9;
  --chip-border: #CBD5E1;
  --warn-bg: #FEF3C7;
  --danger-bg: #FEE2E2;
  --shadow: rgba(15,23,42,0.12);
  --shadow-sm: rgba(15,23,42,0.06);
  --svg-label: #64748B;
  /* The ramp a step deeper on white (near the 500s; the letter keeps 4.5:1 or better), each tile edged in its 700. */
  --tier-s: #d97706; --tier-a: #10b981; --tier-b: #0ea5e9; --tier-c: #8b5cf6; --tier-d: #94a3b8;
  --tier-s-ink: #92400e; --tier-a-ink: #065f46; --tier-b-ink: #0369a1; --tier-c-ink: #6d28d9; --tier-d-ink: #475569;
  --tier-s-tile: #f59e0b; --tier-a-tile: #10b981; --tier-b-tile: #0ea5e9; --tier-c-tile: #a78bfa; --tier-d-tile: #94a3b8;
  --tier-s-edge: #d97706; --tier-a-edge: #10b981; --tier-b-edge: #0ea5e9; --tier-c-edge: #8b5cf6; --tier-d-edge: #94a3b8;
  --side-imp: #B7791F; --side-sm: #2563EB; --side-cha: #DC2626; --side-xen: #9333EA;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* hidden always hides, whatever display a class sets. */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
/* One page grid (T-932): the body is the page's column, --page-w wide inside one --gutter, on the app and the static pages. */
/* T-1065S: <small> is the scale's 12px, never the browser's "smaller" (11.7px under 14px text). */
small { font-size: var(--fs-12); }
body { padding: var(--gutter); padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); max-width: calc(var(--page-w) + 2 * var(--gutter)); margin: 0 auto; }
select, input, button { font-family: inherit; }

/* ---------- slim header + tabs ---------- */
:root { --top-h: 60px; }
.topbar {
  position: sticky; top: 0; z-index: 20; margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) var(--s-5); padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--panel); border-bottom: 1px solid var(--border);
  /* T-932: the bar runs the screen's full width past the page's column (a border image paints outside the box without
     a sideways scroll), its row inside it at the page's width. */
  border-image: linear-gradient(to top, var(--border) 1px, var(--panel) 1px) fill 0 / 0 / 0 100vmax;
}
.topbar-in { max-width: var(--page-w); margin: 0 auto; height: var(--top-h); display: flex; align-items: center; gap: 18px; }
/* The lockup (T-819, Jordan 7 Oct: the final mark in place of the old three dice): the emblem beside the traced
   wordmark, TACTICAL over REROLL (icons/wordmark-dark.svg, white with a purple extrusion, on dark grounds;
   wordmark-light.svg, ink with a lavender one, on light and in print). */
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); min-width: 0; }
.logo-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.wmk { display: inline-flex; flex: none; line-height: 0; }
.wmk img { display: block; width: auto; height: 26px; }
.wmk .wm-light { display: none; }
:root[data-theme="light"] .wmk .wm-dark { display: none; }
:root[data-theme="light"] .wmk .wm-light { display: block; }
@media print { .wmk .wm-dark { display: none !important; } .wmk .wm-light { display: block !important; } }
.logo-emblem, .brand-emblem, .w-emblem { flex: none; width: auto; height: 38px; }
.brand-wm { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 5.85em; margin: 0;
  font: 700 var(--fs-body)/1.05 Cinzel, Georgia, serif; letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; }
.brand-wm .l2 { font-size: 1.25em; line-height: 1; }
.tagline { display: block; margin: 3px 0 0; font: 600 var(--fs-xs)/1.2 Inter, "Inter Fallback", system-ui, sans-serif; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
/* T-1352P (the 19 Oct audit: two headers, built twice): the same lockup on the calculator and on every page. */
@media (min-width: 900px) { .logo .wmk img { height: 28px; } .logo-emblem { height: 42px; } }   /* the pages' header, the same in pages.css */
@media (max-width: 899px) { .tagline { display: none; } }
.tabs { display: flex; gap: 2px; height: 100%; margin-left: auto; }
.tab {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; text-decoration: none;
  color: var(--text-dim); font-weight: 600; font-size: var(--fs-body); white-space: nowrap;
}
.tab:hover { color: var(--text); }
/* T-1352P: the current tab as the pages' header shows it (pages.css .ph-nav), its word underlined in the accent. */
.tab[aria-current] { color: var(--text); }
.tab[aria-current] > span:last-child { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tab-i { font-size: var(--fs-body); }
/* The theme button (T-1290D, Jordan 18 Oct: "make the toggle much more obvious … just a sun/moon somewhere consistent"):
   top right on every page, just left of ⋯ (the app's .top-tools, the static pages' .sh-tools). Both glyphs are in the
   markup and the theme shows one, so it is right before any script runs: a gold sun in dark mode, a purple moon in light. */
.top-tools { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.theme-toggle {
  flex: none; width: var(--h-md); height: var(--h-md); border-radius: 50%; padding: 0;
  background: var(--lead-bg); border: 1px solid color-mix(in srgb, var(--lead) 45%, var(--border)); color: var(--lead);
  line-height: 1; cursor: pointer; display: inline-grid; place-items: center;
}
.theme-toggle .glyph { width: 20px; height: 20px; display: block; }
.theme-toggle .tt-moon { display: none; }
:root[data-theme="light"] .theme-toggle { background: color-mix(in srgb, var(--def-text) 10%, var(--panel)); border-color: color-mix(in srgb, var(--def-text) 40%, var(--border)); color: var(--def-text); }
:root[data-theme="light"] .theme-toggle .tt-sun { display: none; }
:root[data-theme="light"] .theme-toggle .tt-moon { display: inline; }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .theme-toggle { display: none !important; } }
/* The matchup pinned under the header (a second row of it) once the answer scrolls away. */
.view { scroll-margin-top: calc(var(--top-h) + 12px + var(--pin-h, 0px)); }
.view + .view { margin-top: 28px; }
/* Phones: the tabs become a bar along the bottom. */
@media (max-width: 760px) {
  :root { --top-h: 52px; }
  .topbar-in { justify-content: space-between; }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: auto; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .tab { flex-direction: column; gap: 2px; padding: 6px 0; font-size: var(--fs-xs); border-bottom: none; justify-content: center; }
  .tab-i { font-size: var(--fs-h3); line-height: 1; }
  .tab[aria-current] { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
  .tab[aria-current] > span:last-child { text-decoration: none; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  }

/* ---------- setup panel ---------- */
/* Weapon picker: one line per weapon, like a datasheet's weapon table. */
.wpick { margin: 0 0 6px; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }

/* Each side is one card, both the same height: the unit, what fires, and a button that opens
   the rest in a popout (T-190). */
.setup-panel { margin-bottom: 12px; }
.setup-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; border-top: 3px solid var(--att); display: flex; flex-direction: column; position: relative; min-width: 0; }
#defCol { border-top-color: var(--def); }
.setup-col .statline { border-top: none !important; }
.wr-summary { font-size: var(--fs-sm); color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 0; }
.edit-btn { font-size: var(--fs-sm); padding: 4px 10px; flex: none; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 760px) {  }

.setup-swap { display: flex; align-items: center; justify-content: center; align-self: center; }
#swapBtn {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #fff; font-weight: 800;
  border: none; border-radius: var(--r-md); padding: 10px 6px; font-size: var(--fs-xs); line-height: 1.3;
  cursor: pointer; width: 100%;
}
#swapBtn:hover { filter: brightness(1.1); }
#swapBtn span { display: block; }
@media (max-width: 760px) {  #swapBtn span { display: inline; } }

.side-label { font-weight: 700; font-size: var(--fs-body); margin-bottom: 6px; }
.side-label.att { color: var(--att); }
.side-label.def { color: var(--def); }

select {
  width: 100%; background: var(--panel-3); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 8px; font-size: var(--fs-ui); margin-bottom: 6px;
}

.statline {
  background: var(--soft); border-radius: var(--r-sm); padding: 4px 8px; display: flex;
  justify-content: space-between; gap: 4px; margin-bottom: 8px;
}
.statline .stat { text-align: center; flex: 1; }
.statline .stat .k { font-size: var(--fs-micro); color: var(--att-soft); display: block; }
.statline .stat .v { font-size: var(--fs-body); font-weight: 900; color: var(--text); }

.mini-label { font-size: var(--fs-micro); color: var(--text-dim); font-weight: 700; margin-top: 8px; margin-bottom: 4px; letter-spacing: 0.3px; }

.weapon-row { display: grid; grid-template-columns: 1.5fr repeat(7, 0.7fr); gap: 4px; align-items: end; }
@media (max-width: 760px) { .weapon-row { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.weapon-row label { display: flex; flex-direction: column; font-size: var(--fs-micro); color: var(--text-dim); gap: 2px; }
.weapon-row input {
  background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 3px 5px; font-size: var(--fs-ui); height: 26px; width: 100%;
}
.weapon-label { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 2px; grid-column: span 1; }
.weapon-name { font-size: var(--fs-ui); font-weight: bold; color: var(--att); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weapon-name.def-name { color: var(--def); }
.badge-container { display: flex; flex-wrap: wrap; gap: 3px; }
.kw-badge {
  background: var(--chip-bg); color: var(--text-dim); padding: 1px 5px; border-radius: var(--r-sm);
  font-size: var(--fs-micro); line-height: 1.3; border: 1px solid var(--chip-border); text-transform: uppercase;
}

/* ---------- main layout ---------- */
.main-layout { display: flex; flex-direction: column;}
/* Datasheets still loading from BSData: the previous result stays, dimmed. */
.main-layout.loading { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
.data-loading { margin: 6px 0; font-size: var(--fs-ui); color: var(--text-dim); }
.data-loading::before { content: "⏳ "; }
.data-loading.error { color: var(--red); }
.data-loading.error::before { content: "⚠️ "; }
.data-loading .reset-btn { margin-left: 6px; }
/* The data source offline (13 Nov): one calm notice at the top of the calculator or the list builder. */
/* T-1916S: the home page's line (Jordan's words), calm, above the calculator; its × hides it for good on this device. */
.free-line { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 6px 8px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-size: var(--fs-ui); line-height: 1.4; }
.free-line > span:nth-child(2) { flex: 1; min-width: 0; }
.fl-pip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.fl-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-dim); font-size: var(--fs-20); line-height: 1; cursor: pointer; }
.fl-x:hover, .fl-x:focus-visible { color: var(--text); background: var(--soft); }
.bs-down { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-size: var(--fs-ui); line-height: 1.45; }
.bs-down b { display: block; margin-bottom: 2px; }
.bs-down span { color: var(--text-dim); }

/* ---------- modifier chips + the full panel ---------- */
/* The modifiers (T-125): beside the answer on wide screens, above it otherwise (T-190). */
.calc-body { display: grid; gap: 12px; }
/* Wide screens: the attacker's half holds the inputs (its card, then the modifiers), the rest the
   answer and chart, so the Edit weapons popout covers only the attacker's half. */
@media (min-width: 1100px) {
  .calc-body { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .calc-body > .mods-card { grid-column: 1; }
  .calc-body > .main-layout { grid-column: 2 / 4; }
}
.mods-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.mods-card .modpanel { grid-template-columns: 1fr; border-top: 1px solid var(--border); padding-top: 10px; }
.mods-card .mods-col { border: none; background: none; padding: 0; }
/* Detachment rules (T-128): ⚡ chips beside the modifiers, with a tooltip naming the rule;
   struck through when not in play, dimmed when switched off. The pickers sit underneath. */
.mchip.det { position: relative; }
.mchip.det:hover, .mchip.det:focus-visible { z-index: 30; }
.mchip .tag { font-size: var(--fs-micro); font-weight: 800; color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); border-radius: var(--r-sm); padding: 0 4px; margin-right: 4px; }
.mchip.det.idle { color: var(--text-faint); background: transparent; text-decoration: line-through; cursor: default; }
.mchip.det.off { color: var(--text-faint); background: transparent; }
.mchip .mtip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 260px; white-space: normal; text-align: left;
  font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; color: var(--bg); background: var(--text); border-radius: var(--r-sm); padding: 6px 9px; box-shadow: 0 6px 18px var(--shadow); text-decoration: none; }
.mchip.det:hover .mtip, .mchip.det:focus-visible .mtip { display: block; }
.det-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); font-size: var(--fs-ui);}
.det-row select { width: 100%; min-width: 0; }
.det-who { font-weight: 700; color: var(--text-dim); }
.det-sub .det-who { font-weight: 600; color: var(--text-faint); padding-left: 14px; }
.det-note { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); }
.det-fx { margin: 4px 0; padding-left: 0; list-style: none; display: grid; gap: 2px; font-size: var(--fs-ui); }
.det-fx small { color: var(--text-faint); }
.mchip {
  font: inherit; font-size: var(--fs-ui); font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
}
.mchip.on.att { background: color-mix(in srgb, var(--att) 12%, var(--panel)); border-color: color-mix(in srgb, var(--att) 45%, var(--border)); }
.mchip.on.def { background: color-mix(in srgb, var(--def) 12%, var(--panel)); border-color: color-mix(in srgb, var(--def) 45%, var(--border)); }
.mchip .x { color: var(--text-faint); font-size: var(--fs-xs); margin-left: 2px; }
.mchip.on:hover .x { color: var(--red); }
.modpanel { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.modpanel[hidden] { display: none; }
@media (max-width: 760px) { .modpanel { grid-template-columns: 1fr; } }
.mods-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; min-width: 0; }

/* ---------- the answer ---------- */
.answer { background: var(--panel); border: 1px solid var(--border); padding: 16px 18px; display: flex; flex-direction: column;}
.ans-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ans-num { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--c5); }
.ans-of { font-size: var(--fs-h3); font-weight: 800; }
.ans-meter { height: 8px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.ans-meter i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c0), var(--c2), var(--c5)); transition: width 0.3s; }
/* Each step with its middle-3-in-4 range underneath (T-126). */
.ans-range { color: var(--text-faint);}
.ans-range { font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.ans-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-ui); color: var(--text-dim);}
.ans-foot b { color: var(--text); }
.ans-foot .wipe { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ans-meter i { transition: none; } }

.mods-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mods-head h4 { margin: 0; font-size: var(--fs-body); }
.att-color { color: var(--att); }
.def-color { color: var(--def); }
.reset-btn {
  background: var(--soft); color: var(--text-dim); border: 1px solid var(--border);
  padding: 3px 9px; font-size: var(--fs-xs); height: 24px; border-radius: var(--r-sm); cursor: pointer;
}
.reset-btn:hover { background: var(--danger-bg); color: var(--red); border-color: var(--red); }

.mods-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.mods-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.num-field, .sel-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.num-field label, .sel-field label { font-size: var(--fs-micro); color: var(--text-dim); }
/* width + min-width: number inputs have an intrinsic minimum width that otherwise
   overflows the sidebar grid and covers the Hits card. */
.num-field input, .sel-field select {
  background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 4px 6px; font-size: var(--fs-ui); height: 28px; width: 100%; min-width: 0;
}

.mods-checkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin-bottom: 6px; }
.mods-checkgrid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 8px; }
.chk-field { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--text-dim); }
.chk-field input { accent-color: var(--att); width: 14px; height: 14px; }

.reroll-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.reroll-label { font-size: var(--fs-xs); color: var(--text-dim); width: 40px; }
.radio-row { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--text-dim); }
.radio-row input { accent-color: var(--def); }

.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* ---------- charts ---------- */

.chart-card {
  /* T-936: a fill, not a third box inside the results card. */
  text-align: center; padding: 14px; border-radius: var(--r-md); display: flex; flex-direction: column;
  background: var(--panel-2); border: 0;
}
/* T-933, T-938: a chart's title is a quiet heading in sentence case and its mean a small number (no glow), so the answer
   above (24 px, the slain colour, its own band) is the loudest block on the screen. */
.chart-card .title { font-size: var(--fs-ui); line-height: 1.2; color: var(--text-2); font-weight: 800; }
.chart-card .target { font-size: var(--fs-ui); font-weight: 600; color: var(--text-dim); margin: 2px 0 4px; }
.chart-card .conv { font-size: var(--fs-sm); color: var(--att-soft); font-weight: 700; margin: -2px 0 5px; }
.chart-card .conv .sub { font-size: var(--fs-micro); color: var(--text-dim); font-weight: 400; display: block; }
/* The number, its line and the chart sit at the foot of each card, so cards side by side line up
   whatever their headings hold (T-342, Jordan 29 Sep: "some are a step above or below"). */
.chart-card .mean { font-size: var(--fs-h3); font-weight: 800; margin-top: auto; text-shadow: none; font-variant-numeric: tabular-nums; color: var(--mc); }
/* Its chart's colour, a shade lighter on the dark cards (T-1008W: blue, violet and red fell under 4.5:1 there). */
:root:not([data-theme="light"]) .chart-card .mean { color: color-mix(in srgb, var(--mc) 72%, #fff); }
.chart-card .stats-line { font-size: var(--fs-sm); color: var(--text-2); margin-top: 6px; background: var(--soft); padding: 5px; border-radius: var(--r-sm); }
.chart-card .wipe-warn {
  color: var(--amber); font-size: var(--fs-sm); font-weight: 800; margin-top: 6px;
  background: var(--warn-bg); padding: 4px; border-radius: var(--r-sm);
}
.chart-card svg { width: 100%; height: 110px; margin-top: 6px; display: block; }

/* ---------- footer ---------- */
.footer { text-align: center; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); }
.footer p { color: var(--text-faint); font-size: var(--fs-xs); font-style: italic; margin: 0; }
.footer p + p { margin-top: 6px; }
.footer .data-info, .footer .disclaimer { font-style: normal; font-size: var(--fs-xs); max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.footer a { color: var(--text-dim); }

/* ---------- army rosters ---------- */
.roster-section { margin-top: 26px; }
.section-head { margin-bottom: 10px; }
/* T-933: one size for each heading level on every page: h1 --fs-h1/900, h2 --fs-h2/800, h3 --fs-h3/800 (an uppercase
   label marked up as h3 takes the label style: --fs-xs/800, --track). */
.section-head h1 { margin: 0; font-size: clamp(var(--fs-num), 4vw, var(--fs-h1)); font-weight: 900; line-height: 1.2; }
.section-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; }
.section-head p { margin: 3px 0 0; color: var(--text-dim); font-size: var(--fs-sm); }
.roster-grid { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 12px; align-items: start; }
@media (max-width: 760px) {
    .roster-swap { order: -1; }
}
.roster-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; min-width: 0; }
.roster-swap { display: flex; justify-content: center; padding-top: 40px; }
@media (max-width: 760px) { .roster-swap { padding-top: 0; } }
#rosterSwap {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #fff; font-weight: 800;
  border: none; border-radius: var(--r-md); padding: 8px 10px; font-size: var(--fs-lead); cursor: pointer;
}
#rosterSwap span { display: none; font-size: var(--fs-sm); }
@media (max-width: 760px) { #rosterSwap { width: 100%; } #rosterSwap span { display: inline; } }

.roster-empty {
  border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 14px; text-align: center;
  color: var(--text-dim); font-size: var(--fs-ui);
}
.roster-empty.drag { border-color: var(--att); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.roster-empty p { margin: 0 0 8px; }
.roster-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Dashed borders mean one thing (T-934): an empty slot or an "add one" (＋Leader, Pick a list, an upload, a stratagem waiting
   to be used); something switched off or unavailable is solid at half opacity. */
/* One button family (T-934): .btn is the secondary (an outline on --panel-2), .btn.primary the filled one, .btn.ghost text
   only; .btn.sm for dense bars, .btn.lg for a phone's main action. Every button is a pill; choice tiles (.ao) and inputs
   take --r-md. A pick-one chip or toggle is a pill too, selected = a tint of its colour and a border in it (--pick-*). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); box-sizing: border-box;
  min-height: var(--h-md); padding: 0 var(--s-4); line-height: 1.2; text-decoration: none;
  background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-ui); font-weight: 700; cursor: pointer;
}
.btn:hover { border-color: var(--text-dim); }
/* T-984: a main action is brand red with white 16 px words (and its icon where one fits); a dense bar's (.sm) keeps its size. */
.btn.primary { color: var(--on-accent); font-size: var(--fs-lead); }
.btn.primary:hover { filter: brightness(1.08); }
/* T-1481P (the overnight audit, 30 Oct): the filled buttons as one family whatever their colour (red the main action, yellow a
   setup's next step, purple Simulate): a pill with a darker rim, a slight fall of shade, heavy words and a soft glow of its own
   colour. The shade only darkens, so the white words keep their contrast. */
.btn.primary { background: linear-gradient(180deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 84%, #000)); border-color: color-mix(in srgb, var(--accent-fill) 70%, #000); font-weight: 900; letter-spacing: 0.01em; }
.btn.primary:not(.sm) { box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-fill) 28%, transparent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.sm, .btn.sm.primary { min-height: var(--h-sm); padding: 0 10px; font-size: var(--fs-sm); }
.btn.lg { min-height: var(--h-lg); padding: 0 var(--s-5); font-size: var(--fs-body); }
/* Three kinds and a tag (T-1065S), the app's and the static pages' alike: primary (.btn.primary, filled red) for a screen's one
   main action, Simulate first of all, and never for "read more"; secondary (.btn, an outlined pill) for everything else that
   goes somewhere or changes something; quiet (.btn.ghost, or a text link ending in ›) inside prose and tables; and a tag
   (.tag-f) for a fact that does nothing when tapped: square corners, no border, never a pill, so it can't look like a button.
   One meaning per colour: red is Simulate, the main action and a loss; yellow (--lead) is leaders and the balance update;
   the tier ramp only on tier coins; blue, red and purple the Imperium, Chaos and the Xenos (the picker's, T-1061S). */
.tag-f { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; background: var(--soft); color: var(--text-dim);
  font-size: var(--fs-12); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.roster-hint { margin-top: 10px !important; font-size: var(--fs-xs); color: var(--text-faint); }
.paste-box { margin-top: 10px; text-align: left; }
.paste-box textarea {
  width: 100%; background: var(--panel-3); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px; font: var(--fs-sm)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
}
.paste-row { display: flex; gap: 8px; margin-top: 6px; }
.paste-row select { margin: 0; flex: 1; min-width: 0; }
.roster-err { color: var(--red); font-size: var(--fs-sm); margin-top: 8px !important; }

.roster-head .reset-btn { white-space: nowrap; }
.roster-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.roster-title { min-width: 0; }
.roster-name { font-weight: 800; font-size: var(--fs-body); overflow-wrap: anywhere; }
.roster-meta { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 2px; }
.roster-warn { color: var(--red); font-size: var(--fs-sm); margin: 0 0 6px; }
.roster-role {
  font-size: var(--fs-micro); font-weight: 800; color: var(--text-faint); letter-spacing: 1px;
  margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border);
}
.roster-unit {
  display: block; width: 100%;
  background: transparent; color: var(--text); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 6px 8px; text-align: left; cursor: pointer; font-size: var(--fs-ui);
}
.roster-unit:hover { background: var(--panel-2); }
.roster-unit.selected { border-color: currentColor; background: var(--panel-2); }
#roster1 .roster-unit.selected { color: var(--def-soft); }
.roster-unit.nodata { opacity: 0.45; cursor: default; }
.roster-unit.nodata:hover { background: transparent; }
.ru-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ru-sub { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-dim); }
.ru-pts { color: var(--text-dim); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 150%);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px var(--shadow);
  padding: 10px 12px; display: flex; gap: 12px; align-items: center; font-size: var(--fs-ui);
  max-width: calc(100vw - 32px); transition: transform 0.2s ease, visibility 0.2s; z-index: 10; visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast { width: max-content; }
.toast span { min-width: 0; }
.toast button { background: none; border: none; color: var(--att-soft); font-weight: 700; cursor: pointer; white-space: nowrap; font-size: var(--fs-ui); }

.ru-top { display: flex; justify-content: space-between; gap: 8px;}

/* ---------- army comparator ---------- */
/* Your selected unit: unmistakable, and named in a pinned bar when scrolled away. */
#roster0 .roster-unit.selected {
  color: var(--text); border: 1px solid var(--att); border-left: 5px solid var(--att);
  background: color-mix(in srgb, var(--att) 16%, var(--panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--att) 22%, transparent);
}
.att-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-pill); vertical-align: 1px;
  background: var(--att-grad); color: #fff; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px;
}

.cmp-banner {
  background: var(--panel); border: 1px solid var(--att); border-radius: var(--r-md); padding: 10px 12px;
  margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.cmp-title { font-size: var(--fs-ui); }
.cmp-sub { display: block; color: var(--text-dim); font-size: var(--fs-sm); margin-top: 2px; }
.cmp-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.best-badge {
  display: inline-block; font-size: var(--fs-micro); font-weight: 700; color: var(--amber);
  background: var(--warn-bg); border-radius: var(--r-sm); padding: 0 5px; margin-left: 4px; vertical-align: 1px;
}
.cmp { display: block; margin-top: 6px; }
.cmp-line { display: block; padding: 4px 0; border-top: 1px solid var(--border); }
.cmp-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.cmp-kind { width: 78px; flex: none; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.cmp-kills { flex: none; white-space: nowrap; color: var(--text); }
.cmp-kills b { font-size: var(--fs-body); }
.cmp-bar { flex: 1; min-width: 30px; height: 6px; background: var(--soft); border-radius: var(--r-sm); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--att); border-radius: var(--r-sm); }
.cmp-pct { flex: none; width: 34px; text-align: right; color: var(--text-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cmp-detail { display: block; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; font-weight: 400; }
.cmp-none { color: var(--text-faint); font-size: var(--fs-sm); }
.cmp-line.none .cmp-kind { display: inline-block; }
.cmp-pts { display: block; text-align: right; font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }

.cmp-via { display: block; font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1px; font-weight: 400; }
.cmp-weps { display: block; margin: 6px 0 2px; border-left: 2px solid var(--att); padding-left: 8px; }
.cw-head { display: block; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); margin: 6px 0 2px; }
.cw-head:first-child { margin-top: 0; }
.cw { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; line-height: 1.35;}
.cw-name { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.cw-badge { display: inline-block; width: 20px; }
.cw-status { display: block; padding-left: 20px; color: var(--text-faint); font-size: var(--fs-xs); }
.cw-val { color: var(--text-dim); white-space: nowrap; text-align: right; }
.cw-val b { color: var(--text); }
.cw.option .cw-name { color: var(--text-dim); }
.roster-unit.expanded { border-color: var(--def); }
@media (max-width: 560px) {
  .cw { grid-template-columns: 1fr; }
  .cw-val { grid-column: 1; text-align: left; padding-left: 20px; }
}

/* ---------- efficiency rankings ---------- */
.rank-section { margin-top: 30px; }
.rank-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 10px; }
.rk-field { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--text-dim); min-width: 0; }
.rk-field select, .rk-field input {
  margin: 0; background: var(--panel-3); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 8px; font-size: var(--fs-ui); max-width: 260px; min-width: 0;
}
.rk-search input { width: 180px; }
.rk-mix { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; }
.rk-mix-h { flex: 1 1 100%; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.rk-w { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text-dim); flex: 1 1 120px; }
.rk-w input { width: 100%; accent-color: var(--att); }
.rank-list { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rk-head, .rk-main {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 300px; gap: 10px; align-items: center; padding: 8px 12px;
}
.rk-head { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.rk-targets-h, .rk-targets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; }
.rk-targets-h { align-items: end; }
.rk-targets-h span { overflow-wrap: anywhere; line-height: 1.15; }
.rk-row { border-bottom: 1px solid var(--border); }
.rk-row:last-of-type { border-bottom: none; }
/* A row is a link to the unit's own page (T-282). */
.rk-main { cursor: pointer; color: inherit; text-decoration: none; }
.rk-main:hover { background: var(--panel-2); }
.rk-go { color: var(--text-faint); font-weight: 800; }
.rk-main:hover .rk-go, .rk-main:focus-visible .rk-go { color: var(--att); }
.rk-rank { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.rk-name { font-weight: 700; font-size: var(--fs-ui); min-width: 0; overflow-wrap: anywhere; }
.rk-sub { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-dim); }
.rk-tag { display: inline-block; font-size: var(--fs-micro); font-weight: 700; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 4px; margin-left: 5px; vertical-align: 1px; }
.rk-scores { display: flex; gap: 8px; }
/* Each score and its heading share one fixed width, so the columns line up whatever the labels. */
.rk-score { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; }
.rk-lbl { font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--track); white-space: nowrap; }
.rk-chip { display: inline-block; min-width: 30px; text-align: center; border-radius: var(--r-sm); padding: 2px 4px; font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rk-t { border-radius: var(--r-sm); padding: 3px 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.h5 { background: rgba(16,185,129,0.30); color: var(--text); }
.h4 { background: rgba(16,185,129,0.16); color: var(--text); }
.h3 { background: var(--soft); color: var(--text); }
.h2 { background: rgba(245,158,11,0.14); color: var(--text); }
.h1 { background: rgba(239,68,68,0.16); color: var(--text); }
/* Meta (T-227, Jordan 27 Sep): any recent winning list taking a unit is a good sign, so no red:
   grey at 0, then green, deeper the more lists take it. */
.m0 { background: var(--soft); color: var(--text-faint); }
.m1 { background: rgba(16,185,129,0.10); color: var(--text); } .m2 { background: rgba(16,185,129,0.17); color: var(--text); }
.m3 { background: rgba(16,185,129,0.24); color: var(--text); } .m4 { background: rgba(16,185,129,0.32); color: var(--text); }
.m5 { background: rgba(16,185,129,0.42); color: var(--text); }
/* What players make of a unit (T-222, T-229), on its own page since T-282: the rating, a fan
   favourite, a 1-10 row. */
.rate-box .rk-meta { margin: 6px 0 0; }
.rk-tag.rk-fan { color: var(--text-2); border-color: var(--border); background: var(--soft); }
.rk-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-dim); }
.rk-votes { display: flex; gap: 3px; flex-wrap: wrap; }
.rk-vote { all: unset; cursor: pointer; box-sizing: border-box; width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--border); text-align: center; line-height: 26px; font-weight: 800; font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.rk-vote:hover, .rk-vote:focus-visible { border-color: var(--att); }
.rk-vote.on { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); }
.rk-vote:disabled { opacity: 0.5; cursor: default; }
:is(.rk-rate, .rate-box) .linkish { all: unset; cursor: pointer; text-decoration: underline; color: var(--text-dim); font-size: var(--fs-sm); }
.rk-check { margin-top: 8px; }
.rk-rate-msg { font-size: var(--fs-sm); color: var(--text-dim); margin: 6px 0 0; min-height: 1em; }
.rk-rate-msg:empty { display: none; }
.rk-more { display: block; width: calc(100% - 24px); margin: 10px 12px; }
.rk-empty { color: var(--text-dim); padding: 16px; margin: 0; }
@media (max-width: 900px) {
  .rk-head, .rk-main { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .rk-targets-h, .rk-targets { display: none; }
}
@media (max-width: 560px) {
  .rk-head { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .rk-scores-h { gap: 3px; }
  .rk-scores-h button { width: 40px; font-size: var(--fs-micro); letter-spacing: 0.1px; }
  .rk-main { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .rk-scores { gap: 3px; }
  .rk-score { width: 40px; }
  .rk-name { overflow-wrap: break-word; hyphens: auto; }
  .rk-lbl { font-size: var(--fs-micro); letter-spacing: 0.1px; }
  .rk-chip { min-width: 26px; font-size: var(--fs-sm); padding: 2px 2px; }
  .rk-field { flex: 1 1 45%; }
  .rk-field select, .rk-field input, .rk-search input { max-width: none; width: 100%; }
}

/* ---------- detachments + comparator buffs ---------- */
.det-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.det-row .det-pn { flex-basis: 100%; grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.4; }   /* a rolled or round-by-round choice, said (T-1910S) */
.det-pick { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--text-dim); min-width: 0; flex: 1 1 200px; }
.det-pick select { margin: 0; font-size: var(--fs-ui); padding: 4px 6px; }
.det-pick select + select { margin-top: 4px; }
.det-rules .det-name { font-weight: 700; color: var(--text); margin: 8px 0 2px; }
.det-rules .det-name:first-child { margin-top: 0; }
.det-toggle { height: 28px; }
.det-rules { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 8px; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); max-height: 260px; overflow: auto; }
.det-rules p { margin: 0 0 8px; }
.det-rules p:last-child { margin-bottom: 0; }
.cmp-buffs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; width: 100%; padding-top: 6px; border-top: 1px solid var(--border); }
.buff-grp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.buff-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim); margin-right: 2px; }
.chip { display: inline-flex; align-items: center; min-height: var(--h-sm); box-sizing: border-box; background: var(--soft); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0 10px; font-size: var(--fs-sm); cursor: pointer; }
.chip:hover { border-color: var(--text-dim); }
.chip.on { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); }
.buff-grp select { margin: 0; width: auto; font-size: var(--fs-sm); padding: 2px 6px; height: 24px; }

/* ---------- supporter badge ---------- */
.cmp-meter { display: inline-block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--amber); }
.cmp-meter.pro { color: var(--green); }

.footer .footer-links { font-style: normal; margin-top: 8px; }
.footer .footer-links a { white-space: nowrap; }
.footer .lang-pick { font-style: normal; margin-top: 8px; }
.footer .lang-pick select { font: inherit; margin-left: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 6px; }

/* ---------- intro line (search engines read it; players get the links) ---------- */
.intro { max-width: 860px; margin: -6px auto 16px; text-align: center; color: var(--text-dim); font-size: var(--fs-ui); line-height: 1.5; }
.intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.intro strong { color: var(--text); }
.intro p { margin: 0; }
/* T-902: the home page's static words below the calculator (what it does, a worked example, the ways on). */
.calc-about { max-width: 720px; margin: 22px auto 8px; padding: 0 16px; color: var(--text-dim); font-size: var(--fs-body); line-height: 1.6; }
.calc-about h2 { margin: 0; font-size: var(--fs-ui); color: var(--text); display: inline; }
.calc-about > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; width: max-content; max-width: 100%; margin: 0 auto; }
.calc-about > summary::-webkit-details-marker { display: none; }
.calc-about > summary::after { content: "▾"; color: var(--text-dim); transition: transform .15s; }
.calc-about[open] > summary { margin-bottom: 12px; } .calc-about[open] > summary::after { transform: rotate(180deg); }
.calc-about > summary:hover, .calc-about > summary:focus-visible { border-color: var(--accent); }
.calc-about p { margin: 0 0 10px; }
.calc-about b { color: var(--text); }
.calc-about a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* T-773: the home page's h1, the calculator's own name, above its introduction. */
.intro-h1 { margin: 0 0 4px; font-size: clamp(var(--fs-num), 4vw, var(--fs-h1)); font-weight: 900; line-height: 1.3; color: var(--text); text-wrap: balance; }

/* Affiliate "find this unit" links (shop.js): one quiet line, never a banner. */
.shop { margin: 10px 0; font-size: var(--fs-ui); color: var(--text-dim); }
.shop a { font-weight: 600; }
.shop small { display: block; margin-top: 2px; font-size: var(--fs-xs); opacity: 0.8; }

/* Share this matchup */

/* ---------- recent winning lists ---------- */
.lists-section { margin-top: 18px; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.wl-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.wl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wl-place { font-weight: 800; font-size: var(--fs-body); white-space: nowrap; }
.wl-place small { font-weight: 600; color: var(--text-dim); font-size: var(--fs-xs); }
.wl-fac { font-weight: 700; font-size: var(--fs-ui); text-align: right; overflow-wrap: anywhere; }
.wl-det { color: var(--att-soft); font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.wl-sub { margin-top: 3px; overflow-wrap: anywhere;}
.wl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wl-actions .btn { font-size: var(--fs-sm); padding: 5px 9px; }
.wl-actions a.reset-btn { text-decoration: none; display: inline-flex; align-items: center; }
.wl-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.45; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin: 8px 0 0; max-height: 360px; overflow: auto; }
.lists-credit { color: var(--text-faint); font-size: var(--fs-xs); margin: 10px 0 0; line-height: 1.5; }

/* ---------- results breakdown: attrition funnel + dice charts ---------- */
.charts-col { min-width: 0; }
.breakdown { min-width: 0; background: var(--panel); border: 1px solid var(--border);}
.bd-panel { position: relative; padding: 12px 14px 14px; }
.bd-panel[hidden] { display: none; }
/* Classic: all five dice charts at once, three then two. */
.bd-charts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bd-charts .chart-card { grid-column: span 2; }
.bd-charts .chart-card:nth-child(n + 4) { grid-column: span 3; }
@media (max-width: 760px) { .bd-charts { grid-template-columns: 1fr; } .bd-charts .chart-card, .bd-charts .chart-card:nth-child(n + 4) { grid-column: auto; } }
/* The weapons firing, as a row of buttons right above the chart (T-124). One line that scrolls
   sideways on a phone; wraps on wider screens. */
.ws-row { padding: 10px 12px; border-bottom: 1px solid var(--border); }
/* T-139: a Shoot line and a Fight line; a gun's profiles as a switch on its chip. */
.ws-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-line + .ws-line, .ws-note + .ws-line { margin-top: 8px; }
.ws-note { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-faint); }
.ws-main { font: inherit; background: none; border: 0; color: inherit; padding: 0; display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer; }
.ws-chip { max-width: 100%; box-sizing: border-box; }
.ws-chip.ws-grp { padding-right: 4px; flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.ws-main { white-space: normal; text-align: left; }
.ws-prof { display: inline-flex; gap: 2px; padding: 2px; margin-left: 4px; border-radius: var(--r-pill); background: var(--bg); align-self: center; }
.ws-p { font: inherit; font-size: var(--fs-xs); font-weight: 700; padding: 3px 8px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-faint); cursor: pointer; }
.ws-p[aria-pressed="true"] { background: var(--att-grad); color: #fff; }
.ws-chip.ws-all { font-weight: 800; }
.ws-then { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); font-weight: 700; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); border: 1px solid var(--amber); cursor: pointer; white-space: nowrap; }
.ws-then input { width: 16px; height: 16px; accent-color: var(--amber); margin: 0; }
.ans-split { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: var(--fs-ui); color: var(--text-2); }
.as-bar { display: inline-flex; width: 90px; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--soft); flex: none; }
.as-bar i { display: block; height: 100%; }
.as-shoot { background: var(--att); } .as-fight { background: var(--att-soft); }
.carry { display: flex; flex-direction: column; gap: 4px; }
.carry-in { display: flex; gap: 4px; }
.carry-in input { width: 64px; }
.carry-all { padding: 4px 8px; font-size: var(--fs-sm); white-space: nowrap; }
.ws-lbl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); margin-right: 2px; }
.ws-chip { font: inherit; font-size: var(--fs-ui); font-weight: 600; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; cursor: pointer;
  color: var(--text-dim); background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 11px; }
.ws-chip small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-faint); }
.ws-chip .ws-ico { font-size: var(--fs-sm); opacity: 0.8; }
.ws-chip .ws-ico { display: inline-flex; vertical-align: -0.1em; margin-right: 4px; }
.ws-chip .ws-ico .glyph { width: 11px; height: 11px; }
.ws-chip:hover { color: var(--text); border-color: var(--att-soft); }
.ws-chip[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--att) 16%, transparent); border-color: var(--att); }
.ws-chip:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; }
@media (max-width: 560px) {
  .ws-row { padding: 8px; }
}
.bd-bar { display: flex; gap: 8px; border-bottom: 1px solid var(--border); padding-right: 8px;}
@media (max-width: 560px) { .bd-bar { flex-direction: column-reverse; align-items: stretch; padding: 8px 8px 0; } }

/* The support card (T-112): an occasional ask for a coffee, over the page. */
.support-pop { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, 0.55); }
.sc-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--amber); border-radius: var(--r-lg); box-shadow: 0 20px 50px var(--shadow); }
.sc-x { position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--soft); color: var(--text); font: inherit; font-size: var(--fs-lead); cursor: pointer; }
.sc-stage { position: relative; background: var(--panel-3); border-bottom: 1px solid var(--border); }
.sc-stage canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.sc-scheme { position: absolute; left: 10px; top: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 8px; }
.sc-body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.sc-body h2 { margin: 0; font-size: var(--fs-h2); font-weight: 900; padding-right: 30px; text-wrap: balance; }
.sc-body p { margin: 0; color: var(--text-dim); font-size: var(--fs-body); line-height: 1.45; }
.sc-body .sc-count { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-acts, .sc-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-acts .btn { text-decoration: none; }
.sc-link { border: 0; background: none; color: var(--text-faint); font: inherit; font-size: var(--fs-ui); text-decoration: underline; cursor: pointer; padding: 6px 2px; }
.sc-body .sc-note { font-size: var(--fs-sm); color: var(--text-faint); }

/* A roll's dice chart popped out over the funnel. */
.stage-pop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, 0.55); }
.sp-card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 20px 50px var(--shadow); padding: 10px 12px 12px; touch-action: pan-y; }
.sp-head { display: flex; align-items: center; gap: 6px; }
.sp-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-title { font-size: var(--fs-ui); font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--track); }
.sp-dots { display: flex; gap: 5px; }
.sp-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.sp-dots i.on { background: var(--def); }
.sp-nav, .sp-close { font: inherit; font-size: var(--fs-h2); line-height: 1; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--soft); color: var(--text); cursor: pointer; }
.sp-close { font-size: var(--fs-lead); }
.sp-body .chart-card, .sp-body { text-align: center; }
.sp-body svg { width: 100%; height: 140px; margin-top: 6px; display: block; }
.sp-hint { margin: 8px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-faint); }
/* T-1474P (Jordan, 29 Oct): a tab per step, By weapon under the chart; on a phone the popup is a sheet from the bottom. */
.sp-tabs { display: flex; gap: 4px; margin: 8px 0 2px; overflow-x: auto; scrollbar-width: none; }
.sp-tabs button { flex: 1 0 auto; min-height: 36px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; white-space: nowrap; }
.sp-tabs button[aria-selected="true"] { background: var(--def-fill); border-color: var(--def); color: #fff; }
.sp-tabs button:focus-visible, .sp-byw:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.stage-pop:has(.sp-tabs button) .sp-dots { display: none; }
.sp-byw { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: var(--fs-ui); font-weight: 700; color: var(--text); cursor: pointer; }
.sp-byw input { width: 18px; height: 18px; accent-color: var(--def); }
.stage-pop.no-byw .sp-body .share { display: none; }
@media (max-width: 899px) {
  .stage-pop { place-items: end center; padding: 0; }
  .sp-card { width: 100%; max-height: 86vh; max-height: 86dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; padding: 12px max(14px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); animation: ml-in 0.18s ease-out; }
  .sp-body svg { height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .sp-card { animation: none; } }
/* T-1477P: the phone's in-place chart: over the numbers card at its size (app.js placeStagePop), a compact head, the step's
   averages in one line, the chart; By weapon adds the step's details and each weapon's part, the card growing to the docked numbers. */
.stage-pop.sp-in { place-items: start; padding: 0; background: rgba(2, 6, 23, 0.18); }
.stage-pop.sp-in .sp-card { position: fixed; top: var(--sp-top); left: var(--sp-left); width: var(--sp-w); min-height: var(--sp-h); max-height: var(--sp-max); border: 2px solid var(--def); border-radius: var(--r-lg);
  padding: 6px 10px 8px; display: flex; flex-direction: column; animation: sp-in 0.16s ease-out; }
@keyframes sp-in { from { opacity: 0; transform: scale(0.98); } }
.stage-pop.sp-in .sp-head .sp-nav, .stage-pop.sp-in .sp-head .sp-close { width: 32px; height: 32px; font-size: 18px; }
.stage-pop.sp-in .sp-tabs { margin: 2px 0 0; }
.stage-pop.sp-in .sp-tabs button { min-height: 30px; padding: 0 6px; font-size: 13px; }
.stage-pop.sp-in .sp-body { flex: 1 1 auto; padding: 4px 6px; }
.stage-pop.sp-in.no-byw .sp-body > :is(.title, .target, .conv, .mean) { display: none; }
.stage-pop.sp-in .sp-body > .stats-line { margin: 2px 0; }
.stage-pop.sp-in .sp-body svg { height: 150px; }
.stage-pop.sp-in .sp-hint { display: none; }
.stage-pop.sp-in .sp-byw { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .stage-pop.sp-in .sp-card { animation: none; } }
.flow-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); color: var(--text-dim); margin: 8px 0; }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { display: inline-block; width: 14px; height: 12px; border-radius: var(--r-sm); }
.k-core { background: linear-gradient(90deg, var(--c0), var(--c2), var(--c5)); }
.k-avg { border-top: 2px solid var(--c2); border-bottom: 2px solid var(--c2); background: color-mix(in srgb, var(--c2) 50%, transparent); }
.k-haze { background: color-mix(in srgb, var(--c2) 20%, transparent); }
.flow { position: relative; width: 100%; min-height: 260px; }
.flow svg { display: block; overflow: visible; }
.flow canvas { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; }
.flow text { font-family: inherit; }
/* T-1352P: the footers' Armies row (build_pages.js footArmies), every army's tier list. */
.foot-armies { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0; font-size: var(--fs-sm); color: var(--text-faint); }
.foot-armies .fa-h { font-weight: 700; color: var(--text-dim); }
.foot-armies a { color: var(--text-dim); text-decoration: none; }
.foot-armies a:hover { color: var(--text); text-decoration: underline; }
/* T-1377P (the 26 Oct review: the 36 links took most of a phone screen on every page): on phones one "All 36 armies" button
   shows them; they stay in the page for search engines. */
.fa-more { display: none; font: inherit; font-weight: 700; color: var(--text-dim); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 760px) { .fa-more { display: inline; } .foot-armies:not(.open) a { display: none; } .foot-armies.open .fa-more { display: none; } }
/* T-1245B (Jordan, 20 Oct): in the calculator's centred footer the row is centred too, as wide as the lines above it. */
.footer .foot-armies { justify-content: center; max-width: 640px; margin: 10px auto; }
/* T-1352P: the distribution charts' counts, under the bars in 12 px text (app.js renderChartSVG). */
.svg-wrap { position: relative; }
.svg-y { position: absolute; right: 2px; font-size: var(--fs-12); line-height: 1; color: var(--gold); opacity: 0.85; font-variant-numeric: tabular-nums; pointer-events: none; }
.svg-y.t { top: 2px; } .svg-y.b { bottom: 2px; }
.svg-key { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font-size: var(--fs-12); color: var(--text-dim); }
.svg-key i { width: 14px; height: 2px; border-radius: 1px; background: var(--gold); }
.svg-x { display: flex; padding: 2px 1.5% 0; font-size: var(--fs-12); line-height: 1.2; color: var(--svg-label); font-variant-numeric: tabular-nums; }
.svg-x span { flex: 1 1 0; min-width: 0; text-align: center; overflow: visible; white-space: nowrap; }
.flow .stage { fill: var(--text-dim); font-size: var(--fs-xs); font-weight: 600; }
.flow .stage.narrow { font-size: var(--fs-micro); }
.flow .stage-v { fill: var(--text); font-size: var(--fs-ui); font-weight: 800; }
.flow .gate { fill: var(--text-faint); font-size: var(--fs-xs); font-weight: 600; }
.flow .gate-v { fill: var(--text); font-size: var(--fs-sm); font-weight: 800; }
.flow .gate-v.long { font-size: var(--fs-12); }   /* "mixed" on a phone, when weapons need different rolls: the funnel's drawing is laid out for 10 (T-791); the one size under 12 left (T-1065S) */
.flow .gate-line { stroke: var(--text-faint); stroke-opacity: 0.55; stroke-width: 1; }
.flow .lost { fill: var(--text-faint); font-size: var(--fs-xs); font-weight: 700; }
.flow .hit { cursor: pointer; outline: none; }
.flow .hit.on, .flow .hit:focus-visible { fill: var(--text); fill-opacity: 0.05; }
.flow-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: var(--fs-sm); color: var(--text-dim); box-shadow: 0 6px 18px var(--shadow-sm); min-width: 160px; }
.flow-tip b { color: var(--text); font-size: var(--fs-lead); }
.flow-tip .muted { color: var(--text-faint); margin-top: 2px; }
.flow-tbl { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-dim); }
.flow-tbl summary { cursor: pointer; color: var(--text-faint); }
.flow-tbl table { border-collapse: collapse; margin-top: 6px; width: 100%; font-variant-numeric: tabular-nums; }
.flow-tbl th, .flow-tbl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.flow-tbl th { color: var(--text-faint); font-weight: 600; }
.so-caption { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.so-caption[hidden] { display: none; }
.so-actions { display: flex; gap: 6px; margin-left: auto; }
.so-actions [hidden] { display: none; }
.so-actions .btn { font-size: var(--fs-sm); padding: 5px 10px; }
/* To the death (T-214): while the target strikes back, the attacker's funnel steps back. */
#flow svg { transition: opacity .25s; }
#flow.so-back svg { opacity: .28; }

/* ---------- saved lists (in an empty roster slot) ---------- */
.lib { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.lib-head { font-size: var(--fs-micro); font-weight: 800; color: var(--text-faint); letter-spacing: 1px; margin-bottom: 4px; }
.lib-row { display: flex; align-items: stretch; gap: 4px; }
.lib-load { flex: 1; min-width: 0; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 5px 8px; cursor: pointer; color: var(--text); }
.lib-load:hover { background: var(--panel-2); border-color: var(--border); }
.lib-name { display: block; font-weight: 600; font-size: var(--fs-ui); overflow-wrap: anywhere; }
.lib-sub { display: block; font-size: var(--fs-xs); color: var(--text-dim); }
.lib-del { background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 0 8px; font-size: var(--fs-ui); border-radius: var(--r-sm); }
.lib-del:hover { color: var(--red); background: var(--panel-2); }
.lib-more { margin-top: 4px; }

/* ---------- points changed since last visit ---------- */
.pts-notice { position: relative; background: color-mix(in srgb, var(--amber) 14%, var(--panel)); border: 1px solid var(--amber); border-radius: var(--r-md); padding: 8px 34px 8px 10px; margin: 0 0 8px; font-size: var(--fs-ui); }
.pts-notice ul { margin: 4px 0 0; padding-left: 18px; }
.pts-notice li { margin: 1px 0; }
.pts-notice .up { color: var(--red); }
.pts-notice .down { color: var(--green); }
.pts-delta { color: var(--text-dim); font-weight: 600; }
.pts-notice [data-pts-dismiss] { position: absolute; top: 6px; right: 6px; }

/* ---------- first-visit welcome ---------- */
.welcome { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg, #0b1120) 70%, transparent); backdrop-filter: blur(3px); }
.w-card { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; box-shadow: 0 20px 50px var(--shadow); text-align: center; }
.w-brand { font-weight: 900; letter-spacing: 1px; font-size: var(--fs-lead); color: var(--att-soft); }
.w-brand .w-emblem { height: 30px; vertical-align: middle; margin: -4px 6px 0 0; }
.w-brand small { display: block; font-size: var(--fs-xs); letter-spacing: var(--track); color: var(--text-dim); font-weight: 700; text-transform: uppercase; margin-top: 2px; }
.w-card h2 { margin: 14px 0 6px; font-size: var(--fs-h2); }
.w-lede { color: var(--text-dim); font-size: var(--fs-body); margin: 0 0 16px; line-height: 1.5; }
.w-sides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .w-sides { grid-template-columns: 1fr; } }
.w-side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 10px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: var(--fs-lead); }
.w-side:hover, .w-side:focus-visible { border-color: var(--att); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--att) 25%, transparent); }
.w-icon { font-size: var(--fs-h1); display: flex; align-items: flex-end; justify-content: center; min-height: 56px; }
.w-icon .w-fig { display: block; image-rendering: pixelated; max-height: 56px; width: auto; }
.w-side small { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.35; }
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.w-army { padding: 10px 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 700; font-size: var(--fs-ui); }
.w-army:hover, .w-army:focus-visible { border-color: var(--att); outline: none; }
.w-back { display: block; margin: 10px 0 0; background: none; border: none; color: var(--att-soft); cursor: pointer; font-size: var(--fs-ui); padding: 0; }
.w-skip { margin-top: 16px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-ui); text-decoration: underline; }
/* ---------- the BETA strip, "what's new" and feedback (T-184, T-064) ---------- */
.beta-strip { display: flex; align-items: center; gap: 10px; margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter); min-height: var(--h-md); box-sizing: border-box;
  border-bottom: 1px solid var(--amber); color: var(--text); font-size: var(--fs-ui);
  border-image: linear-gradient(to top, var(--amber) 1px, var(--warn-bg) 1px) fill 0 / 0 / 0 100vmax; }
html.beta-host .beta-strip + .topbar { margin-top: 0; }
/* T-1612P (Jordan, 4 Nov: "any vertical dead space from the top header that can be removed"): 6 px under the bar on the calculator in the
   phone battle layout, not 16. */
@media (max-width: 899px) { html.ml-battle:has(#calc.view-on) .topbar { margin-bottom: 6px; } }
/* The strip is the beta site's alone (T-780): tacticalreroll.com and local copies go without it. */
html:not(.beta-host) .beta-strip { display: none; }
.bs-tag { flex: none; padding: 2px 7px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.08em; }
.bs-txt { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-short { display: none; }
.bs-btn { flex: none; min-height: var(--h-sm); padding: 3px 10px; border-radius: var(--r-md); border: 1px solid var(--amber); background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.bs-fb { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
@media (max-width: 760px) { .bs-long { display: none; } .bs-short { display: inline; } .beta-strip { gap: 6px; padding: 5px 10px; } .bs-btn { padding: 3px 8px; } }
/* Phones in the new layout (T-270, Jordan 28 Sep): just BETA and Feedback; What's new, the
   tour and the layout switch are in the ⋯ menu. Classic keeps its switch (its only way back). */
@media (max-width: 760px) {
  html[data-layout="new"] .beta-strip .bs-txt, html[data-layout="new"] #stripNews { display: none; }
  html[data-layout="new"] .beta-strip { justify-content: space-between; }
}
@media (max-width: 560px) { .bs-txt { display: none; } .beta-strip { justify-content: flex-end; flex-wrap: wrap; row-gap: 4px; gap: 5px; } .bs-tag { margin-right: auto; } .bs-btn { font-size: var(--fs-sm); padding: 3px 7px; } }
.news, .fb-sheet { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg, #0b1120) 70%, transparent); backdrop-filter: blur(3px); }
.fb-sheet { z-index: 46; }
.fb-back { position: absolute; inset: 0; }
.nw-card, .fb-card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; background: var(--panel);
  border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--r-lg); padding: 20px; box-shadow: 0 20px 50px var(--shadow); }
.nw-x, .fb-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--text-dim); font-size: var(--fs-h3); cursor: pointer; border-radius: var(--r-md); }
.nw-kicker, .fb-kicker { font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.08em; color: var(--text-dim); }
.nw-card h2, .fb-card h2 { margin: 6px 40px 8px 0; font-size: var(--fs-h2); line-height: 1.25; }
.nw-p, .fb-p { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); }
.nw-small { font-size: var(--fs-ui); }
.nw-sub { margin: 4px 0 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
.nw-list { margin: 0 0 14px; padding-left: 18px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.nw-list li + li { margin-top: 5px; }
.nw-all { margin: -4px 0 12px; font-weight: 800; } .nw-all a { color: var(--accent); }   /* T-1863P */
/* T-1244B: several dated entries scroll inside the card, the page held still behind it; dvh so a phone's toolbars don't hide its foot. */
.nw-card { max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
.nw-list + .nw-sub { margin-top: 2px; }
.nw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-go, .fb-go { flex: 1; min-height: var(--h-lg); padding: 0 16px; border: 0; border-radius: var(--r-md); background: var(--accent-fill); color: var(--on-accent); font: inherit; font-size: var(--fs-lead); font-weight: 800; cursor: pointer; }
.nw-fb { flex: 1; min-height: var(--h-lg); padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.fb-go { width: 100%; }
.fb-go[disabled] { opacity: 0.6; cursor: wait; }
.fb-form { display: flex; flex-direction: column; gap: 12px; }
.fb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fb-type { min-height: var(--h-lg); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.fb-type[aria-checked="true"] { border-color: var(--pick-bd); background: var(--pick-bg); }
.fb-l { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); }
.fb-l textarea, .fb-l input { font: inherit; font-size: var(--fs-lead); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-3); color: var(--text); resize: vertical; }
.fb-note { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-faint); }
.fb-alt { margin-top: 12px; }
:root[data-theme="light"] .nw-kicker, :root[data-theme="light"] .fb-kicker { color: var(--accent); }
:root[data-theme="light"] .bs-tag, :root[data-theme="light"] .bs-fb, :root[data-theme="light"] .nw-go, :root[data-theme="light"] .fb-go { color: #fff; }
.lists-title { margin: 4px 0 10px; font-size: var(--fs-body); font-weight: 800; color: var(--text-dim); }

/* Army vs Army sources (T-133): List · Faction · Unit type on each side, the unit-type chips
   and the note under them. */
.src-tabs { display: flex; gap: 2px; background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px; margin: 6px 0 10px; }
.src-tabs button { flex: 1; font: inherit; font-size: var(--fs-ui); font-weight: 700; border: none; background: none; color: var(--text-dim); padding: 5px 8px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.src-tabs button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px var(--shadow-sm); }
.src-tabs button:focus-visible, .src-types button:focus-visible, .src-link:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; }
.src-pick { display: grid; gap: 8px; margin-bottom: 8px; }
.src-pick select { width: 100%; }
.src-types { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.src-types button { flex: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--border); background: var(--soft); color: var(--text-dim); border-radius: var(--r-pill); padding: 4px 10px; cursor: pointer; }
.src-types button[aria-pressed="true"] { color: var(--text); border-color: var(--att); background: color-mix(in srgb, var(--att) 14%, transparent); }
.src-note { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-faint); }
.src-link { font: inherit; font-size: var(--fs-sm); border: none; background: none; padding: 0; color: var(--att); text-decoration: underline; cursor: pointer; }
.roster-unit.loading { opacity: 0.6; cursor: progress; }

/* The volley's bullet colours, one per weapon firing (T-136). */
.so-key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: 8px; }
.so-key span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.so-key i { width: 12px; height: 4px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }

/* ---------- the compact layout (T-140, T-141, T-143; the default since T-146) ---------- */
.src-tabs .st-short { display: none; }
/* 1: one card. The answer on top, then the funnel, which carries each roll's average and range;
   the roll tabs and the line of numbers under the answer go (a bar opens its dice chart). */
.main-layout { gap: 0; }
.answer { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none; padding-bottom: 6px; gap: 8px; }
/* 🎲 Roll a volley · 🎬 On on the left, Funnel / Classic on the right, one line (T-141). */
.bd-bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 6px 8px; }
.bd-bar .so-actions { display: flex; gap: 6px; margin-left: 0; }
.bd-bar .btn { min-height: var(--h-sm); font-size: var(--fs-sm); padding: 0 10px; white-space: nowrap; }
.breakdown:has(#bdFlow[hidden]) .so-actions { visibility: hidden; }
.bd-panel { padding-top: 6px; }
.flow-legend { margin-top: 0; }
/* T-368 (Jordan, 29 Sep): only 🔗 sits top right; the wipe warning is a row of its own, so it
   never lands on "This roll". T-517 (Jordan, 1 Oct): Post GIF sits beside Share there, the same pill. */
.ans-foot { position: static; justify-content: flex-start; }
.answer .ans-acts { position: absolute; right: 14px; top: 12px; display: flex; gap: 6px; }
.answer { position: relative; }
#shareBtn::before { font-size: var(--fs-body);}
#ansSafe:empty { display: none; }
.flow .stage-r { fill: var(--text-faint); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The pinned matchup, as a compact funnel that stays while you pick units further down (T-141). */
/* 2: Army vs Army, one line per target: 🎯 ranged and ⚔️ melee as a share of the unit slain. */
.cmp-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
/* Each share keeps room for its label; a joined leader's share wraps below when the column is narrow. */
.cm-m { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 56px; max-width: 150px; }
.cm-m .cmp-bar { min-width: 20px; }
.cm-m.none { opacity: 0.45; }
.cm-i { font-size: var(--fs-xs); }
.cm-i .ico { margin-right: 0; }
.cm-p { width: 32px; text-align: right; color: var(--text-dim); font-weight: 700; }
.cm-pts { margin-left: auto; color: var(--text-dim); white-space: nowrap; font-size: var(--fs-xs); }
.cm-m:nth-child(2) .cmp-bar i { background: var(--def); }
.roster-unit.expanded .cmp-mini { display: none; }
.cmp-detail-panel { margin-top: 0; background: var(--panel); border: 1px solid var(--def); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-ui); }
.cmp-detail-panel[hidden] { display: none; }
.cd-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cd-head .ru-sub { display: inline; }
.cd-head .reset-btn { margin-left: auto; }
.cd-mini { display: none; font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-detail-panel { display: none; }
/* 3: phones, attacker and defender side by side. The cards show the unit and what fires; Edit
   weapons and Edit defender open their sheets (T-190). */
@media (max-width: 760px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 8px 5px; }
  .mods-card { padding: 8px 10px; }
  .setup-col { padding: 8px 8px 6px; border-radius: var(--r-md); }
  .setup-col .side-label { font-size: var(--fs-xs); letter-spacing: 0.04em; margin-bottom: 4px; }
  .setup-col select { font-size: var(--fs-sm); padding: 4px 5px; margin-bottom: 4px; }
  .setup-col .statline { padding: 3px 2px; gap: 1px; margin-bottom: 4px; }
  .setup-col .statline .stat .v { font-size: var(--fs-sm); }
  .setup-col .statline .stat .k { font-size: var(--fs-micro); }
  /* What fires, by name: the stats are one tap away in Edit weapons. */
  .fr { grid-template-columns: minmax(0, 1fr); padding: 3px 6px; border-radius: var(--r-sm); }
  .fr-k, .fr-s { display: none; }
  .side-bar { gap: 4px 6px; padding-top: 4px; }
  .side-bar .wr-summary { display: none; }
  .pop-btn { font-size: var(--fs-sm); padding: 6px 8px; flex: 1 1 100%; }
  .side-models { font-size: var(--fs-xs); margin-left: 0; width: 100%; justify-content: space-between; }
  .side-models input { width: 52px; height: 28px; font-size: var(--fs-sm); }
  .setup-swap { align-self: start; margin-top: 44px; }
  #swapBtn { width: 26px; height: 26px; padding: 0; border-radius: var(--r-md); font-size: var(--fs-ui); }
  #swapBtn span:not(:first-child) { display: none; }
  .ans-num { font-size: var(--fs-hero); }
  .ans-of { font-size: var(--fs-lead); }
  .flow-legend { font-size: var(--fs-xs); gap: 2px 10px; margin: 4px 0; }

  /* Army vs Army: two columns once rows are one line; the tapped target's breakdown sits below. */
  .roster-grid { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px 4px; }
  .roster-grid:has(.roster-empty), .roster-grid.expand-all { grid-template-columns: minmax(0, 1fr); }
  .roster-grid:not(:has(.roster-empty)):not(.expand-all) .roster-swap { order: 0; padding-top: 34px; }
  .roster-grid:not(:has(.roster-empty)):not(.expand-all) #rosterSwap { width: 22px; padding: 6px 0; font-size: var(--fs-sm); }
  .roster-grid:not(:has(.roster-empty)):not(.expand-all) #rosterSwap span { display: none; }
  .roster-grid:not(.expand-all) .roster-col { padding: 7px 6px; }
  .roster-grid:not(.expand-all) .side-label { font-size: var(--fs-xs); margin-bottom: 2px; }
  .roster-grid:not(.expand-all) .src-tabs { margin: 4px 0 6px; }
  .roster-grid:not(:has(.roster-empty)):not(.expand-all) .src-tabs .st-long { display: none; }
  .roster-grid:not(:has(.roster-empty)):not(.expand-all) .src-tabs .st-short { display: inline; }
  .roster-grid:not(.expand-all) .src-tabs button { font-size: var(--fs-xs); padding: 4px 2px; min-width: 0; }
  .roster-grid:not(.expand-all) .roster-unit { padding: 5px 4px; font-size: var(--fs-sm); }
  .roster-grid:not(.expand-all) .ru-sub { font-size: var(--fs-micro); }
  .roster-grid:not(.expand-all) .ru-pts { font-size: var(--fs-xs); }
  .roster-grid:not(.expand-all) .ru-top { gap: 4px; align-items: flex-start; }
  .roster-grid:not(.expand-all) .roster-name { font-size: var(--fs-ui); }
  .roster-grid:not(.expand-all) .roster-meta, .roster-grid:not(.expand-all) .roster-role { font-size: var(--fs-micro); }
  .roster-grid:not(.expand-all) .roster-head { flex-wrap: wrap; gap: 2px 6px; }
  .roster-grid:not(.expand-all) .det-pick select, .roster-grid:not(.expand-all) .src-pick select { font-size: var(--fs-xs); padding: 3px 4px; }
  .roster-grid:not(.expand-all) .src-types button { font-size: var(--fs-xs); }
  .roster-grid:not(.expand-all) .src-note { font-size: var(--fs-xs); }
  .roster-grid:not(.expand-all) .att-badge, .roster-grid:not(.expand-all) .best-badge { font-size: var(--fs-micro); margin-left: 0; }
  .roster-grid:not(.expand-all) .cmp-mini { gap: 4px; font-size: var(--fs-xs); }
  .roster-grid:not(.expand-all) .cm-p { width: 26px; }
  .roster-grid:not(.expand-all) .cm-m { min-width: 50px; }
  .roster-grid:not(.expand-all) .cm-pts { display: none; }
  .roster-grid:not(.expand-all) .roster-unit.expanded .cmp-mini { display: flex; }
  .roster-grid:not(.expand-all) .cmp-inline { display: none; }
  /* A tapped target's breakdown: a sheet along the bottom of the screen, above the tabs, while
     the lists are on screen (T-143). Tap other units and it follows; ✕ closes it. */
  .roster-grid:not(.expand-all) .cmp-detail-panel:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: calc(54px + env(safe-area-inset-bottom, 0px)); z-index: 15;
    max-height: 38svh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 12px 10px; font-size: var(--fs-sm);
    border: 1px solid var(--def); border-bottom: none; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -10px 28px var(--shadow);
    transition: transform 0.2s ease, visibility 0.2s;
  }
  .roster-grid:not(.expand-all) .cmp-detail-panel.away { transform: translateY(calc(100% + 80px)); visibility: hidden; }
  .cmp-detail-panel .cd-head { position: sticky; top: 0; background: var(--panel); margin: 0 -12px 4px; padding: 10px 12px 6px; z-index: 1; border-bottom: 1px solid var(--border); }
  .cmp-detail-panel .cd-head { cursor: pointer; }
  .cmp-detail-panel .cd-head b { font-size: var(--fs-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmp-detail-panel .cd-head .ru-sub { white-space: nowrap; }
  .cmp-detail-panel.min .cd-body { display: none; }
  .cmp-detail-panel.min { padding-bottom: 0; }
  .cmp-detail-panel.min .cd-head { margin-bottom: 0; border-bottom: none; }
  .cmp-detail-panel.min .cd-mini { display: inline; }
  .roster-section:has(.cmp-detail-panel.min:not([hidden])) { padding-bottom: 60px; }
  .cmp-detail-panel .cd-head::before { content: ""; position: absolute; left: 50%; top: 4px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border); }
  /* Room under the lists so the sheet never hides the last units. */
  .roster-section:has(.cmp-detail-panel:not([hidden])) { padding-bottom: 38svh; }
  @media (prefers-reduced-motion: reduce) { .cmp-detail-panel { transition: none; } }
  .bd-bar { padding: 6px; gap: 4px; }
  .bd-bar .btn { font-size: var(--fs-xs); padding: 4px 7px; }
  .bd-bar .so-actions { gap: 4px; }
  .cmp-detail-panel .cmp-weps { padding-left: 6px; }
  .roster-grid:not(.expand-all) #roster1 .roster-unit.expanded { border-color: var(--def); background: color-mix(in srgb, var(--def) 12%, var(--panel)); }
}

/* Text for screen readers only: the answer's line of numbers, which the funnel shows as a picture. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- characters joined to the target (T-145) ---------- */
.joins { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.join-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; padding: 5px 4px 6px 8px; border-radius: var(--r-md); background: var(--lead-bg); font-size: var(--fs-sm); }
.join-role { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--lead); }
.join-x { border: 0; background: none; color: var(--text-dim); font-size: var(--fs-body); line-height: 1; padding: 2px 5px; border-radius: var(--r-sm); cursor: pointer; }
.join-x:hover { color: var(--red); }
.join-n { grid-column: 1 / -1; font-weight: 700; font-size: var(--fs-ui); min-width: 0; overflow-wrap: anywhere; }
.join-st { grid-column: 1 / -1; color: var(--text-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.join-adds { display: flex; flex-wrap: wrap; gap: 6px; }
.join-add { border: 1px dashed var(--lead); color: var(--lead); background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); cursor: pointer; }
.join-add[aria-expanded="true"] { background: var(--lead-bg); border-style: solid; }
.join-menu { border: 1px solid var(--border); background: var(--panel); border-radius: var(--r-md); box-shadow: 0 6px 20px var(--shadow); overflow: hidden; max-height: 260px; overflow-y: auto; }
.join-mh { font-size: var(--fs-xs); color: var(--text-faint); padding: 6px 10px 4px; }
.join-menu button { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: baseline; column-gap: 8px; row-gap: 2px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: var(--fs-ui); padding: 7px 10px; cursor: pointer; text-align: left; }
.join-menu button:hover, .join-menu button:focus-visible { background: var(--lead-bg); }
.join-menu small { color: var(--text-dim); white-space: nowrap; }
.ans-lead { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
.ans-lead-l { font-size: var(--fs-body); padding: 6px 10px; border-radius: var(--r-md); background: var(--lead-bg); }
.ans-lead-l b { color: var(--lead); font-variant-numeric: tabular-nums; }
/* Under the battle (T-342): the answer in the breakdown's own card, this roll first in the funnel's
   colours (Dmg, Slain), the average, then every roll's wounds so far. */
.breakdown { border-radius: var(--r-lg); }
.breakdown .answer { border: none; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; margin-top: 6px;}
.ans-roll { font-size: var(--fs-h3); font-weight: 800; padding-right: 96px; }
.stats-line { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 14px; }
.stats-line span { white-space: nowrap; }
.ans-roll b { font-size: var(--fs-num); font-weight: 900; font-variant-numeric: tabular-nums; }
.ans-roll .r-dmg { color: var(--c4); } .ans-roll .r-slain { color: var(--c5); }
.ans-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); margin-right: 8px; align-self: center; }
.ans-roll:not([hidden]) ~ .ans-big .ans-num { font-size: var(--fs-h1); }
.ans-tally { font-size: var(--fs-ui); color: var(--text-2); }
.ans-tally .t-list { font-weight: 700; color: var(--c4); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Tight (Jordan, 29 Sep: "still WAY too large"): four short lines, the numbers only a little bigger. */
.breakdown .answer { gap: 3px; padding: 8px 10px 6px; }
.breakdown .answer .ans-acts { top: 6px; right: 8px; }
.breakdown .act-pill, .breakdown #shareBtn { font-size: var(--fs-sm); padding: 3px 8px; }
.breakdown .ans-roll { font-size: var(--fs-body); font-weight: 700; padding-right: 80px; line-height: 1.3; }
.breakdown .ans-roll b { font-size: var(--fs-h3); }
.breakdown .ans-big { gap: 6px; padding-right: 80px; row-gap: 0; }
.breakdown .ans-big .ans-num, .breakdown .ans-roll:not([hidden]) ~ .ans-big .ans-num { font-size: var(--fs-num); letter-spacing: 0; }
.breakdown .ans-of { font-size: var(--fs-h3); font-weight: 800; color: var(--text); }
/* T-938: the answer wins by weight and colour, not size (Jordan, 29 Sep: "still WAY too large"): the average sits in a band
   of the slain colour, a rule down its left, so the eye lands there before the funnel's and the charts' numbers. */
.breakdown .ans-big { background: color-mix(in srgb, var(--c5) 10%, transparent); border-left: 3px solid var(--c5); border-radius: var(--r-sm); padding-block: var(--s-2); padding-left: var(--s-3); margin: var(--s-1) 0; }
.breakdown .ans-roll:not([hidden]) ~ .ans-big { padding-right: var(--s-3); }
.breakdown .ans-big .ans-k { color: var(--c5); }
@media (max-width: 560px) { .breakdown .ans-of { font-size: var(--fs-body); } }
.breakdown .ans-range { font-size: var(--fs-sm); }
/* On the answer's green tint the faint grey fell to 4.2:1 in the dark theme (T-1008W): a step up. */
.breakdown .ans-big .ans-range { color: var(--text-dim); }
/* T-942: what SIMULATE does, under the answer until the first roll (then "This roll" says it). */
.ans-hint { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.ans-roll:not([hidden]) ~ .ans-hint { display: none; }
.breakdown .ans-k { font-size: var(--fs-micro); margin-right: 0; }
.breakdown .ans-split { margin: 0; font-size: var(--fs-sm); }
.breakdown .as-bar { width: 64px; height: 6px; }
.breakdown .ans-tally { font-size: var(--fs-sm); }
.breakdown .ans-meter { display: none; }
.breakdown .ans-haz { font-size: var(--fs-sm); padding: 4px 8px; margin: 2px 0; }
/* To the death, just as tight: the chance as the headline, one bar, one line of key. */
.breakdown .answer.death .ans-num { font-size: var(--fs-num); }
.answer.death .ans-k { display: none; }
.breakdown .ans-death { gap: 3px; margin: 2px 0 0; }
.breakdown .d-bar { height: 7px; }
.breakdown .d-key { font-size: var(--fs-sm); gap: 1px 10px; }
.breakdown .d-key .sw { width: 8px; height: 8px; margin-right: 4px; }
.breakdown .d-note { font-size: var(--fs-sm); line-height: 1.35; }
.breakdown .d-turns summary { font-size: var(--fs-sm); }
/* Hazardous (T-340): what the attack's hazard rolls cost the unit. */
.ans-haz { font-size: var(--fs-body); padding: 6px 10px; margin: 4px 0 2px; border-radius: var(--r-md); background: var(--warn-bg); }
.ans-haz b { color: var(--red); font-variant-numeric: tabular-nums; }
.join-ws { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.join-ws .join-st { width: auto; }
.join-w { border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); font: inherit; font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); cursor: pointer; }
.join-w[aria-pressed="true"] { border-color: var(--lead); color: var(--text); font-weight: 700; }
.join-pick { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-dim); }
.join-pick select { font: inherit; font-size: var(--fs-sm); padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); max-width: 100%; }
.ru-joined { color: var(--lead); }
.ru-split { align-self: flex-start; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-sm); padding: 0 4px 4px; margin-top: -2px; cursor: pointer; text-decoration: underline; }
.ru-join { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); padding: 0 4px 4px; margin-top: -2px; }
.ru-join select { font: inherit; font-size: var(--fs-sm); padding: 2px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); max-width: 100%; min-width: 0; }
.cm-lead { font-size: var(--fs-xs); font-weight: 700; color: var(--lead); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-lead { display: block; font-size: var(--fs-sm); color: var(--lead); margin-top: 4px; }

/* The beta site's marker (T-179): shown only on beta.tacticalreroll.com and *.pages.dev. */
/* The beta site (T-179): the strip's tag reads BETA SITE, in purple, so it never covers the page. */
.beta-host .bs-tag { background: var(--def-fill); color: #fff; }
.beta-host .bs-tag::after { content: " SITE"; }
@media (max-width: 560px) { .beta-host .bs-tag::after { content: none; } }

/* Supporter sign-in sheet (T-116): a bottom sheet on phones, a centred card on wider screens. */
.sup-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.sup-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.sup-card { position: relative; width: 100%; max-width: 440px; box-sizing: border-box; background: var(--panel); color: var(--text); border-top: 2px solid var(--gold); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px var(--shadow); }
@media (min-width: 761px) { .sup-sheet { align-items: center; } .sup-card { border-radius: var(--r-lg); border: 1px solid var(--border); border-top: 2px solid var(--gold); } }
.sup-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--text-dim); font-size: var(--fs-h3); cursor: pointer; border-radius: var(--r-md); }
.sup-kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--gold); }
.sup-card h2 { margin: 6px 0 8px; font-size: var(--fs-h2); }
.sup-p { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.sup-form { display: flex; flex-direction: column; gap: 12px; }
.sup-l { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }
.sup-l input { font: inherit; font-size: var(--fs-lead); padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-3); color: var(--text); }
.sup-l input.sup-code { font-size: var(--fs-num); letter-spacing: 0.3em; text-align: center; }
.sup-go { min-height: var(--h-lg); border: 0; border-radius: var(--r-md); background: var(--gold); color: var(--on-accent); font: inherit; font-size: var(--fs-lead); font-weight: 800; cursor: pointer; }
.sup-go[disabled] { opacity: 0.6; cursor: wait; }
.sup-ghost { margin-top: 8px; width: 100%; min-height: var(--h-lg); border: 1px solid var(--border); border-radius: var(--r-md); background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sup-chip { padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.sup-chip.gold { border-color: var(--amber); color: var(--gold); background: var(--warn-bg); }
.sup-note { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.5; }
.sup-msg { margin: 12px 0 0; font-size: var(--fs-ui); color: var(--red); }
.sup-ok { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 700; color: var(--gold); }
.sup-l input.sup-gift { font-size: var(--fs-h2); letter-spacing: var(--track); text-align: center; text-transform: uppercase; }
:root[data-theme="light"] .sup-kicker, :root[data-theme="light"] .sup-chip.gold, :root[data-theme="light"] .sup-ok { color: #8a6100; }

/* ---------- what fires, and the Edit weapons / Edit defender popouts (T-190) ---------- */
.fr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 5px 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--att) 9%, transparent); }
.fr.melee { background: color-mix(in srgb, var(--amber) 11%, transparent); }
.fr-k { font-size: var(--fs-xs); font-weight: 800; color: var(--att); white-space: nowrap; }
.fr.melee .fr-k { color: var(--amber); }
.fr-n { font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.fr-n small { color: var(--text-faint); font-weight: 600; }
.fr-s { color: var(--text-dim); font-size: var(--fs-sm); white-space: nowrap; }
.fr-j { grid-template-columns: 64px minmax(0, 1fr); background: var(--soft); }
.fr-none { margin: 4px 0; color: var(--text-dim); font-size: var(--fs-ui); }
@media (max-width: 1099px) { .fr-s { grid-column: 2; white-space: normal; } }
.side-bar { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-top: 8px; }
.pop-btn { font-size: var(--fs-ui); padding: 7px 14px; border-radius: var(--r-pill); border-color: var(--att); background: color-mix(in srgb, var(--att) 14%, transparent); }
.pop-btn.def { border-color: var(--def); background: color-mix(in srgb, var(--def) 14%, transparent); }
.side-bar .wr-summary { flex: 1; }
.side-models { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); }
.side-models input { width: 58px; height: 32px; background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 6px; font-size: var(--fs-ui); }
/* The popout lies over its card (and whatever is under it), the page still live beside it. */
.pop { position: absolute; top: -1px; left: -1px; z-index: 15; width: max(calc(100% + 2px), min(660px, calc(100vw - 32px))); }
.pop.def { left: auto; right: -1px; }
@media (min-width: 1100px) { .pop { width: calc(100% + 2px); } }
.pop-card { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--att); border-radius: var(--r-lg); box-shadow: 0 18px 50px var(--shadow); display: flex; flex-direction: column; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); }
.pop.def .pop-card { border-top-color: var(--def); }
.pop-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pop-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pop-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--att); }
.pop.def .pop-k { color: var(--def); }
.pop-t b { font-size: var(--fs-lead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-live { white-space: nowrap; color: var(--text-dim); font-size: var(--fs-ui); }
.pop-num { font-size: var(--fs-num); font-weight: 900; color: var(--green); }
.pop-x { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-lead); cursor: pointer; }
.pop-x:hover { border-color: var(--text-dim); }
.pop-body { padding: 10px 12px; overflow: auto; display: grid; gap: 10px; min-height: 0; overscroll-behavior: contain; }
.pop-body .wpick { margin: 0; }
.pop-body .ws-row { padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.pop-field { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-dim); }
.pop-field select { margin: 0; }
.pop-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
.pop-hint { flex: 1; font-size: var(--fs-sm); color: var(--text-dim); }
.pop-done { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 800; padding: 8px 22px; border-radius: var(--r-pill); }
.pop.def .pop-done { background: var(--def); border-color: var(--def); }
/* Phones: a sheet from the bottom, over a dimmed page. */
@media (max-width: 760px) {
  .pop { position: fixed; inset: 0; width: auto; z-index: 55; display: flex; align-items: flex-end; background: rgba(2, 6, 23, 0.55); }
  .pop.def { left: 0; right: 0; }
  .pop-card { width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-left: none; border-right: none; border-bottom: none; }
  .pop-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pop-done { flex: 1; padding: 11px; font-size: var(--fs-lead); }
  .pop-hint { display: none; }
  body.pop-open { overflow: hidden; }
}
/* ---------- each weapon's part of a stage (T-191) ---------- */
.share { display: grid; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); min-width: 220px; }
.sh-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.sh-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: var(--fs-sm); color: var(--text-2); }
.sh-r b { color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sh-n small { color: var(--text-faint); }
.sh-roll { font-style: normal; font-weight: 800; font-size: var(--fs-12); padding: 0 5px; margin-left: 2px; border-radius: var(--r-sm); background: var(--soft); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-r i { grid-column: 1 / -1; height: 4px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--att) var(--p), var(--panel-2) var(--p)); }
.sh-r.melee i { background: linear-gradient(to right, var(--amber) var(--p), var(--panel-2) var(--p)); }
.bd-charts .chart-card { position: relative; }
.bd-charts .chart-card > .share { display: none; position: absolute; z-index: 5; left: 8px; right: 8px; top: 36px; margin: 0; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px var(--shadow); }
.bd-charts .chart-card:hover > .share, .bd-charts .chart-card:focus-within > .share { display: grid; }
.bd-charts .chart-card.tip-off > .share, .mchip.det.tip-off .mtip { display: none; }

/* ---------- the streamlined layout (T-193; the brief: design/streamline.md) ----------
   Everything below applies only with <html data-layout="new">; classic is untouched. */
.nl, .nl-lede { display: none; }
html[data-layout="new"] .setup-panel, html[data-layout="new"] .calc-body > .mods-card { display: none !important; }
html[data-layout="new"] .nl-lede { display: block; margin: 0 2px 10px; font-size: var(--fs-ui); color: var(--text-dim); }
html[data-layout="new"] .nl-lede b { color: var(--text); }
/* T-1608P (Jordan, 4 Nov): on a phone in the battle layout the lede moves below the calculator, so the funnel shows above the results bar. */
html[data-layout="new"] .nl-lede.nl-lede-low { display: none; }
@media (max-width: 899px) { html[data-layout="new"].ml-battle .nl-lede:not(.nl-lede-low) { display: none; } html[data-layout="new"].ml-battle .nl-lede.nl-lede-low { display: block; margin: 18px 2px 10px; } }
html[data-layout="new"] #calc > .intro { font-size: var(--fs-sm); margin: 18px auto 0; }
html[data-layout="new"] .nl { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); position: relative; margin-bottom: 12px;
  grid-template-areas: "aub" "swp" "dub" "res" "brg"; }
.nl > .unit-card.att { grid-area: aub; } .nl > .unit-card.def { grid-area: dub; } .nl > .nl-swap { grid-area: swp; }
.nl > .nl-res { grid-area: res; } .nl > .nl-doors { grid-area: brg; }
/* Each side's card (the split card, Jordan 26 Sep): the name opens the picker (T-346), the rest its sheet. */
.unit-card { display: grid; gap: 4px; min-width: 0; padding: 8px 10px 10px 8px;
  border-radius: var(--r-lg); border: 1px solid var(--border); border-left: 4px solid var(--att); background: var(--panel);}
.unit-card.def { border-left-color: var(--def); }
.unit-card:hover { border-color: var(--text-dim); border-left-color: var(--att); }
.unit-card.def:hover { border-left-color: var(--def); }
.unit-card > .side-load { margin: 2px 2px 0; }
/* Name, ⓘ, − n + on one line (Jordan: long names shorten with "…" on phones). */
.uc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* T-1352P (the 19 Oct audit: "Intercessor Sq…" on a phone): on a narrow phone the name keeps the whole first line, the ⓘ and
   the count go under it, so similar names (Intercessor, Assault Intercessor) stay whole. */
@media (max-width: 480px) {
  .uc-top { flex-wrap: wrap; row-gap: 6px; }
  .uc-top .unit-btn { flex: 1 1 calc(100% - 30px); min-width: 0; }
  .uc-top .uc-info { margin-left: 30px; }
}
.unit-btn { flex: 1 1 auto; min-width: 0; text-align: left; font: inherit; cursor: pointer;}
.ub-nm { display: block; font-weight: 800; font-size: var(--fs-lead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-step { flex: none; }
.stepper.uc-step button { width: 28px; height: 28px; font-size: var(--fs-lead); }
.stepper.uc-step output { display: inline-block; min-width: calc(2ch + 14px); font-size: var(--fs-body); text-align: center; font-variant-numeric: tabular-nums; }
.stepper button:disabled { opacity: 0.35; cursor: default; }
/* The name is the button that changes the unit (T-346): filled in its side's colour, ▾ at its end. */
.unit-btn { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 10px; border-radius: var(--r-md);
  color: #fff; }
.unit-btn.def { }
.unit-btn:hover, .unit-btn:focus-visible { filter: brightness(1.1); }
.unit-btn .ub-ch { flex: none; font-size: var(--fs-sm); opacity: 0.85; }
/* T-1442P (the Gemini review, Jordan 28 Oct: "Apply those changes"): the unit's name in the site's condensed heading face, caps,
   on its side's colour with a light top edge and a soft glow (white text stays on the -fill colours, 4.5:1). */
.unit-btn { background: linear-gradient(135deg, var(--att-fill) 0%, #3346D6 55%, #4338CA 100%); border: 1px solid color-mix(in srgb, #fff 24%, var(--att-fill));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 2px 10px color-mix(in srgb, var(--att) 28%, transparent); }
.unit-btn.def { background: linear-gradient(135deg, var(--def-fill) 0%, #8E2FCF 55%, #A21CAF 100%); border-color: color-mix(in srgb, #fff 24%, var(--def-fill));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 2px 10px color-mix(in srgb, var(--def) 28%, transparent); }
.unit-btn .ub-nm { font-family: var(--font-head); font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; }
/* The accordion (T-429, Jordan 30 Sep, mockup by the design session): four heads on one line, a
   line of chips per category with anything set (sliding, never wrapping), one expander at the foot. */
.unit-card { position: relative; cursor: default; padding-bottom: 10px; }
.uc-heads { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; margin-top: 6px; }
.uc-head { --k: var(--att); position: relative; min-width: 0; min-height: var(--h-sm); box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 1px;
  border-radius: var(--r-pill); border: 1.5px dashed var(--k); background: transparent; color: var(--k); font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer; }
.uc-head[data-head="Leader"], .uc-lr[data-k="Leader"] { --k: var(--lead); }
.uc-head[data-head="Army"], .uc-lr[data-k="Army"] { --k: var(--teal); }
.uc-head[data-head="Mods"], .uc-lr[data-k="Mods"] { --k: var(--def); }
/* Purple words reach 4.5:1 with --def-text (T-389, T-453); an open head keeps the fill. */
.uc-head[data-head="Mods"]:not(.open) { color: var(--def-text); }
.uc-head[data-head="Mods"] .uh-n { background: var(--def-grad); color: #fff; }
.uc-lr[data-k="Mods"] .uc-li { color: var(--def-text); }
.uh-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The docked row (T-434, Jordan 30 Sep): while the battle runs on a phone, the two cards become one
   row under the header, two equal halves (by construction, never content-sized) and ⇅ at the seam. */
.nl-dock { display: none; }
@media (max-width: 899px) {
  html[data-layout="new"] .nl.docked { grid-template-areas: "dock" "res" "brg"; }
  .nl.docked > .unit-card, .nl.docked > .nl-swap { display: none !important; }
  .nl.docked > .nl-dock:not([hidden]) { grid-area: dock; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center;
    position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 15; margin: -8px calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter); background: var(--bg); }
  .dk-half { --h: var(--att); display: flex; align-items: center; gap: 7px; min-width: 0; height: 44px; padding: 0 9px; border-radius: var(--r-lg);
    border: 1.5px solid var(--h); background: color-mix(in srgb, var(--h) 14%, var(--panel)); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .dk-half.def { --h: var(--def); flex-direction: row-reverse; text-align: right; }
  .dk-fig { flex: none; height: 26px; display: grid; place-items: center; }
  .dk-fig svg { height: 26px; width: auto; }
  .dk-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .dk-tx b { display: flex; gap: 3px; min-width: 0; font-size: var(--fs-ui); font-weight: 800; white-space: nowrap; }
  .dk-half.def .dk-tx b { justify-content: flex-end; }
  .dk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dk-n { flex: none; color: var(--text-dim); }
  .dk-tx small { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dk-swap { justify-self: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-md); background: var(--att-grad); color: #fff; font-size: var(--fs-lead); cursor: pointer; }
  /* Scrolled into the result (T-500): one line, the sides as name pills and SIMULATE between them;
     floating under the header when the cards are still in the page, so nothing below it moves. */
  .nl > .nl-dock.compact:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 6px; align-items: center; min-height: var(--h-lg); }
  .nl > .nl-dock.float:not([hidden]) { position: fixed; left: 0; right: 0; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 15; margin: 0;
    padding: 6px 14px; background: var(--bg); box-shadow: 0 1px 0 var(--border); }
  .nl-dock.compact .dk-swap, .nl-dock.compact .dk-fig, .nl-dock.compact .dk-tx small { display: none; }
  .nl-dock.compact .dk-half { height: 36px; border-radius: var(--r-pill); padding: 0 12px; }
  .nl-dock.compact .dk-sim { display: flex; justify-content: center; }
  .dk-sim .btn.so-attack { height: 40px; padding: 0 14px; font-size: var(--fs-ui); white-space: nowrap; }
  .dk-sim .btn.so-attack .dice-i { height: 16px; width: auto; }
}
.dk-sim { display: none; }
.uh-n { display: none; position: absolute; top: -7px; right: -3px; min-width: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--k); color: var(--panel);
  font-size: var(--fs-micro); font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.uc-head.has { border-style: solid; }
.uc-head.has .uh-n { display: inline-block; }
.uc-head.has .uh-plus { display: none; }
.uc-head.open { background: var(--k); color: var(--panel); }
.uc-head.open .uh-n { background: var(--panel); color: var(--k); box-shadow: 0 0 0 2px var(--k); }
.uc-head:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* T-1471P (Jordan, 29 Oct, the drawers mockup and option D): the parts as drawers, each edged in its colour, its head the part's
   name in capitals, what's set in one line and a count; the chip lines and Show All go (the drawers' heads say it). */
.uc-heads.uc-drws { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.unit-card > .uc-lines, .unit-card > .c2-showw { display: none !important; }
.ug-all { justify-self: end; padding: 2px 2px 0; border: 0; background: none; color: var(--lead); font: inherit; font-size: var(--fs-ui); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.uc-drw { --k: var(--att); min-width: 0; border: 1px solid var(--border); border-left: 4px solid var(--k); border-radius: var(--r-md); background: var(--panel-2); overflow: hidden; }
.uc-drw[data-drw="Leader"] { --k: var(--lead); } .uc-drw[data-drw="Army"] { --k: var(--teal); } .uc-drw[data-drw="Mods"] { --k: var(--def); }
.uc-drw.open { border-color: var(--k); background: var(--panel); }
.uc-drw.gone { opacity: 0.6; }
.uc-drw > .uc-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; justify-content: stretch; width: 100%; min-height: 56px; padding: 8px 12px;
  border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; }
.uc-drw > .uc-head.open { background: none; color: var(--text); }
.uc-drw .uh-i { display: grid; place-items: center; color: var(--k); }
.uc-drw .uh-i .glyph { width: 20px; height: 20px; }
.uc-drw .uh-tx { display: grid; gap: 1px; min-width: 0; }
.uc-drw .uh-t { font-family: var(--font-head); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k); }
:root[data-theme="light"] .uc-drw[data-drw="Leader"] .uh-t, :root[data-theme="light"] .uc-drw[data-drw="Leader"] .uh-i { color: var(--lead); }
.uc-drw .uh-s { font-size: var(--fs-ui); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-drw .uc-head .uh-n, .uc-drw .uc-head.open .uh-n { position: static; top: auto; right: auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: none; place-items: center; font-size: var(--fs-12); font-weight: 800;
  background: color-mix(in srgb, var(--k) 22%, transparent); color: var(--text); box-shadow: none; }
.uc-drw .uc-head.has .uh-n { display: inline-grid; }
.uc-drw .uh-ch { color: var(--text-dim); text-align: center; font-size: var(--fs-16); line-height: 1; }
.uc-drw.open .uh-ch { rotate: 180deg; }
@media (prefers-reduced-motion: no-preference) { .uc-drw .uh-ch { transition: rotate 0.15s; } }
.uc-dbody { display: none; padding: 0 10px 10px; border-top: 1px solid var(--border); }
.uc-drw.open .uc-dbody { display: block; }
.uc-dbody .sh-sec > .sh-h { display: none; }
/* Option D: the bar of parts filling in their colours, Close, and Next with its place; in the setup sheet it stays at the bottom. */
.uc-guide { display: grid; gap: 8px; margin-top: 12px; }
.ug-seg { display: flex; gap: 4px; }
.ug-seg i { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--border); }
.ug-seg i.on[data-k="Weapons"] { background: var(--att); } .ug-seg i.on[data-k="Leader"] { background: var(--lead); }
.ug-seg i.on[data-k="Army"] { background: var(--teal); } .ug-seg i.on[data-k="Mods"] { background: var(--def); }
.ug-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.ug-close { min-height: 52px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
/* T-1798P (Jordan, 7 Nov: "Make the close button red with an X ... Faint red not bold"): a faint red outline and wash, the X before the word. */
.uc-guide .ug-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-weight: 600; }
.uc-guide .ug-close:hover { background: color-mix(in srgb, var(--red) 16%, transparent); }
.ug-go { min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--lead) 70%, #000);
  background: var(--nh-fill); color: var(--nh-on); font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--lead) 24%, transparent); }
.ug-go > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-go small { flex: none; font-family: var(--font-body); font-size: 13px; font-weight: 800; opacity: 0.6; }
.ug-go svg { flex: none; }
:is(.ug-close, .ug-go, .ug-all):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ml-sh-body .uc-guide { position: sticky; bottom: -18px; z-index: 4; margin: 12px -12px -18px; padding: 10px 12px 18px; background: var(--panel); border-top: 1px solid var(--border); }
html.look-hud[data-theme="dark"] :is(.uc-drw, .ug-close, .ug-go) { border-radius: 3px; }
.uc-lines { display: grid; gap: 6px; margin-top: 8px; }
.uc-lines:not(:has(.uc-lr:not([hidden]))) { display: none; }
.uc-lr { --k: var(--att); position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
/* A row's icon opens its part (Jordan, 7 Oct): a tinted circle in the row's colour with a small +, a 44 px target. */
.uc-li { flex: none; position: relative; width: 28px; height: 28px; margin: -2px 2px -2px 0; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--k) 50%, var(--border)); background: color-mix(in srgb, var(--k) 14%, var(--panel)); color: var(--k); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.uc-li::before { content: ""; position: absolute; inset: -8px; }
.uc-li em { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--panel); background: var(--k); color: #fff; font-style: normal; font-size: var(--fs-micro); font-weight: 900; line-height: 1; }
.uc-li:hover, .uc-li:focus-visible { background: color-mix(in srgb, var(--k) 26%, var(--panel)); }
.uc-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.uc-chips::-webkit-scrollbar { display: none; }
.uc-lr.more-r .uc-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.uc-lr.more-l .uc-chips { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.uc-lr.more-l.more-r .uc-chips { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.uc-arr { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: var(--h-sm); height: var(--h-sm); padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--k); font: inherit; font-size: var(--fs-lead); line-height: 1; cursor: pointer; box-shadow: 0 2px 8px var(--shadow-sm); }
.uc-arr.r { right: 0; }
.uc-arr.l { left: 22px; }
.uc-lr.more-r .uc-arr.r, .uc-lr.more-l .uc-arr.l { display: grid; place-items: center; }
/* Chips in a line: at most about 170px, the name cut short, a ×N kept. */
.uc-chips .cw, .uc-chips .lc { max-width: 170px; }
.uc-chips .lc:has(.lc-pool) { max-width: 210px; }
.uc-chips .cw-g { max-width: 250px; }
.uc-chips .cw-nm, .lc-t { min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-chips .cw small { flex: none; }
.uc-chips .cw[aria-pressed="false"], .uc-chips .cw-g[aria-pressed="false"] .cw-p { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.uc-chips .cw[aria-pressed="false"] .cw-i { opacity: 0.5; }
.lc { color: var(--text); border-color: color-mix(in srgb, var(--k) 60%, var(--border)); background: color-mix(in srgb, var(--k) 12%, var(--panel-3)); }
/* The defender's weapons (T-433): its role colour. */
.unit-card.def .uc-chips .cw[aria-pressed="true"], #defWl .wl-pill[aria-pressed="true"] { border-color: var(--def); background: color-mix(in srgb, var(--def) 16%, transparent); }
#defExp .pop-field { display: none; }
/* A leader's buffs (T-432): gold crowns among the modifiers; switched off, struck; not in play, faint. */
.lc.crown { --k: var(--lead); }
.lc.crown.own { --k: var(--def-text); }
.lc.crown.idle { opacity: 0.5; background: transparent; }
/* Switched off, its words stay readable (T-1008W: at half opacity they fell to 2.3:1); the chip and its glyph go faint. */
.lc.crown.off, .lc.mark.off { background: transparent; border-color: var(--border); color: var(--text-faint); }
.lc.crown.off .lc-i, .lc.mark.off .lc-i { opacity: 0.5; }
.lc.crown.off .lc-t { text-decoration: line-through; }
.lc.crown.idle { cursor: default; }
/* A chip whose rule spends a pool (T-549): "needs the pool", small, after its words. */
.lc-pool { flex: none; margin-left: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); }
/* The Marked chip (T-548): the defender is the unit the attacker's rules marked; off, faint and struck. */
.lc.mark { --k: var(--att); }
.lc.mark.off .lc-t { text-decoration: line-through; }
.join-buff { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--lead); }
/* The expander: one part at a time, below the lines, so they never move. */
.uc-exp { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); min-width: 0; }
.uc-exp .sh-sec { padding: 0; border: 0; }
.uc-exp .sh-drawer > summary { display: none; }
.uc-exp .sh-dbody { display: grid; gap: 8px; }
.uc-exp .dchip { padding: 5px 10px; font-size: var(--fs-ui); }
.uc-exp .mods-checkgrid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; font-size: var(--fs-ui); }
@media (max-width: 380px) { .uc-exp .mods-checkgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uc-exp .sh-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ux-hint { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
/* T-486: the open part's Close bar, full width, a chip row's height, muted. */
.ux-close { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 32px; margin-top: 8px; padding: 4px 10px; font: inherit; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); background: var(--chip-bg); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.ux-close:hover { color: var(--text); border-color: var(--text-dim); }
.ux-close:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* The same close as a chevron in each part's top bar (Jordan, 5 Oct). */
.uc-exp .sh-h .ux-top-x { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; font: inherit; font-size: var(--fs-lead); line-height: 1;
  color: var(--text-dim); background: var(--chip-bg); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.uc-exp .sh-h .ux-top-x:hover { color: var(--text); border-color: var(--text-dim); }
.uc-exp .sh-h .ux-top-x:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.uc-exp .sh-sec[data-sec="Weapons"] .sh-h { color: var(--att); }
.uc-exp .sh-sec[data-sec="Leader"] .sh-h { color: var(--lead); }
.uc-exp .sh-sec[data-sec="Army"] .sh-h { color: var(--teal); }
.uc-exp .sh-sec[data-sec="Mods"] .sh-h { color: var(--def); }
.uc-exp .sh-sec[data-sec="Stats"] .sh-h { color: var(--text-dim); }
.ux-none, .ux-lnote { display: none; }
.sh-sec[data-sec="Leader"]:not(.ux-gone) .ux-lnote, .sh-sec.ux-gone .ux-none { display: block; }
.sh-sec.ux-gone > :not(.sh-h):not(.ux-none) { display: none; }
@media (prefers-reduced-motion: no-preference) { .uc-exp:not([hidden]) { animation: ux-in 0.16s ease-out; } }
@keyframes ux-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.uc-stats { display: block; width: 100%; text-align: left; padding: 0 0 0 30px; border: none; background: none; color: var(--text-dim);
  font: inherit; font-size: var(--fs-ui); line-height: 1.4; cursor: pointer; }
.uc-stats b { color: var(--att); }
/* Each stat keeps its label and value together ("OC 2" never splits, T-491). */
.uc-st { white-space: nowrap; }
.uc-pts { font-weight: 700; color: var(--text); }
/* The list a side holds (T-352): one small muted line under the statline. */
/* The list row (T-437, Jordan 30 Sep): under the statline, the side's list as a chip; dashed "Pick a
   list" while it holds none (the empty heads' style). */
/* The list pills (T-1181B): each side's list on a pill straddling its card's top edge, the attacker's at the left and the
   defender's at the right, and a copy pinned to that edge of the screen while the card is out of sight. */
.lpill { --k: var(--att); position: absolute; top: -15px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: min(62%, 260px);
  min-height: 32px; box-sizing: border-box; padding: 0 12px; border-radius: var(--r-pill); border: 1.5px dashed var(--k); background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.lpill.att { left: 14px; }
.lpill.def { --k: var(--def); right: 14px; }
.lpill.set { border-style: solid; border-color: var(--paper-edge); background: var(--paper); color: var(--paper-ink); }
.lpill .lp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpill .lp-n { flex: none; padding: 1px 7px; border-radius: var(--r-pill); background: var(--k); color: #fff; font-size: var(--fs-xs); }
.lpill:hover, .lpill:focus-visible { box-shadow: 0 0 0 2px var(--k), 0 4px 14px rgba(0, 0, 0, 0.35); }
.unit-card:has(> .lpill) { margin-top: 18px; padding-top: 20px; }
/* T-1222B (Jordan, 17 Oct: "I want them vertical not horizontal, they stick out too much"): the pinned copy a slim upright tab
   on its edge, its words running along the edge (the attacker's read upwards on the left, the defender's downwards on the right). */
/* T-1223B: high and short, clear of the results sheet and Simulate at the bottom. */
/* T-1651P (Jordan, 4 Nov: "needs to have a fixed size even if it cuts off the name of the list and needs to be small and non intrusive"):
   both tabs one size, 88 px along the edge and 20 px across, the list's name cut short and its count kept. */
.lpill.fix { position: fixed; top: 20%; z-index: 45; writing-mode: vertical-rl; max-width: none; height: 88px; max-height: none; min-height: 0; width: 20px;
  padding: 6px 0; gap: 4px; justify-content: flex-start; font-size: var(--fs-xs); animation: lpIn 0.18s ease-out; }
.lpill.fix .lp-t { flex: 1 1 auto; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpill.fix .lp-n { padding: 4px 1px; }
.lpill.fix.att { left: 0; border-radius: var(--r-pill) 0 0 var(--r-pill); border-right: 0; rotate: 180deg; }
.lpill.fix.def { right: 0; left: auto; border-radius: var(--r-pill) 0 0 var(--r-pill); border-right: 0; }
@keyframes lpIn { from { opacity: 0; transform: translateX(var(--lp-from, -30%)); } to { opacity: 1; transform: none; } }
.lpill.fix.def { --lp-from: 30%; }
@media (prefers-reduced-motion: reduce) { .lpill.fix { animation: none; } }
body.pop-open .lpill.fix, body.ldr-open .lpill.fix, html.hill-embed .lpill { display: none; }
/* T-1600P (Jordan, 3 Nov): the edge tab stays while a side holds a list, slim and quiet until touched, and opens that side's
   drawer: its units to pick, ✎ to change the list, ✕ to let it go. */
.lpill.fix { opacity: 0.82; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .lpill.fix .lp-ic { display: none; }   /* T-1625P: slimmer, so it rests on the gutter */
.lpill.fix:hover, .lpill.fix:focus-visible { opacity: 1; }
.ldr-scrim { position: fixed; inset: 0; z-index: 58; border: 0; padding: 0; background: rgba(0, 0, 0, 0.45); cursor: default; }
.ldrawer { position: fixed; top: 0; bottom: 0; z-index: 59; width: min(360px, 88vw); display: flex; flex-direction: column; box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); background: var(--panel); color: var(--text);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.5); animation: ldIn 0.2s ease-out; }
.ldrawer.att { left: 0; border-right: 3px solid var(--att); border-radius: 0 16px 16px 0; }
.ldrawer.def { right: 0; border-left: 3px solid var(--def); border-radius: 16px 0 0 16px; --ld-from: 100%; }
@keyframes ldIn { from { transform: translateX(var(--ld-from, -100%)); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ldrawer { animation: none; } }
.ldr-head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 10px; border-bottom: 1px solid var(--border); }
.ldrawer.def .ldr-head { flex-direction: row-reverse; }
.ldr-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ldr-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.ldr-t b { font-size: var(--fs-16); line-height: 1.25; overflow-wrap: anywhere; }   /* T-1652P: the list's name in full */
.ldr-b { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--border);
  background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-16); cursor: pointer; }
.ldr-b:hover, .ldr-b:focus-visible { color: var(--text); border-color: var(--text-dim); }
.ldr-x { border: 0; font-size: var(--fs-num); }
.ldr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ldr-a { min-height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ldr-a.rm { border-color: var(--red); color: var(--red); background: var(--danger-bg); }
.ldr-acts .ldr-a[data-ldbuild] { grid-column: 1 / -1; order: 3; }   /* T-1654P: Edit in List builder under the two */
.ldr-a:hover, .ldr-a:focus-visible { border-color: var(--text-dim); }
.ldr-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 4px 14px; }
.ldr-body > .roster-warn { margin: 6px 10px; }
/* T-1654P (Jordan, 5 Nov): each list unit's Att (sword), Def (shield) and Edit. */
.ls-acts { display: flex; gap: 6px; justify-content: flex-end; margin: -2px 10px 8px; }
.ls-a { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-14); font-weight: 700; cursor: pointer; }
.ls-a .glyph { width: 13px; height: 13px; }
.ls-a.att { border-color: var(--att); } .ls-a.att .glyph { color: var(--att-soft); }
.ls-a.def { border-color: var(--def); } .ls-a.def .glyph { color: var(--def-soft); }
/* The picker's My lists on its first screen, each with ✎ for the List builder, and New list (T-1654P). */
.pk-mine { display: grid; gap: 6px; margin: 0 0 14px; }
.pk-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; }
.pk-mrow .pk-name { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); text-align: left; }
.pk-medit { display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font-size: var(--fs-16); text-decoration: none; }
.pk-mnew { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 10px 12px; border: 1.5px dashed var(--border); border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.pk-mnew .pk-mni { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); color: var(--text); font-weight: 800; font-size: var(--fs-16); }
.pk-mnew b { font-weight: 700; } .pk-mnew small { color: var(--text-dim); font-size: var(--fs-12); }
.uc-from { margin: 6px 0 0 30px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.lchip { --k: var(--att); display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: var(--h-sm); box-sizing: border-box; padding: 0 11px; border-radius: var(--r-pill);
  border: 1.5px dashed var(--text-faint); background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.unit-card.def .lchip { --k: var(--def); }
.lchip.set { border-style: solid; border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, var(--panel)); color: var(--text); }
/* A held list's chip is paper (T-475), on both sides (T-505, Jordan 1 Oct). */
.unit-card .lchip.set { border-color: var(--paper-edge); background: var(--paper); color: var(--paper-ink); }
.unit-card .lchip.set .lc-n, .unit-card .lchip.set .lc-chev { color: var(--paper-ink); opacity: 0.8; }
.unit-card .lchip.set[aria-expanded="true"] { background: var(--paper-strong); box-shadow: inset 0 0 0 1px var(--paper-edge); }
.lchip .lc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lchip .lc-n { flex: none; color: var(--text-dim); font-weight: 400; white-space: nowrap; }
/* T-480: the list chip is a drawer: a chevron that turns over while it is open, and the chip pressed. */
.lchip .lc-chev { flex: none; font-size: var(--fs-xs); color: var(--text-dim); transition: transform 0.18s ease; }
.lchip[aria-expanded="true"] .lc-chev { transform: rotate(180deg); }
.lchip.set[aria-expanded="true"] { background: color-mix(in srgb, var(--k) 30%, var(--panel)); box-shadow: inset 0 0 0 1px var(--k); }
@media (prefers-reduced-motion: reduce) { .lchip .lc-chev { transition: none; } }
.lchip-x { flex: none; font: inherit; font-size: var(--fs-ui); color: var(--text-faint); background: none; border: 0; padding: 2px 6px; cursor: pointer; }
.lchip:hover, .lchip-x:hover { color: var(--text); }
.cw, .cc-b, .uc-go, .uc-add { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 700; white-space: nowrap; cursor: pointer; }
.cw[aria-pressed="true"] { color: var(--text); border-color: var(--att); background: color-mix(in srgb, var(--att) 16%, transparent); }
.cw span { font-size: var(--fs-xs); }
.cw-nm { display: inline-block; font-weight: inherit; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A weapon of several profiles: the weapon and its profile as one pill in two parts; the profile
   part switches it. */
.cw-g { flex: none; display: inline-flex; align-items: stretch; }
.cw-g .cw { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 8px; }
.cw-p { flex: none; padding: 5px 10px 5px 8px; border: 1px solid var(--border); border-radius: 0 var(--r-pill) var(--r-pill) 0; margin-left: -1px;
  background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.cw-p::after { content: " ⇄"; font-size: var(--fs-micro); opacity: 0.7; }
.cw-g[aria-pressed="true"] .cw-p { color: var(--text); border-color: var(--att); background: color-mix(in srgb, var(--att) 10%, transparent); }
.cw-p:hover { color: var(--text); }
.cc.det .cc-b { padding-right: 10px; border-color: color-mix(in srgb, var(--teal) 55%, var(--border)); background: color-mix(in srgb, var(--teal) 12%, var(--panel-3)); }
.cc.lead .cc-b { border-color: color-mix(in srgb, var(--lead) 55%, var(--border)); background: color-mix(in srgb, var(--lead) 12%, var(--panel-3)); }
.cc { position: relative; flex: none; display: inline-flex; }
.cc .cc-b { color: var(--text); background: var(--panel-3); padding-right: 14px; }
.unit-card.att .cc:not(.fx):not(.lead):not(.det) .cc-b { border-color: color-mix(in srgb, var(--att) 45%, var(--border)); }
.unit-card.def .cc:not(.fx):not(.lead):not(.det) .cc-b { border-color: color-mix(in srgb, var(--def) 45%, var(--border)); }
.cc.lead .cc-b { padding-right: 10px; }
.cc .tag { font-size: var(--fs-xs); }
.cc.fx.off .cc-b { color: var(--text-faint); background: transparent; opacity: 0.5; text-decoration: line-through; }
/* The × in the chip's top right corner, with a larger tap area than it looks. */
.cc-x { position: absolute; top: -6px; right: -5px; width: 17px; height: 17px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); font: inherit; font-size: var(--fs-xs); font-weight: 800; line-height: 1; cursor: pointer; }
.cc-x::before { content: ""; position: absolute; inset: -8px; }
.cc-x:hover { color: var(--text); border-color: var(--text-dim); }
.nl-swap { display: flex; justify-content: center; margin: -6px 0; position: relative; z-index: 2; }
html[data-layout="new"] #swapBtn { width: 38px; height: 26px; padding: 0; border-radius: var(--r-pill); font-size: var(--fs-ui); line-height: 1; }
html[data-layout="new"] #swapBtn span:not(:first-child) { display: none; }
.nl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Shoot / Fight / Shoot, then fight, with the answer beside ATTACK; the weapons sheet keeps only
   the weapon choices, so its Then fight box goes. */
html[data-layout="new"] .bd-bar { flex-wrap: wrap; }
.atk-mode { flex: none; }
/* The chosen mode: a thick outline, not a fill, so ATTACK stays the one filled button (Jordan). */
.seg.atk-mode button[aria-pressed="true"] { background: transparent; color: var(--att); box-shadow: inset 0 0 0 2px var(--att); }
html[data-layout="new"] .ws-then { display: none; }
@media (max-width: 760px) {
  html[data-layout="new"] .atk-mode { order: -1; flex: 1 1 100%; }
  html[data-layout="new"] .atk-mode button { flex: 1; padding: 6px 4px; }
}
/* Four modes (T-435): four equal segments, each an icon over a short label. */
.seg.atk-mode.seg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: var(--r-lg); min-width: 300px; }
.seg.atk-mode.seg4 button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: var(--r-md); line-height: 1.1; min-width: 0; }
.seg4 button i { font-style: normal; font-size: var(--fs-lead); line-height: 1; }
.seg4 button span { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* T-1645P (Jordan, 4 Nov): a toggle the unit can't change shows its state plainly: on (Melee for a unit with only melee weapons) in the
   active toggles' colour, off (its Shoot) a light grey rather than near black. */
.seg4 button:disabled { opacity: .6; cursor: default; }
.seg4 button:disabled[aria-pressed="true"] { opacity: 1; }
/* On is filled in the site blue (Jordan, 30 Sep: the four are toggles). */
.seg.atk-mode.seg4 button[aria-pressed="true"] { background: linear-gradient(180deg, var(--att-fill) 0%, #3730A3 100%); color: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 34%, var(--att-fill)), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 10px color-mix(in srgb, var(--att) 32%, transparent); }   /* T-1442P: lit, with an edge */
@media (max-width: 760px) { .seg.atk-mode.seg4 { min-width: 0; } }
/* The pickers' sheets beside the cards. */
html[data-layout="new"] .nl > .pop .pop-card { min-width: 0; }
html[data-layout="new"] .nl > .pop .pop-body { position: relative; display: block; padding-top: 0; min-width: 0; }
.sh-sec { display: grid; gap: 8px; padding: 12px 0; min-width: 0;}
.sh-sec:last-child { border-bottom: none; }
.sh-h { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--att); }
.sh-note { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.sh-sec .joins { margin-top: 0; }
.sh-sec .mods-col { border: none; background: none; padding: 0; }
.sh-sec .mods-head { justify-content: space-between; margin: 0; }
.sh-sec .mods-head h4 { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.08em; }
/* Two sets each side (Jordan, 3 Oct): its own attack and its defense, the fight-back one second. */
.sh-sec .mods-col + .mods-col { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.mods-note { margin: 2px 0 8px; font-size: var(--fs-sm); color: var(--text-dim); }
.sh-sec .ws-row { padding-bottom: 8px; }
/* The detachments drawer at the top (Jordan, 26 Sep). */
.sh-sec[data-sec="Army"] { padding: 8px 0; }
.sh-drawer > summary { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; cursor: pointer; list-style: none; }
.sh-drawer > summary::-webkit-details-marker { display: none; }
.sh-drawer > summary::after { content: "▾"; color: var(--text-faint); }
.sh-drawer[open] > summary::after { content: "▴"; }
.sh-dk { flex: none; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--att); }
.pop.def .sh-dk { color: var(--def); }
.sh-dv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: 700; }
.sh-dv em { font-style: normal; font-weight: 600; color: var(--text-faint); }
.sh-dp { flex: none; font-size: var(--fs-sm); color: var(--text-dim); }
.sh-dbody { display: grid; gap: 8px; padding: 4px 0 4px; }
.dchip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel-3);
  color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; text-align: left; }
.dchip small { font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); white-space: nowrap; }
/* T-1221B: a Unit boost's chip says what it gives under its name; a Harvester's regeneration greyed where the detachment lacks it. */
.dchip.near > span { display: grid; gap: 1px; text-align: left; } .dchip.near small { white-space: normal; font-weight: 600; } .dchip.near .near-no { color: var(--text-faint); font-style: italic; font-weight: 500; opacity: .8; }
.dchip.on { border-color: var(--att); background: color-mix(in srgb, var(--att) 16%, transparent); }
.pop.def .dchip.on { border-color: var(--def); background: color-mix(in srgb, var(--def) 16%, transparent); }
.dchip:disabled { opacity: 0.4; cursor: not-allowed; }
/* Unit boosts (T-1064S): the nearby units, toggled on together, under their own small heading. */
.det-near { display: grid; gap: 6px; margin-top: 10px; }
.det-near .det-who { font-size: var(--fs-ui); }
html[data-layout="new"] .nl-res .main-layout { margin: 0; }
/* Each tab a screen of its own (T-194): only the current one shows. */
html[data-layout="new"] main > .view:not(.view-on) { display: none; }
/* Army vs Army's card (T-241): a gradient frame, the two armies facing off, a bold button. */
.nl-bridge { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art txt" "go go"; align-items: center; gap: 12px 16px; text-align: left; padding: var(--s-4) var(--s-5); border: 1px solid transparent; border-radius: var(--r-lg);
  background: var(--panel-2);
  color: var(--text); font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.nl-bridge:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--shadow-sm); }
.nl-bridge:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.nl-bridge .brg-art { grid-area: art; display: flex; align-items: flex-end; gap: 4px; } .nl-bridge .brg-txt { grid-area: txt; }
.nl-bridge .brg-txt b { display: block; font-size: var(--fs-h3); font-weight: 900; }
.nl-bridge .brg-txt span { display: block; color: var(--text-dim); font-size: var(--fs-ui); margin-top: 2px; }
.nl-bridge .go { grid-area: go; text-align: center; white-space: nowrap; font-weight: 900; font-size: var(--fs-body); color: var(--accent); min-height: var(--h-md); display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0 16px; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--accent); }
@media (max-width: 760px) {
  .nl-bridge { grid-template-columns: 1fr; grid-template-areas: "art" "txt" "go"; justify-items: center; text-align: center; gap: 10px; padding: 16px 14px; }
  .nl-bridge .go { width: 100%; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .nl-bridge { transition: none; } .nl-bridge:hover { transform: none; } }
.nl-more { border-top: 1px solid var(--border); margin: 0 8px; padding: 2px 0 6px; }
.nl-more > summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); padding: 8px 2px; }
.nl-more .flow-tbl > summary { display: none; }
/* The unit picker. */
@media (max-width: 760px) {
  html[data-layout="new"] .fr { grid-template-columns: 58px minmax(0, 1fr); padding: 5px 8px; border-radius: var(--r-md); }
  html[data-layout="new"] .fr-k { display: inline; }
  html[data-layout="new"] .fr-s { display: block; grid-column: 2; }
}
@media (min-width: 761px) {
  html[data-layout="new"] .nl > .pop { position: absolute; top: 0; left: 0; right: auto; width: min(660px, 100%); }
}
/* Two columns from 900 px (T-940; they started at 1100, and 900 to 1099 had neither these nor the phone's results sheet,
   which runs under 900: at 1024 the answer sat about 1,090 px down). 900 itself is two columns, as layout.js's wide() and
   respanel.js's max-width: 899px have it. */
@media (min-width: 900px) {
  html[data-layout="new"] .nl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 20px; row-gap: 0; align-items: start;
    grid-template-areas: "aub res" "swp res" "dub res" "brg res" ". res" "chr chr"; grid-template-rows: repeat(4, auto) 1fr auto; }
  html[data-layout="new"] .nl-swap { margin: 0; padding: 6px 0; }
  html[data-layout="new"] .nl-doors { margin-top: 12px; }
  /* The result keeps in view as the cards scroll (sticky), but stops above the charts row (T-952: Chrome bounds a sticky
     box by its parent, the whole grid, not its grid area, so it slid over the charts by up to 290 px). The column fills its
     area; what sticks is inside it. */
  html[data-layout="new"] .nl > .nl-res { align-self: stretch; }
  html[data-layout="new"] .nl > .nl-res > .main-layout { position: sticky; top: 72px; }
  html[data-layout="new"] .nl > .pop { width: calc((100% - 20px) / 2.3); }
}

/* Army vs Army in the new layout (brief section 4). */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px; background: var(--panel-3); }
.seg button { border: none; background: none; border-radius: var(--r-pill); padding: 4px 11px; font: inherit; font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--pick-bg); color: var(--pick-fg); box-shadow: inset 0 0 0 1px var(--pick-bd); }
.nl-cmpwrap, .av-panel, .av-scrim { display: none; }
html[data-layout="new"] .nl-cmpwrap { display: block; position: relative; margin: 0 0 10px; }
/* Matchup's options (T-304, Jordan 28 Sep): one dashed purple pill with its + Modifier beside
   the settings, like the calculator's card, not a bar with the button far off to the right. */
.nl-cmpline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 100%; text-align: left; padding: 6px 14px; border-radius: var(--r-pill); border: 1.5px dashed color-mix(in srgb, var(--def) 70%, var(--border)); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.nl-cmpline:hover, .nl-cmpline:focus-visible { border-color: var(--def); background: color-mix(in srgb, var(--def) 8%, var(--panel)); }
.nl-cmpline em { font-style: normal; color: var(--def); white-space: nowrap; }
html[data-layout="new"] #cmpPop .cmp-banner { border: none; padding: 0; background: none; margin: 0; }
html[data-layout="new"] #cmpDetail { display: none !important; }
html[data-layout="new"] .cmp-inline { display: none; }
html[data-layout="new"] .av-wrap { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
html[data-layout="new"] .roster-col.nl-col .roster-head, html[data-layout="new"] .roster-col.nl-col:not(.nl-open) :is(.det-row, .det-rules) { display: none; }
.nl-colhead { width: 100%; text-align: left; display: grid; gap: 1px; padding: 6px 8px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-3); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.nl-colhead b { font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-colhead span { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="new"] .roster-col .side-label { position: sticky; top: var(--top-h, 58px); z-index: 5; background: var(--panel); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; margin: 0 0 4px; min-width: 0; }
html[data-layout="new"] .roster-col .side-label > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-layout="new"] .roster-col .sl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1; }
.nl-sort button { padding: 2px 8px; font-size: var(--fs-xs); }
html[data-layout="new"] .roster-col.nl-sorted :is(.roster-role, .ru-join, .ru-split) { display: none; }
.av-scrim { position: fixed; inset: 0; z-index: 54; background: rgba(2, 6, 23, 0.55); }
html[data-layout="new"] .av-scrim:not([hidden]) { display: block; }
.avp-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 2px 8px; background: var(--bg); }
.avp-t { flex: 1; min-width: 0; display: grid; }
.avp-t b { font-size: var(--fs-body); }
.avp-t span { font-size: var(--fs-sm); color: var(--text-dim); }
.avp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.avp-weps { margin: 8px 0 0; }
.avp-empty { padding: 18px; border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--text-dim); font-size: var(--fs-ui); }
@media (max-width: 1099px) {
  html[data-layout="new"] .av-panel.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; max-width: 760px; margin: 0 auto; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
    background: var(--bg); border-top: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 0 10px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px var(--shadow); overscroll-behavior: contain; }
  html[data-layout="new"] body.avp-on { overflow: hidden; }
}
@media (min-width: 761px) {
  html[data-layout="new"] .nl-cmpwrap > .pop { top: calc(100% + 6px); left: 0; width: min(620px, 100%); }
}
@media (min-width: 1100px) {
  html[data-layout="new"] .av-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  html[data-layout="new"] .av-panel { display: block; position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
  html[data-layout="new"] .av-scrim { display: none !important; }
  html[data-layout="new"] .avp-head { padding-top: 0; }
}

/* ATTACK (T-193): the button that rolls one attack and plays it out, the page's call to action. */
.bd-bar .btn.so-attack, .btn.so-attack { min-height: var(--h-md); font-size: var(--fs-body); font-weight: 900; letter-spacing: 0.06em; padding: 7px 16px; border: none; border-radius: var(--r-pill); color: #fff;
  background: var(--sim-grad); box-shadow: 0 3px 12px color-mix(in srgb, var(--sim) 35%, transparent); }
.btn.so-attack:hover { filter: brightness(1.12); }
.btn.so-attack:active { transform: translateY(1px); }
.bd-bar { flex-wrap: wrap; row-gap: 6px; }
/* Wargear limits (T-188): "up to 2 of 20" beside Carried by. */
.carry-lim { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--amber); text-transform: none; letter-spacing: 0; }

/* Army vs Army sides (T-205): Clear beside the title, four ways in, numbered units by role. */
.side-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.sl-t { min-width: 0; }
.side-clear { flex: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--border); background: var(--soft); color: var(--text-dim); border-radius: var(--r-sm); padding: 2px 8px; cursor: pointer; }
.side-clear:hover { color: var(--text); border-color: var(--text-faint); }
.src-tabs { flex-wrap: wrap; }
.src-ways { display: grid; gap: 6px; }
.src-way { display: grid; gap: 1px; text-align: left; font: inherit; border: 1px solid var(--border); background: var(--soft); color: var(--text); border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; }
.src-way:hover { border-color: var(--att); }
.src-way b { font-size: var(--fs-ui); }
.src-way small { font-size: var(--fs-xs); color: var(--text-faint); }
.win-list { display: grid; gap: 5px; margin: 8px 0; }
.win-row { display: grid; gap: 1px; text-align: left; font: inherit; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: var(--r-md); padding: 6px 9px; cursor: pointer; min-width: 0; }
.win-row:hover { border-color: var(--att); }
.win-row b { font-size: var(--fs-ui); overflow-wrap: anywhere; }
.win-row small { font-size: var(--fs-xs); color: var(--text-faint); overflow-wrap: anywhere; }
.win-row.loading, .win-row:disabled { opacity: 0.6; }
.roster-role { display: flex; justify-content: space-between; gap: 6px; }
.rr-n { font-variant-numeric: tabular-nums; }
.ru-top { align-items: flex-start; }
.ru-top .ru-num + .ru-name { flex: 1; min-width: 0; }
.ru-num { flex: none; min-width: 18px; margin: 1px 0 0; padding: 0 3px; border-radius: var(--r-sm); background: var(--soft); color: var(--text-dim); font-size: var(--fs-micro); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; line-height: 16px; }
@media (max-width: 760px) {
  .roster-grid:not(.expand-all) .src-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-md); }
  .roster-grid:not(.expand-all) .src-tabs button { border-radius: var(--r-md); }
  .roster-grid:not(.expand-all) .ru-num { min-width: 15px; font-size: var(--fs-micro); line-height: 14px; }
  .roster-grid:not(.expand-all) .src-way { padding: 6px 7px; }
  .roster-grid:not(.expand-all) .src-way b { font-size: var(--fs-sm); }
  .roster-grid:not(.expand-all) .src-way small { font-size: var(--fs-micro); }
  .roster-grid:not(.expand-all) .win-row b { font-size: var(--fs-xs); }
  .roster-grid:not(.expand-all) .win-row small { font-size: var(--fs-micro); }
  .roster-grid:not(.expand-all) .side-clear { font-size: var(--fs-micro); padding: 1px 5px; }
}
/* Phones: toasts sit above the bottom tab bar (the base .toast rule above came later and won). */
@media (max-width: 760px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30; } }

/* Fight to the death (T-196): the win bar, its key and the turns. */
.ans-death { display: grid; gap: 6px; margin: 4px 0 2px; }
.d-bar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--soft); }
.d-bar i { display: block; height: 100%; }
.d-a { background: var(--att); } .d-d { background: var(--def); } .d-n { background: var(--text-faint); opacity: 0.55; }
.d-key { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: var(--fs-ui); color: var(--text-dim); }
.d-key b { color: var(--text); font-variant-numeric: tabular-nums; }
.d-key .sw { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-sm); margin-right: 5px; vertical-align: -1px; }
.d-note { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.d-turns summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); }
.dt-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--text-dim); margin-top: 4px; }
.dt-track { height: 8px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.dt-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--att), var(--def)); }
.dt-p { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.answer.death .ans-meter { display: none; }

/* The matchup Colours switch beside its neighbours (T-331). */
.section-head .sh-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.section-head .mu-toggle { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; }
.mu-dots { display: inline-flex; gap: 3px; }
.mu-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.mu-dots i:nth-child(2) { background: var(--mu-even); }
.mu-dots i:nth-child(3) { background: var(--red); }
.mu-toggle[aria-pressed="false"] { color: var(--text-dim); }
.mu-toggle[aria-pressed="false"] .mu-dots i { background: var(--text-faint); opacity: 0.6; }

/* ✨ Effects (T-209): a small panel of switches. */
.fx-panel { position: fixed; z-index: 70; right: 16px; width: min(340px, calc(100vw - 32px)); overflow-y: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 16px 40px var(--shadow); padding: 12px 14px; display: grid; gap: 8px;}
@media (max-width: 760px) {  }
.fx-head { display: flex; justify-content: space-between; align-items: center; }
.fx-x { border: 1px solid var(--border); background: none; color: var(--text); border-radius: var(--r-sm); width: 28px; height: 28px; cursor: pointer; }
.fx-mode { display: flex; }
.fx-panel fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px 8px; margin: 0; display: grid; gap: 3px; }
.fx-panel fieldset[disabled] { opacity: 0.45; }
.fx-panel legend { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); padding: 0 4px; }
.fx-sw { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); cursor: pointer; }
.fx-sw input { accent-color: var(--att); width: 16px; height: 16px; }
.fx-mode button { min-height: 24px; }
/* Weapon effects (T-493): a switch per family, the rare ones folded. */
.fx-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 10px; margin-top: 2px; }
.fx-famrow { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.fx-famrow input[type="range"], .fx-dens input[type="range"] { width: 76px; accent-color: var(--att); }
.fx-rare > summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); min-height: 24px; display: flex; align-items: center; }
.fx-pick { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; align-items: center; font-size: var(--fs-ui); }
.fx-pick select, .fx-pick input { font: inherit; font-size: var(--fs-ui); padding: 4px 6px; background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 0; }
.fx-words { grid-template-columns: 1fr; gap: 3px; }
.fx-note { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); }
.so-actions .so-fx, .bd-bar .so-fx { padding: 4px 7px; min-width: 0; }
@media (max-width: 560px) { .bd-bar .btn.so-attack { padding: 7px 11px; } .bd-bar { gap: 2px; } .bd-bar .so-actions { gap: 3px; } .bd-bar .btn { padding: 4px 6px; } .bd-bar .so-fx { padding: 4px 5px; } }

/* The floating ✨ button (T-216): every setting and unlock, on every screen. */
.fx-fab { position: fixed; right: 14px; bottom: 18px; z-index: 55; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: linear-gradient(135deg, var(--att), var(--def)); color: #fff; font-size: var(--fs-h2); line-height: 1; cursor: pointer; box-shadow: 0 8px 20px var(--shadow); }
.fx-fab:hover { filter: brightness(1.1); }
.fx-fab:focus-visible { outline: 2px solid var(--att); outline-offset: 3px; }
@media (max-width: 760px) { .fx-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 10px; width: 42px; height: 42px; font-size: var(--fs-h3); } }
body.pop-open .fx-fab, body.avp-on .fx-fab { display: none; }
/* Out of the way of Army vs Army's breakdown sheet and a toast, whose buttons sit bottom right. */
body:has(#cmpDetail:not([hidden]):not(.away)) .fx-fab, body:has(#toast.show) .fx-fab { display: none; }
/* Room under the footer, so its last links can scroll clear of the button. */
.footer { padding-bottom: 60px; }
.fx-panel { bottom: 74px; max-height: calc(100vh - 90px); }   /* room above its bottom offset: never off the top */
@media (max-width: 760px) { .fx-panel { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 190px); } }
.fx-soon { opacity: 0.75; }
.fx-lock { font-size: var(--fs-ui); color: var(--text-faint); }

/* T-231: the kill switch (html.no-profiles, from data/flags.json) that hides every statline and
   weapon profile across the site. */
html.no-profiles .statline, html.no-profiles .fr-s, html.no-profiles .wl-st, html.no-profiles .wl-edit-btn, html.no-profiles .wl-edit { display: none !important; }

/* T-236: tap a score's heading to sort by it, again to reverse. */
.rk-scores-h { display: flex; gap: 8px; }
.rk-scores-h button { all: unset; cursor: pointer; width: 44px; text-align: center; white-space: nowrap; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rk-scores-h button i { font-style: normal; opacity: 0.45; font-size: var(--fs-micro); }
.rk-scores-h button[aria-sort] { color: var(--att); }
.rk-scores-h button[aria-sort] i { opacity: 1; }
.rk-scores-h button:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; border-radius: var(--r-sm); }
/* T-238: the site's name in the funnel's corner. */
#flow .wm { fill: var(--text-faint); opacity: 0.8;}
/* T-1377P: the funnel's mark is the lockup; its wordmark in the theme's ink (the page's funnel and the phone's copy alike). */
:is(#flow, .c2-funnel) .wm { opacity: 0.85; }
:is(#flow, .c2-funnel) .wm .wm-lt { display: none; }
:root[data-theme="light"] :is(#flow, .c2-funnel) .wm .wm-dk { display: none; }
:root[data-theme="light"] :is(#flow, .c2-funnel) .wm .wm-lt { display: inline; }
/* T-240: Skip stands out while a fight plays. */
#soReplay.skipping { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 35%, transparent); animation: skipPulse 1.2s ease-in-out infinite; }
@keyframes skipPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 14%, transparent); } }
@media (prefers-reduced-motion: reduce) { #soReplay.skipping { animation: none; } }
/* The share menu under the 🔗 (T-242, T-243). */
.share-menu { position: fixed; z-index: 120; max-width: calc(100vw - 16px); display: grid; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 10px 28px var(--shadow); }
.share-menu button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: var(--r-md); font-size: var(--fs-body); font-weight: 700; color: var(--text); white-space: nowrap; }
.share-menu button:hover, .share-menu button:focus-visible { background: var(--soft); }
/* A made GIF or clip, offered (T-1088S): a preview and Share, Copy, Save, in a card in the middle of the screen (the 🔗 may sit low). */
.share-ready { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; display: grid; gap: 8px; width: min(320px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 10px 28px var(--shadow); }
.share-ready .sr-h { margin: 0; font-weight: 800; }
.share-ready .sr-prev { display: block; width: 100%; max-height: 180px; object-fit: contain; border-radius: var(--r-md); background: var(--panel-3); image-rendering: pixelated; }
.share-ready .sr-acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* The share nudge (T-1711A): a sheet over the results after a battle, the audit's mockup. */
.share-nudge { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 7, 18, 0.45); }
.share-nudge .sn-card { width: min(440px, 100%); padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--panel); color: var(--text); border-top: 2px solid var(--accent-fill); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.35); }
@media (min-width: 900px) { .share-nudge { align-items: center; } .share-nudge .sn-card { border-radius: var(--r-lg); border: 1px solid var(--border); border-top: 2px solid var(--accent-fill); padding-bottom: 16px; } }
.share-nudge .sn-t { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h3); }
.share-nudge .sn-b { margin: 6px 0 10px; color: var(--text-dim); }
.share-nudge .sn-thumb { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.share-nudge .sn-thumb img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; image-rendering: pixelated; }
.share-nudge .sn-thumb i { position: absolute; left: 6px; top: 6px; font-style: normal; font-weight: 800; font-size: var(--fs-xs); padding: 3px 6px; border-radius: 4px; background: var(--accent-fill); color: #fff; }
.share-nudge .sn-acts { display: flex; gap: 8px; margin-top: 12px; }
.share-nudge .sn-acts .btn { flex: 1; justify-content: center; }
.share-ready .sr-note { margin: 0; font-size: var(--fs-12); color: var(--text-dim); }

/* The guided tour (T-204): a spotlight on the real page and a bubble beside it; a card on its
   own for the welcome and the end of a chapter. Above every sheet and panel. */
.tour { position: fixed; inset: 0; z-index: 200; }
.tour-block { position: absolute; inset: 0; }
.tour-card .tour-block { background: rgba(3, 7, 18, 0.55); }
.tour-spot { position: fixed; border-radius: var(--r-lg); box-shadow: 0 0 0 200vmax rgba(3, 7, 18, 0.6); outline: 2px solid var(--accent-fill); outline-offset: 2px; pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour-bub { position: fixed; left: 12px; width: min(360px, calc(100vw - 24px)); background: #fff; color: #0f172a; border-radius: var(--r-lg); padding: 12px 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4); transition: top .25s ease, left .25s ease; }
.tour-card .tour-bub { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); text-align: center; padding: 18px; }
.tour-bub h3 { margin: 0 0 4px; font-size: var(--fs-h3); color: #0f172a; }
.tour-card .tour-bub h3 { font-size: var(--fs-h3); }
.tour-bub p { margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.45; color: #334155; }
.tour-chap { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--att-fill); margin-bottom: 2px; }
.tour-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tour-card .tour-row { justify-content: center; }
.tour-bub .btn { color: #0f172a; background: #fff; border: 1px solid #cbd5e1; }
.tour-bub .btn.primary { color: #fff; background: var(--att-fill); border-color: var(--att-fill); }
.tour-bub .tour-link { border: 0; background: none; color: #475569; margin-right: auto; }
.tour-card .tour-link { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-bub { transition: none; } }
.tour-busy .tour-bub { opacity: .75; }
/* T-1711A: a step to try lets its lit controls be tapped through the dark (tour.js guard keeps the rest still). */
.tour.tour-act { pointer-events: none; }
.tour.tour-act .tour-bub { pointer-events: auto; }
.tour-bub .tour-try { margin: -4px 0 10px; font-weight: 700; color: var(--att-fill); }

/* The classic charts folded below the battle (T-263): one line of their numbers, a tap to open. */
.bd-fold { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bd-fold .bf-t { font-weight: 800; white-space: nowrap; }
.bd-fold .bf-sum { flex: 1; min-width: 0; color: var(--text-dim); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-fold .bf-go { color: var(--text-dim); transition: transform .2s ease; }
.bd-fold.open .bf-go { transform: rotate(180deg); }
.bd-fold:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; }
@media (max-width: 560px) { .bd-fold { flex-wrap: wrap; } .bd-fold .bf-sum { order: 3; flex-basis: 100%; white-space: normal; } }

/* The ⋯ menu (T-195): the site's other doors, beside the theme button. */
.more-btn { display: none; }
html[data-layout="new"] .more-btn { display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: var(--fs-h3); font-weight: 800; line-height: 1; cursor: pointer; }
.more-menu { position: fixed; z-index: 120; min-width: 220px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 14px 34px var(--shadow); padding: 6px; display: grid; gap: 2px; }
.more-menu button { text-align: left; font: 600 var(--fs-body)/1.3 inherit; font-family: inherit; color: var(--text); background: none; border: 0; border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; }
.more-menu button:hover, .more-menu button:focus-visible { background: var(--soft); outline: none; }
.more-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
/* T-985: Show tiers in the ⋯ menus (layout.js, the static pages' .sh-menu), its state a small pill on the right. */
.more-menu .mi-tiers { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mi-state { flex: none; min-width: 34px; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 800; text-align: center; color: var(--text-dim); }
.mi-tiers[aria-checked="true"] .mi-state, .mi-tiers[aria-pressed="true"] .mi-state { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* T-1832P: Show tiers first, then the doors; the two groups (Help and guides, About us) open their doors under them, as on the static pages. */
.more-menu > .mi-tiers:first-child { border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 2px; }
.more-menu .mi-grp { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.more-menu .mi-chev { color: var(--text-dim); transition: transform 0.15s; }
.more-menu .mi-grp[aria-expanded="true"] .mi-chev { transform: rotate(90deg); }
.more-menu .mi-sub { display: grid; gap: 1px; margin: 0 0 4px 16px; padding-left: 6px; border-left: 2px solid var(--border); }
.more-menu .mi-sub button { padding: 8px 10px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .more-menu .mi-chev { transition: none; } }

/* ---------- the mark (T-302, Jordan 28 Sep): "this opens in the calculator"; since T-819 (Jordan, 7 Oct) the brand's small
   mark (icons/mark.svg, square, vector, at most 24 px) in place of the three dice, which stay the header's ---------- */
.dice-mark, .dice-i, .tab-dice { display: inline-block; width: auto; flex: none; }
.dice-mark { height: 18px; vertical-align: -4px; }
.dice-i { height: 20px; vertical-align: -5px; margin-right: 6px; }
.tab-dice { height: 22px; }
/* A unit page's offense row, opened in the calculator (T-267). */
.run-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-weight: 700; font-size: var(--fs-ui); line-height: 1.2; color: var(--accent); text-decoration: none; white-space: nowrap; }
/* T-310: on a phone the offense table's cells are narrow; a smaller mark keeps it on one line. */
@media (max-width: 560px) { .run-link { font-size: var(--fs-sm); gap: 4px; } .run-link .dice-mark { height: 15px; vertical-align: 0; } }
.run-link:hover span, .run-link:focus-visible span { text-decoration: underline; }
/* The unit firing (T-266): a unit page's big way into the calculator, its own pixel figure
   shooting at a squad (or charging it), on a dark panel in both themes. */
.cta-sim { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; text-decoration: none; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px 14px 6px 6px; }
.cta-sim:hover, .cta-sim:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
/* One size whatever the figures or words (T-338): the picture in a fixed frame, the line under the title two lines high. */
.cta-fig { display: block; flex: none; background: var(--panel-2); border-radius: var(--r-md); width: 150px; height: 58px; max-width: 40vw; image-rendering: pixelated; }
.cta-txt { display: grid; gap: 1px; min-width: 0; }
.cta-txt b { font-size: var(--fs-lead); font-weight: 900; line-height: 1.15; }
.cta-sim .cta-txt small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-size: var(--fs-ui); font-weight: 600; line-height: 1.25; height: 2.5em; color: var(--text-dim); overflow-wrap: break-word; }
.cta-go { font-size: var(--fs-num); font-weight: 800; color: var(--accent); margin-left: auto; }
.cta-shot { animation: cta-shot 1.6s linear infinite; }
.cta-charge { animation: cta-charge 1.6s ease-in infinite; }
.cta-spark { opacity: 0; animation: cta-spark 1.6s steps(1) infinite; }
.cta-tgt { animation: cta-tgt 1.6s steps(1) infinite; }
@keyframes cta-shot { 0% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(var(--d)); opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes cta-charge { 0%, 15% { transform: translateX(0); } 55% { transform: translateX(var(--d)); } 70%, 100% { transform: translateX(0); } }
@keyframes cta-spark { 0%, 54% { opacity: 0; } 56%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes cta-tgt { 0%, 55% { transform: translateX(0); } 57%, 64% { transform: translateX(1px); } 66%, 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .cta-shot, .cta-charge, .cta-spark, .cta-tgt { animation: none; } .cta-shot { transform: translateX(calc(var(--d) / 2)); } }
/* The mark on other ways into the calculator: buttons, and beside each unit in tables. */
.cta-calc { display: inline-flex; align-items: center; gap: 8px; }
.cta-calc .dice-mark { height: 20px; vertical-align: middle; }
.cta-txt b .dice-mark { height: 20px; vertical-align: -4px; margin-right: 4px; }
/* Beside a unit's name: the bare dice, and "Simulate ›" above them on hover or keyboard focus
   (phones have no hover: the link's name and title say it, and the unit page's button does). */
.nm-run { white-space: nowrap; }
.run-mark { position: relative; display: inline-block; margin-left: 6px; vertical-align: -4px; line-height: 0; }
.run-mark .dice-mark { vertical-align: 0; }
.run-mark:hover .dice-mark { filter: brightness(1.08); }
.rm-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; background: var(--text); color: var(--bg); font: 700 var(--fs-xs)/1 Inter, "Inter Fallback", system-ui, sans-serif; letter-spacing: 0.02em; padding: 5px 8px; border-radius: var(--r-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.rm-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--text); }
.run-mark:hover .rm-tip, .run-mark:focus-visible .rm-tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rm-tip { transition: none; } }
/* The classic charts peeking below the battle (T-273): about a chart and a half, fading out, with
   a clear button on the fade. */
.bd-charts.peek { max-height: var(--peek, 420px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent); }
.bd-more { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; z-index: 2; margin: -44px auto 0; padding: 10px 18px; border-radius: var(--r-pill); border: 0; background: var(--att); color: #fff; font: inherit; font-weight: 800; font-size: var(--fs-body); cursor: pointer; box-shadow: 0 6px 18px var(--shadow-sm); }
.bd-more.open { margin-top: 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.bd-more .bm-go { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.bd-more.open .bm-go { transform: rotate(180deg); background: var(--soft); }
.bd-more:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .bd-more .bm-go { transition: transform .2s ease; } }
/* The meta report from inside the app (Jordan, 28 Sep): Lists and Rankings link to it. */
.meta-link { display: inline-block; margin-top: 6px; font-weight: 700; font-size: var(--fs-body); color: var(--att-soft); text-decoration: none; }
.meta-link:hover, .meta-link:focus-visible { text-decoration: underline; }
/* T-281: the new layout's weapons, one list with a − count + per weapon (like New Recruit), a
   pill for whether it fires or fights, and its numbers opening under it. */
html[data-layout="new"] #flowWeapons, html[data-layout="new"] #attWeaponRow { display: none; }
.wl { display: grid; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.wl-note { margin: 0 0 6px; }
/* T-724: a squad that breaks a squad-wide wargear rule (a list or link can carry one). */
.wl-note.wl-bad { background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; color: var(--text); }
/* Auto-equip (T-423): a small menu at the top of the Weapons sheet. */
.wl-auto { position: relative; justify-self: start; margin: 0 0 6px; z-index: 3; }
.wl-auto > summary { list-style: none; cursor: pointer; font-size: var(--fs-ui); font-weight: 800; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--att); color: var(--text); background: color-mix(in srgb, var(--att) 12%, transparent); }
.wl-auto > summary::-webkit-details-marker { display: none; }
/* T-1603P: Auto Equip's mark (icons/auto-equip.webp) before its name. */
.wl-auto > summary { display: inline-flex; align-items: center; gap: 6px; } .wl-autoi { width: 26px; height: 26px; flex: none; margin: -4px 0 -4px -4px; }
.wl-auto > summary::after { content: " ▾"; color: var(--text-dim); }
.wl-auto[open] > summary::after { content: " ▴"; }
.wl-auto > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.wl-auto-menu { position: absolute; top: calc(100% + 4px); left: 0; display: grid; min-width: 190px; padding: 4px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--panel); box-shadow: 0 10px 28px var(--shadow); }
.wl-auto-menu button { font: inherit; font-size: var(--fs-ui); text-align: left; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); cursor: pointer; }
.wl-auto-menu button:hover, .wl-auto-menu button:focus-visible { background: color-mix(in srgb, var(--att) 16%, transparent); outline: none; }
.wl-auto-menu button:first-child { font-weight: 800; }
/* Best matchup (T-688): beside the attacker's list chip; its card rises over the swap button while the menu is open.
   T-1376P (Jordan, 26 Oct): only while open, or the closed pill showed over the phone's tab bar (z 20) as it scrolled by. */
.uc-from .bm { margin: 0; }
.uc-from .bm[open] { z-index: 30; }
.uc-from .bm > summary { padding: 4px 11px; font-size: var(--fs-ui); white-space: nowrap; }
.unit-card:has(details.bm[open]) { position: relative; z-index: 5; }
/* T-1467P (Jordan, 29 Oct: "when you click it, I want it to have a pop-up that has a toggle for each of those sections"): one
   button opens a panel, a sheet from the bottom on a phone and a dialog on a wide screen: the goal, a switch per part (Weapons on,
   the rest off unless the player kept them on), Cancel and Set it up. Over the setup sheet (z 37) and the tab bar. */
.bmp-open { font: inherit; font-size: var(--fs-ui); font-weight: 800; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--att); 
  cursor: pointer; white-space: nowrap; }
.bmp-open > span[aria-hidden] { color: var(--text-dim); }
.bmp-shade, .bmp-panel { display: none; }
html.bmp-on .bmp-shade { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 23, 0.6); }
html.bmp-on .bmp-panel { display: grid; gap: 12px; position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--panel); border-top: 3px solid var(--att); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -12px 30px var(--shadow); animation: ml-in 0.18s ease-out; }
.bmp-panel[data-side="def"] { border-top-color: var(--def); }
@media (min-width: 700px) { html.bmp-on .bmp-panel { left: 50%; right: auto; bottom: auto; top: 12vh; width: 440px; translate: -50% 0; border: 1px solid var(--border); border-top: 3px solid var(--att); border-radius: var(--r-lg); } }
.bmp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-h3); }
.bmp-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.bmp-goal { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-dim); font-weight: 700; }
.bmp-goal select { font: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--text); background: var(--panel-2); border: 1px solid var(--att); border-radius: var(--r-md); padding: 9px 10px; }
.bmp-sws { display: grid; gap: 6px; }
.bmp-lab { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.bmp-sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
.bmp-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bmp-swt { display: grid; gap: 1px; min-width: 0; }
.bmp-swt b { font-size: var(--fs-body); }
.bmp-swt small { font-size: var(--fs-sm); color: var(--text-dim); }
.bmp-tog { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--border); transition: background 0.15s; }
.bmp-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: translate 0.15s; }
.bmp-sw:has(input:checked) { border-color: var(--att); background: color-mix(in srgb, var(--att) 10%, var(--panel-2)); }
.bmp-sw:has(input:checked) .bmp-tog { background: var(--att-fill); }
.bmp-sw:has(input:checked) .bmp-tog::after { translate: 18px 0; }
.bmp-sw:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.bmp-note, .bmp-need { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.bmp-need { color: var(--lead); font-weight: 700; }
.bmp-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.bmp-cancel { min-height: 46px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.bmp-go { min-height: 46px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--lead) 70%, #000); background: var(--nh-fill); color: var(--nh-on); font: inherit; font-weight: 900; cursor: pointer; }
.bmp-go:disabled { opacity: 0.45; cursor: default; }
@media (prefers-reduced-motion: reduce) { html.bmp-on .bmp-panel { animation: none; } .bmp-tog, .bmp-tog::after { transition: none; } }
/* The toast over the setup sheet (it sat behind it, z 30 under 37, so Best matchup's answer never showed there). */
html.ml-sheet-on .toast, html.bmp-on .toast { z-index: 62; }
html.ml-sheet-on .toast { bottom: calc(var(--rs-tabs, 0px) + 96px + env(safe-area-inset-bottom, 0px)); }
.wl-head { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); padding: 10px 0 4px; }
.wl-head.wl-lead { color: var(--lead); letter-spacing: 0.02em; text-transform: none; font-size: var(--fs-ui); }
.wl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.wl-row .stepper button { width: 32px; height: 32px; font-size: var(--fs-lead); }
.wl-row .stepper output { display: inline-block; min-width: calc(2ch + 14px); font-size: var(--fs-body); text-align: center; font-variant-numeric: tabular-nums; }
.wl-n { min-width: 96px; text-align: center; font-weight: 800; color: var(--text-faint); }
.wl-nm { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.wl-nm small { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-faint); }
.wl-row.off .wl-nm, .wl-row.off .wl-st { color: var(--text-faint); }
.wl-pill { font: inherit; font-size: var(--fs-ui); font-weight: 700; white-space: nowrap; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; }
.wl-pill[aria-pressed="true"] { color: var(--text); border-color: var(--att); background: color-mix(in srgb, var(--att) 16%, transparent); }
.wl-row.melee .wl-pill[aria-pressed="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.wl-pill:disabled { opacity: 0.4; cursor: default; }
.wl-sub { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-ui); color: var(--text-dim); }
.wl-st i { font-style: normal; color: var(--text-faint); }
.wl-prof { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--bg); }
.wl-prof button { font: inherit; font-size: var(--fs-sm); font-weight: 700; padding: 5px 10px; min-height: 24px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-faint); cursor: pointer; }
.wl-prof button[aria-pressed="true"] { background: var(--pick-bg); color: var(--pick-fg); box-shadow: inset 0 0 0 1px var(--pick-bd); }
.wl-ev { white-space: nowrap; }
.wl-ev b { color: var(--text); }
.wl-ev small { margin-left: 4px; color: var(--text-faint); }
.wl-evk { color: var(--text-faint); }
.wl-edit-btn { font: inherit; font-size: var(--fs-lead); font-weight: 700; line-height: 1; padding: 5px 7px; margin: -3px 0 -3px 1px; min-width: 24px; min-height: 24px; border: 0; border-radius: var(--r-sm); background: none; color: var(--att-soft); cursor: pointer; vertical-align: baseline; }
.wl-edit-btn:hover { background: color-mix(in srgb, var(--att) 14%, transparent); }
.wl-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; padding: 0 0 10px; }
.wl-edit label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); text-transform: uppercase; }
.wl-edit input { width: 100%; min-width: 0; font-size: var(--fs-ui); padding: 4px 6px; }
.wl-pill:focus-visible, .wl-prof button:focus-visible, .wl-edit-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* T-285: four tabs. The theme switch lives in ⋯; the ✨ sits with Simulate, not floating over
   rows; the BETA strip leaves phones (What's new and Feedback are in ⋯); Meta's two screens
   share a segment bar. */
html[data-layout="new"] .fx-fab { display: none; }
@media (max-width: 760px) { html[data-layout="new"] .beta-strip { display: none; } }
.so-fx { padding-inline: 10px; }
/* The Simulate row (T-438, Jordan 30 Sep): SIMULATE and ✨ Effects, nothing else; on phones SIMULATE
   takes the row's width, Effects at its right, the same height. */
.bd-bar .so-actions .so-fx { padding: 5px 12px; font-weight: 800; white-space: nowrap; align-self: stretch; }
@media (max-width: 899px) {
  html[data-layout="new"] .bd-bar .so-actions { flex: 1 1 100%; }
  html[data-layout="new"] .bd-bar .so-actions .so-attack { flex: 1 1 auto; justify-content: center; }
}
/* The charts/battle switch: a small pill in the result's top-right corner, the same spot in both
   views; it overlays the first line there, which leaves it room. */
.bd-corner { position: relative; height: 0; z-index: 3; }
#chartSwap { position: absolute; top: 6px; right: 6px; width: 84px; min-height: var(--h-sm); padding: 3px 6px; text-align: center; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px var(--shadow-sm); }
#chartSwap:hover { border-color: var(--text-dim); }
#battleSwap { position: absolute; top: 6px; left: 6px; width: 72px; min-height: var(--h-sm); padding: 3px 6px; text-align: center; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px var(--shadow-sm); }
#battleSwap:hover { border-color: var(--text-dim); }
/* The legend clears both corner pills: Swap top-left (T-483), Charts top-right (T-438). */
.breakdown #bdFlow .flow-legend { padding-left: 80px; }
.breakdown .flow-legend { padding-right: 84px; }
.breakdown .bd-charts { padding-top: 40px; }
.meta-seg { scrollbar-width: none; overscroll-behavior-x: contain;}
.meta-seg::-webkit-scrollbar { display: none; }
.meta-seg a { color: var(--text-dim); text-decoration: none;}
.tabs [data-view="rank"][aria-current] { color: var(--accent); }
html[data-layout="new"] .section-head .meta-link { display: none; }
/* T-286: the unit card, one for any unit (unitcard.js): a sheet from the bottom on phones, a
   centred card on desktop. Tier letters as on the static pages (pages.css, T-219). */
.tier { --tc: var(--tier-d); --te: var(--tier-d-edge); --ti: var(--tier-d-ink); display: inline-block; min-width: 24px; text-align: center; border-radius: 6px; padding: 1px 5px; font-weight: 900; font-size: var(--fs-12); color: var(--ti); border: 2px solid var(--te); background: color-mix(in srgb, var(--tc) 16%, transparent); }
/* T-1082S: the one letter in the app (Rankings, the card): Not rated a dashed dash; T-1566P: our estimate, no reviewer rated it, a dashed coin in its letter's colour. */
.tier.t-none { --tc: var(--text-faint); --te: var(--text-faint); --ti: var(--text-dim); background: none; border-style: dashed; }
.tier.t-est { background: none; border-style: dashed; }
/* The ramp's tokens on :root (T-983): S red, A orange, B yellow, C green, D blue-grey, filled, a dark letter (was T-828's
   pink to grey on a tint). A small square-ish tile, a letter and nothing else, so an S never reads as a red button. */
.tier.t-s { --tc: var(--tier-s); --te: var(--tier-s-edge); --ti: var(--tier-s-ink); } .tier.t-a { --tc: var(--tier-a); --te: var(--tier-a-edge); --ti: var(--tier-a-ink); } .tier.t-b { --tc: var(--tier-b); --te: var(--tier-b-edge); --ti: var(--tier-b-ink); }
.tier.t-c { --tc: var(--tier-c); --te: var(--tier-c-edge); --ti: var(--tier-c-ink); } .tier.t-d { --tc: var(--tier-d); --te: var(--tier-d-edge); --ti: var(--tier-d-ink); }
.ucd-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(2, 6, 23, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.ucd { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -10px 40px var(--shadow); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 761px) { .ucd-scrim { align-items: center; } .ucd { border-radius: var(--r-lg); max-height: 84vh; } }
.ucd-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.ucd-t { flex: 1; min-width: 0; }
.ucd-k { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.ucd-t h2 { margin: 2px 0 0; font-size: var(--fs-h2); line-height: 1.2; overflow-wrap: anywhere; }
.ucd-head .tier { font-size: var(--fs-16); min-width: 34px; padding: 3px 6px; }
.ucd-save, .ucd-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); font-size: var(--fs-h3); line-height: 1; cursor: pointer; }
.ucd-save[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.ucd-save:focus-visible, .ucd-x:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; }
.ucd-body { overflow-y: auto; padding: 12px 16px 14px; display: grid; gap: 10px; }
.ucd-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ucd-tile { display: grid; justify-items: center; gap: 3px; }
.ucd-tile small { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.ucd-rank { margin: 0; font-size: var(--fs-ui); color: var(--text-dim); }
.ucd-traits { display: flex; flex-wrap: wrap; gap: 5px; }
.ucd-trait { font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 8px; color: var(--text-dim); }
.ucd-h { margin: 4px 0 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.ucd-bars { display: grid; gap: 6px; }
.ucd-bar { display: grid; grid-template-columns: 100px minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: var(--fs-ui); }
.ucd-bar i { display: block; height: 9px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--c2), var(--c4)); }
.ucd-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.ucd-lo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ucd-lo li { font-size: var(--fs-ui); background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 8px; }
.ucd-none { margin: 0; color: var(--text-dim); }
.ucd-foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--border); }
/* T-310: Simulate it is the unit pages' animated button; Full page an outline in the weapons blue. */
.ucd-foot .ucd-sim { display: flex; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.ucd-foot .ucd-sim .cta-fig { max-width: 42%; }
.ucd-foot .ucd-sim .cta-txt small { overflow-wrap: anywhere; }
/* The way on (T-451): the unit's page in the site's gradient, and a lighter way across. */
.ucd-foot .ucd-page { display: flex; align-items: center; justify-content: center; min-height: var(--h-lg); text-decoration: none; color: #fff; border: 0; background: linear-gradient(135deg, var(--att), var(--def)); font-weight: 900; box-shadow: 0 4px 12px color-mix(in srgb, var(--def) 30%, transparent); }
.ucd-foot .ucd-page:hover, .ucd-foot .ucd-page:focus-visible { filter: brightness(1.08); }
.ucd-cmp { align-self: center; padding: 6px 10px; border: 0; background: none; color: var(--att-soft); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.ucd-cmp:hover, .ucd-cmp:focus-visible { text-decoration: underline; }
.ucd-fig { flex: none; display: grid; place-items: center; height: 34px; }
.ucd-fig svg { height: 34px; width: auto; }
body.ucd-on { overflow: hidden; }
.uc-info { flex: none; width: var(--h-sm); height: var(--h-sm); border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-dim); font: italic 800 var(--fs-ui)/1 Georgia, serif; cursor: pointer; }
.uc-info:hover, .uc-info:focus-visible { color: var(--text); border-color: var(--att); }
/* Squad nicknames (T-377): ✎ beside a list unit's name, the name on the button, and the editor. */
.uc-nick { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-dim); font-size: var(--fs-body); line-height: 1; cursor: pointer; padding: 0; }
.uc-nick:hover, .uc-nick:focus-visible { color: var(--text); border-color: var(--att); }
.ub-real { display: block; font-size: var(--fs-xs); font-weight: 600; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; }
/* A nicknamed squad's record (T-380). */
.ucd-fo { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.ucd-fo .glyph { width: 14px; height: 14px; }
.xp-b { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 16px; background: rgba(255, 255, 255, 0.18); vertical-align: 1px; white-space: nowrap; }
.my-row .xp-b { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); }
.nk-back { position: fixed; inset: 0; z-index: 400; background: rgba(2, 6, 23, 0.55); display: grid; place-items: center; padding: 16px; }
.nk-box { width: min(100%, 380px); box-sizing: border-box; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.nk-box h3 { margin: 0; font-size: var(--fs-h3); }
.nk-sub { margin: 2px 0 12px; color: var(--text-dim); font-size: var(--fs-ui); }
.nk-row { display: flex; gap: 8px; }
.nk-row input { flex: 1; min-width: 0; min-height: var(--h-lg); box-sizing: border-box; padding: 8px 12px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--panel-2); color: var(--text); font: 700 var(--fs-lead) Inter, "Inter Fallback", system-ui, sans-serif; }
.nk-row input:focus-visible { outline: 2px solid var(--att); outline-offset: 1px; }
.nk-roll { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.nk-roll .glyph { width: 20px; height: 20px; }
.nk-roll:hover, .nk-roll:focus-visible { border-color: var(--att); }
.nk-note { margin: 8px 0 12px; font-size: var(--fs-sm); color: var(--text-faint); }
.nk-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.nk-acts .nk-del { margin-right: auto; }
.find-btn { display: inline-grid; place-items: center; }
/* T-287: My army. Empty: one upload box; with a list: its units rated, each opening its card.
   The calculator's My army row of chips sits above the attacker. */
.my-drop { border: 2px dashed var(--paper-edge); background: transparent; border-radius: var(--r-lg); padding: 18px 14px; display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--text); }
.my-drop.drag { background: var(--paper); }
.my-drop > svg { color: var(--paper-ink); }
.my-drop h3 { margin: 0; font-size: var(--fs-h3); }
.my-drop p { margin: 0; color: var(--text-dim); max-width: 42ch; }
.my-ways { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.my-paste { width: 100%; display: grid; gap: 8px; }
.my-paste textarea { width: 100%; min-height: 120px; font: inherit; font-size: var(--fs-ui); padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-3); color: var(--text); }
.my-paste-row { display: flex; gap: 8px; flex-wrap: wrap; }
.my-paste-row select { flex: 1; min-width: 0; }
.my-formats { font-size: var(--fs-sm) !important; color: var(--text-faint) !important; }
.my-card { margin-top: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.my-h { margin: 0; padding: 10px 12px 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.my-rows { display: grid; }
.my-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); width: 100%; }
.my-rows > .my-row:first-child { border-top: 0; }
.my-row:hover, .my-row:focus-visible { background: var(--panel-2); }
.my-row:focus-visible { outline: 2px solid var(--att); outline-offset: -2px; }
.my-row b { display: block; font-size: var(--fs-body); }
.my-row small { display: block; font-size: var(--fs-sm); color: var(--text-dim); }
.my-row.off { cursor: default; opacity: 0.7; }
.my-row .go { color: var(--text-faint); font-weight: 800; }
.my-rows .my-row { grid-template-columns: minmax(0, 1fr) auto; }
.my-del { border: 0; background: none; color: var(--text-faint); padding: 10px 14px; cursor: pointer; }
.my-private { margin: 10px 2px 0; font-size: var(--fs-sm); color: var(--text-faint); }
.my-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; background: var(--paper); border: 1px solid var(--paper-edge); border-left: 4px solid var(--teal); border-radius: var(--r-lg); padding: 12px; }
.my-k { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--teal); }
.my-t h3 { margin: 2px 0; font-size: var(--fs-h3); }
.my-t small { color: var(--text-dim); }
.my-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.my-rate { margin: 10px 2px 0; font-size: var(--fs-ui); color: var(--text-dim); }
.my-list { margin-top: 10px; }
.my-g { padding: 8px 12px 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); background: var(--panel-2); border-top: 1px solid var(--border); }
.my-list .my-g:first-child { border-top: 0; }
/* T-354: a card per saved list (figure, army · detachments · points · date, units, the make-up
   bar), Use in calculator and the editor's slot; a list opens with what it does in a turn, and
   each unit row has › to its own page. */
.my-drop.slim { padding: 12px 14px; gap: 8px; }
.my-drop.slim > svg { display: none; }
.my-drop.slim h3 { font-size: var(--fs-h3); }
.my-h2 { margin: 18px 2px 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.my-h2 span { color: var(--teal); }
.my-cards { display: grid; gap: 10px; }
@media (min-width: 760px) { .my-cards { grid-template-columns: 1fr 1fr; } }
/* Your lists are paper, as their chip on the calculator is (T-475, T-507). */
.my-lcard { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--r-lg); padding: 4px 12px 10px; display: grid; gap: 8px; min-width: 0; }
.my-lopen { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0 0; min-height: 56px; }
.my-lopen:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; border-radius: var(--r-md); }
.my-lopen b { display: block; font-size: var(--fs-lead); overflow-wrap: anywhere; }
.my-lopen small { display: block; font-size: var(--fs-sm); color: var(--text-dim); }
.my-lopen .go { color: var(--text-faint); font-weight: 800; font-size: var(--fs-h3); }
.my-fig { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--panel-2); overflow: hidden; }
.my-fig svg { max-width: 48px; max-height: 48px; image-rendering: pixelated; }
.my-in { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; vertical-align: 2px; }
.my-in.att { color: var(--att); background: color-mix(in srgb, var(--att) 15%, transparent); }
.my-in.def { color: var(--def); background: color-mix(in srgb, var(--def) 15%, transparent); }
.my-mix { display: flex; height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--panel-2); gap: 1px; }
.my-mix.wait { opacity: 0.5; }
.my-mix i, .my-mixkey i { display: block; min-width: 3px; }
.my-mixkey { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-xs); color: var(--text-dim); margin-top: -4px; }
.my-mixkey span { display: inline-flex; align-items: center; gap: 4px; }
.my-mixkey i { width: 8px; height: 8px; border-radius: 2px; }
.mx-ch { background: var(--c0); } .mx-bl { background: var(--c1); } .mx-in { background: var(--c2); }
.mx-mm { background: var(--c3); } .mx-veh { background: var(--c4); } .mx-ot { background: var(--text-faint); }
.my-lacts { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.my-lacts .my-del { padding: 8px 6px; margin-left: auto; }
.my-use { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 6px; flex: 1 1 100%; max-width: 380px; }
@media (min-width: 560px) { .my-use { flex: 0 1 300px; } }
.my-use > span { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.my-u { padding: 6px 10px; min-height: var(--h-md); font-weight: 700; white-space: nowrap; }
.my-lacts .my-edit, .my-head .my-edit { align-self: end; }
.my-u.att { border-color: var(--att); color: var(--att); }
.my-u.def { border-color: var(--def); color: var(--def); }
.my-u.att:hover { background: color-mix(in srgb, var(--att) 14%, transparent); }
.my-u.def:hover { background: color-mix(in srgb, var(--def) 14%, transparent); }
.my-edit { min-height: var(--h-md); padding: 6px 12px; }
/* Tune your list (T-414, tune.js). */
.tn-top { justify-content: space-between; }
.tn-acts { display: flex; gap: 8px; }
.tn-acts .btn, .tn-save .btn, .tn-add, .tn-drop { min-height: var(--h-lg); }
.tn-pts-bar { margin: 12px 0 4px; display: grid; gap: 6px; }
.tn-ptsline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.tn-ptsline b { font-size: var(--fs-num); font-weight: 800; font-variant-numeric: tabular-nums; }
.tn-ptsline label { color: var(--text-dim); font-size: var(--fs-body); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tn-ptsline select { font: inherit; font-size: var(--fs-body); padding: 4px 6px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.tn-meter { height: 8px; border-radius: var(--r-pill); background: var(--panel-2); overflow: hidden; }
.tn-meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--att); }
.tn-meter.over i { background: var(--amber); }
.tn-over { margin: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--amber); }
.tn-d { font-style: normal; font-size: var(--fs-sm); font-weight: 700; margin-left: auto; color: var(--text-dim); }
.my-st .tn-d { margin: 2px 0 0; display: block; }
.tn-d.up { color: var(--green); } .tn-d.down { color: var(--amber); }
.tn-d.plus, .tn-d.minus { color: var(--text-2); }
.tn-units { display: grid; gap: 8px; margin-top: 10px; }
.tn-unit { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.tn-unit.ch { border-color: color-mix(in srgb, var(--lead) 55%, var(--border)); }
.tn-unit.open { border-color: var(--att); }
.tn-unit .tn-head { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 0; background: none; }
.tn-head > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.tn-head > span:nth-child(2) b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-badge { flex: none; font-size: var(--fs-xs); font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); color: var(--text); background: var(--lead-bg); border: 1px solid color-mix(in srgb, var(--lead) 50%, transparent); }
.tn-pts { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.tn-pts.over { color: var(--amber); }
.tn-body { display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.tn-k { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
.tn-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-pill { font: inherit; font-size: var(--fs-ui); font-weight: 600; min-height: var(--h-lg); padding: 6px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; display: grid; justify-items: center; line-height: 1.2; }
.tn-pill small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); }
.tn-pill[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); }
.tn-pill[aria-pressed="true"] small { color: #fff; }
.tn-wl { margin: 0; padding-left: 18px; font-size: var(--fs-ui); color: var(--text-2); display: grid; gap: 2px; }
.tn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.tn-note { margin: 6px 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.tn-drop { color: var(--red); }
.tn-add { width: 100%; margin-top: 10px; border-style: dashed; }
.tn-adding { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); padding: 10px; display: grid; gap: 8px; }
.tn-addhead { display: flex; align-items: center; gap: 10px; }
.tn-addhead small { flex: 1; color: var(--text-dim); }
.tn-adding input { font: inherit; font-size: var(--fs-body); min-height: var(--h-lg); padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.tn-list { display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.tn-save { margin-top: 12px; display: flex; justify-content: flex-end; }
.tn-acts { flex-wrap: wrap; }
.my-back { border: 0; background: none; color: var(--teal); font: inherit; font-weight: 700; padding: 6px 2px 10px; cursor: pointer; }
.my-head .my-fig { flex: none; }
.my-head .my-t { flex: 1 1 200px; min-width: 0; }
.my-head .my-acts { flex: 1 1 100%; align-items: end; }
.my-ren { border: 0; background: none; color: var(--text-faint); font-size: var(--fs-lead); cursor: pointer; padding: 2px 6px; vertical-align: 1px; }
.my-name { font: inherit; font-size: var(--fs-h3); font-weight: 700; width: 100%; margin: 2px 0; padding: 4px 8px; border-radius: var(--r-md); border: 1px solid var(--teal); background: var(--panel-3); color: var(--text); box-sizing: border-box; }
.my-sumh { margin: 14px 2px 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.my-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.my-st { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 10px; display: grid; gap: 1px; min-width: 0; }
.my-st small { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.my-st b { font-size: var(--fs-num); font-variant-numeric: tabular-nums; color: var(--green); }
.my-st span { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.25; }
.my-stnote { margin: 6px 2px 0; font-size: var(--fs-sm); color: var(--text-faint); }
.my-urow { display: grid; grid-template-columns: minmax(0, 1fr) 40px 44px; align-items: stretch; border-top: 1px solid var(--border); }
.my-urow > .my-row.off { grid-column: 1 / -1; }
.my-nk { border: 0; border-left: 1px solid var(--border); background: none; color: var(--text-faint); font-size: var(--fs-lead); cursor: pointer; padding: 0; }
.my-nk:hover, .my-nk:focus-visible { color: var(--text); background: var(--panel-2); }
.my-list .my-g + .my-urow { border-top: 0; }
.my-urow .my-row { border-top: 0; min-height: 52px; }
.my-pg { display: grid; place-items: center; color: var(--text-faint); font-weight: 800; font-size: var(--fs-h3); text-decoration: none; border-left: 1px solid var(--border); }
.my-pg:hover, .my-pg:focus-visible { color: var(--teal); background: var(--panel-2); }
.my-pg.none { border-left: 0; }
/* T-288: Meta. The tier list shows each unit's tier letter under its rank and ★ on your own units
   (what's winning is the Meta page, /meta/, since T-815; its styles are pages.css's). */
.rk-rank { display: grid; justify-items: center; gap: 3px; }
.rk-rank .tier { min-width: 22px; font-size: var(--fs-12); padding: 0 3px; border-width: 1.5px; }
.rk-tag.rk-mine { color: var(--teal); border-color: var(--teal); }
/* T-289: Matchup's own side is My army: a line back to it in place of the four ways in. */
.src-mine { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; margin: 6px 0 8px; border-radius: var(--r-md); border: 1px solid var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); font-size: var(--fs-ui); font-weight: 700; color: var(--text); }
.src-mine b { color: var(--teal); }
.src-mine:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; }
/* T-290: a side's sheet in tabs, one part at a time. */
.sh-sec.off { display: none; }
.sh-sec { border-bottom: none; }
/* T-291: a new visitor's card, and the Meta door under Matchup's (amber, as the Meta tab). */
/* T-1421P (Jordan, 27 Oct: "more obvious - yellow/gold with the solid outline and faded inside and the buttons inside, with the
   largest button being SIMULATE with a slow shiny and slow floating effect"): the card in the leaders' gold, SIMULATE first and
   biggest, a slow shine across it and a slow float; reduced motion keeps it still. */
.nl-hello { position: relative; display: grid; gap: 12px; margin: 0 0 12px; padding: 14px 16px 16px; border-radius: var(--r-lg); border: 2px solid var(--lead); background: linear-gradient(160deg, color-mix(in srgb, var(--lead) 16%, var(--panel)) 0%, color-mix(in srgb, var(--lead) 5%, var(--panel)) 100%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lead) 10%, transparent); }
.nh-t b { color: var(--lead); }
.nh-go { display: flex; justify-content: center; padding: 6px 0 2px; }
.nh-sim { animation: nh-float 3.6s ease-in-out infinite; }
.nh-sim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, white 45%, transparent) 50%, transparent 65%); background-size: 250% 100%; background-position: 160% 0; animation: nh-shine 4.5s ease-in-out infinite; }
@keyframes nh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes nh-shine { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .nh-sim, .nh-sim::after { animation: none; } }
/* T-1428P (Jordan, 27 Oct: "the other buttons need better layout and to adhere to similar color motifs, make them stick out"):
   the three doors under SIMULATE, one centred row of equal gold buttons: Upload filled gold, the other two gold-edged on a
   gold wash; on a phone each a tile, its icon over its label. */
.nh-t { padding-right: 32px; }
.nh-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 600px; margin: 0 auto; }
.nh-b.btn { justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--lead) 70%, transparent); background: color-mix(in srgb, var(--lead) 13%, var(--panel)); color: var(--text); font-weight: 800; box-shadow: 0 2px 0 color-mix(in srgb, var(--lead) 30%, transparent); transition: transform .12s, box-shadow .12s, background .12s; }
.nh-b.btn .ico { color: var(--lead); }
.nh-b.btn:hover { background: color-mix(in srgb, var(--lead) 22%, var(--panel)); transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--lead) 30%, transparent); }
.nh-b.btn:active { transform: translateY(1px); box-shadow: none; }
.nh-main.btn { background: var(--nh-fill); border-color: transparent; color: var(--nh-on); box-shadow: 0 2px 0 color-mix(in srgb, var(--lead) 45%, black), 0 0 14px color-mix(in srgb, var(--lead) 30%, transparent); }
.nh-main.btn .ico { color: inherit; }
.nh-main.btn:hover { background: var(--nh-fill); filter: brightness(1.06); }
@media (max-width: 560px) { .nh-b.btn { flex-direction: column; gap: 4px; padding: 10px 6px; font-size: var(--fs-ui); line-height: 1.15; text-align: center; } }
.nh-t b { display: block; font-size: var(--fs-lead); }
.nh-t span { font-size: var(--fs-ui); color: var(--text-dim); }
.nh-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; }
/* The three doors (T-305, Jordan 28 Sep): My army, Matchup and Meta as the same big card, each in
   its own colours (the Matchup card keeps blue into purple). */
.nl-doors { margin-top: 4px;}
.nl-door .door-ic { line-height: 1; justify-content: center;}
/* T-935/T-936: the doors are one quiet strip (a --panel-2 fill, no coloured frame), their buttons outlines in the accent, so
   they no longer outweigh SIMULATE or the unit cards above them. The META wordmark keeps its green (T-311): it's a picture. */
.door-mine .go { font-family: inherit; cursor: pointer; }
/* Your list's three doors (T-437): Open in My army · Set as attacker · Set as defender. */
.door-mine .door-acts { grid-area: go; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-width: 0; }
.door-mine .dact[data-door="open"] { flex-basis: 100%; }
.door-mine .door-acts .go { flex: 1; }
.door-mine .dact { flex: 1 1 0; min-width: 0; padding: 9px 6px; border-radius: var(--r-md); border: 1.5px solid var(--teal); background: var(--panel); color: var(--text);
  font: inherit; font-size: var(--fs-ui); font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.door-mine .dact[data-door="att"] { border-color: var(--att); }
.door-mine .dact[data-door="def"] { border-color: var(--def); }
.door-mine .dact:hover { background: var(--panel-2); }
.door-mine.has-list { cursor: default; }
/* T-1377P (Jordan, 26 Oct: the buttons were "not quite centered"): with a list, its buttons run the card's whole width. */
.nl-bridge.door-mine.has-list { grid-template-areas: "art txt" "go go"; }
.door-mine.has-list:hover { transform: none; }
/* T-311 (Jordan): Meta is green, its picture a META wordmark. */

.nl-door .door-wm { font: 700 var(--fs-h1)/1 Cinzel, Georgia, serif; border-top: 3px solid var(--green); border-bottom: 3px solid var(--green);
  background: linear-gradient(180deg, var(--green), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent;}
.nl-door .door-wm { border-image: linear-gradient(90deg, var(--green), var(--teal)) 1; }
/* T-939 (the 9 Oct layout appraisal, item 3): the doors are quiet secondary cards, well under SIMULATE and the unit cards:
   a hairline outline, no fill, the picture small, the words at body size, and a small outline button under them. */
.nl-doors { }
.nl-bridge.nl-door { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art txt" "art go"; justify-items: start; align-items: start; text-align: left;
  gap: var(--s-2) var(--s-4); padding: var(--s-4); background: transparent; border: 1px solid var(--border); }
.nl-bridge.nl-door:hover { transform: none; box-shadow: none; border-color: var(--text-faint); }
.nl-door .door-ic { font-size: var(--fs-h2); width: 32px; padding-top: 2px; }
.nl-door .door-ic .glyph { width: 22px; height: 22px; }
.nl-door .door-wm { width: auto; font-size: var(--fs-ui); letter-spacing: var(--track); padding: 3px 0; border-top-width: 2px; border-bottom-width: 2px; }
.nl-door .brg-txt b { font-size: var(--fs-body); font-weight: 800; }
.nl-door .brg-txt span { font-size: var(--fs-sm); }
.nl-door .go { width: auto; min-height: var(--h-sm); font-size: var(--fs-ui); font-weight: 800; padding: 0 var(--s-4); border-color: var(--border); }
.nl-door .door-acts { width: 100%; }
.nl-door .door-acts .go { flex: none; }
/* The classic charts' row on desktop (T-939; app.js placeCharts): its own card across both columns; five across when wide. */
.nl > .nl-charts { grid-area: chr; margin-top: var(--s-4); min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); }
@media (min-width: 1181px) {
  .nl-charts .bd-charts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nl-charts .bd-charts .chart-card, .nl-charts .bd-charts .chart-card:nth-child(n + 4) { grid-column: auto; }
}
/* T-293: the classic charts always open under the battle, two to a row on phones; the fold line
   is their heading. */
.bd-fold.static { cursor: default; }
.bd-fold.static .bf-go { display: none; }
@media (max-width: 760px) {
  html[data-layout="new"] .bd-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-layout="new"] .bd-charts .chart-card, html[data-layout="new"] .bd-charts .chart-card:nth-child(n + 4) { grid-column: auto; }
  html[data-layout="new"] .bd-charts .chart-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-layout="new"] .bd-charts .chart-card { padding: 10px 8px; }
  html[data-layout="new"] .bd-charts .chart-card .conv, html[data-layout="new"] .bd-charts .chart-card .target { font-size: var(--fs-xs); }
  html[data-layout="new"] .bd-charts .chart-card .stats-line { font-size: var(--fs-xs); padding: 4px; }
  html[data-layout="new"] .bd-charts .chart-card svg { height: 80px; }
}
/* T-295: this roll's numbers on the funnel, above the averages; each row named at its left;
   our address in the logo's lettering. */
.flow .stage-sim { fill: var(--lead); font-size: var(--fs-body); font-weight: 900; font-variant-numeric: tabular-nums; }
.flow .row-k { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.02em; }
.flow .stage-sim.row-k { font-size: var(--fs-xs); }
/* T-1831P: once rolled, this roll's number is the big one and the average steps back. */
.so-rolled .stage-sim:not(.row-k) { font-size: calc(var(--fs-16) * 1.125); }
.so-rolled .stage-v { font-size: var(--fs-12); font-weight: 700; fill: var(--text-dim); }
#flow .wm { font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.08em; }
/* T-296: the share button says so, and a battle's end offers its GIF. */
#shareBtn { font-size: var(--fs-ui); font-weight: 700; padding: 5px 11px; }
#shareBtn::before { content: none; }
.act-pill { position: relative; min-height: var(--h-sm); font-size: var(--fs-sm); font-weight: 700; padding: 0 10px; white-space: nowrap; }
.act-pill .ico { margin-right: 0.35em; }
.ans-big { padding-right: 96px; }
/* With Post GIF beside Share, the roll's line leaves room for both (T-517). */
.answer:has(#soGif:not([hidden])) .ans-roll { padding-right: 190px; }
.breakdown .answer:has(#soGif:not([hidden])) .ans-roll { padding-right: 168px; }
/* On a phone the roll's words come first: with both pills, they shrink to their glyphs (named by
   their aria-labels) rather than wrap "This roll: 10 wounds · 10 slain". */
@media (max-width: 560px) {
  .ans-acts:has(#soGif:not([hidden])) .act-t { display: none; }
  .ans-acts:has(#soGif:not([hidden])) .act-pill .ico { margin-right: 0; }
  .answer:has(#soGif:not([hidden])) .ans-roll, .breakdown .answer:has(#soGif:not([hidden])) .ans-roll { padding-right: 84px; }
}
/* T-297: a joined character's wargear, one choice per option on its datasheet. */
.wl-kit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 6px; font-size: var(--fs-sm); color: var(--text-dim); min-width: 0; }
.wl-kit > span { font-weight: 700; }
.wl-kit select { flex: 1 1 180px; min-width: 0; max-width: 100%; font: inherit; font-size: var(--fs-ui); padding: 5px 8px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--lead) 50%, var(--border)); background: var(--panel); color: var(--text); }
.join-m .wl-kit { grid-column: 1 / -1; padding: 4px 0 0; font-size: var(--fs-xs); }

/* T-387: a unit's share of its army's winning lists, month by month. Unit pages. */
.spark { display: inline-block; vertical-align: middle; color: var(--green); overflow: visible; }
.spark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: currentColor; }
.spark .sp-base { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }

/* Matchup (T-314, Jordan 28 Sep): your chosen unit stands out and the rest of your list fades
   back; each of theirs glows green, yellow or red by how the pairing trades points both ways
   (app.js comparison), gently pulsing until one is tapped. */
:root { --mu-even: #FACC15; }
:root[data-theme="light"] { --mu-even: #A16207; }
.roster-units.has-sel .roster-unit:not(.selected) { opacity: 0.5; transition: opacity 0.15s; }
.roster-units.has-sel .roster-unit:not(.selected):hover, .roster-units.has-sel .roster-unit:not(.selected):focus-visible { opacity: 1; }
#roster0 .roster-units.has-sel .roster-unit.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--att) 25%, transparent), 0 0 22px color-mix(in srgb, var(--att) 45%, transparent); }
#roster1 .roster-unit.mu-good { --mu: var(--green); }
#roster1 .roster-unit.mu-even { --mu: var(--mu-even); }
#roster1 .roster-unit.mu-bad { --mu: var(--red); }
#roster1 .roster-unit.mu-good, #roster1 .roster-unit.mu-even, #roster1 .roster-unit.mu-bad {
  margin-block: 4px; border: 1px solid color-mix(in srgb, var(--mu) 65%, transparent); border-left: 4px solid var(--mu);
  background: color-mix(in srgb, var(--mu) 8%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--mu) 25%, transparent); }
#roster1 .roster-unit.selected.mu-good, #roster1 .roster-unit.selected.mu-even, #roster1 .roster-unit.selected.mu-bad,
#roster1 .roster-unit.expanded.mu-good, #roster1 .roster-unit.expanded.mu-even, #roster1 .roster-unit.expanded.mu-bad {
  border-color: var(--mu); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mu) 35%, transparent), 0 0 18px color-mix(in srgb, var(--mu) 40%, transparent); }
.roster-units.to-pick .roster-unit.mu-good, .roster-units.to-pick .roster-unit.mu-even, .roster-units.to-pick .roster-unit.mu-bad { animation: mu-glow 2.2s ease-in-out infinite alternate; }
@keyframes mu-glow { from { box-shadow: 0 0 5px color-mix(in srgb, var(--mu) 15%, transparent); } to { box-shadow: 0 0 16px color-mix(in srgb, var(--mu) 45%, transparent); } }
.mu-tag { display: inline-block; margin-left: 6px; font-size: var(--fs-xs); font-weight: 900; letter-spacing: var(--track); text-transform: uppercase; color: var(--mu); white-space: nowrap; }
@media (max-width: 760px) { .mu-tag { display: block; margin-left: 0; font-size: var(--fs-micro); } }
@media (prefers-reduced-motion: reduce) { .roster-units.to-pick .roster-unit.mu-good, .roster-units.to-pick .roster-unit.mu-even, .roster-units.to-pick .roster-unit.mu-bad { animation: none; } }

.det-win { margin: 0 0 8px; }
.det-win small { color: var(--text-faint); }

/* ---------- the unit picker (T-347): big buttons that fold into pinned drawers ----------
   One question a screen; its answer folds into a drawer (LABEL · Value) that reopens that level.
   Tokens are the site's own; the one tinted card a screen is the recommended one (green). */
.pk-pop .pop-card.pk { overflow: hidden;}
.pk { --pk-acc: var(--att); }
.pk.def { --pk-acc: var(--def); border-top-color: var(--def); }
.pk.card { border-top-color: var(--teal); }
.pk-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.pk-sides { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.pk-side { min-width: 0; display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pk-side span { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.pk-side b { font-size: var(--fs-ui); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-side.att.on { border-color: var(--att); background: color-mix(in srgb, var(--att) 14%, var(--panel)); }
.pk-side.att.on span { color: var(--att); }
.pk-side.def.on { border-color: var(--def); background: color-mix(in srgb, var(--def) 14%, var(--panel)); }
.pk-side.def.on span { color: var(--def); }
.pk-swap { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-body); cursor: pointer; }
.pk-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* T-1224B: Show tiers in the picker's corner, the box over its word to keep the header's two sides wide; the letters in the rows. */
.pk-tsw { flex: none; flex-direction: column; gap: 2px; min-height: 0; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.pk-tier { min-width: 22px; margin-right: 8px; padding: 0 4px; font-size: var(--fs-xs); vertical-align: 1px; }
.pk-title span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--teal); }
.pk-title b { font-size: var(--fs-lead); }
.pk-nudge { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: var(--fs-ui); font-weight: 700; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--def) 14%, var(--panel)); }
.pk-nudge[data-for="att"] { background: color-mix(in srgb, var(--att) 14%, var(--panel)); }
.pk-nudge span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-nudge button { flex: none; border: none; background: none; color: var(--pk-acc); font: inherit; font-weight: 800; cursor: pointer; min-height: 32px; }
/* Pinned: the search, the scope while typing, the drawers. */
.pk-pin { flex: none; display: grid; gap: 8px; border-bottom: 1px solid var(--border); }
.pk-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--panel-3); }
.pk-search:focus-within { border-color: var(--pk-acc); }
.pk-search input { flex: 1; min-width: 0; height: 100%; border: none; background: none; color: var(--text); font: inherit; font-size: var(--fs-body); outline: none; }
.pk-search input::-webkit-search-cancel-button { display: none; }
.pk-clear { border: none; background: none; color: var(--text-faint); font: inherit; cursor: pointer; padding: 6px; }
.pk-scope { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); }
.pk-scope button { border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px; background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.pk-scope button.on { border-color: var(--pk-acc); color: var(--pk-acc); background: color-mix(in srgb, var(--pk-acc) 12%, transparent); }
.pk-drawers { display: flex; flex-direction: column; gap: 6px; max-height: 122px; overflow-y: auto; scrollbar-width: none; }
.pk-drawers::-webkit-scrollbar { display: none; }
.pk-drawers.fade { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.pk-drawer { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--h-md); padding: 7px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer; }
.pk-lv { flex: none; width: 56px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.pk-drawer b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pk-auto { flex: none; font-size: var(--fs-micro); font-weight: 700; color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 5px; }
.pk-ch { flex: none; font-size: var(--fs-sm); color: var(--text-faint); white-space: nowrap; }
.pk-drawer.last { border-color: var(--pk-acc); background: color-mix(in srgb, var(--pk-acc) 12%, var(--panel)); }
.pk-drawer.last .pk-lv { color: var(--pk-acc); }
.pk-drawer.in { animation: pk-drop 0.18s ease-out; }
/* The level: one question, then its choices. */
.pk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 16px; }
.pk-body.up { animation: pk-rise 0.18s ease-out; }
/* The body scrolls, not its children (T-366): a list, grid or tile set keeps its full height
   rather than shrinking to the sheet's and clipping its rows behind its rounded corners. */
.pk-body > * { flex: 0 0 auto; }
.pk-q { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.pk-q span { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.pk-q.stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-big { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-content: start; min-height: 88px; padding: 12px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s, opacity 0.15s; }
.pk-big:hover, .pk-big:focus-visible { border-color: var(--pk-acc); }
.pk-big:active { transform: scale(0.98); background: color-mix(in srgb, var(--pk-acc) 8%, var(--panel)); }
.pk-big .pk-ic { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--pk-acc); margin-top: 1px; }
.pk-big > b { font-size: var(--fs-lead); font-weight: 800; line-height: 1.2; }
.pk-big small { font-size: var(--fs-sm); line-height: 1.35; color: var(--text-dim); }
.pk-big small b { color: var(--text); font-weight: 800; }
.pk-big.wide { grid-column: 1 / -1; min-height: 0; }
.pk-big.army { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--panel)); }
.pk-big.army .pk-ic { color: var(--green); }
.pk-big.sup .pk-ic { color: var(--gold); }
.pk-big.dim, .pk-tile.dim { opacity: 0.5; }
.pk-big.folding, .pk-tile.folding { transform: scale(0.94) translateY(-8px); opacity: 0.3; transition: transform 0.15s ease-in, opacity 0.15s ease-in; }
.pk-glyph { display: block; width: 100%; height: 100%; }
.pk-badge { font-size: var(--fs-micro); font-weight: 800; padding: 1px 6px; border-radius: var(--r-sm); vertical-align: middle; background: color-mix(in srgb, var(--gold) 18%, var(--panel)); color: var(--gold); }
.pk-badge.rec { background: color-mix(in srgb, var(--green) 18%, var(--panel)); color: var(--green); }
/* Factions: our trooper for each, three to a row. */
.pk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 96px; padding: 10px 6px 8px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--panel); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: transform 0.12s, border-color 0.12s, opacity 0.15s; }
.pk-tile:hover, .pk-tile:focus-visible { border-color: var(--pk-acc); }
/* Army glyphs (T-375): a tile's corner, a list card's name. */
.army-gl { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; flex: none; }
.pk-tile:active { transform: scale(0.97); }
.pk-fig { height: 48px; width: 48px; display: grid; place-items: end center; border-radius: var(--r-lg); background: var(--panel-2); overflow: hidden; }
.pk-fig svg { max-height: 48px; width: auto; }
/* A figure (T-489) stands a little off the frame's foot; a portrait's shoulders sit on it. */
.pk-fig.fig { padding-bottom: 4px; } .pk-fig.fig svg { max-height: 42px; }
.pk-tile b { font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.pk-tile small { font-size: var(--fs-xs); color: var(--text-faint); }
.pk-yours { color: var(--green); font-weight: 800; }
/* Rows: units and lists, in one box with group headings. */
.pk-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pk-role { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 7px 4px 6px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--panel); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.pk-role:hover, .pk-role:focus-visible { border-color: var(--pk-acc); }
.pk-role.on { border-color: var(--pk-acc); background: color-mix(in srgb, var(--pk-acc) 16%, var(--panel)); box-shadow: inset 0 0 0 1px var(--pk-acc); }
.pk-ric { width: 22px; height: 22px; color: var(--pk-acc); }
.pk-ric svg { width: 100%; height: 100%; }
.pk-role b { font-size: var(--fs-xs); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.pk-role small { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* T-1180B: the roles as one scrolling row of chips, the units right under them. */
/* T-1441P: an army's units as drawers, one per role, closed but the side's unit's own; the count on each head. */
.pk-drs { display: flex; flex-direction: column; gap: 8px; }
.pk-dr { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: clip; }
.pk-dr > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; cursor: pointer; user-select: none; }
.pk-dr > summary::-webkit-details-marker { display: none; }
.pk-dr > summary .pk-ric { width: 18px; height: 18px; flex: none; color: var(--pk-acc); }
.pk-dr > summary b { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); font-weight: 800; }
.pk-dr > summary small { flex: none; min-width: 28px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--chip-bg); color: var(--text-dim); font-size: var(--fs-sm); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pk-dr > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform 0.2s; }
.pk-dr[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pk-dr > summary:hover, .pk-dr > summary:focus-visible { background: var(--panel-2); }
.pk-dr[open] > summary { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--pk-acc) 12%, var(--panel)); border-bottom: 1px solid var(--border); }
.pk-dr > .pk-list { border: 0; border-radius: 0; }
.pk-row.cur { background: color-mix(in srgb, var(--pk-acc) 12%, transparent); box-shadow: inset 3px 0 0 var(--pk-acc); }
@media (prefers-reduced-motion: no-preference) { .pk-dr[open] > .pk-list { animation: pkRoleIn 0.16s ease-out; } }
.pk-roles.chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
.pk-roles.chips .pk-role { flex: none; flex-direction: row; min-height: 40px; padding: 6px 12px; border-radius: var(--r-pill); gap: 6px; }
.pk-roles.chips .pk-ric { width: 16px; height: 16px; }
.pk-roles.chips .pk-role b { font-size: var(--fs-ui); white-space: nowrap; }
.pk-armies { flex-wrap: wrap; }
.pk-drawer.pk-armydr b { font-size: var(--fs-body); }
/* T-1467P: the side's army as a label in its group's colour (Imperium gold, Space Marines blue, Chaos red, Xenos purple), big and
   bold, with Change as a tag at its end. */
.pk-drawer.pk-armydr[data-gs] { min-height: 58px; padding: 8px 10px 8px 14px; border: 2px solid var(--side); border-left-width: 6px;
  background: color-mix(in srgb, var(--side) 14%, var(--panel)); }
.pk-drawer.pk-armydr[data-gs] .pk-lv { color: var(--side); }
.pk-drawer.pk-armydr[data-gs] b { font-family: var(--font-head); font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); letter-spacing: 0.01em; }
.pk-chtag { flex: none; padding: 6px 12px; border-radius: var(--r-pill); background: var(--side, var(--pk-acc)); color: #0B1120; font-weight: 900; font-size: var(--fs-ui); letter-spacing: 0.02em; }
:root[data-theme="light"] .pk-drawer.pk-armydr[data-gs] .pk-lv { color: var(--text-dim); }
:root[data-theme="light"] .pk-chtag { color: #fff; }
.pk-rolehint { margin: 4px 2px; font-size: var(--fs-ui); color: var(--text-dim); }
@media (prefers-reduced-motion: no-preference) { .pk-rolelist { animation: pkRoleIn 0.16s ease-out; } }
@keyframes pkRoleIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pk-list { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); overflow: hidden; }
.pk-grp { padding: 8px 12px 4px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); background: var(--panel-2); }
.pk-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding-right: 10px; border-top: 1px solid var(--border); }
.pk-grp + .pk-row, .pk-list > .pk-row:first-child { border-top: none; }
.pk-name { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 12px; border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pk-row:hover { background: var(--panel-2); }
.pk-name:active { background: color-mix(in srgb, var(--pk-acc) 8%, transparent); }
.pk-name b { font-size: var(--fs-body); line-height: 1.25; }
.pk-name small { font-size: var(--fs-sm); color: var(--text-dim); }
.pk-chev { flex: none; color: var(--text-faint); font-size: var(--fs-body); }
.pk-sizes { flex: none; display: flex; gap: 4px; }
.pk-size { min-width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 800; cursor: pointer; }
.pk-size:hover, .pk-size:focus-visible { border-color: var(--pk-acc); color: var(--pk-acc); }
.pk-army { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pk-army .pk-ic { flex: none; width: 18px; height: 18px; color: var(--green); }
.pk-army > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pk-army b { color: var(--green); font-size: var(--fs-body); }
.pk-army small { font-size: var(--fs-sm); color: var(--text-dim); }
.pk-again { align-self: stretch; min-height: var(--h-lg); border-radius: var(--r-lg); border: 1.5px solid var(--pk-acc); background: none; color: var(--pk-acc); font: inherit; font-weight: 800; cursor: pointer; }
.pk-wait { color: var(--text-dim); font-size: var(--fs-ui); margin: 0; }
.pk-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px; border-radius: var(--r-lg); border: 1.5px dashed var(--border); }
.pk-empty b { font-size: var(--fs-lead); }
.pk-empty p { margin: 0; color: var(--text-dim); font-size: var(--fs-ui); }
.pk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pk-mini { min-height: var(--h-md);}
.pk-mini.fill { background: var(--pk-acc); color: #fff; }
.pk-foot { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.pk-foot .btn { min-height: var(--h-lg); border-radius: var(--r-pill); }
.pk-foot .pop-done { flex: 1; }
.pk.def .pop-done { background: var(--def); border-color: var(--def); }
/* T-1442P: the picker's Done in the New here? card's gold (its main button), on either side. */
.pk .pk-foot .pop-done, .pk.def .pk-foot .pop-done { background: var(--nh-fill); border: 1px solid color-mix(in srgb, var(--lead) 70%, #000); color: var(--nh-on); font-weight: 900; letter-spacing: 0.02em; box-shadow: 0 3px 12px color-mix(in srgb, var(--lead) 28%, transparent); }
@keyframes pk-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pk-big, .pk-tile { transition: none; }
  .pk-drawer.in, .pk-body.up { animation: none; }
  .pk-big.folding, .pk-tile.folding { transform: none; opacity: 1; }
}
@media (max-width: 760px) {
  .pk-pop .pop-card.pk { height: 92vh; height: 92dvh; }
  .pk-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop: the drawers become one breadcrumb line; four big buttons and six figures a row. */
@media (min-width: 900px) {
  .pk-drawers { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .pk-drawers.fade { -webkit-mask-image: none; mask-image: none; }
  .pk-drawer { width: auto; min-height: var(--h-sm); padding: 5px 10px; border-radius: var(--r-pill); }
  .pk-lv { width: auto; }
  .pk-drawer b { max-width: 180px; }
  .pk-ch { display: none; }
  .pk-grid { grid-template-columns: repeat(4, 1fr); }
  .pk-tiles { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Matchup as folds (T-348; mockup https://claude.ai/artifact/JhSkFzxVv1ugHeTAdg1JVJ) ----------
   Blue is yours, purple theirs, green the answer. At rest both columns; a tapped side folds
   into a drawer on phones (desktop: it lights up), the other column sorts with one number a
   row, and a pair opens its card (phones: under the drawers; desktop: a third column). */
html[data-layout="new"] .mx .section-head > :is(h2, p) { display: none; }
html[data-layout="new"] .mx .section-head .sh-btns:empty { display: none; }
.mx-top { display: grid; gap: 8px; margin: 0 0 10px; }
.mx-heads { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.mx-hd { display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: var(--h-lg); justify-content: center; border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 2px 0; }
.mx-hd.def { text-align: right; align-items: flex-end; }
.mx-hd span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; }
.mx-hd.att span { color: var(--att); } .mx-hd.def span { color: var(--def); }
.mx-hd b { font-size: var(--fs-ui); font-weight: 800; color: var(--att); }
.mx-hd.def b { color: var(--def); }
.mx-swap #rosterSwap { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: var(--fs-body); }
.mx-swap #rosterSwap span { display: none; }
.mx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-lc { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); }
.mx-lc.att { border-left: 3px solid var(--att); } .mx-lc.def { border-left: 3px solid var(--def); }
.mx-lc > b { font-size: var(--fs-ui); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.mx-lc > small { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-lc.empty { padding: 0; border-style: dashed; }
.mx-lc-empty { min-height: var(--h-lg); width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 700; text-align: left; cursor: pointer; }
.mx-dot { display: inline-block; width: 10px; height: 10px; margin-left: 5px; padding: 0; border: none; border-radius: 50%; background: var(--amber); vertical-align: middle; cursor: pointer; }
.mx-dot::before { content: ""; position: absolute; inset: -8px; }
.mx-dot { position: relative; }
.mx-x { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--text-faint); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.mx-x:hover { color: var(--text); }
.mx-intro { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
html[data-layout="new"] .mx .nl-cmpwrap { margin: 0; }
.mx .nl-cmpline { border-radius: var(--r-md); border-style: solid; border-width: 1px; border-color: var(--border); padding: 5px 10px; gap: 4px 6px; font-size: var(--fs-sm); }
.mx-ol { color: var(--text-dim); font-weight: 700; }
.mx-pill { display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.mx-pill[aria-pressed="true"] { border-color: var(--att); color: var(--att); background: color-mix(in srgb, var(--att) 12%, var(--panel)); }
.mx #cmpPopBody .mu-toggle { justify-self: start; }
/* The drawers a pick folds into (phones). */
.mx-drawers { display: flex; flex-direction: column; gap: 6px; }
.mx-drawer { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--h-lg); padding: 7px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer; animation: pk-drop 0.18s ease-out; }
.mx-lv { flex: none; width: 56px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; }
.mx-drawer.att .mx-lv { color: var(--att); } .mx-drawer.def .mx-lv { color: var(--def); }
.mx-drawer b { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ch { flex: none; font-size: var(--fs-sm); color: var(--text-faint); white-space: nowrap; }
.mx-drawer.last.att { border-color: var(--att); background: color-mix(in srgb, var(--att) 12%, var(--panel)); }
.mx-drawer.last.def { border-color: var(--def); background: color-mix(in srgb, var(--def) 12%, var(--panel)); }
/* The columns: no source tabs (the picker has them), no list heading (the band has it). */
html[data-layout="new"] .mx :is(.src-tabs, .src-mine, .side-clear, .nl-colhead, .roster-head, .roster-warn, .roster-swap, .ru-num) { display: none !important; }
html[data-layout="new"] .mx .roster-units > :is(.ru-join, .ru-split) { display: none; }
html[data-layout="new"] .mx .roster-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
html[data-layout="new"] .mx .roster-col .side-label { top: var(--top-h, 58px); }
.mx .sl-t { display: flex; flex-direction: column; align-items: flex-start !important; gap: 0; }
.mx .sl-t > span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mx .sl-t > small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.mx .roster-unit.selected { background: color-mix(in srgb, var(--att) 12%, var(--panel)); box-shadow: inset 3px 0 0 var(--att); }
.mx #roster1 .roster-unit.selected { background: color-mix(in srgb, var(--def) 12%, var(--panel)); box-shadow: inset 3px 0 0 var(--def); }
.mx .roster-unit { min-height: var(--h-lg); }
/* A scored column: one number a row with a bar, the best tabbed, the ones that barely touch it faded at the bottom. */
.mx .mx-scored .roster-unit { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.mx .mx-scored .roster-unit > .ru-top { grid-column: 1; grid-row: 1; min-width: 0; }
.mx .mx-scored .roster-unit :is(.cmp-mini, .ru-pts, .att-badge, .best-badge) { display: none !important; }
.mx-sc { grid-column: 2; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mx-sc b { display: block; font-size: var(--fs-lead); font-weight: 900; }
.mx-sc small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.mx-bar { grid-column: 1 / -1; grid-row: 2; height: 5px; margin-top: 4px; border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; }
.mx-bar i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--att); }
#roster1 .mx-bar i { background: var(--def); }
.mx-best { position: absolute; right: 10px; top: -1px; padding: 1px 6px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: var(--fs-micro); font-weight: 800; color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--panel)); }
.mx .mx-scored .roster-unit:has(> .mx-best) { padding-top: 16px; }
.mx-dim { opacity: 0.5; }
.mx-none-h { display: flex; justify-content: space-between; padding: 7px 10px 3px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); background: var(--panel-2); }
/* The pair card: the answer, ranged and melee, what hits back, the battle, this pair's switches. */
html[data-layout="new"] .mx .av-panel:not(.open) { display: none !important; }
html[data-layout="new"] .mx .av-panel.open { display: flex; flex-direction: column; gap: 10px; position: static; max-height: none; overflow: visible; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: none; }
.mx .avp-open { display: flex; flex-direction: column; gap: 10px; }
.mx .avp-open[hidden] { display: none; }
.mx .avp-head { position: static; padding: 0; background: none; }
.mx .avp-t b { font-size: var(--fs-ui); }
.avp-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.avp-hl b { font-size: var(--fs-h1); font-weight: 900; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.avp-hl span { font-size: var(--fs-ui); color: var(--text-dim); }
.avp-hl em { margin-left: auto; font-style: normal; font-size: var(--fs-ui); font-weight: 800; }
.avp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avp-split > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-md); background: var(--panel-2); font-size: var(--fs-sm); color: var(--text-dim); }
.avp-split b { font-size: var(--fs-body); color: var(--text); }
.avp-split small { font-size: var(--fs-xs); color: var(--text-faint); }
.avp-split .off { opacity: 0.55; }
.avp-back { margin: 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-dim); }
.avp-back b { font-size: var(--fs-lead); font-weight: 900; color: var(--def); margin: 0 2px; }
.mx #avpRes .main-layout { margin: 0; }
.mx #avpRes :is(.bd-charts, .bd-bar, .so-caption, .flow-tbl, .ans-big, .ans-split, #bdFold, .chart-fold, .nl-res-tip) { display: none !important; }
.mx #avpRes .breakdown { border: none; padding: 0; background: none; }
.avp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); }
.avp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avp-sim { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; }
.avp-sim .dice-i { width: 18px; height: 18px; }
.avp-edit { border-color: transparent; color: var(--att); background: none; }
#avpKeep[aria-pressed="true"] { border-color: var(--att); color: var(--att); background: color-mix(in srgb, var(--att) 12%, var(--panel)); }
.avp-join { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.avp-join[hidden] { display: none; }
/* The footer: ↺, the game plan, share; sticky over the list on phones. */
.mx-foot { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 8px; margin-top: 12px; padding: 8px 0; background: var(--bg); border-top: 1px solid var(--border); }
.mx-foot .btn { min-height: var(--h-lg); flex: 1; justify-content: center; border-radius: var(--r-pill); }
.mx-foot .mx-reset { flex: 0 0 auto; width: 48px; }
@media (max-width: 760px) {
  .mx-foot { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 899px) {
  html[data-layout="new"] .mx.mx-fold :is(.mx-cards, .nl-cmpwrap, .mx-intro) { display: none; }
  html[data-layout="new"] .mx.mx-y #roster0, html[data-layout="new"] .mx.mx-t:not(.mx-y) #roster1 { display: none; }
  html[data-layout="new"] .mx.mx-fold .roster-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-layout="new"] .mx .av-wrap { display: flex; flex-direction: column; gap: 10px; }
  html[data-layout="new"] .mx .av-panel { order: -1; }
}
@media (min-width: 900px) {
  .mx-drawers { display: none; }
  html[data-layout="new"] .mx .av-wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  html[data-layout="new"] .mx.mx-y.mx-t .av-wrap:has(.av-panel.open) { grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr); }
  html[data-layout="new"] .mx .av-panel.open { position: sticky; top: calc(var(--top-h, 58px) + 8px); max-height: calc(100vh - 90px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .mx-drawer { animation: none; } }
.mx-col-empty { border: 1.5px dashed var(--border); border-radius: var(--r-lg); }
.mx-top { position: relative; }
/* One colour code in Matchup (T-348): the Favourable/Unfavourable word stays, the row keeps its own colours. */
.mx .roster-unit:is(.mu-good, .mu-even, .mu-bad) { border-color: var(--border); background: var(--panel); }
.mx .roster-unit.selected:is(.mu-good, .mu-even, .mu-bad) { background: color-mix(in srgb, var(--def) 12%, var(--panel)); }
.mx .mx-scored :is(.det-row, .det-rules) { display: none; }
@media (max-width: 899px) { .mx .roster-col :is(.det-row, .det-rules) { display: none; } }
html[data-layout="new"] .mx .av-panel.open { min-width: 0; max-width: 100%; box-sizing: border-box; }
.mx #avpRes { min-width: 0; max-width: 100%; overflow: hidden; }
.mx .roster-grid.mx-rise { animation: pk-rise 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) { .mx .roster-grid.mx-rise { animation: none; } }

/* ---- Lists in the calculator (T-353) ---- */
/* The swap button sits on the seam between the two cards, right-aligned, half over each. */
html[data-layout="new"] .nl-swap { height: 0; margin: 0; padding: 0; display: block; position: relative; z-index: 3; }
html[data-layout="new"] .nl-swap > button { position: absolute; right: 16px; top: -16px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 1.5px solid var(--att); color: var(--att); box-shadow: 0 2px 8px var(--shadow); font-size: var(--fs-body); }
html[data-layout="new"] .nl > .unit-card.att { margin-bottom: 8px; }
/* The card flashes its side's colour when a unit comes in from its list. */
.unit-card.flash { animation: uc-flash 0.6s ease-out; }
@keyframes uc-flash { from { background: color-mix(in srgb, var(--att) 18%, var(--panel)); } to { background: var(--panel); } }
.unit-card.def.flash { animation-name: uc-flash-d; }
@keyframes uc-flash-d { from { background: color-mix(in srgb, var(--def) 18%, var(--panel)); } to { background: var(--panel); } }
/* The sheet: the picker's anatomy, one list scored for the other side's unit. */
.ls-pop .pop-t small { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.ls-pop .pop-head { gap: 8px; }
.ls-body { padding: 10px 12px; }
.ls-change { margin-right: auto; }
.ls-list, .uc-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.uc-list { margin: 8px 0 0 30px; }
.uc-list-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
/* The list's top bar (Jordan, 5 Oct): its name and a clear "Hide list ▴" that folds it. */
.uc-list-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 14px; font: inherit; font-size: var(--fs-ui); font-weight: 700;
  color: var(--text-dim); background: var(--chip-bg); border: 0; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; }
.uc-list-top .ult-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.uc-list-top .ult-h { flex: none; }
.uc-list-top:hover, .uc-list-top:hover .ult-h { color: var(--text); }
.uc-list-top:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.ls-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; align-items: center; width: 100%; min-height: var(--h-lg); padding: 9px 10px;
  border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ls-row:first-child { border-top: 0; }
.ls-row:hover { background: var(--panel-2); }
.ls-row.on { background: color-mix(in srgb, var(--def) 12%, var(--panel)); box-shadow: inset 3px 0 0 var(--def); }
.ls-pop:not(.def) .ls-row.on, #attList .ls-row.on { background: color-mix(in srgb, var(--att) 12%, var(--panel)); box-shadow: inset 3px 0 0 var(--att); }
.ls-row.best { padding-top: 18px; }
.ls-row.dim { opacity: 0.5; }
.ls-best { position: absolute; right: 10px; top: -1px; padding: 1px 6px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: var(--fs-micro); font-weight: 800; color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--panel)); }
.ls-n { min-width: 0; }
.ls-n b { display: block; font-size: var(--fs-ui); font-weight: 700; line-height: 1.25; }
.ls-n small, .ls-sc small { display: block; font-size: var(--fs-xs); color: var(--text-dim); }
/* T-479: who leads a joined squad, in the leaders' colour; identical rows as one, ×n. */
.ls-n small.ls-led { color: var(--lead); font-weight: 700; }
.ls-x { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ls-sc { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ls-sc b { font-size: var(--fs-lead); font-weight: 900; }
.ls-bar { grid-column: 1 / -1; height: 5px; border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; }
.ls-bar i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--def); }
.ls-pop:not(.def) .ls-bar i, #attList .ls-bar i { background: var(--att); }
.ls-grp { display: flex; justify-content: space-between; padding: 7px 10px 3px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); background: var(--panel-2); }
.ans-back { color: var(--text-dim); }
.ans-back b { color: var(--def); }
@media (prefers-reduced-motion: reduce) { .unit-card.flash { animation: none; } }
/* The sheet's title wraps rather than cut. */
.ls-pop .pop-t b { white-space: normal; overflow: visible; }

/* The picker's Upload level (T-355): a file, or a list pasted in. */
.pk-up { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.pk-up textarea { width: 100%; min-height: 110px; font: inherit; font-size: var(--fs-ui); box-sizing: border-box; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-3); color: var(--text); resize: vertical; }
.pk-up textarea::placeholder { color: var(--text-faint); }
.pk-up-row { display: flex; gap: 8px; }
.pk-up-row select { flex: 1; min-width: 0; margin: 0; }
.pk-fmt { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); }

/* Joined units in a list's sheet (T-355): split up or join, as Matchup's pair card had them. */
.ls-joins { margin-top: 10px; font-size: var(--fs-ui); }
.ls-joins summary { cursor: pointer; font-weight: 800; color: var(--text-dim); padding: 6px 2px; }
.ls-join { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; border-top: 1px solid var(--border); }
.ls-join span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ls-join select { margin: 0; max-width: 160px; }
.ls-split { font-size: var(--fs-sm); padding: 4px 10px; }

/* The rankings page credits the Meta column's sources under the table (T-410). */
.rk-credit { margin-top: .6rem; }
/* T-389: every control at least 24px to tap (WCAG 2.2 AA). Small-looking controls keep their look
   and get a larger invisible hit area; inline text links in sentences are exempt. */
.uc-fold::after, #chartSwap::after, #battleSwap::after, .answer #shareBtn::after, .answer #soGif::after, .rk-scores-h button::after, .flow-tbl > summary::after { content: ""; position: absolute; inset: -6px -2px; }
/* (#chartSwap keeps its own position: absolute, top-right, T-438; it holds its ::after already.) */
.uc-fold, .rk-scores-h button, .flow-tbl > summary { position: relative; }
.uc-stats { min-height: 24px; }
/* T-389: with reduced motion, nothing slides, spins or pulses (each component's own rule stays; this
   catches the rest). Events that wait for an animation or transition still fire. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* T-394: the funnel legend's link to the glossary. */
.flow-gl { color: var(--text-faint); text-decoration: none; font-size: var(--fs-ui); padding: 4px 6px; margin: -4px 0; }
.flow-gl:hover, .flow-gl:focus-visible { color: var(--text); }
/* T-390: the calculator's content arrives after its data; keep the footer below the fold meanwhile,
   so it doesn't jump down the screen (most of the calculator's layout shift). Only where the calculator is: a short page
   such as /builder/'s My lists otherwise left a screen of blank space above the footer. */
body > main:has(#calc) { min-height: 100vh; min-height: 100svh; }
/* T-374: our 9-pixel glyphs (docs/icons.js) in the controls, in place of emoji. */
.glyph { display: block; width: 1em; height: 1em; }
.ico { display: inline-flex; vertical-align: -0.12em; margin-right: 0.4em; }
.ico .glyph { width: 0.95em; height: 0.95em; }
/* T-513: the glyphs in place of emoji on the card's lines, chips and the four toggles. */
.uc-li .glyph { width: 12px; height: 12px; margin: 0 auto; }
.cw-i, .lc-i { display: inline-flex; flex: none; margin-right: 4px; }
.cw-i .glyph, .lc-i .glyph { width: 11px; height: 11px; }
.seg4 button i .glyph { width: 16px; height: 16px; margin: 0 auto; }
.sh-h .glyph { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.08em; }
.wl-head .ico .glyph { width: 11px; height: 11px; }
.tab-i .glyph { width: 1em; height: 1em; }
.fx-fab .ico { margin: 0; }
.fx-fab .ico .glyph { width: 20px; height: 20px; }
#swapBtn .ico { margin: 0 auto 2px; }
@media (max-width: 760px) { #swapBtn .ico { display: inline-flex; margin: 0 0.35em 0 0; } }
.door-ic .glyph { width: 28px; height: 28px; }
.pk-search .pk-glyph { width: 16px; height: 16px; }
/* T-373: the battle's backdrop, faint behind the chart. */
.so-bg { opacity: .45; }
[data-theme="light"] .so-bg { opacity: .55; }

/* The list picker's tray and rows (T-475, mockup https://claude.ai/artifact/LAsWtt1Ba4eBgqLHnge5Ue): your
   list on paper, or a hollow dashed tray with the upload; the sources one line each. */
.pk-tray { border: 1.5px dashed var(--paper-edge); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 8px; color: var(--paper-ink); margin-bottom: 10px; }
.pk-tray.full, .pk-tray.drag { background: var(--paper); }
.pk-tray.opp { --paper-edge: color-mix(in srgb, var(--def) 60%, transparent); --paper-ink: var(--text); --paper: color-mix(in srgb, var(--def) 12%, var(--panel)); --paper-strong: color-mix(in srgb, var(--def) 22%, var(--panel)); }
.pk-tt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-tt svg { width: 18px; height: 18px; flex: none; }
.pk-tt b { font-size: var(--fs-lead); font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-tname { all: unset; cursor: pointer; min-width: 0; display: flex; }
.pk-tname:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; border-radius: var(--r-sm); }
.pk-tpts { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-ui); opacity: 0.85; }
.pk-tray small { font-size: var(--fs-ui); line-height: 1.4; opacity: 0.85; }
.pk-tacts { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-tacts button { font: inherit; font-size: var(--fs-ui); font-weight: 700; min-height: var(--h-md); border-radius: var(--r-md); padding: 7px 12px; cursor: pointer; border: 1px solid var(--paper-edge); background: transparent; color: var(--paper-ink); }
.pk-tacts button.main { background: var(--paper-strong); }
.pk-tacts button:hover { background: var(--paper-strong); }
.pk-lrows { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.pk-lrow { display: flex; align-items: center; gap: 12px; min-height: var(--h-lg); padding: 10px 12px; background: var(--panel); border: 0; border-top: 1px solid var(--border); width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.pk-lrow:first-child { border-top: 0; }
.pk-lrow:hover, .pk-lrow:focus-visible { background: var(--panel-2); }
.pk-lrow .pk-ic { width: 20px; height: 20px; flex: none; color: var(--text-dim); display: inline-flex; }
.pk-lrow .pk-ic svg { width: 20px; height: 20px; }
.pk-lrow > b { font-weight: 700; font-size: var(--fs-body); white-space: nowrap; }
.pk-lrow small { color: var(--text-dim); font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pk-lrow small b { color: var(--text); font-weight: 700; }
.pk-lrow .pk-chev { color: var(--text-faint); font-size: var(--fs-h3); line-height: 1; flex: none; }

/* To the death's round strip (T-482): small caps along the battle's top edge; a pip a round. */
.so-strip { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin: 2px 0 4px; min-height: 20px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--text-dim); }
.so-strip .ss-t { min-width: 0; }
.so-strip b { font-weight: 800; }
.so-strip .ss-a { color: var(--att); } .so-strip .ss-d { color: var(--def); }
.ss-pips { display: inline-flex; gap: 3px; flex: none; }
.ss-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-faint); box-sizing: border-box; }
.ss-pips i.done { background: var(--text-dim); border-color: var(--text-dim); }
.ss-pips i.now { background: var(--lead); border-color: var(--lead); }
.ss-heal { display: inline-block; padding: 0 6px; border-radius: var(--r-pill); border: 1px solid var(--green); color: var(--green); font-size: var(--fs-micro); letter-spacing: 0.04em; margin-left: 4px; }
.ss-heal b { color: inherit; }
.ss-ff { display: inline-block; padding: 0 6px; border-radius: var(--r-pill); border: 1px solid var(--lead); color: var(--lead); font-size: var(--fs-micro); letter-spacing: 0.04em; }
.dk-strip { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 4px; }
.dk-strip[hidden] { display: none; }

/* King of the Hill's frame (/hill/ frames /?hill=1, T-521): the battle and its result card alone,
   lifted into .hill-frame by app.js; the hill page has its own Skip and Pause, and its own header. */
html.hill-embed body > :not(.hill-frame) { display: none !important; }
html.hill-embed body { padding: 0 !important; margin: 0; background: transparent; }
html.hill-embed .hill-frame { padding: 0; }
html.hill-embed .bd-bar, html.hill-embed .bd-corner, html.hill-embed .ans-acts, html.hill-embed .flow-tbl, html.hill-embed .bd-fold,
html.hill-embed .bd-more, html.hill-embed .bd-charts, html.hill-embed .flow-legend, html.hill-embed .stage-pop { display: none !important; }
html.hill-embed .breakdown { margin: 0; }
/* The Armory's frame (T-1068S, ?arm=1): the battle's scene alone, fixed to fill the unit page's frame; everything else is laid
   out unseen (the scene measures the funnel beside it). */
html.arm-embed body { visibility: hidden; overflow: hidden; }
html.arm-embed #soScene { visibility: visible; position: fixed; inset: 0 0 auto 0; z-index: 10; margin: 0; border: 0; border-radius: 0; }   /* T-1437P: edge to edge, the framing page's line-up the same width */
/* /meta/'s hill (T-815) frames a slimmer one (?hill=1&slim=1): the round strip and the dice only; the page's bout
   panel around it names both sides, their models left and each round's damage. */
html.hill-slim .answer, html.hill-slim .so-caption { display: none !important; }
html.hill-slim .breakdown, html.hill-slim .bd-panel { border: 0; background: transparent; box-shadow: none; padding: 0; }

/* Stratagems in the calculator (T-749, stratui.js): the Detachment part's block under the detachment chips, its chips
   (dashed until used, teal when in use), and a use on the Modifiers line as a teal ⚡ chip with its cost. */
.st { display: grid; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
.st-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-h b { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
.st-cp { font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); cursor: help; }
.st-cp output { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--teal) 60%, var(--border)); color: var(--text); text-align: center; font-weight: 800; }
.st-note, .st-not { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.4; }
.st-g { display: grid; gap: 5px; min-width: 0; }
.st-g.idle .schip { opacity: 0.45; }
.st-gh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }
.st-gh small { font-weight: 600; color: var(--text-faint); }
.st-gh .glyph, .st-h .glyph { width: 11px; height: 11px; }
.schip { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); border: 1px dashed var(--border); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; text-align: left; max-width: 100%; line-height: 1.3; }
.schip .st-l { min-width: 0; overflow-wrap: anywhere; }
.schip small { flex: none; font-size: var(--fs-xs); font-weight: 800; color: var(--text-faint); white-space: nowrap; }
.schip .any { font-weight: 600; color: var(--text-faint); }
.schip[aria-pressed="true"] { border-style: solid; border-color: var(--teal); background: color-mix(in srgb, var(--teal) 16%, transparent); }
.schip[aria-pressed="true"] small { color: var(--text-dim); }
.st-or { align-self: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); }
.lc.strat { --k: var(--teal); }
.lc.strat .lc-i { color: var(--teal); }
.lc-cp { flex: none; margin-left: 4px; font-size: var(--fs-xs); font-weight: 800; color: var(--text-faint); }
.uc-chips .lc.strat { max-width: 230px; }
/* Waiting beside the detachment (Jordan, 7 Oct): dashed and clear until tapped. */
.lc.strat.off { border-style: dashed; background: transparent; color: var(--text-dim); }
.lc.strat.off .lc-i { color: var(--text-faint); }
.lc.strat.flash { animation: st-flash 0.7s ease-out; }
@keyframes st-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 55%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .lc.strat.flash { animation: none; } }

/* The results sheet on phones (T-826 round 2, respanel.js; Jordan 7 Oct, from design/mockups/2026-10-07-results-sheet-phone.html).
   Under 900 px with html.rs-mode the result sits in a sheet docked over the tab bar: the strip (the chain left to right,
   SIMULATE, the line under) and open (T-971: three quarters of the space above the tab bar, the setup dimmed behind it by
   .rs-shade; the tab bar always stays). Only with flags.json "panel". --rs-tabs: the tab bar's height while it's along the bottom. */
.rs-sheet { display: none; }
html.rs-mode .rs-sheet {
  display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: var(--rs-tabs, 0px); z-index: 38; height: var(--rs-peek, 84px);
  background: var(--panel); border-top: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -10px 30px var(--shadow-sm);
  transition: height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* T-951 (CLS 0.39 on beta's phones): laid out for the sheet before respanel.js runs: the result waits out of the page, not
   under the cards; the calculator's room is held before layout.js builds it (#nlMount), and each card keeps the default
   matchup's height (5 Intercessors against 10 Termagants at 390 px) until the first answer is drawn (html.calc-wait). */
html.rs-early #nl > .nl-res { display: none; }
.nl-mount { display: none; }
html.rs-early .nl-mount { display: block; min-height: 905px; }
/* T-1008W: by width, as the chips wrap (a row is 34 px; measured on the default matchup, firstpaint.test.js). */
html.rs-mode.calc-wait #attCard, html.rs-mode.calc-wait #defCard { min-height: 240px; }
html.rs-mode.calc-wait .rs-line { min-height: 1lh; }   /* the wipe line, empty until the first answer (T-1065S) */
@media (max-width: 759px) { html.rs-mode.calc-wait #attCard { min-height: 278px; } }
@media (max-width: 749px) { html.rs-mode.calc-wait #defCard { min-height: 278px; } }
@media (max-width: 479px) { html.rs-mode.calc-wait #attCard { min-height: 312px; } }
@media (max-width: 459px) { html.rs-mode.calc-wait #attCard { min-height: 325px; } }
@media (max-width: 419px) { html.rs-mode.calc-wait #defCard { min-height: 290px; } }
@media (max-width: 409px) { html.rs-mode.calc-wait #defCard { min-height: 325px; } }
@media (max-width: 399px) { html.rs-mode.calc-wait #attCard { min-height: 360px; } }
@media (max-width: 379px) { html.rs-mode.calc-wait #attCard { min-height: 394px; } }
@media (max-width: 359px) { html.rs-mode.calc-wait #defCard { min-height: 360px; } }
/* T-1008W (PageSpeed): the calculator's first frame before the scripts. Where it is the first screen the head script sets
   calc-first (it shows before app.js's showView) and calc-boot (its room held, what sits under it waiting until layout.js
   has built it, so nothing there is drawn and then pushed down); the lede and a first visit's card are in the page. */
html.calc-first main > #calc { display: block; }
html.calc-boot #calc > .nl-mount ~ * { display: none; }
html.calc-boot:not(.rs-early) .nl-mount { display: block; min-height: 100vh; }
/* Until the first answer, the default matchup's room everywhere (T-1008W, after T-951's phone sheet): the cards (their
   chips wrap to an extra row at some widths), the answer, and Shoot/Melee/Fight back/To the death unseen so SIMULATE stays
   put; the funnel's own height shootout.js holds (holdRoom). tests/browser/firstpaint.test.js checks them against the built
   heights. */
#calcMode.seg-wait { visibility: hidden; }
/* The room held at the foot, not shared out among the card's rows (a grid stretches them to fill a min-height). */
html.calc-wait .unit-card { align-content: start; }
/* "Loading … from BSData" at the card's foot, out of the rows, so it doesn't slide down as they fill in before it goes. */
html.calc-wait .unit-card > .side-load { position: absolute; left: 10px; right: 10px; bottom: 8px; margin: 0; }
/* A load that failed sits in the card's flow, never over its buttons. */
html.calc-wait .unit-card > .side-load.err { position: static; margin: 6px 2px 0; }
html.calc-wait:not(.rs-mode) #attCard, html.calc-wait:not(.rs-mode) #defCard { min-height: 240px; }
html.calc-wait:not(.rs-mode) #bdFlow > .answer { min-height: 115px; }
@media (max-width: 479px) { html.calc-wait:not(.rs-mode) #bdFlow > .answer { min-height: 147px; } }
@media (max-width: 369px) { html.calc-wait:not(.rs-mode) #bdFlow > .answer { min-height: 162px; } }
/* Where the statline wraps to a second line (the army's name alone while it loads): that line, and the card a row taller. */
@media (max-width: 459px), (min-width: 900px) and (max-width: 1039px) {
  html.calc-wait #attStats { min-height: 39px; }
  html.calc-wait:not(.rs-mode) #attCard { min-height: 250px; }
}
@media (max-width: 419px), (min-width: 900px) and (max-width: 939px) {
  html.calc-wait #defStats { min-height: 39px; }
  html.calc-wait:not(.rs-mode) #defCard { min-height: 250px; }
}
/* T-1065S: the 12px heads make a phone's cards 5px taller. */
@media (max-width: 459px) { html.calc-wait:not(.rs-mode) #attCard { min-height: 255px; } }
@media (max-width: 419px) { html.calc-wait:not(.rs-mode) #defCard { min-height: 255px; } }
/* The classic charts' row under the calculator on a wide screen (T-939), unseen, its room held until the first answer
   draws it (app.js marks it nlc-wait when it will show). */
html.calc-wait #nlCharts.nlc-wait[hidden] { display: block !important; visibility: hidden; min-height: 558px; }
@media (min-width: 1181px) { html.calc-wait #nlCharts.nlc-wait[hidden] { min-height: 290px; } }
html.rs-mode .rs-sheet[data-h="open"] { height: calc((100vh - var(--rs-tabs, 0px)) * 0.75); height: calc((100dvh - var(--rs-tabs, 0px)) * 0.75); }
.rs-shade { display: none; }
html.rs-mode .rs-shade {
  display: block; position: fixed; left: 0; right: 0; top: 0; bottom: var(--rs-tabs, 0px); z-index: 37;
  background: rgba(2, 6, 23, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
html.rs-mode.rs-up .rs-shade { opacity: 1; pointer-events: auto; }
/* Up, the page underneath doesn't pull to refresh (Jordan, 8 Oct: a finger near the top kept reloading it). */
html.rs-up, html.rs-up body { overscroll-behavior-y: contain; }
html.rs-drag .rs-sheet { transition: none; }
html.rs-mode body { padding-bottom: calc(var(--rs-tabs, 0px) + 112px + env(safe-area-inset-bottom, 0px)); }
html.rs-mode .toast { bottom: calc(var(--rs-tabs, 0px) + 96px + env(safe-area-inset-bottom, 0px)); }
/* The chevron tab (T-973): 64 x 44 to tap, half over the sheet's top edge; up on the strip, down when open; it also drags. */
.rs-grip { position: absolute; top: -22px; left: 50%; z-index: 1; width: 64px; height: 44px; transform: translateX(-50%); display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; touch-action: none; }
.rs-grip span { display: grid; place-items: center; width: 56px; height: 28px; border: 1.5px solid var(--border); border-radius: var(--r-pill, 999px); background: var(--panel); box-shadow: 0 -3px 10px var(--shadow-sm); }
.rs-grip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }
.rs-sheet[data-h="open"] .rs-grip svg { transform: rotate(180deg); }
.rs-grip:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-strip { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 12px 8px 8px 10px; }
/* The chain as the funnel runs, left to right: each stage's name over its number, in the funnel's colour (--c1 to --c5). */
.rs-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.rs-c { --pc: var(--text-dim); display: grid; gap: 1px; min-width: 0; padding: 0 1px; }
.rs-c + .rs-c { border-left: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.rs-c small { font-size: var(--fs-12); font-weight: 800; letter-spacing: -0.01em; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-c b { font-size: 15px; font-weight: 900; color: var(--pc); font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 6px; }
.rs-h { --pc: color-mix(in srgb, var(--c1) 85%, #fff); } .rs-w { --pc: var(--c2); }
/* Words in the funnel's colours keep 4.5:1 (T-1008W): its two lightest stages a shade deeper on white, Hits a shade lighter on the dark panel. */
:root[data-theme="light"] .rs-h { --pc: color-mix(in srgb, var(--c1) 80%, #000); }
:root[data-theme="light"] .rs-w { --pc: color-mix(in srgb, var(--c2) 85%, #000); } .rs-u { --pc: var(--c3); } .rs-f { --pc: color-mix(in srgb, var(--c3) 50%, var(--c4)); } .rs-d { --pc: var(--c4); } .rs-s, .rs-k { --pc: var(--c5); }
.rs-s b, .rs-k b { font-size: 17px; }
.rs-c.none b { color: var(--text-faint); font-weight: 600; }
.rs-line { grid-column: 1 / -1; color: var(--text-dim); font-size: var(--fs-12); font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.rs-mode .rs-sim .btn.so-attack { padding: 11px 12px; font-size: var(--fs-12); letter-spacing: 0.04em; white-space: nowrap; }
html.rs-mode .rs-sim .btn.so-attack .dice-i { display: none; }
.rs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px 28px; border-top: 1px solid var(--border); }
.rs-sheet[data-h="peek"] .rs-body { visibility: hidden; }
/* T-1053S (Jordan, 11 Oct: "keep the simulate and numbers at the bottom of the screen in reach of the thumb, so the pop out
   rolls upward but the footer simulate remains where it is"): the strip at the sheet's foot, the result opening above it. */
html.rs-mode .rs-sheet .rs-strip { order: 2; border-top: 1px solid var(--border); }
html.rs-mode .rs-sheet .rs-body { order: 1; border-top: 0; }
html.rs-mode .rs-sheet[data-h="peek"] .rs-strip { border-top: 0; }
html.rs-mode .rs-sheet[data-h="peek"] .rs-body { padding-top: 0; padding-bottom: 0; }   /* nothing above the strip while it's down */
.rs-best:empty { display: none; }
.rs-best { padding: 2px 4px 8px; }
.rs-best button { width: 100%; padding: 8px 12px; border: 1.5px dashed color-mix(in srgb, var(--att) 55%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--att) 8%, var(--panel)); color: var(--att-soft, var(--att)); font: inherit; font-size: var(--fs-12); font-weight: 800; cursor: pointer; }
html.rs-mode .rs-body .nl-res { position: static; }
/* T-1440P (Jordan, 28 Oct: "build all 3 and the people on mobile choose ... start with option 2"): the phone layouts, html.ml-*
   (respanel.js; the head script sets it). Battle first: the toggles and the controls row at the top of the calculator, the battle
   under them pinned below the header as the page scrolls, each side one line until Edit, the funnel and the answer under the
   cards, the strip docked as ever and never opening. */
#mlTop { grid-area: mlt; } #mlScene { grid-area: mls; }
@media (max-width: 899px) { html[data-layout="new"].calc2.rs-mode.ml-battle .nl { grid-template-areas: "mlx" "mlt" "mls" "c2n" "c2f" "res" "brg"; } }
html.rs-mode.ml-battle #mlTop .bd-bar { margin: 0; }
html.rs-mode.ml-battle #mlScene { position: sticky; top: calc(var(--top-h, 60px) + env(safe-area-inset-top, 0px)); z-index: 14; background: var(--bg); padding: 2px 0 6px; margin: 0 calc(-1 * var(--gutter, 12px)); padding-inline: var(--gutter, 12px); }
html.rs-mode.ml-battle #mlScene .so-scene { margin: 0; }
html.rs-mode.ml-battle :is(.rs-grip, .rs-shade) { display: none; }
html.rs-mode.ml-battle #nl > .nl-swap { display: none; }   /* T-1442P: one Swap, the controls row's beside the battle */
/* Its battle and toggles are at the top and its funnel is the numbers card (#c2Nums, a copy of this one's): kept laid out at
   the page's width, so the funnel and the charts draw for the copy, but folded away unseen. */
html.rs-mode.ml-battle #nl > .nl-res { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
html.rs-mode.ml-battle.calc-wait :is(#attCard, #defCard) { min-height: 0 !important; }
/* T-1445P (Jordan, 28 Oct: "a really minimalistic unit choosing section ... a pop-out which has all of the unit selection things"):
   Battle first's matchup strip, a side a button, and the setup sheet its card opens in above the docked strip. The cards stand in
   the sheet only (respanel.js). No transform on the sheet: the pickers inside it are fixed to the screen on a phone. */
#mlStrip { grid-area: mlx; }
html.rs-mode.ml-battle #nl > .unit-card { display: none !important; }
.ml-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
/* T-1460P (Jordan, 29 Oct, the mockup's M: "I's simplicity with B's shifting gradient ... much slower"): a side is its name, size and
   points, in a border of its colours that drifts once every 20 seconds, the two sides out of step; a yellow tag on a first visit. */
.ml-side { position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; padding: 8px 10px 9px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 2px solid transparent; border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--att) 16%, transparent), rgba(15, 23, 42, 0.92)) padding-box, linear-gradient(120deg, var(--att), #22D3EE, #6366F1, var(--att), #22D3EE) border-box;
  background-size: 100% 100%, 300% 300%; animation: ml-drift 20s ease-in-out infinite alternate; }
.ml-side.def { background: linear-gradient(180deg, color-mix(in srgb, var(--def) 18%, transparent), rgba(15, 23, 42, 0.92)) padding-box, linear-gradient(120deg, var(--def), #EC4899, #6366F1, var(--def), #EC4899) border-box;
  background-size: 100% 100%, 300% 300%; animation-delay: -10s; }
@keyframes ml-drift { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
.ml-side:hover { filter: brightness(1.12); }
.ml-side:focus-visible { outline: 2px solid var(--lead); outline-offset: 2px; }
.ml-side:active { transform: translateY(1px); }
.ml-k { display: flex; align-items: center; gap: 6px; min-height: 22px; padding-right: 26px; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-12); letter-spacing: 0.14em; text-transform: uppercase; color: var(--att-soft); }
.ml-side.def .ml-k { color: var(--def-soft); }
.ml-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--att) 30%, transparent); color: var(--text);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-12); letter-spacing: 0.04em; text-transform: none; }
.ml-side.def .ml-pill, .ml-side.def .ml-x { background: color-mix(in srgb, var(--def) 30%, transparent); }
.ml-go { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%;
  border: 2.5px solid var(--att-soft); background: color-mix(in srgb, var(--att) 28%, transparent); color: var(--text); }
.ml-side.def .ml-go { border-color: var(--def-soft); background: color-mix(in srgb, var(--def) 28%, transparent); }
.ml-n { font-family: var(--font-head); font-weight: 800; font-size: 19px; line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ml-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.3; color: var(--text-dim); }
.ml-x { padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--att) 30%, transparent); color: var(--text); font-family: var(--font-head); font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; }
/* the first-visit tag, over the card's top edge; the Edit pill waits until it goes */
.ml-tag { display: none; position: absolute; top: -12px; left: 8px; z-index: 5; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 3px; background: #FFD700; color: #0B1120; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-12); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); animation: ml-bob 1.6s ease-in-out 3; }
.ml-strip.first { margin-top: 12px; }
.ml-strip.first .ml-side { padding-top: 16px; }
/* T-1657P (Jordan, 5 Nov: "a bit more space can be added to the attacker / defender vertical box size"): on a phone each side's card 12 px taller,
   its name given room above and below; the funnel under it, sized by the room left (layout.js fit), gives the 12 px back. */
html.rs-mode.ml-battle .ml-side { gap: 8px; padding-bottom: 13px; }
.ml-strip.first .ml-tag { display: inline-flex; }
.ml-strip.first .ml-pill { display: none; }
@keyframes ml-bob { 50% { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 14px rgba(255, 215, 0, 0.6); } }
@media (prefers-reduced-motion: reduce) { .ml-side, .ml-tag { animation: none; } }
:root[data-theme="light"] .ml-side { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.97)) padding-box, linear-gradient(120deg, var(--att), #22D3EE, #6366F1, var(--att), #22D3EE) border-box;
  background-size: 100% 100%, 300% 300%; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); }
:root[data-theme="light"] .ml-side.def { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.97)) padding-box, linear-gradient(120deg, var(--def), #EC4899, #6366F1, var(--def), #EC4899) border-box;
  background-size: 100% 100%, 300% 300%; }
:root[data-theme="light"] :is(.ml-pill, .ml-x) { background: color-mix(in srgb, var(--att) 14%, #FFFFFF); color: #1E3A8A; }
:root[data-theme="light"] .ml-side.def :is(.ml-pill, .ml-x) { background: color-mix(in srgb, var(--def) 14%, #FFFFFF); color: #4C1D95; }
:root[data-theme="light"] .ml-go { background: #FFFFFF; color: var(--att-fill); border-color: var(--att-fill); }
:root[data-theme="light"] .ml-side.def .ml-go { color: var(--def-fill); border-color: var(--def-fill); }
.ml-swapw { display: flex; align-items: center; }
/* T-1464P: each side's card in a holder with a small die at its foot, a random unit for that side */
.ml-sidew { position: relative; display: grid; min-width: 0; }
.ml-die { position: absolute; right: 6px; bottom: 6px; z-index: 3; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 6px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--lead) 60%, transparent); background: rgba(11, 17, 32, 0.72); color: var(--lead); }
.ml-die .ml-die-g { width: 16px; height: 16px; }
/* T-1652P (Jordan, 4 Nov): each side's list button beside its die: a dotted square with a yellow + while the side holds no list, a solid line
   once it does (no ×: the list comes off in its drawer). Beside, not above, so the unit's name keeps the card's width. */
.ml-lb { position: absolute; right: 40px; bottom: 6px; z-index: 3; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 6px; cursor: pointer;
  border: 2px dashed rgba(255, 255, 255, 0.75); background: rgba(11, 17, 32, 0.55); color: #fff; }
.ml-lb .ml-lb-g { width: 15px; height: 15px; }
.ml-lb .ml-lbm { position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--bg); background: var(--lead); color: #111; font: 800 var(--fs-12)/1 var(--font-body); font-style: normal; }
.ml-lb.set { border-style: solid; } .ml-lb.set .ml-lbm { display: none; }   /* Jordan, 4 Nov: holding a list, the same button with a solid line instead of the dotted one, not filled */
:root[data-theme="light"] .ml-lb { border-color: var(--text-dim); background: var(--panel); color: var(--text); }
.ml-lb:focus-visible { outline: 2px solid var(--lead); outline-offset: 2px; }
.ml-sidew .ml-meta { padding-right: 66px; flex-wrap: nowrap; white-space: nowrap; }
.ml-die:hover { background: rgba(11, 17, 32, 0.9); border-color: var(--lead); }
.ml-die:focus-visible { outline: 2px solid var(--lead); outline-offset: 2px; }
.ml-die.roll .ml-die-g { animation: ml-roll 0.45s ease-out; }
@keyframes ml-roll { from { transform: rotate(-200deg) scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .ml-die.roll .ml-die-g { animation: none; } }
:root[data-theme="light"] .ml-die { background: #FFFBEB; border-color: #F59E0B; color: #B45309; }
.ml-strip #battleSwap { position: relative; top: auto; left: auto; width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); background: color-mix(in srgb, var(--panel) 75%, transparent); color: var(--text); font: inherit; font-weight: 900; font-size: var(--fs-16); cursor: pointer; }
.ml-strip #battleSwap [data-i18n] { display: none; }
:root[data-theme="light"] .ml-k { color: var(--att-fill); } :root[data-theme="light"] .ml-side.def .ml-k { color: var(--def-text); }
.ml-shade, .ml-sheet { display: none; }
html.ml-sheet-on .ml-shade { display: block; position: fixed; inset: 0; z-index: 36; background: rgba(2, 6, 23, 0.55); }
html.ml-sheet-on .ml-sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; z-index: 37;
  
  background: var(--panel); border-top: 3px solid var(--att); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -12px 30px var(--shadow); animation: ml-in 0.2s ease-out; transition: translate 0.15s; }
.ml-sheet[data-side="def"] { border-top-color: var(--def); }
@keyframes ml-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.ml-sheet-on .ml-sheet { animation: none; transition: none; } }
.ml-sh-head { flex: none; position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; border-bottom: 1px solid var(--border); touch-action: none; cursor: grab; }
.ml-grab { position: absolute; left: 50%; top: 5px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--border); }
.ml-sh-t { flex: 1 1 auto; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--att-soft); }
.ml-sheet[data-side="def"] .ml-sh-t { color: var(--def-soft); }
:root[data-theme="light"] .ml-sh-t { color: var(--att-fill); } :root[data-theme="light"] .ml-sheet[data-side="def"] .ml-sh-t { color: var(--def-text); }
/* T-1471P: one big yellow button on screen at a time (the guide bar's): the head's Done is a quiet outline. */
.ml-done { flex: none; min-height: 38px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; }
.ml-done:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* T-1468P: the head's switch of the two sides (the mockup's A), the open side filled in its colour. */
.ml-sw { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.ml-swb { min-width: 0; display: grid; gap: 1px; text-align: left; padding: 5px 9px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text-dim); font: inherit; cursor: pointer; }
.ml-swb small { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-12); letter-spacing: 0.12em; text-transform: uppercase; }
.ml-swb b { font-size: var(--fs-ui); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); font-weight: 600; }
.ml-swb.att small { color: var(--att-soft); } .ml-swb.def small { color: var(--def-soft); }
.ml-swb.on b { color: var(--text); font-weight: 800; }
.ml-swb.att.on { background: color-mix(in srgb, var(--att) 26%, var(--panel)); border-color: var(--att); }
.ml-swb.def.on { background: color-mix(in srgb, var(--def) 26%, var(--panel)); border-color: var(--def); }
.ml-swb:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
:root[data-theme="light"] .ml-swb.att small { color: var(--att-fill); } :root[data-theme="light"] .ml-swb.def small { color: var(--def-text); }
/* T-1468P: the sides row on the docked numbers (the mockup's B1), once the top strip has scrolled away. */
.ml-row { display: none; }
html.rs-mode.ml-battle.ml-row-on:not(.ml-sheet-on):not(.bmp-on) .ml-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 6px; position: fixed; left: 0; right: 0; z-index: 38;
  bottom: calc(var(--rs-tabs, 0px) + var(--rs-peek, 84px)); padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--panel) 94%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(6px); }
html.rs-mode.ml-battle.ml-row-on:not(.ml-sheet-on) body { padding-bottom: calc(var(--rs-tabs, 0px) + 160px + env(safe-area-inset-bottom, 0px)); }
html.rs-mode.ml-battle.ml-row-on:not(.ml-sheet-on) .toast { bottom: calc(var(--rs-tabs, 0px) + 144px + env(safe-area-inset-bottom, 0px)); }
.ml-rb { min-width: 0; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 9px; font: inherit; color: var(--text); cursor: pointer; }
.ml-rb.att { border: 1.5px solid var(--att); background: color-mix(in srgb, var(--att) 16%, var(--panel)); }
.ml-rb.def { border: 1.5px solid var(--def); background: color-mix(in srgb, var(--def) 16%, var(--panel)); }
.ml-rb small { flex: none; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; }
.ml-rb.att small { color: var(--att-soft); } .ml-rb.def small { color: var(--def-soft); }
:root[data-theme="light"] .ml-rb.att small { color: var(--att-fill); } :root[data-theme="light"] .ml-rb.def small { color: var(--def-text); }
.ml-rb b { min-width: 0; flex: 1 1 auto; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ml-rb svg { flex: none; opacity: 0.75; }
.ml-rsw { display: grid; place-items: center; padding: 0; border-radius: 50%; font: inherit; font-weight: 900; cursor: pointer; }
.ml-rb:focus-visible, .ml-rsw:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* T-1607P (Jordan, 4 Nov: "out of style with the rest of our icons"): the swap in our pixel glyph, framed as the toggles beside it. */
.ml-rsw { width: 44px; height: 44px; justify-self: center; align-self: center; border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent); background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--text); }
.ml-rsw:hover { border-color: var(--text); } .ml-rsw .glyph, .pk-swap .glyph { width: 22px; height: 22px; display: block; }
html.look-hud[data-theme="dark"] .ml-rsw { border-radius: 3px; }
.pk-swap { display: inline-grid; place-items: center; padding: 0; } .pk-swap .glyph { width: 18px; height: 18px; }
html.look-hud[data-theme="dark"] :is(.ml-rb, .ml-swb, .ml-sw) { border-radius: 3px; }
.ml-sh-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 10px 18px; }
.ml-sh-body > .unit-card { margin: 0; }
/* T-1470P (Jordan, 29 Oct, the mockup): the setup sheet whole from under the header to the numbers, the tab bar away while it's
   open; lowered (SIMULATE, a pull down) to the bottom quarter with no shade, the page above showing the battle and the funnel, a
   "Tap to keep editing" pill on its edge. */
html.rs-mode.ml-sheet-on { --rs-tabs: 0px !important; }
html.rs-mode.ml-sheet-on nav.tabs { display: none !important; }
html.ml-sheet-on .ml-sheet { top: calc(var(--top-h, 60px) + 4px + env(safe-area-inset-top, 0px)); bottom: var(--rs-peek, 84px) !important; max-height: none !important; }
html.ml-sheet-low .ml-shade { display: none !important; }
html.ml-sheet-low .ml-sheet { top: auto; height: 24vh; height: 24dvh; box-shadow: 0 -14px 34px var(--shadow); cursor: pointer; }
html.ml-sheet-low .ml-sh-body { overflow: hidden; }
html.ml-sheet-low.rs-mode body { padding-bottom: calc(24vh + 112px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) { html.ml-sheet-on .ml-sheet { transition: top 0.22s ease, height 0.22s ease, translate 0.15s; } }
.ml-keep { display: none; }
html.ml-sheet-low .ml-keep { display: flex; align-items: center; gap: 6px; position: absolute; left: 50%; top: -15px; translate: -50% 0; z-index: 5; padding: 5px 14px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--lead) 70%, #000); background: var(--nh-fill); color: var(--nh-on); font: inherit; font-size: var(--fs-ui); font-weight: 900; white-space: nowrap; box-shadow: 0 4px 14px var(--shadow); cursor: pointer; }

/* T-1446P (Jordan, 28 Oct: "I really like the HUD look"): the calculator in the dark theme as a HUD: a faint grid behind it,
   square tiles and thin lines, corner brackets in each part's colour, condensed capitals on its controls (mixed case kept for
   the small summaries and chart labels, the Gemini review's legibility point). T-1449P (Jordan, 28 Oct: "build a toggle for HUD and
   classic ... set HUD to default"): only under html.look-hud, which the head script sets unless hre.look.v1 is "classic" (the ⋯ menu). */
html.look-hud[data-theme="dark"][data-layout="new"] body { background-image: linear-gradient(rgba(148,163,184,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.04) 1px, transparent 1px); background-size: 12px 12px; }
html.look-hud[data-theme="dark"] :is(.so-scene, .ml-side, .c2-nums, .unit-card, .ml-sheet) { --hc: #FFD700; }
html.look-hud[data-theme="dark"] :is(.ml-side.att, .unit-card.att, .ml-sheet[data-side="att"]) { --hc: var(--att); }
html.look-hud[data-theme="dark"] :is(.ml-side.def, .unit-card.def, .ml-sheet[data-side="def"]) { --hc: var(--def); }
html.look-hud[data-theme="dark"] .c2-nums { --hc: var(--teal); position: relative; }
html.look-hud[data-theme="dark"] :is(.so-scene, .ml-side, .c2-nums, .unit-card) { border-radius: 3px; }
html.look-hud[data-theme="dark"] :is(.so-scene, .c2-nums, .unit-card)::after { content: ""; position: absolute; inset: -1px; z-index: 4; pointer-events: none; border-radius: 3px; --b: 12px; --t: 2px;
  background: linear-gradient(var(--hc), var(--hc)) left top / var(--b) var(--t) no-repeat, linear-gradient(var(--hc), var(--hc)) left top / var(--t) var(--b) no-repeat,
    linear-gradient(var(--hc), var(--hc)) right top / var(--b) var(--t) no-repeat, linear-gradient(var(--hc), var(--hc)) right top / var(--t) var(--b) no-repeat,
    linear-gradient(var(--hc), var(--hc)) left bottom / var(--b) var(--t) no-repeat, linear-gradient(var(--hc), var(--hc)) left bottom / var(--t) var(--b) no-repeat,
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--b) var(--t) no-repeat, linear-gradient(var(--hc), var(--hc)) right bottom / var(--t) var(--b) no-repeat; }
html.look-hud[data-theme="dark"] .ml-sheet { border-radius: 0; background: #0D1424; }
/* the toggles: dark square tiles, lit with an edge when on */
html.look-hud[data-theme="dark"] .seg.atk-mode.seg4 { border-radius: 3px; gap: 4px; background: none; border: 0; padding: 0; }
html.look-hud[data-theme="dark"] .seg.atk-mode.seg4 button { border-radius: 2px; border: 1px solid #26324A; background: rgba(17, 26, 44, 0.85); color: #8A99B4; font-family: var(--font-head); font-weight: 800; letter-spacing: 0.02em; font-size: 13px; text-transform: uppercase; }
html.look-hud[data-theme="dark"] .seg.atk-mode.seg4 button[aria-pressed="true"] { border-color: #60A5FA; background: linear-gradient(180deg, rgba(37, 99, 235, 0.55), rgba(55, 48, 163, 0.45)); color: #F1F6FF;
  box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.35), 0 0 8px rgba(59, 130, 246, 0.22); }
/* the controls row and the strip's Swap: square, thin lines, condensed capitals */
html.look-hud[data-theme="dark"] .c2-line :is(#soFx, .c2-fgrp, .c2-fgrp .btn, #battleSwap, .rs-best button) { border-radius: 3px; font-family: var(--font-head); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
html.look-hud[data-theme="dark"] .c2-line #soFx { border-style: solid; border-width: 1px; }
html.look-hud[data-theme="dark"] .c2-fgrp { border-style: solid; border-width: 1px; }
html.look-hud[data-theme="dark"] .c2-fgrp .c2-field:first-child { border-radius: 3px 0 0 3px; }
html.look-hud[data-theme="dark"] .c2-l .c2-fgrp .c2-shuffle { border-left-style: solid; border-radius: 0 3px 3px 0; }
html.look-hud[data-theme="dark"] .c2-line .rs-best button { border-style: solid; border-width: 1px; }
html.look-hud[data-theme="dark"] .ml-strip #battleSwap { border-radius: 3px; border-width: 1px; }
/* T-1607P (Jordan, 4 Nov: "out of style with the rest of our icons"): the swap between the two cards in our pixel glyph, framed as the
   toggles under it (a pale frame on the panel, not a grey tile). */
.ml-strip #battleSwap:hover { border-color: var(--text); } #battleSwap .bs-ico .glyph { width: 22px; height: 22px; display: block; } .c2-line #battleSwap .bs-ico .glyph { width: 18px; height: 18px; }
.ml-strip #battleSwap .bs-ico { margin: 0; }
/* the unit's name: a dark panel with its side's edge, not a solid pill */
html.look-hud[data-theme="dark"] .unit-btn { border-radius: 3px; background: linear-gradient(90deg, rgba(37, 99, 235, 0.34), rgba(67, 56, 202, 0.14)); border: 1px solid #2E6BEA; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html.look-hud[data-theme="dark"] .unit-btn.def { background: linear-gradient(90deg, rgba(124, 58, 237, 0.34), rgba(162, 28, 175, 0.14)); border-color: #8B4CF0; }
/* the readout: cells in a frame */
html.look-hud[data-theme="dark"].rs-mode .rs-flow { border: 1px solid #26324A; border-radius: 2px; }
html.look-hud[data-theme="dark"] .rs-c + .rs-c { border-left: 1px solid #26324A; }
html.look-hud[data-theme="dark"] .rs-c small { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-12); letter-spacing: 0; text-transform: uppercase; }
html.look-hud[data-theme="dark"] .rs-c b { font-family: var(--font-head); font-size: 18px; font-weight: 800; }
/* On the narrowest phones a label takes the whole cell, so Unsvd fits at 12 px (T-1559P). */
@media (max-width: 379px) { .rs-c { padding: 0; } .rs-c small, html.look-hud[data-theme="dark"] .rs-c small { letter-spacing: -0.02em; } }
html.look-hud[data-theme="dark"] .rs-s b, html.look-hud[data-theme="dark"] .rs-k b { font-size: 19px; }
html.look-hud[data-theme="dark"] .c2-nh b { font-family: var(--font-head); font-weight: 800; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #67E8F9; }
/* the tab bar on a phone: condensed capitals, the current tab in gold */
@media (max-width: 760px) {
  html.look-hud[data-theme="dark"][data-layout="new"] .tab { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  html.look-hud[data-theme="dark"][data-layout="new"] .tab[aria-current] { color: var(--lead); box-shadow: inset 0 2px 0 var(--lead); }
}

/* T-1450P (Jordan, 28 Oct): the picker's army screen in four groups, a chip its group's colour on its left edge (Gemini's review:
   the colour on the edge and the heading only, never the fill, so it can't be read as the attacker's blue, the defender's purple
   or Done's gold), two columns left-aligned so the eye runs down A to Z. Under the HUD look: square tiles, a rule after each heading. */
.pk-armies, .pk-armies.pk-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px; }
.pk-chip.pk-armych { --side: var(--text-faint); display: flex; align-items: center; min-height: 40px; padding: 6px 10px 6px 14px; text-align: left; line-height: 1.2;
  border-radius: var(--r-md); box-shadow: inset 4px 0 0 var(--side); }
.pk-chip.pk-armych:hover, .pk-chip.pk-armych:focus-visible { border-color: var(--side); }
:is(.pk-armych, .pk-hl)[data-gs="imp"] { --side: var(--side-imp); }
:is(.pk-armych, .pk-hl)[data-gs="sm"] { --side: var(--side-sm); }
:is(.pk-armych, .pk-hl)[data-gs="cha"] { --side: var(--side-cha); }
:is(.pk-armych, .pk-hl)[data-gs="xen"] { --side: var(--side-xen); }
.pk-hl[data-gs] { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--side); }
.pk-hl[data-gs]::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--side) 45%, transparent); }
html.look-hud[data-theme="dark"] .pk-armych { border-radius: 2px; border-width: 1px; border-color: #26324A; background: rgba(17, 26, 44, 0.85); }
html.look-hud[data-theme="dark"] .pk-hl { font-family: var(--font-head); font-size: 12.5px; letter-spacing: 0.16em; }

/* T-1451P (Jordan, 28 Oct: "Yes do all the things you say", Gemini's review of the picker): a slimmer head (the sides one row,
   the close beside them), Show tiers a switch at the search's end (it left the head, so the two sides' names have room), and Start
   over a quiet text button so Done is the one call. */
.pk-head { padding: 8px 12px; }
.pk-side { min-height: 40px; padding: 4px 10px; }
.pk-pin { padding: 8px 12px; }
.pk-srow { display: flex; align-items: center; gap: 8px; }
.pk-pin { grid-template-columns: minmax(0, 1fr); }
.pk-srow .pk-search input { width: 0; }
.pk-srow .pk-search { flex: 1 1 auto; min-width: 0; }
/* T-1461P: the die beside the search, a random unit for the side shown */
.pk-dice { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: var(--r-lg); border: 1.5px solid color-mix(in srgb, var(--lead) 65%, transparent);
  background: color-mix(in srgb, var(--lead) 12%, var(--panel-3)); color: var(--text); font: inherit; font-weight: 800; font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
.pk-dice .pk-glyph { width: 16px; height: 16px; color: var(--lead); }
.pk-dice:hover { background: color-mix(in srgb, var(--lead) 22%, var(--panel-3)); }
.pk-dice:active { transform: translateY(1px); }
:root[data-theme="light"] .pk-dice { background: #FFFBEB; border-color: #F59E0B; color: #1F2937; }
:root[data-theme="light"] .pk-dice .pk-glyph { color: #B45309; }
.tier-sw.pk-tsw { flex: none; flex-direction: row; gap: 6px; min-height: 44px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
.tier-sw.pk-tsw input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 11px; border: 1.5px solid var(--border);
  background: var(--panel-3); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.tier-sw.pk-tsw input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-faint); transition: transform 0.15s, background-color 0.15s; }
.tier-sw.pk-tsw input:checked { background: var(--pk-acc); border-color: var(--pk-acc); }
.tier-sw.pk-tsw input:checked::before { transform: translateX(16px); background: #fff; }
.tier-sw.pk-tsw input:focus-visible { outline: 2px solid var(--pk-acc); outline-offset: 2px; }
.tier-sw.pk-tsw:has(input:checked) { color: var(--text); }
.pk-foot .btn[data-reset] { background: none; border-color: transparent; box-shadow: none; color: var(--text-dim); font-weight: 700; padding: 0 12px; }
.pk-foot .btn[data-reset]:hover, .pk-foot .btn[data-reset]:focus-visible { color: var(--text); }
html.look-hud[data-theme="dark"] :is(.pk-side, .pk-swap, .pk-search) { border-radius: 3px; }
html.look-hud[data-theme="dark"] .tier-sw.pk-tsw input, html.look-hud[data-theme="dark"] .tier-sw.pk-tsw input::before { border-radius: 2px; }

/* T-1453P (Jordan, 28 Oct: "make the various headings a bit more distinct so at a glance I can tell which is which? Infantry vs
   battle line"): each role drawer its own colour (--rc) on its icon, a 4 px edge on its left and its open head's tint; the side's
   colour stays in the picker's head. Neighbours kept apart (Battleline yellow, Infantry green, Mounted teal); light mode darker. */
.pk-dr[data-dr="recent"] { --rc: var(--text-dim); }
.pk-dr[data-dr="saved"] { --rc: #FACC15; }
.pk-dr[data-dr="EPIC HEROES"] { --rc: #E879F9; }
.pk-dr[data-dr="CHARACTERS"] { --rc: #FB923C; }
.pk-dr[data-dr="BATTLELINE"] { --rc: #FACC15; }
.pk-dr[data-dr="INFANTRY"] { --rc: #4ADE80; }
.pk-dr[data-dr="MOUNTED"] { --rc: #2DD4BF; }
.pk-dr[data-dr="BEASTS & SWARMS"] { --rc: #F472B6; }
.pk-dr[data-dr="MONSTERS"] { --rc: #F87171; }
.pk-dr[data-dr="VEHICLES"] { --rc: #60A5FA; }
.pk-dr[data-dr="TRANSPORTS"] { --rc: #A5B4FC; }
.pk-dr[data-dr="FLYERS"] { --rc: #22D3EE; }
.pk-dr[data-dr="FORTIFICATIONS"] { --rc: #A8A29E; }
.pk-dr[data-dr="OTHER UNITS"] { --rc: #94A3B8; }
:root[data-theme="light"] .pk-dr[data-dr="saved"] { --rc: #A16207; }
:root[data-theme="light"] .pk-dr[data-dr="EPIC HEROES"] { --rc: #A21CAF; }
:root[data-theme="light"] .pk-dr[data-dr="CHARACTERS"] { --rc: #C2410C; }
:root[data-theme="light"] .pk-dr[data-dr="BATTLELINE"] { --rc: #A16207; }
:root[data-theme="light"] .pk-dr[data-dr="INFANTRY"] { --rc: #15803D; }
:root[data-theme="light"] .pk-dr[data-dr="MOUNTED"] { --rc: #0F766E; }
:root[data-theme="light"] .pk-dr[data-dr="BEASTS & SWARMS"] { --rc: #BE185D; }
:root[data-theme="light"] .pk-dr[data-dr="MONSTERS"] { --rc: #B91C1C; }
:root[data-theme="light"] .pk-dr[data-dr="VEHICLES"] { --rc: #1D4ED8; }
:root[data-theme="light"] .pk-dr[data-dr="TRANSPORTS"] { --rc: #4338CA; }
:root[data-theme="light"] .pk-dr[data-dr="FLYERS"] { --rc: #0E7490; }
:root[data-theme="light"] .pk-dr[data-dr="FORTIFICATIONS"] { --rc: #57534E; }
:root[data-theme="light"] .pk-dr[data-dr="OTHER UNITS"] { --rc: #475569; }
.pk-dr[data-dr] { border-left: 4px solid var(--rc); }
.pk-dr[data-dr] > summary .pk-ric { color: var(--rc); }
.pk-dr[data-dr][open] > summary { background: color-mix(in srgb, var(--rc) 14%, var(--panel)); }
.pk-dr[data-dr][open] { border-color: color-mix(in srgb, var(--rc) 45%, var(--border)); border-left-color: var(--rc); }

/* T-1447P (Jordan, 28 Oct: "I like the lighter colors as well"): the calculator in the light theme its own way: white surfaces and
   dark text, a side's colour as the edge and a pale tint of its name, not a solid pill; the toggles on as a tint with an edge. */
:root[data-theme="light"] .unit-btn { background: #EFF4FF; border: 1.5px solid var(--att-fill); color: #1E3A8A; box-shadow: none; }
:root[data-theme="light"] .unit-btn.def { background: #F5F0FF; border-color: var(--def-fill); color: #4C1D95; }
:root[data-theme="light"] .unit-btn .ub-ch { color: var(--att-fill); opacity: 1; } :root[data-theme="light"] .unit-btn.def .ub-ch { color: var(--def-fill); }
:root[data-theme="light"] .unit-btn:hover, :root[data-theme="light"] .unit-btn:focus-visible { filter: none; background: #E3ECFF; }
:root[data-theme="light"] .unit-btn.def:hover, :root[data-theme="light"] .unit-btn.def:focus-visible { background: #EDE5FF; }
:root[data-theme="light"] .seg.atk-mode.seg4 { background: #FFFFFF; border: 1px solid #94A3B8; }
:root[data-theme="light"] .seg.atk-mode.seg4 button { border: 1.5px solid #CBD5E1; color: #334155; }
:root[data-theme="light"] .seg.atk-mode.seg4 button[aria-pressed="true"] { background: #E8EFFF; border-color: var(--att-fill); color: #1E3A8A; box-shadow: none; }
:root[data-theme="light"] .c2-line :is(#soFx, .c2-fgrp, .rs-best button) { background: #FFFFFF; }
:root[data-theme="light"] .unit-card { background: #FFFFFF; }

/* Peek: at rest the sheet shows the top of the battle above the strip, under a "Battle and chart" handle; a tap opens it. */
html.rs-mode.ml-peek .rs-sheet[data-h="peek"] { height: 232px; }
html.rs-mode.ml-peek .rs-sheet[data-h="peek"] .rs-body { visibility: visible; overflow: hidden; cursor: pointer; }
html.rs-mode.ml-peek body { padding-bottom: calc(var(--rs-tabs, 0px) + 260px + env(safe-area-inset-bottom, 0px)); }
.rs-gl { display: none; }
html.rs-mode.ml-peek .rs-sheet[data-h="peek"] .rs-grip { width: auto; }
html.rs-mode.ml-peek .rs-sheet[data-h="peek"] .rs-grip span { width: auto; padding: 0 14px 0 10px; gap: 6px; display: inline-flex; align-items: center; border-color: var(--lead); color: var(--lead); }
html.rs-mode.ml-peek .rs-sheet[data-h="peek"] .rs-gl { display: inline; font-size: 13px; font-weight: 800; white-space: nowrap; }
.rs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* A number that moved: a moment's green behind it for the attacker's better, red for worse. */
.rs-chg { animation: rs-chg 1.4s ease-out; }
.rs-chg.up { --cc: var(--green); } .rs-chg.down { --cc: var(--red, #DC2626); }
@keyframes rs-chg { 0%, 50% { background: color-mix(in srgb, var(--cc) 28%, transparent); } 100% { background: transparent; } }
/* The cards' rows on a phone: what's on, wrapped, and "+N" for the rest. */
html.rs-mode .uc-chips { flex-wrap: wrap; overflow: visible; }
html.rs-mode .uc-lr .uc-chips { -webkit-mask-image: none !important; mask-image: none !important; }
html.rs-mode .uc-lr .uc-arr { display: none !important; }
/* "Show tiers" (T-977): a letter beside a unit outside the tier pages only when the visitor asked for it. */
html:not(.show-tiers) .tier-x { display: none !important; }
/* T-1838P (Jordan, 8 Nov: "why not just make the switch work everywhere?"): Show tiers off hides every tier letter on the site, not only the
   calculator's and the List builder's: the coins (.tier; How we score's key, .sc-coins, stays, it explains them), Meta's army tiers, the
   army page's letter column, its win-rate fact and its key, and the unit page's letter. The army page's table closes the column up. */
html:not(.show-tiers) .tier:not(.sc-coins .tier):not(.tk-coin), html:not(.show-tiers) .tier-key,
html:not(.show-tiers) .mh-blk#tiers, html:not(.show-tiers) .mh-tt,
html:not(.show-tiers) .rt .coin, html:not(.show-tiers) .rt .lc, html:not(.show-tiers) .rt .cmp .lt, html:not(.show-tiers) .c-tier, html:not(.show-tiers) .rt .th [data-sort="letter"],
html:not(.show-tiers) .rt .rate2, html:not(.show-tiers) .rt .lfold, html:not(.show-tiers) .rt #units .band small, html:not(.show-tiers) .rt .how1 > span:first-child, html:not(.show-tiers) .rt .f3:has(.badge), html:not(.show-tiers) .rt .key:has(.coin) { display: none !important; }
html:not(.show-tiers) .rt .th, html:not(.show-tiers) .rt .tr:not(.nr) { grid-template-columns: minmax(0, 1fr) 52px 52px 8px; }
html:not(.show-tiers) .rt .facts3:has(> .f3 .badge) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not(.show-tiers) .my-urow .my-row:not(.off) { grid-template-columns: minmax(0, 1fr); }
.tier-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.tier-sw input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
/* The split battle (T-974, T-978; shootout.js, html.so-split): the volley's figures, bullets and charges in a window of their
   own over hillscene.js's sky and field, the funnel under it with its numbers on its stages, haloed in the panel's colour
   so they read on any bar. */
.so-scene { position: relative; margin: 14px 0 6px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel-2); }
.so-stage canvas { display: block; image-rendering: pixelated; }
.so-vol { position: absolute; left: 0; top: 0; pointer-events: none; }
/* The list tray's "In use" (T-1042S): the list this side holds. */
.pk-inuse { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); font-weight: 800; color: var(--green, #22c55e); }
/* The picker's first screen (T-1050S): the three sides of the galaxy on one row. */
.pk-home > .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The calculator reorganised (T-1046S to T-1049S, flag calc2): Show All on each card, the Effects line, the key's
   drawer, the numbers under the defender on a phone. */
/* Their places in the cards' grid: the numbers under the defender (phones). */
.nl > .c2-nums { grid-area: c2n; }
html[data-layout="new"].calc2 .nl { grid-template-areas: "aub" "swp" "dub" "c2n" "c2f" "res" "brg"; }
@media (min-width: 900px) {
  html[data-layout="new"].calc2 .nl { grid-template-areas: "aub res" "swp res" "dub res" "brg res" ". res" "chr chr"; grid-template-rows: repeat(4, auto) 1fr auto; }
}
@media (max-width: 899px) { html[data-layout="new"].calc2 .nl.docked { grid-template-areas: "dock" "res" "brg"; } .nl.docked > .c2-nums { display: none !important; } }
/* T-1124S: Show All / Hide All tucked in each card's bottom-right corner (Jordan, 13 Oct: "Tuck it in the corner and give it a
   more noticeable border like yellow for paper and dotted line"): on paper, a yellow dotted edge, solid so it reads over what it
   floats on; the swap on the seam moved to the middle out of its way. A line of no height at the card's foot carries it: sticky while the card is all open, so the pill rides the bottom of
   the screen (above the results sheet on a phone) until the card's foot scrolls up to it. */
.c2-showw { grid-column: 1 / -1; height: 0; margin: -4px 0 -10px; display: flex; justify-content: flex-end; padding-right: 0; margin-right: -2px; pointer-events: none; position: relative; z-index: 5; }
.unit-card.c2-all > .c2-showw { position: sticky; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html.rs-mode .unit-card.c2-all > .c2-showw { bottom: calc(var(--rs-tabs, 0px) + 84px + 34px + env(safe-area-inset-bottom, 0px)); }
.c2-show { pointer-events: auto; transform: translateY(calc(-50% - 7px)); min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 2px dotted var(--lead);
  background: linear-gradient(var(--paper-strong), var(--paper-strong)), var(--panel); color: var(--paper-ink); font: inherit; font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; box-shadow: 0 3px 10px var(--shadow); cursor: pointer; }
.unit-card.c2-all .c2-show { box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
html[data-layout="new"].calc2 .nl-swap > button { right: auto; left: 50%; margin-left: -16px; }
/* T-1438P (Jordan, 28 Oct: "make that more obvious ... change the color and make a smaller form of the swap button"): the swap
   between the cards is the battle's Swap made small: the paper pill, its gold edge, "⇄ Swap". */
html[data-layout="new"] .nl-swap > #swapBtn { width: auto; height: 32px; min-height: 0; margin-left: 0; transform: translateX(-50%); padding: 0 13px; display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill); border: 2px solid var(--paper-edge); background: linear-gradient(var(--paper-strong), var(--paper-strong)), var(--panel); color: var(--paper-ink);
  font: inherit; font-weight: 900; font-size: 13px; line-height: 1; letter-spacing: .02em; box-shadow: 0 3px 10px var(--shadow); }
html[data-layout="new"] .nl-swap > #swapBtn span { display: inline; }
html[data-layout="new"] .nl-swap > #swapBtn .ico { display: inline-flex; margin: 0; }
html[data-layout="new"] .nl-swap > #swapBtn .ico .glyph { width: 13px; height: 13px; }
html[data-layout="new"] .nl-swap > #swapBtn:hover { filter: none; border-color: var(--lead); }
.uc-exp[data-k="all"] .sh-sec:not(.off):not(.ux-gone) ~ .sh-sec:not(.off):not(.ux-gone) { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.c2-line { flex-basis: 100%; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 6px; }
.c2-l { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.c2-r { display: flex; justify-content: flex-end; min-width: 0; }
html.calc2:not(.so-b2) .c2-field { display: none; }
/* T-1038W: the random battlefield, a small square of looped arrows right beside Battlefield, as tall as it. */
/* T-1115S (Jordan, 13 Oct): Battlefield and its die one control, dashed in the leaders' yellow; Effects dashed in purple. */
.c2-fgrp { display: inline-flex; align-items: stretch; border: 1.5px dashed var(--lead); border-radius: var(--r-pill); }
.c2-fgrp .btn { border: 0; border-radius: 0; background: none; min-height: 32px; }
.c2-fgrp .c2-field:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.c2-l .c2-fgrp .c2-shuffle { padding: 0 10px 0 8px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0; border-left: 1.5px dashed color-mix(in srgb, var(--lead) 60%, transparent); border-radius: 0 var(--r-pill) var(--r-pill) 0; color: var(--lead); }
.c2-l .c2-fgrp .c2-shuffle .glyph { width: 16px; height: 16px; }
.c2-l #soFx { border: 1.5px dashed var(--def); }
.c2-line #battleSwap { position: relative; top: auto; left: auto; width: auto; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--paper-edge); background: var(--paper-strong); color: var(--paper-ink); font: inherit; font-weight: 900; cursor: pointer; }
.c2-line .rs-best { padding: 0; min-width: 0; }
.c2-line .rs-best button { width: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* T-1618P, T-1626P, T-1627P: the row's button tried as Auto Equip and as a gold Simulate; back to Best squad (Jordan, 4 Nov: "Just make it go back
   to best squad"). The gold Simulate style stays for elsewhere as .ae-btn (icons/auto-equip-seal.webp). */
html .sim-btn.ae-btn { --simA: #E9B949; --simB: #C98A1E; --simC: #8F5F12; --sim-ring: #C98A1E; }
/* T-1438P (Jordan, 28 Oct: "that's not a pretty good use of space ... put them all in one line. Make it more crisp and concise"):
   on a phone Effects, Battlefield, Swap and Best squad are one row, each 34 px high, spread evenly. */
@media (max-width: 600px) {
  .c2-line { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
  .c2-line > .c2-l { display: contents; }
  .c2-line > :is(.c2-m, .c2-r) { flex: none; }
  .c2-line :is(#soFx, .c2-fgrp .btn, #battleSwap, .rs-best button) { min-height: 34px; height: 34px; font-size: 12.5px; }
  .c2-l #soFx { padding: 0 9px; }
  .c2-l #soFx .ico { margin-right: 4px; }
  .c2-fgrp .c2-field:first-child { padding: 0 8px 0 10px; }
  .c2-l .c2-fgrp .c2-shuffle { padding: 0 7px 0 6px; }
  .c2-line #battleSwap { padding: 0 11px; border-width: 1.5px; }
  .c2-line .rs-best button { padding: 0 10px; }
  /* T-1452P (Jordan, 28 Oct: "the battlefield buttons and its 2 neighbours are not aligned to anything"): equal columns edge to
     edge, under the toggles' own edges; Battle first's empty Swap slot takes no column. Classic, with Swap in the row, keeps T-1438P's spread (four don't fit equal). */
  .c2-line:not(:has(> .c2-m #battleSwap)) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .c2-line > .c2-m:not(:has(#battleSwap)) { display: none; }
  .c2-line:not(:has(> .c2-m #battleSwap)) > .c2-r { display: flex; min-width: 0; }
  .c2-line:not(:has(> .c2-m #battleSwap)) :is(#soFx, .c2-fgrp, .c2-r .rs-best, .c2-r .rs-best button) { width: 100%; min-width: 0; justify-content: center; }
  .c2-line:not(:has(> .c2-m #battleSwap)) .c2-fgrp .c2-field:first-child { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 380px) {
  .c2-line :is(#soFx, .c2-fgrp .btn, .rs-best button) { font-size: var(--fs-12); letter-spacing: 0 !important; }
  .c2-line .rs-best button, .c2-l #soFx { padding: 0 6px; }
  html.look-hud[data-theme="dark"] .seg.atk-mode.seg4 button { font-size: var(--fs-12); letter-spacing: 0; }
}
.c2-key > summary { cursor: pointer; font-weight: 700; color: var(--text-dim); font-size: var(--fs-ui); padding: 4px 0; }
.c2-key .flow-legend { margin-top: 4px; }
/* The result's row (T-1052S): Key and Table on the left, Charts, Share and GIF on the right; the answer tighter. */
.c2-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.c2-rl, .c2-rr { display: flex; gap: 6px; } .c2-rr { margin-left: auto; }
.c2-tog { min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: inherit; font-weight: 700; font-size: var(--fs-ui); cursor: pointer; }
.c2-tog::before { content: "▸ "; } .c2-tog[aria-expanded="true"]::before { content: "▾ "; }
.c2-row #chartSwap, .c2-row #shareBtn, .c2-row #soGif { position: relative; top: auto; right: auto; width: auto; min-height: 36px; padding: 0 12px; font-size: var(--fs-ui); font-weight: 700; }
.c2-row #shareBtn::before { content: none; }
/* T-1377P (Jordan, 26 Oct, on beta: "a lot of dead space here … Can we make it a bit more compact"): in the phone's sheet the
   funnel's box loses the page's 260 px floor (it holds the page still while loading; the sheet is fixed, so nothing moves), and
   Key, Table, Charts, Share and GIF fit one row of slightly smaller pills (each keeps its wider tap area, ::after). */
html.rs-mode .rs-sheet .flow { min-height: 0; }
html.rs-mode .rs-sheet #bdCharts { padding-top: 8px; }   /* its 40 px held the Charts button, now in the row */
html.rs-mode .rs-sheet #bdFlow { padding-bottom: 4px; }
html.rs-mode .rs-sheet .c2-row { gap: 5px; margin-top: 2px; }
html.rs-mode .rs-sheet :is(.c2-rl, .c2-rr) { gap: 5px; }
html.rs-mode .rs-sheet :is(.c2-tog, .c2-row #chartSwap, .c2-row #shareBtn, .c2-row #soGif) { min-height: 32px; padding: 0 8px; font-size: var(--fs-sm); }
html.rs-mode .rs-sheet .c2-row #chartSwap .ico { display: none; }   /* the word says it; Share keeps the share glyph (T-1352P) */
@media (max-width: 389px) { html.rs-mode .rs-sheet :is(.c2-row, .c2-rl, .c2-rr) { gap: 4px; } html.rs-mode .rs-sheet :is(.c2-tog, .c2-row #chartSwap, .c2-row #shareBtn, .c2-row #soGif) { padding: 0 6px; } }
html.calc2 #c2Key > summary, html.calc2 .flow-tbl > summary, html.calc2 .answer .ans-hint { display: none; }
html.calc2 .answer .ans-big { flex-wrap: wrap; }
html.calc2 .answer .ans-big #ansSafe { margin-left: 8px; font-size: var(--fs-ui); }
html.calc2 .answer .ans-foot:empty, html.calc2 .answer .ans-foot { display: none; }
/* The Battlefield picker (T-1055S): bigger, a picture per choice. */
.fx-panel.fx-field { width: min(560px, calc(100vw - 24px)); padding-bottom: 0; }
/* T-1462P: Done held at the foot of the Battlefield panel */
.bio-foot { position: sticky; bottom: 0; z-index: 2; margin: 4px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--border); display: flex; }
.bio-done { flex: 1 1 auto; min-height: 46px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--lead) 70%, #000); background: var(--nh-fill); color: var(--nh-on);
  font: inherit; font-weight: 900; font-size: var(--fs-ui); letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 3px 12px color-mix(in srgb, var(--lead) 28%, transparent); }
.bio-row { border: 0; padding: 0; margin: 8px 0 0; }
.bio-row > legend { font-weight: 800; font-size: var(--fs-ui); margin-bottom: 6px; }
.bio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .bio-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.bio-tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; border: 2px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; text-align: center; }
.bio-tile small { display: block; margin-top: 1px; font-size: var(--fs-12); font-weight: 600; color: var(--text-dim); }   /* T-1479P: a scene's time and weather under its world */
.bio-tile canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; border-radius: 4px; }
.bio-tile[aria-pressed="true"] { border-color: var(--lead); box-shadow: 0 0 0 1px var(--lead); }
.c2-nums { display: none; }
html.rs-mode.calc2 .c2-nums { display: block; margin: 12px 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); }
.c2-nh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* T-1609P (Jordan, 4 Nov: "move the heading to get rid of dead space in the funnel"): on a phone in the battle layout the card sits closer
   under the scene and its heading row is short, the fold button 30 px with a 44 px tap area, the funnel right under it. */
@media (max-width: 899px) { html.rs-mode.calc2.ml-battle .c2-nums { margin: 0 0 12px; padding: 4px 12px 8px; } html.rs-mode.calc2.ml-battle .c2-nh { min-height: 30px; margin-bottom: -14px; position: relative; z-index: 1; } html.rs-mode.calc2.ml-battle .c2-fold { min-height: 30px; min-width: 40px; position: relative; } html.rs-mode.calc2.ml-battle .c2-fold::after { content: ""; position: absolute; inset: -7px -2px; } }
/* T-1611P (Jordan, 4 Nov): Key and "Tap a step for its chart" on the funnel's bottom row, beside the logo, so the bars get their lines. */
/* T-1656P: the key and the tap hint moved under the card (.c2-foot), off the funnel's foot. */
.c2-fold { min-width: 44px; min-height: 36px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.c2-nums.folded .c2-nb { display: none; }
.c2-funnel.flow { min-height: 0; cursor: pointer; }   /* the funnel's own styles (.flow) on the copy: its words in the theme's colours (T-1049S) */
.c2-funnel.flow:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: var(--r-md); }
.c2-funnel svg { display: block; width: 100%; height: auto; }
.c2-charts { display: grid; gap: 8px; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* T-1222B: the phone's copy of the charts two to a row (the slain chart across), each weapon's part only with By weapon on. */
.c2-charts .chart-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.c2-charts .chart-card { padding: 8px; min-width: 0; }
.c2-charts .share { display: none; min-width: 0; }
.c2-nums.byw .c2-charts .share { display: grid; }
.c2-byw { justify-self: start; margin-top: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.c2-byw[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); }
.c2-nums.byw .c2-charts { grid-template-columns: 1fr; }
/* T-1377P: the charts (and By weapon) only once Charts by step is open; the funnel always. */
.c2-nums:not(.charts) :is(.c2-charts, .c2-byw) { display: none; }
.c2-chb { justify-self: start; margin: 8px 8px 0 0; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.c2-chb[aria-expanded="true"] { background: var(--pick-bg); border-color: var(--pick-bd); }
/* T-1474P: on a phone the steps open their charts in a sheet (a tap on the funnel), so the card holds no charts of its own; a line says so. */
.c2-nums .c2-chb, .c2-nums .c2-byw, .c2-nums .c2-charts { display: none !important; }
.c2-tap { margin: 6px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-dim); }
/* T-1377P: the answer's Details drawer, hidden when everything in it is. */
.ans-more:not(:has(> :not(summary):not([hidden]))) { display: none; }
/* (Jordan, 26 Oct: "put the details tab beside it or in the corner as a drawer to drop down when clicked"): the summary is a
   small pill in the headline card's bottom-right corner (the card keeps 100 px clear on its right for it); the drawer opens below. */
.ans-more { margin: 0; position: relative; }
.breakdown .answer:has(.ans-more) .ans-big { padding-right: 100px; }   /* clear of the pill */
.ans-more > summary { position: absolute; bottom: calc(100% + 10px); right: 8px; z-index: 1; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-sm); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }
.ans-more > summary::-webkit-details-marker { display: none; }
.ans-more > summary::after { content: "▾"; color: var(--text-faint); transition: transform 0.15s; }
.ans-more[open] > summary::after { transform: rotate(180deg); }
.ans-more[open] > summary { color: var(--text); border-color: var(--text-faint); }
.ans-more > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ans-more > summary::after { transition: none; } }
.c2-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-ui); color: var(--text-dim); }
/* T-1475P (Jordan, 29 Oct: "The toggle for 9 in 10 ... makes no sense currently without a key"): the phone's copy of the key had no
   swatches (the .flow-legend rules didn't reach it), so the words stood alone. */
.c2-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.c2-leg i { display: inline-block; flex: none; width: 16px; height: 14px; border-radius: var(--r-sm); }
.so-ovl { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; } /* the new battle's weather (T-1040S) */
.so-hud { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: #F8FAFC; text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none; }
.so-hud b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 6px; border-radius: 4px; background: rgba(11, 17, 32, 0.88); }   /* T-1476P: near solid over pale skies (was 0.62); T-1205B: a plate, so the names read on a bright sky (snow, light theme) */
.so-hud .so-k { text-align: right; }
.so-share { position: absolute; right: 8px; top: 32px; height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px 0 8px; border: 0; border-radius: 999px; background: #FFD700; color: #0B1120; font-family: var(--font-body); font-size: var(--fs-12); font-weight: 800; line-height: 1; letter-spacing: 0.04em; cursor: pointer; z-index: 3; box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.45); }   /* T-1540P: Share on the battle; T-1815P: a gold GIF pill, the same in both themes over the scene; T-1830P (Jordan, 8 Nov: "20% or 30% smaller"): a quarter smaller */
.so-share::after { content: ""; position: absolute; inset: -10px -7px; }   /* a thumb's worth of target round a small button */
.so-share:hover { filter: brightness(1.08); } .so-share:focus-visible { outline: 2px solid #F8FAFC; outline-offset: 2px; } .so-share svg { width: 12px; height: 12px; }
.so-share.so-pulse { animation: so-pulse 1.1s ease-out 2; }   /* T-1815P: once a battle ends */
@keyframes so-pulse { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.14); } 60% { transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .so-share.so-pulse { animation: none; } }
html.arm-embed .so-share, html.hill-embed .so-share { display: none; }
.so-on text { fill: var(--text); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.so-on .so-on-k { font-size: var(--fs-12); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.so-on .so-on-v { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.so-on .so-on-r { fill: var(--text-dim); font-size: var(--fs-12); font-weight: 700; }
/* T-1476P (the light review: dark labels with a white outline over mid-tone bars vibrated): in light, the two light columns (Attacks,
   Hits) take plain dark text, the four darker ones white text with a thin dark edge, which reads on the bar and on white alike. */
/* T-1478P (Jordan: "the font over the funnel is going from white to black"): one style for all six, white with a thin dark edge. */
:root[data-theme="light"] .so-on text { fill: #FFFFFF; paint-order: stroke; stroke: rgba(15, 23, 42, 0.8); stroke-width: 2.5px; stroke-linejoin: round; }
:root[data-theme="light"] .so-on .so-on-r { fill: #F1F5F9; }
/* T-1352P: the funnel's drawing shrinks to a phone's width (about 0.95), so its words are drawn a step up to stay 12 px or more on screen. */
@media (max-width: 760px) { .flow .gate, .flow .gate-v, .flow .gate-v.long, .so-on .so-on-k, .so-on .so-on-r { font-size: calc(var(--fs-12) * 1.07); } }
.so-on .so-on-s { fill: var(--lead); font-size: var(--fs-12); font-weight: 800; }
.so-rolled .so-on .so-on-s { font-size: calc(var(--fs-20) * 1.1); font-weight: 900; font-variant-numeric: tabular-nums; }   /* T-1831P: the roll leads */
.so-rolled .so-on .so-on-v { font-size: var(--fs-12); font-weight: 700; }
.so-rolled .so-on .so-on-r { font-size: var(--fs-12); opacity: .85; }
[data-theme="light"] .so-on .so-on-s { fill: #8a6a00; }
/* The slim unit card (T-1023S): its lead line and durability; the letters' slot, filled only with Show tiers on. */
.ucd-lead { margin: 0; font-weight: 800; }
.ucd-dur { margin: 2px 0 6px; color: var(--text-dim); font-size: var(--fs-sm); }
.ucd-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ucd-marks:empty { display: none; }
.ucd-ss { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 4px; font-size: var(--fs-xs); white-space: nowrap; }
.ucd-ss b { font-weight: 800; letter-spacing: var(--track); }
.ucd-ss small { font-size: var(--fs-micro); color: var(--text-dim); }
.lc.rs-more { border-style: dashed; background: transparent; color: var(--text-dim); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { html.rs-mode .rs-sheet, html.rs-mode .rs-shade, .rs-grip svg { transition: none; } .rs-chg { animation: none; } }

/* The picker's first screen (T-930, Jordan 9 Oct; mockup design/mockups/2026-10-09-picker-home.html): Unit select full,
   the side's list as a paper ticket (yellow, perforated down both edges), the other lists a slim perforated line, the
   last three armies as chips, Random and Benchmarks small. The popout fits its content, and sits over the cards'
   Best matchup pill (z 30), which had shown through it. */
@media (min-width: 761px) { .pop.pk-pop { z-index: 35; } }
/* T-953: on a phone a pop (the unit picker, a list) is a sheet of its own at z 55, over the results sheet; and while one is
   open the results sheet steps away (between 761 and 899 px the pops sit in the page, under it). */
html.rs-mode:has(.pop:not([hidden])) :is(.rs-sheet, .rs-shade) { visibility: hidden; }
.pk-pop .pop-card.pk { height: auto; max-height: min(720px, calc(100dvh - 90px)); }
.pk-grid > * { min-width: 0; }
.pk-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pk-home .pk-big.main { min-height: 0; padding: 16px; border-color: color-mix(in srgb, var(--pk-acc) 55%, var(--border)); }
.pk-home .pk-big.main b { font-size: var(--fs-h2); }
.pk-home .pk-big.mid { min-height: 0; padding: 10px 12px; }
.pk-ticket {
  --tk: color-mix(in srgb, #F2C94C 30%, var(--panel)); --tk-edge: color-mix(in srgb, #C9A227 75%, var(--panel)); --tk-hole: var(--panel);
  position: relative; display: flex; align-items: center; border-radius: var(--r-md);}
.pk-ticket::before { position: absolute; left: 22px; top: 6px; bottom: 6px; border-left: 1px dashed color-mix(in srgb, var(--tk-edge) 70%, transparent);}
.pk-ticket.opp { --tk: color-mix(in srgb, var(--def) 14%, var(--panel)); --tk-edge: color-mix(in srgb, var(--def) 55%, var(--border));}
.pk-tk-name { flex: 1; min-width: 0; display: grid; padding: 0 0 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pk-tk-name small { font-size: var(--fs-xs); font-weight: 900; letter-spacing: var(--track); text-transform: uppercase; opacity: 0.8; }
.pk-tk-name b { font-size: var(--fs-lead); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tk-name span { font-size: var(--fs-sm); opacity: 0.8; }
.pk-ticket.empty .pk-tk-name b { font-weight: 700; }
.pk-tk-sw { flex: none; margin-right: 16px; padding: 6px 12px; border: 1.5px solid var(--tk-edge); border-radius: var(--r-pill); background: color-mix(in srgb, var(--tk-edge) 20%, var(--tk)); color: inherit; font: inherit; font-size: var(--fs-ui); font-weight: 800; cursor: pointer; white-space: nowrap; }
/* T-1061S (Jordan, 11 Oct: "The pick from list parts is too large and intrusive... Make the list button hollow instead of filled yellow, and
   dotted like the leader tab, make the imperium BLUE and the chaos red and the xenos purple"): the list ticket a slim hollow line
   dashed in the leaders' yellow, its name and Switch on one row; the sides of the galaxy in their colours. */
.pk-ticket, .pk-ticket.opp { min-height: 0; padding: 4px 6px 4px 12px; gap: 8px; background: transparent; border: 1.5px dashed var(--lead); color: var(--text); }
.pk-ticket::before { content: none; }
.pk-ticket .pk-tk-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 0; }
.pk-ticket .pk-tk-name small { color: var(--lead); opacity: 1; font-size: var(--fs-micro); }
.pk-ticket .pk-tk-name b { font-size: var(--fs-ui); }
.pk-ticket .pk-tk-name span { font-size: var(--fs-xs); }
.pk-ticket .pk-tk-sw { margin-right: 0; padding: 3px 10px; border: 1px dashed var(--lead); background: transparent; color: var(--lead); }
.pk-big.ally-imperium { --ally: #3b82f6; } .pk-big.ally-chaos { --ally: #ef4444; } .pk-big.ally-xenos { --ally: #a855f7; }
.pk-big:is(.ally-imperium, .ally-chaos, .ally-xenos) { border-color: color-mix(in srgb, var(--ally) 65%, var(--border)); background: color-mix(in srgb, var(--ally) 14%, var(--panel)); }
.pk-big:is(.ally-imperium, .ally-chaos, .ally-xenos) .pk-ic { color: var(--ally); }
.pk-big:is(.ally-imperium, .ally-chaos, .ally-xenos).dim { background: var(--panel); }
/* T-1063S: the bottom list card's two drop-downs. */
.nl-door .door-sels { grid-column: 1 / -1; }
/* T-1483P, T-1486P (Jordan, 30 Oct: "I do think we need one for Armies and one for List builder as well, similar icon ... pick colors
   from our palettes from each and then make sure the icon and colors are carried across pages", colours A; mockup
   https://claude.ai/artifact/SkMLENX6XGnDoeuyEjL6tx): a section's mark (its pixel glyph in a rounded square of its two colours), its
   eyebrow (the headings' condensed capitals in them) and its line under the battle. [data-sec] picks the pair: ar Armies (the funnel's
   green end), me Meta (the emblem's red and magenta), lb List builder (our amber and gold). Never on buttons, tier coins, the
   attacker and defender or the sides of the galaxy. */
:root { --ar1: #34D399; --ar2: #0FD3C3; --me1: #F87171; --me2: #E879F9; --lb1: #F59E0B; --lb2: #FACC15; --sec-on: #0B1120; }
:root[data-theme="light"] { --ar1: #047857; --ar2: #0F766E; --me1: #D2373D; --me2: #A21CAF; --lb1: #B45309; --lb2: #A16207; --sec-on: #FFFFFF; }
[data-sec="ar"] { --s1: var(--ar1); --s2: var(--ar2); } [data-sec="me"] { --s1: var(--me1); --s2: var(--me2); } [data-sec="lb"] { --s1: var(--lb1); --s2: var(--lb2); }
.sec-mk { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: var(--sec-on);
  background: linear-gradient(135deg, var(--s1, var(--me1)), var(--s2, var(--me2))); box-shadow: 0 2px 8px color-mix(in srgb, var(--s2, var(--me2)) 28%, transparent); }
.sec-mk .glyph { width: 20px; height: 20px; }
.sec-mk.sm { width: 26px; height: 26px; border-radius: 7px; } .sec-mk.sm .glyph { width: 13px; height: 13px; }
.sec-eb { font: 800 var(--fs-14)/1.15 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--s1, var(--me1)), var(--s2, var(--me2))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; } .sec-head .sec-eb { font-size: 13px; }
.nl-doors { display: grid; gap: 8px; }
.nl-door.door-sec { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px 12px 18px;
  text-align: left; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  position: relative; overflow: hidden; cursor: pointer; }
.nl-door.door-sec::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--s1), var(--s2)); }
.nl-door.door-sec:hover { border-color: var(--text-faint); }
.nl-door.door-sec:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.door-sec .dm-t { display: grid; gap: 2px; min-width: 0; }
.door-sec .dm-t b { font: 800 19px/1.15 var(--font-head); }
.door-sec .dm-t > span:last-child { color: var(--text-dim); font-size: var(--fs-sm); }
.door-sec .dm-go { font: 800 24px/1 var(--font-head); color: var(--text-dim); }
/* The tab bars (the app's, the static pages', the phone's): each tab's icon in its section's colour, the open tab's words and bar too. */
.tab[data-sec] .tab-i, .ph-nav a[data-sec] .ph-i { color: var(--s1); }
.tab[data-sec][aria-current], html.look-hud[data-theme="dark"][data-layout="new"] .tab[data-sec][aria-current],
html:not(.in-app) .site-head .ph-nav a[data-sec][aria-current="page"] { color: var(--s1); box-shadow: inset 0 2px 0 var(--s1); }
.tab[data-sec][aria-current] > span:last-child { text-decoration-color: var(--s1); }
.door-sels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 6px; }
.door-sels label { display: grid; gap: 3px; min-width: 0; font-size: var(--fs-xs); font-weight: 800; color: var(--text-dim); letter-spacing: var(--track); text-transform: uppercase; }
.door-sels select { min-height: 40px; min-width: 0; width: 100%; font: inherit; font-size: var(--fs-ui); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 8px; }
@media (max-width: 420px) { .door-sels { grid-template-columns: minmax(0, 1fr); } }
.pk-more { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 1.5px dashed var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: left; cursor: pointer; }
.pk-more i { font-style: normal; font-weight: 900; color: var(--pk-acc); }
.pk-more:hover, .pk-tk-sw:hover { filter: brightness(1.06); }
.pk-hl { margin: 2px 2px -2px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.pk-recent, .pk-small { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chip { padding: 6px 12px; border: 1.5px solid var(--border); border-radius: var(--r-pill); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.pk-chip:hover, .pk-chip:focus-visible { border-color: var(--pk-acc); }
.pk-mini { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.pk-mini .pk-glyph { width: 12px; height: 12px; }
/* T-949 (the layout review, item 10): My army with no list is one column: its title, one line, the upload box, a way to a
   winning list, the privacy line; the page doesn't stretch to a screen of nothing. */
#mineBody .my-empty { max-width: 640px; }
.my-empty .my-drop { justify-items: start; text-align: left; padding: var(--s-5); }
.my-empty .my-drop > svg { display: none; }
.my-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; font-size: var(--fs-body); color: var(--text-2); }
body > main:has(#mine.view-on .my-empty) { min-height: 0; }
/* /T-949 */

/* The Winning lists page (T-950, Jordan 9 Oct; mockup design/mockups/2026-10-09-winning-lists.html). The in-app Meta
   switch: tabs of text on a hairline, the current one underlined in the accent, a sideways strip on a phone (T-1071W). It
   was the static pages' Meta row too; T-1075W took that row off the pages, and this switch keeps the look on its own. */
.meta-seg { display: flex; gap: 2px; width: auto; max-width: 100%; box-sizing: border-box; padding: 0; margin: 6px 0 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; overflow-x: auto; }
.meta-seg a { flex: none; display: flex; align-items: center; height: 42px; padding: 0 12px; box-sizing: border-box; font-size: var(--fs-body); font-weight: 700; white-space: nowrap; border-radius: var(--r-md) var(--r-md) 0 0; background: none; box-shadow: none; }
.meta-seg a:hover { color: var(--text); background: var(--soft); }
.meta-seg a[aria-current="true"] { color: var(--text); font-weight: 800; background: none; box-shadow: inset 0 -3px 0 var(--accent); }
.meta-seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 760px) { .meta-seg a { padding: 0 10px; } }
.lst-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.lst-head h2, .lst-head h1 { margin: 0; }
/* T-1352P: the Lists tab's title on the pages' H1, 30/900. */
.lst-head h1 { font-family: var(--font-head); font-size: clamp(calc(var(--fs-num) + 2px), 4.4vw, calc(var(--fs-h1) + 4px)); font-weight: 800; line-height: 1.15; }
.lst-head p { margin: 0; color: var(--text-dim); font-size: var(--fs-body); max-width: 70ch; }
/* Imperium · Chaos · Xenos, the armies with their counts, the sort and the switches. */
/* T-1275B (Jordan, 27 Oct, option D): the side filter as underline tabs, grey names over their counts, a thin line in the side's
   colour under each, thick under the picked one and its name white; the army chips carry their side's square. */
.lst-allies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 760px; margin: 0 0 var(--s-4, 12px); }
.lst-armies { display: flex; flex-wrap: wrap; gap: var(--s-2, 6px); margin: 0 0 var(--s-3, 8px); }
.lst-ally { --side: var(--text-faint); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; min-height: var(--h-lg); padding: 4px 2px 8px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--side) 75%, transparent); color: var(--text-dim); font: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; }
.lst-ally:hover { color: var(--text); }
.lst-ally small, .lst-army small { font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.lst-ally[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -5px 0 var(--side); }
.lst-ally[aria-pressed="true"][data-ally=""] { --side: var(--text); }
.lst-army { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-sm); padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.lst-army small { margin-left: 0; }
.lst-army[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd, var(--accent)); color: var(--pick-fg, var(--text)); }
.lst-army.lst-more { border-style: dashed; background: transparent; color: var(--text-dim); }
.lst-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3, 8px) var(--s-4, 12px); margin: 0 0 var(--s-3, 8px); font-size: var(--fs-ui); color: var(--text-dim); }
/* T-1275B: a filter is a pill, white when picked; a switch is the calculator's toggle. */
.lst-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lst-seg button { min-height: var(--h-sm); padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--r-pill); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.lst-seg button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.lst-tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lst-tog input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: var(--r-pill); background: var(--border); cursor: pointer; transition: background .15s; }
.lst-tog input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-brand); transition: transform .15s; }
.lst-tog input:checked { background: var(--att-fill); }
.lst-tog input:checked::after { transform: translateX(16px); }
.lst-tog input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lst-tog { color: var(--text-2); font-weight: 600; }
.lst-count { margin: 0 0 var(--s-2, 6px); color: var(--text-faint); font-size: var(--fs-sm); }
/* An army's group and its lists, a compact row each. */
.lst-grp { margin: var(--s-5, 16px) 0 0; }
.lst-grp h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 var(--s-3, 8px); font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--text); }
.lst-grp h3 small { font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; color: var(--text-faint); }
.lst-grp h3 a { margin-left: auto; font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; color: var(--accent); text-decoration: none; }
.lst-rows { display: grid; gap: var(--s-3, 8px); }
.wl-card.lst-row { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--s-3, 8px) var(--s-4, 12px); padding: 10px 14px; border-left: 4px solid var(--side, var(--border)); border-radius: var(--r-lg); }
.lst-place { display: grid; justify-items: center; line-height: 1.1; }
.lst-place b { font-family: var(--font-head); font-size: var(--fs-num); font-weight: 800; color: var(--mc, var(--text-dim)); }
.lst-place small { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; }
.lst-place.p1 { --mc: var(--lead); } .lst-place.p2 { --mc: var(--text-2); } .lst-place.p3 { --mc: var(--amber); }
.lst-who { min-width: 0; display: grid; gap: 1px; }
.lst-who b { font-size: var(--fs-body); font-weight: 800; color: var(--teal); overflow-wrap: anywhere; }
.lst-who b.nodet { color: var(--text-faint); font-weight: 600; font-style: italic; }
.lst-who span { font-size: var(--fs-sm); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-units { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.lst-units span { max-width: 100%; padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-units em { align-self: center; font-style: normal; font-size: var(--fs-sm); color: var(--text-faint); }
.lst-acts { display: flex; align-items: center; gap: 6px; }
/* T-1275B: As my army in the attacker's blue, As opponent in the defender's purple, tinted, not filled; View list outlined. */
.lst-as { border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c-ink); }
.lst-as.att { --c: var(--att); --c-ink: var(--att-soft); } .lst-as.def { --c: var(--def); --c-ink: var(--def-soft); }
.lst-as:hover { background: color-mix(in srgb, var(--c) 26%, transparent); }
/* T-1483P (Jordan, 30 Oct: "The light version of these buttons are too bland they barely have color outline"): a button with a
   colour of its own wears it in full, both themes: a 2 px border in it, its words in its readable shade, a faint tint inside. */
.lst-as, .pop-btn, .pop-btn.def { border-width: 2px; border-style: solid; font-weight: 800; }
.pop-btn { color: var(--att-soft); } .pop-btn.def { color: var(--def-soft); }
.bmp-open { border-width: 2px; color: var(--att-soft); background: color-mix(in srgb, var(--att) 10%, var(--panel)); }
.lst-open { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: var(--s-3, 8px); }
.lst-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-dim); }
.lst-links a { font-weight: 700; color: var(--accent); text-decoration: none; }
@media (max-width: 760px) {
  .wl-card.lst-row { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 12px; }
  .lst-units, .lst-acts { grid-column: 1 / -1; }
  .lst-acts .btn { flex: 1; }
}
@media (max-width: 560px) { .lst-ally { font-size: var(--fs-ui); } }

/* The one Simulate button (T-1234B, Jordan 18 Oct, after two mockup sheets and his "just say simulate, and make it shorter
   than the dice emblem next to it … use it everywhere even when the space makes it stretch wider, I want it consistent",
   then "a bit less bright", D1): a short pill, SIMULATE alone in the logo's Cinzel, in the logo's magenta fading to its
   violet, the logo on a white seal taller than the pill breaking out of its left end. Never stretched: the same width
   wherever it sits; three sizes (sm for docks and tight rows, the default, lg for a page's main call). What it simulates
   goes in the line beside it (.sim-note) and its aria-label. The logo is the button's own <img>. */
:root { --simA: #cc3f78; --simB: #8f3b8f; --simC: #523a94; --sim-ring: #8f3b8f; }
.btn.sim-btn, .sim-btn, html .btn.so-attack.sim-btn, html .bd-bar .btn.so-attack.sim-btn, html[data-layout="new"] .bd-bar .so-actions .so-attack.sim-btn {
  --seal: 60px; --h: 38px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; flex: none; width: max-content; max-width: none;
  height: var(--h); min-height: 0; margin: calc((var(--seal) - var(--h)) / 2) 0 calc((var(--seal) - var(--h)) / 2) calc(var(--seal) * .2); padding: 0 20px 0 calc(var(--seal) * .85); border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--simA) 0%, var(--simB) 50%, var(--simC) 100%); color: #fff; text-decoration: none; cursor: pointer; filter: none;
  font: inherit; letter-spacing: 0; line-height: 1; vertical-align: middle;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--simB) 40%, transparent), inset 0 1px 0 color-mix(in srgb, white 22%, transparent); transition: box-shadow .15s, filter .15s; }
.sim-btn > img, .sim-btn > img.dice-mark, .sim-btn > img.dice-i, html.rs-mode .rs-sim .btn.sim-btn .dice-i { display: block; position: absolute; left: calc(var(--seal) * -.2); top: 50%; transform: translateY(-50%);
  width: var(--seal); height: var(--seal); box-sizing: border-box; padding: calc(var(--seal) * .14); margin: 0; border-radius: 50%; background: #fff;
  border: 3px solid var(--sim-ring); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); vertical-align: 0; }
.sim-btn > span { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: calc(var(--h) * .47); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); white-space: nowrap; }
.btn.sim-btn:hover, .sim-btn:hover, .sim-btn:focus-visible { filter: brightness(1.1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--simB) 25%, transparent), 0 4px 18px color-mix(in srgb, var(--simB) 45%, transparent); }
.btn.sim-btn:active, .sim-btn:active { filter: brightness(.92); transform: none; }
.sim-btn:disabled { opacity: .55; cursor: default; }
.sim-btn.sm, .bd-bar .btn.sim-btn, .dk-sim .btn.sim-btn { --seal: 46px; --h: 30px; padding-right: 14px; }
/* The phone's results sheet: its own older rule sets the button's padding and type; the small size, whole. */
html.rs-mode .rs-sim .btn.so-attack.sim-btn { --seal: 44px; --h: 30px; padding: 0 12px 0 calc(var(--seal) * .85); margin-top: 0; margin-bottom: 0; font-size: inherit; letter-spacing: 0; overflow: visible; }
html.rs-mode .rs-sim .btn.so-attack.sim-btn > span { font-size: 13px; }
.sim-btn.lg { --seal: 74px; --h: 46px; padding-right: 24px; }
/* What it simulates, beside it. */
.sim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .sim-note { color: var(--text-dim); font-size: var(--fs-ui); }
.cta .sim-btn { font-size: inherit; }
/* T-1275B (Jordan, 27 Oct): one colour per side of the galaxy, site-wide. data-gs on a chip, card or square names its side
   (imp, sm, cha, xen; MetaHub.sideOf, lists.js, build_pages.js); --side is its colour, for an edge, a line or the square. */
[data-gs="imp"] { --side: var(--side-imp); } [data-gs="sm"] { --side: var(--side-sm); } [data-gs="cha"] { --side: var(--side-cha); } [data-gs="xen"] { --side: var(--side-xen); }
.side-sq { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--side, var(--text-faint)); }
.side-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim); }
.side-key > span { display: inline-flex; align-items: center; gap: 6px; }

/* T-1485P (Jordan, 30 Oct: Winning lists "super ugly ... stretches on way too long"; mockup SuiFBTPj2RtjKPQAjvWiyU): wlkit.js's
   pieces, the Winning lists screen's and the List builder's alike. --side is the army's side colour ([data-gs]). */
.wl2-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.wl2-cb { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 800; cursor: pointer; white-space: nowrap; list-style: none; }
.wl2-cb::-webkit-details-marker { display: none; }
.wl2-cb .ico .glyph { width: 14px; height: 14px; }
.wl2-cb.rd { border: 2px solid color-mix(in srgb, var(--brand) 70%, #A21CAF); }
.wl2-cb.on { border: 2px solid var(--lead); color: var(--lead); background: color-mix(in srgb, var(--lead) 10%, var(--panel)); }
.wl2-sort { position: relative; }
.wl2-menu { position: absolute; z-index: 30; top: 46px; right: 0; display: grid; gap: 10px; min-width: 250px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); box-shadow: 0 12px 30px var(--shadow, rgba(0,0,0,.25)); }
.wl2-back { font: inherit; font-size: var(--fs-ui); font-weight: 800; color: var(--text-dim); background: none; border: 0; padding: 6px 0; margin: 0 0 6px; cursor: pointer; }
.wl2-h { margin: 18px 0 8px; font-family: var(--font-head); font-size: var(--fs-12); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.wl2-hint { margin: 10px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-faint); }
.wl2-eb { font: 800 var(--fs-12)/1.2 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .wl2-eb.sm { font-size: var(--fs-12); }
/* a list's row */
.wl-card.wl2-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px 8px 10px; border-left: 3px solid var(--side, var(--border)); }
.wl2-md { display: grid; justify-items: center; width: 44px; line-height: 1; }
.wl2-md b { font: 800 19px var(--font-head); color: var(--mc, var(--text-dim)); } .wl2-md small { font-size: var(--fs-12); color: var(--text-dim); margin-top: 3px; white-space: nowrap; }
.wl2-md.p1 { --mc: var(--lead); } .wl2-md.p2 { --mc: var(--text-2); } .wl2-md.p3 { --mc: var(--amber, #D97706); }
.wl2-md.lg b { font-size: 26px; }
.wl2-rt { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wl2-rt b, .wl2-st b { font: 800 var(--fs-16)/1.2 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl2-rt small, .wl2-st small { font-size: var(--fs-sm); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl2-rt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Each list's credit and its event (site audit #2): under the row's words, and in the sheet and the showcase. */
.wl2-src { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.4; } .wl2-src a { color: inherit; }
.wl-card.wl2-row .wl2-src { grid-column: 2 / -1; margin-top: -6px; }
.wl2-strip { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 3px; overflow: hidden; min-width: 0; } .wl2-strip svg { width: 26px; height: 26px; display: block; image-rendering: pixelated; }
.wl2-strip em { font-style: normal; font-size: var(--fs-12); font-weight: 800; color: var(--text-dim); align-self: center; margin-left: 2px; }
.wl2-star { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.wl2-star:hover { background: var(--panel-2); } .wl2-star.on { color: var(--lead); }
/* the showcase */
.wl2-show { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-top: 3px solid var(--side, var(--border)); border-radius: var(--r-lg); background: var(--panel); }
.wl2-sh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wl2-again { font: inherit; font-size: var(--fs-sm); font-weight: 800; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); min-height: 36px; padding: 0 12px; cursor: pointer; }
.wl2-st { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; } .wl2-st > span { display: grid; gap: 2px; min-width: 0; }
.wl2-show .wl2-st b, .wl2-sht .wl2-st b { white-space: normal; font-size: 18px; } .wl2-show .wl2-st small, .wl2-sht .wl2-st small { white-space: normal; }
.wl2-line { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-around; gap: 8px 6px; padding: 10px 6px 6px; border-radius: var(--r-md); background: linear-gradient(180deg, #2B2140, #3B2D57); overflow: hidden; }
.wl2-line svg { display: block; image-rendering: pixelated; }
.wl2-sht .wl2-line { justify-content: center; min-height: 52px; }
.wl2-fg { display: grid; justify-items: center; gap: 4px; } .wl2-fg > span { display: flex; align-items: flex-end; gap: 1px; }
.wl2-fg small { font-size: var(--fs-12); font-weight: 700; color: #E2E8F0; white-space: nowrap; }
.wl2-made { display: grid; gap: 6px; }
.wl2-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; } .wl2-bar i { display: block; height: 100%; }
.wl2-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--fs-sm); }
.wl2-key li { display: grid; grid-template-columns: auto 1fr auto 40px; gap: 8px; align-items: center; } .wl2-key li > i { width: 10px; height: 10px; border-radius: 3px; }
.wl2-key b { font: 800 var(--fs-14) var(--font-head); } .wl2-key em { font-style: normal; color: var(--text-dim); text-align: right; }
.k-char { background: #CA8A04; } .k-mon { background: #A855F7; } .k-veh { background: #64748B; } .k-mnt { background: #0EA5E9; } .k-bst { background: #10B981; } .k-inf { background: #3B82F6; }
.wl2-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .wl2-acts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.wl2-b { display: grid; place-items: center; min-height: 42px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.wl2-b.att { border: 2px solid var(--att); color: var(--att-soft); background: color-mix(in srgb, var(--att) 10%, var(--panel)); }
.wl2-b.def { border: 2px solid var(--def); color: var(--def-soft); background: color-mix(in srgb, var(--def) 10%, var(--panel)); }
.wl2-b.teal { border: 2px solid var(--teal); color: var(--text); background: color-mix(in srgb, var(--teal) 10%, var(--panel)); }
/* the army tiles */
.wl2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.wl2-tile.lst-army { display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 0; padding: 8px 4px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--side) 40%, var(--border)); background: color-mix(in srgb, var(--side) 10%, var(--panel)); color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.wl2-tile svg { width: 40px; height: 40px; image-rendering: pixelated; display: block; }
.wl2-tile b { font: 800 13.5px/1.1 var(--font-head); } .wl2-tile small { font-size: var(--fs-12); color: var(--text-dim); margin: 0; }
.wl2-tile:hover { border-color: var(--side); }
/* an army's head */
.wl2-ah { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 0 8px; }
.wl2-ah h3 { margin: 0; font-family: var(--font-head); font-size: 22px; } .wl2-ah h3 small { display: block; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-dim); font-weight: 700; }
.wl2-ah a { font-size: var(--fs-ui); font-weight: 800; color: var(--text-dim); }
.wl2-af { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--side) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--side) 40%, var(--border)); }
.wl2-af svg { width: 30px; height: 30px; image-rendering: pixelated; }
/* a list's sheet */
.wl2-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; background: rgba(2, 6, 23, 0.55); }
.wl2-ov[hidden] { display: none; }
.wl2-sht { position: relative; width: min(560px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto; display: grid; gap: 10px; box-sizing: border-box;
  padding: 16px max(14px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--panel); border: 1px solid var(--border); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.3); animation: ml-in 0.18s ease-out; }
@media (min-width: 900px) { .wl2-ov { place-items: center; } .wl2-sht { border-radius: var(--r-lg); border-bottom: 1px solid var(--border); } }
@media (prefers-reduced-motion: reduce) { .wl2-sht { animation: none; } }
.wl2-sht .wl2-st { padding-right: 36px; }
.wl2-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.wl2-us { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--fs-ui); }
.wl2-us li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--border); } .wl2-us li b { font: 800 var(--fs-14) var(--font-head); } .wl2-us li.more { border: 0; color: var(--text-dim); }
html.wl2-open { overflow: hidden; scrollbar-gutter: stable; }   /* T-1864P: the page keeps its width and place under a sheet */
/* T-1650P (Jordan, 4 Nov: "fit the entirety of the funnel in frame when the phone opens it"): on a phone the funnel copy is only as tall as
   the room left above the results strip, measured by layout.js (--fh; a guess from the screen's height until then), 104 to 227 px; it
   scales as a whole, its words with it. */
@media (max-width: 899px) { html.rs-mode.calc2.ml-battle .c2-funnel svg { height: var(--fh, clamp(104px, calc(100svh - 660px), 215px)); width: 100%; } }
/* T-1656P (Jordan, 5 Nov): the key, "Tap a step for its chart" and the result's line under the numbers card, the card the funnel alone; on a phone
   the results strip leaves its line out while the card shows it. */
.c2-foot { display: none; }
html.rs-mode.calc2 .c2-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: -8px 2px 8px; font-size: var(--fs-12); color: var(--text-dim); }
.nl > .c2-foot { grid-area: c2f; }
html.rs-mode.calc2 .c2-nums.folded + .c2-foot :is(.c2-key, .c2-tap) { display: none; }
.c2-foot .c2-tap { margin: 0; font-size: var(--fs-12); }
.c2-foot .c2-key { order: -1; }
.c2-foot .c2-key > summary { font-size: var(--fs-12); }
.c2-foot .c2-key[open] { flex-basis: 100%; }
.c2-foot .c2-reply { order: -2; margin: 0; font-size: var(--fs-12); font-weight: 700; color: var(--text); }
.c2-foot .c2-reply[hidden] { display: none; }
@media (max-width: 899px) { html.rs-mode.calc2:has(#c2Nums:not(.folded)):not(:has(.nl.docked)) .rs-sheet[data-h="peek"] .rs-line { display: none; } }
.nl.docked > .c2-foot { display: none !important; }
/* …and the battle layout's strip (it never opens there: no grip) drops the hidden body that kept 23 px over it. */
@media (max-width: 899px) { html.rs-mode.calc2.ml-battle .rs-sheet[data-h="peek"] .rs-body { display: none; }
  html.rs-mode.calc2.ml-battle:has(#c2Nums:not(.folded)):not(:has(.nl.docked)) { --rs-peek: 62px; } }   /* the strip without its line: 22 px back for the funnel */
/* T-1838P (Jordan, 8 Nov: Contact us "more obvious to access"): a line of its own at the top of every footer, a button and our address. */
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font-style: normal; }
.foot-contact .fc-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); font-weight: 800; font-size: var(--fs-ui); text-decoration: none; white-space: nowrap; }
.foot-contact .fc-btn:hover { filter: brightness(1.08); }
.foot-contact .fc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-contact .fc-txt { min-width: 0; color: var(--text-dim); font-size: var(--fs-sm); }
.foot-contact .fc-mail { color: var(--text); font-weight: 700; user-select: all; overflow-wrap: anywhere; }
:root[data-theme="light"] .foot-contact .fc-btn { color: #fff; }
.share-ready .sr-url { display: block; color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* T-1839P: the short link the GIF goes with */
/* T-1841P: Log in beside the sun, every page, phone and desktop; your name once signed in. */
.hd-login { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--h-md); max-width: 11em; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); font-family: inherit; font-size: var(--fs-ui); font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.hd-login[hidden] { display: none !important; }
.hd-login .ico { margin: 0; } .hd-login .glyph { width: 14px; height: 14px; display: block; }
.hd-login [data-acct-lbl] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hd-login:hover { border-color: var(--accent); }
.hd-login:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hd-login.in { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
@media (max-width: 480px) { .hd-login { max-width: 7.5em; padding: 0 10px; } }
@media print { .hd-login { display: none !important; } }