/* <<<REGION core>>> */
/* =====================================================================================
   FakeRadar — design system "Bento Calm" (approved direction B)
   Everything is a tile: chunky, rounded, tinted, borderless. Depth comes from tonal
   layering (page < tile < sub-tile < control), never from hard borders; the only shadows
   are on floating layers (modal sheet, drawer, toasts) and a whisper under a selected item.
   Dark (default): soft slate tiles on a deeper slate. Light: pastel tiles on warm white.

   This region (core) owns: tokens · base · shell · primitives · overlays · login · the
   legacy class contract. View regions below may only add rules for their own classes.
   Guide for view authors: COMPONENTS.md (redesign kit, next to the static folder).
   ===================================================================================== */

/* ---------- 1. tokens (values of mock B, NOTES.md §2) ---------- */
:root {
  color-scheme: dark;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, monospace;

  /* surfaces */
  --page: #101319;          /* deeper slate */
  --tile: #1C2029;          /* tile */
  --tile-h: #20252F;        /* tile, hovered */
  --tile-sel: #252B3D;      /* selected item */
  --tile-up: #353B4B;       /* raised pill on a track (active segment / tab), modal footer rail */
  --sheet: #1C2029;         /* modal sheet, drawer */
  --ink: #0A0C10;           /* brand tile — dark in BOTH themes, carries the logo */
  --ink-2: #AEB6C6;         /* secondary text on the brand tile */
  --sub: rgba(255,255,255,.055);  /* sub-tile laid on any tile (also on tinted ones) */
  --ctl: rgba(255,255,255,.085);  /* control fill (buttons, chips, selects) */
  --ctl-h: rgba(255,255,255,.14);
  --well: rgba(0,0,0,.26);        /* tracks and wells (segmented track, key caps, fold) */
  --hair: rgba(255,255,255,.09);  /* chart gridlines, the capsule separator */

  /* ink */
  --text: #EDF0F5;
  --text-2: #C1C8D4;
  --text-3: #A3ABBB;
  --ring: #747D90;          /* 3:1 boundary of text-entry fields and off-state toggles */
  --focus: #A7B2FF;

  /* accent (primary action, selection) — iris, deliberately not the brand red */
  --accent: #A7B2FF; --accent-fill: #A7B2FF; --accent-fill-h: #BCC5FF; --on-accent: #151833;
  /* semantic ink */
  --ok: #73DDA9; --warn: #F3C267; --danger: #FFA1AA; --info: #7FC6FF;
  --ok-fill: #4CC993;
  --danger-fill: #E5132B; --on-danger: #FFFFFF;
  /* opaque tinted tiles (hue 12 % over --tile) */
  --t-accent: #2D3243; --t-ok: #263738; --t-warn: #363330; --t-danger: #372D36; --t-info: #283443;
  /* translucent tints for chips, tinted sub-tiles and tinted buttons */
  --a-accent: rgba(167,178,255,.16); --a-ok: rgba(115,221,169,.15); --a-warn: rgba(243,194,103,.15);
  --a-danger: rgba(255,142,153,.14); --a-info: rgba(127,198,255,.15);
  /* tinted sub-tiles inside a tile (dark: an overlay that adapts to the tile below; light: the clean pastel) */
  --s-accent: var(--a-accent); --s-ok: var(--a-ok); --s-warn: var(--a-warn); --s-danger: var(--a-danger); --s-info: var(--a-info);

  --brand: #E5132B;         /* signal colour: logo, wordmark, destructive confirm — nothing else */

  /* one colour per platform */
  --p-telegram: #5BB8F0; --p-tiktok: #FF7EB0; --p-instagram: #D592FF; --p-x: #D5DBE6;
  --p-youtube: #FF8078; --p-facebook: #7AA7FF; --p-web: #A3ACBB;
  --on-puck: #101319;
  --pf-mix: 16%;            /* how much platform colour a source tile carries */

  /* chart series (validated: dataviz palette slots 1–2 on --tile) */
  --series-1: #3987E5; --series-2: #D95926;

  /* shape */
  --r-tile: 24px; --r-sub: 16px; --r-pill: 999px;
  --gap: 12px;
  --shadow-float: 0 28px 70px -18px rgba(0,0,0,.62), 0 6px 18px -8px rgba(0,0,0,.4);
  --shadow-sel: 0 12px 28px -16px rgba(0,0,0,.7);
  --shadow-up: 0 1px 2px rgba(0,0,0,.22);
  --scrim: rgba(7,9,13,.64);
  --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #FBF9F5;          /* warm white */
  --tile: #F2EEE7;          /* sand pastel */
  --tile-h: #EDE8E0;
  --tile-sel: #FFFFFF;
  --tile-up: #FFFFFF;
  --sheet: #FBF9F5;
  --sub: rgba(255,255,255,.74);
  --ctl: rgba(29,33,43,.068);
  --ctl-h: rgba(29,33,43,.115);
  --well: rgba(29,33,43,.075);
  --hair: rgba(29,33,43,.11);

  --text: #1D212B;
  --text-2: #474E5C;
  --text-3: #596170;
  --ring: #7B818D;
  --focus: #4A45C9;

  --accent: #433EBD; --accent-fill: #4F4BD6; --accent-fill-h: #413DC2; --on-accent: #FFFFFF;
  --ok: #155C38; --warn: #7A4D00; --danger: #A81F2A; --info: #17568F;
  --ok-fill: #1F8A57;
  --t-accent: #E7E5FB; --t-ok: #DCF1E3; --t-warn: #FAEAC6; --t-danger: #FBE2E1; --t-info: #DEEBFA;
  --a-accent: rgba(79,75,214,.115); --a-ok: rgba(31,138,87,.14); --a-warn: rgba(214,150,10,.19);
  --a-danger: rgba(214,48,60,.11); --a-info: rgba(40,120,214,.12);
  --s-accent: var(--t-accent); --s-ok: var(--t-ok); --s-warn: var(--t-warn); --s-danger: var(--t-danger); --s-info: var(--t-info);

  --p-telegram: #1479B8; --p-tiktok: #C42A6B; --p-instagram: #9A3CC9; --p-x: #2A303C;
  --p-youtube: #C8302B; --p-facebook: #2B5FD9; --p-web: #5F6776;
  --on-puck: #FFFFFF;
  --pf-mix: 13%;

  --series-1: #2A78D6; --series-2: #D95926;

  --shadow-float: 0 28px 70px -18px rgba(46,38,22,.30), 0 6px 18px -8px rgba(46,38,22,.16);
  --shadow-sel: 0 14px 30px -18px rgba(46,38,22,.38);
  --shadow-up: 0 1px 2px rgba(46,38,22,.14);
  --scrim: rgba(52,45,32,.36);
}

/* derived tokens (literal values of the mock, named so that views can reuse them) */
:root {
  --r-rail: 22px;           /* strips, toolbars, tab rails, sheet footer */
  --r-sm: 12px;             /* small sub-tiles, table row bands, kv rows */
  --r-sheet: 30px;          /* modal sheet, drawer */
  --danger-fill-h: #C90F24; /* destructive button, hovered */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1C8D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* mask icons for pseudo-elements: paint them with background-color (a token), mask-image: var(--ic-…) */
  --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ic-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  --ic-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="light"] {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23474E5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* transitional aliases — old token names still read by legacy templates and the graph canvas
   (graphView() reads --surface). Do not use them in new code; delete when every view is rebuilt. */
:root {
  --bg: var(--page); --surface: var(--tile); --surface-2: var(--sub); --surface-3: var(--tile-up);
  --border: var(--hair); --border-strong: var(--ring);
  --accent-weak: var(--a-accent); --info-weak: var(--a-info); --ok-weak: var(--a-ok);
  --warn-weak: var(--a-warn); --danger-weak: var(--a-danger); --muted-weak: var(--ctl);
  --radius: var(--r-tile); --radius-sm: var(--r-sub);
}

/* ---------- 2. base and typography ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--page); }
body { min-height: 100vh; background: var(--page); color: var(--text); font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, dl, dd, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 16px; line-height: 1.35; }
h3 { font-size: 14px; line-height: 1.4; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.sr-only:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; contain: strict; }
::selection { background: color-mix(in srgb, var(--accent) 36%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* icons: one outline family (24×24, 2 px stroke, round caps) — svgI() / I in app.js */
.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
* { scrollbar-width: thin; scrollbar-color: var(--ring) transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@keyframes fr-spin { to { transform: rotate(360deg); } }
@keyframes fr-pulse { 50% { opacity: .35; } }
@keyframes fr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fr-slide { from { opacity: .4; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* ---------- 3. shell: a floating column of tiles + a floating header ---------- */
.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--gap); padding: var(--gap);
  min-height: 100vh; align-items: start; }
.side { position: sticky; top: var(--gap); height: calc(100vh - 2 * var(--gap)); display: flex;
  flex-direction: column; gap: 10px; min-height: 0; }
.brand-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
  padding: 16px 16px 15px; border-radius: var(--r-tile); background: var(--tile); text-decoration: none; flex: none; }
.brand-tile:hover { text-decoration: none; }
.brand-row { display: flex; align-items: center; gap: 11px; }
.logo { width: 38px; height: 38px; flex: none; display: block; }
.wordmark { font: 800 22px/1 var(--display); letter-spacing: -.02em; color: var(--text); }
.wordmark b { font-weight: 800; color: var(--brand); }
.tagline { font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
/* the navigation scrolls inside the column when it is taller than the room left (never the page) */
.nav { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; flex: 0 1 auto;
  overscroll-behavior: contain; border-radius: var(--r-tile); }
.nav-group { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-tile);
  background: var(--tile); flex: none; }
.nav-label { padding: 5px 10px; font-size: 12px; font-weight: 650; color: var(--text-3); }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px 0 10px; border-radius: 14px;
  color: var(--text); font-size: 13.5px; font-weight: 550; text-decoration: none;
  transition: background .14s var(--ease), color .14s var(--ease); }
