/* WASP 3D Lab — the client viewer's look (build .541, Gray 06.10.26: "It
   needs to look sleek, modern and expensive … use black and WASP gold as much
   as you can, but change things around, use different shades, use texture").

   The model is the hero: the 3D fills the window over a lit, textured
   backdrop (drawn by lab.js, handed to the engine), and every control floats
   over it on smoked glass — one icon rail per side, drawers that fold back to
   the edge, an asset strip along the bottom.  Gold is spent sparingly: the
   brand, the active choice, the selection.  Type is IBM Plex — light, large
   numbers; small tracked capitals for labels; condensed figures for data. */

@font-face { font-family: "Plex"; font-weight: 300; src: url(../fonts/IBMPlexSans-Light.ttf); }
@font-face { font-family: "Plex"; font-weight: 400; src: url(../fonts/IBMPlexSans-Regular.ttf); }
@font-face { font-family: "Plex"; font-weight: 500; src: url(../fonts/IBMPlexSans-Medium.ttf); }
@font-face { font-family: "Plex"; font-weight: 600; src: url(../fonts/IBMPlexSans-SemiBold.ttf); }
@font-face { font-family: "Plex Cond"; font-weight: 400; src: url(../fonts/IBMPlexSansCondensed-Regular.ttf); }
@font-face { font-family: "Plex Cond"; font-weight: 500; src: url(../fonts/IBMPlexSansCondensed-Medium.ttf); }
@font-face { font-family: "Plex Cond"; font-weight: 600; src: url(../fonts/IBMPlexSansCondensed-SemiBold.ttf); }

:root {
  /* inks — warm-neutral blacks, never flat grey */
  --ink-0: #030304;
  --ink-1: #07070a;
  --ink-2: #0d0d11;
  --ink-3: #14141a;
  --ink-4: #1c1c23;
  --ink-5: #26262e;
  /* gold — the brand, in five weights */
  --gold-1: #fff3c4;
  --gold-2: #f6dc7a;
  --gold-3: #e7c73a;
  --gold-4: #c9a227;
  --gold-5: #7d6312;
  --gold-grad: linear-gradient(135deg, #f8e18a 0%, #e7c73a 42%, #c49a1f 100%);
  --gold-line: rgba(231, 199, 58, 0.32);
  --gold-glow: rgba(231, 199, 58, 0.16);
  /* text — warm whites */
  --t-1: #f6f3ec;
  --t-2: #bdb8ad;
  --t-3: #858075;
  --t-4: #524f48;
  /* glass */
  --glass: rgba(15, 15, 19, 0.66);
  --glass-hi: rgba(22, 22, 28, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.075);
  --glass-edge-hi: rgba(255, 255, 255, 0.12);
  --blur: blur(22px) saturate(150%);
  --shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  /* meaning */
  --sev-severe: #ff5d52;
  --sev-major: #ffad42;
  --sev-minor: #8f98a6;
  --ok: #3ecf8e;
  --bore: #3fbfa8;
  --outer: #a58bd6;
  /* type */
  --sans: "Plex", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --num: "Plex Cond", "IBM Plex Sans Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  /* geometry */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --rail: 52px;
  --drawer: 392px;
  --strip-h: 92px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* grain — a fine film noise, used on glass and the start screen */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink-1); color: var(--t-1);
  font: 400 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { white-space: nowrap; cursor: pointer; }
::selection { background: var(--gold-3); color: var(--ink-1); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.caps { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--t-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--gold-3); outline-offset: 2px; }

/* ── the engine's own elements ─────────────────────────────────────────── */
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none;
  opacity: 0; transition: opacity 900ms var(--ease); }
body.ready #c { opacity: 1; }
#watermark, #divider, #hud { display: none !important; }
#err { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--strip-h) + 28px);
  max-width: min(680px, 90vw); max-height: 30vh; overflow: auto; z-index: 60;
  color: #ffb4ab; background: rgba(30, 6, 6, .92); border: 1px solid rgba(255, 93, 82, .4);
  border-radius: var(--r-m); font: 12px/1.45 Consolas, monospace; padding: 10px 14px;
  white-space: pre-wrap; display: none; }

/* ── glass ─────────────────────────────────────────────────────────────── */
.glass { position: relative; background: var(--glass); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .045); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--grain); opacity: .05; mix-blend-mode: overlay; }
.glass.lined::after { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(231, 199, 58, .55), transparent); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.ibtn { width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent;
  color: var(--t-2); display: grid; place-items: center; position: relative;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
.ibtn svg { width: 19px; height: 19px; }
.ibtn:hover { background: rgba(255, 255, 255, .06); color: var(--t-1); }
.ibtn:active { transform: scale(.94); }
.ibtn.on { color: var(--ink-1); background: var(--gold-grad);
  box-shadow: 0 0 0 1px rgba(255, 236, 160, .25) inset, 0 6px 22px -6px rgba(231, 199, 58, .55); }
.ibtn .badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--sev-severe); color: #fff; font: 600 10px/16px var(--num);
  box-shadow: 0 0 0 2px var(--ink-2); }
.ibtn.on .badge { box-shadow: 0 0 0 2px var(--gold-3); }
.btn { height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--glass-edge-hi);
  background: rgba(255, 255, 255, .03); color: var(--t-1); font-weight: 500; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.btn:hover { background: rgba(255, 255, 255, .07); border-color: rgba(231, 199, 58, .35); }
.btn svg { width: 15px; height: 15px; }
.btn.gold { background: var(--gold-grad); color: var(--ink-1); border: 0; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(231, 199, 58, .6); }
.btn.gold:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--t-2); }
.btn.ghost:hover { color: var(--t-1); background: rgba(255, 255, 255, .05); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* segmented choice */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--glass-edge); }
.seg button { border: 0; background: transparent; color: var(--t-3); padding: 5px 11px; border-radius: 8px;
  font-weight: 500; font-size: 12px; transition: color 160ms, background 160ms; }
.seg button:hover { color: var(--t-1); }
.seg button.on { background: rgba(255, 255, 255, .09); color: var(--t-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; }

/* switch */
.sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0;
  cursor: pointer; color: var(--t-2); }
.sw:hover { color: var(--t-1); }
.sw input { display: none; }
.sw .knob { width: 32px; height: 18px; border-radius: 9px; background: var(--ink-5); position: relative;
  flex: none; transition: background 200ms var(--ease); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sw .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #d9d4c8; transition: transform 220ms var(--ease), background 200ms; }
.sw input:checked + .knob { background: var(--gold-4); }
.sw input:checked + .knob::after { transform: translateX(14px); background: #fff7d8; }

/* slider */
.rng { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 6px 0; }
.rng label { color: var(--t-2); }
.rng output { font: 500 12px var(--num); color: var(--gold-2); min-width: 34px; text-align: right; }
.rng input[type=range] { grid-column: 1 / -1; width: 100%; appearance: none; -webkit-appearance: none;
  height: 22px; background: transparent; margin: 0; }
.rng input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-3) var(--p, 50%), var(--ink-5) var(--p, 50%)); }
.rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px;
  margin-top: -6px; border-radius: 50%; background: #fff7d8; border: 0;
  box-shadow: 0 0 0 4px rgba(231, 199, 58, .22), 0 2px 6px rgba(0, 0, 0, .5); }
.rng input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--ink-5); }
.rng input[type=range]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--gold-3); }
.rng input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; border: 0;
  background: #fff7d8; box-shadow: 0 0 0 4px rgba(231, 199, 58, .22); }

.field { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--glass-edge); border-radius: 8px; padding: 0 8px; height: 30px; }
.field:focus-within { border-color: var(--gold-line); }
.field input { width: 100%; min-width: 0; background: none; border: 0; outline: none; font: 500 13px var(--num);
  color: var(--t-1); text-align: right; }
