/* tokens.css */
/* GTA Explorer's design tokens: mics.dev's palette and fonts (mic-web/src/styles.css), extended into a system.
   Everything else uses these; a literal colour, size or radius elsewhere is a bug to fix. */
:root {
  color-scheme: dark;

  /* ── palette (from mics.dev; do not replace) ── */
  --bg: #0a0a0f; --panel: #12121a; --panel-2: #15121f; --panel-3: #1b1826;
  --text: #ecebf3; --muted: #a09cb3; --dim: #9894ad; --faint: #8f8ba2; --white: #fff;
  --lilac: #c4b5fd; --lilac-2: #e9e4ff; --purple: #a855f7; --violet: #6d28d9;
  --line: rgba(196, 181, 253, .09); --line-2: rgba(196, 181, 253, .14); --line-3: rgba(196, 181, 253, .2);
  --grad: linear-gradient(135deg, #a855f7, #6d28d9);
  /* the pictures' backdrop, like the store's cover art */
  --art: radial-gradient(120% 95% at 50% 12%, #2d2048 0%, #1a1529 55%, #13111c 100%);

  /* ── surfaces, from the page up ── */
  --surface-0: var(--bg);        /* the page */
  --surface-1: var(--panel);     /* panels, cards, inputs */
  --surface-2: var(--panel-2);   /* raised: popovers, the sheet */
  --surface-3: var(--panel-3);   /* hover on a raised surface */
  --sunken: #0d0c13;             /* code, wells inside a panel */

  /* ── the one accent, in its states ── */
  --accent: var(--purple);
  --accent-text: var(--lilac);
  --accent-bg: rgba(168, 85, 247, .12);       /* selected */
  --accent-bg-strong: rgba(168, 85, 247, .2);
  --accent-line: rgba(168, 85, 247, .42);
  --hover: rgba(196, 181, 253, .05);          /* a quiet hover on anything */
  --hover-2: rgba(196, 181, 253, .08);

  /* ── states, muted so they sit beside the lilac ── */
  --success: #7fd1ae; --success-bg: rgba(127, 209, 174, .12);
  --warning: #e6c07b; --warning-bg: rgba(230, 192, 123, .12);
  --danger: #ef8f9f;  --danger-bg: rgba(239, 143, 159, .12);

  /* ── spacing: 4/8/12/16/24/32/48 ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ── radii: small controls, controls and panels, big panels ── */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-pill: 999px;

  /* ── heights of controls ── */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px;

  /* ── elevation ── */
  --e-1: 0 1px 2px rgba(0, 0, 0, .3);
  --e-2: 0 10px 30px -10px rgba(0, 0, 0, .55);
  --e-3: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--line-2);
  --e-glow: 0 24px 50px -24px rgba(109, 40, 217, .6);

  /* ── focus: one ring for everything a keyboard reaches ── */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(196, 181, 253, .75);

  /* ── layers ── */
  --z-nav: 10; --z-sticky: 20; --z-topbar: 25; --z-modal: 30; --z-scrim: 35; --z-drawer: 40; --z-popover: 50; --z-toast: 60;

  /* ── motion: 150–250 ms, one curve ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --d-1: 150ms; --d-2: 200ms; --d-3: 250ms;

  /* ── type ── */
  --display: 'Outfit', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --code: 'JetBrains Mono', ui-monospace, monospace;
  /* the scale (font shorthands; pair with the letter-spacing below where given) */
  --t-hero: 800 clamp(38px, 4.6vw, 62px)/1.02 var(--display);       --ls-hero: -.045em;
  --t-page: 800 clamp(30px, 3vw, 40px)/1.05 var(--display);         --ls-page: -.04em;
  --t-title: 700 22px/1.2 var(--display);                           --ls-title: -.02em;   /* a detail's name */
  --t-section: 600 17px/1.3 var(--display);                         --ls-section: -.01em; /* a block inside a page */
  --t-eyebrow: 600 13px/1.3 var(--body);                                                  /* what group a page is in */
  --t-body: 400 14px/1.55 var(--body);
  --t-body-strong: 600 14px/1.45 var(--body);
  --t-label: 600 13px/1.35 var(--body);                                                   /* controls, chips, tabs */
  --t-small: 500 12.5px/1.45 var(--body);
  --t-code: 500 13px/1.55 var(--code);
  --t-code-small: 500 12px/1.45 var(--code);

  /* ── layout ── */
  --side: 252px;
  --gutter: clamp(18px, 3vw, 44px);
}

/* the scale as classes, for markup that has no component of its own */
.t-hero { font: var(--t-hero); letter-spacing: var(--ls-hero); color: var(--white); }
.t-page { font: var(--t-page); letter-spacing: var(--ls-page); color: var(--white); }
.t-title { font: var(--t-title); letter-spacing: var(--ls-title); color: var(--white); }
.t-section { font: var(--t-section); letter-spacing: var(--ls-section); color: var(--text); }
.t-eyebrow { font: var(--t-eyebrow); color: var(--accent-text); }
.t-body { font: var(--t-body); color: var(--text); }
.t-small { font: var(--t-small); color: var(--muted); }
.t-code { font: var(--t-code); color: var(--text); }

/* base.css */
/* The page's ground rules: box model, the body type, focus, selection, scrollbars, reduced motion. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface-0); color: var(--text); font: var(--t-body); -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
a { color: inherit; }
code, kbd, pre { font-family: var(--code); }
::selection { background: rgba(168, 85, 247, .35); }
[hidden] { display: none !important; }

/* one focus ring, for the keyboard only */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
/* inside a field the field shows focus itself */
input:focus-visible, textarea:focus-visible { box-shadow: none; }

/* thin scrollbars in the lilac hairline colour */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* the first thing a keyboard reaches: straight to the page's content */
.skiplink { position: fixed; z-index: var(--z-toast); left: var(--s-3); top: var(--s-3); padding: 10px 16px; border-radius: var(--r-2); background: var(--surface-3); color: var(--white); font: var(--t-label); text-decoration: none; transform: translateY(-200%); transition: transform var(--d-2) var(--ease); }
.skiplink:focus-visible { transform: none; }
main:focus { outline: none; }

/* components.css */
/* The shared components, one implementation each. Sizes, colours and radii come from tokens.css. */

/* ── select: a button and its list (core/select.js); the native select stays, hidden, for the code ── */
.select { position: relative; display: block; min-width: 0; }
.select > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sel-btn { display: flex; align-items: center; gap: var(--s-2); width: 100%; height: var(--h-md); padding: 0 var(--s-3) 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); color: var(--text); font: var(--t-label); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.sel-btn:hover { border-color: var(--line-3); background: var(--surface-2); }
.sel-btn.open { border-color: var(--accent-line); }
.sel-btn:disabled { opacity: .5; cursor: default; }
.sel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-chev { flex: none; width: 16px; height: 16px; color: var(--dim); transition: transform var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.sel-btn.open .sel-chev { transform: rotate(180deg); color: var(--accent-text); }
/* a colour picked from a list (the garage's palettes): its dot in the button */
.select.swatched > i { position: absolute; z-index: 1; left: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; }
.select.swatched .sel-btn { padding-left: 36px; }
/* where it sits */
.tools .select { flex: 0 1 auto; min-width: 180px; max-width: 300px; }
.tools .sel-btn { height: var(--h-lg); padding-left: var(--s-4); }
@media (max-width: 900px) { .tools .select { flex: 1 1 140px; min-width: 0; max-width: none; } .tools .sel-btn { height: var(--h-md); } }
.pctl .sel-btn { height: 36px; background: rgba(10, 10, 15, .6); backdrop-filter: blur(8px); font-size: 12.5px; }
.acontrols .select { width: 96px; }

.sel-pop { position: fixed; z-index: var(--z-popover); display: flex; flex-direction: column; border-radius: var(--r-2); background: var(--surface-2); box-shadow: var(--e-3); overflow: hidden; animation: sel-in var(--d-1) var(--ease); }
.sel-pop.up { animation-name: sel-in-up; }
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sel-in-up { from { opacity: 0; transform: translateY(4px); } }
.sel-search { flex: none; display: flex; align-items: center; gap: var(--s-2); height: var(--h-md); padding: 0 var(--s-3); border-bottom: 1px solid var(--line); }
.sel-search svg { width: 15px; height: 15px; flex: none; color: var(--dim); }
.sel-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 13.5px var(--body); }
.sel-search input::placeholder { color: var(--faint); }
.sel-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.sel-group { padding: 10px 10px var(--s-1); font: var(--t-small); color: var(--faint); }
.sel-opt { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: var(--r-1); color: var(--muted); font: 500 13.5px/1.35 var(--body); cursor: pointer; }
.sel-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sel-opt.active { background: var(--hover-2); color: var(--text); }
.sel-opt.on { color: var(--white); }
.sel-opt svg { flex: none; width: 15px; height: 15px; color: var(--accent-text); }
.sel-opt.off { opacity: .45; cursor: default; }
.sel-swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sel-none { margin: 0; padding: 14px 10px; font: var(--t-small); color: var(--faint); }

/* ── buttons: primary (the main action of a view), secondary, ghost; .sm, .icon; .on when it toggles ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--h-md); padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-2); background: var(--grad); color: var(--white); font: 700 13.5px/1 var(--body); white-space: nowrap; text-decoration: none; transition: filter var(--d-2) var(--ease), background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
.btn svg { flex: none; width: 16px; height: 16px; }
.btn.secondary, .close, .garage-foot button { background: var(--surface-1); border: 1px solid var(--line-2); color: var(--text); font-weight: 600; }
.btn.secondary:hover, .close:hover, .garage-foot button:hover { filter: none; background: var(--surface-2); border-color: var(--line-3); color: var(--white); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; }
.btn.ghost:hover { filter: none; background: var(--hover-2); color: var(--text); }
.btn.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--white); }
.btn.sm { height: var(--h-sm); padding: 0 var(--s-3); font-size: 12.5px; }
.btn.icon, .close { width: var(--h-md); padding: 0; }
.btn.icon.sm { width: var(--h-sm); }
.close { display: inline-grid; place-items: center; height: var(--h-md); margin-left: auto; border-radius: var(--r-2); color: var(--muted); transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.garage-foot button { flex: 1; height: 38px; border-radius: var(--r-2); font: var(--t-label); transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease); }
pre + .btn { margin-top: var(--s-3); }

/* the floating toolbar over a 3D stage, a map or a preview */
.float { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; display: flex; gap: 2px; padding: var(--s-1); border-radius: var(--r-2); background: rgba(10, 10, 15, .66); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); }
.float button { height: var(--h-sm); padding: 0 var(--s-3); border: 0; border-radius: var(--r-1); background: none; color: var(--muted); font: var(--t-label); font-size: 12.5px; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.float button:hover { background: var(--hover-2); color: var(--text); }
.float button.on { background: var(--accent-bg-strong); color: var(--white); }

/* ── tabs: the views of one thing (a sheet's 3D / stats / image) ── */
.tabs { display: flex; flex-wrap: wrap; align-self: stretch; gap: var(--s-1); padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.tabs button { position: relative; flex: none; white-space: nowrap; height: var(--h-md); padding: 0 var(--s-3); border: 0; border-radius: 0; background: none; color: var(--dim); font: var(--t-label); font-size: 13.5px; transition: color var(--d-2) var(--ease); }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--white); }
.tabs button.on::after { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* ── segmented control: one of a few modes (2D / 3D, man / woman) ── */
.seg, .tabs:is(.small, .hsex, .maptoggle) { display: inline-flex; flex-wrap: nowrap; align-self: flex-start; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunken); }
.seg button, .tabs:is(.small, .hsex, .maptoggle) button { height: 30px; padding: 0 var(--s-3); border: 0; border-radius: 9px; background: none; color: var(--dim); font: var(--t-label); font-size: 12.5px; white-space: nowrap; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.seg button:hover, .tabs:is(.small, .hsex, .maptoggle) button:hover { color: var(--text); }
.seg button.on, .tabs:is(.small, .hsex, .maptoggle) button.on { background: var(--surface-3); color: var(--white); box-shadow: inset 0 0 0 1px var(--line-3); }
.tabs:is(.small, .hsex, .maptoggle) button.on::after { content: none; }
.maptoggle { background: rgba(10, 10, 15, .66); backdrop-filter: blur(10px); }

/* ── chips: quick searches and filters (pills); a name in code is a chip in mono ── */
.chip, .tags button, .aclips button, .lchips span { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-pill); background: none; color: var(--muted); font: 500 13px var(--body); white-space: nowrap; transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.chip:hover, .tags button:hover, .aclips button:hover { color: var(--text); border-color: var(--line-3); }
.chip.on, .tags button.on, .aclips button.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--white); }
.aclips button, .lchips span { height: auto; min-height: 28px; padding: 4px 10px; border-radius: var(--r-1); font: var(--t-code-small); white-space: normal; text-align: left; }
.tags { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--s-5); padding-bottom: 2px; scrollbar-width: none; }

/* ── toggle: a checkbox drawn as a switch ── */
/* (its size held: a row's rule for its inputs must not stretch it into a long pill) */
input[type=checkbox] { appearance: none; position: relative; flex: none; width: 34px; min-width: 34px; max-width: 34px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--line-3); cursor: pointer; vertical-align: middle; transition: background var(--d-2) var(--ease); }
input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease); }
input[type=checkbox]:checked { background: var(--accent); }
input[type=checkbox]:checked::after { transform: translateX(14px); background: var(--white); }
input[type=checkbox]:hover:not(:disabled) { filter: brightness(1.18); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--focus); }
input[type=checkbox]:disabled { opacity: .45; cursor: default; }
/* a toggle and its words: the whole line toggles it */
.fset:has(> input[type=checkbox]), label:has(> input[type=checkbox]) { cursor: pointer; }
.check { display: flex; align-items: center; gap: 10px; min-height: 34px; color: var(--text); font: 500 13.5px var(--body); cursor: pointer; }
.check small { color: var(--faint); font: var(--t-small); }