[data-theme="light"] .nav-item { color: var(--text); }
.nav-item:hover { background: var(--ctl); color: var(--text); text-decoration: none; }
.nav-item > .i { width: 18px; height: 18px; color: var(--text-3); }
.nav-item .count { margin-left: auto; min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; background: var(--ctl); color: var(--text); font-size: 12px;
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-item .count:empty { display: none; }
.nav-item .count.run { background: var(--a-warn); color: var(--warn); }
.nav-item > .ext { margin-left: auto; width: 14px; height: 14px; color: var(--text-3); }
.nav-item.active { background: var(--a-accent); color: var(--text); font-weight: 650; }
.nav-item.active > .i { color: var(--accent); }
.nav-item.active .count:not(.run) { background: var(--accent-fill); color: var(--on-accent); }
.cycle-tile { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--r-tile);
  background: var(--t-ok); color: var(--text); text-decoration: none; font-size: 12.5px; line-height: 1.4; flex: none; }
.cycle-tile:hover { text-decoration: none; filter: brightness(1.06); }
.cycle-tile .ico { background: var(--a-ok); color: var(--ok); }
.cycle-tile .cy-txt { display: flex; flex-direction: column; min-width: 0; }
.cycle-tile .cy-txt b { font-weight: 650; }
.cycle-tile .cy-txt span { color: var(--text-2); }
.cycle-tile.run { background: var(--t-warn); }
.cycle-tile.run .ico { background: var(--a-warn); color: var(--warn); }
.cycle-tile.run .ico .i { animation: fr-spin 2.4s linear infinite; }
.cycle-tile.off { background: var(--tile); }
.cycle-tile.off .ico { background: var(--ctl); color: var(--text-2); }
/* short screens: the column tightens before the navigation has to scroll
   (1366×768 still fits a fourth navigation group of two items) */
@media (max-height: 820px) {
  .side { gap: 8px; }
  .brand-tile { gap: 7px; padding: 13px 14px 12px; }
  .nav { gap: 8px; }
  .nav-group { padding: 6px; }
  .nav-label { padding: 3px 10px 2px; }
  .nav-item { min-height: 34px; }
  .cycle-tile { padding: 10px 12px; }
  .cycle-tile .ico { width: 30px; height: 30px; border-radius: 11px; }
}
@media (max-height: 700px) {
  .tagline, .nav-label { display: none; }
}

.main { min-width: 0; width: 100%; max-width: 1480px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--gap); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-left: 6px; }
.top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top h1 { min-width: 0; font: 700 25px/1.15 var(--display); letter-spacing: -.022em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.page-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-tools:empty { display: none; }
.page-sub { padding-top: 4px; font-size: 13.5px; color: var(--text-3); white-space: nowrap; }   /* e.g. a filtered count */
.capsule { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--r-pill); background: var(--tile); flex: none; }
.capsule .sep { width: 1px; height: 20px; margin: 0 2px 0 -2px; background: var(--hair); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--a-accent); color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.user-name { max-width: 240px; padding: 0 2px 0 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px;
  font-weight: 600; white-space: nowrap; }
:root:not([data-theme="light"]) .th-to-dark, :root[data-theme="light"] .th-to-light { display: none; }
.view { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; outline: none; }
.view > section { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* fill mode: a view whose root element is .fill-view gets exactly the viewport height and scrolls
   inside its own panes (.pane); the header stays put and the window does not scroll. */
.main:has(> .view > .fill-view) { height: calc(100vh - 2 * var(--gap)); min-height: 520px; }
.view:has(> .fill-view) { flex: 1 1 auto; min-height: 0; }
.fill-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.grow-pane { flex: 1 1 auto; min-height: 0; }
.pane { min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* ---------- 4. primitives ---------- */
/* tile and sub-tile (the mock's .sub is .subtile here: .sub is the legacy KPI caption) */
.tile { min-width: 0; padding: 18px; border-radius: var(--r-tile); background: var(--tile); }
.tile.t-accent { background: var(--t-accent); } .tile.t-ok { background: var(--t-ok); } .tile.t-warn { background: var(--t-warn); }
.tile.t-danger { background: var(--t-danger); } .tile.t-info { background: var(--t-info); }
.subtile { min-width: 0; padding: 12px 14px; border-radius: var(--r-sub); background: var(--sub); }
.subtile.t-accent { background: var(--s-accent); } .subtile.t-ok { background: var(--s-ok); } .subtile.t-warn { background: var(--s-warn); }
.subtile.t-danger { background: var(--s-danger); } .subtile.t-info { background: var(--s-info); }
.tile-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 28px; }
.tile-h h2, .tile-h h3 { font: 650 15.5px/1.3 var(--font); letter-spacing: -.005em; }
.tile-h .grow { flex: 1; }
.tile-h .note { font-size: 12.5px; color: var(--text-3); }
.label { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.grow { flex: 1 1 auto; }

/* icon holders: .puck (round) and .ico (rounded square); tone modifiers tint them */
.puck, .ico { display: grid; place-items: center; flex: none; background: var(--ctl); color: var(--text-2); }
.puck { width: 32px; height: 32px; border-radius: 50%; }
.puck .i { width: 17px; height: 17px; }
.puck.lg { width: 40px; height: 40px; } .puck.lg .i { width: 20px; height: 20px; }
.puck.sm { width: 24px; height: 24px; } .puck.sm .i { width: 13px; height: 13px; }
.puck.xs { width: 18px; height: 18px; } .puck.xs .i { width: 11px; height: 11px; stroke-width: 2.4; }
.ico { width: 34px; height: 34px; border-radius: 12px; }
.ico .i { width: 18px; height: 18px; }
:is(.puck, .ico).accent { background: var(--a-accent); color: var(--accent); }
:is(.puck, .ico).ok { background: var(--a-ok); color: var(--ok); }
:is(.puck, .ico).warn { background: var(--a-warn); color: var(--warn); }
:is(.puck, .ico).danger { background: var(--a-danger); color: var(--danger); }
:is(.puck, .ico).info { background: var(--a-info); color: var(--info); }
/* platform colour: [data-pf] sets --pf; .puck.plat is the solid platform puck (pfPuck() in app.js) */
[data-pf="telegram"] { --pf: var(--p-telegram); } [data-pf="tiktok"] { --pf: var(--p-tiktok); }
[data-pf="instagram"] { --pf: var(--p-instagram); } [data-pf="x"] { --pf: var(--p-x); }
[data-pf="youtube"] { --pf: var(--p-youtube); } [data-pf="facebook"] { --pf: var(--p-facebook); } [data-pf="web"] { --pf: var(--p-web); }
.puck.plat { background: var(--pf, var(--p-web)); color: var(--on-puck); }
:root[data-theme="light"] [data-pf="x"] { --pf-mix: 8%; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border: 0;
  border-radius: var(--r-pill); background: var(--ctl); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none; transition: background .14s var(--ease), transform .08s; }
.btn:hover { background: var(--ctl-h); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .i { width: 16px; height: 16px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn.icon { width: 36px; padding: 0; } .btn.sm.icon { width: 32px; }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--ctl); color: var(--text); }
.btn.primary { background: var(--accent-fill); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-fill-h); }
.btn.ok { background: var(--a-ok); color: var(--ok); }
.btn.ok:hover { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.btn.danger { background: var(--a-danger); color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 25%, transparent); }
.btn.destructive { background: var(--danger-fill); color: var(--on-danger); }   /* confirm of an irreversible action — the one solid brand-red control */
.btn.destructive:hover { background: var(--danger-fill-h); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn kbd { margin-right: -4px; }

/* chips (the legacy .badge renders as a chip) */
.chip, .badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--ctl); color: var(--text-2); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  vertical-align: middle; }
:is(.chip, .badge) .i { width: 13px; height: 13px; }
:is(.chip, .badge).accent { background: var(--a-accent); color: var(--accent); }
:is(.chip, .badge).ok { background: var(--a-ok); color: var(--ok); }
:is(.chip, .badge).warn { background: var(--a-warn); color: var(--warn); }
:is(.chip, .badge).danger { background: var(--a-danger); color: var(--danger); }
:is(.chip, .badge).info { background: var(--a-info); color: var(--info); }
a.chip:hover { text-decoration: none; background: var(--ctl-h); color: var(--text); }
.chip.muted { color: var(--text-2); }
/* removable chip: <span class="chip">2026-11-09<button class="del" type="button" aria-label="…">${I.x}</button></span> */
.chip:has(> button) { height: 32px; padding-left: 12px; font-size: 12.5px; }
.chip > button { width: 32px; height: 32px; margin: 0 -9px 0 -3px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: inline-grid; place-items: center; color: var(--text-2); }
.chip > button:hover { background: var(--ctl-h); color: var(--danger); }
.chip > button .i { width: 14px; height: 14px; }
/* toggle chip: <label class="chip"><input type="checkbox"> text</label> */
label.chip { height: 32px; padding: 0 12px 0 10px; gap: 7px; font-size: 12.5px; cursor: pointer; }
label.chip:hover { background: var(--ctl-h); }
label.chip:has(> input:checked) { background: var(--a-accent); color: var(--text); }
label.chip:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
label.chip > input { margin: 0; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* key cap and key hints */
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--well); color: var(--text-2); font: 600 12px/1 var(--mono); }
kbd .i { width: 12px; height: 12px; stroke-width: 2.4; }
.keys { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-3); }