.field span { color: var(--t-3); font-size: 11px; }
.field svg { width: 14px; height: 14px; color: var(--t-3); flex: none; }

/* ── top: identity plate, layers, utilities ───────────────────────────── */
.top { position: fixed; top: 14px; left: 14px; right: 14px; height: 52px; z-index: 30;
  display: flex; align-items: center; gap: 12px; pointer-events: none; }
.top > * { pointer-events: auto; }
.plate { height: 52px; border-radius: 16px; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 16px;
  min-width: 0; flex: 0 1 auto; }
.plate .logo { height: 21px; width: auto; color: var(--gold-3); flex: none;
  filter: drop-shadow(0 0 10px rgba(231, 199, 58, .25)); }
.plate .prod { font: 600 10.5px/1 var(--sans); letter-spacing: .32em; color: var(--t-2); padding-left: 14px;
  border-left: 1px solid var(--glass-edge-hi); flex: none; }
.plate .who { display: flex; flex-direction: column; min-width: 0; padding-left: 14px;
  border-left: 1px solid var(--glass-edge-hi); }
.plate .who b { font-weight: 500; font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.plate .who small { color: var(--t-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .spacer { flex: 1 1 0; min-width: 0; }
.layers { height: 48px; border-radius: 15px; padding: 4px; display: flex; gap: 2px; position: relative; flex: none; }
.layers button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--t-3);
  padding: 0 14px; border-radius: 11px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1.1; transition: color 200ms var(--ease); }
.layers button b { font: 600 13px var(--num); letter-spacing: .06em; }
.layers button small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.layers button:hover { color: var(--t-1); }
.layers button.on { color: var(--ink-1); }
.layers .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 11px;
  background: var(--gold-grad); box-shadow: 0 8px 24px -8px rgba(231, 199, 58, .6);
  transition: left 340ms var(--ease), width 340ms var(--ease); }
.utils { height: 52px; border-radius: 16px; display: flex; align-items: center; gap: 4px; padding: 0 7px; flex: none; }
.utils .seg { margin-right: 4px; }

/* ── rails ─────────────────────────────────────────────────────────────── */
.rail { position: fixed; top: 50%; transform: translateY(-50%); z-index: 30; width: var(--rail);
  border-radius: 18px; padding: 7px; display: flex; flex-direction: column; gap: 4px; }
.rail.left { left: 14px; }
.rail.right { right: 14px; }
.rail .sep { height: 1px; margin: 4px 6px; background: var(--glass-edge-hi); }
.tip { position: fixed; z-index: 80; pointer-events: none; padding: 6px 10px; border-radius: 8px;
  background: rgba(10, 10, 13, .94); border: 1px solid var(--glass-edge-hi); color: var(--t-1);
  font-size: 12px; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; transform: translateY(2px);
  transition: opacity 120ms, transform 120ms; }
.tip.show { opacity: 1; transform: none; }
.tip small { display: block; color: var(--t-3); font-size: 11px; }

/* ── flyouts (left) ────────────────────────────────────────────────────── */
.flyout { position: fixed; z-index: 29; left: calc(14px + var(--rail) + 12px); top: 82px;
  width: 316px; max-height: calc(100vh - 82px - var(--strip-h) - 40px); border-radius: var(--r-l);
  display: flex; flex-direction: column; opacity: 0; transform: translateX(-10px) scale(.985);
  pointer-events: none; transition: opacity 220ms var(--ease), transform 260ms var(--ease); }
.flyout.open { opacity: 1; transform: none; pointer-events: auto; }
.pane-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
.pane-head .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--gold-2); background: radial-gradient(circle at 30% 20%, rgba(231, 199, 58, .22), rgba(231, 199, 58, .05));
  border: 1px solid rgba(231, 199, 58, .2); }
.pane-head .ic svg { width: 16px; height: 16px; }
.pane-head h2 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .01em; flex: 1; }
.pane-head h2 small { display: block; font-size: 11px; color: var(--t-3); font-weight: 400; }
.pane-head .x { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--t-3);
  display: grid; place-items: center; flex: none; }
.pane-head .x:hover { color: var(--t-1); background: rgba(255, 255, 255, .06); }
.pane-head .x svg { width: 14px; height: 14px; }
.pane-body { overflow: auto; padding: 0 16px 16px; min-height: 0; }
.pane-body::-webkit-scrollbar, .drawer-body::-webkit-scrollbar { width: 8px; }
.pane-body::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08);
  border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.sec { padding: 12px 0 6px; border-top: 1px solid var(--glass-edge); }