/* ── slider: the filled part in the accent (core/controls.js keeps --p), its value beside it ── */
input[type=range] { --p: 50%; appearance: none; height: 20px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line-3) var(--p)); }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(168, 85, 247, .28), var(--e-1); transition: box-shadow var(--d-2) var(--ease); }
input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(168, 85, 247, .3), var(--e-1); }
input[type=range]:focus-visible { box-shadow: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-3); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(168, 85, 247, .28); }
/* a slider with its label and value: <label class="fset">Label <input type=range><b>value</b></label> */
.fset { display: flex; align-items: center; gap: 10px; color: var(--muted); font: var(--t-label); font-size: 12.5px; }
.fset input[type=range] { flex: 1 1 110px; width: auto; min-width: 80px; }
.fset b, .pctl b, .readout { min-width: 44px; color: var(--text); font: var(--t-code-small); font-variant-numeric: tabular-nums; text-align: right; }

/* ── text inputs; .search has its icon inside ── */
:where(input:not([type]), input[type=text], input[type=number], input[type=search], textarea) { height: var(--h-md); padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); color: var(--text); font: 500 13.5px var(--body); transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
:where(input:not([type]), input[type=text], input[type=number], input[type=search], textarea):hover { border-color: var(--line-3); }
:where(input:not([type]), input[type=text], input[type=number], input[type=search], textarea):focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(168, 85, 247, .14); }
:where(input, textarea)::placeholder { color: var(--faint); }
input[type=color] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-1); background: none; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 1px solid var(--line-3); border-radius: var(--r-1); }
.search { flex: 1 1 360px; display: flex; align-items: center; gap: var(--s-3); height: var(--h-lg); padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
.search:hover { border-color: var(--line-3); }
.search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(168, 85, 247, .14); }
.search svg { flex: none; width: 18px; height: 18px; color: var(--dim); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; font: 400 15px var(--body); }
.search input:focus { box-shadow: none; }
.search kbd { flex: none; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--faint); font: 500 11px var(--code); }
@media (max-width: 900px) { .search { height: var(--h-md); } .search input { font-size: 14px; } }

/* ── list row: a name, a line about it, a badge (where it comes from) ── */
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s-3); row-gap: 2px; align-items: center; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); color: var(--text); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.lrow:hover { border-color: var(--line-3); background: var(--surface-2); }
.lrow.on { border-color: var(--accent-line); background: var(--accent-bg); }
.lrow code { font: var(--t-code); color: var(--white); overflow-wrap: anywhere; }
.lrow > span:not([class]) { grid-column: 1; font: var(--t-small); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .dlc { position: static; grid-column: 2; grid-row: 1 / span 2; justify-self: end; max-width: 170px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--hover-2); color: var(--muted); font: 500 11.5px/1.4 var(--body); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the base game is the default: only a DLC gets a badge */
.lrow .dlc.base, .card .dlc.base { display: none; }
/* a phone: the badge beside the name only, so the line under it gets the whole width */
@media (max-width: 600px) { .lrow > span:not([class]) { grid-column: 1 / -1; } .lrow .dlc { grid-row: 1; align-self: start; max-width: 46vw; } }

/* ── grid card: a picture, a title, a line about it ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s-3); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); overflow: hidden; cursor: pointer; transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
.card:hover { border-color: var(--line-3); box-shadow: var(--e-2); }
/* the card's button covers it (keyboard and screen readers open the card with it); the copy button sits above */
.card-open { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.card-open:focus-visible { box-shadow: none; }
.card:has(.card-open:focus-visible) { box-shadow: var(--focus); }
.card .art { position: relative; aspect-ratio: 4 / 3; background: var(--art); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4%; object-fit: contain; transition: transform var(--d-3) var(--ease); }
.card:hover img { transform: scale(1.03); }
/* a picture still being made: the art shimmers softly (no spinner per card) */
.card .wait { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(196, 181, 253, .07) 50%, transparent 70%) 0 0 / 250% 100%; animation: sk 1.6s linear infinite; }
.card .wait i { display: none; }
/* the picture shows once it has loaded (an image with no source yet draws a frame) */
.card img { transition: transform var(--d-3) var(--ease), opacity var(--d-3) var(--ease); }
.card .art:has(.wait) img { opacity: 0; }
.card .dlc { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 60px); padding: 3px 9px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(10, 10, 15, .6); backdrop-filter: blur(8px); color: var(--lilac-2); font: 600 11px/1.4 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.card .copy { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border: 0; border-radius: var(--r-1); background: rgba(10, 10, 15, .6); backdrop-filter: blur(8px); color: var(--text); opacity: 0; transition: opacity var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.card:hover .copy, .card:focus-within .copy, .card:has(.card-open:focus-visible) .copy { opacity: 1; }
.card .copy:hover { background: rgba(10, 10, 15, .85); }
.card .copy svg { width: 15px; height: 15px; }
.card .copy.done { color: var(--success); opacity: 1; }
.card .meta { padding: var(--s-3) 14px 14px; border-top: 1px solid var(--line); }
.card .meta b { display: block; overflow: hidden; color: var(--white); font: var(--t-code); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.card .meta b.title { font: 600 15px/1.3 var(--display); letter-spacing: -.01em; }
.card .meta span { display: block; margin-top: 2px; overflow: hidden; color: var(--dim); font: var(--t-small); text-overflow: ellipsis; white-space: nowrap; }
.card .meta code { color: var(--muted); font: var(--t-code-small); }

/* similar models under a sheet's stage: a row that scrolls and snaps */
.similar .row { display: flex; gap: var(--s-3); padding-bottom: var(--s-1); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.similar .card { flex: 0 0 178px; scroll-snap-align: start; }
.similar .card .meta { padding: 9px 12px 10px; }
.similar .card .meta b { font-size: 12px; }
.similar .card .meta span, .similar .card .dlc { display: none; }

/* a stage's picture, and a stage for a list (textures) */
.stage > img, .stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage.plain { background: var(--sunken); overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }

/* ── skeletons: the shape of what is coming, shimmering ── */
.sk { display: block; border-radius: var(--r-1); background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-3) 45%, var(--surface-1) 90%) 0 0 / 220% 100%; animation: sk 1.3s linear infinite; }
@keyframes sk { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sk-line { height: 11px; margin: 5px 0; width: 80%; font-style: normal; }
.sk-line.short { width: 45%; }
.sk-card { cursor: default; pointer-events: none; }
.sk-card .art { aspect-ratio: 4 / 3; border-radius: 0; }
.sk-row { display: block; pointer-events: none; }
.sk-detail { display: grid; gap: var(--s-2); }
.sk-title { height: 26px; width: 55%; }
.sk-block { height: 280px; margin: var(--s-3) 0; border-radius: var(--r-3); }

/* ── states: nothing found, not loaded, still reading, pick one ── */
.state { display: grid; justify-items: center; gap: 6px; padding: 72px var(--s-4); text-align: center; }
.state-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); color: var(--accent-text); }
.state-icon svg { width: 20px; height: 20px; }
.state.error .state-icon { color: var(--danger); }
.state.loading .state-icon svg { animation: spin .9s linear infinite; }
.state b { font: var(--t-section); letter-spacing: var(--ls-section); color: var(--text); }
.state p { max-width: 46ch; margin: 0; color: var(--dim); }
.state .btn { margin-top: 10px; }
.ldetail > .state { padding: 64px var(--s-4); }
/* on a phone the detail sits above the list: nothing there until a row is picked */
@media (max-width: 1000px) { .ldetail:has(> .state.pick) { display: none; } .ldetail { max-height: none; overflow: visible; } }
p.empty { padding: 40px var(--s-4); text-align: center; color: var(--dim); }
@keyframes spin { to { transform: rotate(360deg); } }
/* a 3D model on its way */
.stage .loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font: var(--t-small); }
.stage .loading.failed { color: var(--dim); }
/* a list's stage with no model to show: just the message, on the plain sunken ground */
#ldetail .stage.nomodel { height: 64px; background: var(--sunken); }
#ldetail .stage.nomodel canvas { display: none; }
.stage .loading.failed::before { content: none; }
.stage .loading::before { content: ''; width: 22px; height: 22px; border: 2px solid var(--line-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

/* ── toast: "Copied adder" ── */
/* across the whole width, centred (at left: 50% a toast could only use half the screen) */
.toasts { position: fixed; z-index: var(--z-toast); left: 0; right: 0; bottom: var(--s-5); display: grid; justify-items: center; gap: var(--s-2); padding: 0 var(--s-4); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px); padding: 10px 16px 10px 12px; border-radius: var(--r-2); background: var(--surface-3); box-shadow: var(--e-3); color: var(--text); font: var(--t-label); animation: toast-in var(--d-2) var(--ease); }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast svg { flex: none; width: 16px; height: 16px; color: var(--success); }
.toast.error svg { align-self: flex-start; margin-top: 2px; color: var(--danger); }
/* a word that went wrong is read in full: it wraps (a "Copied" stays on one line) */
.toast.error span { white-space: normal; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── detail panel: header, media, facts, code, more details ── */
.ldetail { padding: var(--s-5) var(--s-5) 28px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); max-height: calc(100vh - 40px); overflow-y: auto; }
.ldetail > h2, .sheet-head h2 { margin: 0; font: var(--t-title); letter-spacing: var(--ls-title); color: var(--white); overflow-wrap: anywhere; }
.ldetail > h2 { font-size: 24px; }
@media (max-width: 600px) { .ldetail > h2 { font-size: 20px; } .ldetail { padding: var(--s-4); } }
.ldetail .lsub { margin: 6px 0 var(--s-4); color: var(--dim); font: var(--t-small); font-size: 13px; }
/* a block inside a detail ("Use it", "Effects"): a section title, not a label */
.ldetail h3.eyebrow, .facts h3.eyebrow { margin: 28px 0 10px; font: 600 15px/1.3 var(--display); letter-spacing: -.01em; color: var(--text); }
.ldetail .stage { margin-top: var(--s-1); }

/* facts: a label, a value, a copy button; in a list's detail they sit in a grid */
.fact { position: relative; padding: 10px 40px 10px 0; border-bottom: 1px solid var(--line); }
.fact small { display: block; margin-bottom: 2px; font: var(--t-small); color: var(--dim); }
.fact p { margin: 0; font: var(--t-body); color: var(--text); overflow-wrap: anywhere; word-break: normal; }
.fact p.code { font: var(--t-code); }
.fact .cp { position: absolute; right: 0; top: 50%; width: var(--h-sm); height: var(--h-sm); display: grid; place-items: center; border: 0; border-radius: var(--r-1); background: none; color: var(--faint); transform: translateY(-50%); transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.fact .cp:hover { background: var(--hover-2); color: var(--white); }
.fact .cp svg { width: 15px; height: 15px; }
.fact .cp.done { color: var(--success); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: var(--s-5); margin: var(--s-1) 0 var(--s-2); }

/* code block: its language, a Copy button, the code wrapped and coloured */
.codeblock { margin-top: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunken); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); color: var(--faint); font: var(--t-small); }
.code-copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-1); background: none; color: var(--muted); font: var(--t-label); font-size: 12px; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.code-copy:hover { background: var(--hover-2); color: var(--white); }
.code-copy svg { width: 14px; height: 14px; }
.code-copy.done { color: var(--success); }
.codeblock pre, pre { margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: none; color: #d9d4ee; font: var(--t-code); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; tab-size: 2; }
.codeblock pre { max-height: 440px; overflow: auto; }
.c-com { color: var(--faint); font-style: italic; }
.c-str { color: #b8e3c8; }
.c-num { color: #f2c38f; }
.c-key { color: var(--lilac); }
.c-fn { color: var(--white); }
.code-old { display: none !important; }

/* "More details": folded away until asked for */
details.more { margin-top: var(--s-4); border-top: 1px solid var(--line); }
details.more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px 0; list-style: none; color: var(--muted); font: var(--t-label); cursor: pointer; transition: color var(--d-2) var(--ease); }
details.more summary:hover { color: var(--text); }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 4px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform var(--d-2) var(--ease); }
details.more[open] summary::after { transform: rotate(225deg); }

/* one frame for every 3D stage, map and preview */
.stage { position: relative; flex: 1; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--art); overflow: hidden; }

/* ── the sheet: one item over its section (vehicles, peds, weapons, clothes, objects) ── */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-5); background: rgba(5, 5, 8, .72); backdrop-filter: blur(8px); animation: fade var(--d-2) var(--ease); }
.sheet { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: min(1360px, 100%); height: min(860px, 100%); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--e-3); overflow: hidden; animation: pop var(--d-3) var(--ease); }
.sheet-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.sheet-head h2:not(.title) { font: 600 19px var(--code); letter-spacing: 0; }
.sheet-head .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font: var(--t-code); }
.origin { flex: none; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--hover-2); color: var(--muted); font: 600 12px/1.4 var(--body); letter-spacing: 0; }
.origin.dlc { background: var(--accent-bg); border-color: var(--accent-line); color: var(--lilac-2); }
.dpic { margin: var(--s-3) 0 var(--s-2); aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, var(--surface-3), var(--surface-1)); }
.dpic img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; }
.facts { overflow-y: auto; padding: var(--s-2) var(--s-5) var(--s-5); border-right: 1px solid var(--line); background: var(--surface-1); }
.side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; min-height: 0; padding: var(--s-3) var(--s-5) var(--s-5); }
.side > .tabs { margin: 0 calc(-1 * var(--s-2)); }
@media (max-width: 960px) {
  .modal { padding: 0; place-items: stretch; }
  .sheet { display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; }
  .sheet-head { position: sticky; top: 0; z-index: 3; padding: var(--s-3) var(--s-4); background: rgba(21, 18, 31, .92); backdrop-filter: blur(10px); }
  .side { order: 2; flex: none; padding: var(--s-3) var(--s-4) var(--s-4); }
  .side > .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .work { flex: none; flex-direction: column; }
  .work > .stage, .side > .stage { flex: none; height: 52vh; min-height: 280px; }
  .work > .stage:has(> .hpanel), .work > .stage.plain { height: auto; min-height: 0; }
  .hpanel { height: auto; overflow: visible; }
  .garage { flex: none; max-height: none; }
  .facts { order: 3; overflow: visible; max-height: none; padding: var(--s-2) var(--s-4) var(--s-6); border: 0; border-top: 1px solid var(--line); }
}