/* a 3-step level glyph (signal bars) and a 3-segment criteria meter: level is never colour alone */
.lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.lvl i { width: 4px; border-radius: 2px; background: currentColor; opacity: .3; }
.lvl i:nth-child(1) { height: 6px; } .lvl i:nth-child(2) { height: 10px; } .lvl i:nth-child(3) { height: 14px; }
.lvl i.on { opacity: 1; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 18px; height: 6px; border-radius: 3px; background: currentColor; opacity: .26; }
.meter i.on { opacity: 1; }
.meter.sm i { width: 15px; height: 5px; }
.meter.sev-3, .sev-3 .meter { color: var(--danger); }
.meter.sev-2, .meter.sev-1, .sev-2 .meter, .sev-1 .meter { color: var(--warn); }
.meter.sev-0, .sev-0 .meter { color: var(--text-3); }

/* text-entry controls: a soft fill plus a quiet 3:1 ring (the only outlines in the system).
   Bare elements get the look through :where() (specificity 0), so any class rule overrides it. */
:where(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="tel"]),
.input { height: 38px; max-width: 100%; min-width: 0; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--ctl);
  box-shadow: inset 0 0 0 1px var(--ring); font-size: 13.5px; color: var(--text); outline: none; }
:where(select), .select { appearance: none; -webkit-appearance: none; height: 38px; max-width: 100%; min-width: 0; padding: 0 36px 0 14px;
  border: 0; border-radius: var(--r-pill); background-color: var(--ctl); background-image: var(--chev); background-repeat: no-repeat;
  background-position: right 12px center; background-size: 14px 14px; box-shadow: inset 0 0 0 1px var(--ring);
  font-size: 13.5px; font-weight: 550; color: var(--text); text-overflow: ellipsis; cursor: pointer; outline: none; }
:where(select):hover, .select:hover { background-color: var(--ctl-h); }
:where(textarea) { display: block; width: 100%; min-height: 72px; padding: 10px 14px; border: 0; border-radius: var(--r-sub);
  background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ring); font-size: 13.5px; line-height: 1.5; color: var(--text);
  resize: vertical; outline: none; }
:where(input, select, textarea):focus-visible, .input:focus-visible, .select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
:where(input, textarea)::placeholder { color: var(--text-3); opacity: 1; }
:where(input, select, textarea):disabled { color: var(--text-2); cursor: default; box-shadow: none; }
select option { background: var(--tile); color: var(--text); }
:where(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; vertical-align: -3px; accent-color: var(--accent-fill); cursor: pointer; }
:where(input[type="range"], progress) { accent-color: var(--accent-fill); }
::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
audio { display: block; width: 100%; max-width: 100%; height: 40px; }
/* search: <label class="search">${I.search}<input class="input" type="search" …><kbd>/</kbd></label> */
.search { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 160px; }
.search .input, .search input { width: 100%; padding: 0 40px 0 38px; }
.search > .i { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.search kbd { position: absolute; right: 9px; }

/* field tile: the label lives inside the tile, the whole tile is the control.
   label.field = the tile (the legacy <label class="field"><span>Ad <span class="hint">…</span></span><input></label> works as is);
   div.field   = a labelled group (label on top, its own controls below). */
label.field, .field.is-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px 11px; border-radius: var(--r-sub);
  background: var(--sub); box-shadow: inset 0 0 0 1px var(--ring); cursor: text; }
label.field:focus-within, .field.is-focus { box-shadow: inset 0 0 0 2px var(--focus); }
label.field:has(> :disabled) { background: var(--ctl); box-shadow: none; cursor: default; }
div.field:not(.is-tile) { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > .lab, .field > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px;
  font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.hint { font-size: 12px; font-weight: 400; color: var(--text-3); }
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; height: auto; min-height: 24px; padding: 0;
  border: 0; border-radius: 0; background-color: transparent; box-shadow: none; font-size: 14.5px; line-height: 1.5; color: var(--text); outline: none; }
.field textarea { min-height: 48px; resize: vertical; overflow: auto; }
.field select { padding-right: 26px; font-weight: 550; background-image: var(--chev); background-repeat: no-repeat;
  background-position: right 0 center; background-size: 14px 14px; }
.field :disabled { color: var(--text-2); }
div.field:not(.is-tile) :is(input:not([type="checkbox"]):not([type="radio"]), select) { width: auto; }

/* segmented control / tab rail: a well with one raised pill (.segmented is the legacy name of .seg) */
.seg, .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--well); flex: none; max-width: 100%; }
:is(.seg, .segmented) button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .14s var(--ease), color .14s var(--ease); }
:is(.seg, .segmented) button:hover { color: var(--text); }
:is(.seg, .segmented) button.on, :is(.seg, .segmented) button[aria-pressed="true"] { background: var(--tile-up); color: var(--text); font-weight: 650;
  box-shadow: var(--shadow-up), inset 0 0 0 1.5px var(--accent); }
.tabs { display: flex; gap: 2px; padding: 5px; border-radius: var(--r-rail); background: var(--tile); overflow-x: auto; }
.tabs button, .tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.tabs :is(button, a):hover { background: var(--ctl); color: var(--text); text-decoration: none; }
.tabs :is(button, a):is(.on, [aria-selected="true"]) { background: var(--tile-up); color: var(--text); font-weight: 650;
  box-shadow: var(--shadow-up), inset 0 0 0 1.5px var(--accent); }

/* on/off switch — knob position + a check mark, not colour alone.
   markup: <label class="switch"><input type="checkbox"><span class="track"></span><span class="knob">${I.check}</span></label>
   (the legacy <label class="switch"><input type="checkbox"><span></span></label> renders the same) */
.switch { position: relative; display: inline-block; width: 54px; height: 32px; flex: none; vertical-align: middle; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .track, .switch > input + span:not([class]) { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--ring);
  transition: background .16s var(--ease); }
.switch .knob, .switch > input + span:not([class])::before { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px;
  border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; color: transparent; transition: transform .16s var(--ease); }
