/* Static faction / unit / about pages. Colour tokens, chips and buttons come from style.css, and so does the page grid
   (T-932: body is --page-w wide, the header, sub-nav, main and footer inside it, as in the app). */
/* T-1065S raised the app's type scale to 12px and up; the static pages kept 10 and 11 px until their rework (T-1237B, done).
   T-1352P (the 19 Oct audit: text under 12 px on most pages): the pages take the app's scale too, nothing under 12 px; the
   pages' H3 stays 17 px, the size their sections were set at. */
:root { --fs-h3: 17px; }
/* The app's header (T-443, Jordan 30 Sep): the logo left, 🔍 and ⋯ right on one line; the nav inline
   on a wide screen, a compact row under them on a phone. */
.site-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav tools"; align-items: center; gap: 8px 16px; padding: 6px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.site-head .brand { grid-area: brand; }
.site-head .ph-nav { grid-area: nav; justify-self: end; }
.sh-tools { grid-area: tools; display: inline-flex; align-items: center; gap: 8px; }
.sh-more { position: relative; }
.sh-more > summary { list-style: none; display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); font-size: var(--fs-h3); font-weight: 800; line-height: 1; cursor: pointer; }
.sh-more > summary::-webkit-details-marker { display: none; }
.sh-more[open] > summary, .sh-more > summary:hover { color: var(--text); border-color: var(--accent); }
.sh-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 220px; padding: 6px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); box-shadow: 0 10px 24px var(--shadow); }
/* T-1233B (Jordan, 18 Oct: the menu clipped behind the list builder's sticky bar): an open ⋯ menu lifts the whole header above
   the page's sticky bars (the builder's is 30), still under its sheets and dialogs (55 and up). */
.site-head:has(.sh-more[open]) { z-index: 50 !important; }
.sh-menu a { padding: 9px 12px; border-radius: var(--r-md); color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-body); }
.sh-menu a:hover, .sh-menu a:focus-visible { background: var(--panel-2); outline: none; }
/* T-985: Show tiers, a toggle under the links (pagesearch.js TRTiers), its state on the right. */
.sh-menu .mi-tiers { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; background: none; color: var(--text); font-family: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
.sh-menu .mi-tiers:hover { background: var(--panel-2); }
.sh-menu .mi-tiers:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* T-1832P: the menu's two groups (Help and guides, About us), each a <details> opening its doors under it, as layout.js draws them. */
.sh-menu > a, .sh-menu .mi-g > summary { min-width: 0; }
.sh-menu .mi-g > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); list-style: none; cursor: pointer; color: var(--text); font-weight: 600; font-size: var(--fs-body); }
.sh-menu .mi-g > summary::-webkit-details-marker { display: none; }
.sh-menu .mi-g > summary:hover, .sh-menu .mi-g > summary:focus-visible { background: var(--panel-2); outline: none; }
.sh-menu .mi-chev { color: var(--text-dim); transition: transform 0.15s; }
.sh-menu .mi-g[open] .mi-chev { transform: rotate(90deg); }
.sh-menu .mi-sub { display: grid; margin: 0 0 4px 16px; padding-left: 6px; border-left: 2px solid var(--border); }
.sh-menu .mi-sub a { padding: 8px 10px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sh-menu .mi-chev { transition: none; } }
/* T-1151B: the links carry the app's tab icons; on a phone they are the app's bottom tab bar (style.css .tabs), the header
   just the logo and ⋯, so every page, app or not, has the same header and the same bar. */
.site-head .ph-nav a { gap: 6px; }
.ph-i { display: inline-flex; flex: none; }
/* T-1151B: the header the app's band: the panel colour and its line running the screen's full width (style.css .topbar). */
html:not(.in-app) .site-head { background: var(--panel); border-bottom: 1px solid var(--border);
  border-image: linear-gradient(to top, var(--border) 1px, var(--panel) 1px) fill 0 / 0 / 0 100vmax; }
/* T-1352P: the same height as the calculator's header, a --top-h row with the lockup centred in it. */
@media (min-width: 761px) { html:not(.in-app) .site-head { margin-top: calc(-1 * var(--gutter)); padding-top: 0; padding-bottom: 0; min-height: calc(var(--top-h) + 1px); } }
.site-head .logo-txt { display: grid; }
.ph-i svg, img.ph-i { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .site-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools"; }
  html:not(.in-app) .site-head .ph-nav {
    grid-area: auto; justify-self: stretch; width: auto;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; gap: 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));
  }
  html:not(.in-app) .site-head .ph-nav a { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 0; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
  html:not(.in-app) .site-head .ph-nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); text-decoration: none; }
  html:not(.in-app) .site-head .ph-nav .ph-i svg, html:not(.in-app) .site-head .ph-nav img.ph-i { width: 22px; height: 22px; }
  html:not(.in-app) body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* The lockup (T-819): the emblem beside the traced wordmark (style.css .wmk). */
.site-head .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.site-head .brand-emblem { height: 38px; }
@media (min-width: 900px) { .site-head .brand-emblem { height: 42px; } .site-head .brand .wmk img { height: 28px; } }
/* The tagline under the name on wide screens, as in the app (T-376). */
.site-head .brand-txt { display: grid; }
.site-head nav { display: flex; gap: 14px; }
/* T-1352P: the links as far apart as the calculator's tabs (12 px each side). */
@media (min-width: 761px) { .site-head .ph-nav { gap: 26px; } }
.site-head nav a { color: var(--text-dim); text-decoration: none; font-weight: 600; font-size: var(--fs-body); }
.site-head nav a:hover { color: var(--text); }
/* T-1075W: the header's four links are the footer's (Calculator, Armies, Meta, My army), on every page now the Meta row is gone; the
   page's own side reads in full colour with the accent under it. */
.site-head .ph-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* T-453: the header's and footer's links reach 24px to tap (WCAG 2.2 AA), their look unchanged. */
.site-head nav a, .foot-links a { position: relative; }
.site-head nav a::after, .foot-links a::after { content: ""; position: absolute; inset: -5px -3px; }
main { line-height: 1.55; }
/* T-984: links are the text's own light colour, underlined (the amber accent retired); a component link sets its own look. */
main a { color: var(--accent); text-decoration-line: underline; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 2px; }
main a:hover { text-decoration-color: currentColor; }
.crumbs { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 8px; }
.crumbs a { color: var(--text-dim); }
/* T-988 (SEO review 2: crumbs 15 px, footer links 16, the header's links 17 tall): every one a 24 px tap target at least. */
/* T-1352P: the trail's root link hides inside the app, where the calculator is home. */
html.in-app .crumbs .cr-root { display: none; }
.crumbs a, .foot-links a, .site-head .ph-nav a { display: inline-flex; align-items: center; min-height: 24px; }
/* T-1275B (Jordan, 27 Oct): headings in Barlow Semi Condensed (style.css --font-head), a step larger than the words' sizes, as a
   condensed face reads smaller; the words under them stay in Plex. */
h1 { font-family: var(--font-head); font-size: clamp(calc(var(--fs-num) + 2px), 4.4vw, calc(var(--fs-h1) + 4px)); font-weight: 800; margin: 4px 0 10px; line-height: 1.15; letter-spacing: .005em; }
h1 .sub { display: block; font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); letter-spacing: 0.3px; margin-top: 4px; }
h2 { font-family: var(--font-head); font-size: calc(var(--fs-h2) + 3px); font-weight: 800; margin: 26px 0 8px; line-height: 1.2; }
h3 { font-family: var(--font-head); font-size: calc(var(--fs-h3) + 1px); font-weight: 800; }
.lede { font-size: var(--fs-lead); color: var(--text-2); max-width: 820px; }
.note { font-size: var(--fs-sm); color: var(--text-dim); max-width: 820px; }
.score-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 12px; }
.score { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 14px; min-width: 70px; }
.score span { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.score b { font-size: var(--fs-h3); }
.score .rk-chip { font-size: var(--fs-lead); min-width: 40px; }
.cta { margin: 16px 0; }
.cta .btn { min-height: var(--h-lg); text-decoration: none; padding: 0 var(--s-5); font-size: var(--fs-body); }
.cta .btn.primary { font-size: var(--fs-lead); }
/* The way into the calculator (T-426; T-984: the brand red with white 16 px words and an icon). */
.cta .btn.primary { border: none; border-radius: var(--r-pill); font-weight: 800; padding: 0 18px; }
.cta .btn.primary:hover, .cta .btn.primary:focus-visible { filter: brightness(1.12); }
.tbl-wrap { overflow-x: auto; max-width: 100%; contain: paint; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); }
main { min-width: 0; }
.rank-table, .detail-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.rank-table th, .rank-table td, .detail-table th, .detail-table td { padding: 7px 10px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.rank-table thead th, .detail-table thead th { border-top: none; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--text-faint); white-space: nowrap; }
.rank-table td.n { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rank-table td.unit a { font-weight: 700; text-decoration: none; }
.rank-table td.unit small, .detail-table small { display: block; color: var(--text-faint); font-size: var(--fs-xs); }
.rank-table td.tgt { font-variant-numeric: tabular-nums; font-size: var(--fs-sm);}
/* Rows of one height (T-442, Jordan 30 Sep): the unit is two fixed lines, its name (with the tier)
   and "army · models · points", each cut with … rather than wrapped; the dice in a fixed slot at
   the row's end; the numbers narrow, right-aligned and tabular so the name gets the width. */
.rank-table td.unit { width: 100%; max-width: 0; }
.rank-table .u1, .rank-table .u2 { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-table .u2 { color: var(--text-faint); font-size: var(--fs-xs); }
.rank-table .u1 { display: flex; align-items: center; gap: 4px; height: 24px; }
.rank-table .u1 a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-table .u1 .tier { flex: none; }
/* A phone keeps the unit's name readable: Utility and Meta stay on the unit's own page. */
@media (max-width: 560px) { .rank-table .c-util, .rank-table .c-meta { display: none; }  }
.rank-table td:not(.unit) { white-space: nowrap; }
.rank-table td.tgt, .rank-table th.tgt { text-align: right; }
.rank-table th.run, .rank-table td.run { width: 1%; padding-left: 4px; padding-right: 8px; text-align: right; vertical-align: middle; }
.rank-table td.run .run-mark { display: inline-flex; position: relative; }
.rank-table td.run .run-mark .dice-mark { width: 20px; height: auto; }
.rank-table td.run .rm-tip { left: auto; right: 0; transform: none; }
.rank-table td.run .rm-tip::after { left: auto; right: 10px; transform: none; }
.rank-table th.tgt { text-align: center; }
.detail-table th { font-weight: 700; white-space: nowrap; }
/* T-310: on a phone the offense table's four columns fit the screen: targets wrap, cells tighten. */
@media (max-width: 560px) { .detail-table th, .detail-table td { padding: 7px 5px; } .detail-table tbody th { white-space: normal; } .detail-table tbody th small { min-width: 64px; } }
.detail-table td b { font-variant-numeric: tabular-nums; }
/* T-360: Offense by each target's best squad, its weapons as chips; the other view on a switch. */
.off-t .lv-a { display: none; }
.off-t[data-view="all"] .lv-a { display: table-cell; }
.off-t[data-view="all"] .lv-b { display: none; }
.off-sq > b { font-size: var(--fs-lead); }
.off-sq > small.via { display: inline; }
.off-sq > small.lo-alt { margin-top: 1px; }
.kit { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 4px; }
.kit-c { display: inline-block; padding: 2px 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); font-size: var(--fs-sm); line-height: 1.5; }
.kit-c b { font-variant-numeric: tabular-nums; }
.lov { display: inline-flex; gap: 2px; padding: 3px; margin: 2px 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); }
.lov button { font: inherit; font-size: var(--fs-ui); font-weight: 700; padding: 6px 14px; min-height: var(--h-md); border-radius: var(--r-pill); border: 0; background: none; color: var(--text-dim); cursor: pointer; }
.lov button[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); box-shadow: inset 0 0 0 1px var(--pick-bd); }
.lov button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.detail-table .muted { color: var(--text-faint); }
.best-list { padding-left: 18px; }
.best-list li { margin: 4px 0; }
.faction-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.faction-list a { font-weight: 700; text-decoration: none; }
.faction-list small { color: var(--text-faint); }
.site-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-faint); }
.site-foot a { color: var(--text-dim); }
.site-foot .disclaimer { max-width: 760px; }
/* Every page's doors (T-444), one wrapping row above the disclaimer. */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 6px; font-size: var(--fs-ui); font-weight: 600; }
.foot-links a { color: var(--text-dim); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 760px) { .rank-table th.tgt, .rank-table td.tgt { display: none; } }
/* Every score in view on a phone (Jordan, 27 Sep: Meta was off the edge): the points go under
   the unit's name, and the columns tighten. */
.rank-table .pts-in { display: none; }
@media (max-width: 560px) {
  .rank-table th.pts, .rank-table td.pts { display: none; }
  .rank-table .pts-in { display: inline; }
  .rank-table th, .rank-table td { padding: 7px 3px; }
  .rank-table th:first-child, .rank-table td:first-child { padding-left: 6px; padding-right: 1px; }
  .rank-table thead th:not([aria-sort]) .sort-ar::after { content: none; }
  .rank-table .tier { min-width: 20px; padding: 0 3px; font-size: var(--fs-12); border-width: 1.5px; }
  .rank-table thead th { letter-spacing: 0; font-size: var(--fs-micro); }
  .rank-table .rk-chip { min-width: 24px; padding: 2px 2px; }
  .rank-table td.unit a { hyphens: auto; }
}
.traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.trait { font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--border); background: var(--panel); border-radius: var(--r-pill); padding: 3px 10px; }
/* A faction's recent tournament lists. */
.tlists { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 8px 0 10px; }
.tlist { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-ui); }
.tl-top b { color: var(--text); }
.tl-det { font-weight: 700; color: var(--att); margin-top: 3px; }
.tl-sub { color: var(--text-faint); font-size: var(--fs-12); margin-top: 2px; }
.tlist summary { cursor: pointer; color: var(--text-dim); font-size: var(--fs-sm); margin-top: 6px; }
.tlist pre { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--text-dim); max-height: 360px; overflow: auto; }
/* Sortable tables (T-199): each heading a button, the arrow on the sorted one. */
.rank-table th .sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.rank-table th .sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.rank-table th .sort-ar::after { content: "↕"; opacity: 0.35; font-size: var(--fs-micro); }
.rank-table th[aria-sort="descending"] .sort-ar::after { content: "▼"; opacity: 1; }
.rank-table th[aria-sort="ascending"] .sort-ar::after { content: "▲"; opacity: 1; }
.rank-table th[aria-sort] { color: var(--text); }
/* A winning list's own page (T-194). */
.wl-text { white-space: pre-wrap; font: var(--fs-ui)/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--panel, #fff); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto; }
.wl-text a { font-weight: 700; }
/* T-859: the whole list on its page, no box inside the page to scroll (style.css caps the app's at 360 px). */
.wl-text { max-height: none; overflow: visible; overflow-wrap: anywhere; }
/* T-1352P: a list row's Simulate is the shared small Simulate button (style.css .sim-btn.sm); only its place here. */
.wl-text a.wl-sim { margin: 2px 0 2px 6px; }
.cta.wl-load { display: flex; flex-wrap: wrap; gap: 8px; }

.tlist .tl-page { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; }

/* Tier letters (T-219) and the faction intro's picks (T-221). */
.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: 12.5px; color: var(--ti); border: 2px solid var(--te); background: color-mix(in srgb, var(--tc) 16%, transparent); }
/* The tier ramp's colours are style.css's tokens (--tier-s to --tier-d, their inks and edges, T-983), set there for .tier.t-s to t-d. */
.score .tier { font-size: var(--fs-16); min-width: 40px; padding: 4px 8px; }
.picks { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 8px; max-width: 820px; }
.picks li { line-height: 1.9; }
.picks li > b { display: inline-block; min-width: 96px; color: var(--text-2); }
.picks a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.picks small { color: var(--text-faint); }
@media (max-width: 560px) { .picks li > b, .picks .pk { display: block; } .picks .sep { display: none; } .picks li { line-height: 2; } }