/* ── helper note and its info tooltip ── */
p.none, .note { margin: var(--s-2) 0; color: var(--dim); font: var(--t-small); font-size: 13px; }
.tip { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px 0 0 4px; padding: 0; vertical-align: middle; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: help; transition: color var(--d-2) var(--ease); }
.tip svg { width: 15px; height: 15px; }
.tip:hover, .tip:focus-visible { color: var(--accent-text); }
.tipbox { position: fixed; z-index: var(--z-toast); max-width: 300px; padding: 8px 12px; border-radius: var(--r-1); background: var(--surface-3); box-shadow: var(--e-3); color: var(--text); font: var(--t-small); font-size: 12.5px; line-height: 1.5; pointer-events: none; opacity: 0; transition: opacity var(--d-1) var(--ease); }
.tipbox.on { opacity: 1; }

/* ── key / value table (a timecycle's values, a train's carriages) ── */
.ltable { display: grid; gap: 2px; }
.ltable > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 7px 12px; border-radius: var(--r-1); background: var(--sunken); }
.ltable code { min-width: 0; font: var(--t-code-small); color: var(--text); overflow-wrap: anywhere; }
.ltable span { flex: none; max-width: 60%; font: var(--t-code-small); color: var(--dim); text-align: right; overflow-wrap: anywhere; }

/* ── maps inside a detail, and the map's look (Leaflet) ── */
.lmap { position: relative; height: 280px; margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); background: #0b1a26; overflow: hidden; }
.lmap.tall { height: 380px; }
.leaflet-container { background: #0b1a26; font: inherit; }
.leaflet-bar { border: 1px solid var(--line-2) !important; border-radius: var(--r-1) !important; overflow: hidden; box-shadow: var(--e-1) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: rgba(18, 18, 26, .9); color: var(--text); border-color: var(--line-2); }
.leaflet-bar a:hover { background: var(--surface-3); }
.leaflet-tooltip { padding: 4px 8px; border: 0; border-radius: 6px; background: var(--surface-3); box-shadow: var(--e-2); color: var(--text); font: var(--t-code-small); }
.leaflet-tooltip::before { display: none; }
.pin i { position: absolute; left: 3px; top: 0; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--grad); transform: rotate(-45deg); box-shadow: 0 0 0 2px var(--white), 0 6px 14px rgba(0, 0, 0, .5); }
.pin.big i { left: 1px; width: 20px; height: 20px; }

/* a 3D stage inside a detail, with its "Load it in 3D" button */
.lstage { display: grid; place-items: center; height: 420px; margin: var(--s-1) 0; }
.l3dgo { margin: 0; }
.lcut { margin: var(--s-2) 0 var(--s-3); max-width: 360px; }
/* a sound to hear */
.lsound { margin: var(--s-1) 0 var(--s-3); }
.lsound audio { width: 100%; height: 40px; }

/* ── the control panel beside a 3D stage (the garage, the wardrobe, a weapon's parts) ── */
.work { flex: 1; min-height: 0; display: flex; gap: var(--s-3); }
.garage { flex: 0 0 300px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); overflow: hidden; }
.garage-in { flex: 1; overflow-y: auto; padding: var(--s-4); }
.garage h4, .hpanel h4, .rigside h4 { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 10px; font: 600 14px/1.3 var(--display); letter-spacing: -.005em; text-transform: none; color: var(--text); }
.garage h4:not(:first-child), .rigside h4:not(:first-child) { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.garage h4 small, .rigside h4 small, .hpanel h4 small { color: var(--faint); font: var(--t-code-small); }
.garage .none { color: var(--dim); font: var(--t-small); }
.garage-foot { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.mod { margin-bottom: 10px; }
.mod > label { display: block; margin-bottom: 6px; color: var(--muted); font: var(--t-small); font-weight: 600; }
.garage .mod .fset.fm { margin: 6px 0 4px; }
/* a colour: its name, its code, a picker */
.paint { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); padding: var(--s-2) 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.paint b { flex: 1; font: var(--t-label); font-size: 13.5px; }
.paint code { color: var(--dim); font: var(--t-code-small); text-align: right; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 var(--s-2); }
.swatches button { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; transition: transform var(--d-1) var(--ease); }
.swatches button:hover { transform: scale(1.12); }
.swatches.hair { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.swatches.hair button { width: auto; height: auto; aspect-ratio: 1; border-radius: 4px; border-color: rgba(255, 255, 255, .08); }
.swatches.hair button.on { outline: 2px solid var(--white); outline-offset: 1px; }
.garage .mod .swatches.hair { margin: 6px 0 var(--s-2); }
/* toggles in a row (a vehicle's extras, its neon sides) */
.extras { display: flex; flex-wrap: wrap; gap: 6px; }
.extras button { min-width: 36px; height: var(--h-sm); padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--surface-2); color: var(--muted); font: var(--t-label); font-size: 12.5px; transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.extras button:hover { border-color: var(--line-3); color: var(--text); }
.extras button.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--white); }
.neon { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s-2); }
.plate-in { width: 100%; height: var(--h-md); margin-bottom: var(--s-2); padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-2); color: var(--text); font: 700 15px var(--code); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1100px) and (min-width: 961px) { .work { flex-direction: column; } .garage { flex: 0 0 auto; max-height: 280px; } }

/* ── sound player (core/audio.js) ── */
.player { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 var(--s-3) 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-2); }
.player[hidden] { display: none; }
.player-play { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--grad); color: var(--white); transition: filter var(--d-2) var(--ease); }
.player-play:hover { filter: brightness(1.12); }
.player-play svg { width: 14px; height: 14px; }
.player input[type=range] { flex: 1; min-width: 60px; }
.player-t, .player-d { flex: none; min-width: 40px; color: var(--muted); font: var(--t-code-small); font-variant-numeric: tabular-nums; }
.player-d { color: var(--faint); text-align: right; }
.player.err { opacity: .5; }
.player.err .player-play { background: var(--surface-3); cursor: default; }

/* ── texture grid: a model's textures on a checkerboard (objects, clothes) ── */
.texgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-4); padding: var(--s-4); }
.tex img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-2); background: repeating-conic-gradient(#15131c 0 25%, #1c1926 0 50%) 0 0 / 16px 16px; }
.tex b { display: block; margin-top: var(--s-2); color: var(--white); font: var(--t-code-small); overflow-wrap: anywhere; }
.tex span { color: var(--dim); font: var(--t-small); }
@media (max-width: 600px) { .texgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-3); } }

/* ── on a phone, two cards a row ── */
@media (max-width: 600px) {
  .grid, .grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .meta { padding: 10px 12px 12px; }
  .card .meta b.title { font-size: 14px; }
  .card .dlc { top: 8px; left: 8px; max-width: calc(100% - 16px); font-size: 10.5px; }
  .card .copy { display: none; }
}