.switch > input + span:not([class])::before { content: ""; }
.switch .knob .i { width: 14px; height: 14px; stroke-width: 3; }
.switch input:checked ~ .track, .switch > input:checked + span:not([class]) { background: var(--ok-fill); }
.switch input:checked ~ .knob { transform: translateX(22px); color: #17633D; }
.switch > input:checked + span:not([class])::before { transform: translateX(22px);
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317633D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.switch input:focus-visible ~ .track, .switch > input:focus-visible + span:not([class]) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* notice: an info-tinted tile with an icon (tones .warn .ok .danger). Markup either
   <div class="notice">text</div> (the icon is drawn by CSS) or
   <div class="notice"><span class="ico">${I.info}</span><span>text</span></div> (mock markup, explicit icon) */
.notice { position: relative; min-height: 46px; padding: 11px 16px 11px 48px; border-radius: 18px; background: var(--t-info);
  color: var(--text); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.notice::before { content: ""; position: absolute; left: 10px; top: 9px; width: 28px; height: 28px; border-radius: 10px; background: var(--a-info); }
.notice::after { content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; background: var(--info);
  -webkit-mask: var(--ic-info) center / 16px 16px no-repeat; mask: var(--ic-info) center / 16px 16px no-repeat; }
.notice.warn { background: var(--t-warn); } .notice.warn::before { background: var(--a-warn); }
.notice.warn::after { background: var(--warn); -webkit-mask-image: var(--ic-warn); mask-image: var(--ic-warn); }
.notice.ok { background: var(--t-ok); } .notice.ok::before { background: var(--a-ok); }
.notice.ok::after { background: var(--ok); -webkit-mask-image: var(--ic-ok); mask-image: var(--ic-ok); }
.notice.danger { background: var(--t-danger); } .notice.danger::before { background: var(--a-danger); }
.notice.danger::after { background: var(--danger); -webkit-mask-image: var(--ic-danger); mask-image: var(--ic-danger); }
.notice.small { min-height: 42px; padding-top: 10px; padding-bottom: 10px; font-size: 12.5px; }
.notice.small::before { top: 7px; } .notice.small::after { top: 13px; }
.notice ul { margin: 4px 0 0; }
.notice > .i:first-child { display: none; }   /* a legacy notice that starts with its own icon: the tone icon replaces it */
.notice:has(> .ico) { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 9px 16px 9px 10px; }
.notice:has(> .ico)::before, .notice:has(> .ico)::after { content: none; }
.notice > .ico { width: 28px; height: 28px; border-radius: 10px; background: var(--a-info); color: var(--info); }
.notice > .ico .i { width: 16px; height: 16px; }
.notice.warn > .ico { background: var(--a-warn); color: var(--warn); }
.notice.ok > .ico { background: var(--a-ok); color: var(--ok); }
.notice.danger > .ico { background: var(--a-danger); color: var(--danger); }
/* a notice inside a tile uses the sub-tile tints */
:is(.tile, .card, .drawer-panel, .sheet) .notice { background: var(--s-info); }
:is(.tile, .card, .drawer-panel, .sheet) .notice.warn { background: var(--s-warn); }
:is(.tile, .card, .drawer-panel, .sheet) .notice.ok { background: var(--s-ok); }
:is(.tile, .card, .drawer-panel, .sheet) .notice.danger { background: var(--s-danger); }

/* empty, loading and error states */
.empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; overflow-wrap: anywhere; }
.empty b { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 15px; font-weight: 650; }
.empty.small { padding: 24px 16px; font-size: 12.5px; }
.empty.loading { color: var(--text-3); }
.empty.loading::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 10px; border-radius: 50%;
  border: 2.5px solid var(--hair); border-top-color: var(--accent); animation: fr-spin .8s linear infinite; }
.empty[data-route-error] { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 24px;
  border-radius: var(--r-tile); background: var(--t-danger); color: var(--text-2); }
.empty[data-route-error]::before { content: ""; width: 28px; height: 28px; margin-bottom: 4px; background: var(--danger);
  -webkit-mask: var(--ic-danger) center / contain no-repeat; mask: var(--ic-danger) center / contain no-repeat; }
.empty[data-route-error] b { margin: 0; color: var(--danger); }

/* key–value list: soft rows (dt and dd form one rounded band) */
.kv { display: grid; grid-template-columns: minmax(112px, max-content) minmax(0, 1fr); row-gap: 3px; font-size: 13.5px; min-width: 0; }
.kv > dt, .kv > dd { min-width: 0; margin: 0; padding: 7px 12px; background: var(--sub); }
.kv > dt { padding-right: 10px; border-radius: var(--r-sm) 0 0 var(--r-sm); font-size: 12.5px; font-weight: 600; color: var(--text-3); line-height: 1.6; }
.kv > dd { border-radius: 0 var(--r-sm) var(--r-sm) 0; overflow-wrap: anywhere; }
.kv > dd :is(.chip, .badge) { vertical-align: 1px; }
.kv.small { font-size: 12.5px; } .kv.small > dt { font-size: 12px; }

/* soft table: rows are rounded bands, no rules (every <table> gets it; .soft is the explicit name) */
.table-wrap { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; }
table.fixed { table-layout: fixed; }
th { padding: 2px 14px 5px; text-align: left; vertical-align: bottom; font-size: 12.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
td { padding: 9px 14px; vertical-align: top; background: var(--sub); overflow-wrap: anywhere; }
td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
td:only-child { border-radius: var(--r-sm); }
tbody tr:hover > td { background: var(--ctl-h); }
tr.click { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.hot { font-weight: 700; } td.zero { color: var(--text-3); }
table.soft td { white-space: nowrap; }
table.soft td:first-child { font-weight: 650; }

/* layout helpers */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); min-width: 0; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; }
.c12 { grid-column: span 12; } .r2 { grid-row: span 2; } .r3 { grid-row: span 3; }
.grid { display: grid; gap: var(--gap); min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* toolbar: a tile of controls; nested inside another surface it is a plain row */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 8px; border-radius: var(--r-rail); background: var(--tile); }
.toolbar > input.grow { flex: 1 1 200px; min-width: 160px; }
.toolbar > span.grow { flex: 1 1 0; min-width: 0; }
.toolbar > .small.muted { padding: 0 6px; }
:is(.tile, .card, .subtile, .drawer-panel, .sheet) .toolbar { padding: 0; border-radius: 0; background: none; }

/* ---------- 5. legacy contract (classes the current view templates use; COMPONENTS.md §8) ---------- */
.card { min-width: 0; border-radius: var(--r-tile); background: var(--tile); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 16px 18px 6px; }
.card-head h2 { font: 650 15.5px/1.3 var(--font); }
.card-head + .card-pad { padding-top: 10px; }
.card.table-wrap { padding: 6px 12px 10px; }
/* a card inside another surface becomes a sub-tile (tonal layering, no nested borders) */
:is(.card, .tile, .drawer-panel, .sheet) .card { border-radius: var(--r-sub); background: var(--sub); }
.section { margin-top: 22px; min-width: 0; }
.view > .section { margin-top: 0; }
.section > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 10px; font: 650 15.5px/1.3 var(--font); color: var(--text); }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 12.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
.item-meta .acct { font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
/* platform label: pf() → <span class="pf pf-x" data-pf="x"><span class="puck plat xs">icon</span>X</span> */
.pf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; vertical-align: middle; }
/* status dot (legacy): green idle, amber pulsing while a cycle runs — always next to a word */
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px var(--a-ok); vertical-align: 1px; }
.dot.run { background: var(--warn); box-shadow: 0 0 0 3px var(--a-warn); animation: fr-pulse 1.2s infinite; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 12px 24px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--accent); }
.timeline li::after { content: ""; position: absolute; left: 5px; top: 20px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--hair); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { content: none; }
.evid { display: flex; flex-direction: column; gap: 6px; }
.evid-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 10px 12px;
  border-radius: var(--r-sub); background: var(--sub); }

/* collapsible group in a sheet (the mock's .more): <details class="fold"><summary>${I.chevRight}Title<span class="note">…</span></summary>…</details> */
.fold { border-radius: var(--r-sub); background: var(--well); }
.fold > summary { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--r-sub);
  font-size: 13.5px; font-weight: 650; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .i { width: 16px; height: 16px; color: var(--text-2); transition: transform .15s var(--ease); }