/* "How do we score this?" (T-228): a quiet button at the top that opens the method's gist. */
.method-note { max-width: 820px; margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.method-note summary { cursor: pointer; padding: 8px 12px; font-weight: 700; font-size: var(--fs-body); color: var(--text-2); }
.method-note summary::before { content: "ⓘ "; color: var(--accent); }
.method-note > div { padding: 0 14px 10px; font-size: var(--fs-body); color: var(--text-2); }
.method-note p, .method-body p { margin: 0 0 8px; }
.method-body { max-width: 820px; }

/* T-238: the site's name in every footer, linking home; T-239: a unit's inputs, in the app. */
/* T-311: the header's lockup (since T-819 the emblem and the traced wordmark), the line of what we are under it. */
.foot-brand { display: grid; justify-items: start; gap: 6px; }
.foot-brand a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.foot-brand .brand-emblem { height: 32px; }
.foot-brand .wmk img { height: 22px; }
/* A unit page's one way into the calculator (T-239, T-256): the button, a line of why under it. */
.cta-unit .btn { max-width: 100%; box-sizing: border-box; }
/* One width whatever the opponent's name (T-338): the words take the room left. */
.cta-unit .cta-sim { width: min(100%, 440px); box-sizing: border-box; }
.cta-unit .cta-sim .cta-txt { flex: 1; }
/* A pip for each opponent under the box (T-446): the current one filled, a tap jumps to it. */
.cta-pips { display: flex; align-items: center; gap: 4px; margin-top: 4px; width: min(100%, 440px); justify-content: center; }
.cta-arr { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); color: var(--text-2); font: 700 var(--fs-20)/1 var(--font, inherit); cursor: pointer; display: grid; place-items: center; }
.cta-arr:hover { border-color: var(--accent); color: var(--text); }
.cta-arr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-n { min-width: 4.5em; text-align: center; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cta-unit small { display: block; margin-top: 6px; color: var(--text-dim); font-size: var(--fs-ui); }
.cta-unit small b { color: var(--text-2); }
/* Best loadout (T-225): one block per goal, its squad as a short list. */
.lo-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.lo-block { border: 1px solid var(--border); border-left: 4px solid var(--att); border-radius: var(--r-md); padding: 10px 12px; background: var(--panel); }   /* T-1275B: the calculator's card edge */
.best-hub .lo-head b { font-family: var(--font-head); font-size: calc(var(--fs-h3) + 1px); }
/* T-1275B: a detachment page's name in the calculator's detachment look, the dashed teal of + Detachment. */
h1.det-h1 { padding: 8px 12px; border: 1.5px dashed var(--teal); border-left: 4px solid var(--teal); border-radius: var(--r-lg); background: color-mix(in srgb, var(--teal) 8%, var(--panel)); }
.lo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.lo-head > small { color: var(--text-faint); font-size: var(--fs-sm); }
.lo-res { width: 100%; font-size: var(--fs-ui); color: var(--text-dim); }
.lo-res small { color: var(--text-faint); margin-left: 4px; }
.lo-block ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.45; }
/* The weekly meta report (T-167). */
.meta-list { padding-left: 22px; margin: 6px 0 16px; line-height: 1.7; font-size: var(--fs-body); }
.meta-list small { color: var(--text-faint); margin-left: 2px; }
.meta-list .tier { transform: scale(0.8); vertical-align: -3px; }
.meta-n { color: var(--text-dim); font-size: var(--fs-ui); margin-left: 6px; font-variant-numeric: tabular-nums; }
/* Damage per weapon (T-224): a section card under the Offense table, shut to start (T-357). */
.wp-table th:first-child { white-space: normal; min-width: 120px; }
.wp-table td, .wp-table thead th.tgt { text-align: center; font-variant-numeric: tabular-nums; }
.wp-table td.w5 { background: color-mix(in srgb, var(--att) 42%, transparent); } .wp-table td.w4 { background: color-mix(in srgb, var(--att) 28%, transparent); }
.wp-table td.w3 { background: color-mix(in srgb, var(--att) 17%, transparent); } .wp-table td.w2 { background: color-mix(in srgb, var(--att) 9%, transparent); }
.wp-table td.w1 { background: transparent; }
@media (max-width: 560px) {
  .wp-table th, .wp-table td { padding: 6px 4px; font-size: var(--fs-sm); }
  .wp-table thead th { white-space: normal; font-size: var(--fs-micro); letter-spacing: 0.2px; }
  .wp-table th:first-child { min-width: 0; width: 34%; }
}
/* The faction tier list (T-257). */
.ftier td small { display: block; color: var(--text-faint); font-size: var(--fs-xs); font-weight: 400; }
.ftier td.n { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Best units for the job (T-258). */
.best-table td.tgt small { display: inline; margin-left: 3px; font-size: var(--fs-micro); }
.best-table td.unit .tier { transform: scale(0.8); vertical-align: -2px; }
.best-links { font-size: var(--fs-body); margin: 6px 0 18px; }
.best-links a { font-weight: 700; }
.lo-block ol { margin: 6px 0 0; padding-left: 20px; font-size: var(--fs-body); line-height: 1.6; }
.lo-block ol small { color: var(--text-faint); }
@media (max-width: 760px) {
  .rank-table.best-table th.tgt, .rank-table.best-table td.tgt { display: table-cell; }
  .best-table th, .best-table td { padding: 7px 3px; }
  .best-table thead th { white-space: normal; font-size: var(--fs-micro); }
  .best-table td.tgt { font-size: var(--fs-sm); }
  .best-table td.tgt small { margin-left: 1px; font-size: var(--fs-micro); }
  .best-table td.unit { min-width: 104px; }   /* T-991: 138 before names wrapped (T-990) */
  .rank-table td.run .run-mark .dice-mark { width: 18px; }
}
/* What's winning (T-161). */
.win-table td.n { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.win-table td small { display: block; color: var(--text-faint); font-size: var(--fs-xs); }
.win-table td small.up { color: var(--green); } .win-table td small.down { color: var(--red); }
.win-table td.n small.up, .win-table td.n small.down, .win-table td.n > small { display: inline; margin-left: 4px; }
.mflag { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; border-radius: var(--r-pill); padding: 1px 7px; vertical-align: 1px; }
.mflag.meta { color: var(--def); background: color-mix(in srgb, var(--def) 16%, transparent); }
.mflag.rise { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.lead-bonus { max-width: 820px; font-size: var(--fs-body); margin: 4px 0 14px; }

/* T-357: a unit page's header band (figure, name, army, role; T-870: points, size and the small letter tag), and each
   section a card with a small-caps label that folds. */
.u-band { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin: 6px 0 10px; }
.u-fig { width: 76px; height: 76px; border-radius: var(--r-lg); background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.u-fig svg { max-width: 64px; max-height: 64px; image-rendering: pixelated; } /* T-1205B: the figure fills the box at a whole scale (Figures.picSvg) */
/* Army glyphs (T-375, T-406): only where they can be 16 px or more. */
.h1-gl { width: 24px; height: 24px; vertical-align: -2px; margin-right: 10px; }
.u-fig.port { place-items: end center; } .u-fig.port svg { max-width: 72px; max-height: 72px; }
.u-id { min-width: 0; }
.u-id h1 { margin: 0; text-wrap: balance; }
.u-meta { margin: 4px 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.u-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.u-pts { color: var(--text); font-size: var(--fs-lead); } .u-pts b { font-size: var(--fs-h2); font-weight: 900; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .u-band { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 12px; } .u-fig { width: 56px; height: 56px; } .u-fig svg, .u-fig.port svg { max-width: 48px; max-height: 48px; } .u-asof { flex-basis: 100%; font-size: var(--fs-sm); } }
/* T-870: numbers first. Two blocks of bar rows (damage per 100 pts into each target; hits to destroy 100 pts from each attacker),
   side by side where there's room. A bar is the number against the top 5% of units for its row. */
/* T-1073W: the three charts as one block with tabs (build_pages.js unitChart, docs/uchart.js). */
.u-chart { margin: 0 0 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; overflow: hidden; }
.uc-tabs { display: flex; gap: 4px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); background: var(--panel-2); overflow-x: auto; scrollbar-width: none; }
.uc-tabs [role="tab"] { flex: 1 1 0; min-width: max-content; min-height: var(--h-lg); padding: 0 14px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.uc-tabs [role="tab"]:hover { color: var(--text); }
.uc-tabs [role="tab"][aria-selected="true"] { background: var(--panel); border-color: var(--border); color: var(--text); box-shadow: inset 0 3px 0 var(--accent); }
.uc-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.uc-p { padding: 12px 14px 6px; min-width: 0; }
.uc-p > * { max-width: 880px; }
.uc-p:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.uc-p[hidden] { display: none; }
.u-chart .u-num { background: none; border: 0; border-radius: 0; padding: 0; }
@media (max-width: 560px) { .uc-tabs [role="tab"] { padding: 0 10px; } .uc-p { padding: 10px 12px 4px; } }
.u-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 12px; margin: 0 0 8px; }
.u-num { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px 6px; min-width: 0; }
.u-num h2 { margin: 0 0 6px; font-size: var(--fs-h2); }
.u-num h2 small { display: block; margin-top: 1px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-dim); }
.nbars { list-style: none; margin: 0; padding: 0; }
.nbars li { display: grid; grid-template-columns: minmax(0, 9.5em) 4.6em minmax(36px, 1fr) 44px; align-items: center; gap: 0 10px; min-height: var(--h-lg); border-top: 1px solid var(--border); }
.nbars li:first-child { border-top: 0; }
.nb-l { font-size: var(--fs-body); font-weight: 600; line-height: 1.25; min-width: 0; padding: 5px 0; }
/* T-945: the plasma row, the headline durability every table quotes. */
.nbars li.nb-main .nb-l { font-weight: 800; color: var(--text); }
.nb-l small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--text-faint); }
.nb-v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-v b { font-size: var(--fs-lead); font-weight: 800; }
.nb-via { color: var(--text-faint); display: inline-flex; } .nb-via .ico { margin: 0; }
.nb-b { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--text) 9%, transparent); }
/* T-913: the top-5% tick, a thin mark standing just proud of the bar, edged in the card's colour so it reads on the fill too */
.nb-t { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--text) 62%, transparent); box-shadow: 0 0 0 1px var(--panel); text-decoration: none; }
.nb-b > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--att); }
.u-dur .nb-b > i { background: var(--def); }
.nb-go { display: flex; justify-content: flex-end; }
.nb-go .run-link.run-ic { width: 44px; height: 44px; margin: 0; border-color: transparent; }
/* T-914: the weapons behind each row's number, one quiet line under it (wraps as prose, never past the card). */
.nb-kit { grid-column: 1 / -1; margin: -6px 0 7px; font-size: var(--fs-sm); font-weight: 400; line-height: 1.35; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.nb-sq { color: var(--text-faint); }
.nb-kitline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--fs-ui); }
.nb-kitline > span:first-child { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.nb-kitline .kit { margin: 0; } .nb-kitline { color: var(--text-dim); overflow-wrap: anywhere; }
.nb-note { font-size: var(--fs-sm); color: var(--text-dim); margin: 0; padding: 8px 0; border-top: 1px solid var(--border); }
.nb-key { font-size: var(--fs-sm); color: var(--text-dim); margin: 4px 0 10px; max-width: 820px; }
.nb-key a { white-space: nowrap; font-weight: 600; }
.u-lists { font-size: var(--fs-body); margin: 10px 0 4px; } .u-lists small { color: var(--text-faint); }
@media (max-width: 560px) { .nbars li { grid-template-columns: minmax(0, 1fr) 4.2em minmax(32px, 0.8fr) 44px; gap: 0 8px; } .u-num { padding: 10px 12px 4px; } }
/* T-915: a section card is never wider than the page (a phone's large text, a long name), and nothing in it pushes past its edge. */
details.u-sec { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin: 14px 0; min-width: 0; max-width: 100%; }
details.u-sec > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: end; padding: 12px 14px; }
details.u-sec > summary::-webkit-details-marker { display: none; }
details.u-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-lg); }
.u-lab { grid-column: 1; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
details.u-sec > summary h2 { grid-column: 1; margin: 2px 0 0; font-size: var(--fs-h2); }
.u-tog { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--text-faint); font-weight: 800; transition: transform 0.15s; }
details.u-sec:not([open]) .u-tog { transform: rotate(-90deg); }
.u-body { padding: 0 14px 14px; min-width: 0; overflow-wrap: anywhere; }
.u-body .tbl-wrap { contain: none; overflow-wrap: normal; }
.u-body > .note:first-child { margin-top: 0; }
.u-body .tbl-wrap { background: var(--panel-2); }
.u-whos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* T-856: the answer first, under the scores: a verdict in our words, then points, what it plays with and what it's compared with. */
.u-ans { margin: 12px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--att); border-radius: var(--r-lg); background: var(--panel); }
.u-facts { margin: 0; display: grid; gap: 6px; font-size: var(--fs-body); }
.u-facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.u-facts dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.u-facts dd { margin: 0; line-height: 1.7; }
.u-facts a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.u-facts a .tier { font-size: var(--fs-12); min-width: 20px; padding: 0 3px; border-width: 1.5px; }
.u-facts small { color: var(--text-faint); }
.u-facts i { font-style: normal; color: var(--text-dim); margin-right: 4px; }
.u-f2 { display: block; }
.u-facts .patch-line { display: inline; border: 0; padding: 0; margin: 0 0 0 4px; background: none; font-size: var(--fs-ui); white-space: normal; }
@media (max-width: 560px) {
  .u-facts > div { grid-template-columns: 1fr; gap: 0; }
  .u-facts dd { line-height: 1.45; }
  .u-facts .u-samp { display: block; margin-top: -6px; }
  .u-facts a { display: inline-flex; align-items: center; gap: 5px; min-height: var(--h-lg); }
  .u-facts .patch-line { display: flex; margin: 0; }
}
/* T-858: an army's detachments hub, one row per detachment with its share of winning lists as a bar. */
.dh-list { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 10px; max-width: 860px; }
.dh-row { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 14px 12px; }
.dh-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dh-n { color: var(--text-faint); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.dh-row h2 { margin: 0; font-size: var(--fs-h2); flex: 1 1 auto; }
.dh-row h2 a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--h-lg); }
.dh-share { color: var(--text-dim); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.dh-bar { display: block; height: 6px; border-radius: var(--r-pill); background: var(--panel-2); overflow: hidden; margin: 2px 0 8px; }
.dh-bar > i { display: block; height: 100%; background: var(--teal, var(--att)); border-radius: var(--r-pill); }
.dh-fx { margin: 0 0 4px; font-size: var(--fs-body); }
/* T-987: the hub's plain section (detachments in no winning list yet) and a detachment page's rules, enhancements, stratagems. */
.dh-plain { margin: 8px 0 18px; padding-left: 1.2em; max-width: 860px; }
.dh-plain li { margin: 0 0 10px; line-height: 1.5; }
.dh-plain > li > a { font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; }
.dh-plain small, .det-enh small, .det-strat small { color: var(--text-faint); }
.dh-lift { margin: 0; font-size: var(--fs-body); color: var(--text-2); line-height: 1.8; }
.dh-lift a { font-weight: 600; text-decoration: none; }
.dh-lift small, .f-dets small { color: var(--text-faint); }
.f-dets { font-size: var(--fs-body); margin: 0 0 16px; line-height: 1.9; }
.f-dets a { font-weight: 600; }
@media (max-width: 560px) { .dh-lift a, .f-dets a { display: inline-flex; align-items: center; min-height: var(--h-lg); } .dh-lift, .f-dets { line-height: 1.4; } }
/* T-857: the unit page's way on, one row of chips at the end. */
.u-next { margin: 18px 0 8px; }
.u-next .u-nh { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.u-next ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.u-next a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-lg); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; font-size: var(--fs-body); text-decoration: none; }
.u-next a:hover, .u-next a:focus-visible { border-color: var(--accent); }
/* T-1197B: the page's one red button is "Simulate this setup" at the top; the way on to the calculator is an attacker-blue outline. */
.u-next a.primary { border-color: var(--att); color: var(--att-soft); font-weight: 700; }
.u-next small { color: var(--text-faint); font-weight: 400; }
.u-next a.primary small { color: inherit; opacity: 0.85; }
/* Quick answers (T-842): the unit page's FAQ, visible, a question over its answer. */
.u-qa { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.u-qa dt { font-weight: 700; font-size: var(--fs-body); }
.u-qa dd { margin: 2px 0 0; font-size: var(--fs-body); color: var(--text-2); line-height: 1.5; }
.u-who { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: var(--fs-ui); }
.u-who > span { font-weight: 700; }
.u-who a { text-decoration: none; font-weight: 600; color: var(--accent); }   /* T-869: 4.5:1 on --panel-2 in both themes */
.u-who b { font-variant-numeric: tabular-nums; }
.u-who small { color: var(--text-faint); }
@media (max-width: 560px) { .u-who { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.run-link.run-ic { display: inline-grid; place-items: center; width: 36px; height: 32px; margin-top: 4px; border-radius: var(--r-md); border: 1px solid transparent; color: var(--accent); font-size: var(--fs-sm); }   /* T-936: no box per row */
/* The same "simulate this" dice as the rankings and best pages (T-449). */
.run-link.run-ic .dice-mark { width: 20px; height: auto; }
.run-link.run-ic:hover, .run-link.run-ic:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); outline: none; }

/* T-361: search on the static pages, the 🔍 in the header and its box. */
.site-head { position: relative; }
.ps-wrap { display: inline-flex; }
.ps-btn { display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; }
.ps-btn:hover, .ps-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.ps-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-box { position: absolute; right: 0; top: calc(100% - 6px); z-index: 30; width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 12px 32px var(--shadow); padding: 8px; display: grid; gap: 6px; }
.ps-in { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-lead); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.ps-in:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.ps-list { display: flex; flex-direction: column; max-height: min(60vh, 420px); overflow-y: auto; }
.ps-row { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); color: var(--text); text-decoration: none; min-height: 40px; }
.ps-row:hover, .ps-row.on { background: var(--panel-2); }
.ps-row.on { outline: 1px solid var(--accent); }
.ps-n b { font-weight: 700; }
.ps-n small { display: block; font-size: var(--fs-sm); color: var(--text-faint); }
.ps-empty { margin: 4px 6px; font-size: var(--fs-ui); color: var(--text-dim); }

/* T-358: the guide's Try it links, and on phones a bar to the calculator once its top button is gone. */
.tries { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px; }
.try { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-ui); color: var(--accent); text-decoration: none; white-space: nowrap; }
.try .dice-mark { height: 14px; width: auto; }
.try:hover span, .try:focus-visible span { text-decoration: underline; }
.best-list .try { margin-left: 4px; font-size: var(--fs-ui); }
/* T-916: a unit's best detachment per target and attacker, measured on the unit: the detachment, what it does in our
   words, then each row it wins with the number before and after. */
