/* apkproof — the single public stylesheet (DESIGN.md §A10).
 *
 * Field Guide exterior + Evidence Record interior, Visual foundation.
 * This file is the migration of the two former inline <style> blocks
 * (base.html + app_detail.html) onto the semantic palette, self-hosted
 * typography, and the shared spacing/width/breakpoint scales. The existing
 * class tree (.prev, .sec, .prov, .dl, .badge, …) is intentionally kept —
 * only the tokens it draws from and the rules the semantic restrictions
 * require were changed. Exact live values are recorded in DESIGN.md Part B.
 */

/* ---- Self-hosted typography (DESIGN.md §A2/§B2) --------------------------
 * Only the three weights actually used ship. Latin + Cyrillic confirmed in
 * every file; provenance/checksums in fonts/SOURCE.md. No IBM Plex Mono —
 * exact data uses the system monospace stack. The three faces use display
 * optional (no preload): a cold visit may paint the Georgia/system fallback
 * and Plex must not swap in after paint. This is a standing font-stability
 * policy — not the proven cause of the 0.2564 CLS traced in prod (that was the
 * theme-toggle reveal reflowing the header; see #theme-toggle[hidden] below).
 */
@font-face{
  font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:optional;
  src:url("fonts/IBMPlexSans-Regular.5aaadb685d3c.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:optional;
  src:url("fonts/IBMPlexSans-SemiBold.51d76d33ef85.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:optional;
  src:url("fonts/IBMPlexSerif-SemiBold.5afc89b4b496.woff2") format("woff2");
}

/* ---- Tokens (DESIGN.md §B1) ---------------------------------------------
 * :root is the LIGHT palette. With no explicit data-theme, the system
 * preference picks dark via the media query below; [data-theme="light|dark"]
 * overrides the system. color-scheme follows so form controls/scrollbars match.
 */
:root{
  /* Scopeframe semantic palette — light (DESIGN.md §A0/§A1, PR 1; measured ratios in
     Part B §5). Base tokens (text/muted/page/sheet/soft/border/link/coral) and the six
     role pairs (action/app/game/datalink/limitation/danger) are the approved mapping.
     The wordmark bracket accent is --link (header) / --footer-brand (footer, always a
     dark block) — coral is a reserved approved base accent, not yet consumed by any
     component; do not repaint the wordmark or any role pair with it speculatively. */
  --page:#F4F6FA; --sheet:#FFFFFF; --soft:#E9EEF6;
  --text:#17202C; --muted:#596578; --border:#CAD3E0; --link:#2759D7; --coral:#BD513D;
  /* PR 2C select-arrow chevron, stroke hardcoded to match --muted: `currentColor`
     inside a `background-image: url(data:image/svg+xml,...)` does NOT reliably resolve
     against the element's computed `color` (verified — it painted solid black in both
     themes), so this is a real per-theme token like every other pair above, not a
     currentColor trick. */
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23596578' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  /* A required control boundary (theme button, language/menu summary, locale links,
     form input/select/textarea) reads --control-border, not --border: --border alone
     is only 1.40:1 on --page (below the 3:1 non-text bar — Part B §5) and is reserved
     for decorative section hairlines that never carry meaning on their own. */
  --control-border:#748196;
  --action-bg:#2759D7; --action-fg:#FFFFFF;
  --app-bg:#DFEEEA; --app-fg:#1C625C;
  --game-bg:#F6E5E0; --game-fg:#984735;
  --datalink-bg:#E8E6F5; --datalink-fg:#594B8F;
  --limitation-bg:#E9EEF6; --limitation-fg:#596578;
  --danger-bg:#F7E1E5; --danger-fg:#923247;
  /* Footer is always a dark block regardless of theme (matches the approved
     reference); its ink/muted reuse the dark palette's already-verified pairs
     because the footer background stays dark in both themes. */
  --footer-bg:#17202C; --footer-ink:#F1F5FB; --footer-muted:#ABB6C8; --footer-brand:#87A9FF;

  /* legacy aliases — the existing class tree references these names; they now
     resolve to the semantic palette so no component rule had to be renamed. */
  --bg:var(--page); --surface:var(--sheet); --surface2:var(--soft);
  --line:var(--border); --mono:var(--text);
  --accent:var(--link); --accentbg:var(--datalink-bg);

  /* type families */
  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* spacing scale (px): 4 8 12 16 24 32 48 64 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* width & measure */
  --page-max:1120px; --measure:70ch;

  /* radii — small and flat */
  --radius:12px; --radius-sm:8px; --radius-xs:6px;

  color-scheme:light;
}

/* dark palette values, shared by the system-preference path and the explicit
   opt-in. Two copies because plain CSS cannot include a token set. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --page:#0F141D; --sheet:#171E29; --soft:#202A38;
    --text:#F1F5FB; --muted:#ABB6C8; --border:#344154; --link:#87A9FF; --coral:#FF9B83;
    --control-border:#697A91;
    --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ABB6C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --action-bg:#87A9FF; --action-fg:#09142D;
    --app-bg:#183733; --app-fg:#93D2C8;
    --game-bg:#3D2520; --game-fg:#FFAC97;
    --datalink-bg:#2C2843; --datalink-fg:#C5BAF3;
    --limitation-bg:#202A38; --limitation-fg:#ABB6C8;
    --danger-bg:#481F2B; --danger-fg:#F5A0B2;
    --footer-bg:#0A0E14; --footer-ink:#F1F5FB; --footer-muted:#ABB6C8; --footer-brand:#87A9FF;
    color-scheme:dark;
  }
}
[data-theme="dark"]{
  --page:#0F141D; --sheet:#171E29; --soft:#202A38;
  --text:#F1F5FB; --muted:#ABB6C8; --border:#344154; --link:#87A9FF; --coral:#FF9B83;
  --control-border:#697A91;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ABB6C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --action-bg:#87A9FF; --action-fg:#09142D;
  --app-bg:#183733; --app-fg:#93D2C8;
  --game-bg:#3D2520; --game-fg:#FFAC97;
  --datalink-bg:#2C2843; --datalink-fg:#C5BAF3;
  --limitation-bg:#202A38; --limitation-fg:#ABB6C8;
  --danger-bg:#481F2B; --danger-fg:#F5A0B2;
  --footer-bg:#0A0E14; --footer-ink:#F1F5FB; --footer-muted:#ABB6C8; --footer-brand:#87A9FF;
  color-scheme:dark;
}
[data-theme="light"]{ color-scheme:light; }

/* ---- Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);
  font:400 15px/1.5 var(--font-sans);
  -webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
a{color:var(--link)}
/* Visually hidden but exposed to assistive tech — the kind marker's optional
   translated "App"/"Game" label rides on this (DESIGN.md §A6/§A8). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Editorial serif for the field-guide voice; UI/labels stay sans (600). */
h1{margin:0 0 3px;font-family:var(--font-serif);font-weight:600;font-size:26px;line-height:1.2}
h2,h3{font-weight:600}
.lede{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:var(--measure)}

/* ---- Layout & skip link -------------------------------------------------- */
.wrap{max-width:var(--page-max);margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}
.skip-link{position:absolute;left:var(--s2);top:-48px;z-index:10;
  background:var(--sheet);color:var(--link);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 14px;text-decoration:none}
.skip-link:focus{top:var(--s2)}
main:focus{outline:none}

/* Visible keyboard focus everywhere, including native disclosures (summary) and any
   future select control (DESIGN.md §A8 focus contract). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}

/* ---- Chrome: header, nav, breadcrumbs, footer ---------------------------- */
/* Shared max-width:1120px centred inner column for a full-bleed band (header,
   footer) — the band itself spans the viewport, this only constrains its
   content to the page measure (DESIGN.md §A6, approved Scopeframe shell). */
.header-inner,.foot-inner{max-width:var(--page-max);margin:0 auto;padding-inline:var(--s5)}
/* Full-bleed paper-colour header band with a bottom divider — never a coloured
   card floating inside the page's own gutters. */
.site-header{background:var(--sheet);border-bottom:1px solid var(--border)}
/* One row at >=801px: brand, the desktop Sections nav copy, then language +
   theme, left to right — plain flex flow in DOM order (brand -> .nav--desktop
   -> .toggles -> .nav--mobile), no CSS `order`. At <=800px .nav--desktop is
   display:none and .nav--mobile (flex-basis:100%, below) takes its place on a
   second row under brand+toggles, matching the approved mobile structure.
   min-height:68px is the approved band height. */
.topbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;min-height:68px;
  padding-block:var(--s3)}