.sec:first-child { border-top: 0; padding-top: 4px; }
.sec > .caps { display: block; margin-bottom: 8px; }
.hint { color: var(--t-3); font-size: 11.5px; line-height: 1.45; margin: 6px 0 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { font: 500 12px var(--num); color: var(--gold-2); }

/* colour maps as a gallery */
.cmaps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmap { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 7px 8px 6px; border-radius: 9px;
  border: 1px solid transparent; background: rgba(255, 255, 255, .025); text-align: left; color: var(--t-2); min-width: 0; }
.cmap canvas { width: 100%; height: 7px; border-radius: 2px; display: block; }
.cmap span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmap:hover { border-color: var(--glass-edge-hi); color: var(--t-1); }
.cmap.on { border-color: var(--gold-line); background: rgba(231, 199, 58, .07); color: var(--t-1); }
/* style cards */
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style { height: 62px; border-radius: 11px; border: 1px solid var(--glass-edge); padding: 8px 10px;
  display: flex; align-items: flex-end; color: var(--t-1); font-size: 12px; font-weight: 500;
  background: #0a0a0d; position: relative; overflow: hidden; text-align: left; }
.style::before { content: ""; position: absolute; inset: 0; opacity: .9; }
.style span { position: relative; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.style[data-fx=standard]::before { background: linear-gradient(120deg, #2c6fb7, #53b36f 35%, #e6d54a 62%, #d9472f); }
.style[data-fx=hologram]::before { background: radial-gradient(circle at 50% 130%, rgba(231, 199, 58, .75), transparent 62%),
  repeating-linear-gradient(0deg, rgba(231, 199, 58, .2) 0 1px, transparent 1px 4px), #0b0b0f; }
.style[data-fx=xray]::before { background: radial-gradient(ellipse at 50% 55%, rgba(170, 205, 255, .6), transparent 62%), #08090d; }
.style[data-fx=edges]::before { inset: 9px; border-radius: 6px; border: 2px solid transparent;
  background: linear-gradient(#0a0a0d, #0a0a0d) padding-box, linear-gradient(120deg, #e7c73a, #3fbfa8) border-box; }
.style:hover { border-color: var(--glass-edge-hi); }
.style.on { border-color: var(--gold-3); box-shadow: 0 0 0 1px var(--gold-3), 0 10px 30px -12px rgba(231, 199, 58, .6); }
/* option tiles (layout, relief, lighting, backdrop) */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tile { border-radius: 10px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .025);
  padding: 9px 10px; text-align: left; color: var(--t-2); display: flex; flex-direction: column; gap: 6px; }
.tile svg { width: 18px; height: 18px; color: var(--t-3); }
.tile span { font-size: 12px; font-weight: 500; }
.tile:hover { border-color: var(--glass-edge-hi); color: var(--t-1); }
.tile.on { border-color: var(--gold-line); background: rgba(231, 199, 58, .08); color: var(--t-1); }
.tile.on svg { color: var(--gold-2); }
.swatch { height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* group rows (show / fade / hide) */
.grp { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .05); }
.grp:last-child { border-bottom: 0; }
.grp .nm { min-width: 0; cursor: pointer; }
.grp .nm b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp .nm small { color: var(--t-3); font-size: 11px; }
.grp .nm:hover b { color: var(--gold-2); }
.tri { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--glass-edge); }
.tri button { width: 28px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--t-4);
  display: grid; place-items: center; }
.tri button svg { width: 14px; height: 14px; }
.tri button:hover { color: var(--t-1); }
.tri button.on { background: rgba(255, 255, 255, .1); color: var(--gold-2); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--glass-edge-hi);
  background: transparent; color: var(--t-2); font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { color: var(--t-1); }
.chip.on { background: rgba(231, 199, 58, .12); border-color: var(--gold-line); color: var(--gold-1); }
.chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ── drawers (right) ───────────────────────────────────────────────────── */
.drawer { position: fixed; z-index: 29; right: calc(14px + var(--rail) + 12px); top: 82px;
  bottom: calc(var(--strip-h) + 28px); width: var(--drawer); border-radius: var(--r-l);
  display: flex; flex-direction: column; opacity: 0; transform: translateX(16px);
  pointer-events: none; transition: opacity 240ms var(--ease), transform 300ms var(--ease); }
.drawer.open { opacity: 1; transform: none; pointer-events: auto; }
.drawer-tools { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.drawer-body { overflow: auto; padding: 0 14px 16px; flex: 1; min-height: 0; }
.drawer .count { font: 500 12px var(--num); color: var(--t-3); }

/* finding cards */
.cards { display: flex; flex-direction: column; gap: 8px; }
.card { position: relative; border-radius: 12px; padding: 11px 12px 11px 16px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
  border: 1px solid var(--glass-edge); transition: border-color 160ms, transform 160ms var(--ease), background 160ms; }
.card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
  background: var(--sev, var(--sev-minor)); box-shadow: 0 0 12px var(--sev, transparent); }
.card:hover { border-color: var(--glass-edge-hi); transform: translateX(-2px); }
.card.on { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(231, 199, 58, .09), rgba(231, 199, 58, .03)); }
.card .l1 { display: flex; align-items: center; gap: 8px; }
.card .l1 b { font-weight: 500; font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .big { font: 300 22px/1 var(--num); letter-spacing: -.01em; color: var(--t-1); }
.card .big small { font-size: 12px; color: var(--t-3); margin-left: 2px; }
.card .l2 { color: var(--t-3); font: 400 11.5px var(--num); margin-top: 4px; letter-spacing: .02em; }
.card .bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); margin-top: 8px; overflow: hidden; }
.card .bar i { display: block; height: 100%; background: var(--sev); border-radius: 2px; }
.sevtag { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sev);
  padding: 4px 6px; border-radius: 5px; background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px currentColor; flex: none; }
.empty-note { color: var(--t-3); padding: 18px 4px; text-align: center; font-size: 12.5px; }

/* elements list */
.zone-h { display: flex; align-items: center; gap: 8px; padding: 10px 2px 6px; cursor: pointer; user-select: none; }
.zone-h svg { width: 12px; height: 12px; color: var(--t-3); transition: transform 200ms var(--ease); }
.zone-h.closed svg { transform: rotate(-90deg); }
.zone-h .caps { flex: 1; }
.zone-h .num { color: var(--t-4); font-size: 11px; }
.zone-h.closed + .zone-items { display: none; }
.el { display: grid; grid-template-columns: 62px 1fr 52px; gap: 10px; align-items: center; padding: 7px 8px;
  border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.el:hover { background: rgba(255, 255, 255, .04); }
.el.on { border-color: var(--gold-line); background: rgba(231, 199, 58, .06); }
.el b { font-weight: 500; }
.el b small { display: block; color: var(--t-3); font-size: 10.5px; font-weight: 400; white-space: nowrap; }
.el canvas { width: 100%; height: 22px; display: block; }
.el .v { font: 500 13px var(--num); text-align: right; color: var(--t-1); }
.el .v small { display: block; font-size: 10px; color: var(--t-3); }
.el.nodata { opacity: .45; }

/* ── legend ────────────────────────────────────────────────────────────── */
.legend { position: fixed; z-index: 28; left: calc(14px + var(--rail) + 12px); bottom: calc(var(--strip-h) + 28px);
  border-radius: 14px; padding: 10px 14px 9px; width: 290px; cursor: pointer;
  transition: border-color 160ms, opacity 200ms var(--ease), transform 240ms var(--ease); }
body.fly-open .legend { opacity: 0; transform: translateY(6px); pointer-events: none; }
.legend:hover { border-color: var(--glass-edge-hi); }
.legend .t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; gap: 8px; }
.legend .t b { font-weight: 500; font-size: 12.5px; }
.legend .t span { font: 500 11px var(--num); color: var(--t-3); white-space: nowrap; }
.legend .barwrap { position: relative; }
.legend canvas { width: 100%; height: 8px; display: block; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.legend .ticks { display: flex; justify-content: space-between; margin-top: 6px; font: 500 11px var(--num); color: var(--t-3); }
.legend .ticks span:first-child, .legend .ticks span:last-child { color: var(--t-1); }
.legend .band { position: absolute; top: -3px; height: 14px; border: 1.5px solid #fff; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 255, 255, .35); pointer-events: none; }

/* ── asset strip ───────────────────────────────────────────────────────── */
.strip { position: fixed; z-index: 28; left: 14px; right: 14px; bottom: 14px; height: var(--strip-h);
  border-radius: var(--r-l); padding: 10px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
.strip .t { display: flex; align-items: center; gap: 14px; min-width: 0; }
.strip .t .caps { color: var(--t-2); }
.strip .t .num { color: var(--t-3); font-size: 11.5px; white-space: nowrap; }
.strip .t .key { margin-left: auto; display: flex; gap: 14px; color: var(--t-3); font-size: 11px; align-items: center; }
.strip .t .key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.strip .t .key i { width: 8px; height: 8px; display: inline-block; transform: rotate(45deg); border-radius: 1px; }
.strip canvas { width: 100%; flex: 1; min-height: 0; display: block; cursor: pointer; }

/* ── the picked cell: a gold leader and a card ─────────────────────────── */
#leader { position: fixed; inset: 0; z-index: 25; pointer-events: none; width: 100vw; height: 100vh; overflow: visible; }
.callout { position: fixed; z-index: 26; width: 244px; border-radius: 14px; padding: 12px 14px;
  background: rgba(11, 11, 14, 0.9);
  opacity: 0; transform: translateY(4px); transition: opacity 200ms, transform 200ms var(--ease); pointer-events: none; }
.callout.show { opacity: 1; transform: none; pointer-events: auto; }
.callout .k { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.callout .k b { font-weight: 500; }
.callout .k span { font: 500 12px var(--num); color: var(--gold-2); }
.callout .v { font: 300 30px/1.1 var(--num); letter-spacing: -.01em; margin: 6px 0 2px; }
.callout .v small { font-size: 13px; color: var(--t-3); margin-left: 3px; }
.callout .m { color: var(--t-3); font: 400 11.5px var(--num); }
.callout .grid5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--glass-edge); }
.callout .grid5 div { font: 500 12px var(--num); }
.callout .grid5 div small { display: block; color: var(--t-4); font: 600 9px var(--sans); letter-spacing: .14em; }
.callout .x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--t-4); display: grid; place-items: center; }
.callout .x:hover { color: var(--t-1); background: rgba(255, 255, 255, .06); }
.callout .x svg { width: 12px; height: 12px; }
.hovertip { position: fixed; z-index: 27; pointer-events: none; padding: 5px 9px; border-radius: 8px;
  background: rgba(8, 8, 11, .86); border: 1px solid var(--glass-edge-hi); font: 500 12px var(--num);
  color: var(--t-1); white-space: nowrap; transform: translate(16px, 16px); }
.hovertip small { color: var(--t-3); margin-left: 6px; }

/* ── splash ────────────────────────────────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: radial-gradient(1200px 700px at 50% 42%, #16161c 0%, #08080b 55%, #030304 100%);
  transition: opacity 800ms var(--ease), visibility 800ms; }
.splash::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .06; mix-blend-mode: overlay; }
.splash.gone { opacity: 0; visibility: hidden; }
.splash .inner { position: relative; text-align: center; }
.splash .mark { width: min(320px, 70vw); margin: 0 auto; color: var(--gold-3); }
.splash .mark svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 28px rgba(231, 199, 58, .22)); }
.splash .mark .pulse { fill: none; stroke: var(--gold-1); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260 1400; stroke-dashoffset: 260; animation: sweep 2.4s var(--ease) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 240, 180, .9)); }
@keyframes sweep { from { stroke-dashoffset: 260; } to { stroke-dashoffset: -1400; } }
.splash .word { margin-top: 20px; font: 600 12px var(--sans); letter-spacing: .62em; color: var(--t-2); padding-left: .62em; }
.splash .prog { margin: 28px auto 0; width: 240px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .08);
  overflow: hidden; }
.splash .prog i { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width 300ms var(--ease); }
.splash .status { margin-top: 12px; color: var(--t-3); font-size: 12px; min-height: 18px; letter-spacing: .02em; }
.splash .open { margin-top: 34px; display: none; }
.splash.ask .open { display: block; }
.splash.ask .prog, .splash.ask .status { display: none; }
.splash .open p { color: var(--t-2); margin: 0 0 18px; font-size: 14px; font-weight: 300; }
.splash .open small { display: block; margin-top: 16px; color: var(--t-4); font-size: 11.5px; }
body.dragging .splash.ask .mark svg { filter: drop-shadow(0 0 34px rgba(231, 199, 58, .7)); }

/* ── toast / menu / help ───────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: calc(var(--strip-h) + 30px); transform: translateX(-50%); z-index: 70;
  max-width: min(560px, 86vw); padding: 11px 16px; border-radius: 12px; font-size: 12.5px; }
.toast.bad { border-color: rgba(255, 93, 82, .45); }
.menu { position: fixed; z-index: 75; min-width: 230px; padding: 6px; border-radius: 12px; }
.menu .hdr { padding: 6px 10px 8px; color: var(--t-3); font-size: 11.5px; border-bottom: 1px solid var(--glass-edge); margin-bottom: 4px; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: none; padding: 7px 10px; border-radius: 8px; color: var(--t-1); }
.menu button svg { width: 15px; height: 15px; color: var(--t-3); }
.menu button:hover { background: rgba(231, 199, 58, .1); }
.menu button:hover svg { color: var(--gold-2); }
dialog.help { width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; background: transparent; color: var(--t-1); }
dialog.help::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
dialog.help .glass { border-radius: var(--r-l); padding: 24px 28px; }
dialog.help h1 { margin: 0 0 4px; font-size: 22px; font-weight: 300; letter-spacing: .01em; }
dialog.help h3 { margin: 18px 0 8px; }
dialog.help ul { margin: 0; padding-left: 18px; color: var(--t-2); }
dialog.help li { margin-bottom: 5px; }
dialog.help li b { color: var(--t-1); font-weight: 500; }
dialog.help p { color: var(--t-2); }
dialog.help .act { text-align: right; margin-top: 18px; }

/* ── narrower screens (a laptop at 150 %: 1280 × ~650) ───────────────── */
@media (max-width: 1320px) {
  :root { --drawer: 350px; }
  .plate .prod { display: none; }
}
@media (max-width: 1100px) {
  .layers button small { display: none; }
  .layers button { padding: 0 12px; }
  .plate .who small { display: none; }
}
@media (max-height: 700px) {
  :root { --strip-h: 80px; }
}
@media (max-width: 860px) {
  .legend { width: 220px; }
  .strip .t .key { display: none; }
}

/* ══ build .542: overview, dossier, graphs & tables ══════════════════════ */
:root { --sheet-h: clamp(250px, 40vh, 430px); --sheet-space: 0px; --drawer-wide: min(620px, 47vw); }
body.sheet-open { --sheet-space: calc(var(--sheet-h) + 12px); }
body.sheet-open .legend { opacity: 0; transform: translateY(6px); pointer-events: none; }
.drawer { bottom: calc(var(--strip-h) + 28px + var(--sheet-space)); }
.drawer.wide { width: var(--drawer-wide); }
.flyout { max-height: calc(100vh - 82px - var(--strip-h) - 40px - var(--sheet-space)); }
.legend { bottom: calc(var(--strip-h) + 28px + var(--sheet-space)); }
.drawer { transition: opacity 240ms var(--ease), transform 300ms var(--ease), width 320ms var(--ease), bottom 320ms var(--ease); }
.legend { transition: border-color 160ms, opacity 200ms var(--ease), transform 240ms var(--ease), bottom 320ms var(--ease); }
.flyout { transition: opacity 220ms var(--ease), transform 260ms var(--ease), max-height 320ms var(--ease); }
.ibtn.sm { width: 30px; height: 30px; border-radius: 9px; }
.ibtn.sm svg { width: 16px; height: 16px; }
.ibtn[disabled] { opacity: .3; pointer-events: none; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
svg.flip { transform: scaleX(-1); }
.sel { height: 28px; border-radius: 8px; border: 1px solid var(--glass-edge); background: rgba(0, 0, 0, .35);
  color: var(--t-1); padding: 0 8px; font: 500 12px var(--sans); max-width: 240px; outline: none; }
.sel:focus { border-color: var(--gold-line); }
.sel option, .sel optgroup { background: #121216; color: var(--t-1); }

/* figures (overview, dossier) */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.kpi { position: relative; border-radius: 13px; padding: 11px 13px 11px; min-width: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 60%);
  border: 1px solid var(--glass-edge); overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); }
.kpi .kv { font: 300 27px/1.15 var(--num); letter-spacing: -.01em; margin-top: 5px; color: var(--t-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kv small { font: 400 13px var(--num); color: var(--t-3); margin-left: 4px; }
.kpi .ks { color: var(--t-3); font: 400 11.5px/1.4 var(--num); margin-top: 3px; letter-spacing: .01em; }
.kpi.go { cursor: pointer; transition: border-color 160ms, transform 160ms var(--ease); }
.kpi.go:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.kpi .go-ic { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; color: var(--t-4); }
.kpi .go-ic svg { width: 14px; height: 14px; }
.kpi.go:hover .go-ic { color: var(--gold-2); }
.kpi.hot .kv { background: linear-gradient(180deg, #fff3c4, #e7c73a); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 400; }
.kpi .sevs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.kpi .sevs span { display: inline-flex; align-items: center; gap: 5px; }
.kpi .sevs i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); display: inline-block; }
.lossbar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); margin-top: 7px; overflow: hidden; }
.lossbar i { display: block; height: 100%; border-radius: 2px; }

/* overview */
.ov-hero { padding: 2px 2px 10px; }
.ov-hero h1 { margin: 6px 0 4px; font: 300 25px/1.15 var(--sans); letter-spacing: -.005em; text-wrap: balance; }
.ov-hero p { margin: 0; color: var(--t-2); font-size: 12.5px; }
.ov-sec { padding: 14px 0 4px; border-top: 1px solid var(--glass-edge); margin-top: 10px; }
.ov-sec > .caps { display: block; margin-bottom: 8px; }
.zrow { display: grid; grid-template-columns: minmax(84px, 1.1fr) 1.4fr 62px 22px; gap: 10px; align-items: center;
  padding: 7px 6px; border-radius: 9px; cursor: pointer; }
.zrow:hover { background: rgba(255, 255, 255, .04); }
.zn b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn small, .zv small { color: var(--t-3); font-size: 10.5px; }
.zbar { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.zbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; box-shadow: 0 0 10px rgba(255, 255, 255, .08); }
.zbar .nom { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgba(231, 199, 58, .7); }
.zv { text-align: right; }
.zv b { font: 500 13px var(--num); display: block; }
.zdef { font: 600 10.5px/18px var(--num); text-align: center; border-radius: 9px; background: rgba(255, 93, 82, .16);
  color: #ffb0a9; height: 18px; }
.zdef.none { background: none; }
.top5 { display: flex; flex-direction: column; }
.t5 { display: grid; grid-template-columns: 64px 1fr auto 52px; gap: 10px; align-items: baseline; padding: 7px 6px;
  border-radius: 9px; cursor: pointer; }
.t5:hover { background: rgba(255, 255, 255, .04); }
.t5 b { font-weight: 500; }
.t5 small { color: var(--t-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t5 .v { font: 500 13px var(--num); }
.t5 .p { font: 500 12px var(--num); color: #ffb0a9; text-align: right; }
dl.facts { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; margin: 0; font-size: 12px; }
dl.facts dt { color: var(--t-3); }
dl.facts dd { margin: 0; color: var(--t-1); min-width: 0; overflow-wrap: anywhere; }
p.note { margin: 0; color: var(--t-1); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap;
  padding: 10px 12px; border-radius: 10px; background: rgba(231, 199, 58, .05); border-left: 2px solid var(--gold-4); }

/* the dossier */
.dossier { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.dz-nav { display: flex; align-items: center; gap: 4px; margin: -2px -4px 0; }
.dz-nav .btn { margin-right: auto; padding-left: 6px; }
.dz-count { color: var(--t-3); font-size: 11.5px; margin-right: 6px; }
.dz-head { position: relative; padding: 12px 14px 12px 18px; border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sev) 16%, transparent), transparent 60%),
              linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--glass-edge); }
.dz-head::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px;
  background: var(--sev); box-shadow: 0 0 14px var(--sev); }
.dz-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dz-cat { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t-3);
  padding: 4px 6px; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.dz-head h1 { margin: 9px 0 3px; font: 300 22px/1.2 var(--sans); text-wrap: balance; }
.dz-head h1 .id { font-weight: 500; color: var(--gold-2); margin-right: 10px; }
.dz-head p { margin: 0; color: var(--t-2); font-size: 12px; }
.dz-kpis .kv { font-size: 24px; }
.dz-act { display: flex; gap: 6px; flex-wrap: wrap; }
.dz-act .btn { height: 30px; font-size: 12px; }
.dz-sec { padding: 12px 0 2px; border-top: 1px solid var(--glass-edge); display: flex; flex-direction: column; gap: 8px; }
.dz-sec-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dz-sec-h small { color: var(--t-3); font: 400 11.5px var(--num); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-layer button { padding: 3px 9px; font-size: 11px; }
.heat { position: relative; height: 172px; }
.heat canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.xs-row { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 14px; align-items: center; }
.xsec { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 100%; }
.xsec canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.xs-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xs-r { display: grid; grid-template-columns: 62px auto 1fr; gap: 8px; align-items: baseline; }
.xs-r span { color: var(--t-3); font-size: 11.5px; }
.xs-r b { font: 500 14px var(--num); }
.xs-r small { color: var(--t-3); font: 400 11.5px var(--num); }
.xs-where { color: var(--t-3); font: 400 11.5px var(--num); }

/* charts */
.plot { position: relative; height: 100%; }
.plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.plot-tip { position: absolute; z-index: 3; pointer-events: none; padding: 6px 9px; border-radius: 8px;
  background: rgba(8, 8, 11, .9); border: 1px solid var(--glass-edge-hi); font: 500 12px var(--num); color: var(--t-1);
  white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); }
.plot-tip small { display: block; color: var(--t-3); font-weight: 400; margin-top: 1px; }
.plot-tip em { color: #b0c4de; font-style: normal; font-size: 11px; margin-left: 4px; }
.dossier .plot { height: 150px; }

/* the sheet */
.sheet { position: fixed; z-index: 28; left: calc(14px + var(--rail) + 12px); right: calc(14px + var(--rail) + 12px);
  bottom: calc(var(--strip-h) + 26px); height: var(--sheet-h); border-radius: var(--r-l);
  display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 240ms var(--ease), transform 300ms var(--ease); }
.sheet.open { opacity: 1; transform: none; pointer-events: auto; }
.sheet.glass { background: rgba(11, 11, 14, .9); }      /* charts read on a quieter glass */
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px 12px; min-width: 0; }
.sheet-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; }
.sheet-tabs button svg { width: 15px; height: 15px; }
.sheet-tools { flex: 1; min-width: 0; }
.sheet-tools-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sheet-tools-in .btn { margin-left: auto; }
.sheet-cap { color: var(--t-3); font: 400 11.5px var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sheet-body { flex: 1; min-height: 0; padding: 0 14px 12px; }
.sheet-graphs { height: 100%; display: grid; grid-template-columns: 1fr minmax(260px, 30%); gap: 16px; }
.sheet-plot { min-width: 0; min-height: 0; }
.sheet-side { min-width: 0; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--glass-edge);
  padding-left: 14px; min-height: 0; }
.sheet-side .xs-top { display: flex; align-items: center; justify-content: space-between; }
.sheet-side .xs-row { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 118px; }
.sheet-side .xsec { width: auto; height: 100%; max-height: 100%; justify-self: center; }
.sheet-side .xs-r { grid-template-columns: 1fr; gap: 0; }
.sheet-table { height: 100%; }

/* tables */
.dt-wrap { height: 100%; overflow: auto; border-radius: 10px; border: 1px solid var(--glass-edge); background: rgba(0, 0, 0, .18); }
.dt-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.dt-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 4px; }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.dt th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-3); background: #101014; padding: 9px 10px 8px;
  border-bottom: 1px solid var(--gold-line); white-space: nowrap; cursor: pointer; user-select: none; }