.bd-h { margin: 12px 0 2px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.bd-list { list-style: none; margin: 0; padding: 0; }
.bd-list li { display: grid; gap: 3px; padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; }
.bd-list li:first-child { border-top: 0; }
.bd-d { font-size: var(--fs-body); }
.bd-fx { font-size: var(--fs-ui); color: var(--text-dim); }
.bd-if { color: var(--text-faint); }
.bd-n { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.bd-n span { white-space: nowrap; }
.bd-list .try { justify-self: start; min-height: 32px; font-size: var(--fs-ui); }
.bd-also { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.try-bar, .sim-btn.try-bar { display: none; }
/* T-1274B (Jordan, 27 Oct: the red bar "doesn't look great", the Simulate button "chef's kiss"): the guide's bar on phones is
   the one Simulate button, floating at the foot of the screen, centred, the same as the calculator's, over the tab bar (T-994's red pill went). */
@media (max-width: 760px) {
  .sim-btn.try-bar:not([hidden]) { display: inline-flex; position: fixed; z-index: 20; left: 50%; transform: translateX(calc(-50% + var(--seal) * .1)); margin: 0;
    bottom: calc(72px + (var(--seal) - var(--h)) / 2 + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 24px var(--shadow), 0 4px 14px color-mix(in srgb, var(--simB) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
  html.in-app .sim-btn.try-bar:not([hidden]) { bottom: calc(12px + (var(--seal) - var(--h)) / 2 + env(safe-area-inset-bottom, 0px)); }   /* above the phone tab bar, or the app's own */
  .sim-btn.try-bar:not([hidden]):active { transform: translateX(calc(-50% + var(--seal) * .1)); }
}
@media (max-width: 760px) { body:has(#tryBar:not([hidden])) .site-foot { padding-bottom: 80px; } }
/* The five jobs as tiles on the best pages (T-445): the job, its #1's figure and name; the page's own job marked. */
.job-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.job-tile { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 10px 6px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); text-decoration: none; text-align: center; min-width: 0; }
main a.job-tile { color: var(--text); }
.job-tile:hover, .job-tile:focus-visible { border-color: var(--accent); }
.job-tile[aria-current="page"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.job-tile .jt-fig { height: 44px; display: grid; place-items: center; }
.job-tile .jt-fig svg { max-height: 40px; max-width: 52px; image-rendering: pixelated; }
.job-tile b { font-size: var(--fs-ui); line-height: 1.2; }
.job-tile small { font-size: var(--fs-xs); line-height: 1.25; color: var(--text-dim); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) {
  .job-tiles { display: flex; overflow-x: auto; scrollbar-width: none; margin: 4px calc(-1 * var(--gutter)) 14px; padding: 0 var(--gutter); gap: 6px; }
  .job-tiles::-webkit-scrollbar { display: none; }
  .job-tile { flex: 0 0 104px; }
}

/* T-387: month by month in its army's winning lists. */
.u-trend { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; font-size: var(--fs-ui); color: var(--text-dim); }
.u-trend > span { font-weight: 700; }
.u-trend small { color: var(--text-faint); font-size: var(--fs-sm); }

/* T-394: the glossary on /about/, and its terms linked where they appear (quietly: dotted underline). */
.gloss dt { font-weight: 800; margin-top: 12px; scroll-margin-top: 16px; }
.gloss dd { margin: 2px 0 0; color: var(--text-2); }
.gloss dt:target { color: var(--green); }
a.gl { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--text-faint); }
a.gl:hover { color: var(--green); }

/* T-392: printing a unit, army, guide or Meta page: black on white, every section open (the
   page's inline script opens folded sections), no controls, where it came from at the bottom. */
.print-url { display: none; }
@media print {
  :root, :root[data-theme] { --bg: #fff; --panel: #fff; --panel-2: #f8fafc; --panel-3: #fff; --border: #cbd5e1; --text: #0f172a; --text-dim: #334155; --text-faint: #475569; --text-2: #1e293b; --soft: #f1f5f9; --chip-bg: #f1f5f9; }
  html, body { background: #fff !important; color: #0f172a; }
  body { font-size: 11pt; }
  .site-head nav, .ps-wrap, .crumbs, .rate-box, .cta, .cta-sim, .try, .run-link, .run-mark, .lov, [data-shop-unit], .site-foot p:not(.print-url):not(.disclaimer), #tryBar, .mh-seg, .mh-fac, .mh-find, .mh-doors, .u-next, .wl-sim { display: none !important; }
  .print-url { display: block; font-size: 9pt; color: #475569; }
  a { color: inherit; text-decoration: none; }
  details.u-sec > summary .u-tog, details > summary::marker { display: none; }
  .u-band, .u-scores, tr, .u-who, .mh-row { break-inside: avoid; }
  h2, h3, details.u-sec > summary { break-after: avoid; }
  .tbl-wrap { overflow: visible !important; }
  table { font-size: 8pt; width: 100%; }
  table th, table td { padding: 3px 4px !important; }
  table small { font-size: 7pt; }
  /* The per-target columns don't fit a page: the unit's own page carries them. */
  .rank-table .tgt { display: none; }
  .u-band, details.u-sec { box-shadow: none; }
  @page { margin: 12mm; }
}

/* The Lab (T-467): a tile per page, and the build line. */
.lab-tiles, .nf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 16px 0; }
.lab-tile, .nf-tile { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); color: var(--text); text-decoration: none; }
.lab-tile:hover, .lab-tile:focus-visible, .nf-tile:hover, .nf-tile:focus-visible { border-color: var(--accent); }
.lab-tile b, .nf-tile b { font-size: var(--fs-lead); }
.lab-tile span, .nf-tile span { color: var(--text-dim); font-size: var(--fs-body); line-height: 1.45; }
.nf-tile { align-content: start; }
.nf-find { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-lg); padding: 8px 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.nf-find:hover, .nf-find:focus-visible { border-color: var(--accent); }
main a.nf-find { color: var(--text); text-decoration: none; }
.lab-tile small { color: var(--text-faint); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); }
.lab-build { margin-top: 24px; color: var(--text-faint); font-size: var(--fs-sm); }
.lab-tokens td { white-space: nowrap; }
.lab-sw-dot { display: inline-block; width: 16px; height: 16px; border-radius: var(--r-sm); vertical-align: middle; margin-right: 6px; border: 1px solid rgba(127,127,127,.4); }
.lab-na { color: var(--text-faint); }
.lab-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 16px; }
.lab-heads { display: grid; gap: 8px; max-width: 520px; margin: 8px 0 16px; }
.lab-ramp { display: inline-grid; place-items: end start; width: 64px; height: 48px; border-radius: var(--r-md); padding: 4px 6px; box-sizing: border-box; }
.lab-ramp code { font-size: var(--fs-xs); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lab-type { margin: 8px 0 16px; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.lab-spr { margin: 0; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.lab-art { display: grid; place-items: center; min-height: 80px; background: var(--panel-2); border-radius: var(--r-md); padding: 6px; }
.lab-art svg { max-width: 100%; height: auto; image-rendering: pixelated; }
.lab-spr figcaption { display: grid; gap: 1px; font-size: var(--fs-sm); }
/* The glyphs (T-513): each at 27px on a dark and a light panel, in that panel's text colour. */
.lab-glyph .lab-art { grid-auto-flow: column; gap: 6px; min-height: 0; padding: 0; background: none; }
.lab-glyph .lg-dark, .lab-glyph .lg-light { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); }
.lab-glyph .lg-dark { background: #0b1220; color: #e2e8f0; }
.lab-glyph .lg-light { background: var(--on-brand); color: #0f172a; border: 1px solid #e2e8f0; }
.lab-glyph .glyph { width: 27px; height: 27px; }
/* Our pixel glyphs in place of emoji (T-514): beside a control's or a badge's words, in their colour. */
.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; }
td.tgt small .ico { margin: 0 0 0 0.3em; opacity: 0.7; }
.bc-who { display: inline-flex; gap: 2px; }
.bc-who .glyph { width: 12px; height: 12px; }
.lab-spr small { color: var(--text-faint); }
.lab-bds { display: grid; gap: 8px; margin: 6px 0 14px; }
.lab-bd { margin: 0; display: grid; gap: 4px; }
.lab-bd svg { width: 100%; max-width: 640px; height: auto; border-radius: var(--r-md); }
/* Figures next (T-1003W, T-1004W): each figure looping through its frame sets, its sheet on demand. */
.fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.fn-card { margin: 0; display: grid; gap: 4px; align-content: start; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); min-width: 0; }
.fn-stage { display: grid; place-items: end center; min-height: 96px; background: var(--panel-2); border-radius: var(--r-md); padding: 6px; }
.fn-stage svg { max-width: 100%; height: auto; image-rendering: pixelated; }
.fn-card figcaption { display: grid; gap: 1px; font-size: var(--fs-sm); }
.fn-card figcaption small { color: var(--text-faint); }
.fn-set { justify-self: start; font-size: var(--fs-xs); font-family: ui-monospace, monospace; padding: 0 6px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--text-dim); }
.fn-units { font-size: var(--fs-xs); color: var(--text-dim); }
.fn-units summary, .fn-sheet summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-dim); }
.fn-frames { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fn-fr { display: grid; justify-items: center; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--panel-2); }
.fn-fr small { font-size: var(--fs-12); color: var(--text-faint); }
.fn-fr svg { max-width: 100%; height: auto; }
.fn-chap { display: inline-flex; gap: 6px; white-space: nowrap; align-items: center; margin: 4px 0 8px; font-size: var(--fs-sm); }
.fn-sets td, .fn-sets th { vertical-align: top; }
.fn-battle { position: relative; margin: 6px 0 16px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.fn-battle canvas { display: block; width: 100%; height: clamp(260px, 38vw, 420px); }
.fn-bcap { position: absolute; left: 8px; top: 8px; padding: 1px 8px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-family: ui-monospace, monospace; background: rgba(0,0,0,.45); color: #f1f5f9; }
/* The Lab's board (T-492). */
.bstats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.bstats span { display: grid; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); font-size: var(--fs-sm); color: var(--text-dim); min-width: 72px; }
.bstats b { font-size: var(--fs-h2); color: var(--text); font-variant-numeric: tabular-nums; }
.bfilter { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; margin: 4px 0 8px; background: var(--panel); }
.bfilter button { font: inherit; font-size: var(--fs-ui); font-weight: 700; border: 0; background: none; color: var(--text-dim); padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer; }
.bfilter button[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); box-shadow: inset 0 0 0 1px var(--pick-bd); }
.bg { margin: 14px 0; }
.bg > summary { cursor: pointer; list-style: revert; }
.bg > summary h2 { display: inline; }
.bg h2 small, .bg h2 + small { color: var(--text-faint); font-size: var(--fs-body); font-weight: 600; }
.bg h3 { margin: 14px 0 6px; font-size: var(--fs-h3); color: var(--text-dim); }
.bcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.bc { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); display: grid; gap: 4px; min-width: 0; }
.bc-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-sm); }
.bc-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.bc-st { padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-dim); }
.bc-st.st-open { border-color: var(--accent); color: var(--accent); } .bc-st.st-built { border-color: var(--green); color: var(--green); }
.bc-st.st-blocked { border-color: var(--red); color: var(--red); } .bc-st.st-parked { color: var(--text-faint); }
.bc-day { color: var(--text-faint); }
.bc-t { margin: 0; font-weight: 700; font-size: var(--fs-body); line-height: 1.35; overflow-wrap: anywhere; }
.bc details { font-size: var(--fs-ui); color: var(--text-dim); }
.bc details summary { cursor: pointer; font-weight: 600; }
.bc details p { margin: 6px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
/* The Lab's docs (T-473): our design notes rendered from design/*.md. */
.md { max-width: 760px; line-height: 1.6; }
.md h2 { margin-top: 1.6em; } .md h3 { margin-top: 1.3em; }
.md code { font-size: 0.92em; padding: 1px 4px; border-radius: var(--r-sm); background: var(--chip-bg, rgba(127,127,127,0.15)); }
.md pre { overflow-x: auto; padding: 10px 12px; border-radius: var(--r-md); background: var(--chip-bg, rgba(127,127,127,0.12)); }
.md pre code { padding: 0; background: none; }
/* How we score (T-841, T-1074W): the flow from the inputs to the Tier letter, in the theme's own colours: gold is the Tier
   letter's alone; Sword and Shield, a side branch in a unit's details, are dashed. */
.score-flow { margin: 12px auto 4px; max-width: 440px; }
.score-flow svg { display: block; width: 100%; height: auto; font-family: inherit; }
.score-flow .sf-box { fill: var(--panel-2); stroke: var(--border); stroke-width: 1.5; }
.score-flow .sf-side { stroke: var(--text-dim); stroke-dasharray: 5 4; fill: none; }
.score-flow .sf-tier { stroke: var(--gold); stroke-width: 2.5; }
:root[data-theme="light"] .score-flow .sf-tier { stroke: #A16207; }
.score-flow .sf-t { fill: var(--text); font-size: var(--fs-lead); font-weight: 700; }
.score-flow .sf-s { fill: var(--text-dim); font-size: var(--fs-ui); }
.score-flow .sf-line { fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.score-flow .sf-head { fill: var(--text-dim); }
.scoring-page p { max-width: 760px; line-height: 1.6; }
.scoring-page h3 { margin: var(--s-5) 0 var(--s-1); font-size: var(--fs-h3); }
/* T-1074W: the five letters as the pages draw them, each with a word, then the provisional coin and the dash. */
.sc-coins { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: var(--s-3) 0 var(--s-2); padding: 0; list-style: none; }
.sc-coins li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--text-2); }
.sc-coins .tier.tg { width: 28px; height: 28px; font-size: var(--fs-body); }
.sc-go { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.sc-go li { margin: 0; }
.sc-go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.md blockquote { margin: 1em 0; padding: 2px 14px; border-left: 3px solid var(--border, var(--tier-d-tile)); color: var(--text-dim, inherit); }
.md .md-table { overflow-x: auto; margin: 1em 0; }
.md table { border-collapse: collapse; font-size: var(--fs-body); }
.md th, .md td { border: 1px solid var(--border, #cbd5e1); padding: 5px 8px; text-align: left; vertical-align: top; }
.md a { overflow-wrap: anywhere; }
/* The Lab's reports (T-472). */
.lab-pre { overflow-x: auto; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.45; background: var(--chip-bg, rgba(127,127,127,0.12)); white-space: pre; }
.lab-table { border-collapse: collapse; font-size: var(--fs-body); }
.lab-table th, .lab-table td { border: 1px solid var(--border, #cbd5e1); padding: 5px 8px; text-align: left; vertical-align: top; }
/* The Lab's motion (T-471): four phone-wide frames side by side, wrapping on narrow screens. */
.lab-motion { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 20px; }
.lab-mo { margin: 0; flex: 0 0 auto; }
.lab-mo figcaption { font-size: var(--fs-ui); font-weight: 700; margin-bottom: 4px; }
.lab-mo iframe { width: 360px; max-width: calc(100vw - 32px); height: 640px; border: 1px solid var(--border, #cbd5e1); border-radius: var(--r-lg); background: var(--panel, #fff); }
.lab-play { font: inherit; font-size: var(--fs-lead); font-weight: 800; padding: 8px 14px; border-radius: var(--r-pill); border: 0; background: var(--accent-fill); color: var(--on-accent); cursor: pointer; }

/* The pixel editor (T-211, /pixel/). */
.px { display: grid; gap: 14px; margin: 8px 0 20px; }
.px-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.px-lab { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); margin-right: 2px; }
.px-pill { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.px-pill[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); }
.px-pill:hover { border-color: var(--accent); }
.px-pill.px-x { color: var(--red); }
.px-main { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .px-main { grid-template-columns: minmax(0, 1fr); } }
.px-board { width: 100%; max-width: 470px; box-sizing: border-box; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); justify-self: start; }
.px-board canvas { display: block; touch-action: none; cursor: crosshair; border-radius: var(--r-sm); outline: none; }
.px-board canvas:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.px-side { display: grid; gap: 12px; min-width: 0; }
.px-inks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.px-ink { font: inherit; font-size: var(--fs-xs); font-weight: 600; display: grid; justify-items: center; gap: 4px; min-height: 56px; padding: 6px 0; border-radius: var(--r-md); border: 2px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; }
.px-ink[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.px-sw { width: 24px; height: 24px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.px-sw.erase { background: repeating-linear-gradient(45deg, var(--panel-2) 0 4px, var(--border) 4px 8px); }
.px-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.px-cols label { display: flex; align-items: center; gap: 8px; min-height: var(--h-lg); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); font-size: var(--fs-ui); color: var(--text-dim); cursor: pointer; }
.px-cols input[type="color"] { width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; }
.px-note { margin: 0; font-size: var(--fs-ui); color: var(--text-dim); }
.px-h { margin: 6px 0 0; font-size: var(--fs-ui); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
.px-squad { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 16px 12px 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); border-bottom: 10px solid var(--panel-2); min-height: 60px; }
.px-man { display: block; transform: translateY(var(--y, 0)); line-height: 0; }
.px-save { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.px-save .btn, .px-use .btn { min-height: var(--h-lg); padding: 0 18px; }
.px-name { display: grid; gap: 4px; font-size: var(--fs-ui); color: var(--text-dim); flex: 1 1 220px; }
.px-name input, .px-io textarea, .px-use select { font: inherit; font-size: var(--fs-body); min-height: var(--h-lg); padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.px-msg { margin: 0; min-height: 1.2em; font-size: var(--fs-ui); font-weight: 600; color: var(--green); }
.px-figs { display: grid; gap: 8px; }
.px-fig, .px-using { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.px-fig.on { border-color: var(--accent); }
.px-fig b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-using span:nth-child(2) { flex: 1; font-size: var(--fs-body); }
.px-fig-p { line-height: 0; flex: none; }
.px-use { display: grid; gap: 8px; }
.px-use select { flex: 1 1 220px; min-width: 0; }
.px-io { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; background: var(--panel); }
.px-io summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.px-io textarea { width: 100%; box-sizing: border-box; margin: 8px 0; font: var(--fs-sm)/1.35 ui-monospace, Menlo, monospace; }

/* Balance updates (T-521): the update's tables keep each before → after on one line, the unit
   pages and /meta/ carry a one-line note of the last change. */
.patch-t th, .patch-t td { vertical-align: top; }
.patch-t td:nth-child(2), .patch-t td:nth-child(3), .patch-t td:nth-child(4) { white-space: nowrap; }
.patch-t td small { font-size: var(--fs-sm); color: var(--dim); white-space: nowrap;}
.patch-t td:nth-child(5) { font-size: var(--fs-ui);}
h2 small { font-size: 0.75em; color: var(--dim); font-weight: 600; }
.patch-line { font-size: var(--fs-body); border-left: 3px solid var(--lead); padding: 6px 10px; margin: 10px 0; background: color-mix(in srgb, var(--lead) 9%, transparent); border-radius: 0 var(--r-md) var(--r-md) 0; }
.patch-hub { max-width: 60ch; }
.patch-tests { padding-left: 18px; }
.patch-tests li { margin: 8px 0; }
.patch-tests .try { margin-right: 6px; }

/* The balance update page's army filter (T-521). */
.patch-fac { display: flex; flex-wrap: wrap; gap: 0; align-items: center; margin: 6px 0 12px; }
.patch-fac select { flex: 0 1 auto; margin: 10px 0 0; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 12px; min-height: var(--h-md); }
.patch-groups h3 { margin: 16px 0 6px; } .patch-groups h3 small { font-size: 0.8em; color: var(--text-dim); font-weight: 600; }
/* T-1352P (the 19 Oct audit: these chips were 44 px and their All a circle, Meta's and Lists' 36 px pills): the shared chip size. */
/* T-1275B (Jordan, 27 Oct, option D): the side filter as underline tabs, a line in each side's colour, thick under the picked one. */
.patch-fac button { flex: 1 1 0; display: inline-flex; align-items: flex-end; justify-content: center; text-align: center; font: inherit; font-size: var(--fs-ui); font-weight: 700; line-height: 1.15; color: var(--text-dim); background: none; border: 0; border-radius: 0; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--side, var(--text-faint)) 75%, transparent); padding: 4px 6px 8px; min-height: var(--h-lg); min-width: 3.25em; cursor: pointer; }
.patch-fac button:hover { color: var(--text); }
.patch-fac button[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -5px 0 var(--side, var(--text)); }
/* The public tier pages (T-697): /tiers/ and /tiers/<army>/, drawn by tiers.js. Chart series validated for both surfaces
   (blue maths, orange meta); the tier ramp is style.css's tokens, as .tier's (T-828). */
.tl, .tl-tip { --s1: #3987e5; --s2: #d95926; --s1-ink: #7fb2f0; --s2-ink: #f29d6e; --s3: #199e70; --s4: #c98500; --bonus: #64748b; --band: rgba(148, 163, 184, 0.22); }
:root[data-theme="light"] .tl, :root[data-theme="light"] .tl-tip { --s1: #2a78d6; --s2: #eb6834; --s1-ink: #1d5fb3; --s2-ink: #b8461b; --s3: #1baf7a; --s4: #eda100; --bonus: #94a3b8; --band: rgba(100, 116, 139, 0.18); }
.tl { min-width: 0; }
.tl p { max-width: 820px; }
.tl h3 { font-size: 14.5px; font-weight: 800; margin: 18px 0 6px; }
.tl h4 { font-size: 13.5px; font-weight: 800; margin: 14px 0 6px; }
.tl-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.tl-gap { margin-top: 12px; }
.tl-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tl-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--text-2); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.tl-pill.warn { border-color: color-mix(in srgb, var(--amber) 60%, var(--border)); }
.tl-pill.warn::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--amber); color: #111; font-size: var(--fs-12); font-weight: 900; }
.tl-beside { border-left: 3px solid var(--lead); padding: 2px 10px; }
.tl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px; }
@media (max-width: 760px) { .tl-two { grid-template-columns: 1fr; } }
.tl-two h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-16); }
.tl-two p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); }
.tl-two p.k { font-size: var(--fs-12); color: var(--text-dim); margin: 0; }
.tl-views { font-size: 13.5px; color: var(--text-2); border-left: 3px solid var(--att); padding: 4px 10px; margin: 10px 0 0; }
.tl-seg { margin: 0; }
.tl-seg button { white-space: nowrap; }
.tl-boardbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; }
.tl-search { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 0 12px; height: 40px; color: var(--text-faint); }
.tl-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-14); outline: none; height: 100%; }
.tl-search small { color: var(--text-faint); white-space: nowrap; }
.tl-board { display: grid; gap: 6px; }
/* The calmer board (T-829, Jordan 8 Oct): a solid die (a coin in the Meta view) in the tier colour with a dark letter (T-983), the count
   under it, a 4px edge in the same colour; on phones the head is a short bar above the chips. */
.tl-row { --tc: var(--tier-d-tile); --te: var(--tier-d-tile); --tk: #111827; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--tc); border-radius: 12px; padding: 10px 10px 10px 8px; }
.tl-row.t-s { --tc: var(--tier-s-tile); --te: var(--tier-s-tile); } .tl-row.t-a { --tc: var(--tier-a-tile); --te: var(--tier-a-tile); } .tl-row.t-b { --tc: var(--tier-b-tile); --te: var(--tier-b-tile); } .tl-row.t-c { --tc: var(--tier-c-tile); --te: var(--tier-c-tile); }
.tl-lab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; min-width: 0; }
.tl-lab small { font-size: var(--fs-12); font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.tl .tl-lab svg.tl-mk .bg { fill: var(--tc); stroke: var(--te); }
.tl .tl-lab svg.tl-mk .pip { fill: var(--tk); opacity: 0.8; }
.tl .tl-lab svg.tl-mk text { fill: var(--tk); } /* the row head's dark letter on its solid tile (T-1029S) */
@media (max-width: 560px) {
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .tl-lab { flex-direction: row; gap: 10px; padding-top: 0; }
  .tl-lab svg.tl-mk { width: 32px !important; height: 32px !important; }
}
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-width: 0; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 6px 4px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: 600 13px/1.3 inherit; cursor: pointer; text-align: left; }
.tl-chip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-chip .mv { font-size: var(--fs-12); font-weight: 800; color: var(--text-faint); width: 10px; text-align: center; }
.tl-chip[aria-current="true"] { border-color: var(--att); box-shadow: 0 0 0 2px color-mix(in srgb, var(--att) 35%, transparent); }
.tl-chip.dim { opacity: 0.28; }
.tl-chip.hit { border-color: var(--text-2); }
.tl-chip:focus-visible { outline: 2px solid var(--att); outline-offset: 2px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-12); color: var(--text-dim); margin: 6px 0 0; }
.tl-more { margin-top: 10px; }
.tl-more > summary { cursor: pointer; font-weight: 700; color: var(--text-2); padding: 6px 0; }
.tl-rt { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-rt th, .tl-rt td { padding: 6px 8px; border-top: 1px solid var(--border); text-align: left; white-space: nowrap; }
.tl-rt thead th { border-top: none; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); }
.tl-rt .n { color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; }
.tl-rt td.u { white-space: normal; font-weight: 700; width: 100%; }
@media (max-width: 560px) { .tl-rt .wide { display: none; } .tl-rt th, .tl-rt td { padding: 6px 5px; } }
.tl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .tl-grid2 { grid-template-columns: 1fr; } }
.tl-chart { min-width: 0; }
.tl-chart > h3 { margin: 0 0 2px; }
.tl-chart > h4 { margin: 0 0 6px; }
.tl-chart .sub { font-size: 12.5px; color: var(--text-dim); margin: 0 0 8px; }
.tl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-chart svg text { fill: var(--text-dim); font-size: var(--fs-12); font-family: inherit; }
.tl-chart svg text.ink { fill: var(--text); font-weight: 700; }
.tl-chart svg text.strong { fill: var(--text); font-weight: 800; }
.tl-chart svg text.halo { font-size: var(--fs-12); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.tl-chart svg a text { fill: var(--att); }
.tl-chart svg .grid { stroke: var(--border); stroke-width: 1; }
.tl-chart svg .axis { stroke: var(--text-faint); stroke-width: 1; }
.tl-chart svg .hit { fill: transparent; }
.tl-chart svg circle.hit[data-u] { cursor: pointer; }
.tl-chart svg .hl { fill: color-mix(in srgb, var(--att) 10%, transparent); }
.tl-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-12); color: var(--text-dim); margin: 0 0 8px; }
.tl-key i, .tl-agree i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tl-key i.dot, .tl-agree i.dot { border-radius: 50%; }
.tl-key i.ring { border: 2px solid var(--text); background: none; border-radius: 50%; }
.tl-key i.band { background: var(--band); border-radius: 2px; width: 18px; }
.tl-key i.hatch, .tl-lines .sw.hatch { background: repeating-linear-gradient(135deg, var(--bonus) 0 2px, transparent 2px 5px); border: 1px solid var(--bonus); }
.tl-tip { position: fixed; z-index: 50; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 8px 22px var(--shadow); font-size: 12.5px; color: var(--text); line-height: 1.4; }
.tl-tip b { font-weight: 800; }
.tl-tip small { display: block; color: var(--text-dim); font-size: var(--fs-12); }
.tl-xt { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 3px; font-size: var(--fs-12); }
.tl-xt .h { color: var(--text-dim); font-weight: 700; display: grid; place-items: center; text-align: center; }
.tl-xt .h.rh { padding-right: 4px; white-space: nowrap; }
.tl-xt .c { display: grid; place-items: center; border-radius: 6px; min-height: 34px; font-weight: 800; font-size: 13px; }
.tl-xt .c.diag { outline: 2px solid var(--text-faint); outline-offset: -2px; }
.tl-story { display: grid; gap: 12px; }
.tl-st-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; }
@media (max-width: 560px) { .tl-st-head { grid-template-columns: 1fr; } }
.tl-st-head h3 { font-size: 21px; margin: 0; line-height: 1.25; }
.tl-st-head .meta { color: var(--text-dim); font-size: 13px; }
.tl-st-letters { display: flex; gap: 14px; }
.tl-st-l { display: grid; justify-items: center; gap: 2px; font-size: var(--fs-12); color: var(--text-dim); text-align: center; }
.tl-st-l b { font-size: var(--fs-12); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tl-tag { display: inline-block; font-size: var(--fs-12); font-weight: 700; border: 1px solid var(--border); background: var(--panel-2); border-radius: 999px; padding: 2px 10px; }
a.tl-tag { color: var(--att); text-decoration: none; padding: 5px 12px; margin: 2px 6px 2px 0; }
.tl-go { margin: 0; }
.tl-kit { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tl-kit span { display: inline-block; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); font-size: var(--fs-12); }
.tl-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 13px; margin: 0; }
.tl-kv dt { color: var(--text-dim); }
.tl-kv dd { margin: 0; min-width: 0; }
.tl-stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--panel-2); }
.tl-stack.tall { height: 26px; }
.tl-stack i { display: block; height: 100%; min-width: 0; }
.tl-stack i.bonus { background: repeating-linear-gradient(135deg, var(--bonus) 0 2px, transparent 2px 5px); }
.tl-lines { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; margin-top: 8px; align-items: center; }
.tl-lines .sw { width: 10px; height: 10px; border-radius: 3px; }
.tl-lines .num { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }
.tl-lines .what { color: var(--text-dim); font-size: var(--fs-12); }
.tl-meter { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 46px; gap: 6px 10px; align-items: center; font-size: 13px; }
.tl-meter .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meter .bar { position: relative; height: 12px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); }
.tl-meter .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--s1); }
.tl-meter .bar .tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.tl-meter .num { font-variant-numeric: tabular-nums; text-align: right; }
.tl-dh { margin: 8px 0 0; }
.tl-drivers { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: 13px; }
.tl-drivers li::before { content: attr(data-d); display: inline-block; width: 18px; font-weight: 900; color: var(--text-dim); }
.tl-tried { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 13px; max-width: 820px; }
.tl-tried b { color: var(--text); }
.tl-tried .ok, .tl-tried .no { display: inline-block; font-size: var(--fs-12); font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; border-radius: 99px; padding: 1px 7px; margin-right: 6px; border: 1px solid var(--border); }
.tl-tried .ok { color: var(--text); border-color: var(--text-2); }
.tl-tried .no { color: var(--text-dim); }
.tl-honest { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tl-honest h3 { margin: 0 0 4px; font-size: var(--fs-14); }
.tl-honest p { margin: 0; font-size: 13px; color: var(--text-2); }
.tl-credit { margin-top: 18px; }
.tl-armies { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tl-army h3 { margin: 0 0 2px; font-size: 15px; }
.tl-army h3 a { text-decoration: none; }
.tl-army p { margin: 2px 0; font-size: 12.5px; }
.tl-army .meta { color: var(--text-dim); }
.tl-agree { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-2); }
.tl-top { color: var(--text-2); }
.tl-army h3 .tl-pill { font-size: var(--fs-12); padding: 1px 7px; vertical-align: 2px; margin-left: 4px; }
.tl-less { border-left: 3px solid var(--amber); margin: 10px 0; }
.tl-less p { margin: 0 0 6px; font-size: 13.5px; color: var(--text-2); }
.tl-less p:last-child { margin-bottom: 0; }
.tl-less b { color: var(--text); }
.tl-lessline { border-left: 3px solid var(--amber); padding: 2px 8px; margin: 8px 0 0; }
.tl-thinline { border-left: 3px solid var(--border); padding: 2px 8px; margin: 8px 0 0; }
/* The Meta letter's list share (T-806): a unit in no tournament list yet (dashed in the Meta view, a tag in its story). */
.tl-chip.nol { border-style: dashed; border-color: var(--text-faint); }
.tl-tag.nol { border-style: dashed; color: var(--text-dim); }
.tl-rt td.nol { color: var(--text-faint); }
.tl-share { margin: 6px 0 8px; font-size: 13.5px; color: var(--text-2); border-left: 3px solid var(--s2); padding: 2px 8px; }
.tl-share b { color: var(--text); }
.tl-share.nol { border-left-style: dashed; }
/* The two letters by shape (T-811): Maths on a two-pip die, Meta on a round coin (tiers.js mark()); chart markers a square and a circle. */
.tl svg.tl-mk, .tl svg.tl-km { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
/* T-828 (Jordan, 8 Oct): each die and coin wears its own letter's tier colour (tiers.js mark() adds l-s to l-d); a bare
   mark (a legend's or a heading's sample of die = Maths, coin = Meta) and a missing letter stay neutral. */
.tl-mk { --mk: var(--text-dim); --mk-ink: var(--text); }
.tl-mk.l-s { --mk: var(--tier-s); --mk-edge: var(--tier-s-edge); --mk-ink: var(--tier-s-ink); } .tl-mk.l-a { --mk: var(--tier-a); --mk-edge: var(--tier-a-edge); --mk-ink: var(--tier-a-ink); } .tl-mk.l-b { --mk: var(--tier-b); --mk-edge: var(--tier-b-edge); --mk-ink: var(--tier-b-ink); }
.tl-mk.l-c { --mk: var(--tier-c); --mk-edge: var(--tier-c-edge); --mk-ink: var(--tier-c-ink); } .tl-mk.l-d { --mk: var(--tier-d); --mk-edge: var(--tier-d-edge); --mk-ink: var(--tier-d-ink); }
.tl-mk.nt { --mk: var(--text-dim); --mk-ink: var(--text); }
/* T-1029S: a lettered mark is a tint inside its colour's edge with the letter in its ink, as every coin (T-983's filled tiles went). */
/* T-829: a small mark that agrees with its row (or, on the Meta page, with the Maths letter) is plain grey; colour is kept for a disagreement. */
.tl svg.tl-mk.same .bg { fill: none; stroke: var(--border); }
.tl svg.tl-mk.same .pip { fill: var(--text-faint); }
.tl svg.tl-mk.same text { fill: var(--text-dim); }
.tl svg.tl-mk .bg { fill: color-mix(in srgb, var(--mk) 16%, var(--panel)); stroke: var(--mk); }
.tl svg.tl-mk .pip { fill: var(--mk); }
.tl svg.tl-mk text { fill: var(--mk-ink); font-weight: 900; font-family: inherit; }
.tl-key svg.tl-km, .tl-agree svg.tl-km { margin-right: 5px; vertical-align: -1px; }
.tl-key svg.tl-mk, .tl-lk svg.tl-mk { margin-right: 5px; vertical-align: -4px; }
.tl-seg button svg.tl-mk { margin-right: 6px; vertical-align: -3px; }
.tl-keyb { margin: 8px 0 0; }
.tl-rt td.l { padding-top: 3px; padding-bottom: 3px; line-height: 0; }
/* The Meta page (T-815, Jordan 7 Oct; the T-813 mockup): /meta/, drawn by metahub.js. Opened from the app (?app=1,
   html.in-app) it wears the app's tab bar (style.css .topbar) in place of the pages' header. One bar colour for the
   shares (each army's pixel glyph is its identity), green up, red down. */
.app-head { display: none; }
html.in-app .app-head { display: block; }
html.in-app main > .crumbs { display: none; }
/* T-867: in the app the pages keep their 🔍 and ⋯ (the logo and text links are the tab bar's job). */
html.in-app body { position: relative; }
html.in-app .site-head { display: flex; position: absolute; right: 14px; z-index: 5; padding: 0; margin: 17px 0 0; border: 0; }
/* T-1031W (Jordan, 11 Oct: the 🔍 and ⋯ sat over the sub-nav's last tab): on a phone they live in the app bar's empty right end,
   fixed there as the bar is sticky, so nothing under the bar can be covered by them. */
@media (max-width: 760px) { html.in-app .site-head { position: fixed; top: calc(env(safe-area-inset-top, 0px) + (var(--top-h) - var(--h-md)) / 2); right: max(var(--gutter), env(safe-area-inset-right, 0px)); margin: 0; z-index: 21; } }
/* T-1075W: wider, they sat on the Meta row, which is gone; now they live in the app bar's right end there too, at the page
   column's edge, and the bar's tabs stop short of them, so no page's first line runs under them. */
@media (min-width: 761px) {
  html.in-app .site-head { position: fixed; top: calc(env(safe-area-inset-top, 0px) + (var(--top-h) - var(--h-md)) / 2); right: max(var(--gutter), calc((100% - var(--page-w)) / 2)); margin: 0; z-index: 21; }
  html.in-app .app-head .tabs { margin-right: calc(2 * var(--h-md) + 28px); }
}
html.in-app .site-head .brand, html.in-app .site-head .ph-nav { display: none; }
.app-head .tab-i .glyph { width: 14px; height: 14px; }
@media (max-width: 760px) { html.in-app body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
/* T-1562P (Jordan, 1 Nov, from the mockup): /meta/ as cards; the solid pink bands went in T-1585P, a pink gradient heading in T-1586P. */
.mh { --up: var(--green); --down: var(--red); min-width: 0; max-width: 1120px; }
.mh-top { margin: 10px 0 12px; }
.mh-h1 { font-size: clamp(calc(var(--fs-num) + 2px), 4.4vw, calc(var(--fs-h1) + 4px)); font-weight: 800; line-height: 1.08; margin: 0; }
.mh-scope { margin: 2px 0 0; color: var(--text-dim); font-size: var(--fs-14); }
.mh-cols, .mh-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: start; }
@media (min-width: 900px) { .mh-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px 28px; } }
/* T-1587P (Jordan, 3 Nov: "make the pink style more like the yellow and green style here"): each card as the update and Spotlight
   buttons are, a bright pink outline, a soft tint of it inside, the heading in their tracked capitals in a light pink. */
.mh { --pk: #EC4899; --pk-ink: #F9A8D4; }
:root[data-theme="light"] .mh { --pk: #DB2777; --pk-ink: #BE185D; }
/* T-1588P (Jordan, 3 Nov: "Keep your army the way you just changed it and revert the army tiers to the most recent iteration before
   this"): the other cards as T-1586P had them, a dark card with a thin edge, the brand's red to magenta down its left side and the
   heading in a light rose to orchid (deeper in the light theme); only Your army keeps the outline, tint and capitals. */
.mh-blk { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.mh-blk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--att); }   /* T-1618P (Jordan, 4 Nov): the neutral blue, not pink */
.mh-blk .mh-in { padding-left: 18px; }
.mh h2 { margin: 0; padding: 12px 14px 2px 18px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; width: fit-content; background: linear-gradient(90deg, #FDA4AF, #F0ABFC); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .mh h2 { background-image: linear-gradient(90deg, #BE123C, #A21CAF); }
/* T-1618P (Jordan, 4 Nov: "a pink square box like the effects box except magenta for the headings"): each card's heading in a magenta
   square box, the calculator's Effects button's shape: the face's capitals, white on a faint magenta tint. */
.mh .mh-blk h2 { margin: 12px 14px 4px 18px; padding: 5px 12px; border: 1.5px solid var(--att); border-radius: 3px; background: color-mix(in srgb, var(--att) 22%, var(--panel)) !important; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); font-family: var(--font-head); font-size: var(--fs-16); letter-spacing: var(--track); text-transform: uppercase; line-height: 1.2; }
:root[data-theme="light"] .mh .mh-blk h2 { background-image: none; background: color-mix(in srgb, var(--att) 12%, var(--panel)) !important; color: var(--att); }   /* T-1619P (Jordan, 4 Nov): the heading box in the edge's blue */

.mh-in { padding: 10px 14px 12px; }
.mh-sub { margin: 0 0 8px; font-size: var(--fs-14); color: var(--text-dim); max-width: 62ch; }
.mh-all { display: inline-block; margin-top: 8px; font-weight: 700; font-size: var(--fs-14); }
/* The update and the Spotlight: a bright outline, a soft tint of it inside. */
/* T-1668P: the update and the Spotlight, two lines of one box */
.mh-news { display: grid; padding: 2px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
main a.mh-nw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
main a.mh-nw + a.mh-nw { border-top: 1px solid var(--border); }
main a.mh-nw:hover .mh-nwt { text-decoration: underline; }
main a.mh-nw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mh-nw.codex { --nw-ink: var(--tier-a-ink); }
.mh-nw.spot { --nw-ink: var(--lead); }
:root[data-theme="light"] .mh-nw.spot { --nw-ink: #8a6a00; }
.mh-nwt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-14); }
.mh-nw small { margin-right: 6px; font-family: var(--font-head); font-size: var(--fs-12); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--nw-ink); }
.mh-nwgo { font-size: var(--fs-20); color: var(--text-dim); }
.mh-ul .tier { min-width: 20px; margin-right: 6px; padding: 0 3px; border-width: 1.5px; font-size: var(--fs-12); }
/* The army letters: a row tinted in its letter's colour, the armies as plain names. T-1247B (Jordan, 20 Oct): a letter with too few
   games to call looks like the rest; one line of text under the board says so. */
.mh-tiers { display: grid; gap: 6px; }
.mh-tr { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--tc) 13%, transparent); }
.mh-tr.t-s { --tc: var(--tier-s-edge); } .mh-tr.t-a { --tc: var(--tier-a-edge); } .mh-tr.t-b { --tc: var(--tier-b-edge); } .mh-tr.t-c { --tc: var(--tier-c-edge); } .mh-tr.t-d { --tc: var(--tier-d-edge); }
.mh-tl { display: grid; justify-items: center; }
.mh-tl .tier { font-size: var(--fs-h3); min-width: 34px; padding: 4px 6px; }
/* T-1648P (Jordan, 4 Nov: "B is the best"; "2 is good"): Army tiers as a table, the letters down and the four sides across, each army's name in
   its side's column, a hairline between names stacked in a cell; colour on the sides' heads only. */