/* Brand meets the 44×44 touch-target rule. */
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
/* ---- Wordmark (DESIGN.md §A6) — one shared component, reused identically in the
   header brand and the footer brand column. Visual "apk" gets a bracket-scope
   frame in the brand colour; "proof" stays plain text colour. Decorative only —
   aria-hidden; the accessible name lives on the enclosing .brand link. The
   footer is always a dark block, so its wordmark uses --footer-brand/--footer-ink
   instead of the theme-following --link/--text (site.css §"Footer chrome"). */
.wordmark{display:inline-flex;align-items:baseline;font:600 25px/1 var(--font-sans);
  letter-spacing:-.01em;color:var(--text)}
.wordmark__apk{position:relative;margin-right:4px;padding:3px 7px;color:var(--link)}
.wordmark__apk::before,.wordmark__apk::after{content:"";position:absolute;inset-block:0;
  width:5px;border-block:2px solid var(--link)}
.wordmark__apk::before{left:0;border-left:2px solid var(--link)}
.wordmark__apk::after{right:0;border-right:2px solid var(--link)}
.foot-brand .wordmark,.foot-brand .wordmark__proof{color:var(--footer-ink)}
.foot-brand .wordmark__apk{color:var(--footer-brand)}
.foot-brand .wordmark__apk::before,.foot-brand .wordmark__apk::after{border-color:var(--footer-brand)}
.toggles{display:flex;gap:var(--s2);align-items:center}
/* Icon-only theme control: fixed 44×44 square, no visible text — the accessible
   name is the truthful localized aria-label site.js sets (DESIGN.md §A6 theme).
   Being a fixed square regardless of locale, it cannot itself change intrinsic
   width across EN/RU, which keeps the reveal-CLS contract simple. */
.theme-toggle{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;background:var(--surface2);color:var(--muted);
  border:1px solid var(--control-border);border-radius:var(--radius-sm);cursor:pointer}