.fold[open] > summary .i { transform: rotate(90deg); }
.fold > summary .note { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 8px 8px; }
.lang { padding: 10px; border-radius: 14px; background: var(--sub); }
:root[data-theme="light"] .lang { background: #FFFFFF; }
.lang legend { float: left; width: 100%; margin: 0 0 7px; padding: 0 2px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.lang input, .lang textarea { display: block; width: 100%; height: auto; min-height: 0; clear: both; padding: 7px 10px; border: 0; outline: 0;
  border-radius: 10px; background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ring); font-size: 13.5px; line-height: 1.45; color: var(--text); resize: vertical; }
.lang textarea { margin-top: 6px; }
.lang :is(input, textarea):focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

/* ---------- 6. overlays: drawer (soft side sheet), modal sheet, toasts ---------- */
.drawer, .modal { position: fixed; inset: 0; display: none; }
.drawer { z-index: 20; } .modal { z-index: 30; }
.drawer.open { display: block; }
.modal.open { display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.scrim { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.drawer-panel { position: absolute; top: var(--gap); right: var(--gap); bottom: var(--gap); width: min(780px, calc(100vw - 2 * var(--gap)));
  display: flex; flex-direction: column; border-radius: var(--r-sheet); background: var(--sheet); box-shadow: var(--shadow-float);
  overflow: hidden; outline: none; animation: fr-slide .2s var(--ease); }
.drawer-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
#drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px 30px; }
#drawer-body > :first-child { margin-right: 44px; }
#drawer-body > h2 { margin: 8px 0 14px; font: 700 20px/1.3 var(--display); letter-spacing: -.012em; text-wrap: balance; }
#drawer-body > .toolbar { margin-bottom: 14px; }
.sheet { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 56px);
  border-radius: var(--r-sheet); background: var(--sheet); box-shadow: var(--shadow-float); overflow: hidden; animation: fr-rise .18s var(--ease); }
.sheet:has(.wide-form), .sheet.wide { width: min(840px, 100%); }
.sheet-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 18px 16px 8px 24px; }
.sheet-head h2 { flex: 1; min-width: 0; font: 700 21px/1.2 var(--display); letter-spacing: -.015em; }
.sheet-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 8px 24px 16px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-body .grid { gap: 8px; }
.sheet-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; margin: 0 10px 10px; padding: 8px;
  border-radius: var(--r-rail); background: var(--tile-up); }
:root[data-theme="light"] .sheet-foot { background: var(--tile); }
.sheet-foot .keys { margin-right: auto; padding-left: 10px; gap: 6px; color: var(--text-2); }
.wide-form { display: flex; flex-direction: column; gap: 8px; }
/* help sheet: groups of shortcuts */
.help-keys { display: flex; flex-direction: column; gap: 8px; }
.help-keys .label:not(:first-child) { margin-top: 8px; }
.help-keys .kv > dt { display: flex; align-items: center; gap: 4px; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 9px 16px 9px 9px; border-radius: 18px; background: var(--tile-up);
  color: var(--text); box-shadow: var(--shadow-float); font-size: 13.5px; line-height: 1.4; pointer-events: auto; animation: fr-rise .16s var(--ease); }
.toast .ico { width: 28px; height: 28px; border-radius: 10px; background: var(--a-ok); color: var(--ok); }
.toast .ico .i { width: 16px; height: 16px; }
.toast.err { background: var(--t-danger); }
.toast.err .ico { background: var(--a-danger); color: var(--danger); }

/* ---------- 7. login: a three-tile bento ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--gap); width: min(880px, 100%); }
.l-brand { grid-row: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 404px; padding: 30px; border-radius: 34px; background: var(--ink); color: #FFFFFF; }
.l-brand .logo { position: relative; width: 78px; height: 78px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 14px var(--ink); }
.l-brand .l-words { position: relative; }
.l-brand .wordmark { font-size: 48px; letter-spacing: -.035em; }
.l-brand .tagline { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.l-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.l-form { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 34px; }
.l-form h1 { margin-bottom: 8px; font: 700 23px/1.2 var(--display); letter-spacing: -.02em; }
.l-form .field { padding: 12px 16px 13px; gap: 4px; }
.l-form .field input { min-height: 26px; font-size: 15.5px; }
.l-form .btn { margin-top: auto; }
.login-error { position: relative; padding: 10px 14px 10px 42px; border-radius: 14px; background: var(--s-danger); color: var(--text);
  font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.login-error::before { content: ""; position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; background: var(--danger);
  -webkit-mask: var(--ic-danger) center / contain no-repeat; mask: var(--ic-danger) center / contain no-repeat; }
.l-note { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 26px; font-size: 13.5px; line-height: 1.45; }
.l-note .ico { width: 36px; height: 36px; border-radius: 13px; background: var(--a-info); color: var(--info); }
/* <<<END core>>> */

/* <<<REGION feed>>> */
/* =====================================================================
   View region: FEED ("Gündəlik axın") + the item-detail drawer + digests.
   B mock anatomy, 1:1: summary strip · toolbar · 3-column item tiles
   (src | body | ai) with a full-width footer rail. Primitives (buttons,
   chips, pf, kv, timeline, evid) come from core; this region only shapes
   its own content classes.
   ===================================================================== */

/* ----- summary strip: four tinted tiles built from /api/status ----- */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stat { position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; min-width: 0;
  padding: 10px 14px 10px 12px; border-radius: 22px; background: var(--tile); color: var(--text);
  text-decoration: none; transition: filter .14s var(--ease); }