table.dt th small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--t-4); margin-left: 4px; }
table.dt th .arrow { font-style: normal; margin-left: 4px; color: var(--gold-3); font-size: 9px; }
table.dt th:hover, table.dt th.on { color: var(--t-1); }
table.dt th.n, table.dt td.n { text-align: right; }
table.dt td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .045); color: var(--t-1); white-space: nowrap; }
table.dt td.n { font: 500 12.5px var(--num); }
table.dt tr.go { cursor: pointer; }
table.dt tbody tr:hover td { background: rgba(255, 255, 255, .035); }
table.dt tbody tr.on td { background: rgba(231, 199, 58, .08); }
table.dt td.empty { text-align: center; color: var(--t-3); padding: 24px; }
table.dt .sevtag { font-size: 8.5px; padding: 3px 5px; }

/* the pinned cell's extras */
.callout .c-act { margin-top: 10px; display: flex; gap: 6px; }
.callout .m.filled { color: #b0c4de; margin-top: 6px; }

/* the strip's buttons */
.strip .t .acts { display: flex; gap: 4px; margin-left: 10px; }
.strip .t .acts .btn { height: 24px; padding: 0 9px; font-size: 11.5px; border-radius: 7px; }
.strip .t .acts .btn svg { width: 13px; height: 13px; }
.strip .t .acts .btn.on { border-color: var(--gold-line); background: rgba(231, 199, 58, .1); color: var(--gold-1); }

@media (max-width: 1100px) {
  .sheet-graphs { grid-template-columns: 1fr minmax(220px, 34%); }
  .kpi .kv { font-size: 23px; }
}
@media (max-height: 760px) {
  :root { --sheet-h: clamp(220px, 38vh, 330px); }
}

/* ══ build .543: the opening, Present ══════════════════════════════════ */
/* the opening: the asset's name over a gold rule, then the panels arrive */
.intro { position: fixed; left: 0; right: 0; top: 33%; z-index: 40; text-align: center; pointer-events: none;
  padding: 0 24px; opacity: 0; transform: translateY(10px);
  transition: opacity 700ms var(--ease), transform 1000ms var(--ease); }
.intro.in { opacity: 1; transform: none; }
.intro.out { opacity: 0; transform: translateY(-12px); transition-duration: 900ms; }
.intro .ik { font: 600 11px var(--sans); letter-spacing: .5em; padding-left: .5em; color: var(--gold-3);
  text-shadow: 0 0 18px rgba(231, 199, 58, .35); }
.intro .it { margin-top: 16px; font: 300 clamp(30px, 4.4vw, 56px)/1.08 var(--sans); letter-spacing: -.012em;
  color: var(--t-1); text-shadow: 0 2px 34px rgba(0, 0, 0, .75); text-wrap: balance; }
.intro .ir { display: block; width: min(320px, 50vw); height: 1px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-3) 30%, var(--gold-1) 50%, var(--gold-3) 70%, transparent);
  transform: scaleX(0); transition: transform 1300ms var(--ease) 120ms; }