.theme-toggle:hover{color:var(--text)}
.theme-toggle__glyph{font-size:18px;line-height:1}
/* Progressive-enhancement exception, NOT a general hidden pattern: the theme
   control ships native `hidden` and is revealed by JS. Reserve its exact final
   intrinsic (localized) geometry up front so the reveal cannot reflow the
   header — otherwise .topbar wraps at reveal and shifts already-painted layout.
   visibility:hidden keeps it out of the a11y tree and unfocusable until reveal. */
#theme-toggle[hidden]{display:inline-flex!important;visibility:hidden}
/* Native language disclosure — extensible to any number of locales; the summary
   shows the active one, the panel lists every real locale link (DESIGN.md §A6). */
.lang-menu{position:relative}
.lang-menu summary{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:44px;min-width:44px;padding:6px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--control-border);background:var(--surface2);color:var(--muted);
  cursor:pointer;font-size:13px;list-style:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu[open] summary{color:var(--text);border-color:var(--link)}
/* Decorative dropdown affordance only — the native disclosure marker stays
   suppressed above; this is a visible chevron, aria-hidden (DESIGN.md §A6). */
.lang-menu__chevron{font-size:10px;line-height:1}
.lang-menu__panel{position:absolute;right:0;top:calc(100% + 4px);z-index:1;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--sheet);border:1px solid var(--control-border);border-radius:var(--radius-sm)}
.lang{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:13px;padding:6px 10px;border-radius:var(--radius-sm);min-height:44px;min-width:44px;
  border:1px solid var(--control-border);background:var(--surface2);color:var(--muted)}
.lang:hover{color:var(--text)}
.lang.on{color:var(--text);border-color:var(--link)}

/* Flat text nav (DESIGN.md §A6/§A11 — the 999px pill is a rejected decorative
   target, not reused here). aria-current — "page" on the exact index/route,
   "location" on a page that lives inside that section without being it (an
   app/game detail, a typed category/tag page) — reads identically: text
   weight + a 3px brand underline, never colour alone (the approved reference
   pattern covers both states the same way). */
.nav{gap:var(--s5);flex-wrap:wrap;align-items:center;padding:0;list-style:none}
.nav a{display:inline-flex;position:relative;align-items:center;justify-content:center;gap:6px;
  font-size:14px;min-height:44px;min-width:44px;color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--text);font-weight:600}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:3px;background:var(--link)}
/* Two responsive DOM copies of the Sections nav, not one reflowed via CSS
   `order` — DESIGN.md §A6 primary nav. DOM order is brand -> nav--desktop ->
   toggles -> nav--mobile (base.html); at any width exactly one copy is
   display:flex and the other display:none, so visual, DOM, tab and AX order
   are the identical sequence at every breakpoint, and only one "Sections" nav
   landmark is ever exposed to assistive tech. Mobile (default): .nav--mobile
   is the visible copy, full-width so it wraps to its own row under
   brand+toggles. Desktop (>=801px, the approved freeze brief's shared header
   collapse point): .nav--desktop takes over, inline in the single topbar row.
   No ARIA application menu, no nested nav, no pill radius on nav links —
   controls (not nav links) may keep the small flat --radius-sm. */
.nav--desktop{display:none}
.nav--mobile{display:flex;flex-basis:100%}
@media (min-width:801px){
  .nav--desktop{display:flex;flex:1 1 auto}
  .nav--mobile{display:none}
}
.nav-menu summary{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px;
  border-radius:var(--radius-sm);border:1px solid var(--control-border);background:var(--surface2);
  color:var(--muted);cursor:pointer;font-size:13px;list-style:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu[open] summary{color:var(--text);border-color:var(--link)}
.nav-menu__panel{display:flex;flex-direction:column;gap:2px;margin-top:var(--s2)}
.nav-menu__panel a{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px;
  color:var(--muted);text-decoration:none}
.nav-menu__panel a:hover{color:var(--text)}
.nav-menu__panel a[aria-current]{color:var(--text);font-weight:600}

.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:14px;overflow-wrap:anywhere}
/* Honest flow layout, not an inline padding trick: the list wraps, each crumb link is a real
   44×44 flex box that centres its label and can wrap long RU/current text without overlapping
   neighbours (DESIGN.md §A8). The current (non-link) crumb is not a target and stays natural. */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{display:inline-flex;align-items:center;min-width:0}
.crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;
  color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{margin:0 6px;color:var(--border)}

/* Footer chrome — always a dark block regardless of theme (the approved reference's
   fixed footer-bg), so every footer text colour reads --footer-ink/--footer-muted
   rather than the theme-following --text/--muted (DESIGN.md §A6/§A1, PR 1; measured
   ratios in Part B §5: footer-ink ≥15:1, footer-muted ≥8:1 on both footer-bg values). */
/* No margin-top: .wrap already ends in var(--s8) of bottom padding before this
   full-bleed sibling band, so the gap above main content isn't doubled. */
footer{background:var(--footer-bg)}
/* The always-dark footer background fails AA against the light theme's --link
   (2.73:1, measured) — the generic focus ring above must not draw it here.
   --footer-brand is verified ≥7:1 on both footer-bg values (Part B §5). */
footer :is(a,button,summary,select):focus-visible{outline-color:var(--footer-brand)}
/* Grouped, extensible footer (DESIGN.md §A6, Guided Brief + Scopeframe target). The
   wrapper owns the single top border and the outer margin, so adding a group never
   triples them. A brand/mission column plus three link groups (Explore / Understand /
   Help & legal): 4 columns above 800px, 2 columns 521–800px, 1 column at 520px and
   below — in DOM order, no reordering. */
