/* 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{
  /* semantic palette — warm paper, light */
  --page:#F2EEE5; --sheet:#FFFDF8; --soft:#F7F2E8;
  --text:#1D2522; --muted:#58615C; --border:#8A8378; --link:#245D55;
  --action-bg:#263330; --action-fg:#FFFFFF;
  --app-bg:#DCECE7; --app-fg:#155C56;
  --game-bg:#F4E2DB; --game-fg:#854334;
  --datalink-bg:#E1EAF4; --datalink-fg:#2D5783;
  --limitation-bg:#EAE5DC; --limitation-fg:#5F584E;
  --danger-bg:#F4DEDD; --danger-fg:#8E3438;

  /* 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:#151816; --sheet:#1E2320; --soft:#262C28;
    --text:#F1EEE6; --muted:#AEB7B0; --border:#707B74; --link:#8FC9BE;
    --action-bg:#D8D2C5; --action-fg:#1A211F;
    --app-bg:#173632; --app-fg:#8BC9BE;
    --game-bg:#3B211C; --game-fg:#E2A08E;
    --datalink-bg:#1B3047; --datalink-fg:#A7C4E5;
    --limitation-bg:#302D28; --limitation-fg:#C9C0B2;
    --danger-bg:#461F20; --danger-fg:#F0A09A;
    color-scheme:dark;
  }
}
[data-theme="dark"]{
  --page:#151816; --sheet:#1E2320; --soft:#262C28;
  --text:#F1EEE6; --muted:#AEB7B0; --border:#707B74; --link:#8FC9BE;
  --action-bg:#D8D2C5; --action-fg:#1A211F;
  --app-bg:#173632; --app-fg:#8BC9BE;
  --game-bg:#3B211C; --game-fg:#E2A08E;
  --datalink-bg:#1B3047; --datalink-fg:#A7C4E5;
  --limitation-bg:#302D28; --limitation-fg:#C9C0B2;
  --danger-bg:#461F20; --danger-fg:#F0A09A;
  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. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}

/* ---- Chrome: header, nav, breadcrumbs, footer ---------------------------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  margin-bottom:14px;flex-wrap:wrap}
/* Brand meets the 44×44 touch-target rule; the tagline may wrap on a phone. */
.brand{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:44px;
  font-weight:600;letter-spacing:.5px;text-decoration:none;color:var(--text)}
.brand span{color:var(--muted);font-weight:400}
.toggles{display:flex;gap:var(--s2);align-items:center}
/* Primary controls meet the 44×44 touch-target rule (DESIGN.md §A8). */
.toggles button{background:var(--surface2);color:var(--muted);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;font:600 13px/1 var(--font-sans);
  min-height:44px;display:inline-flex;align-items:center;gap:6px}
.toggles button:hover{color:var(--text)}
/* 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}
.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(--line);background:var(--surface2);color:var(--muted)}
.lang:hover{color:var(--text)}
.lang.on{color:var(--text);border-color:var(--link)}

.nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:22px;padding:0;list-style:none}
.nav a{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:4px 12px;
  min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface2);color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}

.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:14px;overflow-wrap:anywhere}
.crumbs ol{list-style:none;margin:0;padding:0;display:inline}
.crumbs li{display:inline}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{margin:0 6px;color:var(--border)}

.foot{display:flex;flex-wrap:wrap;gap:14px;margin:var(--s6) 0 var(--s2);padding:0;padding-top:var(--s4);
  border-top:1px solid var(--line);font-size:12px;list-style:none}
.foot li{display:inline-flex}
/* Footer links meet 44×44 — short labels (e.g. Privacy) get min-width too. */
.foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}

/* ---- 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{
  width:100%;padding:10px;background:var(--surface2);color:var(--text);
  border:1px solid var(--line);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}

/* ---- 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}

/* ---- 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}
}

/* ---- 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}
}