.intro.in .ir { transform: scaleX(1); }
.intro .is { margin-top: 16px; font: 400 13.5px var(--sans); color: var(--t-2); letter-spacing: .1em; }
.top, .rail, .strip { transition: opacity 650ms var(--ease), transform 750ms var(--ease); }
.rail.right { transition-delay: 90ms; }
.strip { transition-delay: 160ms; }
/* .546: the page's state is 'opening' — on the body, '.intro' (the title
   card's own rule above) moved and faded the whole page while it loaded */
body.opening .top, body.opening .rail, body.opening .strip, body.opening .drawer.open, body.opening .legend { opacity: 0; }
body.opening .top { transform: translateY(-12px); }
body.opening .rail.left { transform: translate(-14px, -50%); }
body.opening .rail.right { transform: translate(14px, -50%); }
body.opening .strip { transform: translateY(14px); }
body.opening .drawer.open { transform: translateX(16px); }

/* Present: the stage cleared to the asset, the strip and the caption */
body.presenting .rail, body.presenting .flyout, body.presenting .drawer, body.presenting .legend,
body.presenting .sheet, body.presenting .callout, body.presenting .top .layers,
body.presenting .top .utils, body.presenting #leader, body.presenting .hovertip { opacity: 0 !important; pointer-events: none !important; }
body.presenting .strip .t .acts { visibility: hidden; }
.present { position: fixed; z-index: 35; left: 50%; bottom: calc(var(--strip-h) + 28px);
  width: min(660px, calc(100vw - 32px)); min-height: 168px; border-radius: var(--r-l); padding: 16px 20px 16px;
  display: flex; flex-direction: column; opacity: 0; transform: translate(-50%, 10px);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.present.show { opacity: 1; transform: translate(-50%, 0); }
.pr-cap { flex: 1; }
.pr-k { display: flex; align-items: center; gap: 10px; font: 600 10.5px var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-3); }
.present h2 { margin: 8px 0 4px; font: 300 26px/1.15 var(--sans); text-wrap: balance; }
.present h2 .id { font-weight: 500; color: var(--gold-2); margin-right: 10px; }
.present p { margin: 0; color: var(--t-2); font-size: 13px; line-height: 1.5; }
.pr-figs { display: flex; gap: 26px; margin-top: 12px; flex-wrap: wrap; }
.pr-f small { display: block; font: 600 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t-4); }
.pr-f b { font: 300 25px/1.15 var(--num); color: var(--t-1); }
.pr-f b span { font: 400 12px var(--num); color: var(--t-3); margin-left: 3px; }
p.pr-note { margin-top: 10px; color: var(--t-1); font-style: italic; }
.pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pr-dots { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pr-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .18); transition: background 200ms, box-shadow 200ms; }
.pr-dots button.f { background: color-mix(in srgb, var(--sev) 55%, transparent); }
.pr-dots button.done { opacity: .5; }
.pr-dots button.on { background: var(--gold-3); box-shadow: 0 0 0 3px rgba(231, 199, 58, .25); opacity: 1; }
.pr-ctl { display: flex; gap: 4px; flex: none; }
.pr-time { position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 1px;
  background: rgba(255, 255, 255, .06); overflow: hidden; }