.foot-groups{display:grid;grid-template-columns:minmax(200px,1.3fr) repeat(3,minmax(0,1fr));
  gap:var(--s5) var(--s6);margin:0;padding-block:var(--s6);
  border-top:1px solid var(--footer-muted);color:var(--footer-ink);font-size:12px}
.foot-brand{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.foot-brand__mission{margin:0;color:var(--footer-muted);max-width:32ch;overflow-wrap:anywhere}
.foot-group{display:flex;flex-direction:column;min-width:0}
/* A visible non-link group heading — not a section heading, so it is styled here, small and
   quiet, never inheriting the serif document h2. */
.foot-group__title{margin:0;padding:6px 0;font:600 11px/1 var(--font-sans);
  text-transform:uppercase;letter-spacing:.6px;color:var(--footer-muted)}
.foot-group__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.foot-group__links li{display:flex}
/* Footer links meet 44×44 — short labels (e.g. Privacy) get min-width too. Plain
   footer-ink text, underlined on hover/current — not the theme --link blue, which
   fails AA against the always-dark footer background in the light theme. */
.foot-group__links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  color:var(--footer-ink);text-decoration:none;overflow-wrap:anywhere}
.foot-group__links a:hover,.foot-group__links a[aria-current]{text-decoration:underline}

/* ---- APP/GAME namespace marker (DESIGN.md §A6 marker) -------------------
 * Text + shape + colour, never colour alone. The visible mark is aria-hidden;
 * assistive tech gets the kind from the adjacent Apps/Games label or, where the
 * neighbour is only a name, a visually-hidden `.sr-only` "App"/"Game" (label=True
 * call sites). No redundant screen-reader noise either way. Letter is upright on
 * GAME; only the diamond behind it is rotated (a ::before, kept legible in
 * forced colors below).
 */
.kind-marker{position:relative;isolation:isolate;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;font:600 12px/1 var(--font-sans)}
.kind-marker--app{background:var(--app-bg);color:var(--app-fg);border-radius:3px}
.kind-marker--game{color:var(--game-fg)}
.kind-marker--game::before{content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--game-bg);border-radius:2px;transform:rotate(45deg)}
/* identity-header marker sits next to the 26px h1 — a touch larger. */
.head .kind-marker{width:24px;height:24px;font-size:14px}
h1 .kind-marker{width:22px;height:22px;font-size:13px;vertical-align:-3px;margin-right:6px}

/* ---- Generic card shell -------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sec{padding:var(--s5);border-top:1px solid var(--line)}
.sec:first-child{border-top:none}
.sec h2{margin:0 0 12px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}

/* ---- Badges -------------------------------------------------------------- */
/* Only the app-detail VirusTotal-flagged badge remains a badge; the directory row
   and the home legend/categories no longer use badges. `.badge` base is kept solely
   as the carrier for `.badge.vt--flagged` (app_detail.html). */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 10px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--mono)}
/* Flagged file (vt_malicious > 0): the ratio, danger-coloured. */
.badge.vt--flagged{color:var(--danger-fg);background:var(--danger-bg);border-color:transparent;font-weight:600}

/* ---- Term role label + curated-tag chips (DESIGN.md §A6/§A7) -------------
 * A PRIMARY category and a curated TAG must read as different roles by words and
 * geometry, never colour alone. The role label is a quiet uppercase eyebrow; the
 * TAG variant adds a hairline outlined small-radius rectangle. Tag chips (card
 * detail) are the same neutral outlined rectangle — a flat 6px radius, NOT the
 * decorative 999px pill and NOT a mode/trust colour. Chips are interactive links,
 * so they meet the 44px touch-target DoD (not weakened for secondary chips);
 * they wrap at 360px and stay legible in forced-colors (real border). */
.term-role{display:inline-block;margin:0 0 4px;font-size:12px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.term-role--tag{padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-xs)}
.tags{margin:10px 0 0}
.tags .term-role{margin:0 0 6px}
.tag-list{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.tag-list li{display:inline-flex}
.tag-chip{display:inline-flex;align-items:center;min-height:44px;padding:5px 12px;
  border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--surface2);
  color:var(--link);font-size:12.5px;text-decoration:none;overflow-wrap:anywhere}
.tag-chip:hover{color:var(--text)}

/* ---- Public forms (legal intake) ---------------------------------------- */
.field{margin:0 0 14px}
.field label{display:block;margin:0 0 4px;font-size:12px;color:var(--muted)}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea,
.field select{
  width:100%;padding:10px;background:var(--surface2);color:var(--text);
  border:1px solid var(--control-border);border-radius:var(--radius-xs);font:inherit;
  font-size:13px;min-height:44px}
.field input[type=checkbox]{margin-right:6px}

/* ---- Directory row (record-list) — DESIGN.md §A11 -----------------------
 * One flat warm-paper ledger row for every listing surface (home recent records,
 * /apps/, /games/, PRIMARY category, curated TAG). The `ul.card.record-list` is the
 * card shell; each `li.record-row` holds ONE full-row link. Desktop is an aligned
 * ledger (identity | scope | facts) laid out by grid auto-placement — DOM order, no
 * `order`/`grid-area` reorder. Below the shared 560px breakpoint it stacks to one
 * column in the same order (see the responsive block). Flat: hairline separators,
 * no shadow/gradient/pill/card-grid.
 */