/* T-1668P: Army tiers, a row per letter with its armies along it */
.mh-tt { display: grid; }
.mh-ttr { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 2px; border-top: 1px solid var(--border); }
.mh-ttl { display: grid; justify-items: center; }
.mh-ttl .tier { min-width: 30px; padding: 3px 4px; font-size: var(--fs-16); }
.mh-ttn { padding-top: 3px; font-size: var(--fs-14); line-height: 1.55; }
.mh-tw { white-space: nowrap; }   /* a name and the dot after it never part */
main a.mh-tn { color: var(--text); text-decoration: none; }
main a.mh-tn:hover { text-decoration: underline; }
.mh-tsep { color: var(--text-faint); }
.mh .side-key { margin: 8px 0 0; }
.mh-tsrc { margin: 6px 0 0; font-size: var(--fs-12); color: var(--text-dim); }
/* Most taken */
.mh-seg { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.mh-seg[hidden] { display: none; }
.mh-seg button { font: inherit; font-size: var(--fs-14); font-weight: 700; padding: 8px 0; background: none; border: 0; color: var(--text-dim); cursor: pointer; }
.mh-seg button[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--att); }
.mh-seg button:hover { color: var(--text); }
.mh-ph { margin: 14px 0 2px; font-size: var(--fs-14); font-weight: 800; }
.mh-on .mh-ph { display: none; }
.mh-rows { display: grid; }
.mh-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(44px, 16%, 72px) 32px 80px; gap: 8px; align-items: center; width: 100%; min-height: 40px; padding: 3px 0; background: none; border: 0; color: var(--text); font: inherit; font-size: var(--fs-14); text-align: left; }
.mh-row[hidden] { display: none; }
@media (min-width: 900px) { .mh-row { grid-template-columns: minmax(0, 1fr) 200px 36px 84px; } }
button.mh-row { cursor: pointer; }
button.mh-row:hover, button.mh-row[aria-expanded="true"], .mh-row.mh-hl { background: var(--soft); }
button.mh-row .mh-nm::after { content: " ▸"; color: var(--text-faint); font-size: var(--fs-12); }
button.mh-row[aria-expanded="true"] .mh-nm::after { content: " ▾"; }
.mh-nm { min-width: 0; font-weight: 600; line-height: 1.2; }
.mh-nm a { color: var(--text); text-decoration: none; } .mh-nm a:hover { text-decoration: underline; }
.mh-nm small { display: block; font-weight: 400; font-size: var(--fs-12); color: var(--text-dim); }
.mh-nm small a { color: var(--text-dim); }
.mh-track { display: block; height: 8px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.mh-track i { display: block; height: 100%; background: var(--c1); }
.mh-n { text-align: right; font-family: var(--font-head); font-size: var(--fs-16); font-weight: 800; font-variant-numeric: tabular-nums; }
.mh-chg { font-size: var(--fs-12); line-height: 1.25; color: var(--text-dim); }
.mh-fold { display: grid; gap: 6px; margin: 2px 0 8px; font-size: var(--fs-14); color: var(--text-2); }
.mh-fold[hidden] { display: none; }
svg.mh-sp { display: block; overflow: visible; width: 220px; max-width: 100%; height: 46px; }
.mh-sp .band { fill: color-mix(in srgb, var(--text-dim) 13%, transparent); }
.mh-sp .ln { fill: none; stroke: var(--c2); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mh-sp .dot { fill: var(--panel); stroke: var(--c2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mh-sp .base { stroke: var(--border); vector-effect: non-scaling-stroke; }
.mh-sp text { fill: var(--text-dim); font-size: var(--fs-12); font-family: inherit; }
.mh-lk { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; }
.mh-more { margin: 4px 0 0; padding: 8px 0; background: none; border: 0; font: inherit; font-size: var(--fs-14); font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mh-credit { margin: 8px 0 0; font-size: var(--fs-12); color: var(--text-dim); }
.mh-credit a { color: var(--text-dim); }
/* Lists and videos: a line of rows */
.mh-nl { list-style: none; margin: 0; padding: 0; }
.mh-nl li + li, .mh-kv + .mh-kv { border-top: 1px solid var(--border); }
main a.mh-ln { display: block; padding: 9px 0; color: var(--text); text-decoration: none; }
main a.mh-ln:hover b { text-decoration: underline; }
.mh-lt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mh-lt b { font-weight: 700; line-height: 1.3; }
.mh-lt small { font-size: var(--fs-12); color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mh-ls { display: block; font-size: var(--fs-14); line-height: 1.35; color: var(--text-dim); }
.mh-kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: var(--fs-14); }
.mh-kv > span { flex: none; color: var(--text-dim); }
.mh-kv b { font-weight: 700; text-align: right; }
.mh-kv small { display: block; font-weight: 400; font-size: var(--fs-12); color: var(--text-dim); }
/* Questions */
.mh-qs details { border-top: 1px solid var(--border); padding: 9px 0; }
.mh-qs details:first-child { border-top: 0; }
.mh-qs summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; font-weight: 700; cursor: pointer; font-size: var(--fs-body); min-height: 24px; }
.mh-qs p { margin: 6px 0 0; font-size: var(--fs-body); color: var(--text-2); max-width: 760px; }
/* T-1071W: method in one line, a link and a drawer. Each page keeps one sentence of method and a "How we score ›" link; the
   longer text waits in a closed drawer after the main content (still in the page): the /tiers/ hub's letters (.tl-drawer),
   /about/scoring/'s versions (.sc-ver). */
.mh-qs summary::-webkit-details-marker { display: none; }
.mh-how, .tl-how { font-weight: 700; white-space: nowrap; }
.tl-drawer, .sc-ver { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tl-drawer > summary, .sc-ver > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 800; font-size: var(--fs-lead); }
.tl-drawer > summary::-webkit-details-marker, .sc-ver > summary::-webkit-details-marker { display: none; }
.mh-qs summary::after, .tl-drawer > summary::after, .sc-ver > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border: solid var(--text-dim); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.mh-qs details[open] > summary::after, .tl-drawer[open] > summary::after, .sc-ver[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.tl-drawer > summary:focus-visible, .sc-ver > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm, 4px); }
.tl-drawer[open], .sc-ver[open] { padding-bottom: 14px; }
.tl-drawer { margin: 28px 0 14px; }
.tl-drawer > summary { font-size: var(--fs-body); }
.sc-ver { margin: 24px 0 0; }
.sc-ver > summary { font-size: var(--fs-body); }
.sc-more + .sc-ver { margin-top: 0; border-top: 0; } /* T-1074W: The full method, then Data versions, one stack */
.tl-asof { margin: 2px 0 14px; }
.tl-one { margin: 6px 0 4px; }
/* T-850: an army's tier list leads; the Maths & Meta view is one clear link under its lede, and that view says its points are older. */
.tl-flink { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 14px; padding: 0; border-left: 0; }
.tl-flink .tl-view { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 700; font-size: var(--fs-14); text-decoration: none; }
.tl-flink .tl-view:hover, .tl-flink .tl-view:focus-visible { border-color: var(--att); }
.tl-flink span { font-size: 13px; color: var(--text-dim); max-width: 560px; }
.tl-scope { border-left: 3px solid var(--amber); padding: 4px 10px; margin: 6px 0 12px; }
/* T-852: the balance update's finder at the top: a unit search, the groups and one army (kept in the address as ?army=),
   and a line that answers, "<unit> (<army>): no change in this update" for a unit it didn't touch. */
.patch-find { margin: 14px 0 6px; padding: 12px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); }
.pf-q { display: flex; align-items: center; gap: 8px; min-height: var(--h-lg); padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); }
.pf-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pf-q input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-lead); outline: none; }
.patch-find .patch-fac { margin: 10px 0 0; }
.patch-find .patch-fac select { min-height: var(--h-lg); }
.patch-find .patch-fac { align-items: center; }
.pf-out { margin: 10px 0 0; font-size: var(--fs-body); color: var(--text-2); }
.pf-out a { font-weight: 700; }
/* T-851: nothing on the Meta side scrolls sideways on a phone; tables drop secondary columns instead (the balance update's
   "what changed", which moves under the unit's name; the best-by-job army column, which is under each name already). */
.patch-t .pt-what { display: none; }
@media (max-width: 560px) {
  .patch-t .c-what { display: none; }
  .patch-t th .pt-what { display: block; white-space: normal; color: var(--text-dim); margin-top: 2px; }
  .patch-t td small { white-space: normal; }
  .best-table .c-army { display: none; }
}
/* T-853: "Units in <army>" beside army and unit pages: a sticky side list on a wide screen (pagesearch.js opens it), a button
   and a bottom sheet on a phone (a tap on the shade or ✕ closes it). Rows: tier letter, name, points; the page's unit marked. */
.upk-list { position: relative; }
.upk > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-lg); padding: 0 16px; margin: 0 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 700; font-size: var(--fs-body); cursor: pointer; }
.upk > summary::-webkit-details-marker { display: none; }
.upk > summary:hover, .upk > summary:focus-visible { border-color: var(--accent); outline: none; }
.upk > summary small { color: var(--text-faint); font-weight: 600; }
.upk-ic .glyph { width: 16px; height: 16px; display: block; }
.upk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 6px; }
.upk-head b { font-size: var(--fs-lead); }
.upk-x { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-lead); cursor: pointer; }
.upk-note { color: var(--text-dim); font-size: var(--fs-ui); }
.upk-list h3 { margin: 12px 0 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
.upk-list h3 small { color: var(--text-faint); font-weight: 600; }
.upk-list ul { list-style: none; margin: 0; padding: 0; }
.upk-list li a { display: flex; align-items: center; gap: 8px; min-height: var(--h-lg); padding: 0 8px; border-radius: var(--r-md); color: var(--text); text-decoration: none; font-size: var(--fs-body); }
.upk-list li a:hover { background: var(--panel-2); }
.upk-list li a[aria-current="page"] { background: var(--panel-2); font-weight: 800; box-shadow: inset 3px 0 0 var(--accent); }
.upk-list .tier { flex: none; min-width: 22px; font-size: var(--fs-12); }
.upk-n { flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.25; padding: 3px 0; }   /* T-990: wraps rather than cut */
.upk-w { flex: none; font-style: normal; font-size: var(--fs-micro); color: var(--green); }
.upk-key { font-size: var(--fs-sm); margin: 0 0 4px; }
.upk-list li small { flex: none; color: var(--text-faint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 1179.98px) {
  .upk[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 23, .55); cursor: default; }
  .upk[open] .upk-list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px var(--shadow); }
  .upk[open] .upk-head { position: sticky; top: -10px; margin: -10px -14px 0; padding: 10px 14px 6px; background: var(--panel); z-index: 1; }
  html.upk-sheet { overflow: hidden; }
}
@media (min-width: 1180px) {
  /* T-932: the side list sits inside the page's width (T-867 had it go wide past the header). */
  .upk-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .upk { position: sticky; top: 12px; }
  .upk > summary { display: none; }
  .upk-list { max-height: calc(100vh - 24px); overflow-y: auto; padding: 0 6px 12px 0; scrollbar-width: thin; }
  .upk-x { display: none; }
  .upk-head { position: sticky; top: 0; z-index: 1; background: var(--bg); }
  .upk-head b { font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: var(--track); color: var(--text-dim); }
  .upk-list li a { min-height: var(--h-sm); font-size: var(--fs-ui); }
  .upk-main { min-width: 0; }
}
.patch-find .patch-fac select { width: auto; max-width: 100%; }
@media (min-width: 760px) {
  .patch-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .patch-find .pf-q { flex: 1 1 260px; }
  .patch-find .patch-fac { flex: 1 1 460px; margin: 0; }
  .patch-find .pf-out { flex-basis: 100%; margin: 0; }
}

/* T-871: an army's units as numbers (.num-table, sortable through tablesort.js) and the role chips over it. Wide: every target's
   damage, durability and lists; under 700 px the targets fold into Best; under 560 px the lists go and the points join the name. */
.rolef { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rolef button { font: inherit; font-size: var(--fs-ui); font-weight: 600; min-height: var(--h-md); padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; }
.rolef button small { color: var(--text-faint); font-weight: 400; margin-left: 2px; }
.rolef button[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); }
.rolef button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .rolef { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rolef button { min-height: var(--h-lg); flex: none; } }
.num-table thead th small { display: block; font-size: var(--fs-micro); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-faint); }
.num-table thead th .sort-btn { display: inline-block; }
.num-table td.tgt, .num-table td.c-dur, .num-table td.c-best, .num-table td.c-lists { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-ui); }
.num-table th.c-dur, .num-table th.c-best, .num-table th.c-lists { text-align: right; }
.num-table td.tgt.is-best { font-weight: 800; color: var(--text); }
.num-table td.tgt { color: var(--text-dim); }
.num-table td.c-dur { font-weight: 700; }
.num-table td.c-lists small { color: var(--text-faint); font-size: var(--fs-xs); }
.num-table td.c-best small { display: block; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 400; }
.u-tag .tier { font-size: var(--fs-12); min-width: 20px; padding: 0 3px; border-width: 1.5px; border-radius: 5px; }
/* T-831: the Tier coin (build_pages.js unitTag), small beside the numbers, in its tier colour (T-828); "–" (not enough
   play) is a dashed empty coin. T-962: the sword (damage) and shield (durability) beside it in place of the Maths die, a
   stroke icon and a letter in the letter's tier colour; "—" dashed (a support character's sword, a missing number). The
   unit header labels Tier and sizes them up a little; a support character adds a small "support" tag. */