.pr-time i { display: block; height: 100%; width: 0; background: var(--gold-grad); }
@media (prefers-reduced-motion: reduce) {
  .intro, .top, .rail, .strip, .present { transition: none !important; }
}

/* ══ build .544: colour — gold that lifts, teal and violet as jewels ═════ */
/* Gray 07.10.26: "The grey headlines/titles don't make things pop — we need
   to utilise varying shades of the Wasp gold, or perhaps add a very small
   touch of the purple and teal that we have used in the past".
   Labels move from grey to an antique gold, quieter text to bronze, section
   headings carry the findings diamond, selections glow gold.  Teal and violet
   keep their brand meaning — the bore (IR, ID) and the outside (OR, OD) — and
   appear only as small accents: the layer names, the key figures' tabs, two
   faint glows in the backdrop's corners. */
:root {
  --gold-0: #fff8e1;
  --champagne: #e9dcb3;
  --antique: #c2a352;          /* labels — 8 : 1 on the glass */
  --bronze: #9a7d3f;           /* quieter labels and units — 5 : 1 */
  --gold-hair: rgba(231, 199, 58, .28);
  --teal: #3fbfa8;             /* the bore: IR, ID */
  --violet: #a58bd6;           /* the outside: OR, OD */
  --icon: #cfc3a1;             /* idle icons: champagne, not grey */
}

/* labels: antique gold; section headings carry the diamond */
.caps { color: var(--antique); }
.sec > .caps, .ov-sec > .caps { display: flex; align-items: center; gap: 8px; }
.dz-sec-h > .caps { display: inline-flex; align-items: center; gap: 8px; }
dialog.help h3.caps { display: flex; align-items: center; gap: 8px; }
.sec > .caps::before, .ov-sec > .caps::before, .dz-sec-h > .caps::before, dialog.help h3.caps::before {
  content: ""; width: 5px; height: 5px; flex: none; border-radius: 1px; transform: rotate(45deg);
  background: var(--gold-grad); box-shadow: 0 0 8px rgba(231, 199, 58, .55); }
/* section rules: a gold hairline fading out, not a grey line */
.sec { border-top: 0; background: linear-gradient(90deg, var(--gold-hair), rgba(255, 255, 255, .05) 55%, transparent)
  top left / 100% 1px no-repeat; }
.sec:first-child { background: none; }
.ov-sec, .dz-sec { border-top: 0; background: linear-gradient(90deg, var(--gold-hair), rgba(255, 255, 255, .05) 55%, transparent)
  top left / 100% 1px no-repeat; }

/* headings and quieter text */
.pane-head h2 { font-size: 15px; }
.pane-head h2 small { color: var(--bronze); }
.plate .prod { color: var(--antique); }
.plate .who small { color: var(--bronze); }
.tip small, .hovertip small, .plot-tip small { color: var(--bronze); }
.menu .hdr { color: var(--antique); }
.legend .t span, .kpi .kv small, .card .big small, .callout .v small, .pr-f b span { color: var(--bronze); }
dl.facts dt, .xs-r span, .dz-count, .el .v small, .zn small, .zv small { color: var(--bronze); }
.zone-h svg, .tile svg, .field svg { color: var(--bronze); }
.splash .word { color: var(--champagne); }

/* icons: champagne at rest, gold-white on hover */
.ibtn { color: var(--icon); }
.ibtn:hover { color: var(--gold-1); }

/* a chosen option glows gold (tabs, sorts, units, the sheet's tabs) */
.seg button.on { color: var(--gold-1);
  background: linear-gradient(180deg, rgba(231, 199, 58, .2), rgba(231, 199, 58, .07));
  box-shadow: inset 0 0 0 1px rgba(231, 199, 58, .26); }