.record-list{list-style:none;margin:0;padding:0}
.record-row{border-top:1px solid var(--line)}
.record-row:first-child{border-top:none}
.record-row__link{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,2fr);
  gap:6px var(--s4);align-items:center;padding:14px var(--s5);min-height:44px;
  text-decoration:none;color:inherit}
.record-row__link:hover{background:var(--surface2)}
/* Focus ring on all four sides, inside the clipped `.card` (negative offset), so the
   first/last rows are not clipped by the card's overflow:hidden. */
.record-row__link:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.record-row__identity{display:flex;align-items:center;gap:12px;min-width:0}
/* Placeholder avatar: flat fill, no gradient (DESIGN.md §A0). */
.record-row__icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--soft);
  border:1px solid var(--border);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:600}
/* real-icon variant: cover the box, drop the placeholder fill */
img.record-row__icon{object-fit:cover;background:var(--surface2);border:1px solid var(--line)}
.record-row__name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.record-row__sub{display:block;color:var(--muted);font-size:12.5px;font-weight:400;overflow-wrap:anywhere}
/* Scope: plain localized stamp, muted — never a badge or a trust colour. */
.record-row__scope{color:var(--muted);font-size:12.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.record-row__facts{display:flex;flex-wrap:wrap;gap:2px var(--s3);min-width:0;
  font-size:12.5px;color:var(--muted)}
.record-row__fact{min-width:0;overflow-wrap:anywhere}
.record-row__fact-label{color:var(--muted)}
/* Flagged HOST warning: danger text (the sentence + date is the carrier, not colour). */
.record-row__fact--danger{color:var(--danger-fg);font-weight:600}

/* ---- Catalogue result card (PR 2B, DESIGN.md §A6) ------------------------
 * The one shared card for /apps/, /games/, a PRIMARY category and a curated
 * TAG — distinct from the Directory Field Guide ledger (.record-row), which
 * stays home.html's own component, unchanged. `ul.result-cards` is a flat
 * grid, 2 columns above the shared 560px breakpoint and 1 column at or below
 * it (DESIGN.md §A4); each `li.result-card` holds exactly one full-card
 * `a.result-card__link` — no nested links/buttons, no download/source CTA.
 * DOM order = reading order: identity → mode/scope → facts → a decorative
 * "View details" hint inside the same link. Flat card: hairline border, flat
 * radius, no shadow/gradient.
 */
.result-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.result-card{min-width:0}
.result-card__link{display:flex;flex-direction:column;height:100%;min-width:0;
  padding:var(--s5);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--sheet);color:inherit;text-decoration:none;overflow-wrap:anywhere}
.result-card__link:hover{border-color:var(--link)}
.result-card__link:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.result-card__identity{display:flex;align-items:flex-start;gap:var(--s3);min-width:0}
.result-card__icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--soft);
  border:1px solid var(--border);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:600}
img.result-card__icon{object-fit:cover;background:var(--surface2)}
.result-card__text{min-width:0}
.result-card__title{display:flex;align-items:center;gap:6px;font-weight:600;overflow-wrap:anywhere}
.result-card__sub{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.result-card__scope{margin-top:var(--s4);color:var(--muted);font-size:12.5px;font-weight:600}
.result-card__facts{margin-top:6px;display:flex;flex-direction:column;gap:2px;
  font-size:12.5px;color:var(--muted)}
.result-card__fact{overflow-wrap:anywhere}
.result-card__fact-label{color:var(--muted)}
.result-card__fact--danger{color:var(--danger-fg);font-weight:600}
.result-card__link-hint{margin-top:auto;padding-top:var(--s4);color:var(--link);font-size:12.5px}
@media (max-width:560px){
  .result-cards{grid-template-columns:1fr}
}

/* ---- Taxonomy discovery (PR 2A, DESIGN.md §A6) ---------------------------
 * Same-kind indexable PRIMARY categories + curated TAG/task terms on a kind
 * index (/apps/, /games/), between the H1/lede and the unchanged record list.
 * One flat wrapper — border-block hairlines only, no .card/panel fill/shadow/
 * gradient/pill. Two sibling <section>s, DOM order = visual order. Either
 * group (or the whole wrapper) is entirely absent from the template when
 * empty — no CSS hides an empty heading/list here.
 */
.taxonomy-discovery{border-block:1px solid var(--border);padding-block:var(--s5);
  margin-bottom:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.taxonomy-group__title{margin:0;font:600 18px/24px var(--font-sans);color:var(--text)}
/* TAG/task reads visually quieter than PRIMARY — smaller, muted heading — role
   differs by words + weight/size, never colour alone. */
.taxonomy-group--tag .taxonomy-group__title{font:600 15px/20px var(--font-sans);color:var(--muted)}
.taxonomy-group__role{margin:4px 0 var(--s3);font-size:13px;color:var(--muted)}
.taxonomy-group__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s5)}
.taxonomy-group__list a{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);min-width:0;overflow-wrap:anywhere;text-decoration:none}
/* PRIMARY: flat ruled rows — a hairline per cell, not a card/box. */
.taxonomy-group--primary .taxonomy-group__list li{border-top:1px solid var(--border)}
.taxonomy-group--primary .taxonomy-group__list a{min-height:48px;padding-block:8px;
  font:600 15px/22px var(--font-sans);color:var(--text)}