.u-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; }
.tier.tg, .u-tag .tier.tg { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: var(--r-sm); border-width: 1.5px; font-size: var(--fs-12); line-height: 1; }
.tier.tg.t-none { --tc: var(--text-faint); --te: var(--text-faint); --ti: var(--text-dim); background: none; border-style: dashed; }
/* T-960: a provisional Tier (the model's likely range is wide): the unit header adds the word after the coin. T-1247B
   (Jordan, 20 Oct: "I don't like it"): its dashed edge went; the coin looks like the rest, its title gives the range. */
.u-tag .tg-pw { font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
.u-tag .tier.tb { display: inline-flex; align-items: center; justify-content: center; gap: 1px; box-sizing: border-box; height: 20px; min-width: 0; padding: 0 4px 0 3px; border-radius: 6px; border-width: 1.2px; font-size: var(--fs-12); line-height: 1; }
.u-tag .tb .tb-i { width: 11px; height: 11px; flex: none; }
.u-tag .tier.tb.t-none { --tc: var(--text-faint); --te: var(--text-faint); --ti: var(--text-dim); background: none; border-style: dashed; font-weight: 600; }
.u-tag .tb-sup { font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 7px; }
.u-tag.full { gap: 5px; }
.u-tag.full .tg-lab { font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.u-tag.full .tier.tg { width: 26px; height: 26px; font-size: 13px; border-width: 2px; }
.u-tag.full .tier.tb { height: 24px; padding: 0 6px 0 5px; gap: 2px; font-size: 12.5px; border-width: 1.5px; }
.u-tag.full .tb .tb-i { width: 13px; height: 13px; }
/* T-1013L: the sword and shield letters are buttons (tap for the breakdown, docs/tiptap.js); they look as they did. */
.u-tag button.tier.tb { margin: 0; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.u-tag button.tier.tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.u-tag button.tier.tb[aria-expanded="true"] { outline: 2px solid var(--text); outline-offset: 1px; }
.tb-pop { position: absolute; z-index: 30; width: max-content; max-width: min(280px, calc(100vw - 16px)); box-sizing: border-box; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--text); color: var(--bg); font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; text-align: left; box-shadow: 0 6px 18px var(--shadow); }
.tb-pop strong { display: block; font-weight: 700; }
.tb-pop span { display: block; }
.tb-pop::before { content: ""; position: absolute; left: var(--ax, 50%); bottom: 100%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--text); }
.tb-pop.up::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--text); }
/* On a phone the army table stacks the three in its narrow first column, so the names and numbers keep their width. */
@media (max-width: 560px) {
  .num-table td.c-tag .u-tag { flex-direction: column; gap: 2px; }
  .num-table td.c-tag .tier.tb { height: 16px; padding: 0 3px 0 2px; font-size: var(--fs-12); border-width: 1px; border-radius: 4px; }
  .num-table td.c-tag .tb .tb-i { width: 9px; height: 9px; }
}
/* T-832: Sources, closed at the foot of army and unit pages. */
.u-src { margin: 20px 0 8px; border-top: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-dim); }
.u-src > summary { cursor: pointer; font-weight: 600; color: var(--text-2); min-height: var(--h-lg); display: flex; align-items: center; }
.u-src-b p { margin: 4px 0 8px; }
.u-src .src-list { margin: 4px 0 10px; padding-left: 18px; }
.u-src .src-list li { margin: 2px 0; }
.u-src .src-list small { color: var(--text-faint); margin-left: 4px; }
.num-table .c-best { display: none; }
.num-table tbody tr[hidden] { display: none; }
@media (max-width: 760px) { .num-table .c-best { display: table-cell; } }
@media (max-width: 560px) { .num-table .c-lists { display: none; } .num-table td.c-dur, .num-table td.c-best { font-size: var(--fs-ui); } .num-table thead th small { font-size: var(--fs-micro); } }
/* T-990 (Gemini review 2, #3 and #4): names wrap rather than cut ("C'tan Shar…" three times at 1366). The army and best
   tables let a name and its line under it take two lines; on a wide screen the tag's three badges sit in a 2×2 block (the
   coin beside sword over shield) and the durability header's note wraps, so the Unit column gets their width. */
.num-table .u1, .num-table .u2, .best-table .u1, .best-table .u2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.num-table .u1, .best-table .u1 { height: auto; min-height: 24px; flex-wrap: wrap; column-gap: 4px; row-gap: 0; line-height: 1.3; }
.num-table .u1 a, .best-table .u1 a { white-space: normal; overflow: visible; text-overflow: clip; }
@media (min-width: 1100px) { .num-table td.unit { min-width: 150px; } }
.num-table thead th.c-dur small { white-space: normal; }
@media (min-width: 561px) {
  .num-table td.c-tag .u-tag { display: inline-grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content; gap: 2px 3px; align-items: center; }
  .num-table td.c-tag .u-tag > .tg { grid-row: span 2; }
}
@media (max-width: 560px) { .picks .pk > a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-lg); } }
@media (max-width: 560px) { .rank-table th .sort-btn { min-height: var(--h-lg); align-content: center; } }
.rank-table td.unit:not(.c-army) { position: relative; } .rank-table td.unit:not(.c-army) .u1 a::after { content: ""; position: absolute; inset: 0; }
/* T-873: /factions/'s army rows and /best/'s columns: numbers, a small unit tag, one line under each. */
.army-nums td.c-topu a { font-weight: 600; text-decoration: none; }
.army-nums td.c-topu small { display: block; color: var(--text-faint); font-size: var(--fs-xs); }
.army-nums th.n, .army-nums td.n { text-align: right; font-variant-numeric: tabular-nums; }
.best-table thead th small { display: block; font-size: var(--fs-micro); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-faint); }
@media (max-width: 560px) { .army-nums td.c-topu small { display: none; } }
.army-nums td.c-topu { width: 46%; max-width: 0; }
.army-nums td.c-topu a { display: flex; align-items: center; gap: 4px; min-width: 0; }
.army-nums .tu-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .army-nums .c-nu { display: none; } .army-nums td.c-topu a { min-height: var(--h-lg); } }
.army-nums td.unit { width: 54%; }
.best-table thead th .sort-btn { display: inline-block; }
.army-nums td { vertical-align: middle; }
.num-table th .sort-btn, .best-table th .sort-btn { position: relative; padding-right: 10px; } .num-table th .sort-ar, .best-table th .sort-ar { position: absolute; right: 0; top: 0; }
/* T-903: the guide's contents and its engine examples. */
.g-toc { margin: 14px 0 6px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); }
.g-toc .g-th { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }   /* a label, as the unit pages' "Quick answers" */
.g-toc ol { margin: 0; padding-left: 20px; columns: 2 160px; }
.g-toc a { display: inline-block; padding: 8px 0; min-height: 24px; }
.eng-table th:first-child { min-width: 150px; text-align: left; }
.eng-table td { white-space: nowrap; }

/* T-920 to T-927: a unit page's Armory, a sandbox for the unit (Jordan's layout, 9 Oct: "toggles open and available to
   click so they can see the instant results", the numbers "floating and pinned to the bottom"). The scene and "This
   setup" side by side (stacked on a phone), every option group open in a grid, the pins, and a results dock stuck to the
   bottom of the screen once "This setup" has scrolled away, until the Armory ends. The scene's box keeps its height. */
.arm { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; min-width: 0; }
/* T-931, T-1073W: where the scene and the card sit side by side, the "Change setup" block (.arm-cfg: the bar and a row per
   option group) fills the column under the scene, beside the card; stacked (a phone), the bar alone sits between the scene and
   the card. The option groups themselves are in the sheet (.arm-sheet, below). */
.arm-top { container: armtop / inline-size; }
.arm-tg { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.arm-sc { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.arm-card { flex: 1 1 340px; }
.arm-cfg { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.arm-cfgo { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: var(--r-lg); border: 1px solid var(--pick-bd, var(--border)); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.arm-cfgo:hover { border-color: var(--accent); }
.arm-cfgo:focus-visible, .arm-cfgl button:focus-visible, .arm-x:focus-visible, .arm-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arm-cfgi { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--panel-3); color: var(--text); }
.arm-cfgi .glyph { width: 18px; height: 18px; display: block; }
.arm-cfgt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arm-cfgt b { font-size: var(--fs-lead); font-weight: 800; }
.arm-cfgt small { font-size: var(--fs-ui); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-cfgc { flex: none; font-size: var(--fs-h2); font-weight: 800; color: var(--text-dim); }
.arm-cfgl { display: none; list-style: none; margin: 0; padding: 4px 0; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); }
.arm-cfgl li + li { border-top: 1px solid var(--panel-2); }
.arm-cfgl button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--h-lg); padding: 4px 14px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.arm-cfgl button:hover { background: var(--panel-2); }
.arm-cfgl span { flex: none; width: 8.5em; font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); } /* T-1205B: labels in sentence case, as the calculator's */
.arm-cfgl b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-cfgl button::after { content: "›"; flex: none; color: var(--text-dim); font-weight: 800; }
@container armtop (min-width: 692px) {
  .arm-tg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .arm-sc { grid-area: 1 / 1; }
  .arm-card { grid-area: 1 / 2 / 3 / 3; align-self: start; }
  .arm-cfg { grid-area: 2 / 1; align-self: start; }
  .arm-cfgl { display: block; }
  .arm-cfgl button { min-height: 38px; font-size: var(--fs-ui); }
}
.arm-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arm-ch h3 { flex: 1; }
.arm-reset { min-height: var(--h-lg); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
/* T-931: the groups flow in columns (masonry-like), so a long Wargear or Detachment list no longer sets a whole row's
   height and leaves holes beside the short groups; one column on a phone, in the same order. */
.arm-opts > .arm-g { margin-bottom: 10px; }
.arm-opts > .arm-g:last-child { margin-bottom: 0; }
/* T-1073W: the "Change setup" sheet. A dialog over the page with a dimmed backdrop: from the bottom on a phone (up to 86% of
   the screen, its header and Done fixed, the groups scrolling between), a panel from the right from 761 px. */
html.arm-lock { overflow: hidden; }
.arm-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(2, 6, 23, .55); }
.arm-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 111; display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 -12px 32px var(--shadow); animation: armUp .22s ease-out; }
.arm-sheet[hidden], .arm-scrim[hidden] { display: none; }
@keyframes armUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes armSide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.arm-shd { position: relative; flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.arm-shd::before { content: ""; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border); }
.arm-sht { flex: 1; min-width: 0; }
.arm-sht h3 { margin: 0; font-size: var(--fs-h3); font-weight: 800; }
.arm-shn { margin: 2px 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.arm-shn b { font-size: var(--fs-lead); font-weight: 800; color: var(--att-soft); }
.arm-shn b:nth-of-type(2) { color: var(--green); }
.arm-shn small { font-size: inherit; }
.arm-x { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-lead); cursor: pointer; }
.arm-sheet .arm-opts { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; }
.arm-shf { flex: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.arm-done { width: 100%; min-height: var(--h-lg); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-lead); font-weight: 800; cursor: pointer; }
.arm-done:hover { border-color: var(--text-dim); }
@media (min-width: 761px) {
  .arm-sheet { left: auto; top: 0; width: min(520px, 92vw); max-height: none; border-radius: var(--r-lg) 0 0 var(--r-lg); border-top: 0; border-left: 1px solid var(--border); box-shadow: -12px 0 32px var(--shadow); animation-name: armSide; }
  .arm-shd::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arm-sheet { animation: none; } }
.arm-g { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--panel-2); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
:root[data-theme="light"] .arm-g { border-color: var(--border); }
.arm-g legend { padding: 0 6px; font-size: var(--fs-ui); font-weight: 700; color: var(--text-2); }
.arm-its { display: flex; flex-wrap: wrap; gap: 6px; }
.ao { min-height: var(--h-lg); max-width: 100%; padding: 5px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-3); color: var(--text-2); font: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ao small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--text-dim); }
/* T-943: a squad's label, the parts every listed squad shares in the regular weight and the parts that differ in bold. */
.ao-k { font-weight: 400; }
.ao-k b { font-weight: 800; color: var(--text); }
.ao[aria-pressed="true"] .ao-k b { color: inherit; }
/* The selected choice tile (T-935): the pick-one look, as every other pick-one control. */
.ao[aria-pressed="true"] { background: var(--pick-bg); border-color: var(--pick-bd); color: var(--pick-fg); font-weight: 700; }
/* T-1205B: in the sheet a picked choice wears its side's colour, as in the calculator: this unit's setup the attacker's blue,
   the target the defender's purple. */
.arm-sheet .ao[aria-pressed="true"] { background: color-mix(in srgb, var(--att-fill) 18%, var(--panel)); border-color: var(--att-fill); color: var(--text); }
.arm-sheet [data-g="t"] .ao[aria-pressed="true"] { background: color-mix(in srgb, var(--def-fill) 18%, var(--panel)); border-color: var(--def-fill); }
.ao[aria-pressed="true"] small { color: var(--text-2); }
.ao:disabled { opacity: 0.5; background: transparent; color: var(--text-faint); cursor: default; }
.ao:disabled small { color: var(--text-faint); }
.ao:focus-visible, .arm-pin:focus-visible, .arm-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arm-gn { margin: 8px 2px 0; font-size: var(--fs-sm); color: var(--text-dim); }
/* The pin's change, "+12% vs Pin 1", in the card's head row (the dock went in T-1073W). */
.arm-delta { padding: 3px 10px; border-radius: var(--r-lg); font-size: var(--fs-ui); font-weight: 800; background: var(--panel-2); color: var(--text-2); }
.arm-delta b { font-size: inherit; font-weight: 800; }
.arm-delta small { font-size: inherit; color: inherit; }
.arm-delta[data-s="1"], .arm-pcd[data-s="1"] { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.arm-delta[data-s="-1"], .arm-pcd[data-s="-1"] { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.arm-pin { min-height: var(--h-lg); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.arm-pin:disabled { opacity: .55; cursor: default; }
.arm-scene { position: relative; height: 180px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-2), var(--panel-3)); }
.arm-scene.arm-in { animation: armIn .45s ease-out; }
/* The real battle (T-1068S): the calculator framed over the scene, shown once it's ready; taps still reach the scene (its link). */
.arm-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .3s; background: transparent; }
.arm-scene.arm-live .arm-frame { opacity: 1; }
.arm-scene.arm-live > :not(.arm-frame) { visibility: hidden; }
/* While it loads (T-1236B) the scene is the battle's ground alone: no squads, no names, so nothing changes when it arrives. */
.arm-scene.arm-wait .arm-hud { visibility: hidden; }
@keyframes armIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .arm-scene.arm-in { animation: none; } }
.arm-stage { height: 180px; }
.arm-stage canvas { display: block; image-rendering: pixelated; }
.arm-hud { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); 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; }
.arm-hud > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-vs { text-align: right; }
.arm-kbar { display: flex; gap: 2px; justify-content: flex-end; margin-top: 3px; }
.arm-kbar i { width: 6px; height: 4px; background: #F87171; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.arm-kbar i.gone { background: rgba(255,255,255,.25); }
.arm-kbar i.all { width: 60px; background: linear-gradient(90deg, #F87171 var(--l), rgba(255,255,255,.25) var(--l)); }
.arm-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 0 2px; font-size: var(--fs-ui); color: var(--text-dim); }
.arm-roll { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }   /* our mark first, as every way into the calculator (T-1058S) */
.arm-roll .dice-mark { width: 16px; height: 16px; flex: none; }
.arm-scene.arm-link { cursor: pointer; }
.arm-card, .arm-pins { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); min-width: 0; }
.arm-card h3, .arm-pins h3 { margin: 0; font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
.arm-lo { margin: 0; font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.arm-nums, .arm-chain, .arm-dur { display: grid; gap: 8px; }
.arm-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arm-chain { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-align: center; }
.arm-dur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arm-nums p, .arm-chain p, .arm-dur p { margin: 0; padding: 8px 10px; border-radius: var(--r-lg); background: var(--panel-3); min-width: 0; }
.arm-chain p { padding: 8px 2px; }
.arm-nums b { display: block; font-family: var(--font-head); font-size: var(--fs-num); line-height: 1.15; font-weight: 800; }
.arm-nums p:nth-child(1) b { color: var(--att-soft); }
.arm-nums p:nth-child(2) b { color: var(--green); }
.arm-chain b { display: block; font-size: var(--fs-lead); font-weight: 800; }
.arm-dur b { display: block; font-size: var(--fs-h2); font-weight: 800; color: var(--def-soft); }
.arm-nums small, .arm-chain small, .arm-dur small { display: block; font-size: var(--fs-sm); line-height: 1.3; color: var(--text-dim); }
.arm-chain small { font-size: var(--fs-sm); }
@media (max-width: 560px) { .arm-nums b { font-size: var(--fs-h2); } .arm-chain b { font-size: var(--fs-body); } .arm-chain small { font-size: var(--fs-sm); } }
.arm-note { margin: 0; font-size: var(--fs-ui); color: var(--text-dim); }
.arm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.arm-acts { align-items: center; } .arm-acts .arm-go { flex: none; } /* the Simulate button keeps its size (style.css .sim-btn, T-1234B) */
.arm-share { flex: 1 0 auto; min-height: var(--h-lg); border-radius: var(--r-pill);}
.arm-shared { margin: 0; font-size: var(--fs-ui); color: var(--text-dim); overflow-wrap: anywhere; }
.arm-shared:empty { display: none; }
.arm-pcs { display: flex; flex-wrap: wrap; gap: 10px; }
.arm-pc { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--panel-3); border: 1px solid var(--border); }
.arm-pch { display: flex; align-items: center; gap: 8px; }
.arm-pch b { flex: 1; font-size: var(--fs-ui); color: var(--text); }
.arm-pcx { width: 44px; height: 44px; margin: -6px -6px -6px 0; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-h2); cursor: pointer; }
.arm-pcs-s { margin: 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.arm-pc dl { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.arm-pc dl div { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-body); }
.arm-pc dt { color: var(--text-dim); }
.arm-pc dd { margin: 0; font-weight: 700; }
.arm-pcd { margin: 0; padding: 6px 8px; border-radius: var(--r-md); background: var(--panel-2); font-size: var(--fs-ui); font-weight: 700; color: var(--text-2); }
.u-rank { color: var(--text-dim); text-decoration: none; }
.u-rank:hover { text-decoration: underline; }
@media print { .arm-scene, .arm-sheet, .arm-scrim, .arm-cfg, .arm-reset, .arm-acts, .arm-roll { display: none; } }
.arm-durl { margin: 0; font-size: var(--fs-ui); color: var(--text-dim); }
.arm-durl b { color: var(--def-soft); }
/* T-924 to T-927: the extras under the armory: what kills it best, its meta and balance line, the matchups players test,
   and sharing the armory's matchup. Compact: a list, two lines, a row of chips, a button. */
.u-xtra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; min-width: 0; }
@media (min-width: 900px) { .u-xtra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ux { min-width: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ux h2, .ux-kill h2 { margin: 0 0 6px; font-size: var(--fs-h2); }
.ux-kill h2 small, .ux h2 small { display: block; margin-top: 1px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-dim); }
.xk { list-style: none; margin: 0; padding: 0; }
.xk li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--panel-2); }
.xk li:first-child { border-top: 0; }
.xk-n { min-width: 0; overflow-wrap: anywhere; }
.xk-n a { font-weight: 700; }
.xk-n small, .xk-v small { display: block; font-size: var(--fs-sm); color: var(--text-dim); }
.xk-v { text-align: right; }
.xk-v b { font-size: var(--fs-h3); color: var(--att-soft); }
.ux-kill .try, .ux .try { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-lg); padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel-3); text-decoration: none; font-weight: 700; font-size: var(--fs-body); white-space: nowrap; }
.ux-meta p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.ux-meta p + p { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--panel-2); }
.xm-l > b { font-size: var(--fs-lead); color: var(--text); }
.xm-arrow { font-weight: 800; color: var(--att-soft); }
.xb-tag { display: inline-block; padding: 0 7px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; background: var(--warn-bg); color: var(--amber); }