/* the layer names in their brand colours: wall gold, bore teal, outside violet */
.layers button b { color: var(--t-2); }
.layers button[data-k=WT] small { color: var(--antique); }
.layers button[data-k=IR] small, .layers button[data-k=ID] small { color: var(--teal); }
.layers button[data-k=OR] small, .layers button[data-k=OD] small { color: var(--violet); }
.layers button.on b, .layers button.on small { color: var(--ink-1); }
.k-WT { color: var(--antique) !important; }
.k-IR, .k-ID { color: var(--teal) !important; }
.k-OR, .k-OD { color: var(--violet) !important; }

/* key figures: a small tab of colour on each — gold, the worst severity,
   violet, teal — and gold labels */
.kpi { --accent: var(--gold-3); }
.kpi[data-accent=teal] { --accent: var(--teal); }
.kpi[data-accent=violet] { --accent: var(--violet); }
.kpi[data-accent=quiet] { --accent: var(--bronze); }
.kpi::before { content: ""; position: absolute; left: 13px; top: 0; width: 24px; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.kpi.go:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* the overview's title: warm white, a breath of gold */
.ov-hero h1 { background: linear-gradient(180deg, #fffdf6 20%, var(--champagne)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }

/* findings: the defect's own name in gold */
.card .cid { color: var(--gold-2); font-weight: 600; margin-right: 8px; }
.dz-cat { color: var(--antique); background: rgba(231, 199, 58, .07); box-shadow: inset 0 0 0 1px rgba(231, 199, 58, .16); }

/* tables: gold headings */
table.dt th { color: var(--antique); }
/* the pinned card above the colour key when they meet (it is what you are reading) */
.legend { z-index: 27; }
.callout { z-index: 28; }
#leader { z-index: 27; }
table.dt th small { color: var(--bronze); }
table.dt th.on, table.dt th:hover { color: var(--gold-1); }

/* the strip and Present */
.strip .t .caps { color: var(--antique); }
.pr-f small { color: var(--bronze); }

/* ══ build .545: the Smoothing panel, the centred value ═════════════════════ */
.sec .sub { color: var(--t-2); margin: 10px 0 6px; }
.midrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--antique); }
.midrow > span { flex: 1; min-width: 0; }
.midrow[hidden] { display: none; }
.midrow .btn { height: 26px; padding: 0 10px; font-size: 11.5px; }
.nd-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.legend .ticks span.mid { color: var(--gold-1); }

/* ══ build .546: the loading bar slides until real progress arrives ════════ */
.splash.wait .prog i { width: 34%; transition: none; animation: splash-wait 1.5s var(--ease) infinite; }
@keyframes splash-wait { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .splash.wait .prog i { animation: none; width: 18%; } }

/* ── .551 (A467): a finding's own measurements in its file ─────────────── */
.dz-meas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.dz-m { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0;
        border-bottom: 1px solid var(--glass-edge); font-size: 12px; min-width: 0; }
.dz-m span { color: var(--bronze, #9a7d3f); min-width: 0; }
.dz-m b { font-weight: 500; white-space: nowrap; }
.dz-m.tile b { color: var(--gold-3); font-weight: 600; }
@media (max-width: 720px) { .dz-meas { grid-template-columns: 1fr; } }

/* ══ build .548: tablets (A328) ═══════════════════════════════════════════ */
/* A finger, not a mouse (body.touch, set by lab.js): every control at least
   about 40–44 px, no hover tips, no text selection or callouts on a long
   press, fields at 16 px (Safari zooms the page into anything smaller).
   The safe areas keep clear of a tablet's status bar and home indicator —
   they are 0 everywhere else, so nothing moves on a desktop. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
#c { height: 100vh; height: 100dvh; }
.top { top: calc(14px + var(--sat)); left: calc(14px + var(--sal)); right: calc(14px + var(--sar)); }
.rail.left { left: calc(14px + var(--sal)); }
.rail.right { right: calc(14px + var(--sar)); }
.flyout { left: calc(14px + var(--sal) + var(--rail) + 12px); top: calc(82px + var(--sat));
  max-height: calc(100dvh - 82px - var(--sat) - var(--strip-h) - var(--sab) - 40px - var(--sheet-space)); }
.drawer { right: calc(14px + var(--sar) + var(--rail) + 12px); top: calc(82px + var(--sat));
  bottom: calc(var(--strip-h) + 28px + var(--sab) + var(--sheet-space)); }
.strip { left: calc(14px + var(--sal)); right: calc(14px + var(--sar)); bottom: calc(14px + var(--sab)); }
.legend { left: calc(14px + var(--sal) + var(--rail) + 12px); bottom: calc(var(--strip-h) + 28px + var(--sab) + var(--sheet-space)); }
.sheet { left: calc(14px + var(--sal) + var(--rail) + 12px); right: calc(14px + var(--sar) + var(--rail) + 12px);
  bottom: calc(var(--strip-h) + 26px + var(--sab)); }
.present { bottom: calc(var(--strip-h) + 28px + var(--sab)); }
.toast { bottom: calc(var(--strip-h) + 30px + var(--sab)); }
#err { bottom: calc(var(--strip-h) + 28px + var(--sab)); }
.strip .t .num { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* mouse-only and finger-only pieces */
body:not(.touch) .only-touch { display: none !important; }
body.touch .only-mouse { display: none !important; }

/* ── fingers ─────────────────────────────────────────────────────────── */
body.touch { --rail: 60px; --strip-h: 108px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.touch input, body.touch textarea, body.touch select { -webkit-user-select: text; user-select: text; }
body.touch .ibtn { width: 44px; height: 44px; border-radius: 12px; }
body.touch .ibtn svg { width: 21px; height: 21px; }
body.touch .ibtn.sm { width: 40px; height: 40px; border-radius: 11px; }
body.touch .ibtn.sm svg { width: 18px; height: 18px; }
body.touch .ibtn .badge { top: 2px; right: 2px; }
body.touch .btn { height: 40px; padding: 0 16px; font-size: 13.5px; border-radius: 10px; }
body.touch .btn.sm { height: 36px; padding: 0 12px; font-size: 13px; }
body.touch .seg { padding: 4px; }
body.touch .seg button { padding: 9px 13px; font-size: 13px; }
body.touch .utils .seg button { padding: 9px 11px; min-height: 36px; min-width: 40px; }
body.touch .chip { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 17px; }
body.touch .tri button { width: 40px; height: 34px; }
body.touch .tri button svg { width: 16px; height: 16px; }
body.touch .sw { padding: 10px 0; }
body.touch .sw .knob { width: 46px; height: 28px; border-radius: 14px; }
body.touch .sw .knob::after { top: 3px; left: 3px; width: 22px; height: 22px; }
body.touch .sw input:checked + .knob::after { transform: translateX(18px); }
body.touch .rng { padding: 8px 0; }
body.touch .rng input[type=range] { height: 36px; }
body.touch .rng input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11.5px; }
body.touch .field { height: 42px; }
body.touch .field input { font-size: 16px; }
body.touch .sel { height: 40px; font-size: 16px; }
body.touch .pane-head .x { width: 40px; height: 40px; }
body.touch .pane-head .x svg { width: 16px; height: 16px; }
body.touch .callout { width: 268px; }
body.touch .callout .x { top: 4px; right: 4px; width: 36px; height: 36px; }
body.touch .menu { min-width: 270px; padding: 8px; }
body.touch .menu button { padding: 13px 12px; font-size: 14.5px; }
body.touch .menu button svg { width: 18px; height: 18px; }
body.touch .strip .t .acts .btn { height: 38px; padding: 0 13px; font-size: 13px; }
body.touch .strip .t .acts .btn svg { width: 15px; height: 15px; }
body.touch .el { padding: 10px 8px; }
body.touch .card { padding: 13px 14px 13px 18px; }
body.touch .zone-h { padding: 14px 2px 10px; }
body.touch .zrow, body.touch .t5 { padding: 12px 6px; }
body.touch .cmap { padding: 10px 10px 9px; }
body.touch .tile { padding: 12px 12px; }
body.touch .dz-layer button { padding: 8px 12px; font-size: 12px; }
body.touch .dz-act .btn { height: 38px; }
body.touch table.dt td { padding: 11px 10px; }
body.touch table.dt th { padding: 12px 10px 11px; }
body.touch .layers button { min-width: 50px; }
body.touch .pr-dots { gap: 14px; }
body.touch .pr-dots button { position: relative; width: 11px; height: 11px; }
body.touch .pr-dots button::after { content: ""; position: absolute; inset: -12px; }   /* a finger-sized target */
body.touch .legend { padding: 12px 16px 11px; }
/* a mouse's hover does not stick to a finger */
body.touch .card:hover, body.touch .kpi.go:hover { transform: none; }
body.touch .hovertip { display: none !important; }
/* the graphs inside a finding's file scroll with the file (a sideways drag slides the graph) */
body.touch .dossier .plot canvas { touch-action: pan-y; }

/* an element row a finger has chosen: 'on its own' and its graphs */
.el .el-act { display: none; }
body.touch .el.on .el-act { display: flex; grid-column: 1 / -1; gap: 6px; padding-top: 6px; }

/* ── the top bar on a tablet held upright (about 744–834 px wide) ──────── */
@media (max-width: 900px) {
  :root { --drawer: min(340px, calc(100vw - 2 * var(--rail) - 96px)); --drawer-wide: min(560px, calc(100vw - var(--rail) - 64px)); }
  .top { gap: 8px; }
  .plate { padding: 0 12px; gap: 10px; }
  .plate .who { padding-left: 10px; }
  .layers button { padding: 0 9px; }
  .flyout { width: min(316px, calc(100vw - 2 * var(--rail) - 60px)); }
}

/* ── .548: what is shown on its own, and the way back ───────────────────── */
.iso-chip { position: fixed; z-index: 31; top: calc(80px + var(--sat)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px;
  font-size: 12.5px; color: var(--t-1); max-width: calc(100vw - 2 * var(--rail) - 80px); }
.iso-chip > i { width: 16px; height: 16px; color: var(--gold-2); flex: none; display: grid; }
.iso-chip > i svg { width: 16px; height: 16px; }
.iso-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.iso-chip .btn { flex: none; }
body.presenting .iso-chip, body.opening .iso-chip { opacity: 0; pointer-events: none; }

/* ── .548: a newer 3D Lab is ready ─────────────────────────────────────── */
.upd-chip { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--strip-h) + 30px + var(--sab)); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; font-size: 12.5px; }

/* ── .548: the 3D drawing taken away, and coming back ─────────────────── */
.gl-veil { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  background: rgba(3, 3, 4, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gl-veil > .glass { width: min(420px, calc(100vw - 32px)); border-radius: var(--r-l); padding: 22px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.gl-veil b { font-weight: 500; font-size: 15px; }
.gl-veil p { margin: 0; color: var(--t-2); font-size: 12.5px; }
.gl-spin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(231, 199, 58, .18);
  border-top-color: var(--gold-3); animation: gl-spin 900ms linear infinite; }
@keyframes gl-spin { to { transform: rotate(360deg); } }

/* ── .548: the library — the inspections on this device ─────────────────── */
.library { position: fixed; inset: 0; z-index: 88; overflow: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(1200px 700px at 50% 24%, #18181f 0%, #09090c 55%, #030304 100%);
  padding: calc(28px + var(--sat)) calc(20px + var(--sar)) calc(28px + var(--sab)) calc(20px + var(--sal));
  transition: opacity 320ms var(--ease); }
.library::before { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }
.library.leaving { opacity: 0; }
.lib-inner { position: relative; max-width: 1080px; margin: 0 auto; }
.lib-head { display: flex; align-items: center; gap: 16px; padding: 8px 0 26px; }
.lib-mark { width: 148px; color: var(--gold-3); }
.lib-mark svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(231, 199, 58, .22)); }
.lib-word { font: 600 12px var(--sans); letter-spacing: .5em; color: var(--champagne); padding-left: 16px;
  border-left: 1px solid var(--glass-edge-hi); }
.lib-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lib-bar h1 { margin: 0; font: 300 30px/1.15 var(--sans); letter-spacing: -.01em;
  background: linear-gradient(180deg, #fffdf6 20%, var(--champagne)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lib-bar p { margin: 6px 0 0; color: var(--antique); font-size: 13px; }
.lib-add svg { width: 16px; height: 16px; }
.lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.lib-card { border-radius: var(--r-l); padding: 16px 16px 12px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 160ms, transform 160ms var(--ease); min-width: 0; }
.lib-card::after { left: 20px; right: 20px; }
.lib-card:active { transform: scale(.99); }
.lib-card.fresh { border-color: var(--gold-line); box-shadow: var(--shadow), 0 0 0 1px var(--gold-line); }
.lib-c1 { display: flex; align-items: flex-start; gap: 10px; }
.lib-c1 h2 { margin: 0; flex: 1; min-width: 0; font: 400 19px/1.25 var(--sans); color: var(--t-1); text-wrap: balance; }
.lib-go { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--ink-1);
  background: var(--gold-grad); box-shadow: 0 6px 18px -6px rgba(231, 199, 58, .6); }
.lib-go svg { width: 16px; height: 16px; }
.lib-sub { color: var(--antique); font-size: 12.5px; }
.lib-c2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.lib-def { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--num); color: var(--t-1); }
.lib-def i { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); background: var(--sev-major);
  box-shadow: 0 0 8px var(--sev-major); }
.lib-def.sev i { background: var(--sev-severe); box-shadow: 0 0 8px var(--sev-severe); }
.lib-def.quiet i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sev-minor); }
.lib-facts { color: var(--bronze); font: 400 12px var(--num); }
.lib-c3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px;
  padding-top: 9px; border-top: 1px solid var(--glass-edge); color: var(--t-3); font-size: 11.5px; }