.taxonomy-group--primary .taxonomy-group__list a:hover{color:var(--link)}
/* TAG/task: quieter still — no item border/background/radius, underlined links. */
.taxonomy-group--tag .taxonomy-group__list{gap:2px var(--s5)}
.taxonomy-group--tag .taxonomy-group__list a{min-height:44px;font:400 14px/20px var(--font-sans);
  color:var(--link);text-decoration:underline}
.taxonomy-group__arrow{color:var(--muted);flex:0 0 auto}
@media (max-width:800px){
  .taxonomy-group__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .taxonomy-discovery{padding-block:var(--s4);margin-bottom:var(--s5);gap:var(--s4)}
}
@media (max-width:520px){
  .taxonomy-group__list{grid-template-columns:1fr}
}

/* ---- Catalogue filters and sorting (PR 2C, DESIGN.md §A6) ---------------
 * One always-visible SSR GET panel on /apps/, /games/, a PRIMARY category and a
 * curated TAG page — never a collapsed <details>/<summary> gate, never a modal, no
 * behavioural JS. Reuses `.field` (label + 44px control) unchanged; adds two new
 * reusable primitives this PR introduces: `.btn`/`.btn--ghost` (neutral action
 * buttons — deliberately NOT `.dl`, which stays the claim-carrying HOST-download /
 * DATA_LINK-official-source CTA and would blur that meaning if reused here) and the
 * `.field select` arrow geometry (native select, `appearance:none` + the explicit
 * per-theme `--select-arrow` SVG token below — NOT `currentColor`: a `currentColor`
 * stroke inside a `background-image` data-URI does not resolve against the element's
 * computed colour, verified by pixel-sampling the rendered arrow).
 */
.filters{border-block:1px solid var(--border);padding-block:var(--s5);
  margin-bottom:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.filters__title{margin:0;font:600 15px/20px var(--font-sans);color:var(--text)}
/* Count-aware, not auto-fit: auto-fit's implicit column count depends on available
   width, so a 5-field row (the kind index: q/category/tag/availability/sort) still
   stranded its 5th field (Sort) alone at in-between widths (e.g. 900px). The template
   adds `.filters__grid--5` on the kind index only (5 fields); a term page always has
   exactly 4 (q + one of category/tag + availability/sort) and uses the bare class. */
.filters__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4);align-items:end}
.filters__grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.filters__field{min-width:0}
.filters__actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
/* Native select, restyled arrow only — the field's own border/height/bg is `.field`
   (unchanged). --select-arrow is a real per-theme token (see :root/dark blocks above),
   not a currentColor trick — verified that data-URI currentColor does not resolve here. */
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  color:var(--muted);padding-right:calc(var(--s5) + 4px);
  background-image:var(--select-arrow);
  background-repeat:no-repeat;background-position:right var(--s3) center;background-size:12px}
.field select:focus-visible{outline:2px solid var(--link);outline-offset:1px}
/* Neutral secondary action button — same visual language as `.theme-toggle`/`.lang`
   (surface2 fill, control-border, radius-sm), but its own class: those are chrome
   controls, this is a form action. Never the claim-carrying `.dl`. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:10px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--control-border);background:var(--surface2);color:var(--text);
  font:600 14px/1 var(--font-sans);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--link);color:var(--link)}
.btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* Ghost variant — the Reset link: quieter, no fill, only shown when a filter is
   actually applied (template-conditional, not CSS-hidden). */
.btn--ghost{background:transparent}
.filters__applied{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.filters__chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);
  background:var(--surface2);font-size:12.5px;color:var(--text)}
.filters__chip-remove{color:var(--muted);text-decoration:none;font-weight:600}
.filters__chip-remove:hover{color:var(--link)}
.filters__empty{margin:0}
@media (max-width:800px){
  .filters__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .filters__grid{grid-template-columns:1fr}
  .filters{padding-block:var(--s4);margin-bottom:var(--s5)}
}

/* ---- Home: mode legend, category rail, recent section ------------------- */
/* Two-row mode legend — a quiet list, no badges/pills. */
.mode-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mode-legend li{color:var(--muted);font-size:14px;max-width:var(--measure)}
/* Category index rail — quiet native links, marker-led, decorative arrow. */
.cat-rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.cat-rail__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--link);text-decoration:none}
.cat-rail__link:hover{color:var(--text)}
.cat-rail__name{overflow-wrap:anywhere}
.cat-rail__arrow{color:var(--muted)}
/* Recent records: its own card; the heading is the quiet uppercase eyebrow. */
.recent{margin-top:var(--s5)}
.recent__heading{margin:0 0 12px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.recent__links{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:var(--s4)}
/* Per-namespace links meet the 44×44 touch-target rule (DESIGN.md §A8), same native
   inline-flex pattern as the footer/nav links. */
.recent__links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* ==== App detail (formerly app_detail.html inline block) ================= */
.head{padding:var(--s5) var(--s5) 18px;border-bottom:1px solid var(--line);
  display:flex;gap:18px;align-items:flex-start}
/* Placeholder icon: flat fill, no gradient. */
.icon{width:64px;height:64px;border-radius:16px;background:var(--soft);border:1px solid var(--border);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:30px;font-weight:600}
img.icon{object-fit:cover;background:var(--surface2)}
.htext{flex:1;min-width:0}
.identity{display:flex;align-items:center;gap:10px}
.dev{color:var(--muted);font-size:14px;margin:8px 0 12px}
/* Links inside muted .dev/.vt text differ from surrounding text by only 1.18:1;
   underline supplies the non-colour cue WCAG requires (DESIGN.md §B a11y). */
.dev a,.vt a{color:var(--link);text-decoration:underline}
.action{padding:18px var(--s5);display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface2)}
/* HOST download: neutral primary action, not a safety colour (DESIGN.md §A7). */
.dl{background:var(--action-bg);color:var(--action-fg);border:none;border-radius:10px;
  padding:12px 20px;font:600 15px/1 var(--font-sans);cursor:pointer;min-height:44px;
  display:inline-flex;gap:9px;align-items:center;justify-content:center;text-decoration:none}