/* ── the search over everything, and its results ── */
.gsearch { position: relative; z-index: var(--z-sticky); margin: -14px 0 22px; }
.gsearch .search { height: 44px; background: var(--surface-2); }
.gresults { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 72vh; overflow-y: auto; border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--e-3); animation: sel-in var(--d-1) var(--ease); }
.hero .gresults { right: auto; width: min(960px, calc(100vw - var(--side) - 2 * var(--gutter))); }
.gcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 var(--s-2); padding: var(--s-2); }
.ggroup { padding: var(--s-2) 0 var(--s-1); }
.ggroup h5 { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin: 0 10px 4px; color: var(--text); font: 600 13.5px var(--display); letter-spacing: -.005em; }
.ggroup h5 button { padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--dim); font: var(--t-small); font-size: 12px; transition: color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.ggroup h5 button:hover { background: var(--hover-2); color: var(--white); }
.gitem { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-1); background: none; text-align: left; }
.gitem:hover, .gitem.active { background: var(--hover-2); }
.gitem.active { box-shadow: inset 2px 0 0 var(--accent); }
.gitem b { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text); font: 500 13.5px var(--body); text-overflow: ellipsis; white-space: nowrap; }
.gitem small { flex: 0 1 auto; max-width: 45%; margin-left: auto; overflow: hidden; color: var(--faint); font: var(--t-code-small); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gitem .bicon { width: 22px; height: 22px; }
.gresults > .state { padding: 40px var(--s-4); }
.gfoot { position: sticky; bottom: 0; display: flex; gap: var(--s-4); padding: 8px var(--s-4); border-top: 1px solid var(--line); background: var(--surface-2); color: var(--faint); font: var(--t-small); font-size: 12px; }
.gfoot kbd { margin-right: 3px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; font: 500 10.5px var(--code); }
@media (max-width: 900px) { .hero .gresults { width: auto; right: 0; } .gfoot { display: none; } .gcols { grid-template-columns: minmax(0, 1fr); } }

/* ── phones: the sheet's header on two lines: the name, the arrows and close; then where it comes from ── */
.sheet-head .close { flex: none; }
@media (max-width: 600px) {
  .sheet-head { flex-wrap: wrap; gap: 6px var(--s-2); }
  .sheet-head h2 { flex: 1 1 0; order: 0; min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
  .sheet-head h2:not(.title) { font-size: 15px; }
  .sheet-head .sheet-step { order: 1; margin-left: 0; }
  .sheet-head .close { order: 2; }
  /* a line break: what follows goes under the name */
  .sheet-head::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .sheet-head .origin { order: 4; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── touch: bigger targets for the small controls (the look stays the same) ── */
@media (pointer: coarse) {
  input[type=range] { height: 32px; }
  .tip { position: relative; }
  .tip::after { content: ''; position: absolute; inset: -8px; }
  .swatches button { width: 28px; height: 28px; }
  .swatches { gap: 8px; }
  input[type=checkbox] { width: 40px; min-width: 40px; max-width: 40px; height: 24px; }
  input[type=checkbox]::after { width: 18px; height: 18px; }
  input[type=checkbox]:checked::after { transform: translateX(16px); }
}

/* ── pages: previous, numbers, next; "Page 5 of 20" on a phone ── */
.pages { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: var(--s-6); }
.pages:empty { display: none; }
.pages button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--h-md); height: var(--h-md); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-2); background: none; color: var(--muted); font: var(--t-label); font-size: 14px; font-variant-numeric: tabular-nums; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease); }
.pages button svg { width: 16px; height: 16px; }
.pages button:hover:not(:disabled) { background: var(--hover-2); color: var(--white); }
.pages button[aria-current] { border-color: var(--accent-line); background: var(--accent-bg); color: var(--white); cursor: default; }
.pages button:disabled { opacity: .35; cursor: default; }
.pages .step { padding: 0 14px; border-color: var(--line-2); }
.pages .step:first-child { margin-right: var(--s-2); }
.pages .step:last-child { margin-left: var(--s-2); }
.pages .gap { min-width: 24px; color: var(--faint); text-align: center; }
.pages .where { display: none; color: var(--muted); font: var(--t-label); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .pages { justify-content: space-between; }
  .pages .num, .pages .gap { display: none; }
  .pages .where { display: block; }
  .pages .step:first-child, .pages .step:last-child { margin: 0; }
}
/* the same pages at the top, small, at the end of the title's line */
.pagetop { display: flex; align-items: center; gap: 2px; margin-left: auto; align-self: center; }
.pagetop:empty { display: none; }
.pagetop button { display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm, 32px); height: var(--h-sm, 32px); border: 1px solid var(--line-2); border-radius: var(--r-2); background: none; color: var(--muted); transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.pagetop button svg { width: 16px; height: 16px; }
.pagetop button:hover:not(:disabled) { background: var(--hover-2); color: var(--white); }
.pagetop button:disabled { opacity: .35; cursor: default; }
.pagetop .where { min-width: 64px; padding: 0 6px; color: var(--muted); font: var(--t-label); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
/* under a list beside its detail: the pages sit under the list */
@media (min-width: 1001px) { :is(#listview, #anims):not([hidden]) ~ .pages { max-width: 460px; } }
@media (min-width: 1001px) { #listview.cards-mode:not([hidden]) ~ .pages { max-width: none; } }

/* ── a list shown as cards (IPLs, interiors, zones…): the grid's cards, each item's details in a sheet ── */
#listview.cards-mode { grid-template-columns: minmax(0, 1fr); }
#listview.cards-mode > #ldetail { display: none; }
.llist.cards { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s-3); max-height: none; padding: 0; overflow: visible; }
.card .mapart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #1d2633; transition: transform var(--d-3) var(--ease); }
.card:hover .mapart { transform: scale(1.03); }
.mapart image { opacity: .92; }
.mapart .zone { fill: rgba(168, 85, 247, .24); stroke: #d8b4fe; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mapart .road { fill: none; stroke: #d8b4fe; stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mapart .dot { fill: #e9d5ff; stroke: rgba(10, 10, 15, .75); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapart .ring { fill: rgba(168, 85, 247, .28); stroke: #d8b4fe; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.card .noart.pending svg { width: 34px; height: 34px; color: var(--line-3); }
.card .noart { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4); color: var(--faint); font: var(--t-small); text-align: center; }
.lsheet { display: flex; flex-direction: column; width: min(940px, 100%); }
.lsheet .sheet-head .close { margin-left: auto; }
.lsheet .sheet-step + .close { margin-left: var(--s-2); }
.lsheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lsheet #ldetail { max-height: none; overflow: visible; border: 0; border-radius: 0; background: none; }
/* the name is the sheet's title already */
.lsheet #ldetail > h2 { display: none; }
.lsheet #ldetail > .lsub { margin-top: 0; }
.llist.cards.compact { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
/* ── the controls: one table (header kept in view), each number and name copied with a click ── */
.llist.table { position: static; display: block; max-height: none; padding: 0; overflow: visible; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); font: var(--t-small); font-size: 13.5px; }
.ctable th { position: sticky; top: 0; z-index: 2; padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); color: var(--dim); font: var(--t-label); font-size: 12px; text-align: left; }
.ctable th:first-child { border-top-left-radius: var(--r-3); } .ctable th:last-child { border-top-right-radius: var(--r-3); }
.ctable td { padding: 6px 14px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable tbody tr { cursor: pointer; transition: background var(--d-2) var(--ease); }
.ctable tbody tr:hover { background: var(--hover-1, rgba(255, 255, 255, .03)); }
.ctable .cidx { width: 84px; } .ctable .copen { width: 1%; text-align: right; }
.ctable [data-copy] { display: inline-flex; align-items: center; gap: 8px; padding: 3px 6px; margin: 0 -6px; border: 0; border-radius: var(--r-1); background: none; color: var(--white); font: var(--t-code); font-size: 13px; text-align: left; cursor: copy; }
.ctable .cidx [data-copy] { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ctable [data-copy] svg { width: 13px; height: 13px; flex: none; color: var(--dim); opacity: 0; transition: opacity var(--d-2) var(--ease); }
.ctable [data-copy]:hover { background: var(--hover-2); } .ctable [data-copy]:hover svg, .ctable [data-copy]:focus-visible svg { opacity: 1; }
.ctable kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--sunken); color: var(--text); font: 500 12px var(--code); text-align: center; white-space: nowrap; }
.ctable .none { color: var(--faint); }
.ctable .copen-b { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: none; color: var(--muted); font: var(--t-label); font-size: 12px; white-space: nowrap; }
.ctable .copen-b svg { width: 14px; height: 14px; }
.ctable tr:hover .copen-b, .ctable .copen-b:focus-visible { border-color: var(--accent-line); color: var(--white); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* a phone: each control on two lines (number and name; its keys and the code) */
@media (max-width: 700px) {
  .ctable, .ctable tbody { display: block; } .ctable thead { display: none; }
  .ctable tbody tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .ctable td { padding: 0; border: 0; } .ctable .cidx { width: auto; }
  .ctable .cname { grid-column: 2 / 4; min-width: 0; } .ctable .cname [data-copy] { max-width: 100%; overflow-wrap: anywhere; }
  .ctable .cpc { grid-column: 1 / 3; grid-row: 2; } .ctable .cpad { grid-row: 2; grid-column: 3; text-align: right; }
  .ctable .copen { display: none; }
  .ctable [data-copy] svg { opacity: 1; }
}
/* a picture of its own: a texture, a portrait, a font's letters (a small one kept at its size, not blown up) */
.card .art > .pic { padding: 8%; object-fit: contain; }
/* a picture with its own background (an effect mid-play): the whole picture area */
.card .art > img.fill { padding: 0; object-fit: cover; }
.card .art > .pic.fit { padding: 12%; }
.card .art > .pic.portrait { padding: 4% 4% 0; object-position: bottom; }
.card .art > .pic.font { padding: 10% 6%; filter: invert(1) brightness(.92); }
.card .mosaic { position: absolute; inset: 0; display: grid; gap: 6px; padding: 10%; }
.card .mosaic.n2 { grid-template-columns: 1fr 1fr; }
.card .mosaic.n3, .card .mosaic.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.card .mosaic img { position: static; width: 100%; height: 100%; min-height: 0; padding: 0; object-fit: contain; }
/* before and after: the original, the filtered picture over it cut at the divider (--x), the divider and its knob */
.card .cmp { position: absolute; inset: 0; overflow: hidden; --x: 50%; }
.card .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; object-fit: cover; }
.card:hover .cmp img { transform: none; }
.card .cmp .cmp-b { clip-path: inset(0 0 0 var(--x)); }
.cmp-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x); width: 28px; margin-left: -14px; cursor: ew-resize; touch-action: none; }
.cmp-line::before { content: ''; position: absolute; top: 0; bottom: 0; left: 13px; width: 2px; background: var(--white); box-shadow: 0 0 6px rgba(0, 0, 0, .55); }
.cmp-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--white); color: #15121f; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); transition: transform var(--d-2) var(--ease); }
.cmp-knob svg { width: 18px; height: 18px; }
.cmp-line:hover .cmp-knob, .cmp.dragging .cmp-knob { transform: scale(1.1); }
.cmp-line:focus-visible { outline: none; } .cmp-line:focus-visible .cmp-knob { box-shadow: var(--focus); }
.cmp-tag { position: absolute; bottom: 8px; padding: 2px 7px; border-radius: var(--r-pill); background: rgba(10, 10, 15, .62); color: var(--text); font: 500 10.5px var(--body); pointer-events: none; }
.cmp-tag.a { left: 8px; } .cmp-tag.b { right: 8px; }
.card .swatchart { position: absolute; inset: 0; display: grid; place-items: center; }
/* a see-through colour shows on a checkerboard */
.card .swatchart i { width: 56%; aspect-ratio: 1; border-radius: var(--r-3); background-color: transparent; box-shadow: 0 0 0 1px var(--line-2), var(--e-2); }
.card .swatchart::before { content: ''; position: absolute; width: 56%; aspect-ratio: 1; border-radius: var(--r-3); background: repeating-conic-gradient(#2a2638 0 25%, #1c1928 0 50%) 0 0 / 16px 16px; }
.card .swatchart i { position: relative; }
.card .svgart { position: absolute; inset: 0; display: grid; place-items: center; }
.card .svgart svg { width: 42%; height: auto; max-height: 64%; }
/* a sound: its waveform, ▶ in the middle, its length; while it plays the bars fill up to where it is */
.card .wave { position: absolute; inset: 0; display: grid; place-items: center; padding: 18% 8%; --p: 0%; }
.wave .peaks { position: absolute; inset: 18% 8%; width: 84%; height: 64%; fill: var(--line-3); }
.wave:not(.drawn) .peaks:not(.top) { background: linear-gradient(var(--line-2), var(--line-2)) center / 100% 2px no-repeat; }
.wave .peaks.top { fill: var(--accent-text); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.wave .play { position: relative; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--accent-line); border-radius: 50%; background: rgba(21, 18, 31, .82); backdrop-filter: blur(6px); color: var(--white); transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.wave .play svg { width: 20px; height: 20px; }
.wave .play:hover { transform: scale(1.06); background: var(--accent); }
.wave.playing .play { background: var(--accent); border-color: transparent; }
.wave .dur { position: absolute; right: 10px; bottom: 8px; color: var(--dim); font: var(--t-code-small); font-variant-numeric: tabular-nums; }
.wave.none, .wave .why { color: var(--faint); font: var(--t-small); text-align: center; }
.wave .why { position: absolute; inset: auto 8px 10px; }
.card.sounding { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
@media (max-width: 600px) { .llist.cards, .llist.cards.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lsheet-body { overflow: visible; } .wave .play { width: 42px; height: 42px; } }

/* hair colour picker, two controls side by side, a small segmented control's gap, a slider row in a detail */
.hairpick { margin-bottom: 12px; }
.hairpick label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.hairpick label code { color: var(--dim); font: 500 11px var(--code); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tabs.small { margin-bottom: 10px; }
.ldetail .fset { margin: 10px 0; }
.ldetail .fset input:not([type]) { width: auto; flex: 1; height: 34px; padding: 0 10px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--sunken); color: var(--text); font: 500 13px var(--body); }

/* ── stepping through the grid from the sheet: ‹ 3 of 48 › before the close button ── */
.sheet-step { flex: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sheet-step + .close { margin-left: var(--s-2); }
.sheet-step button { display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); padding: 0; border: 0; border-radius: var(--r-1); background: none; color: var(--muted); transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.sheet-step button:hover:not(:disabled) { background: var(--hover-2); color: var(--white); }
.sheet-step button:disabled { opacity: .35; cursor: default; }
.sheet-step svg { width: 16px; height: 16px; }
.sheet-step span { min-width: 64px; color: var(--dim); font: var(--t-small); font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 600px) { .sheet-step span { display: none; } }

/* world.css */
/* World: the map, zones, scenario points, population, ambient zones. */

/* the map page: the map, and its side panel */
.mapwrap { position: relative; }
.mapbox { height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--r-3); background: #0b1a26; overflow: hidden; }
.mapbox[hidden] { display: none; }
.mapside { position: sticky; top: 20px; }
.mapside .check { min-height: 32px; }
.mapside .fset { margin-top: var(--s-3); }
.mapside .codeblock + .codeblock, .mapside .fset + .codeblock { margin-top: var(--s-3); }
@media (max-width: 900px) { .mapbox { height: 60vh; min-height: 360px; } }

/* zones and streets */
.zmap { height: 360px; }

/* scenario points: the points to pick */
.sprows { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.sprows button { display: flex; justify-content: space-between; gap: var(--s-3); width: 100%; padding: 7px 12px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--sunken); color: var(--muted); font: var(--t-small); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.sprows button code { font: var(--t-code-small); color: var(--text); }
.sprows button:hover { border-color: var(--line-2); }
.sprows button.on { border-color: var(--accent-line); background: var(--accent-bg); }

/* who lives in a zone: its schedules, their ped and car groups */
.poph { margin: var(--s-4) 0 var(--s-2); font: 600 14px var(--display); color: var(--text); }
.poph small { margin-left: 6px; color: var(--faint); font: var(--t-small); }
.popcols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.popcols h5 { margin: 0 0 6px; font: var(--t-small); font-weight: 600; color: var(--muted); }
.popg { margin-bottom: 4px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--sunken); }
.popg summary { position: relative; display: flex; justify-content: space-between; gap: var(--s-2); padding: 7px 10px; overflow: hidden; list-style: none; cursor: pointer; font: 500 12.5px var(--body); }
.popg summary::-webkit-details-marker { display: none; }
.popg summary i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); }
.popg summary span { color: var(--muted); font: var(--t-code-small); }
.popg .lchips { padding: 0 10px 10px; }
@media (max-width: 900px) { .popcols { grid-template-columns: 1fr; } }

/* ambient zones: what each rule plays */
.arule { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; align-items: center; margin-bottom: 2px; padding: 7px 12px; border-radius: var(--r-1); background: var(--sunken); }
.arule code { display: block; overflow: hidden; text-overflow: ellipsis; font: var(--t-code-small); color: var(--text); }
.arule span { color: var(--dim); font: var(--t-small); }
.arule audio { width: 100%; height: 32px; }
@media (max-width: 900px) { .arule { grid-template-columns: 1fr; } }

/* the map page: map + side panel; the weather drawn over the 3D map */
.mapview { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.mapview[hidden] { display: none; }
.maptoggle { position: absolute; top: 14px; right: 14px; z-index: 500; }
.wxfx { position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; }
.wxfx.rain { background-image: repeating-linear-gradient(105deg, rgba(200, 215, 235, .0) 0 6px, rgba(200, 215, 235, .16) 6px 7px, rgba(200, 215, 235, 0) 7px 22px); background-size: 140px 140px; animation: rain .35s linear infinite; }
.wxfx.snow { background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 80px 120px, #fff, transparent), radial-gradient(1.5px 1.5px at 140px 60px, #fff, transparent), radial-gradient(2px 2px at 200px 160px, #fff, transparent); background-size: 240px 240px; animation: snow 6s linear infinite; opacity: .8; }
.wxfx.thunder { animation: rain .35s linear infinite, flash 7s infinite; }
@keyframes rain { to { background-position: -40px 140px; } }
@keyframes snow { to { background-position: 40px 240px; } }
@keyframes flash { 0%, 91%, 94%, 100% { background-color: transparent; } 92%, 95% { background-color: rgba(255, 255, 255, .28); } }
@media (max-width: 1100px) { .mapview { grid-template-columns: 1fr; } }

/* vehicles.css */
/* Vehicles: the sheet's handling and seats panels. */

/* handling: the game's bars against the best of its class, the numbers, its horn */
.hpanel { width: 100%; height: 100%; overflow-y: auto; padding: var(--s-4) var(--s-5); }
.hhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hhead h4 { margin: 0; }
.hcmp { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font: var(--t-small); font-weight: 600; }
.hcmp input { width: 180px; height: var(--h-sm); }
.hlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 14px; color: var(--muted); font: var(--t-code-small); }
.hlegend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
.hlegend button { padding: 0 4px; border: 0; background: none; color: var(--faint); cursor: pointer; }
.hlegend button:hover { color: var(--text); }
.hbar { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-3); align-items: center; margin-bottom: 10px; }
.hbar span { color: var(--text); font: var(--t-label); font-size: 13.5px; }
.hbar small { display: block; color: var(--faint); font: var(--t-code-small); font-size: 10.5px; }
/* room at the end of the track for the value of a full bar */
.hbar > div { display: grid; gap: 3px; padding-right: 40px; }
.hbar i { position: relative; display: block; min-width: 2px; height: 14px; border-radius: 4px; }
.hbar i b { position: absolute; left: calc(100% + 6px); top: -1px; color: var(--muted); font: var(--t-code-small); white-space: nowrap; }
.hfacts { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--s-5); margin: var(--s-3) 0; }
.hsound { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; }
.hsound b { flex: none; width: 70px; font: var(--t-label); }
.hsound .player { flex: 1; }
@media (max-width: 700px) { .hbar { grid-template-columns: 1fr; gap: 4px; } .hfacts { grid-template-columns: 1fr; } }

/* seats, doors and bones: on the model, with their numbers */
.rigrows { display: grid; gap: 2px; margin-bottom: var(--s-3); }
.rigrows.bones { max-height: 260px; overflow-y: auto; }
.rigrows button { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s-2); align-items: center; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--sunken); color: var(--text); font: var(--t-small); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.rigrows.bones button { grid-template-columns: 52px 1fr; }
.rigrows button:hover { border-color: var(--line-2); }
.rigrows button.on { border-color: var(--accent-line); background: var(--accent-bg); }
.rigrows b { color: var(--accent-text); font: var(--t-code-small); font-weight: 600; }
.rigrows code { color: var(--muted); font: var(--t-code-small); font-size: 11px; }
.rigfind { width: 100%; height: var(--h-sm); margin-bottom: 6px; }
.riglabel { position: absolute; left: 0; top: 0; margin: -22px 0 0 6px; padding: 1px 6px; border-radius: 4px; background: rgba(10, 8, 18, .75); color: var(--white); font: 600 10.5px var(--code); white-space: nowrap; pointer-events: none; }
.riglabel.on { background: var(--violet); }
.riglabel[hidden] { display: none; }

/* characters.css */
/* Characters: animations and bones (list + player), the wardrobe's textures, tattoos, heritage, damage, relationships. */

/* a list beside a player (animations, bones) */
.anims { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 20px; align-items: start; }
.anims[hidden] { display: none; }
.amodes { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--s-1); }
.alist { display: grid; gap: 6px; min-width: 0; }
/* the dictionaries as cards; the player in a sheet over them */
#anims.cards-mode { grid-template-columns: minmax(0, 1fr); }
#anims.cards-mode > #aplayer { display: none; }
.alist.cards { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s-3); }
.asheet #aplayer { position: static; padding: var(--s-5) var(--s-5) 0; }
.asheet #aplayer .stage { height: min(54vh, 560px); }
.asheet-clips { padding: 0 var(--s-5) var(--s-5); }
@media (max-width: 600px) { .alist.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .asheet #aplayer, .asheet-clips { padding-left: var(--s-4); padding-right: var(--s-4); } }
.adict { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); overflow: hidden; transition: border-color var(--d-2) var(--ease); }
.adict:hover { border-color: var(--line-3); }
.adict.open { border-color: var(--line-3); background: var(--surface-2); }
.ahead { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: none; color: var(--text); text-align: left; }
.ahead code { font: var(--t-code); color: var(--text); overflow-wrap: anywhere; }
.ahead:hover code, .adict.open .ahead code { color: var(--white); }
.ahead span { flex: none; display: flex; align-items: center; gap: var(--s-2); color: var(--dim); font: var(--t-small); }
.ahead .dlc { position: static; padding: 2px 8px; border-radius: var(--r-pill); background: var(--hover-2); color: var(--muted); font: 500 11px/1.4 var(--body); font-style: normal; }
.ahead .dlc.base { display: none; }
.aclips { display: flex; flex-wrap: wrap; gap: 6px; }
/* a dictionary's clips show when it is opened */
.adict .aclips { display: none; padding: 0 12px 12px; }
.adict.open .aclips { display: flex; }
.aplayer { position: sticky; top: 20px; min-width: 0; }
.aplayer .stage { height: min(62vh, 640px); }
.acontrols { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); }
.acontrols input[type=range] { flex: 1; }
.acontrols span { min-width: 64px; color: var(--muted); font: var(--t-code-small); font-variant-numeric: tabular-nums; }
.aplay { flex: none; display: grid; place-items: center; width: var(--h-md); height: var(--h-md); border: 0; border-radius: 50%; background: var(--grad); color: var(--white); transition: filter var(--d-2) var(--ease); }
.aplay:hover { filter: brightness(1.12); }
.aplay svg { width: 16px; height: 16px; }
.ainfo { display: flex; flex-direction: column; gap: 3px; margin-top: var(--s-4); }
.ainfo b { font: var(--t-section); letter-spacing: var(--ls-section); color: var(--white); overflow-wrap: anywhere; }
.ainfo span { color: var(--dim); font: var(--t-code-small); overflow-wrap: anywhere; }
.aflags { margin-top: var(--s-3); }
.blist { position: sticky; top: 20px; display: grid; gap: 2px; min-width: 0; max-height: calc(100vh - 140px); padding-right: var(--s-1); overflow-y: auto; }
.bone { display: grid; grid-template-columns: 1fr auto 58px 66px; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--surface-1); color: var(--text); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.bone code { font: var(--t-code-small); font-size: 12.5px; overflow-wrap: anywhere; }
.bone span { color: var(--muted); font: var(--t-small); font-size: 11.5px; }
.bone b, .bone i { color: var(--dim); font: var(--t-code-small); font-style: normal; text-align: right; }
.bone:hover { border-color: var(--line-3); }
.bone.on { border-color: var(--accent-line); background: var(--accent-bg); }
.bone.on code { color: var(--white); }
@media (max-width: 1000px) { .anims { grid-template-columns: 1fr; } .aplayer, .blist { position: static; } .aplayer { order: -1; } .blist { max-height: 60vh; } #anims:not(.picked) .aplayer { display: none; } }

/* a piece's textures, to pick one */
.texlist { display: grid; gap: 4px; }
.texlist button { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); color: var(--muted); font: var(--t-label); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.texlist button b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-1); background: var(--sunken); color: var(--text); font: var(--t-code-small); }
.texlist button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texlist button code { color: var(--faint); font: var(--t-code-small); }
.texlist button:hover { border-color: var(--line-3); color: var(--text); }
.texlist button.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--white); }