.lib-rm { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--t-3);
  font-size: 12px; padding: 8px 6px; margin: -8px -6px; border-radius: 8px; }
.lib-rm svg { width: 13px; height: 13px; }
.lib-rm.armed { color: #ffb0a9; background: rgba(255, 93, 82, .12); }
.lib-empty { text-align: center; padding: 56px 20px; color: var(--t-2); max-width: 560px; margin: 0 auto; }
.lib-empty p { margin: 8px 0; font-size: 14px; line-height: 1.55; }
.lib-empty b { color: var(--t-1); font-weight: 500; }
.lib-empty-ic { width: 46px; height: 46px; margin: 0 auto 10px; color: var(--gold-3); opacity: .8; }
.lib-empty-ic svg { width: 100%; height: 100%; }
.lib-busy { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px;
  background: rgba(231, 199, 58, .06); border: 1px solid var(--gold-line); color: var(--t-1); font-size: 13px; }
.lib-busy span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-busy .prog { width: 180px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; flex: none; }
.lib-busy .prog i { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width 200ms var(--ease); }
.lib-foot { margin: 22px 0 0; color: var(--bronze); font: 400 12px var(--num); text-align: center; }
@media (hover: hover) { .lib-card:hover { border-color: var(--gold-line); transform: translateY(-1px); } .lib-rm:hover { color: var(--t-1); } }
@media (max-width: 700px) {
  .lib-list { grid-template-columns: 1fr; }
  .lib-bar h1 { font-size: 25px; }
}