/* DATA_LINK official-source link: the DATA_LINK pair, a distinct variant. */
.dl.ext{background:var(--datalink-bg);color:var(--datalink-fg)}
/* All 64 hash chars wrap instead of clipping — the hash is the point of the card. */
.hash{font-size:12px;color:var(--muted);line-height:1.4;min-width:0;overflow-wrap:anywhere}
.hash .k{color:var(--mono)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
/* Only column headers are the uppercase eyebrow; a scope="row" version cell is a row
   header but must read as data, not a second header row. */
thead th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:last-child td,tr:last-child th{border-bottom:none}
/* Version cell (td in older markup, now th scope="row"): mono data, not bold. */
.v{font-family:var(--font-mono);color:var(--mono);font-weight:400}
/* "current" marker — neutral, the ● + version name carry it, not colour alone. */
.cur{color:var(--text);font-weight:600}
/* A version table can hold a long value; let it scroll inside the card, not the viewport. */
.table-scroll{overflow-x:auto}

/* Compatibility is text: the label is the source of truth, so there is no gauge or
   meter (a bar reads like a score, DESIGN.md §A0). */
.compat-line{font-size:13px;color:var(--muted);margin:0}
.compat-line b{color:var(--text)}

/* The full current set gets its own small heading, distinct from the section h2. */
.perms-heading{margin:16px 0 0;font-size:12px;letter-spacing:.4px;color:var(--muted);font-weight:600}
/* Current permissions are a real list. */
.perms{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:var(--s4);
  list-style:none;padding:0}
.perm{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;min-width:0;overflow-wrap:anywhere}
.perm .tag{color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto}
/* dangerous permission: a limitation note, not danger red. */
.dot.d{background:var(--limitation-fg)}

/* Permission delta is a list too; the empty single-version note is a paragraph. */
.diff{font-size:13px;line-height:1.7;list-style:none;margin:0;padding:0}
.diff.empty{color:var(--muted);margin:0}
/* Permission delta: added/removed are neutral facts, not good/bad verdicts. The
   +/− glyph carries the direction; colour only reinforces it. */
.add{color:var(--app-fg)}
.rem{color:var(--limitation-fg)}

/* .prov is retained for the legal pages (legal/_contact.html, legal/privacy.html);
   app detail now uses the native dl .evidence-list below. */
.prov{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13px;align-items:center}
.prov .lbl{color:var(--muted)}
.prov .val{font-family:var(--font-mono);color:var(--mono);word-break:break-all}

/* Evidence list — one native dl/dt/dd contract for the detail record: the fact
   summary and every label→value evidence block (signature, licence, DATA_LINK
   reference). A div.evidence-row wraps each dt/dd pair so the pair keeps valid,
   accessible dl semantics while a local grid lays it out (DESIGN.md §A6). */
.evidence-list{margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.evidence-row{display:grid;grid-template-columns:150px 1fr;gap:2px 14px;align-items:baseline}
.evidence-row dt{margin:0;color:var(--muted)}
/* dd is overflow-safe by default: any exact value (certificate subject, DATA_LINK
   publisher) wraps rather than pushing the card wider — no per-row class needed. */
.evidence-row dd{margin:0;min-width:0;color:var(--text);overflow-wrap:anywhere}
/* Exact data (hashes, certificates, packages): mono, selectable, wraps without a
   global break-all so ordinary URLs elsewhere are unaffected. */
.evidence-row dd.mono{font-family:var(--font-mono);overflow-wrap:anywhere}
.evidence-row dd.long{overflow-wrap:anywhere}
.evidence-row dd a{overflow-wrap:anywhere}

.vt{font-size:13px;color:var(--muted);line-height:1.7}

/* Text mode marker (HOST/DATA_LINK) — a plain 600 line, never a shield or trust pill. */
.mode-line{margin:0;padding:14px var(--s5) 0;font-weight:600;color:var(--muted);
  font-size:12.5px;letter-spacing:.4px}
/* iOS/App Store on DATA_LINK: a visibly secondary link, not a second primary button. */
.action-secondary{display:inline-flex;align-items:center;min-height:44px;color:var(--link);
  font-size:13.5px;text-decoration:underline}

/* Notes / callouts: neutral note, limitation (taupe), danger (real block only). */
.note{font-size:12.5px;color:var(--muted);margin-top:10px;padding:10px 12px;background:var(--surface2);
  border-radius:var(--radius-sm);border-left:3px solid var(--border)}
.note.fact{border-left-color:var(--limitation-fg)}
.note.warn-strong{border-left-color:var(--limitation-fg)}
/* Download gate: replaces the button when a file is flagged — a real danger. */
.note.danger{border-left-color:var(--danger-fg);background:var(--danger-bg);color:var(--text);
  margin-top:0;flex:1 1 100%}

/* verification guide (DATA_LINK) */
.guide h3{margin:14px 0 6px;font-size:13px;color:var(--text)}
.guide ul,.guide ol{margin:0 0 6px;padding-left:20px;font-size:13px;color:var(--muted);line-height:1.6}
.guide li{margin:3px 0}
.cmd{margin:6px 0;padding:8px 10px;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--radius-xs);font-size:12px;color:var(--mono);overflow-wrap:anywhere}

/* ---- Field Guide document shell (DESIGN.md §A6) --------------------------- */
/* One reusable folio for the standard/legal pages. The <article> is the .card; a
   strong non-decorative 4px title rule sits at the top, then a serif document h1 and a
   serif section rhythm. Reference pages (Privacy, Methodology) add a restrained TOC rail;
   task/form pages (Copyright, Suspicious) use the same shell without one. No badges,
   icons, gradients, shadows, new colours or trust states. */
.document-page{border-top:4px solid var(--text)}
.document-page__header{padding:var(--s5);border-bottom:1px solid var(--line)}
/* Responsive folio title: 32px desktop max, shrinking to 22px on phones so long RU headings
   (e.g. "Сообщить о подозрительном файле") fit at 320/360; overflow-wrap is the last-resort
   safeguard so the h1 can never be clipped by the card's overflow:hidden (DESIGN.md §A6). */
.document-page__header h1{font-size:clamp(22px,5vw,32px);overflow-wrap:anywhere}
/* The lede/intro already carries the header's bottom rhythm; drop its own trailing gap. */
.document-page__header > :last-child{margin-bottom:0}
.document-page__layout{padding:0}
/* Hold the body to the readable measure on every standard page (TOC and no-TOC alike): the
   folio header rule spans the full card, the reading column stays at --measure (DESIGN.md §A6). */
.document-page__body{min-width:0;width:100%;max-width:var(--measure)}
.document-page__body .sec h2{font-family:var(--font-serif);font-weight:600;font-size:20px;
  letter-spacing:0;text-transform:none;color:var(--text);margin:0 0 var(--s3)}
/* Native fragment orientation: keep a jumped-to heading off the viewport top, and mark
   the target with a shape (outline), not colour alone — legible under forced-colors. */
.document-page__body h2[id]{scroll-margin-top:var(--s5)}
.document-page__body h2[id]:target{outline:2px solid var(--link);outline-offset:4px;
  border-radius:var(--radius-xs)}

/* TOC rail: DOM order is header → TOC → body; the desktop grid places the rail beside
   the body without reordering the DOM. minmax(0,…) lets long values wrap, not overflow. */
.document-toc{margin:0;padding:var(--s5) var(--s5) 0}
.document-toc__title{margin:0 0 var(--s3);font-family:var(--font-sans);font-weight:600;
  font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.document-toc ol{list-style:none;margin:0;padding:0}
.document-toc a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);
  text-decoration:underline;overflow-wrap:anywhere}