.ux-tests p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ux-k { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
@media print { .u-xtra .try, .ux-share { display: none; } }
.arm-vs [data-k="kn"] { display: inline-block; max-width: calc(100% - 1.8em); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (max-width: 760px) { .arm-ch h3 { flex: 1 1 60%; } .arm-ch button { flex: 1 1 calc(50% - 4px); } }   /* the pin's change beside the heading, the two buttons a row under (T-1073W) */
/* T-947 (the layout review, item 8: prose ran 150 characters a line): reading pages (main.prose: /mathhammer/, /about/,
   /about/scoring/, the detachment pages) and a unit page's quick answers keep to about 70 characters; tables and the
   Armory are never capped. Lists for what was a run of "; " (quick answers, the scoring page's targets and attacks). */
main.prose :is(p, li, dd, dt, h2, h3):not(table *) { max-width: 70ch; }
.u-qa dt, .u-qa dd { max-width: 70ch; }
.qa-list, .sc-list { margin: var(--s-1) 0; padding-left: 20px; }
.qa-list li, .sc-list li { margin: 2px 0; }
/* T-947: Tier against Maths, said once on /about/scoring/; the unit header's "?" leads there. */
.tvm { margin: var(--s-5) 0 var(--s-6); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); max-width: 72ch; }
.tvm h2 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.tvm dl { margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.tvm dt { font-weight: 800; color: var(--text); }
.tvm dd { margin: var(--s-1) 0 0; font-size: var(--fs-body); color: var(--text-2); }
.tvm dd.tvm-field { margin-top: var(--s-2); font-size: var(--fs-ui); color: var(--text-dim); }
.tvm p { margin: var(--s-4) 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.u-tagq { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: var(--s-1); border-radius: 50%; border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 800; line-height: 1; color: var(--text-dim); text-decoration: none; vertical-align: middle; }
.u-tagq:hover, .u-tagq:focus-visible { color: var(--accent); border-color: var(--accent); }
/* /T-947 */
/* T-948 (the layout review, item 9: the balance update was 16,335 px): each section's units in a fold per army (its glyph
   small and unboxed), one-line rows of about 36 px, the columns sized to their content with "What changed" taking the slack,
   each open fold with its own header; on a phone the narrow columns. */
.pt-sec { display: grid; gap: var(--s-1); }
.patch-t { table-layout: fixed; width: 100%; }
.patch-t .pc-u { width: 30%; } .patch-t .pc-p { width: 18em; } .patch-t .pc-t { width: 6em; } .patch-t .pc-v { width: 6.5em; } .patch-t .pc-r { width: 44px; }
.pt-army thead th { padding-top: var(--s-2); padding-bottom: var(--s-1); }
.patch-t tbody th, .patch-t tbody td { padding: var(--s-1) var(--s-4); vertical-align: middle; line-height: 1.35; }
.patch-t tbody th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.patch-t tbody td:nth-child(2) { white-space: nowrap; }
.patch-t td small, .patch-t th small.pt-also { display: inline; margin-left: var(--s-2); }
.patch-t td:nth-child(5) { min-width: 0; }
.patch-t .tier { min-width: 20px; padding: 0 4px; font-size: var(--fs-xs); border-width: 1.5px; }
.patch-t .run-link.run-ic { width: 28px; height: 28px; margin: 0; }
.patch-t .run-link.run-ic .dice-mark { width: 16px; }
.pt-army > summary { display: flex; align-items: center; gap: var(--s-3); min-height: var(--h-md); padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); cursor: pointer; list-style: none; font-size: var(--fs-body); }
.pt-army > summary::-webkit-details-marker { display: none; }
.pt-army > summary::after { content: "▾"; flex: none; color: var(--text-dim); transition: transform .15s; }
.pt-army:not([open]) > summary::after { transform: rotate(-90deg); }
.pt-army[data-gs] > summary { border-left: 4px solid var(--side); }   /* T-1275B: each army's side on its edge */
.pt-army > summary small { color: var(--text-dim); font-weight: 600; font-size: var(--fs-sm); }
.pt-army > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-army .pt-gl { width: 16px; height: 16px; margin: 0; }
.pt-army[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; }
.pt-army > .tbl-wrap { border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
@media (prefers-reduced-motion: reduce) { .pt-army > summary::after { transition: none; } }
/* T-982: one list of armies; each opens on its sub-headings (Stronger, Weaker, Unchanged by our numbers) */
.pt-tally { margin: 0 0 var(--s-3); font-size: var(--fs-ui); color: var(--text-dim); }
.pt-tally b { color: var(--text); }
.pt-tally .up, .pt-split .up { color: var(--green); } .pt-tally .down, .pt-split .down { color: var(--red); }
.pt-tally .pt-dot { color: var(--text-faint); }
.pt-split { margin-left: auto; display: inline-flex; gap: var(--s-3); flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pt-split span { display: inline-flex; gap: 2px; align-items: baseline; }
.pt-split b { color: inherit; font-weight: 800; }
.pt-split [hidden] { display: none; }
.patch-t tbody .pt-sub th { padding: var(--s-3) var(--s-4) var(--s-1); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); background: var(--panel-2, var(--panel)); white-space: normal; }
.patch-t tbody.up .pt-sub th { color: var(--green); } .patch-t tbody.down .pt-sub th { color: var(--red); }
.patch-t tbody .pt-sub small { display: inline; font-size: inherit; color: var(--text-dim); margin-left: var(--s-1); }
.patch-t tr.pt-hit > th { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 560px) {
  .patch-t { table-layout: auto; }
  .patch-t col { width: auto !important; }
  .pt-army thead th { padding: 4px 5px; font-size: var(--fs-micro); }
  .patch-t tbody th { white-space: normal; }
  .patch-t tbody th, .patch-t tbody td { padding: var(--s-1) 5px; }
  .pt-army > summary { min-height: var(--h-lg); }
  .pt-army > summary small { margin-right: auto; }
  .patch-t td small { display: block; margin-left: 0; }
}
/* /T-948 */
/* T-949 (Gemini: the key came after 25 rows; a phone hid the targets behind Best): the key sits above each army table; on a
   phone a row of chips swaps the Best column for one target's, the page never scrolling sideways. */
.tbl-key { margin: 0 0 var(--s-3); }
.tcol { display: none; }
.tcol { align-items: center; }
.tcol-l { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 760px) {
  .tcol:not([hidden]) { display: flex; }
  .num-table[data-col] th.c-best, .num-table[data-col] td.c-best { display: none; }
  .num-table[data-col="0"] .tgt.k0, .num-table[data-col="1"] .tgt.k1, .num-table[data-col="2"] .tgt.k2, .num-table[data-col="3"] .tgt.k3, .num-table[data-col="4"] .tgt.k4 { display: table-cell; }
}
/* /T-949 */
/* T-965: the army tables' durability column is one archetype at a time (plasma, .a-main); on a phone the "Durability
   against" chips (data-dcol) swap it for another's, as the damage chips do. */
.num-table .c-dur:not(.a-main) { display: none; }
@media (max-width: 760px) {
  .num-table[data-dcol] .c-dur.a-main { display: none; }
  .num-table[data-dcol="0"] .c-dur.a0, .num-table[data-dcol="1"] .c-dur.a1, .num-table[data-dcol="2"] .c-dur.a2, .num-table[data-dcol="3"] .c-dur.a3, .num-table[data-dcol="4"] .c-dur.a4 { display: table-cell; }
}
/* /T-965 */

/* The Armies tab, /units/ (T-1243B, Jordan 19–20 Oct, mockup round 8; pagesearch.js [data-az]): the title and count on one line,
   the A–Z | By win rate switch, the sticky finder (search and jump buttons), then cards of army chips; a chip opens its army's
   panel under its card's chips (units by role, each a chip with its tier coin). The brand's magenta-to-violet (--simA..--simC,
   the Simulate button's) rules the cards and fills the switch, the open chip and the army page button; By win rate's cards take
   their tier's colour. Without a script (html.az-js unset) the chips are links and each card ends in its armies' closed panels. */
:root { --az-rule: linear-gradient(90deg, var(--simA), var(--simB) 55%, var(--simC)); }
.az { max-width: 920px; margin: 0 auto; }
.az-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.az-top h1 { margin: 0; }
.az-top p { margin: 0; font-size: var(--fs-ui); color: var(--text-dim); }
/* T-1275B (Jordan, 27 Oct): the view switch as underline tabs; the jumps as the side filter (option D), a line in each side's
   colour; each card edged in its side's colour, its rule too. */
.az-seg { display: flex; margin-top: 8px; border-bottom: 1px solid var(--border); }
.az-seg[hidden] { display: none; }
.az-seg button { min-height: var(--h-lg); padding: 0 16px; border: 0; border-radius: 0; background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 800; cursor: pointer; }
.az-seg button[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--att); }
.az-seg button:hover { color: var(--text); }
.az-seg button:focus-visible, .az-chip:focus-visible, .az-jump a:focus-visible, .az-u:focus-visible, .az-go:focus-visible { outline: 2px solid var(--simB); outline-offset: 2px; }
.az-src { margin: 8px 0 0; font-size: var(--fs-12); color: var(--text-faint); }
.az-src a { color: var(--text-dim); }
.az-find { position: sticky; top: 0; z-index: 3; display: grid; gap: 8px; margin: 10px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--panel-2); }
html.in-app .az-find { top: var(--top-h); }
.az-q { display: flex; align-items: center; gap: 8px; height: var(--h-lg); padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text-dim); }
.az-q:focus-within { border-color: var(--simB); }
.az-q svg { flex: none; }
.az-q input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-16); outline: none; }
.az-jump { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.az-jump a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-md); height: var(--h-md); padding: 0 10px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--side, var(--text-faint)) 75%, transparent); color: var(--text-dim); font-size: var(--fs-ui); font-weight: 700; text-decoration: none; white-space: nowrap; }
.az-jump a:hover { color: var(--text); box-shadow: inset 0 -5px 0 var(--side, var(--text-faint)); }
.azc { margin-top: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--panel); border-left: 4px solid var(--side, var(--tc, var(--border))); scroll-margin-top: 130px; }
html.in-app .azc { scroll-margin-top: calc(130px + var(--top-h)); }
.azc h2 { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 10px; padding-bottom: 8px; font-size: calc(var(--fs-20) + 3px); font-weight: 800; }
.azc h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--side, var(--az-rule)); }
.azc h2 small { font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); }
.azc.t-s { --tc: var(--tier-s); } .azc.t-a { --tc: var(--tier-a); } .azc.t-b { --tc: var(--tier-b); } .azc.t-c { --tc: var(--tier-c); } .azc.t-d { --tc: var(--tier-d); } .azc.t-none { --tc: var(--text-faint); }
.azc.az-t h2::after { background: var(--tc); }
.azc h2 .az-tc { font-style: normal; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: var(--fs-16); }
.az-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.az-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-md); padding: 3px 12px 3px 7px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--panel-3); color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 800; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer; }
.az-chip .army-gl { width: 18px; height: 18px; margin: 0; }
.az-chip small { font-size: var(--fs-12); font-weight: 700; color: var(--text-faint); }
.az-chip:hover { border-color: var(--simB); }
.az-chip[aria-expanded="true"] { border-color: transparent; background: var(--az-rule); color: var(--on-brand); }
.az-chip[aria-expanded="true"] small { color: var(--on-brand); }
.az-p { margin-top: 10px; border-radius: var(--r-md); background: var(--panel-3); border: 1px solid var(--border); }
.az-pb { padding: 10px 12px 6px; }
.az-pb h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-16); font-weight: 800; }
.az-pb h3 .army-gl { width: 22px; height: 22px; margin: 0; }
main a.az-go { display: inline-flex; align-items: center; min-height: var(--h-md); margin: 0 0 6px; padding: 4px 14px; border-radius: var(--r-pill); background: var(--az-rule); color: var(--on-brand); font-size: var(--fs-ui); font-weight: 800; text-decoration: none; }
.az-r { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--panel-2); }
.az-r h4 { margin: 0; padding-top: 5px; font-size: var(--fs-12); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.az-us { display: flex; flex-wrap: wrap; gap: 5px 6px; }
main a.az-u { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 9px 2px 4px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: var(--fs-ui); font-weight: 600; line-height: 1.25; text-decoration: none; }
main a.az-u:hover { border-color: var(--simB); background: color-mix(in srgb, var(--simB) 14%, var(--panel)); }
.az-u .tier.tg { flex: none; font-style: normal; }
.az-also { margin: 6px 0 4px; font-size: var(--fs-ui); color: var(--text-dim); }
.az-none { margin: 16px 0; color: var(--text-dim); }
.az-idxh { margin: 14px 0 0; font-size: var(--fs-12); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.az-p > summary { display: flex; align-items: center; gap: 8px; min-height: var(--h-lg); padding: 0 12px; cursor: pointer; }
.az-p > summary b { flex: 1; min-width: 0; }
.az-p > summary small { color: var(--text-dim); }
/* With the script: the panels move under the chips one at a time, without their summary line. */
html.az-js .az-idx, html.az-js .az-p > summary { display: none; }
html:not(.az-js) .az-pb h3, html:not(.az-js) .az-q { display: none; }
@media (max-width: 640px) {
  .az-r { grid-template-columns: minmax(0, 1fr); }
  .az-r h4 { padding-top: 0; }
}
.rank-table .u2 .nw { white-space: nowrap; }   /* T-990: "5 models" and "90 pts" stay whole when the line wraps */
/* T-991 (Gemini review 2, #15): no orphan rows. /best/'s five jobs 3 + 2 on a wide screen (2 + 2 + 1, the last full width,
   in between); the 404's six doors 3 + 3. /best/<job>/'s sort column in bold, its order said above the table. */
@media (min-width: 900px) {
  .lo-blocks.best-hub { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lo-blocks.best-hub > :nth-child(-n+3) { grid-column: span 2; }
  .lo-blocks.best-hub > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .lo-blocks.best-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lo-blocks.best-hub > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 760px) { .nf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 480px) and (max-width: 759px) { .nf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.best-table td.tgt.is-key { font-weight: 800; color: var(--text); }
.best-order { margin: -4px 0 10px; }
@media (max-width: 560px) { .rank-table.best-table th.t-part, .rank-table.best-table td.t-part { display: none; } }   /* T-991: on a phone anti-tank shows its Average, the order's number */
/* T-992: the tier key, one quiet line where the badges first show; a neutral coin and the tags' own sword and shield. */
.tier-key { margin: 6px 0 10px; line-height: 1.7; font-size: var(--fs-sm); color: var(--text-dim); }
.tier-key .tk-coin { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid var(--text-faint); border-radius: 5px; font-size: var(--fs-12); font-weight: 800; line-height: 1; color: var(--text); vertical-align: middle; margin-right: 2px; }
.tier-key .tk-i { width: 13px; height: 13px; vertical-align: -2px; color: var(--text); margin-right: 1px; }
.tier-key a { font-weight: 600; }
/* T-993: a winning list as structured text in the site's font: a row per unit (name, points, Simulate), its kit indented,
   role groups and "Attached Unit 2" as small labels, the list's own header muted. */
.wl-text.wl-list { max-width: 760px; white-space: normal; font: var(--fs-body)/1.45 var(--font-body); padding: 4px 14px 8px; }
.wl-list[data-gs] { border-left: 4px solid var(--side); }   /* T-1275B: the list's side on its edge */
.wl-list .wl-pre { margin: 8px 0; color: var(--text-dim); font-size: var(--fs-sm); }
.wl-list .wl-lab { margin: 16px 0 0; padding-bottom: 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.wl-list .wl-u { padding: 8px 0; border-top: 1px solid var(--border); }
.wl-list .wl-u:first-child, .wl-list .wl-pre + .wl-u { border-top: none; }
.wl-list .wl-uh { display: flex; align-items: center; gap: 4px 10px; }
.wl-list .wl-un { flex: 1; min-width: 0; font-weight: 700; color: var(--text); }
.wl-list .wl-un a { text-decoration: none; }
.wl-list .wl-un a:hover { text-decoration: underline; }
.wl-list .wl-n { font-weight: 600; color: var(--text-dim); }
.wl-list .wl-pts { flex: none; font-family: var(--font-head); font-size: var(--fs-16); font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-list a.wl-sim { flex: none; margin: 0; }
.wl-list .wl-kit { display: block; margin: 2px 0 0; padding: 0 0 0 16px; list-style: none; font-size: var(--fs-sm); color: var(--text-dim); }
.wl-list .wl-kit li { display: block; margin: 1px 0; padding-left: 10px; text-indent: -10px; }
.wl-list .wl-kit li::before { content: "· "; color: var(--text-faint); }
/* T-994: the guide's worked examples stack on a phone: a card per attack, its six numbers labelled in a 3 x 2 grid. */
@media (max-width: 560px) {
  .tbl-wrap:has(.eng-table) { overflow: visible; contain: none; }
  .eng-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .eng-table, .eng-table tbody { display: block; }
  .eng-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .eng-table tbody tr:first-child { border-top: none; }
  .eng-table tr > th { grid-column: 1 / -1; min-width: 0; padding: 0; border: none; white-space: normal; }
  .eng-table td { display: block; padding: 0; border: none; white-space: normal; font-variant-numeric: tabular-nums; }
  .eng-table td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
  .eng-table td.eng-try { grid-column: 1 / -1; }
  .eng-table td.eng-try:empty { display: none; }
}
@media (max-width: 560px) { .eng-table td.eng-try a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-lg); font-weight: 700; text-decoration: none; } .eng-table td.eng-try a::after { content: attr(title); } }
/* T-996: the Armory's wargear list: what every squad carries once above the cards, each card its changes; four cards (the
   chosen one always) and Show all for the rest. */
.arm-wsh { margin: 0 2px 8px; font-size: var(--fs-sm); color: var(--text-dim); }
.arm-wsh b { color: var(--text); font-weight: 600; }
.arm-g[data-g="lo"]:not(.arm-open) .ao.arm-more { display: none; }
.arm-wall { margin: 8px 0 0; min-height: var(--h-md); padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.arm-wall:hover { border-color: var(--text-dim); }
.arm-wall:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .arm-wall { min-height: var(--h-lg); } }
/* T-999 (Gemini review 2's quick items). #16: the tables' Simulate column carries the dice mark in its header (the word for screen readers). */
.rank-table th.run .run-h { display: inline-flex; opacity: 0.75; }
.rank-table th.run .run-h .dice-mark { width: 16px; height: auto; }
/* #18: Sources says it opens: a ▸ that turns when open. */
.u-src > summary { list-style: none; gap: 6px; }
.u-src > summary::-webkit-details-marker { display: none; }
.u-src > summary::before { content: "▸"; display: inline-block; color: var(--text-faint); transition: transform 0.15s; }
.u-src[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .u-src > summary::before { transition: none; } }
/* T-1072W (Jordan, 11 Oct: the two army pages become one, /factions/<army>/, build_pages.js factionPage): the title and one line
   of method, the tier board within the first phone screen (the old /tiers/<army>/ board's rows, each unit a link to its page),
   the units table's one line of controls and headings that stay in view, one coin per row with the other grades folded under
   the name, then the questions and the method, closed. Nothing on the page under 12 px. */
.fp .fp-lede { font-size: var(--fs-body); margin: 6px 0 12px; }
/* T-1275B (the phone mockup, Jordan 27 Oct): the army's card, its name on the calculator's purple name bar. */
.fp-head { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--def); border-radius: var(--r-lg); background: var(--panel); }
.fp-head .fp-lede { margin: 6px 0 0; }
.fp-name { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--r-md); background: var(--def-grad); }
.fp .fp-name h1 { flex: 1; min-width: 0; margin: 0; color: var(--on-brand); }
main a.fp-swap { flex: none; display: grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-md); background: color-mix(in srgb, var(--on-brand) 16%, transparent); color: var(--on-brand); font-size: var(--fs-16); text-decoration: none; }
main a.fp-swap:hover { background: color-mix(in srgb, var(--on-brand) 28%, transparent); }
.fp-sub { margin: 8px 0 0; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); }
.fp-doors { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
main a.fp-door { display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 12px; border: 1.5px dashed var(--c); border-radius: var(--r-pill); color: var(--c); font-size: var(--fs-ui); font-weight: 700; text-decoration: none; }
main a.fp-door:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.fp-door.det { --c: var(--teal); } .fp-door.ls { --c: var(--def-text); }
.fp .fp-lede .data-asof { color: var(--text-dim); white-space: nowrap; }
/* T-1109W: the line into the calculator under the lede; a sentence, so it wraps on a phone (.try alone stays on one line). */
.fp .fp-lede:has(+ .fp-calc) { margin-bottom: 6px; }
.fp .fp-calc { margin: 0 0 12px; }
.fp .fp-calc .try { white-space: normal; align-items: flex-start; min-height: 24px; }
.fp .fp-calc .try .dice-mark { flex: none; margin-top: 3px; }
.fp h1 { margin-bottom: 0; }
.fp-board { margin: 0 0 14px; }
.fp-board .tl-board { gap: 6px; }
main .fp-board a.tl-chip { color: var(--text); text-decoration: none; }
.fp-board a.tl-chip:hover { border-color: var(--text-2); }
.fp-board .tl-lab small { font-size: var(--fs-sm); }
.fp-board .tier.tg.fb-coin { width: 40px; height: 40px; font-size: var(--fs-20); border-width: 2px; border-radius: var(--r-md); }
.fp-board .tl-row.t-none { --tc: var(--border); --te: var(--border); }
@media (max-width: 560px) { .fp-board .tier.tg.fb-coin { width: 30px; height: 30px; font-size: var(--fs-16); } .fp-board .tl-row { padding: 8px; gap: 6px; } }
.fp-board .fb-note { margin: 6px 0 0; }
.fp-board .fb-note:empty { display: none; }
.ut-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; }
.ut-ctl .lov { margin: 0; }
.ut-sel { display: inline-flex; align-items: center; gap: 6px; }
.ut-sel select { font: inherit; font-size: var(--fs-ui); font-weight: 600; min-height: var(--h-md); padding: 0 8px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; max-width: 100%; }
.ut-sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ut-l { font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.ut-cols { display: none; flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 760px) { .ut-cols { display: flex; flex-basis: 100%; } }
@media (max-width: 560px) { .ut-sel select, .ut-ctl .lov button { min-height: var(--h-lg); }  }
/* The headings stay at the top of the screen (below the app's bar in the app): the wrapper doesn't scroll sideways here (the
   table fits at every width: its columns fold away on narrower screens), so position: sticky follows the page. */
.fp .tbl-wrap.tw-stick { overflow: visible; contain: none; }
.nt-one thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); box-shadow: inset 0 -1px 0 var(--border); }
.nt-one thead th:first-child { border-top-left-radius: var(--r-md); }
.nt-one thead th:last-child { border-top-right-radius: var(--r-md); }
html.in-app .nt-one thead th { top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); }
/* One coin per row; under it a chevron opens the row's grades (sword, shield, Maths, Meta) in a strip under the name. */
.nt-one td.c-tag { vertical-align: top; }
.nt-one td.c-tag .u-tag { display: flex; }
.nt-one td.c-tag .tier.tg { width: 24px; height: 24px; font-size: var(--fs-sm); }
.nt-one .ug-t { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 4px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; color: var(--text-dim); cursor: pointer; }
.nt-one .ug-t[hidden] { display: none; }
.nt-one .ug-t svg { transition: transform .15s; }
.nt-one .ug-t[aria-expanded="true"] { color: var(--text); border-color: var(--text-2); }
.nt-one .ug-t[aria-expanded="true"] svg { transform: rotate(180deg); }
.nt-one .ug-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nt-one td.unit .ug-b { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 0 2px; font-size: var(--fs-sm); }
.nt-one .ug-b[hidden] { display: none; }
.nt-one .ug-b .u-tag { gap: 12px; flex-wrap: wrap; white-space: normal; }
.nt-one .ug-x { display: inline-flex; align-items: center; gap: 4px; }
.nt-one .ug-k { color: var(--text-dim); font-weight: 600; }
.nt-one .ug-b .tb-sup { white-space: nowrap; }
.nt-one .ug-b .u-tag .tier.tb { height: 22px; font-size: var(--fs-sm); padding: 0 5px 0 4px; }
.nt-one .ug-b .u-tag .tb .tb-i { width: 12px; height: 12px; }
.nt-one .tier.ug-l { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: var(--r-sm); border-width: 1.5px; line-height: 1; font-size: var(--fs-sm); }
/* 12 px at the least on this page (the review: about 400 runs of text at 9 to 11 px). */
.fp .rank-table thead th, .fp .num-table thead th small, .fp .rank-table .u2, .fp .num-table td.c-lists small, .fp .num-table td.c-best small,
.fp .u-tag .tier, .fp small, .fp .note, .fp .tl-sub, .fp .tl-det, .fp .tl-top, .fp .tier-key, .fp .det-win small { font-size: max(var(--fs-sm), 12px); }
.fp .rank-table thead th { letter-spacing: 0; }
.fp-qa { margin: 0 0 12px; }
.fp-method { margin: 20px 0 8px; border-top: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-dim); }
.fp-method > summary { cursor: pointer; font-weight: 600; color: var(--text-2); min-height: var(--h-lg); display: flex; align-items: center; list-style: none; gap: 6px; }
.fp-method > summary::-webkit-details-marker { display: none; }
.fp-method > summary::before { content: "▸"; display: inline-block; color: var(--text-faint); transition: transform 0.15s; }
.fp-method[open] > summary::before { transform: rotate(90deg); }
.fp-method h3 { font-size: var(--fs-h3); color: var(--text); margin: 14px 0 4px; }
.fp-method p { margin: 4px 0 8px; max-width: 760px; }
.fp-dont { margin: 4px 0 10px; padding-left: 18px; }
.fp-dont li { margin: 4px 0; max-width: 760px; }
/* /T-1072W */
/* T-1072W on a phone: a row keeps to its name, its points and the grades button (role and models on its page and in the role
   drop-down); the durability heading names its weapon in a word. */