.stat:hover { text-decoration: none; filter: brightness(1.07); }
.stat .ico { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.stat .ico .i { width: 20px; height: 20px; }
.stat .num { font: 700 29px/1 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.stat .txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.stat .txt b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .txt span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .go { position: absolute; top: 10px; right: 12px; width: 15px; height: 15px; color: var(--text-2); opacity: .8; }
.stat.s-warn { background: var(--t-warn); } .stat.s-warn .ico { background: var(--a-warn); color: var(--warn); }
.stat.s-info { background: var(--t-info); } .stat.s-info .ico { background: var(--a-info); color: var(--info); }
.stat.s-accent { background: var(--t-accent); } .stat.s-accent .ico { background: var(--a-accent); color: var(--accent); }
.stat.s-ok { background: var(--t-ok); } .stat.s-ok .ico { background: var(--a-ok); color: var(--ok); }
@media (max-width: 1400px) {
  .stat { gap: 10px; padding-left: 10px; }
  .stat .ico { width: 38px; height: 38px; border-radius: 14px; }
}
@media (max-height: 760px) {
  .stat { min-height: 48px; padding: 6px 12px 6px 8px; }
  .stat .ico { width: 34px; height: 34px; border-radius: 12px; }
  .stat .num { font-size: 23px; }
}

/* ----- toolbar: one floating tile (core provides .toolbar) ----- */
.toolbar .select { flex: 0 1 auto; min-width: 0; }

/* ----- feed columns ----- */
.split { min-width: 0; }
.list-col, .feed { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* list header over the feed (status chip · count · keyboard hints) */
.list-head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 8px;
  border-radius: 18px; background: var(--tile); font-size: 13px; }
.list-head b { font-weight: 650; }
.list-head .keys { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 12.5px; }

/* ----- one feed post: 3-column tile, footer rail full-width ----- */
.item { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "src claim" "ai body" "rail rail";
  gap: 8px; padding: 8px; border-radius: var(--r-tile); background: var(--tile);
  transition: background .14s var(--ease), box-shadow .14s var(--ease); }
/* source top-left, claim to its right; Gemini under source, text under claim. Each cell hugs
   the top so the claim band matches the source height instead of stretching to fill the column. */
.src { align-self: start; }   /* source hugs the top; Gemini stretches to fill the column down to the body height */
.item:hover { background: var(--tile-h); }
.item.sel { background: var(--tile-sel); box-shadow: 0 0 0 2px var(--accent), var(--shadow-sel); }

/* source tile: carries the platform colour */
.src { grid-area: src; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px;
  border-radius: var(--r-sub); background: color-mix(in srgb, var(--pf) var(--pf-mix), var(--tile)); }
.src-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.src-head .puck.plat { width: 44px; height: 44px; } .src-head .puck.plat .i { width: 28px; height: 28px; }
.src-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: 3px; }
.src-id .pf-name { font-size: 15.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct { font-size: 14px; font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-date { display: flex; flex-direction: column; align-items: center; margin-left: auto; text-align: center; line-height: 1.35; white-space: nowrap; gap: 3px; }
.src-date .d-day, .src-date .d-time { font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.src-date .d-day.unk { font-weight: 500; color: var(--text-3); }
.src-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; font-size: 12.5px;
  color: var(--text-2); font-variant-numeric: tabular-nums; }
.src-meta .views { display: inline-flex; align-items: center; gap: 5px; }
.src-meta .views .i { width: 14px; height: 14px; }
/* platform reactions (views / likes / comments / shares / quotes) */
.reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.reacts .react { display: inline-flex; align-items: center; gap: 4px; }
.reacts .react .i { width: 14px; height: 14px; opacity: .85; }
.reacts.verbose { gap: 6px 14px; color: var(--text-2); }
.reacts.verbose .react em { font-style: normal; color: var(--text-3); }
.react-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); font-style: italic; }
.react-note .i { width: 13px; height: 13px; opacity: .7; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
/* Gemini tile placeholder (material not analysed yet) */
.ai.none { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; justify-content: center; }
.ai.none p { margin: 0; }
.ai.none .btn { margin-top: 2px; }

/* text body */
.body { grid-area: body; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 6px 8px 4px; }
.text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; text-align: start;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.text:lang(fa), .text:lang(ar) { font-size: 16px; line-height: 1.7; }
.text .tr { color: var(--text-2); }
.text .chip { vertical-align: 2px; margin-inline-end: 4px; }
.xlat { padding: 9px 12px 10px; border-radius: 14px; background: var(--s-info); font-size: 13.5px;
  line-height: 1.5; color: var(--text); }
.xlat-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12px; font-weight: 650; color: var(--info); }
.xlat-h .i { width: 14px; height: 14px; }
.xlat p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.xlat-slot { display: flex; }

/* full text note / fetch slot */
.ft-note { font-size: 12.5px; color: var(--text-3); }
.ft-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.item .ft-slot { margin-top: 0; }

/* transcript inside a text: second ink, italic */
.tr { font-style: italic; color: var(--text-3); }

/* AI verdict tile: tinted by priority */
.ai { grid-area: ai; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px;
  border-radius: var(--r-sub); background: var(--sub); }
.ai.lvl-high { background: var(--s-danger); } .ai.lvl-mid { background: var(--s-warn); }
.ai-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ai-head .i { width: 15px; height: 15px; }
.ai-head .lvl { margin-left: auto; }
.ai.lvl-high .ai-head { color: var(--danger); } .ai.lvl-mid .ai-head { color: var(--warn); }
.ai p { font-size: 13.5px; line-height: 1.45; color: var(--text); margin: 3px 0 10px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.ai-crit { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; }
.ai-crit > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-crit em { font-style: normal; font-size: 12px; line-height: 1.25; color: var(--text-2); white-space: nowrap; }

/* footer rail: what it was matched to, and the decision */
.rail { grid-area: rail; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px;
  padding: 6px 6px 6px 12px; border-radius: var(--r-sub); background: var(--sub); }
.claim-band { grid-area: claim; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 16px; border-radius: var(--r-sub);
  background: color-mix(in srgb, var(--accent) 12%, var(--tile)); color: var(--text);
  font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.claim-band b { font-weight: 700; color: var(--accent); margin-inline-end: 2px; }
.claim-band > span { min-width: 0; }
.claim-band .i { width: 18px; height: 18px; color: var(--accent); flex: none; }
.claim-band.none { background: var(--sub); color: var(--text-3); font-weight: 500; }
.claim-band.none b, .claim-band.none .i { color: var(--text-3); }
.rail .grow { flex: 1 1 0; }
.claim { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.claim .i { width: 15px; height: 15px; color: var(--text-3); }
.claim span { min-width: 0; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; }
.claim b { font-weight: 650; color: var(--text-2); }
.orig { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 4px;
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.orig .i { width: 14px; height: 14px; }
.actions { display: flex; gap: 8px; flex: none; }
.item:not(.sel) .actions kbd { display: none; }
:root[data-theme="light"] .item.sel .rail { background: var(--tile); }
.btn kbd { margin-right: -4px; }

/* pager under the feed */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 0; }
.pager > span { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* item detail inside the drawer */
.fulltext { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-card { font-size: 13.5px; line-height: 1.55; }

/* ----- digests (hesabatlar): the rendered markdown body ----- */
.md { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.md h1 { font: 700 22px/1.3 var(--display); letter-spacing: -.015em; margin: 2px 0 12px; }
.md h2 { font: 650 17px/1.35 var(--display); margin: 18px 0 8px; }
.md p { margin: 0 0 10px; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md code { font-family: var(--mono); font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--ctl); }
.md a { overflow-wrap: anywhere; }
/* <<<END feed>>> */

/* <<<REGION yoxlama>>> */
/* =====================================================================
   View region: VERIFICATIONS ("Yoxlama qeydləri") — list, steps rail,
   editor layout (form + side cards), reach and history.
   ===================================================================== */

/* step rail: current in accent, done in ok, pending faint */
.steps { display: flex; align-items: center; gap: 4px; margin: 0 0 14px; flex-wrap: wrap; }
.step { padding: 7px 12px; border-radius: var(--r-pill); background: var(--well); color: var(--text-3);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.step.done { background: var(--a-ok); color: var(--ok); }
.step.now { background: var(--accent-fill); color: var(--on-accent); }
.step.now::after { content: ""; display: inline-block; width: 14px; height: 6px; margin-left: 8px; border-radius: 3px;
  background: currentColor; opacity: .55; vertical-align: 1px; animation: fr-pulse 1.2s infinite; }

/* editor: form (main) + status / reach / history side column; form is left, side is right */
.ver-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; min-width: 0; }
@media (max-width: 1240px) { .ver-layout { grid-template-columns: 1fr; } }

/* archived snapshot of a source page (kept sandboxed by the app already) */
.snapshot { display: block; width: 100%; height: 560px; margin-top: 10px; border: 0; border-radius: var(--r-sub); background: var(--well); }
/* <<<END yoxlama>>> */

/* <<<REGION menbeler>>> */
/* =====================================================================
   View region: SOURCES ("Mənbələr") — list table, source drawer.
   The source list uses the core table; the drawer uses core kv/timeline.
   This region only adds the accent underline to the handle inside a row.
   ===================================================================== */
/* <<<END menbeler>>> */

/* <<<REGION qraf>>> */
/* =====================================================================
   View region: GRAPH ("Şəbəkə qrafı") — the canvas tile, legend and the
   side panel that replaces most of the canvas when a node is picked.
   ===================================================================== */

.graph-wrap { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#g-canvas { display: block; width: 100%; height: clamp(380px, 62vh, 640px); touch-action: none; cursor: grab; }
#g-canvas.drag { cursor: grabbing; }

/* side panel sits above the canvas in the top-right corner of the tile */
.graph-side { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(400px, 46%);
  z-index: 2; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); box-shadow: var(--shadow-float); }

/* legend strip along the bottom of the tile */
.graph-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 16px 12px;
  border-top: 1px solid var(--hair); background: var(--tile); font-size: 12.5px; color: var(--text-2); }
.graph-legend .ln { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: 2px; border-top: 2px solid; }
.graph-legend > div { display: inline-flex; align-items: center; }
/* relationship list under the graph — readable, grouped by kind */
.rel-list { margin-top: 14px; }
.rel-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.rel-tab { border: 1px solid var(--hair); background: var(--tile); color: var(--text-2); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rel-tab:hover { border-color: var(--accent); color: var(--text); }
.rel-tab.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.rel-tab.on b { opacity: .9; }
.rel-help { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); display: grid; gap: 8px; color: var(--text-2); line-height: 1.5; }
.rel-help-row { display: flex; gap: 10px; align-items: flex-start; }
.rel-help-row b { color: var(--text); }
.rel-help .rel-k { flex: none; width: 20px; margin-top: 9px; border-top: 2px solid var(--text-3); }
.rel-help .rel-k.fw { border-color: var(--accent); }
.rel-help .rel-k.ln { border-color: var(--text-3); }
.rel-help .rel-k.cl { border-color: var(--danger); border-top-style: dashed; }
.rel-tab b { font-variant-numeric: tabular-nums; opacity: .85; }
.rel-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.rel-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--tile);
  border: 1px solid transparent; min-width: 0; }
.rel-row:hover { border-color: var(--hair); }
.rel-acct { display: inline-flex; align-items: center; gap: 5px; max-width: 46%; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 13px; font-family: inherit; padding: 2px 4px; border-radius: 7px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.rel-acct:hover { background: var(--surface); color: var(--accent); }
.rel-arrow { color: var(--text-3); flex: none; font-weight: 600; }
.rel-w { margin-left: auto; flex: none; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
  background: var(--surface); border-radius: 6px; padding: 1px 6px; }
/* <<<END qraf>>> */

/* <<<REGION iddialar>>> */
/* =====================================================================
   View region: CLAIMS ("İddialar və indikatorlar") — seed/claim cards,
   candidates/indicators tables, narrative wave cards, lang-set fieldsets.
   ===================================================================== */

/* ----- KPI-style number tile (also used by statistika) ----- */
.kpi { display: flex; flex-direction: column; gap: 2px; min-height: 128px; padding: 16px 18px; min-width: 0; }
.kpi .label { margin-bottom: auto; }
.kpi .value { font: 700 38px/1.1 var(--display); letter-spacing: -.025em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12.5px; color: var(--text-3); line-height: 1.35; }

/* ----- keyword / anchor chips inside cards and tables ----- */
.kw { display: inline-block; margin: 0 5px 4px 0; padding: 3px 9px; border-radius: 8px; background: var(--ctl);
  font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* ----- translations of a claim: stacked letterblock fieldsets ----- */
.lang-set { display: block; margin: 0 0 10px; padding: 10px 12px 4px; border-radius: var(--r-sub); background: var(--sub); }
.lang-set legend { width: 100%; margin: 0 0 6px; padding: 0; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.lang-set :is(input, textarea) { display: block; width: 100%; margin: 0 0 8px; padding: 7px 10px; border: 0; border-radius: 10px;
  background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ring); font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  color: var(--text); resize: vertical; outline: none; }
.lang-set :is(input, textarea)::placeholder { color: var(--text-3); opacity: 1; }
.lang-set :is(input, textarea):focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
/* <<<END iddialar>>> */

/* <<<REGION statistika>>> */
/* =====================================================================
   View region: STATISTICS ("Statistika") — daily bars, platform bars,
   verification hbars, small charts, result notices.
   ===================================================================== */

/* ----- platform bars: pf name, two stacked fills, count ----- */
.hbar { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 4px 0; font-size: 13px; }
.hbar > .pf { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hbar .track { flex: 1 1 auto; height: 12px; min-width: 60px; border-radius: var(--r-pill); background: var(--well);
  display: flex; align-items: center; gap: 2px; overflow: hidden; }
.hbar .fill { height: 100%; min-width: 2px; border-radius: inherit; background: var(--series-1); }
.hbar .fill2 { height: 100%; min-width: 2px; border-radius: inherit; background: var(--series-2); }
.hbar .num { width: 88px; flex: none; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----- verification overview hbars: label, filler, count ----- */
.hbar > span:first-child { flex: 0 0 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar > span:nth-child(2) { flex: 1 1 auto; min-width: 40px; height: 10px; border-radius: var(--r-pill); background: var(--well); }
.hbar > b.num { flex: none; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ----- daily chart (svg injected by dailyChart) ----- */
.chart-box { min-height: 0; }
.chart { display: block; width: 100%; height: auto; }
.axis { stroke: var(--hair); stroke-width: 1; }
.chart text { fill: var(--text-3); font-family: var(--font); font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-a { fill: var(--series-1); }
.bar-b { fill: var(--series-2); }
.hit { fill: transparent; }
g.hov .bar-a, g.hov .bar-b { filter: brightness(1.18); }
.chart-tip { position: absolute; z-index: 3; padding: 8px 12px; border-radius: 12px; background: var(--tile-up);
  color: var(--text); box-shadow: var(--shadow-float); font-size: 12.5px; line-height: 1.45; pointer-events: none; max-width: 200px; }
.chart-tip b { display: block; margin-bottom: 2px; }

/* ----- chart-side cards need their own positioning context ----- */
.card-head + .card-pad.chart-box, .card-pad.chart-box { position: relative; }

/* ----- evidence verify result notice ----- */
.ev-result { margin-top: 10px; }
#ev-result .notice { margin-bottom: 8px; }
/* <<<END statistika>>> */

/* <<<REGION dovr>>> */
/* =====================================================================
   View region: RUNS ("Dövr və loglar") — run list + live log layout,
   stage rail, log rows. Uses the core stages/step timeline vocabulary.
   ===================================================================== */

/* run list (left) + live log/detail (right) */
.run-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--gap); align-items: start; min-width: 0; }
@media (max-width: 1240px) { .run-layout { grid-template-columns: 1fr; } }
.run-list { padding: 8px; max-height: 72vh; overflow-y: auto; }
.run-item { padding: 10px 12px; border-radius: var(--r-sub); cursor: pointer; }

/* stable layout, no card-inside-card: run items are selectable rows on the tile */
.card.run-list .run-item                       { background: transparent; }
.card.run-list .run-item:hover                 { background: var(--ctl); }
.card.run-list .run-item.on                    { background: var(--tile-sel); box-shadow: inset 0 0 0 1.5px var(--accent); }
:is(.tile, .card, .subtile, .drawer-panel, .sheet) .card.run-list .run-item { background: transparent; }

/* stage rail: a strip of quiet stages (done → ok, now → accent, wait → faint) */
.stages { display: flex; flex-wrap: wrap; gap: 6px; }
.stage { padding: 6px 10px; border-radius: 10px; background: var(--well); color: var(--text-3); font-size: 12px; line-height: 1.4; }
.stage.done { background: var(--a-ok); color: var(--ok); }
.stage.now { background: var(--accent-fill); color: var(--on-accent); }
.stage.now .muted { color: rgba(255,255,255,.72); }
.stage .muted { opacity: .85; font-size: 11.5px; }
.stage .st { font-weight: 650; }

/* the live log */
.log { min-height: 220px; max-height: 52vh; overflow-y: auto; padding: 8px 10px 12px; font-family: var(--mono); font-size: 12.5px; }
.log-row { display: flex; gap: 8px; padding: 3px 4px; border-radius: 6px; line-height: 1.45; overflow-wrap: anywhere; }
.log-row:hover { background: var(--ctl); }
.log-row .lv { flex: none; width: 12px; color: var(--text-3); font-weight: 700; }
.log-row .msg { flex: 1 1 auto; min-width: 0; }
.log-row.error { color: var(--danger); }
.log-row.warn { color: var(--warn); }
.log-row.ok { color: var(--ok); }
.log-row .msg a { color: inherit; }
/* <<<END dovr>>> */

/* <<<REGION tenzim>>> */
/* =====================================================================
   View region: SETTINGS ("Tənzimləmələr") — schedule controls, chips
   for weekday/keyword lists, budget number fields.
   ===================================================================== */

/* weekday toggle chips and keyword chips are taller because they carry a checkbox */
label.chip { height: 32px; padding: 0 12px 0 10px; }

/* time-of-day controls inside a toolbar row */
.sc-time { min-width: 108px; }
.toolbar > .small.muted { padding: 0 6px; }
/* <<<END tenzim>>> */

/* <<<REGION arasdirma>>> */
/* =====================================================================
   View region: INVESTIGATIONS ("Mənbə araşdırması") — investigation
   editor (confidence levels, appearances, chronology, coverage, findings,
   collect jobs), plus the list view table. The route wording rule is fixed
   in markup: "tapılan ən erkən açıq yayan", never "mənşə".
   ===================================================================== */

/* ----- two-column editor: form (left) + status/jobs side rail ----- */
.inv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; min-width: 0; }
@media (max-width: 1240px) { .inv-layout { grid-template-columns: 1fr; } }

/* level subheading in the main form card */
.inv-sub { margin: 20px 0 8px; font: 650 15.5px/1.3 var(--font); color: var(--text); }

/* ----- confidence level tiles ----- */
.level-box { min-width: 0; padding: 14px; border-radius: var(--r-sub); background: var(--sub); }
.level-box .conf-sel { max-width: 190px; }
.level-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 26px; }

/* ----- appearance row: link + account + platform + date + precision,
   language + stance + role + text + note + delete. Wide rows use a 6-column
   grid so account/link are the widest cells; mobile collapses to 1 column. ----- */
.ap-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start;
  padding: 10px; border-radius: var(--r-sub); background: var(--well); min-width: 0; }
.ap-link { grid-column: span 2; }
.ap-account { grid-column: span 2; }
.ap-platform { grid-column: span 1; }
.ap-date { grid-column: span 1; }
.ap-kind { grid-column: span 1; }
.ap-prec { grid-column: span 1; }
.ap-lang { grid-column: span 1; }
.ap-stance { grid-column: span 1; }
.ap-role { grid-column: span 1; }
.ap-del { grid-column: span 1; align-self: end; }
.ap-text { grid-column: span 3; min-width: 0; }
.ap-note { grid-column: span 3; min-width: 0; }
@media (max-width: 900px) {
  .ap-row { grid-template-columns: 1fr; }
  .ap-link, .ap-account, .ap-platform, .ap-date, .ap-kind, .ap-prec,
  .ap-lang, .ap-stance, .ap-role, .ap-del, .ap-text, .ap-note { grid-column: 1 / -1; }
}
.ap-top { margin-top: -12px; }

/* ----- chronology: a vertical timeline of candidate appearances ----- */
.timeline-tall { display: flex; flex-direction: column; gap: 1px; max-height: 540px; overflow-y: auto;
  padding: 2px; min-width: 0; }
.tl-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-sub);
  background: var(--sub); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.tl-date { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ----- "tapıntı topla" job cards ----- */
.job-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.job-item { padding: 10px 12px; border-radius: var(--r-sub); background: var(--sub); min-width: 0; }
.job-item .level-head { min-height: 0; }

/* ----- coverage rows: platform, language, tool, searched-at, results,
   blind spots, note, delete. Wide rows use 4 columns; tablets 2; phone 1. ----- */
.cov-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end;
  padding: 10px; border-radius: var(--r-sub); background: var(--well); min-width: 0; }
.cov-row > .field { min-width: 0; }
.cov-row .cov-del { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 900px) {
  .cov-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cov-row { grid-template-columns: 1fr; }
}

/* ----- finding cards ----- */
.finding { display: flex; flex-direction: column; gap: 6px; }

/* ----- budget modal: three compact number fields per row ----- */
.job-budget { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ----- apps/chronology two-tile pair ----- */
.inv-apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; min-width: 0; }
@media (max-width: 1240px) { .inv-apps-grid { grid-template-columns: 1fr; } }

/* scope the empty state inside a card so the text has room to breathe */
.card .empty { min-height: 0; }
/* ----- Stage-2 statistics strip: one tile per headline number, plus platform pucks ----- */
.inv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, 1.4fr); gap: var(--gap); margin-bottom: 16px; min-width: 0; }
.stat-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-card > .ico { width: 34px; height: 34px; border-radius: 12px; background: var(--a-accent); color: var(--accent); }
.stat-card > b { font: 700 23px/1.1 var(--display); overflow-wrap: anywhere; }
.stat-card > span { font-size: 12.5px; color: var(--text-3); }
.stat-card.pf-stats > .ico { background: var(--a-ok); color: var(--ok); }
.pf-stats-label { display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--text-3); }
.pf-stats-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pf-stat { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 9px 6px 6px; border-radius: 999px;
  background: var(--sub); font-size: 12px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.pf-stat b { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text); }
@media (max-width: 1100px) { .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .inv-stats { grid-template-columns: 1fr; } }

/* ----- platform pucks inside appearance/coverage field labels ----- */
.ap-platform .pf-puck, .cov-row .pf-puck { vertical-align: -4px; margin-right: 2px; }

/* ----- Gemini per-appearance results card (Stage 2) ----- */
.inv-ai-card { margin-bottom: 14px; }
.inv-ai-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.inv-ai-head h3 { margin: 0; font: 650 15.5px/1.3 var(--font); color: var(--text); }
.inv-ai-head .note { font-size: 12.5px; color: var(--text-3); }
.inv-ai-rows { display: flex; flex-direction: column; gap: 8px; }
.inv-ai-row { padding: 12px; border-radius: var(--r-sub); background: var(--sub); min-width: 0; }
.inv-ai-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.inv-ai-head-line b { min-width: 0; overflow-wrap: anywhere; }
.inv-ai-head-line .chip { margin-left: auto; }
.inv-ai-row p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-crit { display: inline-flex; flex-wrap: wrap; gap: 12px 18px; padding: 8px 10px; border-radius: 12px; background: var(--well);
  font-size: 12px; line-height: 1.25; color: var(--text-2); }
.ai-crit > em { font-style: normal; white-space: nowrap; }
.ai-crit .meter { vertical-align: -1px; }
.ai-foot { margin-top: 8px; font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }

/* ----- per-appearance Gemini line in the editor ----- */
.ap-ai { grid-column: 1 / -1; min-width: 0; }
.ap-ai .ai-line { margin-top: 0; }

/* ----- chronology source header with platform puck ----- */
.tl-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tl-src b { min-width: 0; overflow-wrap: anywhere; }
/* <<<END arasdirma>>> */

/* ---- stage 2: network, wave, coordination signals, analytics ---- */
.inv-net { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .inv-net { grid-template-columns: 1fr; } }
.chart-box { width: 100%; min-height: 120px; position: relative; }
.co-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.co-sigs { display: flex; flex-direction: column; gap: 10px; }
.co-sig { border-radius: var(--r-sub); background: var(--sub); padding: 10px 12px; }
.co-sig.danger { background: color-mix(in srgb, var(--danger) 13%, var(--tile)); }
.co-sig.warn { background: color-mix(in srgb, var(--warn) 13%, var(--tile)); }
.co-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-title { font-weight: 600; margin: 3px 0 2px; }
.co-innocent { color: var(--text-3); margin-top: 4px; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .an-grid { grid-template-columns: 1fr; } }
.an-grid h4 { margin: 0 0 10px; font-size: 14px; }
.an-bars { display: flex; flex-direction: column; gap: 7px; }
.an-row { display: grid; grid-template-columns: minmax(80px, 42%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.an-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.an-track { height: 8px; border-radius: 999px; background: var(--well); overflow: hidden; }
.an-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.an-n { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }

/* candidate / fixed tables: keep a cell's badge from overflowing into the next column */
table.fixed td { overflow: hidden; text-overflow: ellipsis; }
table.fixed td .badge { max-width: 100%; overflow: hidden; }
table.fixed td .badge span, table.fixed td .badge { text-overflow: ellipsis; white-space: nowrap; }

/* detail view: separate the translation from the original text above it */
.section .xlat { margin-top: 12px; }

/* stage 2: technical traces */
.trace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.trace-dom { border-radius: var(--r-sub); background: var(--sub); padding: 10px 12px; }
.trace-dom .trace-host { font-size: 14px; color: var(--text); word-break: break-all; }
.trace-dom .kv { margin-top: 6px; grid-template-columns: minmax(96px, max-content) 1fr; }
.trace-lookup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, rgba(127,127,127,.14)); }
.trace-lookup a { white-space: nowrap; }
/* feed "Uyğun" confirm modal: required note + category pick */
.req { color: var(--danger); font-weight: 700; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.topic-grid .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); cursor: pointer; padding: 3px 0; }
.topic-grid .chk input { flex: none; }

/* stage 2: propagation graph — platform swimlanes, time left→right */
.cg-card { margin-top: 12px; }
.cg-wrap { width: 100%; overflow-x: auto; margin-top: 4px; }
.cg-svg { display: block; width: 100%; min-width: 560px; height: auto; }
.cg-band { fill: transparent; }
.cg-band.alt { fill: var(--text); opacity: .028; }
.cg-grid { stroke: var(--line, rgba(127,127,127,.16)); stroke-width: 1; stroke-dasharray: 2 5; }
.cg-lanel { font-size: 12px; font-weight: 600; fill: var(--text-2); }
.cg-svg .cg-time { font-size: 10.5px; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.cg-svg .cg-label { font-size: 11px; fill: var(--text-2); paint-order: stroke; stroke: var(--tile); stroke-width: 3px; }
.cg-svg .cg-label.first { fill: var(--text); font-weight: 700; }
.cg-arc { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; opacity: .5; }
.cg-arc.inf { stroke-dasharray: 3 4; opacity: .34; }
.cg-dot { fill: var(--text-3); stroke: var(--tile); stroke-width: 2; }
.cg-linked { fill: var(--accent); stroke: var(--tile); stroke-width: 2; }
circle.cg-first { fill: var(--accent); stroke: var(--tile); stroke-width: 2.5; }
.cg-node { cursor: default; }
.cg-node:hover circle:not([fill="transparent"]) { r: 7.5; }
.cg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); margin: 2px 0 2px; }
.cg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cg-k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.cg-k.cg-first { background: var(--accent); }
.cg-k.ln { width: 16px; height: 0; border-radius: 0; border-top: 2px solid var(--accent); opacity: .6; }
.cg-k.ln.inf { border-top-style: dashed; opacity: .45; }
/* spread view: volume chart legend + who→whom list */
.sp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); margin: 2px 0 6px; }
.sp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sp-k { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.sp-rel-head { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.sp-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.sp-rel { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--tile); min-width: 0; }
.sp-acct { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 42%; }
.sp-ar { flex: none; color: var(--text-3); font-weight: 700; }
.sp-rel .muted { margin-left: auto; flex: none; }