/* tattoos: the design on a soft light ground (they are dark ink on nothing) */
.ticon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-1); background: #d6d0e6; overflow: hidden; }
.ticon img { max-width: 100%; max-height: 100%; }
.tatwrap { display: grid; grid-template-columns: 1fr 160px; gap: var(--s-3); align-items: start; }
.tattex { margin: var(--s-1) 0 0; padding: 10px; border-radius: var(--r-2); background: #d6d0e6; text-align: center; }
.tattex img { width: 100%; }
.tattex figcaption { margin-top: 6px; color: #3b2d63; font: var(--t-code-small); font-size: 10.5px; overflow-wrap: anywhere; }
@media (max-width: 700px) { .tatwrap { grid-template-columns: 1fr; } .tattex { max-width: 200px; } }

/* heritage: portraits to pick, the mix, the face features */
.hicon { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 6px; border-radius: var(--r-1); background: var(--sunken); overflow: hidden; }
.hicon img { width: 100%; height: 100%; object-fit: cover; }
.hmix { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.hmix .lstage { height: 360px; }
.hctl { display: grid; gap: var(--s-3); }
.hsex { justify-self: start; }
.hparents { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 14px; }
.hparents button { padding: 0; border: 2px solid transparent; border-radius: var(--r-2); background: var(--sunken); color: var(--muted); overflow: hidden; cursor: pointer; transition: border-color var(--d-2) var(--ease); }
.hparents button:hover { border-color: var(--line-3); }
.hparents button.on { border-color: var(--accent-text); color: var(--text); }
.hparents img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.hparents span { display: block; padding: 2px 0 3px; overflow: hidden; font: 600 9.5px var(--body); text-overflow: ellipsis; white-space: nowrap; }
.hfeat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px var(--s-4); }
.hfeat .fset span { min-width: 150px; font-size: 12px; }
@media (max-width: 900px) { .hmix { grid-template-columns: 1fr; } }

/* damage: a decal's textures */
.decals { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.decals img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--r-2); background: repeating-conic-gradient(#2a2a33 0 25%, #1d1d24 0 50%) 0 0 / 16px 16px; }

/* relationships: how a group feels, in the state colours */
/* a relation's badge (inside .ltable, whose plain span style it overrides) */
.ltable .rel { padding: 1px 9px; border-radius: var(--r-pill); font: 600 11.5px/1.6 var(--body); }
.rel.rel-hate { background: var(--danger-bg); color: var(--danger); }
.rel.rel-dislike { background: var(--warning-bg); color: var(--warning); }
.rel.rel-like { background: var(--success-bg); color: var(--success); }
.rel.rel-respect { background: rgba(125, 211, 252, .12); color: #9fd8f7; }
.rel.rel-companion { background: var(--accent-bg); color: var(--lilac-2); }
.rel.rel-neutral { color: var(--muted); }

/* the sheet's header on a phone: the name and the origin, not the model */
@media (max-width: 600px) { .sheet-head .sub { display: none; } .sheet-head h2.title { font-size: 19px; } }

/* heritage: the two parents and the mix */
.hpair { display: flex; align-items: center; gap: 10px; }
.hpair figure { flex: 1; margin: 0; text-align: center; }
.hpair img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-2); background: var(--sunken); }
.hpair figcaption { font: 600 12px var(--body); color: var(--muted); margin-top: 4px; }
.hpair > span { font: 700 18px var(--display); color: var(--faint); }
/* a relationship group: its two lists side by side (one under the other on a phone), the badges centred on the row */
.relcols { column-gap: var(--s-5); }
.relcols .ltable > div { align-items: center; }

/* weapons.css */
/* Weapons: the stats' numbers against others, a pickup's glow. */
.wnums { display: grid; grid-template-columns: 150px repeat(var(--n), minmax(0, 1fr)); gap: 6px var(--s-3); margin: 6px 0 18px; padding: var(--s-3) 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunken); font: var(--t-small); font-size: 13px; }
.wnums > span { color: var(--muted); font-weight: 600; }
.wnums > b { overflow: hidden; color: var(--accent-text); font: var(--t-label); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wnums code { color: var(--text); font: var(--t-code-small); }
.pglowrow { display: flex; align-items: center; gap: var(--s-2); margin: 10px 0; color: var(--muted); font: var(--t-small); }
.pglow { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
@media (max-width: 600px) { .wnums { grid-template-columns: 120px repeat(var(--n), minmax(0, 1fr)); } }

/* objects.css */
/* Objects: where one stands in the world. */
.oplaces { display: grid; gap: 2px; margin: var(--s-2) 0; }
.oplaces button { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--sunken); color: var(--text); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.oplaces button:hover { border-color: var(--line-2); }
.oplaces button code { color: var(--text); font: var(--t-code-small); }
.oplaces button span { overflow: hidden; color: var(--muted); font: var(--t-code-small); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.oplaces button.on { border-color: var(--accent-line); background: var(--accent-bg); }

/* similar models under the sheet's stage: a section title like the others */
.similar .eyebrow { margin-bottom: 10px; font: 600 15px/1.3 var(--display); letter-spacing: -.01em; color: var(--text); }

/* audio.css */
/* Audio: what is playing, a station's tracks, a voice's lines. */
.nowplaying { margin: 0 0 6px; min-height: 18px; color: var(--muted); font: var(--t-code-small); overflow-wrap: anywhere; }
.lsound > b { display: block; margin: var(--s-2) 0 6px; color: var(--text); font: var(--t-label); }

/* radio: its tracks, by kind */
.rtracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.rtracks button { display: flex; align-items: center; gap: var(--s-2); padding: 8px 12px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--sunken); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.rtracks button:hover { border-color: var(--line-2); }
.rtracks button.on { border-color: var(--accent-line); background: var(--accent-bg); }
.rtracks b { overflow: hidden; color: var(--text); font: var(--t-label); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rtracks small { margin-left: auto; color: var(--faint); font: var(--t-code-small); font-size: 11px; }

/* voices: lines by context, each line a small numbered button */
.vctx { display: grid; gap: 4px; }
.vctx > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-radius: var(--r-1); background: var(--sunken); }
.vctx b { flex: 1 1 100%; margin-bottom: 2px; color: var(--text); font: var(--t-code-small); font-weight: 600; }
.vctx button { min-width: 32px; height: 26px; border: 1px solid var(--line-2); border-radius: 6px; background: none; color: var(--dim); font: var(--t-code-small); font-size: 11px; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.vctx button:hover { border-color: var(--line-3); color: var(--text); }
.vctx button.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--white); }

/* a link inside a sentence */
.linkish { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkish:hover { color: var(--lilac-2); }

/* effects.css */
/* Visual effects: the picture a filter is shown on, and how to step through the pictures. */
.fprev .fscene { left: auto; right: var(--s-3); bottom: var(--s-3); align-items: center; z-index: 3; }
.fscene span { min-width: 92px; padding: 0 4px; color: var(--text); font: var(--t-label); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.fscene button { display: grid; place-items: center; width: var(--h-sm); padding: 0; }
.fscene svg { width: 15px; height: 15px; }

/* the filtered picture: the original under the filter, a hidden slider across it to compare */
.fprev { position: relative; margin: var(--s-1) 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-3); background: #000; }
.fprev canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.fsplit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ftag { position: absolute; top: 10px; padding: 3px 9px; border-radius: var(--r-1); background: rgba(10, 10, 15, .65); backdrop-filter: blur(8px); color: var(--text); font: var(--t-label); font-size: 11.5px; pointer-events: none; }
.ftag.a { left: 10px; } .ftag.b { right: 10px; }
/* play / fade out, how far it has gone, its timing */
.ftrans { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 10px; }
.ftrans .aplay { width: 36px; height: 36px; }
.fbtn { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); color: var(--text); font: var(--t-label); transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease); }
.fbtn:hover { border-color: var(--line-3); background: var(--surface-2); }
.fbar { flex: 1; min-width: 80px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line-3); }
.fbar i { display: block; width: 100%; height: 100%; background: var(--accent); }
.ftime { color: var(--dim); font: var(--t-code-small); font-variant-numeric: tabular-nums; }
.fset input:not([type=checkbox]) { width: 110px; }
.fset.fm { margin: var(--s-1) 0 10px; }
.fset.fm span { min-width: 82px; }
.fset.fm input:not([type=checkbox]) { flex: 1; width: auto; }

/* particles: the stage, its glass controls, what it plays, the textures */
.ptfxstage { height: 380px; margin: var(--s-1) 0 14px; }
.pctl { position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3); right: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pctl label { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-2); background: rgba(10, 10, 15, .66); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: var(--t-label); font-size: 12px; }
.pctl input { width: 120px; }
.ptfxinfo { position: absolute; right: var(--s-3); bottom: var(--s-3); padding: 6px 10px; border-radius: var(--r-1); background: rgba(10, 10, 15, .66); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font: var(--t-code-small); }
.lchips { display: flex; max-height: 300px; padding: 0; overflow-y: auto; }
.lchips small { margin-left: 4px; color: var(--muted); }
.lchips > [hidden] { display: none; }
.chipfind { flex: none; max-width: 320px; height: var(--h-sm); margin-bottom: var(--s-2); padding: 0 var(--s-3); }
.chipfind input { font-size: 13px; }
.chipfind svg { width: 15px; height: 15px; }
.ptex { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s-2); }
.ptex figure { margin: 0; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunken) repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.ptex img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.ptex figcaption { margin-top: 6px; color: var(--dim); font: var(--t-code-small); font-size: 10.5px; overflow-wrap: anywhere; }
/* a phone: the stage is too narrow for the info and the view buttons side by side: the info goes just above them */
@media (max-width: 600px) { .ptfxstage { height: 340px; } .pctl input { width: 90px; } .ptfxinfo { left: var(--s-3); right: auto; bottom: calc(var(--s-3) + 48px); max-width: calc(100% - 2 * var(--s-3)); } }