.nt-one .th-sm { display: none; }
@media (max-width: 560px) {
  .nt-one .u2-x { display: none; }
  .nt-one .th-lg { display: none; } .nt-one .th-sm { display: inline; }
}
/* T-1072W: the controls in two rows on a phone (role and sort; the two column drop-downs side by side), the grades strip's
   letters in one flow, and a durability heading wide enough for its words on a wide screen. */
.nt-one .ug-b .u-tag { display: contents; }
.nt-one th.c-dur { min-width: 112px; }
@media (max-width: 560px) {
  .ut-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .ut-role select { width: 100%; }
  .ut-ctl .lov button { padding: 6px 10px; }
  .ut-cols { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ut-cols .ut-sel { flex-direction: column; align-items: stretch; gap: 2px; }
  .ut-cols select { width: 100%; }
  .nt-one th.c-dur { min-width: 0; }
}
.fp .rm-tip { font-size: var(--fs-sm); }
.fp .u-tag .tb-sup { font-size: var(--fs-sm); }
.upk-wrap:has(> .upk-main > .fp) .upk > summary small, .upk-wrap:has(> .upk-main > .fp) .upk-list h3, .upk-wrap:has(> .upk-main > .fp) .upk-list h3 small, .upk-wrap:has(> .upk-main > .fp) .upk-w { font-size: var(--fs-sm); }
/* T-1072W: the headings stick only while the table needs no sideways scroll, so where the five target columns don't fit (the
   middle widths, and beside the units list from 1180 px) they fold into Best as on a phone, with the column drop-downs. */
@media (min-width: 761px) and (max-width: 959px), (min-width: 1180px) and (max-width: 1259px) {
  .nt-one .tgt { display: none; }
  .nt-one .c-best { display: table-cell; }
  .ut-cols { display: flex; }
  .nt-one[data-col] .c-best { display: none; }
  .nt-one[data-col="0"] .tgt.k0, .nt-one[data-col="1"] .tgt.k1, .nt-one[data-col="2"] .tgt.k2, .nt-one[data-col="3"] .tgt.k3, .nt-one[data-col="4"] .tgt.k4 { display: table-cell; }
  .nt-one[data-dcol] .c-dur.a-main { display: none; }
  .nt-one[data-dcol="0"] .c-dur.a0, .nt-one[data-dcol="1"] .c-dur.a1, .nt-one[data-dcol="2"] .c-dur.a2, .nt-one[data-dcol="3"] .c-dur.a3, .nt-one[data-dcol="4"] .c-dur.a4 { display: table-cell; }
}
@media (max-width: 359px) { .fp .tbl-wrap.tw-stick { overflow-x: auto; contain: paint; } } /* the narrowest phones scroll the table sideways as before, its headings not sticky */
/* /T-1072W */
/* T-1104W (Jordan, 12 Oct, variant B): Reviewers we read, under an army's tier board. A card per channel, its initial in a neutral
   circle (no tier colours, thumbnails or logos), the name to the channel and a "▶ watch" row per video, its title in two lines at
   most. Explicit sizes, 12 px and up (the leading block's old tokens don't reach here); 44 px rows to tap on a phone. */
.rv { margin: 4px 0 14px; }
.rv-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; }
main .rv-h { margin: 0; font-size: var(--fs-12); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rv-n { font-size: var(--fs-12); font-weight: 600; color: var(--text-faint); }
.rv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.rv-card { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 10px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.rv-ini { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 900; font-size: 15px; color: var(--text); background: color-mix(in srgb, var(--text) 10%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--text) 35%, transparent); }
.rv-card .rv-name { flex: 1; min-width: 0; display: inline-flex; align-items: center; min-height: 34px; font-weight: 800; font-size: var(--fs-14); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main a.rv-name { text-decoration: none; }
main a.rv-name:hover { text-decoration: underline; }
.rv-vids { flex: 1 1 100%; list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 0; }
.rv-vids li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-vids li + li { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.rv-v { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13px; line-height: 1.3; color: var(--text-2); }
main a.rv-v { color: var(--text-2); text-decoration: none; }
main a.rv-v:hover .rv-t { text-decoration: underline; }
.rv-t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.rv-tri { display: inline-block; flex: none; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }
.rv-w { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel); font-size: var(--fs-12); font-weight: 800; line-height: 1.4; color: var(--text-dim); }
.rv-none { color: var(--text-faint); font-style: italic; }
.rv-d { flex: none; font-size: var(--fs-12); color: var(--text-faint); white-space: nowrap; }
.rv-note { margin: 8px 0 2px; font-size: var(--fs-12); line-height: 1.5; color: var(--text-dim); }
.rv-note a { white-space: nowrap; }
main a.rv-name:focus-visible, main a.rv-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 560px) {
  .rv-cards { grid-template-columns: minmax(0, 1fr); }
  .rv-card .rv-name, .rv-v { min-height: 44px; }
}
/* /about/scoring/'s Reviewers: a compact card per army in the closed drawer; one list on a phone. */
.rvs-all { margin: 12px 0 0; }
.ra-grid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
main.prose .ra-grid li { max-width: none; }
.ra { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.scoring-page .ra h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: var(--fs-h3); }
main .ra h3 a { color: var(--text); text-decoration: none; }
main .ra h3 a:hover { text-decoration: underline; }
.ra h3 small { font-size: var(--fs-12); font-weight: 600; color: var(--text-faint); }
.ra ul { list-style: none; margin: 0; padding: 0; }
.ra li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ch d" "v v"; gap: 0 8px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ra li:first-child { border-top: 0; }
.ra-ch { grid-area: ch; min-width: 0; display: inline-flex; align-items: center; min-height: 28px; font-size: var(--fs-14); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main a.ra-ch { color: var(--text); text-decoration: none; }
main a.ra-ch:hover { text-decoration: underline; }
.ra-d { grid-area: d; align-self: center; font-size: var(--fs-12); color: var(--text-faint); white-space: nowrap; }
.ra-v { grid-area: v; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; }
main a.ra-v { color: var(--text-2); text-decoration: none; }
main a.ra-v:hover span:last-child { text-decoration: underline; }
.ra-v span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-v .rv-tri { color: var(--text-faint); }
.ra-none { color: var(--text-faint); font-style: italic; }
main a.ra-ch:focus-visible, main a.ra-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 560px) {
  .ra-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .ra { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; padding: 8px 12px; }
  .ra:first-child { border-top: 0; }
  .ra-ch, .ra-v { min-height: 44px; }
}
/* /T-1104W */

/* T-1205B (the unit page review): the blocks between the chart and the rating under one heading, the same gaps between them;
   the units either side of this one in its role, under the header. */
.u-mid { display: grid; gap: 12px; margin: 18px 0; }
.u-mid > h2 { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.u-mid > * { margin-top: 0; margin-bottom: 0; }
.u-pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin: 0 0 14px; font-size: var(--fs-ui); align-items: stretch; }
.u-pn-b { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); text-decoration: none; font-weight: 700; line-height: 1.2; }
.u-pn-b:hover, .u-pn-b:focus-visible { border-color: var(--accent); background: var(--panel-2); }
.u-pn-next { justify-self: end; text-align: right; } .u-pn-prev { justify-self: start; } .u-pn-all { justify-self: center; }
.u-pn-t { display: grid; } .u-pn-t small { font-weight: 600; color: var(--text-dim); font-size: var(--fs-xs); }
.u-pn-fig { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; flex: none; } .u-pn-fig svg { width: 32px; height: 32px; image-rendering: pixelated; }
.u-pn-ico svg { width: 22px; height: 22px; } .u-pn-ar { font-size: var(--fs-20); color: var(--text-dim); }
@media (max-width: 560px) { .u-pn { grid-template-columns: 1fr 1fr; } .u-pn-all { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; } .u-pn-b { font-size: var(--fs-sm); } }
.u-cmp { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-dim); } .u-cmp a { font-weight: 600; }

/* T-1237B (Jordan, 19 Oct, on the mockup: "Looks good. Make it so"): the army and unit pages thinned to what a player needs.
   One column at most 760 px wide. The army page: one unit list in tier bands (a big letter tile, the count, what the tier
   means), each row the unit, its points and how many lists take it with a small bar; the dice maths (Dmg, Tough, Maths) in
   muted grey behind a switch (docs/armypage.js); the one Simulate; a line per detachment; compact list cards; one red button;
   the method, questions and sources folded at the foot. */
.fp, .up { max-width: 760px; margin-inline: auto; }
/* T-1352P (the 19 Oct audit: the trail sat at the page edge, the column centred): the trail lines up with the column. */
main:has(> .fp) > .crumbs, main:has(> .up) > .crumbs { max-width: 760px; margin-inline: auto; }
.ap { margin: 14px 0 0; }
.ap-box { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ap-chips button { min-height: var(--h-md); padding: 0 13px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.ap-chips button small { font-size: var(--fs-12); font-weight: 700; color: var(--text-faint); margin-left: 2px; }
/* T-1275B: filters as pills, white when picked. */
.ap-chips button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.ap-chips button[aria-pressed="true"] small { color: var(--bg); }
.ap-chips button:focus-visible, .ap-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.ap-sw b { display: block; font-size: var(--fs-ui); font-weight: 800; }
.ap-sw small { display: block; font-size: var(--fs-12); color: var(--text-dim); }
.ap-sw i { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); }
.ap-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: left .15s; }
.ap-sw[aria-checked="true"] i { background: var(--att-fill); border-color: var(--att-fill); }
.ap-sw[aria-checked="true"] i::after { left: 21px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .ap-sw i::after { transition: none; } }
.ap-dnote { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); font-size: var(--fs-ui); color: var(--text-2); }
.ap-cols, .ap-r { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; align-items: center; padding: 10px 12px; }
.ap.ap-dice .ap-cols, .ap.ap-dice .ap-r { grid-template-columns: minmax(0, 1fr) 52px repeat(3, 44px); gap: 4px; }
.ap-cols { background: var(--panel-3); padding-block: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.ap-cols span:not(:first-child) { text-align: center; }
.ap-dx { display: none; }
.ap.ap-dice .ap-cols .ap-dx { display: block; }
.ap.ap-dice .ap-r .ap-dx { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ap-dx small { font-size: var(--fs-12); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap.ap-dice .ap-bar { display: none; }
.ap-g + .ap-g, .ap-cols + .ap-g { border-top: 1px solid var(--border); }
.ap-g[hidden] { display: none; }
.ap-gh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; margin: 0; padding: 12px; background: color-mix(in srgb, var(--tc, var(--text-faint)) 14%, var(--panel)); font-size: inherit; }
.ap-g.t-s { --tc: var(--tier-s); --ti: var(--tier-s-ink); } .ap-g.t-a { --tc: var(--tier-a); --ti: var(--tier-a-ink); } .ap-g.t-b { --tc: var(--tier-b); --ti: var(--tier-b-ink); }
.ap-g.t-c { --tc: var(--tier-c); --ti: var(--tier-c-ink); } .ap-g.t-d { --tc: var(--tier-d); --ti: var(--tier-d-ink); } .ap-g.t-none { --tc: var(--text-faint); --ti: var(--text-dim); }
/* T-1243B: By type's sections (a role's name and count on the panel's darker ground) and the By type | By tier switch. */
/* T-1275B (Jordan, 27 Oct): a role heading bigger, on a purple band with the picker's pixel glyph; its units indented under it on a
   purple line, like a list. */
.ap-rg .ap-gh { display: flex; align-items: center; gap: 10px; margin: 10px 10px 4px; padding: 8px 10px; border-radius: var(--r-md); background: color-mix(in srgb, var(--def) 20%, var(--panel)); }
.ap-rg .ap-gt b { color: var(--text); font-size: calc(var(--fs-20) + 2px); }
.ap-ri { flex: none; display: grid; place-items: center; color: var(--def-soft); }
.ap-ri .glyph { width: 22px; height: 22px; }
.ap-rg .ap-ul { margin: 0 0 8px 22px; border-left: 2px solid color-mix(in srgb, var(--def) 55%, transparent); }
.ap-rg .ap-ul li:first-child { border-top: 0; }
.ap-rg + .ap-rg { border-top: 0; }
.ap-order { margin: 0 0 10px; }
.ap-gh .ap-gl { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-size: 22px; border-width: 2.5px; border-radius: 10px; background: var(--panel); }
.ap-gt b { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--ti); }
.ap-gt small { font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); margin-left: 4px; }
.ap-gm { font-size: var(--fs-ui); font-weight: 400; color: var(--text-2); }
.ap-ul { list-style: none; margin: 0; padding: 0; }
.ap-ul li { border-top: 1px solid var(--panel-2); }
main a.ap-r { color: var(--text); text-decoration: none; }
.ap-r:hover, .ap-r:focus-visible { background: var(--panel-2); }
.ap-r:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ap-u { min-width: 0; display: flex; align-items: center; gap: 10px; }
.ap-u .tier.tg { flex: none; width: 26px; height: 26px; }   /* T-1243B: each row its tier coin, in either order */
.ap-ut { min-width: 0; }
.ap-n { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ap-mt { display: block; font-size: var(--fs-12); color: var(--text-dim); }
.ap-ls { display: block; text-align: center; font-family: var(--font-head); font-size: var(--fs-16); font-weight: 800; font-variant-numeric: tabular-nums; }
.ap-ls small { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600; color: var(--text-faint); }
.ap-bar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.ap-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c0), var(--c2) 50%, var(--c5)); }   /* T-1275B: the chart's ramp */
/* The dice letters: muted, never the tier's colours. */
.ap-m { display: inline-grid; place-items: center; min-width: 26px; height: 23px; padding: 0 3px; border: 1.5px solid var(--border); border-radius: 6px; font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.ap-m0 { border-style: dashed; color: var(--text-faint); }
.ap-key { margin: 8px 2px 0; }
.ap-try { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 14px 14px 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.ap-try .sim-btn { flex: none; }
.fp .ap-sub { margin: 0 0 10px; }
.up .ap-try { margin-top: 0; }
.ap-dl { list-style: none; margin: 0; padding: 0; }
.ap-d { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 14px; }
.ap-d + .ap-d { border-top: 1px solid var(--panel-2); }
.ap-d b { font-weight: 700; } main .ap-d b a { color: var(--text); }
.ap-d em { font-style: normal; font-size: var(--fs-ui); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-d small { grid-column: 1 / -1; font-size: var(--fs-12); color: var(--text-dim); }
.ap-more { margin: 8px 2px 0; font-size: var(--fs-ui); }
main a.ap-l { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.ap-l + .ap-l { border-top: 1px solid var(--panel-2); }
.ap-l:hover, .ap-l:focus-visible { background: var(--panel-2); }
.ap-l b { font-weight: 700; overflow-wrap: anywhere; }
.ap-l small { display: block; font-size: var(--fs-12); color: var(--text-dim); margin-top: 2px; }
.ap-l i { font-style: normal; flex: none; font-size: var(--fs-ui); font-weight: 700; color: var(--text-2); }
.fp .ap-build { margin: 18px 0 0; }
.fp .ap-build .btn { display: flex; width: 100%; justify-content: center; min-height: 50px; text-align: center; }
.ap-folds, .up-folds { display: flex; flex-direction: column; gap: 8px; margin: 28px 0 0; }
.ap-folds > details, .up-folds > details { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.ap-folds > details > summary, .up-f > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; font-weight: 700; cursor: pointer; list-style: none; }
.ap-folds > details > summary::-webkit-details-marker, .up-f > summary::-webkit-details-marker { display: none; }
.ap-folds > details > summary::after, .up-f > summary::after { content: "+"; color: var(--text-dim); font-size: 18px; }
.ap-folds > details[open] > summary::after, .up-f[open] > summary::after { content: "−"; }
.ap-folds > details > summary:focus-visible, .up-f > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); }
.fp-qa-d .fp-mb, .up-fb { padding: 0 14px 12px; }
.up-f > summary h2 { margin: 0; font-size: calc(var(--fs-h2) + 2px); font-weight: 800; }
/* The unit page. */
/* T-1275B (Jordan, 27 Oct): the unit's card as the calculator's attacker card: the blue edge, its name on the blue name bar, the
   numbers in the heading face; Damage on the attacker's blue edge, Toughness on the defender's purple. */
.up-hd { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-left: 4px solid var(--att); border-radius: var(--r-lg); background: var(--panel); }
.up-hd .u-fig { flex: none; }
.up-id { flex: 1; min-width: 0; }
.up-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.up-top h1 { flex: 1; min-width: 0; margin: 0; padding: 6px 12px; border-radius: var(--r-md); background: var(--att-grad); color: var(--on-brand); font-size: clamp(var(--fs-num), 4vw, calc(var(--fs-h1) + 2px)); font-weight: 800; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.tier.up-big { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; font-size: var(--fs-20); border-width: 2.5px; border-radius: 9px; }
.up-sub { margin: 4px 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.up-sub .army-gl { vertical-align: -2px; margin-right: 4px; }
.up-pts { margin: 6px 0 0; color: var(--text-2); } .up-pts b { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text); }
.up-in { margin: 2px 0 0; font-size: var(--fs-ui); color: var(--text-2); } .up-in b { font-family: var(--font-head); font-size: var(--fs-16); color: var(--text); }
.up-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
.up-c { padding: 8px 10px; border: 1px solid var(--border); border-left: 4px solid var(--att); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.up-c + .up-c { border-left-color: var(--def); }
.up-c p { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.up-c p.up-ck { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.up .up-k { margin: 26px 0 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.up-facts { margin: 0; padding: 2px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.up-facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 9px 0; font-size: var(--fs-ui); }
.up-facts > div + div { border-top: 1px solid var(--panel-2); }
.up-facts dt { color: var(--text-dim); }
.up-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.up-facts dd small { color: var(--text-faint); }
.up-facts .lead-bonus { margin: 0; }
.up-facts .lead-bonus + .lead-bonus { margin-top: 6px; }
.up-fb > .up-facts { padding: 0; border: 0; background: none; }
.up-facts .traits { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; }
.up-rows { list-style: none; margin: 0 0 8px; padding: 0; }
.up-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5em; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--panel-2); font-size: var(--fs-ui); }
.up-rows li:first-child { border-top: 0; }
.up-rows b { font-variant-numeric: tabular-nums; justify-self: end; }
.up-rows small { color: var(--text-faint); font-size: var(--fs-12); }
.up-rows .up-ti { padding-left: 14px; color: var(--text-dim); }
.up-c .up-j { display: block; margin-top: 2px; color: var(--text-faint); font-size: var(--fs-12); }
.up-rows .ap-gl { min-width: 26px; padding: 1px 4px; }
.up .u-pn { grid-template-columns: 1fr 1fr; margin: 24px 0 0; }
.up .u-pn-all { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
.up-cmp { margin: 12px 2px 0; font-size: var(--fs-ui); color: var(--text-dim); }
.up .rate-box { margin-top: 20px; }
.up details.u-src { margin: 12px 0 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.ap-folds > details > summary::before, .up details.u-src > summary::before { content: none; }
.ap-folds > details > summary, .up details.u-src > summary { color: var(--text); font-weight: 700; }
.up details.u-src > summary { justify-content: space-between; padding: 0 14px; list-style: none; }
.up details.u-src > summary::after { content: "+"; color: var(--text-dim); font-size: 18px; }
.up details.u-src[open] > summary::after { content: "−"; }
.ap-folds .fp-mb, .ap-folds .u-src-b, .up .u-src-b { padding: 0 14px 12px; }
.ap.ap-dice .ap-cols { letter-spacing: .02em; font-size: var(--fs-12); }
/* Try it: the slimmed setup card under the scene (the old two-column Armory went with its long card). */
.up .arm-tg { display: flex; flex-direction: column; gap: 8px; }
.up .arm-sc, .up .arm-card { flex: none; align-self: stretch; }
.arm-card .arm-ag { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.arm-card .arm-ag:hover { border: 0; }
.arm-agt { display: flex; flex-direction: column; min-width: 0; }
.arm-agt small { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.arm-agt b { font-weight: 700; overflow-wrap: anywhere; }
.arm-agc { flex: none; font-size: var(--fs-ui); font-weight: 700; color: var(--text-2); }
.arm-card .arm-lo { font-size: var(--fs-ui); font-weight: 400; color: var(--text-2); }
.arm-sl { margin: 0; color: var(--text-2); }
.arm-sl b { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.arm-sl .arm-delta { margin-left: 8px; }
.arm-card .arm-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-left: 14px; }
/* T-1352P (Jordan, 19 Oct: "This needs the standard share icon"): the share mark before the word, as the calculator's Share wears it. */
.arm-share { display: inline-flex; align-items: center; gap: 0.35em; padding: 6px 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.arm-share .ico { display: inline-flex; width: 1.1em; height: 1.1em; }
.arm-share .ico svg { width: 100%; height: 100%; }
.arm-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arm-shf { display: flex; flex-wrap: wrap; gap: 8px; }
.arm-shf .arm-done { flex: 1 1 100%; }
.arm-shf .arm-reset, .arm-shf .arm-pin { flex: 1 1 auto; }
.arm-sht .arm-note { margin: 2px 0 0; font-size: var(--fs-12); color: var(--text-dim); }
/* T-1256B: the unit map (an army page's Map view) and the unit card (there beside it, and on each unit page), docs/unitmap.js.
   The card's colours: damage the A green, durability the C violet, activations the S gold, objective control the B sky. */
.um { margin: 0 0 12px; }
.um[hidden] { display: none; }
.um-h { margin: 6px 0 2px; font-size: var(--fs-h3); }
.um-lede { margin: 0 0 8px; font-size: var(--fs-ui); color: var(--text-dim); max-width: 760px; }
.um-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.um-filters[hidden] { display: none; }
.um-filters button { display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-md); padding: 0 12px; 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; }
.um-filters button .tier { min-width: 22px; padding: 0 4px; }
.um-filters button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); border-color: var(--text-dim); }
.um-filters button:focus-visible, .um-dot:focus-visible, .um-open a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.um-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.um-mapbox, .um-uc { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); padding: 10px 12px; }
.um-uc[hidden] { display: none; }
.um-map { min-height: 200px; }
.um-svg { display: block; width: 100%; height: auto; touch-action: manipulation; font-family: inherit; }
.um-grid { stroke: var(--panel-2); stroke-width: 1; }
.um-med { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 4; }
.um-ax { fill: var(--text-faint); font-size: var(--fs-12); font-weight: 600; }
.um-axt { fill: var(--text-dim); font-size: var(--fs-12); font-weight: 700; }
.um-q { fill: var(--text-faint); font-size: var(--fs-12); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.um-dot { --tc: var(--tier-d); --ti: var(--tier-d-ink); cursor: pointer; }
.um-dot.t-s { --tc: var(--tier-s); --ti: var(--tier-s-ink); } .um-dot.t-a { --tc: var(--tier-a); --ti: var(--tier-a-ink); } .um-dot.t-b { --tc: var(--tier-b); --ti: var(--tier-b-ink); }
.um-dot.t-c { --tc: var(--tier-c); --ti: var(--tier-c-ink); } .um-dot.t-d { --tc: var(--tier-d); --ti: var(--tier-d-ink); } .um-dot.t-none { --tc: var(--text-faint); --ti: var(--text-dim); }
.um-m { fill: color-mix(in srgb, var(--tc) 22%, var(--panel)); stroke: var(--tc); stroke-width: 2; }
.um-ring { fill: none; stroke: var(--panel); stroke-width: 2; }
.um-dot text { fill: var(--ti); font-size: var(--fs-12); font-weight: 900; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.um-hit { fill: transparent; }
.um-dot.sel .um-m { fill: var(--tc); }
.um-dot.sel text { fill: var(--panel); }
.um-dot.dim { opacity: .25; }
.um-lab { fill: var(--text); font-size: var(--fs-12); font-weight: 800; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.um-legend { margin: 6px 0 0; font-size: var(--fs-12); color: var(--text-dim); }
.um-tip { position: fixed; z-index: 30; pointer-events: none; max-width: 240px; padding: 7px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-3); color: var(--text-2); font-size: var(--fs-12); box-shadow: 0 12px 32px var(--shadow); }
.um-tip[hidden] { display: none; }
.um-tip b { display: block; color: var(--text); font-size: var(--fs-ui); }
/* The card */
.um-uh { display: flex; gap: 10px; align-items: flex-start; }
.um-uh .tier { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: var(--fs-20); border-radius: 10px; }
.um-uh h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.2; }
.um-uh small { display: block; color: var(--text-faint); margin-top: 2px; }
.um-read { margin: 10px 0 4px; padding: 9px 11px; border-radius: var(--r-md); background: var(--panel-3); border: 1px solid var(--panel-2); font-size: var(--fs-ui); color: var(--text-2); }
.um-read p { margin: 0; }
.um-read b { color: var(--text); }
.um-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.um-read p + .um-chips { margin-top: 6px; }
.um-read .um-chips:first-child { margin-top: 0; }
.um-chip { font-size: var(--fs-12); font-weight: 700; border-radius: 12px; padding: 2px 9px; border: 1px solid var(--panel-2); color: var(--text-2); background: var(--panel); white-space: nowrap; }
.um-chip.um-role { border-color: var(--tier-s); color: var(--tier-s-ink); }
.um-job { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; font-size: var(--fs-ui); color: var(--text-2); }
.um-chip.um-jobc { flex: none; border-color: var(--text-faint); color: var(--text); font-weight: 800; }
.um-stat { margin-top: 12px; --kc: var(--tier-a); --ki: var(--tier-a-ink); }
.um-stat.um-dur { --kc: var(--tier-c); --ki: var(--tier-c-ink); } .um-stat.um-act { --kc: var(--tier-s); --ki: var(--tier-s-ink); }
.um-stat.um-oc, .um-stat.um-stops { --kc: var(--tier-b); --ki: var(--tier-b-ink); }
.um-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.um-k { font-size: var(--fs-12); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ki); }
.um-v { font-size: var(--fs-20); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.um-v small { font-size: var(--fs-12); color: var(--text-dim); font-weight: 700; margin-left: 2px; }
.um-track { position: relative; height: 10px; border-radius: 5px; background: var(--panel-2); margin-top: 5px; }
.um-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--kc); }
.um-track u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); opacity: .6; }
.um-note { margin: 4px 0 0; font-size: var(--fs-12); color: var(--text-dim); }
.um-note:empty { display: none; }
.um-muted { margin-top: 12px; border-top: 1px dashed var(--border); opacity: .6; }
.um-mh { margin: 8px 0 0; font-size: var(--fs-12); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.um-split { display: flex; gap: 2px; height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: var(--panel-2); }
.um-split i { display: block; height: 100%; }
.um-s1 { --sw: var(--tier-b); } .um-s2 { --sw: var(--tier-c); } .um-s3 { --sw: var(--tier-s); }
.um-split i { background: var(--sw); }
.um-sl { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: var(--fs-12); color: var(--text-dim); }
.um-sl span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--sw); }
.um-vs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline; margin: 12px 0 0; font-size: var(--fs-ui); color: var(--text-dim); }
.um-vs dt { color: var(--text-faint); font-weight: 800; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; }
.um-vs dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.um-chip.um-up { border-color: var(--tier-a); color: var(--tier-a-ink); }
.um-chip.um-dn { border-color: var(--red); color: var(--red); }
.um-chip.um-ok { border-color: var(--tier-b); color: var(--tier-b-ink); }
.um-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--panel-2); font-size: var(--fs-ui); color: var(--text-dim); }
.um-open { margin: 10px 0 0; font-weight: 800; }
.um-open a { display: inline-flex; align-items: center; min-height: var(--h-md); }
.up-card .um-card > .um-read:first-child { margin-top: 0; }
.up-card .um-card > .note { margin-top: 12px; }
/* Desktop: the map view widens past the page's column (up to 1040 px) with the card beside it, sticky. */
@media (min-width: 900px) {
  .um { margin-inline: calc(50% - min(520px, 50vw - 24px)); }
  .um-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); }
  .um-uc { position: sticky; top: 72px; }
}
.um-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dim); }
.um-pick[hidden] { display: none; }
.um-pick select { flex: 1 1 200px; min-width: 0; max-width: 100%; min-height: var(--h-md); padding: 0 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 600; }