@media (min-width:561px){
  .document-page__layout--with-toc{display:grid;grid-template-columns:12rem minmax(0,1fr);
    gap:0 var(--s6);align-items:start}
  /* The rail keeps its own top padding; the body owns the grid's section padding. */
  .document-toc{padding:var(--s5) 0 0 var(--s5)}
}

/* ---- Responsive: shared behaviour breakpoints (DESIGN.md §A4) ------------ */
@media (max-width:560px){
  /* Directory row stacks to one column in the same DOM order (identity → scope →
     facts) — grid auto-placement, no order/grid-area reorder. */
  .record-row__link{grid-template-columns:1fr;align-items:start}
  .perms{grid-template-columns:1fr}
  .head{flex-direction:column}
  /* Label + value stack naturally below the shared breakpoint (DESIGN.md §A4). */
  .evidence-row{grid-template-columns:1fr;gap:0}
  .evidence-row dd{margin-top:2px}
  /* 130px of label left the value column unusably narrow on a phone (legal pages). */
  .prov{grid-template-columns:1fr;gap:0}
  .prov .lbl{margin-top:10px}
  .prov .lbl:first-child{margin-top:0}
}

/* Footer reflow — its own dedicated breakpoints (DESIGN.md §A6, brand/mission +
   Explore/Understand/Help & legal): 2 columns 521–800px, 1 column at 520px and
   below, brand/mission first in DOM order either way. */
@media (max-width:800px){
  .foot-groups{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .foot-groups{grid-template-columns:1fr;gap:var(--s4)}
}

/* ---- Forced colors: keep the marker's shape legible when fills drop ------ */
@media (forced-colors:active){
  .kind-marker{border:1px solid currentColor}
  .kind-marker--game::before{background:transparent;border:1px solid currentColor}
}

/* ---- Reduced motion: the foundation ships no motion; guard defensively --- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}