/* camera shakes: the picture shaken */
.shakeview { position: relative; aspect-ratio: 16 / 9; margin: var(--s-3) 0 10px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: var(--sunken); }
.shakeimg { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.08); }

/* gameui.css */
/* Game UI: scaleforms played, blips, markers, the feed, fonts, HUD colours and components, text codes, UI textures. */
.bicon { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; }
.bicon svg { width: 100%; height: 100%; }
.llist.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.llist.tiles .lrow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; text-align: center; }
.llist.tiles .lrow code { font-size: 10px; color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llist.tiles .lrow span:not(.bicon) { font-size: 10px; color: var(--faint); }
.bprev .bmap { --bs: 1; position: relative; height: 230px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: #0b1a26 url(/map/radar.webp) 47% 62% / 900% auto; display: flex; align-items: center; justify-content: space-evenly; }
.bprev .bmap::before { content: ''; position: absolute; inset: 0; background: rgba(5, 10, 20, .35); }
.bprev .bmap span { position: relative; display: grid; place-items: center; filter: url(#blipTint) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.bprev .bmap span svg { width: 100%; height: 100%; }
.bprev .bbig { width: calc(128px * var(--bs)); height: calc(128px * var(--bs)); }
.bprev .bmid { width: calc(48px * var(--bs)); height: calc(48px * var(--bs)); }
.bprev .bsmall { width: calc(24px * var(--bs)); height: calc(24px * var(--bs)); }
.bcolours { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 4px; }
.bcolours button { aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .12); }
.bcolours button.on { outline: 2px solid var(--white); outline-offset: 1px; }
.mflags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.mflags input { accent-color: var(--accent); }
.llist.tiles:has(.ticon) { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.uitex { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.uitex button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--sunken); }
.uitex button.on { border-color: var(--accent-line); background: var(--surface-3); }
.uitex span { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: var(--r-1); background: repeating-conic-gradient(#1c1a26 0 25%, #24212f 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.uitex img { max-width: 100%; max-height: 100%; }
.uitex b { max-width: 100%; font: 500 10.5px var(--code); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uitex small { color: var(--faint); font: 500 10px var(--code); }
.ltext { padding: 16px 18px; border-radius: var(--r-3); background: var(--sunken); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sfmethods { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.sfmethods button { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; text-align: left; padding: 7px 10px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--sunken); color: var(--text); cursor: pointer; }
.sfmethods button:hover { border-color: var(--line-2); }
.sfmethods button.on { border-color: var(--lilac); background: color-mix(in srgb, var(--lilac) 10%, var(--bg)); }
.sfmethods code { font: 600 12px var(--code); }
.sfmethods span { font: 500 11.5px var(--code); color: var(--muted); }
.sfmethods i { font-style: normal; }
.sfmethods .k-int, .sfmethods .k-float { color: #38bdf8; }
.sfmethods .k-bool { color: #f59e0b; }
.sfmethods .k-string { color: var(--success); }
.sfstage { position: relative; aspect-ratio: 16 / 9; margin: 14px 0 10px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: #0b0b10 center / cover no-repeat; }
.sfstage ruffle-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.sfwait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; background: rgba(8, 8, 12, .55); }
.sfwait[hidden] { display: none; }
.sfbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.sfbar .select { flex: 1; max-width: 240px; }
.sfform { margin: 4px 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunken); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.sfhead { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sfhead code { font: 600 13px var(--code); color: var(--text); overflow-wrap: anywhere; }
.sfhead .btn svg { width: 14px; height: 14px; }
.sfarg { display: grid; gap: 5px; }
.sfarg.wide { grid-column: 1 / -1; }
.sfarg span { font: 600 12px var(--code); color: var(--text); }
.sfarg small { font: 500 10.5px var(--body); color: var(--faint); margin-left: 4px; }
.feedstage { position: relative; aspect-ratio: 16 / 9; margin: 14px 0; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: #0b0b10 center / cover no-repeat; }
.feed { position: absolute; left: 3%; bottom: 22%; width: 38%; display: flex; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .78); color: #fff; font: 500 13px/1.3 var(--body); }
.feed.flash { animation: feedflash .6s ease-in-out 3; }
@keyframes feedflash { 50% { background: rgba(60, 60, 60, .85); } }
.feed img { width: 46px; height: 46px; flex: none; object-fit: cover; }
.feed b { display: flex; align-items: center; gap: 6px; font: 700 14px var(--body); }
.feed small { display: block; color: #ddd; font-size: 12px; margin: 1px 0 3px; }
.feed p { margin: 0; font-size: 12.5px; }
.ficon { font-style: normal; font-size: 11px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.fontrow { display: block; height: 22px; max-width: 100%; margin-top: 6px; filter: invert(1) brightness(.85); }
.fontstage { margin: 14px 0 12px; padding: 22px 18px; border-radius: var(--r-3); border: 1px solid var(--line); background: #0b0b10; min-height: 90px; display: grid; place-items: center; }
.fontstage img { width: 100%; max-height: 120px; object-fit: contain; filter: invert(1); }
.hcdot { display: inline-block; width: 16px; height: 16px; border-radius: 5px; margin-right: 8px; vertical-align: -3px; border: 1px solid rgba(255, 255, 255, .15); }
.hcswatch { margin: 14px 0; height: 120px; border-radius: var(--r-3); border: 1px solid var(--line); background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#2a2a33 0 25%, #1d1d24 0 50%) 0 0 / 16px 16px; display: grid; place-items: end start; padding: 12px; }
.hcswatch span { font: 600 12px var(--code); color: #fff; mix-blend-mode: difference; }
.hudscreen { position: relative; aspect-ratio: 16 / 9; margin: 14px 0; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: #0b0b10 center / cover no-repeat; }
.hudscreen::before { content: ''; position: absolute; inset: 5%; border: 1px dashed rgba(255, 255, 255, .25); }
/* the component shown: an accent box, its name under it (right-aligned at the right edge, above it near the bottom) */
.hudscreen i { position: absolute; z-index: 1; pointer-events: none; border: 2px solid var(--accent); background: rgba(168, 85, 247, .3); border-radius: 3px; box-shadow: 0 0 0 4px rgba(168, 85, 247, .18); }
.hudscreen b { position: absolute; left: 0; top: 100%; margin-top: 4px; font: 600 10.5px var(--code); color: #fff; background: rgba(0, 0, 0, .75); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.hudscreen i.r b { left: auto; right: 0; }
.hudscreen i.up b { top: auto; bottom: 100%; margin: 0 0 4px; }
/* the others: faint boxes that open theirs */
.hudother { position: absolute; border: 1px solid rgba(255, 255, 255, .4); background: none; border-radius: 2px; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.hudother:hover, .hudother:focus-visible { border-color: var(--lilac); background: rgba(196, 181, 253, .22); }
.tfstage { position: relative; aspect-ratio: 16 / 9; margin: 12px 0; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: #0b0b10 center / cover no-repeat; }
.tfbox { position: absolute; line-height: 0; }
.tfbox.help { left: 2.5%; top: 3.5%; max-width: 34%; padding: 9px 11px; background: rgba(0, 0, 0, .78); }
.tfbox.subtitle { left: 15%; right: 15%; bottom: 7%; text-align: center; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000); }
.tfbox.feed { left: 2.5%; bottom: 20%; width: 34%; padding: 9px 11px; background: rgba(0, 0, 0, .78); }
.tfrun { height: 19px; vertical-align: middle; }
.tfbox.subtitle .tfrun { height: 22px; }
.tfrun.b { filter: drop-shadow(.6px 0 0 currentColor) drop-shadow(-.3px 0 0 currentColor); }
.tfkey { display: inline-block; vertical-align: middle; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 3px; border-radius: 4px; background: #f0f0f0; color: #111; font: 700 11.5px/20px var(--body); text-align: center; }
.tfblip { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin: 0 3px; line-height: 0; }
.tfblip svg { width: 100%; height: 100%; }
.tfstar { display: inline-block; vertical-align: middle; color: #f0f0f0; font-size: 17px; line-height: 20px; margin: 0 2px; }
.tfwhere { margin: 10px 0 0; }
.tfcodes { margin: 8px 0 14px; }

/* text formatting: a colour code's colour before its name in the list */
.tswatch { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); vertical-align: -1px; }
.tswatch.any { background: conic-gradient(#e03232, #f0c850, #72cc72, #5db6e5, #8452de, #f68ec5, #e03232); }
/* touch: an outline is to scale (a few px on a phone); its touch area reaches 10px past it, the small ones on top win (where the game overlaps them a tap can open a neighbour; the list is right under) */
@media (pointer: coarse) { .hudother::after { content: ''; position: absolute; inset: -10px; } }
/* a code the game fills in as the text shows (~INPUT_CONTEXT~, ~BLIP_PACKAGE~, ~1~), in a game text drawn */
.ltext .tcode { padding: 1px 6px; border-radius: var(--r-1); background: var(--hover-2); color: var(--lilac); font: var(--t-code-small); }

/* scripting.css */
/* Scripting: keys, a stat's description. */
.ckeys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ckeys kbd { padding: 5px 10px; border-radius: var(--r-1); border: 1px solid var(--line-2); border-bottom-width: 3px; background: var(--surface-2); font: 600 12.5px var(--body); color: var(--text); }
/* a stat's note from the game's files: quoted, under a small caption */
.statnote { margin: var(--s-4) 0 var(--s-3); padding: 2px 0 2px 14px; border-left: 2px solid var(--accent-line); }
.statnote figcaption { color: var(--faint); font: var(--t-small); font-size: 12px; }
.statnote p { margin: 2px 0 0; color: var(--text); font: var(--t-body); font-size: 14.5px; }

/* shell.css */
/* The frame around every page: the sidebar (a drawer on a phone), the top bar, the home page, a section's header. */

/* ── the sidebar: groups that fold, the section shown marked ── */
.sidenav { position: fixed; inset: 0 auto 0 0; z-index: var(--z-nav); width: var(--side); display: flex; flex-direction: column; padding: 18px var(--s-3) var(--s-6); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--line-2) transparent; background: var(--surface-1); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 10px; padding: var(--s-1) 10px 22px; border-radius: var(--r-1); text-decoration: none; color: inherit; }
.logo { font: 800 22px/1 var(--display); letter-spacing: -.05em; color: var(--white); }
.logo i { color: var(--accent); font-style: normal; }
.brand-name { font: 600 15px/1 var(--display); letter-spacing: -.01em; color: var(--text); }
.navgroups { display: flex; flex-direction: column; gap: 2px; }
.ngroup-head, .ngroup-solo { width: 100%; height: 38px; display: flex; align-items: center; gap: var(--s-3); padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 14px var(--body); text-align: left; text-decoration: none; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.ngroup-head svg, .ngroup-solo svg { width: 18px; height: 18px; flex: none; color: var(--dim); transition: color var(--d-2) var(--ease); }
.ngroup-head:hover, .ngroup-solo:hover { background: var(--hover); color: var(--text); }
.ngroup-head .chev { width: 14px; height: 14px; margin-left: auto; color: var(--faint); transition: transform var(--d-2) var(--ease); }
.ngroup.open .chev { transform: rotate(90deg); }
.ngroup.has-on .ngroup-head { color: var(--text); }
.ngroup.has-on .ngroup-head > svg:first-child, .ngroup-solo.on svg { color: var(--accent-text); }
.ngroup-solo.on { background: var(--accent-bg); color: var(--white); }
/* folding: the row grows from 0fr to 1fr; the clip hides what is folded */
.ngroup-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-2) var(--ease); }
.ngroup.open .ngroup-body { grid-template-rows: 1fr; }
.ngroup-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility var(--d-2); }
.ngroup.open .ngroup-clip { visibility: visible; }
.ngroup-items { margin: 2px 0 var(--s-2) 19px; padding: 2px 0 2px 10px; border-left: 1px solid var(--line-2); }
.ngroup-items .nav { position: relative; display: flex; align-items: center; width: 100%; height: var(--h-sm); padding: 0 10px; border-radius: var(--r-1); color: var(--dim); font: 500 13.5px var(--body); white-space: nowrap; text-decoration: none; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.ngroup-items .nav:hover { color: var(--text); background: var(--hover); }
.ngroup-items .nav.on { color: var(--white); background: var(--accent-bg); }
/* the section shown: a bar on the guide line (so .nav must not clip) */
.ngroup-items .nav.on::before { content: ''; position: absolute; left: -11px; top: 8px; width: 2px; height: 16px; border-radius: 2px; background: var(--accent); }
.sidenav :focus-visible, .topbar :focus-visible { box-shadow: inset 0 0 0 2px rgba(196, 181, 253, .7); }

/* ── the top bar and the drawer, on a phone ── */
.topbar, .scrim { display: none; }
.icon-btn { width: var(--h-md); height: var(--h-md); display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--text); transition: background var(--d-2) var(--ease); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--hover-2); }
@media (max-width: 900px) {
  .topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--s-2); background: rgba(10, 10, 15, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .topbar .brand { padding: 0; }
  .sidenav { z-index: var(--z-drawer); width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--d-3) var(--ease), box-shadow var(--d-3); }
  body.drawer .sidenav { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .5); }
  .scrim { display: block; position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(5, 5, 8, .62); opacity: 0; pointer-events: none; transition: opacity var(--d-3) var(--ease); }
  body.drawer .scrim { opacity: 1; pointer-events: auto; }
  body.drawer { overflow: hidden; }
}

/* ── the page ── */
main { margin-left: var(--side); padding: 36px var(--gutter) var(--s-7); max-width: 1900px; }
@media (max-width: 900px) { main { margin-left: 0; padding: 22px var(--s-4) 40px; } .gsearch { margin-top: 0; } }
/* a section's header: the group it is in, its name and how many there are */
.eyebrow { font: var(--t-eyebrow); color: var(--accent-text); }
.head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-top: 6px; }
.head h1 { margin: 0; font: var(--t-page); letter-spacing: var(--ls-page); color: var(--white); }
.head .n { font: 500 15px var(--body); color: var(--dim); font-variant-numeric: tabular-nums; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--s-5) 0 var(--s-3); }

/* ── home: the search in a hero over the radar map, the groups as cards ── */
body.is-home main > #crumb, body.is-home main > .head, body.is-home main > .tools, body.is-home main > .tags, body.is-home main > #empty, body.is-home main > .pages { display: none; }
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 420px; padding: 40px 0 56px; }
/* the game's radar map of Los Santos, tinted lilac, fading into the page */
.hero-map { position: absolute; z-index: -1; top: -36px; bottom: 0; right: calc(-1 * var(--gutter)); width: 62%; background: url(/img/hero-radar-1400.webp) 38% 84% / 150% auto no-repeat; opacity: .5; filter: grayscale(1) sepia(1) hue-rotate(215deg) saturate(1.5) brightness(.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(0deg, transparent 0, #000 35%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(0deg, transparent 0, #000 35%); mask-composite: intersect; }
.hero-copy { width: min(100%, 640px); }
.hero h1 { margin: 0; font: var(--t-hero); letter-spacing: var(--ls-hero); color: var(--white); max-width: 13ch; }
.hero p { margin: var(--s-4) 0 28px; font-size: 17px; color: var(--muted); }
.hero .gsearch { margin: 0; }
.hero .gsearch .search { height: 56px; border-color: var(--line-3); background: rgba(21, 18, 31, .82); backdrop-filter: blur(6px); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.hero .gsearch .search input { font-size: 16px; }
.quick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.quick a { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 14px 0 11px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(18, 18, 26, .7); color: var(--text); font: var(--t-label); text-decoration: none; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.quick a svg { width: 16px; height: 16px; color: var(--accent-text); }
.quick a:hover { border-color: rgba(196, 181, 253, .35); background: var(--surface-3); }
.home-h { margin: var(--s-2) 0 var(--s-4); font: 600 20px var(--display); letter-spacing: -.01em; color: var(--text); }
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1280px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gcards { grid-template-columns: 1fr; } }
.gcard { display: flex; flex-direction: column; padding: var(--s-2) var(--s-2) var(--s-3); border-radius: var(--r-3); background: var(--surface-1); border: 1px solid var(--line); transition: border-color var(--d-2) var(--ease); }
.gcard:hover { border-color: var(--line-2); }
.gcard-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: var(--s-3); border-radius: var(--r-2); text-decoration: none; transition: background var(--d-2) var(--ease); }
.gcard-head:hover { background: var(--hover); }
.gcard-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(168, 85, 247, .1); color: var(--accent-text); }
.gcard-icon svg { width: 20px; height: 20px; }
.gcard-title b { display: block; font: var(--t-section); letter-spacing: var(--ls-section); color: var(--white); }
.gcard-title small { display: block; margin-top: 2px; font: var(--t-small); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gcard-links { display: flex; flex-wrap: wrap; margin: 0; padding: 0 var(--s-1); list-style: none; }
.gcard-links a { display: block; padding: 5px var(--s-2); border-radius: 6px; color: var(--dim); font: 500 13.5px var(--body); text-decoration: none; transition: color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.gcard-links a:hover { color: var(--text); background: var(--hover-2); }
@media (max-width: 900px) {
  .hero { min-height: 0; padding: 28px 0 36px; }
  .hero-map { top: -22px; right: calc(-1 * var(--s-4)); width: 100%; opacity: .3; }
}

/* clears the search and the filters; shown only when something narrows the section */
.clear-all { display: inline-flex; align-items: center; gap: 6px; height: var(--h-lg); padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: none; color: var(--muted); font: var(--t-label); font-size: 13.5px; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.clear-all:hover { background: var(--hover-2); color: var(--white); }
.clear-all svg { width: 15px; height: 15px; }
.clear-all[hidden] { display: none; }
@media (max-width: 900px) { .clear-all { height: var(--h-md); } }

/* home: the items opened lately, as small cards in a row (wrapping), the section each is in under its name */
.recent { margin-bottom: var(--s-6); }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.recent-clear { padding: 4px 8px; border: 0; border-radius: var(--r-1); background: none; color: var(--dim); font: var(--t-small); transition: color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.recent-clear:hover { background: var(--hover-2); color: var(--white); }
.recent-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.recent-list a { display: grid; gap: 1px; min-width: 0; max-width: 260px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); text-decoration: none; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.recent-list a:hover { border-color: var(--line-3); background: var(--surface-2); }
/* a title in the text face; a name from the game's files (no title) in the code face */
.recent-list b { overflow: hidden; color: var(--white); font: var(--t-body-strong); text-overflow: ellipsis; white-space: nowrap; }
.recent-list b.key { font: var(--t-code); font-weight: 600; }
.recent-list small { color: var(--dim); font: var(--t-small); }
/* a phone: one row that scrolls sideways */
@media (max-width: 600px) {
  /* out to the screen's edges (main's padding there is --s-4) */
  .recent-list { flex-wrap: nowrap; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) var(--s-1); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--s-4); }
  .recent-list a { flex: none; max-width: 200px; scroll-snap-align: start; }
}

/* until the game is read (the first start: a minute or two), only the message: no empty title, no filters to pick */
body.booting main > #crumb, body.booting main > .head, body.booting main > .tools, body.booting main > .tags, body.booting main > .pages,
body.booting #homeview, body.booting #grid { display: none; }
body.booting main > #empty { margin-top: var(--s-7); }

/* the keyboard shortcuts: a link at the foot of the sidebar (with a mouse), and their list */
.keys-link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-1); background: none; color: var(--faint); font: var(--t-small); text-align: left; transition: color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.keys-link:hover { background: var(--hover-2); color: var(--text); }
.keys-link kbd, .keys kbd { min-width: 22px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); font: 500 11px var(--code); text-align: center; }
@media (pointer: coarse), (max-width: 900px) { .keys-link { display: none; } }
.keys { width: min(440px, calc(100vw - 32px)); padding: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--e-3); color: var(--text); }
.keys::backdrop { background: rgba(5, 5, 8, .6); backdrop-filter: blur(4px); }
.keys h2 { margin: 0 0 var(--s-4); font: var(--t-title); color: var(--white); }
.keys dl { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); }
.keys dl > div { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--s-3); }
.keys dt { display: flex; gap: 4px; }
.keys dd { margin: 0; color: var(--muted); font: var(--t-small); font-size: 13.5px; }
.keys kbd { color: var(--text); }

/* the static build's page for search engines (tools/bake.py, pages): read by them and by screen readers until the
   page starts, which takes it away (core/static.js); never shown */
.prerender { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* landing.css */
/* The front page (/, views/landing.js): the explorer's own chrome steps aside; the game's models are the picture. */
body.is-landing .topbar, body.is-landing .sidenav, body.is-landing .scrim { display: none; }
body.is-landing main { margin: 0; padding: 0; max-width: none; }
body.is-landing main > :not(#landingview):not(#pricingview):not(.gsearch) { display: none; }
/* the front page drawn ahead (tools/bake.py, landingshot): shown on / before the scripts have run */
#landingview[data-shot] { display: none; }
body.is-landing #landingview[data-shot] { display: block; }

.landing { --wrap: 1360px; --pad: clamp(16px, 4vw, 48px);
  /* the cutting mat the models sit on: a fine grid, a coarser one every fourth line */
  --mat: linear-gradient(rgba(196, 181, 253, .075) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(196, 181, 253, .075) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(rgba(196, 181, 253, .035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(196, 181, 253, .035) 1px, transparent 1px) 0 0 / 24px 24px, #0f0d17;
  display: block; }
.ld-main { min-width: 0; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.landing a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }

/* ── the bar along the top: the brand, the pages, the profile; see-through until the page scrolls under it ── */
.ld-top { position: sticky; top: 0; z-index: var(--z-topbar); border-bottom: 1px solid transparent; transition: background var(--d-2), border-color var(--d-2), backdrop-filter var(--d-2); }
.ld-top.scrolled { background: rgba(10, 10, 15, .78); border-bottom-color: var(--line); backdrop-filter: blur(14px) saturate(1.2); }
.ld-top-in { display: flex; align-items: center; gap: 36px; max-width: calc(var(--wrap) + 2 * var(--pad)); height: 72px; margin: 0 auto; padding: 0 var(--pad); }
.ld-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ld-links a { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); color: var(--muted); font: 600 14.5px/1 'Manrope', sans-serif; text-decoration: none; white-space: nowrap; transition: color var(--d-1), background var(--d-1); }
.ld-links a:hover { color: var(--white); background: var(--hover); }
.ld-links a[aria-current] { color: var(--white); }
/* the page shown: a short bar of the brand's violet under it */
.ld-links a[aria-current]::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--purple); }
.ld-links .ld-ext svg { width: 13px; height: 13px; color: var(--faint); transition: color var(--d-1), transform var(--d-1); }
.ld-links .ld-ext:hover svg { color: var(--lilac); transform: translate(1px, -1px); }
.ld-links-sep { width: 1px; height: 18px; margin: 0 8px; background: var(--line-2); }
.ld-top-end { margin-left: auto; }
.ld-brand { flex: none; display: flex; align-items: center; gap: 10px; color: var(--white); font: 700 17px/1 'Outfit', sans-serif; text-decoration: none; }
.ld-brand .logo { font: 800 24px/1 'Outfit', sans-serif; letter-spacing: -.04em; }
.ld-brand .logo i { font-style: normal; color: var(--purple); }
.ld-open { display: inline-flex; align-items: center; height: var(--h-md); padding: 0 18px; border-radius: var(--r-pill); background: var(--violet); color: var(--white); font: 700 14.5px/1 'Manrope', sans-serif; text-decoration: none; transition: background var(--d-2) var(--ease); }
.ld-open:hover { background: #7c3aed; color: var(--white); }

/* ── the hero: the claim and the search on the left, the plate of models on the right ── */
.ld-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; min-height: min(calc(100vh - 72px), 800px); padding: 24px 0 72px; }
.ld-hero-cta { margin-top: 30px; }
.ld-copy h1 { margin: 0; max-width: 12ch; font: 800 clamp(44px, 5.2vw, 84px)/.95 'Outfit', sans-serif; letter-spacing: -.045em; color: var(--white); text-wrap: balance; }
.ld-copy p { max-width: 46ch; margin: 26px 0 30px; font-size: 17.5px; line-height: 1.6; color: var(--muted); }
.ld-search .gsearch { margin: 0; }
.ld-search .gsearch .search { height: 56px; border-color: var(--line-3); background: var(--surface-2); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.ld-search .gsearch .search input { font-size: 16px; }
.ld-search .gresults { width: min(880px, calc(100vw - 2 * var(--pad))); right: auto; }
.ld-quick { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.ld-quick a { color: var(--lilac-2); font-size: 14.5px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 5px; }
.ld-quick a:hover { text-decoration-color: var(--lilac); }

.ld-plate { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 22px; background: var(--mat); overflow: hidden; }
/* registration marks in the corners, as on a modeller's sheet */
.ld-plate::before, .ld-plate::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--lilac); opacity: .55; pointer-events: none; }
.ld-plate::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.ld-plate::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.spec { position: relative; display: block; aspect-ratio: 1; color: inherit; text-decoration: none; border-right: 1px dashed rgba(196, 181, 253, .1); border-bottom: 1px dashed rgba(196, 181, 253, .1); }
.spec:nth-child(4n) { border-right: 0; }
.spec:nth-last-child(-n + 4) { border-bottom: 0; }
.spec img { position: absolute; inset: 4% 2% 15%; width: 96%; height: 81%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); transition: transform var(--d-3) var(--ease); }
.spec code { position: absolute; left: 12px; right: 10px; bottom: 10px; overflow: hidden; font: 500 11px/1.2 'JetBrains Mono', monospace; color: var(--faint); white-space: nowrap; text-overflow: ellipsis; transition: color var(--d-2); }
.spec:hover { background: rgba(196, 181, 253, .045); }
.spec:hover img { transform: translateY(-5px) scale(1.05); }
.spec:hover code { color: var(--lilac); }
/* the page's one entrance: the models laid on the plate, one after another */
@media (prefers-reduced-motion: no-preference) {
  .spec img { animation: ld-lay .6s var(--ease) both; animation-delay: calc(120ms + var(--i) * 55ms); }
  @keyframes ld-lay { from { opacity: 0; transform: translateY(14px) scale(.94); } }
}

/* ── what's inside: one row per group, with a few of its models ── */
.ld-index { padding: 40px 0 24px; }
.ld-index h2, .ld-code h2 { margin: 0 0 18px; font: 800 clamp(30px, 3.4vw, 44px)/1.05 'Outfit', sans-serif; letter-spacing: -.035em; color: var(--white); }
.ld-rows { margin: 0; padding: 0; list-style: none; }
.ld-row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 380px; gap: 32px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line-2); }
.ld-row:last-child { border-bottom: 1px solid var(--line-2); }
.ld-row.no-pics { grid-template-columns: 250px minmax(0, 1fr); }
.ld-row-head { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.ld-row-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-2); background: var(--accent-bg); color: var(--lilac); }
.ld-row-icon svg { width: 22px; height: 22px; }
.ld-row-head b { display: block; font: 700 22px/1.15 'Outfit', sans-serif; letter-spacing: -.02em; color: var(--white); }
.ld-row-head small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.ld-row-head:hover b { color: var(--lilac-2); }
.ld-row-body p { max-width: 54ch; margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.ld-row-body ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.ld-row-body ul a { font-size: 14px; color: var(--lilac); text-decoration: none; }
.ld-row-body ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ld-row-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 92px; border-radius: var(--r-3); background: var(--mat); border: 1px solid var(--line); }
.ld-row-pics img { width: 100%; height: 100%; object-fit: contain; padding: 6px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.ld-row-pics.fill { overflow: hidden; gap: 1px; }
.ld-row-pics.fill img { object-fit: cover; padding: 0; filter: none; }

/* ── from a picture to the code ── */
.ld-code { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: 72px 0; }
.ld-code-pic { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line-2); border-radius: 22px; background: var(--mat); }
.ld-code-pic img { width: 100%; height: 100%; object-fit: contain; padding: 4%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); transition: transform var(--d-3) var(--ease); }
.ld-code-pic:hover img { transform: translateY(-6px); }
.ld-code-copy .ld-open { margin-top: 20px; }
.ld-code-copy p { max-width: 52ch; margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.ld-lua { margin: 0 0 26px; padding: 20px 22px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--sunken); font: 500 13.5px/1.75 'JetBrains Mono', monospace; color: var(--text); }
.ld-lua .k { color: var(--lilac); }
.ld-lua .s { color: var(--warning); }
.ld-lua .n { color: var(--success); }
.ld-lua .c { color: var(--faint); }

.ld-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 28px 0 40px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.ld-foot p { margin: 0; }
.ld-foot a { color: var(--lilac); }

@media (max-width: 1240px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ld-plate { max-width: 760px; }
}
@media (max-width: 1100px) {
  .ld-row { grid-template-columns: 220px minmax(0, 1fr); }
  .ld-row-pics { grid-column: 2; }
}
@media (max-width: 900px) {
  .ld-top-in { gap: 12px; height: 60px; }
  .ld-brand > span:last-child { display: none; }
  .ld-links-sep, .ld-links .ld-ext { display: none; }
  .ld-links a { padding: 0 10px; font-size: 14px; }
  .ld-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 12px 0 48px; }
  .ld-copy p { font-size: 16.5px; }
  .ld-plate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec:nth-child(4n) { border-right: 1px dashed rgba(196, 181, 253, .1); }
  .spec:nth-child(3n) { border-right: 0; }
  .spec:nth-last-child(-n + 4) { border-bottom: 1px dashed rgba(196, 181, 253, .1); }
  .spec:nth-last-child(-n + 3) { border-bottom: 0; }
  .ld-row, .ld-row.no-pics { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ld-row-pics { grid-column: auto; height: 80px; }
  .ld-code { grid-template-columns: minmax(0, 1fr); padding: 48px 0; }
}

/* pricing.css */
/* Pricing (/pricing, views/pricing.js): made like the front page — its bar, its type, the cutting mat under the plans. */
.pr-main { padding-bottom: 8px; }
.pr-draft { margin: 18px 0 0; padding: 10px 14px; border: 1px dashed var(--accent-line); border-radius: var(--r-2); background: var(--accent-bg); color: var(--lilac-2); font: 600 13.5px/1.4 var(--body); text-align: center; }

.pr-hero { max-width: 780px; margin: 0 auto; padding: 64px 0 48px; text-align: center; }
.pr-hero h1 { margin: 0; font: 800 clamp(40px, 5vw, 72px)/.98 'Outfit', sans-serif; letter-spacing: -.045em; color: var(--white); text-wrap: balance; }
.pr-hero p { max-width: 54ch; margin: 22px auto 0; font-size: 17.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ── the plans: three cards on the mat; Studio lifted, in the brand's violet ── */
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; padding: 28px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--mat); }
.pr-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 26px; border: 1px solid var(--line-2); border-radius: 18px; background: rgba(21, 18, 31, .92); box-shadow: var(--e-2); }
.pr-plan.best { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(21, 18, 31, .94) 46%); box-shadow: 0 0 0 1px var(--accent-line), 0 24px 60px rgba(76, 29, 149, .35); }
.pr-tag { position: absolute; top: -12px; left: 26px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--violet); color: var(--white); font: 700 12px/1 var(--body); letter-spacing: .01em; }
.pr-plan h2 { margin: 0; font: 700 21px/1.2 'Outfit', sans-serif; color: var(--white); }
.pr-blurb { min-height: 2.9em; margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.pr-price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 20px; }
.pr-price b { font: 800 44px/1 'Outfit', sans-serif; letter-spacing: -.03em; color: var(--white); }
.pr-price span { color: var(--faint); font-size: 14px; }
.pr-cta { display: inline-flex; align-items: center; justify-content: center; height: var(--h-md); padding: 0 18px; border: 1px solid var(--line-3); border-radius: var(--r-pill); color: var(--white); font: 700 14.5px/1 'Manrope', sans-serif; text-decoration: none; transition: background var(--d-1), border-color var(--d-1); }
.pr-cta:hover { background: var(--hover); }
.pr-cta.solid { border-color: transparent; background: var(--violet); }
.pr-cta.solid:hover { background: #7c3aed; }
.pr-cta.soon { color: var(--muted); cursor: default; }
.pr-cta.soon.solid { background: rgba(124, 58, 237, .45); color: var(--white); }
.pr-cta.soon:hover { background: transparent; }
.pr-cta.soon.solid:hover { background: rgba(124, 58, 237, .45); }
.pr-plan ul { display: grid; gap: 11px; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.pr-plan li { display: flex; gap: 10px; color: var(--text); font-size: 14.5px; line-height: 1.45; }
.pr-plan li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--lilac); }

/* ── credits: the copy on the left, the packs as three tiles ── */
.pr-credits { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 32px; align-items: center; margin: 72px 0 0; }
.pr-credits h2, .pr-tools h2, .pr-faq h2 { margin: 0 0 14px; font: 800 clamp(28px, 3vw, 40px)/1.05 'Outfit', sans-serif; letter-spacing: -.035em; color: var(--white); }
.pr-credits p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.pr-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pr-packs li { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-1); }
.pr-packs b { color: var(--text); font: 700 15px/1.2 var(--body); }
.pr-pack-price { color: var(--white); font: 800 28px/1 'Outfit', sans-serif; letter-spacing: -.02em; }
.pr-packs small { justify-self: start; padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent-bg); color: var(--lilac-2); font: 700 11.5px/1.2 var(--body); }

/* ── the tools: one line per group, its count big ── */
.pr-tools { margin: 72px 0 0; }
.pr-tools ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.pr-tools li { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-1); }
.pr-tools li > b { color: var(--lilac); font: 800 34px/1 'Outfit', sans-serif; }
.pr-tools li span { display: grid; gap: 4px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.pr-tools li strong { color: var(--white); font: 700 15px/1.25 var(--body); }

/* ── questions ── */
.pr-faq { max-width: 820px; margin: 72px auto 64px; }
.pr-faq details { border-bottom: 1px solid var(--line-2); }
.pr-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; color: var(--white); font: 700 16.5px/1.35 var(--body); cursor: pointer; list-style: none; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: '+'; flex: none; color: var(--lilac); font: 400 24px/1 var(--body); transition: transform var(--d-2) var(--ease); }
.pr-faq details[open] summary::after { transform: rotate(45deg); }
.pr-faq details p { margin: 0 0 18px; max-width: 68ch; color: var(--muted); font-size: 15px; line-height: 1.6; }

@media (max-width: 1100px) {
  .pr-tools ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pr-plans { grid-template-columns: 1fr; gap: 26px; padding: 16px; }
  /* one under another: the plan most people take first */
  .pr-plan.best { order: -1; }
  .pr-blurb { min-height: 0; }
  .pr-credits { grid-template-columns: 1fr; }
  .pr-tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pr-hero { padding: 40px 0 32px; }
  .pr-packs { grid-template-columns: 1fr; }
  .pr-tools li { padding: 16px; }
  .pr-tools li > b { font-size: 28px; }
  .pr-plans { margin: 0 calc(-1 * var(--s-2)); }
}

/* profile.css */
/* The profile (core/profile.js): Sign in with Discord, or the signed-in chip and its menu. In mics.dev's colours,
   Discord's own blurple only where Discord is the action. */
.pf { position: relative; display: flex; align-items: center; flex: none; }
.pf :focus-visible { outline: none; box-shadow: var(--focus); }

/* signed out */
.pf-signin { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: var(--r-pill); background: #5865f2; color: #fff; font: 700 14px/1 'Manrope', sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 20px rgba(88, 101, 242, .28); transition: background var(--d-1), transform var(--d-1), box-shadow var(--d-2); }
.pf-signin:hover { background: #4752c4; box-shadow: 0 8px 26px rgba(88, 101, 242, .38); }
.pf-signin:active { transform: translateY(1px); }
.pf-logo { flex: none; width: 20px; height: 20px; }

/* signed in: the chip */
.pf-me { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(21, 18, 31, .8); color: var(--text); font: 600 14px/1 'Manrope', sans-serif; cursor: pointer; backdrop-filter: blur(8px); transition: border-color var(--d-1), background var(--d-1); }
.pf-me:hover, .pf-me[aria-expanded="true"] { border-color: var(--line-3); background: var(--surface-2); }
.pf-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); }
.pf-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chev { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform var(--d-2) var(--ease); }
.pf-me[aria-expanded="true"] .pf-chev { transform: rotate(180deg); }
/* not on the Discord yet: a dot on the picture says the menu has something for them */
.pf-nudge { position: relative; }
.pf-nudge::after { content: ''; position: absolute; left: 26px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #5865f2; box-shadow: 0 0 0 2px var(--bg); }

/* the menu */
.pf-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-popover); width: 296px; padding: 8px; border: 1px solid var(--line-2); border-radius: 16px; background: #15121f; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3); transform-origin: top right; }
@media (prefers-reduced-motion: no-preference) {
  .pf-menu:not([hidden]) { animation: pf-in .16s var(--ease); }
  @keyframes pf-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
}
.pf-card { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.pf-card img { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); }
.pf-card div { min-width: 0; }
.pf-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15.5px/1.25 'Outfit', sans-serif; color: var(--white); }
.pf-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.pf-status { display: flex; align-items: center; gap: 8px; margin: 0 2px 4px; padding: 9px 10px; border-radius: var(--r-2); background: var(--success-bg); color: var(--success); font-size: 13.5px; font-weight: 600; }
.pf-status svg { flex: none; width: 16px; height: 16px; }
.pf-join { display: flex; align-items: center; gap: 12px; margin: 0 2px 2px; padding: 11px 12px; border-radius: 12px; background: #5865f2; color: #fff; text-decoration: none; transition: background var(--d-1); }
.pf-join:hover, .pf-join:focus-visible { background: #4752c4; color: #fff; }
.pf-join .pf-logo { width: 24px; height: 24px; }
.pf-join b { display: block; font: 700 14px/1.25 'Manrope', sans-serif; }
.pf-join small { display: block; font-size: 12.5px; opacity: .85; }
.pf-recheck { display: block; width: calc(100% - 4px); margin: 0 2px; padding: 7px 10px; border: 0; background: none; color: var(--lilac); font: 600 12.5px/1.3 'Manrope', sans-serif; text-align: left; cursor: pointer; border-radius: var(--r-1); }
.pf-recheck:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.pf-menu a[role="menuitem"]:not(.pf-join), .pf-menu button[role="menuitem"]:not(.pf-recheck) { display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: var(--r-2); background: none; color: var(--text); font: 600 14px/1 'Manrope', sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.pf-menu a[role="menuitem"]:not(.pf-join):hover, .pf-menu button[role="menuitem"]:not(.pf-recheck):hover,
.pf-menu a[role="menuitem"]:not(.pf-join):focus-visible, .pf-menu button[role="menuitem"]:not(.pf-recheck):focus-visible { background: var(--hover-2); color: var(--white); box-shadow: none; }
.pf-menu [role="menuitem"]:not(.pf-join) > svg:first-child { flex: none; width: 18px; height: 18px; color: var(--muted); }
.pf-menu [role="menuitem"] > span { flex: 1; }
.pf-ext { flex: none; width: 14px; height: 14px; color: var(--faint); }

/* narrow: the chip is the picture alone, the sign-in button just "Sign in" */
@media (max-width: 720px) {
  .pf-name, .pf-me .pf-chev, .pf-long { display: none; }
  .pf-me { padding: 0 4px; }
  .pf-signin { height: 36px; padding: 0 13px 0 11px; font-size: 13.5px; }
  .pf-menu { position: fixed; top: 64px; right: 12px; left: auto; width: min(296px, calc(100vw - 24px)); }
}

/* ── where it sits in the explorer ── */
/* the bar over the content: the search, and the profile at its right */
.appbar { display: flex; align-items: flex-start; gap: 16px; margin: -14px 0 22px; }
.appbar > .gsearch { flex: 1; min-width: 0; margin: 0; }
.appbar-profile { margin-left: auto; }
/* the home moves the search into its hero: the profile alone, over the hero's top right corner */
main { position: relative; }
.appbar:not(:has(.gsearch)) { position: absolute; top: 24px; right: var(--gutter); z-index: var(--z-sticky); margin: 0; }
/* the phone's top bar: the search button and the profile at its right; the bar over the content keeps the search only */
.topbar-end { display: flex; align-items: center; gap: 6px; }
.topbar-end .pf { display: none; }
@media (max-width: 900px) {
  .topbar-end .pf { display: flex; }
  .appbar { margin-top: 0; }
  .appbar-profile { display: none; }
}