/* T-1377P (the 26 Oct review): an army page's note on its list columns, and a detachment page's questions, as closed folds. */
.ap-keyd { margin: 6px 0 0; }
.ap-keyd > summary, .det-qa > summary { cursor: pointer; color: var(--text-dim); font-weight: 700; font-size: var(--fs-ui); min-height: var(--h-md); display: flex; align-items: center; gap: 6px; list-style: none; }
.ap-keyd > summary::-webkit-details-marker, .det-qa > summary::-webkit-details-marker { display: none; }
.ap-keyd > summary::before, .det-qa > summary::before { content: "▸"; color: var(--text-faint); transition: transform 0.15s; }
.ap-keyd[open] > summary::before, .det-qa[open] > summary::before { transform: rotate(90deg); }
.det-qa { margin: 20px 0 8px; border-top: 1px solid var(--border); }
.det-qa > summary h2 { margin: 0; font-size: var(--fs-h2); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ap-keyd > summary::before, .det-qa > summary::before { transition: none; } }

/* T-1487P: the Armies page's muster (tools/build_pages.js unitsPage, docs/muster.js). [data-gs] gives --side. */
.mu { display: grid; gap: 12px; }
.mu-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 6px; }
.mu-lock .sec-mk.mu-mk { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 14px color-mix(in srgb, var(--ar2) 35%, transparent); }
.mu-lock .sec-mk.mu-mk .glyph { width: 30px; height: 30px; }
.mu-lock h1 { margin: 0; font-size: clamp(30px, 7vw, 40px); line-height: 1.02; } .mu-lock p { margin: 3px 0 0; color: var(--text-dim); }
/* the field */
.mu-fld { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 16px; overflow: hidden; background: #1b1530; }
.mu-q { position: relative; display: grid; padding: 58px 8px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--side) 34%, #1b1530), #2B2140); cursor: pointer; }
.mu-q::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.25)); pointer-events: none; }
.mu-ql { position: absolute; top: 8px; left: 11px; font: 800 19px/1.1 var(--font-head); letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0,0,0,.35); text-transform: uppercase; color: #fff; text-decoration: none; z-index: 1; }
.mu-ql em { font-style: normal; font-size: var(--fs-14); opacity: .7; margin-left: 6px; }
.mu-qf { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: space-evenly; justify-content: space-evenly; gap: 10px 6px; }
.mu-ch { line-height: 0; filter: drop-shadow(0 3px 0 rgba(0,0,0,.28)); border-radius: 4px; }
.mu-ch svg { width: calc(34px * var(--z, 1)); height: calc(34px * var(--z, 1)); image-rendering: pixelated; display: block; transition: transform .15s; }
.mu-ch:hover svg, .mu-ch:focus-visible svg { transform: translateY(-2px); } .mu-ch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 720px) { .mu-ch svg { width: calc(42px * var(--z, 1)); height: calc(42px * var(--z, 1)); } .mu-ql { font-size: 22px; } }
/* T-1488P: a champion tapped (docs/muster.js, Jordan 30 Oct): it lifts and floats in place, the others dim, and its name comes up above it as a
   button (the army's sheet) with an × beside it; a tap anywhere else, the ×, Escape or another champion puts it back. */
.mu-fld.has-sel .mu-ch:not(.sel) { opacity: .55; }
.mu-ch.sel { position: relative; z-index: 2; filter: drop-shadow(0 0 6px rgba(255,255,255,.75)) drop-shadow(0 6px 0 rgba(0,0,0,.3)); }
.mu-ch.sel svg { animation: mu-bob 1.8s ease-in-out infinite; }
@keyframes mu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .mu-ch.sel svg { animation: none; transform: translateY(-3px); } }
.mu-tag { position: absolute; z-index: 3; display: flex; width: max-content; white-space: nowrap; align-items: stretch; transform: translateX(-50%); border-radius: 999px; background: #fff; color: #0B1120;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); animation: mu-pop .18s ease-out; white-space: nowrap; }
.mu-tag::after { content: ""; position: absolute; left: var(--tip, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); }
.mu-tag button { position: relative; z-index: 1; border: 0; background: none; color: inherit; cursor: pointer; font: 800 var(--fs-14) var(--font-body); min-height: 38px; }
.mu-tag .mu-tn { padding: 0 6px 0 14px; } .mu-tag .mu-tx { padding: 0 12px 0 8px; font-size: var(--fs-16); color: #475569; border-left: 1px solid #CBD5E1; }
.mu-tag button:focus-visible { outline: 2px solid var(--ar2); outline-offset: -2px; border-radius: 999px; }
.mu-tag.below::after { bottom: auto; top: -5px; }
@keyframes mu-pop { from { opacity: 0; transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .mu-tag { animation: none; } }
.mu-hint { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); text-align: center; }
/* search, results, order */
.mu-find { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text-dim); }
.mu-find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-16); outline: none; }
.mu-res { display: grid; gap: 4px; }
.mu-res button { display: flex; justify-content: space-between; gap: 8px; text-align: left; font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; }
.mu-res small { color: var(--text-dim); }
.mu-ord { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mu-ord > span { font-size: var(--fs-sm); color: var(--text-dim); margin-right: 2px; }
.mu-ord button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: 800 13px var(--font-body); cursor: pointer; }
.mu-ord button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
/* a side's drawer */
.mu-side { border-radius: 14px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--side); overflow: hidden; scroll-margin-top: 12px; }
.mu-side > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.mu-side > summary::-webkit-details-marker { display: none; }
.mu-side h2 { margin: 0; font-size: 22px; line-height: 1; color: var(--side); } .mu-side > summary small { display: block; font-size: var(--fs-sm); color: var(--text-dim); margin-top: 3px; }
.mu-pv { display: flex; align-items: flex-end; } .mu-pv svg { width: 26px; height: 26px; image-rendering: pixelated; display: block; margin-left: -4px; }
.mu-chev { font: 800 var(--fs-20) var(--font-head); color: var(--text-dim); transition: transform .15s; } .mu-side[open] .mu-chev { transform: rotate(90deg); } .mu-side[open] .mu-pv { display: none; }
.mu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px; padding: 0 8px 10px; }
@media (min-width: 560px) { .mu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 900px) { .mu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* a banner: the side's colour falling to the panel, a notch at the foot */
.mu-bn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; height: 172px; padding: 28px 4px 0; text-align: center; text-decoration: none; color: #fff;
  border: 1px solid color-mix(in srgb, var(--side) 55%, var(--border)); border-radius: 12px 12px 0 0; clip-path: polygon(0 0, 100% 0, 100% 93%, 50% 100%, 0 93%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--side) 75%, #000) 0%, color-mix(in srgb, var(--side) 38%, var(--panel)) 58%, var(--panel) 100%); }
.mu-bn b { font: 800 var(--fs-16)/1.02 var(--font-head); text-shadow: 0 1px 0 rgba(0,0,0,.45); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto; }
.mu-bn small { font-size: var(--fs-12); font-weight: 600; opacity: .92; margin-top: 3px; }
.mu-bn .tier { position: absolute; top: 5px; right: 5px; }
.mu-fg { display: flex; align-items: flex-end; justify-content: center; align-self: end; padding-bottom: 15px; margin: 0 -4px; min-width: 0; overflow: hidden; }
.mu-fg svg { width: 28px; height: 28px; image-rendering: pixelated; display: block; } .mu-fg .mu-big svg { width: 36px; height: 36px; }
.mu-bn.on { box-shadow: inset 0 0 0 3px #fff; } .mu-bn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
/* the Titan armies: one towering engine on a steel banner with a hazard edge */
.mu-bn.ti { background: linear-gradient(180deg, #3f4652 0%, color-mix(in srgb, var(--side) 30%, #2a2f38) 60%, var(--panel) 100%); border-color: #6b7280; }
.mu-bn.ti::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(135deg, #facc15 0 6px, #1f2937 6px 12px); }
.mu-fg .mu-ti svg, .mu-sf .mu-ti svg { width: 64px; height: 64px; }
.mu-ch.ti svg { filter: drop-shadow(0 0 2px rgba(250,204,21,.55)); }
/* the army's sheet (wlkit's .wl2-ov and .wl2-sht) */
.mu-s1 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding-right: 36px; }
.mu-sf { display: flex; align-items: flex-end; } .mu-sf svg { width: 38px; height: 38px; image-rendering: pixelated; display: block; } .mu-sf .mu-big svg { width: 50px; height: 50px; }
.mu-s1 h2 { margin: 0; font-size: 26px; line-height: 1; display: flex; align-items: center; gap: 8px; } .mu-s1 small { display: block; color: var(--text-dim); margin-top: 4px; }
.mu-sht { border-top: 4px solid var(--side); }
.mu-kinds { display: flex; flex-wrap: wrap; gap: 6px; } .mu-kinds span { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); }
.mu-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mu-acts .btn.primary { grid-column: 1 / -1; text-decoration: none; }
.mu-b { display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-weight: 800; font-size: var(--fs-ui); text-decoration: none; color: var(--text); border: 2px solid var(--s1); background: color-mix(in srgb, var(--s1) 8%, var(--panel)); }
.mu-units > summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.mu-units .az-pb { padding: 0; }
.mu-nav { display: flex; justify-content: space-between; gap: 8px; } .mu-nav button { font: 800 13px var(--font-body); color: var(--text-dim); background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.mu-src { margin: 4px 0 0; font-size: var(--fs-12); color: var(--text-faint); }
/* with the script the panels live in the sheet; without it each drawer ends in them */
html.mu-js .mu .az-idx { display: none; }
html:not(.mu-js) .mu-find { display: none; }
.mu-bn .tier { background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* T-1834P: the privacy page's short version (a table) and its details, each a fold. */
.pv-sum th[scope="row"] { font-weight: 600; text-align: left; }
.pv-sum td { color: var(--text-2); }
.pv-fold { margin: 8px 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.pv-fold > summary { padding: 12px 14px; font-weight: 700; cursor: pointer; }
.pv-fold[open] > summary { border-bottom: 1px solid var(--border); }
.pv-fold > :not(summary) { margin: 12px 14px; }
/* T-1833P: the Contact us page's form, in a card of its own. */
.ct-card { margin: 18px 0; width: 100%; max-height: none; box-shadow: none; }
.ct-mail { font-size: var(--fs-lead); }
.ct-addr { user-select: all; overflow-wrap: anywhere; }
@media (max-width: 560px) {   /* a card a row on a phone, each cell named */
  .pv-sum thead { display: none; }
  .pv-sum table, .pv-sum tbody, .pv-sum tr, .pv-sum th, .pv-sum td { display: block; width: auto; }
  .pv-sum tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .pv-sum tr:last-child { border-bottom: 0; }
  .pv-sum th[scope="row"], .pv-sum td { padding: 0; border: 0; background: none; }
  .pv-sum th[scope="row"] { margin-bottom: 4px; }
  .pv-sum td { font-size: var(--fs-sm); }
  .pv-sum td::before { content: attr(data-l) ": "; font-weight: 700; color: var(--text-dim); }
}
/* T-1855P: the beta strip above a static page's header, edge to edge. */
body > .beta-strip { text-decoration: none; }   /* the calculator's margins: flush to the top, edge to edge */
/* The header pulls up by the body's padding on a PC (margin-top: -gutter above); under the strip it stays put, or it covers the strip. */
html.beta-host:not(.in-app) body > .beta-strip ~ .site-head { margin-top: 0; }
body > .beta-strip a.bs-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
body > .beta-strip .glyph { width: 14px; height: 14px; display: block; }
/* T-1858P: the Space Marines card, the codex chapters as chips beside its banner. */
.mu-codex { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px; align-items: start; }
@media (min-width: 900px) { .mu-codex { grid-column: span 3; } }
.mu-chs { display: grid; gap: 6px; padding: 6px; border: 1px solid color-mix(in srgb, var(--side) 45%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--side) 10%, var(--panel)); }
.mu-chs > small { font-size: var(--fs-12); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.mu-chs > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.mu-bn.mu-sub { height: auto; min-height: 44px; padding: 6px 30px 6px 10px; clip-path: none; border-radius: 10px; grid-template-rows: auto auto; text-align: left; align-content: center; }
.mu-bn.mu-sub b { font-size: var(--fs-14); }
.mu-bn.mu-sub small { margin-top: 1px; }
.mu-bn.mu-sub .mu-fg { display: none; }
.mu-bn.mu-sub .tier { top: 50%; transform: translateY(-50%); }
/* T-1863P: the changelog, one section per update. */
.cl-v { margin: 22px 0 0; } .cl-v h2 { margin: 0 0 8px; font-size: var(--fs-16); } .cl-v ul { margin: 0; padding-left: 20px; } .cl-v li + li { margin-top: 6px; }
/* Jordan, 9 Nov: the codex chapters' group on the field, their small figures in a pill that opens the Space Marines drawer at their card;
   the drawer's grid fills the gaps the full-width card leaves (dense). */
.mu-chg { --chg-ink: #fff; --chg-line: rgba(255,255,255,.35); --chg-bg: rgba(0,0,0,.18); --chg-bg-hi: rgba(0,0,0,.3); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px 3px; border-radius: 10px; border: 1px dashed var(--chg-line); background: var(--chg-bg); color: var(--chg-ink); text-decoration: none; line-height: 1; }
.mu-chg .mu-chf { display: flex; gap: 2px; line-height: 0; }
.mu-chg .mu-chf svg { width: 20px; height: 20px; image-rendering: pixelated; display: block; }
.mu-chg small { font: 700 var(--fs-12) var(--font-body, inherit); letter-spacing: .02em; opacity: .85; }
.mu-chg:hover, .mu-chg:focus-visible { border-color: var(--chg-ink); background: var(--chg-bg-hi); } .mu-chg:focus-visible { outline: 2px solid var(--chg-ink); outline-offset: 2px; }
@media (min-width: 720px) { .mu-chg .mu-chf svg { width: 24px; height: 24px; } }
/* The chapter chips at one height, their letter in the corner on phones too (Jordan, 9 Nov: "horribly formatted"). */
.mu-chs > div { grid-auto-rows: 1fr; }
.mu-bn.mu-sub { background: color-mix(in srgb, var(--side) 62%, #000); }
.mu-bn.mu-sub b, .mu-bn.mu-sub small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; hyphens: manual; }
@media (max-width: 559px) { .mu-chs > div { grid-template-columns: minmax(0, 1fr); gap: 5px; } .mu-bn.mu-sub { padding: 6px 40px 6px 10px; min-height: 0; align-content: center; } .mu-bn.mu-sub .tier { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); margin: 0; grid-row: auto; } .mu-bn.mu-sub b { font-size: var(--fs-14); } .mu-bn.mu-sub small { font-size: var(--fs-12); } }