/* NPC Fleet admin. Calm operator console: near-black canvas, one sans (Golos Text) with tabular figures,
   mono only for literal code, colour only where a state needs attention. Tokens: DIRECTION.md §1–§3, BRIEF3.

   Type scale (round 4, final). Same element = same token on every page; no font-size literals outside :root.
     --fs-xs    12  chart axes, calendar month/day labels, chart legends. Nothing else
     --fs-sm    13  table header cells, field labels, badges, nav counters, key caps, tooltips, seg counters
     --fs-meta  14  meta line under a row title, timestamps, KV keys, page subtitle, section aside
     --fs-body  15  default: table cells, row titles (500), nav, buttons, inputs, KV values, menu items
     --fs-read  16  text people read: chat messages, bios, dossier, digest quotes, style rules
     --fs-h3    16  sub-heading inside a section, 600
     --fs-h2    20  section heading, 600, -0.01em
     --fs-h1    28  page title, 600, -0.02em
     --fs-kpi   32  overview numbers only, 600, -0.02em
   Line height: 1.2 headings and numbers, 1.45 UI, 1.6 reading text. Weights: 400 text, 500 titles/names/buttons, 600 headings. */

@font-face { font-family: "Golos Text"; src: url("../fonts/golos-text-cyrillic.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url("../fonts/golos-text-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* surfaces: near-black, cool neutral */
  --rail: #07090c; --bg: #0b0e12; --surface: #11161c; --surface-2: #171d25; --surface-3: #202832;
  /* lines */
  --line: #283240; --line-2: #3b4755; --ctl: #6b7a8b;
  --frame-w: 1.5px; --focus-w: 2px;
  --r-ctl: 6px; --r-box: 8px; --r-badge: 4px;
  /* text */
  --ink: #eef2f6; --ink-2: #c6ced7; --ink-3: #9da9b6; --ink-dis: #66727f;
  --muted: var(--ink-3); /* alias for old selectors; new code uses --ink-3 */
  /* status (text-safe on every surface) */
  --accent: #00ed64; --link: #5bbcff; --crit: #ff3b3b; --crit-ink: #ff7a7a; --high: #ff9a1f; --med: #ffc83d;
  --low: var(--link); --ok: #2fc35a; --vio: #a274ff;
  --btn: #eef2f6; --btn-ink: #0b0e12;
  /* categorical series, fixed order; validated on --surface (dataviz: L band, chroma, adjacent CVD dE >= 9.1) */
  --c1: #1fae55; --c2: #2a8bff; --c3: #e8650f; --c4: #0a9fbd; --c5: #a26bf0; --c6: #bd8600; --c7: #e0487a; --c8: #6f7ff0;
  /* activity calendar: one hue, dark to light */
  --h0: var(--surface-3); --h1: #0f3d24; --h2: #13653a; --h3: #1d9a4e; --h4: #36d26a;
  --pop: 0 12px 32px rgb(0 0 0 / .55);
  /* type */
  /* colour emoji right after Golos: system sans fonts (DejaVu, Segoe UI) carry flat black-and-white glyphs for ❤ ☀ ✌ and the like */
  --sans: "Golos Text", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-meta: 14px; --fs-body: 15px; --fs-read: 16px;
  --fs-h3: 16px; --fs-h2: 20px; --fs-h1: 28px; --fs-kpi: 32px; --fs-mark: 17px; --fs-login: 28px;
  --lh-tight: 1.2; --lh-ui: 1.45; --lh-read: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 600;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; caret-color: var(--accent); scrollbar-color: var(--line-2) transparent; -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--link) 35%, transparent); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-ui); }
.ic { flex: none; display: block; }
.mono { font-family: var(--mono); font-size: .93em; font-variant-numeric: normal; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: var(--r-badge); background: var(--surface-3); color: var(--ink-2); font: var(--fw-medium) var(--fs-sm)/1.4 var(--sans); text-align: center; }

/* ---------- app frame ---------- */
/* the rail colour lives on the grid column, so it runs the full height of long pages */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh;
  background: linear-gradient(to right, var(--rail) 239px, var(--line) 239px 240px, var(--bg) 240px); }
.rail { position: sticky; top: 0; height: 100dvh; align-self: start; display: flex; flex-direction: column; background: var(--rail); border-right: 1px solid var(--line);
  padding: 20px 14px 16px max(14px, env(safe-area-inset-left, 0px)); z-index: 20; }
.rail-top { display: flex; align-items: center; gap: 10px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 20px; font: var(--fw-bold) var(--fs-mark)/1 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); text-decoration: none; }
.rail .rail-menu, .rail .corner-rail { display: none; }
.rail-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.nav { display: grid; gap: 2px; overflow-y: auto; min-height: 0; align-content: start; flex: 1; margin: 0 -4px; padding: 2px 4px; }
.nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: var(--frame-w) solid transparent; border-radius: var(--r-ctl);
  color: var(--ink-2); font-weight: var(--fw-regular); text-decoration: none; }
.nav a:hover { color: var(--ink); border-color: var(--line-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); font-weight: var(--fw-medium); }
.nav a[aria-current="page"] .cnt { color: var(--ink-2); }
.cnt { font: var(--fw-regular) var(--fs-sm) var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cnt.hot { color: var(--ink-2); }
.cnt.warn { color: var(--high); }
/* Privacy Mode: top bar right (desktop), next to the hamburger (phone). On = phones, IPs, ids masked (fmt.js) */
/* top right of every page: refresh, then Privacy Mode (desktop top bar; on phones the twins sit next to the hamburger) */
.corner { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; } /* above the h1 that shares its row */
.icon-btn.refresh { width: 36px; height: 36px; border: var(--frame-w) solid var(--line-2); }
.icon-btn.refresh:hover { background: transparent; border-color: var(--ctl); }
.icon-btn.refresh[aria-busy="true"] .ic { animation: spin .8s linear infinite; }
.switch.priv { height: 36px; font-size: var(--fs-meta); } /* the corner is as tall as the header buttons on its row */
.me { position: relative; margin-top: 12px; }
.me-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: var(--frame-w) solid var(--line-2); border-radius: var(--r-ctl); background: transparent; cursor: pointer; text-align: left; transition: border-color .12s; }
.me-btn:hover, .me-btn[aria-expanded="true"] { border-color: var(--ctl); }
.me-btn > .ic { margin-left: auto; color: var(--ink-3); transform: rotate(180deg); }
.me .who { display: grid; min-width: 0; line-height: 1.3; }
.me .who b { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who small { color: var(--ink-3); font-size: var(--fs-sm); }
.menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 50; padding: 4px; border-radius: var(--r-box); background: var(--surface-2); border: var(--frame-w) solid var(--line-2); box-shadow: var(--pop); }
.menu .m-head { padding: 8px 10px 10px; font-size: var(--fs-sm); color: var(--ink-3); }
.menu .m-head b { display: block; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.menu button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-badge); cursor: pointer; color: var(--ink-2); }
.menu button:hover, .menu button:focus-visible { background: var(--surface-3); color: var(--ink); outline: none; }
.menu button span.r { margin-left: auto; }
.menu button.crit { color: var(--crit-ink); }
.menu .m-state { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-3); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
/* shortcuts dialog */
.kb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.kb section { display: grid; gap: 8px; align-content: start; }
.kb h3 { margin: 0; }
.kb-side { display: grid; gap: 24px; align-content: start; }
.kb-list { display: grid; }
.kb-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; border-top: 1px solid var(--line); color: var(--ink-2); }
.kb-list > :first-child { border-top: 0; }
a.kb-row:hover { color: var(--ink); text-decoration: none; }
.ktext { display: inline-flex; gap: 4px; white-space: nowrap; }

.main { min-width: 0; padding: 28px max(40px, env(safe-area-inset-right, 0px)) 80px 40px; outline: none; }
.main > * { max-width: 1600px; margin-inline: auto; } /* fluid; centred right of the rail past 1600 (1920+ screens) */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; margin-bottom: 24px; }
/* top-level page (no breadcrumb) on a wide desktop: the h1 shares the top row with [refresh, Privacy Mode], the page actions
   sit under that group, right-aligned, next to the subtitle (owner, round 9). --corner-w is the corner group's live width
   (shell.js), so a long title stops short of it. Narrower than 1100px, or with a breadcrumb, the top bar is its own row and
   the header sits under it, actions on the right */
@media (min-width: 1100px) {
  .topbar:not(:has(.crumb > *)):has(+ .view .page-head) { margin-bottom: -36px; }
  .topbar:not(:has(.crumb > *)) + .view .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 24px; }
  .topbar:not(:has(.crumb > *)) + .view .page-head > div:first-child { display: contents; }
  .topbar:not(:has(.crumb > *)) + .view .page-head h1 { grid-area: 1 / 1 / 2 / -1; line-height: 36px; padding-right: calc(var(--corner-w, 200px) + 32px); }
  .topbar:not(:has(.crumb > *)) + .view .page-head p { grid-area: 2 / 1; }
  .topbar:not(:has(.crumb > *)) + .view .page-head > .head-r { grid-area: 2 / 2; justify-content: flex-end; margin-top: 12px; }
}
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.crumb a { display: inline-flex; align-items: center; gap: 4px; margin-left: -2px; color: var(--ink-2); white-space: nowrap; }
.crumb a:hover { color: var(--ink); }
.crumb a .ic { color: var(--ink-3); }
.crumb .sep { color: var(--ink-dis); }
.page { min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 32px; }
.page-head h1 { margin: 0; }
.page-head p:empty { display: none; }
.page-head p { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--ink-2); max-width: 72ch; }
.head-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- sections ---------- */
/* .card is a plain block on the canvas now (owner: no boxes). Frames belong to tables, inputs, menus and dialogs only. */
.card { min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.card-head .aside { font-size: var(--fs-meta); color: var(--ink-3); text-align: right; }
.card-body { padding: 0; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px 56px; }
.grid-2e { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 56px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-3); }
.sec-h { margin: 8px 0 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -.01em; }
/* sections on the canvas (components/sec.js): heading + content, no box */
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; }
.sec-head h2 { margin: 0; }
.sec-head h2 .n, .card-head h2 .n { margin-left: 8px; font-weight: var(--fw-regular); color: var(--ink-3); letter-spacing: 0; }
.sec-head .aside { font-size: var(--fs-meta); color: var(--ink-3); text-align: right; }
.sec > .empty, .sec > .loading { padding: 0; justify-content: flex-start; }
.sec.rule { border-top: 1px solid var(--line-2); padding-top: 32px; }
.sec-meta { margin: -8px 0 0; font-size: var(--fs-meta); color: var(--ink-3); } /* data-only extras under a heading */
.sec-meta:empty { display: none; }

/* KPI numbers: number first, then the phrase, then the delta. No tiles, no hairlines */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 56px; }
.stat { display: grid; gap: 4px; align-content: start; min-width: 0; text-decoration: none; color: inherit; }
a.stat:hover { color: inherit; text-decoration: none; }
a.stat:hover .l { color: var(--ink); }
.stat .v { order: -1; font: var(--fw-bold) var(--fs-kpi)/var(--lh-tight) var(--sans); letter-spacing: -.02em; }
.stat .v small { font: var(--fw-regular) var(--fs-meta) var(--sans); color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.stat .l { color: var(--ink-2); font-size: var(--fs-meta); }
.stat .note { font-size: var(--fs-meta); color: var(--ink-3); }
.stat .note .mono { font-size: inherit; font-family: inherit; }
.stat .note .up { color: var(--ink-2); } .stat .note .down { color: var(--crit-ink); }

/* status words: colour only when a state needs attention (DIRECTION §3) */
.badge { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.badge.crit { color: var(--crit-ink); } .badge.high { color: var(--high); } .badge.med { color: var(--med); }
.badge.low, .badge.vio { color: var(--link); } .badge.ok { color: var(--ink-2); }
.badge.plain { color: var(--ink-3); }
.badge.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); flex: none; }
/* the one pill: severity in the attention list, tags like «Тест», the NPC marker in the feed */
.badge.sev { padding: 1px 8px; border-radius: var(--r-badge); background: color-mix(in srgb, currentColor 14%, transparent); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4; }
.badge.sev.low { color: var(--ink-2); background: var(--surface-3); }
.badge.sev.plain { color: var(--ink-2); background: var(--surface-3); }
/* components/flag.js: square, one size per call, radius 3px at 16px; the hairline keeps white flags (JP, FI) visible */
.flag { display: inline-block; flex: none; width: var(--flag, 16px); height: var(--flag, 16px); border-radius: calc(var(--flag, 16px) * .1875); vertical-align: -.18em; object-fit: cover; outline: 1px solid rgb(255 255 255 / .1); outline-offset: -1px; }
.flag.none { background: var(--surface-3); }
.cc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: top; } /* flag + code or name; top: inside a text line it keeps the line's baseline */

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: var(--frame-w) solid var(--ctl); border-radius: var(--r-ctl); background: transparent; color: var(--ink);
  font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color .12s, background-color .12s, opacity .12s; }
.btn:hover { border-color: var(--ink-3); background: var(--surface); color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: var(--fw-bold); }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--crit-ink); border-color: var(--crit); background: transparent; }
.btn.danger:hover { background: color-mix(in srgb, var(--crit) 10%, transparent); }
.btn.danger.solid { background: var(--crit); border-color: var(--crit); color: var(--btn); font-weight: var(--fw-bold); }
.btn.small { height: 32px; padding: 0 12px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .45; cursor: default; pointer-events: none; }
.icon-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-ctl); cursor: pointer; color: var(--ink-3); flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:focus-visible { outline: var(--focus-w) solid var(--accent); }
.icon-btn.ok:hover { color: var(--ok); }
.icon-btn.no:hover { color: var(--crit-ink); }
.btn-link { all: unset; position: relative; cursor: pointer; color: var(--link); font-weight: var(--fw-medium); white-space: nowrap; }
.btn-link::after { content: ""; position: absolute; inset: -6px -8px; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-link:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.btn-link.danger { color: var(--crit-ink); }
.btn-link[disabled] { color: var(--ink-dis); cursor: default; text-decoration: none; }

/* inputs */
.input { height: 40px; padding: 0 12px; border: var(--frame-w) solid var(--ctl); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; transition: border-color .12s; }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: var(--lh-read); }
select.input { padding-right: 8px; }
.input::placeholder { color: var(--ink-dis); }
.input:hover:not(:focus):not(:disabled) { border-color: var(--ink-3); }
.input:focus { outline: var(--focus-w) solid var(--accent); outline-offset: calc(-1 * var(--frame-w)); border-color: var(--accent); }
.input:disabled { color: var(--ink-dis); background: transparent; border-color: var(--line-2); cursor: default; }
.input[aria-invalid="true"] { border-color: var(--crit); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); min-width: 0; }
.field .hint { font-weight: var(--fw-regular); color: var(--ink-3); }
/* side by side with a taller field, a textarea takes the extra height; the label stays on top (not pushed down) */
.field:has(> textarea) { grid-template-rows: auto 1fr; }
.field .input { font-size: var(--fs-body); font-weight: var(--fw-regular); }
.field .dd-btn { height: 40px; font-size: var(--fs-body); font-weight: var(--fw-regular); }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.err { color: var(--crit-ink); font-size: var(--fs-meta); min-height: 20px; }
.err:empty { display: none; }
/* switch, framed like the portal: label.switch > input[type=checkbox][role=switch] + text. Space toggles (native checkbox) */
.switch { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: var(--frame-w) solid var(--line-2); border-radius: var(--r-ctl);
  cursor: pointer; font-weight: var(--fw-medium); color: var(--ink-2); white-space: nowrap; transition: border-color .12s, color .12s; }
.field > .switch { font-size: var(--fs-body); } /* not the field label's 13px: same as a switch anywhere else */
.switch:hover { border-color: var(--ctl); color: var(--ink); }
.switch:has(input:checked) { border-color: var(--accent); color: var(--ink); }
.switch input { appearance: none; width: 26px; height: 14px; border-radius: 7px; background: var(--ctl); position: relative; cursor: pointer; margin: 0; flex: none; transition: background-color .15s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transition: transform .15s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(12px); background: var(--btn-ink); }
.switch input:focus-visible { outline: none; }
.switch:has(input:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.switch:has(input:disabled) { opacity: .45; cursor: default; }
.meter { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.meter i.ok { background: var(--accent); } .meter i.warn { background: var(--high); } .meter i.bad { background: var(--crit); }

/* dropdowns */
.dd { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
.dd-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: var(--frame-w) solid var(--ctl); border-radius: var(--r-ctl); background: transparent; cursor: pointer; white-space: nowrap; width: 100%; justify-content: space-between; transition: border-color .12s; }
.dd-btn:hover { border-color: var(--ink-3); background: var(--surface); }
.dd-btn .dd-label { color: var(--ink-3); }
.dd-btn .dd-val { min-width: 0; font-weight: var(--fw-regular); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.dd-btn .ic { color: var(--ink-3); transition: transform .15s var(--ease); }
.dd-btn[aria-expanded="true"] { border-color: var(--ink-2); }
.dd-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.dd.set > .dd-btn { border-color: var(--ink-2); }
.dd-pop { position: fixed; z-index: 70; min-width: 210px; border-radius: var(--r-box); background: var(--surface-2); border: var(--frame-w) solid var(--line-2); box-shadow: var(--pop); overflow: hidden; animation: pop-in .14s var(--ease); }
.dd-pop ul { list-style: none; margin: 0; padding: 4px; max-height: 320px; overflow-y: auto; }
.dd-pop li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-badge); cursor: pointer; white-space: nowrap; color: var(--ink-2); }
.dd-pop li:hover, .dd-pop li:focus { background: var(--surface-3); color: var(--ink); outline: none; }
.dd-pop li .n { margin-left: auto; color: var(--ink-3); font-size: var(--fs-sm); }
.dd-pop li[aria-disabled="true"], .dd-pop li[aria-disabled="true"] .n { color: var(--ink-dis); cursor: default; }
.dd-pop li[aria-disabled="true"] .flag { opacity: .5; }
.dd-btn .dd-val .flag, .dd-btn .dd-val .ic { margin-right: 8px; }
.dd-btn .dd-val .ic { display: inline-block; vertical-align: -3px; } /* an option's lead icon stays on the text line */
.dd-pop .cb { width: 16px; height: 16px; border-radius: var(--r-badge); border: var(--frame-w) solid var(--ctl); display: grid; place-items: center; flex: none; }
.dd-pop li[aria-selected="true"] { color: var(--ink); }
.dd-pop li[aria-selected="true"] .cb { background: var(--btn); border-color: var(--btn); }
.dd-pop li[aria-selected="true"] .cb::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--btn-ink); border-bottom: 2px solid var(--btn-ink); transform: rotate(-45deg) translate(1px, -1px); }
.dd-pop:not(.multi) li[aria-selected="true"] { font-weight: var(--fw-medium); }
.dd-pop:not(.multi) li[aria-selected="true"]::after { content: ""; margin-left: auto; width: 9px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translateY(-2px); flex: none; }
.dd-pop:not(.multi) li[aria-selected="true"]:has(.n)::after { margin-left: 8px; }
.dd-search { position: relative; border-bottom: 1px solid var(--line); }
.dd-search .ic { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--ink-3); pointer-events: none; }
.dd-q { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 0; background: transparent; color: var(--ink); outline: none; }
.dd-q::placeholder { color: var(--ink-dis); }
.dd-pop li.act { background: var(--surface-3); color: var(--ink); }
.dd-none { padding: 10px 14px 12px; color: var(--ink-3); font-size: var(--fs-meta); }
.dd-foot { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.scrim { display: none; }

/* toolbar, segmented control */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar .grow { margin-left: auto; }
/* one row, one height: fields, dropdowns and buttons match the seg's 34px frame (40px on phones, see 640px) */
.toolbar .input, .toolbar .dd-btn, .toolbar .btn:not(.small) { height: 34px; }
.search { position: relative; flex: 1 1 280px; max-width: 480px; min-width: 0; }
.search .ic { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 36px; }
/* segmented control (components/seg.js), identical everywhere: a 34px frame, 28px segments fully inside it (2px inset on
   every side, concentric corners), the chosen one raised. Label and counter share one inline box, so every segment has
   the same baseline with or without a counter. Font is set here: a seg inside a .field must not inherit the label size */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; max-width: 100%; border: var(--frame-w) solid var(--line-2); border-radius: var(--r-ctl); background: var(--rail);
  font: var(--fw-medium) var(--fs-body)/1 var(--sans); }
.seg button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: var(--r-badge);
  white-space: nowrap; color: var(--ink-3); transition: color .12s, background-color .12s, box-shadow .12s; }
.seg button > span { line-height: 1; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 1px rgb(0 0 0 / .45); }
.seg .n { margin-left: 8px; font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1; color: var(--ink-3); }
.seg button[aria-checked="true"] .n { color: var(--ink-2); }
.seg button:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
/* page tabs (components/tabs.js): sections of a page, never a filter. Right under the title, larger text, the chosen tab in
   ink on a 2px accent underline that covers the hairline under the whole row; counts muted */
.tabs { display: flex; gap: 28px; margin: -16px 0 24px; box-shadow: inset 0 -1px 0 var(--line); }
.tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 0 12px; border-bottom: 2px solid transparent;
  font: var(--fw-medium) var(--fs-read)/1.25 var(--sans); white-space: nowrap; color: var(--ink-2); transition: color .12s, border-color .12s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .n { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--ink-3); }
.tabs button:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) { /* three tabs may not fit 358px: the row scrolls in itself; 4px room keeps the focus ring visible */
  .tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; padding-inline: 4px; margin-inline: -4px; }
  .tabs button { font-size: var(--fs-body); }
}
/* number stepper (components/stepper.js): + over − inside the input's right edge, each half its height, hairlines between */
.stp { position: relative; display: block; min-width: 0; }
.stp > .input { padding-right: 38px; }
.stp-b { position: absolute; top: var(--frame-w); right: var(--frame-w); bottom: var(--frame-w); width: 26px; display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--line-2); }
.stp-b button { all: unset; box-sizing: border-box; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); transition: color .12s, background-color .12s; }
.stp-b button + button { border-top: 1px solid var(--line-2); }
.stp-b button:first-child { border-top-right-radius: calc(var(--r-ctl) - var(--frame-w)); }
.stp-b button:last-child { border-bottom-right-radius: calc(var(--r-ctl) - var(--frame-w)); }
.stp-b button:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.stp-b button:disabled { color: var(--ink-dis); cursor: default; }
.stp:has(.input:disabled) .stp-b { display: none; }

/* lists: rows on the canvas, hairline between rows and under the last */
.list { display: grid; }
.row { position: relative; display: grid; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; color: inherit; text-decoration: none; }
a.row:hover, .row.click:hover { color: inherit; cursor: pointer; text-decoration: none; }
:is(a.row, .row.click):hover .title { color: var(--link); }
.title { font-weight: var(--fw-medium); color: var(--ink); }
.meta { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; }
.ts { font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* empty, loading, error */
.empty { padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--ink-2); }
.empty.fail > span { color: var(--crit-ink); }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; color: var(--ink-3); font-size: var(--fs-meta); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }
.wip { margin-top: 8px; }
.wip .empty { padding: 0; }

/* key-value */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 24px; margin: 0; }
.kv dt { font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: 2px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
/* rows share one key column: as wide as the longest key, at most 180px (subgrid keeps the values aligned) */
.kv.rows { grid-template-columns: fit-content(180px) minmax(0, 1fr); gap: 0 16px; }
.kv.rows > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv.rows > div:last-child { border-bottom: 0; }
.kv.rows dt { margin: 0; }

/* tables: one frame, header row, hairlines; the frame scrolls sideways by itself on narrow screens */
.tbl-wrap { position: relative; overflow-x: auto; border: var(--frame-w) solid var(--line-2); border-radius: var(--r-box); scrollbar-width: thin; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-3); padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tbl th button:hover, .tbl th[aria-sort] button { color: var(--ink); }
.tbl th button:focus-visible { outline: var(--focus-w) solid var(--accent); border-radius: 2px; }
.tbl th button .ic { display: none; transition: transform .15s var(--ease); }
.tbl th[aria-sort] button .ic { display: block; }
.tbl th[aria-sort="ascending"] button .ic { transform: rotate(180deg); }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl td.wrap { white-space: normal; min-width: 220px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.num { font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--surface); }
.tbl tr.click:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: calc(-1 * var(--focus-w)); }
.tbl tr.click:focus-visible td { background: var(--surface); }
.row.click:focus-visible, a.row:focus-visible { outline-offset: 4px; }
.tbl td .sub { display: block; font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; }
.tbl td > .empty { padding: 2px 0; }

/* ---------- charts (Telegram-style: plot + range navigator + series toggles) ---------- */
.tg { position: relative; display: grid; gap: 12px; padding-top: 2px; }
.tg-plot { position: relative; outline: none; touch-action: pan-y; cursor: crosshair; }
.tg-plot canvas, .tg-nav canvas { display: block; width: 100%; }
.tg-plot:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.tg-tip { position: absolute; top: 4px; left: 0; z-index: 3; min-width: 180px; max-width: 280px; padding: 10px 12px; background: var(--surface-2); border: var(--frame-w) solid var(--line-2); border-radius: var(--r-ctl); box-shadow: var(--pop); pointer-events: none; display: grid; gap: 4px; font-size: var(--fs-sm); transition: opacity .12s; }
.tg-tip .d { font-weight: var(--fw-medium); margin-bottom: 2px; color: var(--ink); }
.tg-tip .r { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--ink-2); }
.tg-tip .r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-tip .r i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tg-tip .r b { font-weight: var(--fw-bold); color: var(--ink); }
.tg-tip .t { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 4px; grid-template-columns: minmax(0, 1fr) auto; }
.tg-nav { position: relative; height: 44px; user-select: none; -webkit-user-select: none; touch-action: none; border-radius: var(--r-badge); overflow: hidden; cursor: pointer; }
.tg-dim { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); pointer-events: none; }
.tg-win { position: absolute; top: 0; bottom: 0; border: 1px solid color-mix(in srgb, var(--ink-2) 55%, transparent); border-inline-width: 8px; border-radius: var(--r-badge); cursor: grab; touch-action: none; }
.tg-win::before, .tg-win::after { content: ""; position: absolute; top: 50%; width: 2px; height: 12px; margin-top: -6px; border-radius: 1px; background: var(--bg); pointer-events: none; }
.tg-win::before { left: -5px; } .tg-win::after { right: -5px; }
.tg-win:hover { border-color: color-mix(in srgb, var(--ink-2) 80%, transparent); }
.tg-win:active { cursor: grabbing; }
.tg-win:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 1px; }
.tg-win .h { position: absolute; top: 0; bottom: 0; width: 22px; cursor: ew-resize; }
.tg-win .h.l { left: -15px; } .tg-win .h.r { right: -15px; }
/* series toggles: colour swatch + name; a hidden series fades out */
.tg-tgs { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tg-tg { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--fs-sm); color: var(--ink-3); transition: color .12s; }
.tg-tg .sw { width: 10px; height: 10px; border-radius: 2px; background: var(--c); opacity: .3; transition: opacity .15s; }
.tg-tg[aria-pressed="true"] { color: var(--ink-2); }
.tg-tg[aria-pressed="true"] .sw { opacity: 1; }
.tg-tg:hover { color: var(--ink); }
.tg-tg:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tg-tg.shake { animation: shake .32s; }
@keyframes shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.tg .empty { min-height: 200px; align-content: center; justify-content: center; }

/* activity calendar */
.hm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hm-scroll { overflow-x: auto; scrollbar-width: thin; outline: none; border-radius: var(--r-badge); }
.hm-scroll:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.hm svg { display: block; width: auto; max-width: none; min-width: 0; } /* sized in px by heatmap.js from the container width */
.hm text { fill: var(--ink-3); font: var(--fw-regular) var(--fs-xs) var(--sans); }
.hm rect { shape-rendering: crispEdges; }
.hm .l0 { fill: var(--h0); } .hm .l1 { fill: var(--h1); } .hm .l2 { fill: var(--h2); } .hm .l3 { fill: var(--h3); } .hm .l4 { fill: var(--h4); }
.hm rect.cur { stroke: var(--ink); stroke-width: 1.5; }
.hm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: var(--fs-meta); color: var(--ink-2); }
.hm-foot b { color: var(--ink); font-weight: var(--fw-bold); }
.hm-leg { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); } /* stays at the grid's right edge when it wraps */
.hm-leg span { margin: 0 4px; }
.hm-leg i { width: 12px; height: 12px; border-radius: 2px; }
.hm-leg i.l0 { background: var(--h0); } .hm-leg i.l1 { background: var(--h1); } .hm-leg i.l2 { background: var(--h2); } .hm-leg i.l3 { background: var(--h3); } .hm-leg i.l4 { background: var(--h4); }
.hm-wrap { position: relative; }
.hm-tip { position: absolute; z-index: 3; padding: 6px 10px; border-radius: var(--r-ctl); background: var(--surface-2); border: var(--frame-w) solid var(--line-2); box-shadow: var(--pop); font-size: var(--fs-sm); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 6px)); }
.hm-tip b { font-weight: var(--fw-bold); }
.hm-tip .d { color: var(--ink-3); }

/* carousel (avatar / bio review) */
.car { display: grid; grid-template-columns: minmax(0, 440px) minmax(240px, 1fr); gap: 16px 24px; outline: none; }
.car:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 4px; border-radius: var(--r-box); }
.car-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 460px; border-radius: var(--r-box); background: var(--rail); border: var(--frame-w) solid var(--line-2); overflow: hidden; }
.car-stage img { width: 100%; height: 100%; object-fit: contain; }
.car-stage .icon-btn { position: absolute; top: 50%; margin-top: -18px; border-radius: 50%; background: color-mix(in srgb, var(--rail) 80%, transparent); color: var(--ink); border: var(--frame-w) solid var(--line-2); }
.car-stage .icon-btn:hover { background: var(--surface-3); }
.car-stage .icon-btn[disabled] { opacity: 0; pointer-events: none; }
.car-stage .prev { left: 10px; } .car-stage .next { right: 10px; }
.car-stage .stamp { position: absolute; top: 10px; left: 10px; padding: 1px 8px; border-radius: var(--r-badge); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; background: var(--rail); color: var(--ink-2); }
.car-stage .stamp.crit { color: var(--crit-ink); }
.car-side { display: grid; gap: 12px; align-content: start; max-width: 340px; }
.car-count { font-size: var(--fs-meta); color: var(--ink-3); }
.car-cap { margin: 0; color: var(--ink); font-size: var(--fs-read); line-height: var(--lh-read); overflow-wrap: anywhere; }
.car-meta { font-size: var(--fs-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.car-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.car-left { font-size: var(--fs-meta); color: var(--ink-3); }
.car-thumbs { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 4px; scrollbar-width: thin; }
.car-thumbs button { all: unset; position: relative; flex: none; width: 56px; height: 56px; border-radius: var(--r-ctl); overflow: hidden; cursor: pointer; border: var(--frame-w) solid var(--line); opacity: .7; transition: opacity .12s, border-color .12s; }
.car-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.car-thumbs button:hover, .car-thumbs button.ok { opacity: 1; }
.car-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ink-2); }
.car-thumbs button:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 1px; }
.car-thumbs button.crit img { filter: grayscale(1) brightness(.55); }

/* ---------- modal, toast ---------- */
dialog.modal { padding: 0; width: min(560px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 48px)); color: var(--ink); background: var(--surface-2); border: var(--frame-w) solid var(--line-2); border-radius: var(--r-box); box-shadow: 0 24px 64px rgb(0 0 0 / .6);
  opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .18s ease-out, transform .22s var(--ease); overflow: hidden; }
dialog.modal.on { opacity: 1; transform: none; }
dialog.modal:focus { outline: none; }
dialog.modal.wide { width: min(780px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgb(0 0 0 / .66); opacity: 0; transition: opacity .18s ease-out; }
dialog.modal.on::backdrop { opacity: 1; }
.modal form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; margin: 0; }
.modal header { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 20px 20px 4px 24px; }
.modal header h2 { margin: 6px 0 0; }
.modal header p { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--ink-3); }
.modal .m-body { overflow-y: auto; padding: 16px 24px 8px; display: grid; gap: 16px; align-content: start; color: var(--ink-2); }
.modal .m-body p { margin: 0; }
.modal footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; }
/* confirmTyped(): the name to retype */
.field.typed b { color: var(--ink); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
/* toasts (components/toast.js): bottom-right stack, newest at the bottom; a manual popover, so they sit above open dialogs */
.toasts { position: fixed; inset: auto max(24px, env(safe-area-inset-right, 0px)) calc(24px + var(--toast-lift, 0px) + env(safe-area-inset-bottom, 0px)) auto; z-index: 80; width: 380px; max-width: calc(100vw - 32px);
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: var(--frame-w) solid var(--line-2); border-radius: var(--r-box);
  background: var(--surface-2); box-shadow: var(--pop); opacity: 0; transform: translateY(10px); transition: opacity .2s ease-out, transform .26s var(--ease); }
.toast.on { opacity: 1; transform: none; }
.toast > .ic { margin-top: 3px; color: var(--ok); }
.toast.t-info > .ic { color: var(--link); }
.toast.t-err { border-color: var(--crit); }
.toast.t-err > .ic { color: var(--crit-ink); }
.toast-b { flex: 1; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.toast-b b { font-weight: var(--fw-medium); }
.toast-b span { font-size: var(--fs-meta); color: var(--ink-3); }
.toast-act { all: unset; cursor: pointer; padding: 0 4px; font-weight: var(--fw-bold); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.toast-act:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.toast-x { all: unset; flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -3px 0; border-radius: var(--r-badge); color: var(--ink-3); cursor: pointer; }
.toast-x:hover { color: var(--ink); background: var(--surface-3); }
.toast-x:focus-visible { outline: var(--focus-w) solid var(--accent); }
@media (max-width: 640px) { .toasts { left: 16px; right: 16px; bottom: calc(16px + var(--toast-lift, 0px) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; } }

/* ---------- login ---------- */
.login { position: relative; isolation: isolate; background: var(--bg); /* opaque base: the grain blends against it */ min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px 12vh; }
.login-box { position: relative; width: min(360px, 100%); display: grid; gap: 36px; }
/* backdrop (login_bg.js): fixed behind everything, never under the pointer; a low green glow under the form */
.lg-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.lg-words { overflow: hidden; mask-image: radial-gradient(ellipse 300px 340px at 50% 45%, transparent 55%, #000 100%); }
.lg-rows { position: absolute; inset: -30% -40%; display: grid; align-content: center; gap: 4px; transform: rotate(-7deg); }
.lg-row { white-space: nowrap; font: var(--fw-bold) 84px/1.15 var(--sans); letter-spacing: -.03em; color: rgb(238 242 246 / .04); animation: lg-drift 140s linear infinite; }
.lg-row.r { animation-direction: reverse; }
.lg-row span { margin-right: .5em; }
.lg-row .g { color: rgb(0 237 100 / .09); }
@keyframes lg-drift { to { transform: translateX(-30%); } }
.login::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; } /* film grain over the words; the form sits above it */
@media (prefers-reduced-motion: reduce) { .lg-row { animation: none; } }
@media (max-width: 640px) { .lg-row { font-size: 56px; } .lg-words { mask-image: radial-gradient(ellipse 200px 300px at 50% 45%, transparent 55%, #000 100%); } }
.login::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 760px 440px at 50% 82%, rgb(0 237 100 / .065), rgb(0 237 100 / .03) 35%, rgb(0 237 100 / .01) 60%, transparent 80%); }
/* «Remember me»: native checkbox, accent fill, the tick draws itself in */
.lg-check { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 24px; cursor: pointer; color: var(--ink-2); font-size: var(--fs-meta); user-select: none; }
.lg-check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: var(--frame-w) solid var(--ctl); border-radius: var(--r-badge); background: var(--surface); cursor: pointer; transition: background-color .15s, border-color .15s; }
.lg-check:hover input:not(:checked) { border-color: var(--ink-3); }
.lg-check input:checked { background: var(--accent); border-color: var(--accent); }
.lg-check input:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.lg-check:has(input:disabled) { opacity: .45; cursor: default; }
.lg-tick { position: absolute; left: 1px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--btn-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .2s var(--ease); pointer-events: none; }
.lg-check input:checked + .lg-tick { stroke-dashoffset: 0; transition-delay: .06s; }
.login-mark { display: grid; justify-items: center; gap: 6px; margin: 0; text-align: center; font-weight: var(--fw-regular); }
.login-mark b { font: var(--fw-bold) var(--fs-login)/var(--lh-tight) var(--sans); letter-spacing: -.02em; }
.login-mark span { color: var(--ink-3); font-size: var(--fs-body); }
.login-form { display: grid; gap: 16px; }
.login-form .btn { width: 100%; height: 40px; margin-top: 8px; }
.lockout { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--high); }
.fatal { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
/* settings: two-factor (pages/settings_totp.js) */
.tf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tf-row .btn { margin-left: auto; }
.tf-qr { width: 200px; height: 200px; padding: 12px; background: var(--btn); border-radius: var(--r-ctl); justify-self: center; }
.tf-qr svg { display: block; width: 100%; height: 100%; }
.tf-key { display: grid; gap: 6px; }
.tf-key-row { display: flex; align-items: center; gap: 12px; }
.tf-secret { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; user-select: all; }

/* ---------- dev gallery ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-sm); color: var(--ink-3); }
.swatches span { display: inline-flex; align-items: center; gap: 6px; }
.swatches i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .grid-2, .grid-2e, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--bg); }
  .rail { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; padding: env(safe-area-inset-top, 0px) 0 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-top { flex: 1; min-width: 0; height: 56px; gap: 8px; padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
  .wordmark { padding: 0; margin-right: auto; }
  .rail .corner-rail { display: flex; }
  .topbar .corner-top { display: none; }
  .topbar:not(:has(.crumb > *)) { display: none; }
  .rail .rail-menu { display: inline-grid; width: 40px; height: 40px; }
  /* drawer: fixed, full height under the top bar, over a scrim */
  .rail-panel { display: none; position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); left: 0; bottom: 0; width: min(320px, 86vw); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)); background: var(--rail); border-right: var(--frame-w) solid var(--line-2); box-shadow: var(--pop); }
  .rail.open .rail-panel { display: flex; animation: drawer-in .2s var(--ease); }
  .rail.open ~ .scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgb(0 0 0 / .5); animation: fade-in .2s ease-out; }
  .nav { overflow: visible; }
  .nav a { height: 44px; }
  .main { padding: 24px 24px 64px; }
}
@media (max-width: 640px) {
  .main { padding: 20px 16px 56px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 24px; }
  .f2 { grid-template-columns: minmax(0, 1fr); }
  .kv.rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hide-sm { display: none !important; }
  .car { grid-template-columns: minmax(0, 1fr); }
  .card-head, .sec-head { flex-wrap: wrap; }
  .tbl th, .tbl td { padding-inline: 12px; }
  .tbl td .badge { white-space: normal; } /* a long status wraps instead of widening the table */
  .page-head > .head-r { flex-basis: 100%; } /* header buttons always on their own row under the title and subtitle */
  .page-head .head-r .switch { order: 1; } /* the wide «Служебная роль» switch goes last, the buttons keep one row */
  /* iOS zooms into anything smaller than 16px */
  .input, .field .input, .field .dd-btn, select, textarea { font-size: 16px; }
  .btn { height: 40px; } .btn.small { height: 36px; }
  .btn-link::after { inset: -11px -10px; }
  .tbl th { height: 40px; padding-block: 0; } .tbl th button { min-height: 40px; } /* the 40px tap target is the row, not 40px plus padding */
  /* phones: 40px like the inputs next to it; when it has to wrap, every row is filled edge to edge */
  .seg button { flex: 1 1 auto; height: 34px; }
  .lg-check { min-height: 44px; } /* the whole row is the hit area */
  .stp-b { width: 34px; } .stp > .input { padding-right: 46px; } /* thumb-sized halves */
  .dd-btn, .toolbar .input, .toolbar .dd-btn, .toolbar .btn:not(.small) { height: 40px; }
  .dd-q { height: 44px; font-size: 16px; }
  dialog.modal { width: calc(100vw - 24px); }
  .modal header { padding: 16px 16px 4px 20px; } .modal .m-body { padding: 14px 20px 8px; } .modal footer { padding: 14px 20px 18px; flex-wrap: wrap; }
  .modal footer .btn { flex: 1; }
  .kb { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) {
  .tg-win .h { width: 30px; } .tg-win .h.l { left: -22px; } .tg-win .h.r { right: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ========== section: scenes + RAG + settings (pages/scenes.js, scene.js, rag.js, settings.js): rest zone ========== */
/* one-line warning with an icon, no box (launch dialog, search note) */
.sc-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink-2); font-size: var(--fs-meta); }
.sc-warn .ic { margin-top: 2px; color: var(--high); }
.sc-prog { display: inline-flex; align-items: center; gap: 10px; }
.sc-prog .meter { width: 48px; min-width: 48px; }

/* scenes list: table cells */
.sc-t a { color: var(--ink); font-weight: var(--fw-medium); }
.sc-roles { color: var(--ink-2); }
.tbl td .sub.no, .sc-pick .cast .no, .kv .no { color: var(--crit-ink); }
.tbl td a.sub { color: var(--ink-3); }
.tbl td a.sub:hover { color: var(--ink-2); }

/* keyword triggers (pages/triggers.js): words under the name cut at one line; the edit dialog's form */
.tbl td .tg-words { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; }
.tg-chats { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.tg-form { display: grid; gap: 16px; }
.tg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.tg-sw { display: flex; flex-wrap: wrap; gap: 10px; }
.tbl td .tg-sm { display: none; } /* phone: the «Срабатывал» column moves under the name */
@media (max-width: 640px) {
  .tbl td .tg-words { max-width: 22ch; }
  .tbl td .tg-sm { display: block; }
  .tg-nums { gap: 10px; }
  .tg-sw .switch { white-space: normal; height: auto; min-height: 32px; padding-block: 6px; }
}

/* vertical step sequence (definition and run): numbered nodes on one unbroken line */
.sc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.sc-vpipe { --node: 28px; list-style: none; margin: 0; padding: 0; display: grid; }
.sc-vpipe .vp { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); gap: 0 16px; padding-bottom: 32px; }
.sc-vpipe.compact .vp { padding-bottom: 20px; }
.sc-vpipe .vp:last-child { padding-bottom: 0; }
/* each item draws the line through its whole height (behind the node), so segments meet with no gap */
.sc-vpipe .vp::before { content: ""; position: absolute; left: calc(var(--node) / 2 - var(--frame-w) / 2); top: 0; bottom: 0; width: var(--frame-w); background: var(--line-2); }
.sc-vpipe .vp:first-child::before { top: calc(var(--node) / 2); }
.sc-vpipe .vp:last-child::before { bottom: auto; height: calc(var(--node) / 2); }
.sc-vpipe .vp:only-child::before { display: none; }
.sc-vpipe .node { position: relative; z-index: 1; box-sizing: border-box; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; border: var(--frame-w) solid var(--line-2); background: var(--bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.sc-vpipe .vp.done .node { background: var(--surface-3); border-color: var(--ink-3); color: var(--ink); }
.sc-vpipe .vp.cur .node { border: var(--focus-w) solid var(--link); color: var(--link); }
.sc-vpipe .vp.cur.paused .node, .sc-vpipe .vp.stop .node { border: var(--focus-w) solid var(--high); color: var(--high); }
.sc-vpipe .vp.fin .node { border-color: var(--ink-3); color: var(--ink-2); }
.sc-vpipe .vp.todo .vp-h b, .sc-vpipe .vp.todo .vp-gist { color: var(--ink-3); }
.vp-b { min-width: 0; max-width: 820px; }
.vp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-top: 3px; }
.vp-h b { font-weight: var(--fw-bold); color: var(--ink); }
.vp-h .vp-a { color: var(--ink-3); font-size: var(--fs-meta); }
.vp-h .vp-w { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.vp-h .vp-st { font-size: var(--fs-meta); color: var(--ink-3); }
.sc-vpipe .vp.cur .vp-st { color: var(--link); }
.sc-vpipe .vp.cur.paused .vp-st, .sc-vpipe .vp.stop .vp-st { color: var(--high); }
.vp-intent { margin: 6px 0 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); max-width: 72ch; text-wrap: pretty; }
.vp-dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 16px; margin: 12px 0 0; max-width: 72ch; }
.vp-dl dt { font-size: var(--fs-meta); color: var(--ink-3); padding-top: 1px; }
.vp-dl dd { margin: 0; color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.vp-gist { margin: 4px 0 0; color: var(--ink-2); max-width: 72ch; text-wrap: pretty; }
.sc-wrap { color: var(--ink-2); }
.sc-dg { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--ok); }
.sc-done { display: inline-flex; align-items: center; gap: 10px; }
.sc-done .meter { width: 80px; }

/* run log: rows on the canvas */
.sc-log { list-style: none; margin: 0; padding: 0; }
.sc-lr { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sc-lr .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sc-lr .who b { font-weight: var(--fw-medium); }
.sc-lr .who .step { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); }
.sc-lr p { margin: 4px 0 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.sc-lr.sys { padding-block: 9px; color: var(--ink-3); }
.sc-lr.hit { color: var(--ink-2); }
.sc-lr.end { color: var(--ink); font-weight: var(--fw-medium); }
.sc-ok { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--ok); }
.no > .sc-ok { color: var(--crit-ink); }
.sc-pick .cast > span { white-space: nowrap; }

/* launch dialog: chat picker with readiness (radio rows are controls, so they keep a frame) */
.sc-pick { display: grid; gap: 8px; }
.sc-pick label { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: var(--frame-w) solid var(--ctl); border-radius: var(--r-ctl); cursor: pointer; transition: border-color .12s, background-color .12s; }
.sc-pick label:hover { border-color: var(--ink-3); }
.sc-pick label:has(input:checked) { border-color: var(--ink-2); background: var(--surface); }
.sc-pick label:has(input:disabled) { cursor: default; border-color: var(--line-2); }
.sc-pick label:has(input:disabled) .title { color: var(--ink-2); }
.sc-pick label:has(input:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.sc-pick input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--ink); }
.sc-pick .pick-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sc-pick .pick-t > .badge:last-child:not(.sev) { margin-left: auto; }
.sc-pick .cast { margin-top: 4px; font-size: var(--fs-meta); color: var(--ink-2); }
.sc-pick .why { margin-top: 4px; font-size: var(--fs-meta); color: var(--high); }

/* RAG */
.rg-sm { display: none; }
.rg-acts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.rg-acts-sm { justify-content: flex-start; min-height: 40px; }
.rg-acts-sm > .icon-btn:first-child { margin-left: -10px; } /* alone, the ✕ lines up with the text above, not its 36px hit box */
.rg-err { color: var(--crit-ink) !important; }
.rg-warn { display: grid; gap: 6px; margin: -8px 0 32px; } /* corpus-wide problems, under the page subtitle */
.rg-warn:empty { display: none; }
.rg-left { margin: 0; font-size: var(--fs-meta); }
.rg-src td:nth-child(2) { white-space: normal; min-width: 200px; }
.rg-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
@media (min-width: 1440px) { .rg-two { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; } }
.rg-fill { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rg-meter { width: 120px; }
.rg-q { margin: 0; }
.rg-q .search { max-width: none; }
.rg-q + div .sc-warn { margin-bottom: 8px; }
.rg-none { margin: 0; color: var(--ink-2); }
.rg-src .sub:not(.rg-err, .rg-why) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.rg-hits { list-style: none; margin: 0; padding: 0; }
.rg-hit { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rg-hit .rk { color: var(--ink-3); }
.rg-hit-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rg-scores { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: var(--fs-meta); color: var(--ink-3); }
.rg-scores b { color: var(--ink-2); font-weight: var(--fw-medium); }
.rg-t { margin: 6px 0 0; font-size: var(--fs-read); line-height: var(--lh-read); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 80ch; }
.rg-t.reply { display: flex; gap: 6px; margin-top: 4px; color: var(--ink-2); }
.rg-t.reply .ic { margin-top: 6px; color: var(--ink-3); }
/* cleaning rules: [switch, steppers wrapping under it] [убрано N  12%]; a switched-off rule's steppers fade */
.rg-rules { display: grid; gap: 16px; }
.rg-rules > .sec-meta { margin: -8px 0 0; }
.rg-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 57px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rg-rule-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rg-rule.always .rg-rule-l > span:first-child { color: var(--ink-2); }
.rg-ps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; transition: opacity .15s; }
.rg-rule-l:has(> .switch input:not(:checked)) .rg-ps { opacity: .45; }
.rg-p { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--ink-2); white-space: nowrap; }
.rg-p .stp { width: 84px; }
.rg-p .input { height: 32px; }
.rg-rule-n { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rg-rule-n .sub { display: inline; }

/* settings: checks + keys, then models, limits, two-factor; side by side on wide screens */
.st-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
@media (min-width: 1800px) {
  .st-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .st-page .st-llm-top { grid-template-columns: minmax(0, 1fr) 136px 170px 190px; } /* half width: today's spend gets its own row */
  .st-page .st-llm-top > :nth-child(5) { grid-column: 1 / -1; }
}
.st-res.bad { color: var(--crit-ink); }
.st-res.none { color: var(--ink-3); }
.st-page .tbl td:nth-child(2) { white-space: normal; }
.st-sm { display: none !important; }
.st-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.st-models { gap: 14px 16px; }
.st-llm-top .st-num { margin-left: 0; }
.rg-two .tbl td:first-child { white-space: normal; }
.st-llm-top { display: grid; grid-template-columns: minmax(0, 1.2fr) 136px 170px 190px minmax(0, 1fr); gap: 14px 16px; align-items: end; }
@media (max-width: 1360px) { /* the router address and today's spend would be cut: the spend gets its own row */
  .st-llm-top { grid-template-columns: minmax(0, 1fr) 136px 170px 190px; }
  .st-llm-top > :nth-child(5) { grid-column: 1 / -1; }
}
.st-ro { font-size: var(--fs-meta); height: 40px; display: flex; align-items: center; padding: 0 12px; border: var(--frame-w) dashed var(--line-2); border-radius: var(--r-ctl); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-spent { display: flex; align-items: center; gap: 10px; height: 40px; white-space: nowrap; font-size: var(--fs-body); font-weight: var(--fw-regular); }
.st-spent b { font-weight: var(--fw-medium); color: var(--ink); }
.st-spent .meter { flex: 1; }
.st-num { text-align: right; width: 100%; max-width: 120px; margin-left: auto; display: block; }
.stp.st-num .input { text-align: right; } /* the width sits on the stepper's frame so + / − stay inside the field */
.st-min0 { min-width: 0; }
.st-price td { padding-top: 8px; padding-bottom: 8px; }
.st-price td:first-child { width: 42%; min-width: 220px; }
.st-price td:last-child { width: 72px; }
.st-price-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding-top: 12px; font-size: var(--fs-meta); }
.st-price-foot .btn-link { display: inline-flex; align-items: center; gap: 4px; }
.st-form-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.st-form-foot .err { margin-right: auto; }
.st-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; max-width: 720px; }
.st-lim { align-content: start; }
.st-lim-in { display: flex; align-items: center; gap: 12px; }
.st-lim-in .st-num { margin-left: 0; max-width: 120px; }
.st-range { font-size: var(--fs-meta); font-weight: var(--fw-regular); white-space: nowrap; }
.st-owner { max-width: 200px; font-variant-numeric: tabular-nums; }
.st-owner-n { font-size: var(--fs-meta); font-weight: var(--fw-regular); }

@media (max-width: 1180px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .st-llm-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vp-h .vp-w { margin-left: 0; width: 100%; }
  .sc-vpipe .vp { gap: 0 12px; }
  .vp-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vp-dl dd + dt { margin-top: 6px; }
  .sc-lr { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .rg-scores { margin-left: 0; width: 100%; }
  .rg-src .sub:not(.rg-err, .rg-why) { max-width: 260px; } /* the only column on a phone */
  .rg-sm { display: block !important; margin-top: 4px; }
  .rg-meter { width: 100%; }
  .st-llm-top, .st-limits { grid-template-columns: minmax(0, 1fr); }
  .st-sm { display: block !important; }
  .st-page .tbl td { white-space: normal; }
  .st-price thead { display: none; }
  .st-price, .st-price tbody { display: block; }
  .st-price tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
  .st-price tr:last-child { border-bottom: 0; }
  .st-price td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; }
  .st-price td:first-child { grid-column: 1 / 4; }
  .st-price td:last-child { grid-column: 4; grid-row: 1; align-self: center; text-align: right; }
  .st-price td:last-child:empty { display: none; }
  .st-price td[data-label] { grid-row: 2; } /* the «*» row has no ✕: keep its prices off the free 4th cell */
  .st-price td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-sm); color: var(--ink-3); text-align: left; }
  .st-price .st-num { max-width: none; }
}
/* ========== end section: scenes + RAG + settings ========== */

/* ---------- overview (dashboard) + journal: owner overview zone (DIRECTION §7 Overview) ---------- */
/* the one header line, only while the fleet is stopped */
.ov-fleet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--crit-ink); font-weight: var(--fw-medium); }
.ov-fleet .btn { margin-left: 4px; }
.ov-who { display: flex; align-items: center; gap: 10px; }
.ov-stale { opacity: .55; transition: opacity .15s; }
.stat .note .warn { color: var(--high); }
.ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
/* KPI: number, then the phrase, then the delta; no boxes, no rules */
.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 56px; }
.ov-kpi { display: grid; gap: 4px; align-content: start; min-width: 0; color: inherit; }
a.ov-kpi:hover { text-decoration: none; }
a.ov-kpi:hover .ov-kpi-l { color: var(--link); }
.ov-kpi-v { font-size: var(--fs-kpi); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.ov-kpi-l { font-size: var(--fs-meta); color: var(--ink-2); }
.ov-kpi-n { font-size: var(--fs-meta); color: var(--ink-3); }
.ov-kpi-n .warn { color: var(--high); }
.ov-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
/* lists on the canvas: hairline between rows and under the last, no frame, no fill */
.ov-list > .row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.ov-list > .row.click:hover, .ov-list > .row.click:focus-visible { background: none; box-shadow: none; } /* the title turns link-coloured: no partial fills */
.ov-list > .row.click:hover .ov-t { color: var(--link); }
.ov-list > .row.ov-gone { opacity: 0; transition: opacity .18s; }
.ov-main { display: grid; gap: 4px; min-width: 0; }
.ov-t { font-weight: var(--fw-medium); color: var(--ink); overflow-wrap: anywhere; }
a.ov-t:hover { color: var(--link); text-decoration: none; }
.ov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.ov-meta .crit { color: var(--crit-ink); }
.ov-meta-i { color: var(--ink-3); }
.ov-when { font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.ov-end { margin-left: auto; font-weight: var(--fw-medium); }
.ov-none { margin: 0; color: var(--ink-2); }
.list > .ov-none { padding: 14px 0; border-bottom: 1px solid var(--line); }
/* spend */
.ov-spend { display: grid; gap: 16px; }
.ov-spend-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ov-spend-v { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -.02em; white-space: nowrap; }
.ov-spend-of { font-size: var(--fs-meta); color: var(--ink-2); }
.ov-spend-of.warn { color: var(--high); }
.ov-spend-of.bad { color: var(--crit-ink); }
.ov-spend .kv.rows dd { text-align: right; padding-right: 16px; } /* lines up with the amounts in the model table below */
@media (max-width: 640px) { .ov-spend .kv.rows > div { grid-template-columns: minmax(0, 1fr) auto; } .ov-spend .kv.rows dd { padding-right: 12px; } } /* short pairs stay on one line */
/* accounts × chats: one table, the name column stays put while the frame scrolls on a phone */
.ov-mx th[scope="col"] a { color: var(--ink-2); }
.ov-mx th[scope="col"] a:hover { color: var(--link); }
.ov-mx thead th:first-child { position: sticky; left: 0; z-index: 2; }
.ov-mx th[scope="row"] { position: sticky; left: 0; z-index: 1; text-align: left; vertical-align: top; white-space: nowrap; padding: 12px 16px;
  background: var(--bg); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--ink); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
.ov-mx tbody td { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
.ov-mx tr:last-child :is(th, td) { box-shadow: none; } /* sticky cells lose collapsed borders on repaint (hover): every row line is a shadow */
/* row hover = the «Последние реплики NPC» fill: one surface step, inset off the hairlines and the frame, rounded ends.
   Every cell paints its own piece (isolated, z -1: above the sticky name cell's opaque background, under the text) */
.ov-mx tbody td { position: relative; isolation: isolate; }
.ov-mx tbody :is(th, td)::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; background: var(--surface); opacity: 0; transition: opacity .12s; pointer-events: none; }
.ov-mx tbody th::before { left: 4px; border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.ov-mx tbody td:last-child::before { right: 4px; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.ov-mx tr.click:is(:hover, :focus-visible) > ::before { opacity: 1; }
.ov-mx tr.click:is(:hover, :focus-visible) td { background: none; } /* not the square .tbl fill */
.ov-mx tr.click:hover th[scope="row"] a { color: var(--link); }
.ov-mx th[scope="row"] a { color: var(--ink); }
.ov-mx th[scope="row"] a:hover { color: var(--link); }
.ov-mx td { vertical-align: top; min-width: 140px; }
.ov-mx .sub { display: block; margin-top: 2px; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--ink-3); }
.ov-n { font-weight: var(--fw-regular); }
.ov-n.zero { color: var(--ink-3); }
.ov-st { color: var(--ink-2); }
.ov-st.link { color: var(--link); }
.ov-st.high { color: var(--high); }
.ov-st.crit { color: var(--crit-ink); }
/* dynamics */
.ov-filters { margin: 0; }
.ov-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.ov-slot { display: grid; min-width: 0; margin-top: 24px; }
.ov-chart { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ov-sub-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.ov-sub-h h3 { margin: 0; }
.ov-sub-h .aside { font-size: var(--fs-meta); color: var(--ink-3); }
/* digest */
.ov-dg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1440px) { .ov-dg { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; } } /* message, then the longer scene */
.ov-dg-item { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ov-quote { margin: 0; padding-left: 14px; border-left: 2px solid var(--line-2); font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.ov-why { margin: 0; font-size: var(--fs-meta); color: var(--ink-2); overflow-wrap: anywhere; }
.ov-dg-title .ov-t { font-size: var(--fs-read); }
.ov-script { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-script li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; color: var(--ink-2); }
.ov-script li b { font-weight: var(--fw-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-script li.hu b { font-weight: var(--fw-regular); color: var(--ink-3); }
.ov-script li span { overflow-wrap: anywhere; }
/* recent NPC lines */
/* the row reaches 12px into the gutter so its hover fill (one surface step, inset off the hairlines) wraps the text evenly;
   the hairline spans the same width, so the fill never runs past it */
.ov-list > .row.ov-line { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; margin-inline: -12px; isolation: isolate; border-bottom: 0; }
/* the hover surface reaches 12px past the text; the divider keeps to the column like every other list */
.ov-list > .row.ov-line::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: var(--line); }
.ov-list > .row.ov-line::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: var(--r-ctl); background: var(--surface); opacity: 0; transition: opacity .12s; }
.ov-list > .row.ov-line.click:hover::before, .ov-list > .row.ov-line.click:focus-visible::before { opacity: 1; }
.ov-list > .row.ov-line.click:focus-visible { outline: none; }
.ov-list > .row.ov-line.click:focus-visible::before { outline: var(--focus-w) solid var(--accent); outline-offset: 0; }
.ov-line-h { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ov-line-h .ov-when { margin-left: auto; padding-left: 12px; }
.ov-line-h .ov-t { white-space: nowrap; }
.ov-chat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov-line-t { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .ov-top, .ov-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 640px) {
  .ov { gap: 40px; }
  .ov-script li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* journal: rows on the canvas (rest zone) */
.jr-tools .search { flex-basis: 180px; } /* four filters + period still fit one line at 1440 */
.jr-tools .dd-val { max-width: 110px; } /* a picked «Имя, телефон» would push the period onto a second line */
.jr-chip-row:empty { display: none; }
.jr-chip { display: flex; align-items: center; gap: 4px; margin: -4px 0 16px; color: var(--ink-2); }
.jr-chip .icon-btn { width: 32px; height: 32px; margin: -6px 0; }
.jr-day { position: sticky; top: 0; z-index: 1; padding: 12px 12px 6px; border-bottom: 1px solid var(--line-2); background: var(--bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-3); }
.jr-out { margin: 0; font-weight: var(--fw-medium); color: var(--ink); }
.jr-fold > summary { width: max-content; cursor: pointer; font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--link); }
.jr-fold > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.jr-fold[open] > summary { margin-bottom: 10px; }
.jr-fold-b { display: grid; gap: 14px; }
.jr-item { border-bottom: 1px solid var(--line); }
.jr-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 52px 96px minmax(0, 1fr) 88px 16px; gap: 14px; align-items: start; padding: 14px 12px; cursor: pointer; }
.jr-row:hover, .jr-row[aria-expanded="true"] { background: var(--surface); box-shadow: none; }
.jr-row:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.jr-kind .badge { line-height: inherit; }
.jr-main { display: grid; gap: 2px; min-width: 0; }
.jr-reason { color: var(--ink); overflow-wrap: anywhere; }
.jr-main .meta { margin: 0; }
.jr-cost { text-align: right; color: var(--ink-2); }
.jr-chev { color: var(--ink-3); margin-top: 3px; transition: transform .15s var(--ease); }
.jr-row[aria-expanded="true"] .jr-chev { transform: rotate(180deg); }
.jr-x { padding: 4px 12px 20px 78px; }
.jr-x .loading, .jr-x .empty { padding: 20px 0; }
.jr-detail { display: grid; gap: 14px; padding-top: 4px; min-width: 0; }
.jr-kv { margin: 0; }
.jr-block { display: grid; gap: 6px; min-width: 0; }
.jr-msg { margin: 0; padding-left: 12px; border-left: 2px solid var(--line-2); font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); overflow-wrap: anywhere; }
.jr-none { margin: 0; color: var(--ink-3); }
/* prompt and model output: literal text, so mono */
.code { margin: 0; padding: 12px 14px; max-height: 420px; overflow: auto; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-ctl); font-family: var(--mono); font-size: var(--fs-sm); line-height: var(--lh-read); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; scrollbar-width: thin; }
.code.json { white-space: pre; overflow-wrap: normal; }
.jr-foot { display: flex; justify-content: center; padding: 20px 0 0; }
@media (max-width: 640px) {
  .jr-row { grid-template-columns: 44px minmax(0, 1fr) auto 16px; gap: 4px 10px; }
  .jr-row .jr-kind { grid-column: 2; grid-row: 1; }
  .jr-row .jr-main { grid-column: 1 / -1; grid-row: 2; }
  .jr-row .jr-cost { grid-column: 3; grid-row: 1; }
  .jr-row .jr-chev { grid-column: 4; grid-row: 1; }
  .jr-x { padding: 4px 12px 16px; }
}

/* ---------- chats & people (pages/chats.js, chat.js, people.js, person.js): rest zone ---------- */
.cp-hint { margin: 0; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--ink-3); text-wrap: pretty; }
/* header facts: separate spans, spacing instead of separator glyphs */
.cp-parts, .tbl td .sub.cp-parts { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.cp-hd { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; min-width: 0; max-width: 100%; }
.cp-link { display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* one-line warning with an icon, no box (connect dialog) */
.cp-warn { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: var(--fs-meta); color: var(--ink-2); text-wrap: pretty; }
.cp-warn .ic { color: var(--high); margin-top: 2px; }
.cp-warnt { color: var(--high); }
.tbl td .cp-npc { display: inline-block; white-space: normal; min-width: 170px; max-width: 320px; }
.cp-mst { color: var(--ink-3); }
.cp-mst.low { color: var(--link); } .cp-mst.crit { color: var(--crit-ink); } .cp-mst.high { color: var(--high); }
.cp-clip { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.cp-links { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.cp-stamp { font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.cp-marks { margin: 0 0 12px; font-size: var(--fs-meta); color: var(--ink-2); overflow-wrap: anywhere; } /* «Хвалят: …; подкалывают: …» over «Участники» */
.cp-marks:empty { display: none; }
.cp-att .dd-btn { min-width: 150px; } /* «Отношение NPC»: one width down the column */
@media (max-width: 640px) { /* the member list fits 358px: names wrap, the picker keeps its own padding */
  .cp-att .dd-btn { min-width: 0; } .cp-members td { white-space: normal; } .cp-members td:has(> .cp-att) { padding-left: 0; }
  .cp-members .cm-t { padding-left: 44px; } /* labels under the name, past the 32px photo and its gap */
}

/* live feed: rows on the canvas, sticky day labels */
.cp-feed { list-style: none; margin: 0; padding: 0; }
.cp-feed > li:not(.cp-msg) { list-style: none; }
.cp-day { position: sticky; top: 0; z-index: 1; padding: 12px 0 6px; border-bottom: 1px solid var(--line-2); background: var(--bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-3); }
.cp-msg { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cp-msg.new { animation: cp-flash 2.4s var(--ease); }
@keyframes cp-flash { from { background: var(--surface-2); } }
.cp-tm { font-size: var(--fs-meta); line-height: 24px; color: var(--ink-3); white-space: nowrap; }
.cp-mb { min-width: 0; display: grid; gap: 2px; }
.cp-mh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 24px; font-size: var(--fs-meta); }
.cp-mh .cp-tm.r { margin-left: auto; line-height: inherit; }
.cp-who { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--ink); }
.cp-rx { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-meta); color: var(--ink-3); }
.cp-rx span { display: inline-flex; align-items: center; gap: 4px; }
.cp-rx b { font-weight: var(--fw-regular); color: var(--ink-3); }
.cp-quote { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 2px 0; padding-left: 10px; border-left: 2px solid var(--line-2); font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-quote b { color: var(--ink-2); font-weight: var(--fw-medium); flex: none; }
.cp-quote .ic { flex: none; color: var(--ink-3); }
.cp-mt { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.cp-media { color: var(--ink-3); font-style: italic; }
.cp-why { margin-top: 2px; font-size: var(--fs-meta); color: var(--ink-3); text-wrap: pretty; }
/* a voice note / round video whose text is its transcript */
.cp-stt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--fs-meta); }
.cp-stt-l { color: var(--ink-3); }
.cp-ff { display: flex; justify-content: center; padding: 16px 0; color: var(--ink-3); }
.cp-ff:empty { display: none; }
.cp-bar { justify-content: flex-end; flex-wrap: wrap; } /* chat page feed tools under the tabs: no heading of its own */
.cm-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tbl a.cp-moves { color: var(--ink); white-space: nowrap; }
.tbl td .sub.cm-t { display: none; }
@media (max-width: 640px) { .tbl td .sub.cm-t { display: block; } }
.cp-feed.compact .cp-msg { grid-template-columns: minmax(0, 1fr); }
.cp-feed.live:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
@media (min-width: 1181px) { .cp-feed.live { max-height: calc(100dvh - 300px); min-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
.cp-note { margin: 0; color: var(--ink-2); }
.cp-all { justify-self: start; margin-top: 4px; }
.cp-del { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
/* chat «⋯» menu: opens down and to the left of its button */
.cp-more-wrap { position: relative; }
.btn.cp-more { width: 36px; padding: 0; font-size: var(--fs-read); }
.menu.cp-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; min-width: 240px; }
.cp-menu button.danger { color: var(--crit-ink); }
.cp-menu button[disabled] { color: var(--ink-dis); cursor: default; }
.cp-sw { margin-left: auto; width: 30px; height: 16px; border-radius: 8px; background: var(--ctl); position: relative; flex: none; }
.cp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform .15s ease-out; }
.cp-sw.on { background: var(--btn); }
.cp-sw.on::after { transform: translateX(14px); background: var(--btn-ink); }
.cp-f > .seg, .cp-f > .switch { justify-self: start; }

/* chat members: list rows */
.cp-mem { grid-template-columns: minmax(0, 1fr) auto; }
.cp-mem-main { display: grid; gap: 2px; min-width: 0; }
.cp-mem-main .meta { margin: 0; }
.cp-mem-side { display: grid; justify-items: end; gap: 6px; }
.cp-mem.gone .cp-mem-main .title { color: var(--ink-3); }
.btn-link.cp-quiet { color: var(--link); }
/* chat rules: excerpt, then one row per rule with its «Учитывать» switch (Telegram's own: a word, no switch) */
.cp-rules { display: grid; gap: 12px; }
.cp-rules .sec-meta { margin: -12px 0 0; }
.cp-rq { margin: 0; padding-left: 12px; border-left: 2px solid var(--line-2); font-size: var(--fs-meta); line-height: var(--lh-read); color: var(--ink-2); overflow-wrap: anywhere; text-wrap: pretty; }
.cp-rule-err { margin: 0; font-size: var(--fs-meta); }
.cp-rule { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 0; }
.cp-rules .list > .cp-rule:first-child { border-top: 1px solid var(--line); }
.cp-rule-t { color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.cp-rule.off .cp-rule-t { color: var(--ink-3); }
.cp-rule-n { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--ink-3); }
.cp-rule-tg { padding-right: 2px; font-size: var(--fs-meta); color: var(--ink-3); }

/* person: dossier, avatar description, facts */
.cp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.cp-foot > .muted { flex: 1 1 240px; }
.cp-count { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); }
.cp-count.warn { color: var(--high); }
.cp-grid textarea.input { font-size: var(--fs-read); }
.cp-avf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; }
.cp-fg { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cp-fg:first-child { padding-top: 0; }
.cp-fgh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: var(--fs-meta); margin-bottom: 4px; }
.cp-fg ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cp-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 6px 0; }
.cp-fact p { grid-column: 1 / -1; margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); overflow-wrap: anywhere; }
.cp-fa { display: inline-flex; gap: 18px; font-size: var(--fs-meta); opacity: 0; transition: opacity .12s; }
.cp-fact:hover .cp-fa, .cp-fact:focus-within .cp-fa { opacity: 1; }
.cp-fact .cp-fa:has(.btn) { gap: 8px; }
@media (hover: none) { .cp-fa { opacity: 1; } }
/* people list + person timeline (pages/people.js, person.js) */
.pp-who { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.pp-who > span:last-child { display: grid; min-width: 0; }
.pp-who:hover { color: var(--ink); }
.pp-who:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.pp-flags { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; white-space: normal; }
.pp-tools .search { flex: 1 1 340px; max-width: 440px; }
.pp-filters { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pp-ai-l { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-size: var(--fs-meta); color: var(--ink-3); pointer-events: none; }
.pp-ai .input { padding-left: 82px; }
.pp-ai .input[aria-busy="true"] { cursor: progress; }
.pp-ai:has(.pp-ai-x:not([hidden])) .input { padding-right: 92px; }
.pp-ai .input::-webkit-search-cancel-button { display: none; } /* «Сбросить» clears it */
.pp-ai-x { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-size: var(--fs-meta); }
.pp-ai-err { margin: -6px 0 12px; }
.tbl td .pp-why { min-width: 30ch; max-width: 44ch; white-space: normal; color: var(--ink-2); } /* a long reason wraps instead of widening the table */
@media (max-width: 640px) { .tbl td .pp-why { min-width: 0; } }
.pp-found { margin-left: auto; white-space: nowrap; }
.pp-feed .pp-npc { padding-left: 16px; }
.pp-feed .cp-quote .badge { flex: none; }
.pp-qt, .cp-qt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* a flex row clips its text without the dots */
.pp-meta { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.tbl td .pp-sm { display: none; } /* phone: the marks move under the name, the column goes */
@media (max-width: 640px) { .tbl td .pp-sm { display: flex; margin-top: 2px; font-size: var(--fs-meta); } }
@media (min-width: 1181px) { .cp-side { position: sticky; top: 16px; } }
@media (max-width: 1180px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
/* under the phone top bar: day labels stick below it */
@media (max-width: 900px) { .cp-day, .jr-day { top: calc(56px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 640px) {
  .cp-msg { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .cp-mh .cp-rx { margin-left: 0; }
  .tbl td .cp-tcell { white-space: normal; min-width: 150px; overflow-wrap: anywhere; }
  .tbl td .cp-npc { min-width: 0; }
  .cp-fact .btn-link { padding: 10px 0; }
}
@media (max-width: 359px) { .cp-avf { grid-template-columns: minmax(0, 1fr); } }

/* ---------- personas (pages/personas.js, persona*.js) ---------- */
/* a picture only when Telegram really shows one; no initials, no placeholder */
/* account's current Telegram photo: a fixed slot, empty when there is no photo (no placeholder fill) */
/* components/avatar.js: every Telegram picture; no photo = /static/img/no-photo.webp */
.ava { --ava: 32px; flex: none; display: inline-block; width: var(--ava); height: var(--ava); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface-2); }
.ava.big { border-radius: var(--r-box); }
.ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn-who { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.pn-who:hover { color: var(--ink); }
.pn-who:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.tbl td:has(.pn-job) { white-space: normal; min-width: 150px; max-width: 200px; }
.pn-job { display: block; max-width: 24ch; }
.pn-job .pn-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbl td .pn-job .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* status words: plain, colour only for the next step (link) or attention */
.pn-st { color: var(--ink-2); }
.pn-st.next { color: var(--link); }
.pn-st.dim { color: var(--ink-3); }
.pn-st.warn { color: var(--high); }
.pn-st.bad { color: var(--crit-ink); }
.pn-m { color: var(--ink-3); }

/* archetype picker in «Новая личность» */
.pn-archs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn-arch { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: var(--frame-w) solid var(--line-2); border-radius: var(--r-ctl); cursor: pointer; transition: border-color .12s, background-color .12s; }
.pn-arch input { position: absolute; opacity: 0; pointer-events: none; }
.pn-arch:hover { border-color: var(--ink-3); }
.pn-arch:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.pn-arch:has(input:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.pn-arch:has(input:disabled) { cursor: default; }
.pn-arch:has(input:disabled):not(:has(input:checked)) { color: var(--ink-dis); }
.pn-arch b { color: var(--ink); font-weight: var(--fw-medium); }
.pn-arch-sum { font-size: var(--fs-meta); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pn-arch-meta { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-3); }
.pn-progress { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--ink-2); }
.pn-progress .pn-sec-n { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* persona page */
.pn-head { align-items: center; }
.pn-page { display: grid; gap: 48px; }
/* side first in the DOM (one column reads account, bio, avatars, then the form); on desktop it sits on the right */
.pn-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.pn-main { grid-column: 1; grid-row: 1; }
.pn-side { grid-column: 2; grid-row: 1; }
.pn-col { display: grid; gap: 48px; align-content: start; min-width: 0; }
.pn-sec { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pn-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; }
.pn-sec-h h2 { margin: 0; }
.pn-sec-h h2 .n { margin-left: 8px; font-weight: var(--fw-regular); color: var(--ink-3); letter-spacing: 0; }
.pn-aside { font-size: var(--fs-meta); color: var(--ink-3); text-align: right; }
.pn-end { padding-top: 20px; border-top: 1px solid var(--line); }
.pn-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pn-id h1 { line-height: 32px; } /* name 32 + 4 + meta 20 = the 56px picture beside it, edge to edge */
.pn-head .min0, .pn-foot .min0 { min-width: 0; }
.pn-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 0; font-size: var(--fs-meta); line-height: 20px; color: var(--ink-2); }
/* conflicts: one warning line with the icon, the list under it; no box */
.pn-warn { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; color: var(--ink-2); max-width: 90ch; }
.pn-warn > .ic { margin-top: 2px; color: var(--high); }
.pn-warn > div > b { color: var(--high); font-weight: var(--fw-medium); }
.pn-confirm { color: var(--ink); font-weight: var(--fw-medium); }
.modal .m-body .pn-warn p, .pn-warn p { margin: 4px 0 0; }
.pn-warn ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.tbl td .pn-sm { display: none; }
.pn-h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink); }
.pn-h3 .n { font-weight: var(--fw-regular); color: var(--ink-3); }
.pn-line { margin: 0; color: var(--ink-2); }

/* the carousel sits in the narrow side column: picture on top, decision below */
.pn-side .car { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pn-side .car-stage { max-height: none; } /* as wide as the thumbnail row under it */
.pn-side .car-side { max-width: none; order: 2; } /* picture, its thumbnails, then the decision */
.pn-side .car-thumbs { padding-top: 0; }

/* profile form: group sub-headings, no rule lines */
.pn-secs { display: grid; gap: 32px; padding-bottom: 8px; }
.pn-secs fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pn-secs legend { display: flex; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 14px; padding: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink); }
.pn-at { position: relative; }
.pn-at > span { position: absolute; left: 12px; top: 0; line-height: 40px; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--ink-3); pointer-events: none; }
.pn-at .input { padding-left: 28px; }
.pn-f4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pn-form .dd { display: block; }
.pn-form .dd-val { font-weight: var(--fw-regular); }
.pn-form textarea.pn-long { min-height: 0; resize: vertical; font-size: var(--fs-read); }
.pn-lbl { display: flex; align-items: baseline; gap: 6px; }
.pn-more { margin-left: auto; }
/* «Сгенерировать заново»: a quiet 14px arrow beside its label, a 24px target that does not grow the row */
.icon-btn.pn-regen { align-self: center; width: 24px; height: 24px; margin: -4px 0; }
.icon-btn.pn-regen:hover { background: none; color: var(--ink); }
.icon-btn.pn-regen[aria-busy="true"] { color: var(--ink); pointer-events: none; }
.icon-btn.pn-regen[aria-busy="true"] .ic { animation: spin .8s linear infinite; }
.pn-legend-m { font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--ink-3); }
.pn-foot { z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--line); background: var(--bg); }
.pn-form:has(.pn-state.dirty) .pn-foot { position: sticky; bottom: 0; }
.pn-state { font-size: var(--fs-meta); color: var(--ink-3); }
.pn-state.dirty { color: var(--high); }
.pn-foot .err { margin-top: 2px; }

/* bio: editor line, candidates table, «Ещё варианты» */
.pn-bio-in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.pn-count { font-size: var(--fs-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pn-count.over, .pn-over { color: var(--crit-ink); }
.pn-bios .tbl td:first-child { white-space: normal; width: 100%; }
/* narrow side column: the state wraps under itself instead of squeezing the bio text to one word per line */
.pn-bios .tbl td:last-child { white-space: normal; min-width: 7.5em; max-width: 11em; }
.pn-bios .pn-acts { flex-wrap: wrap; gap: 2px 12px; }
.pn-bios .tbl td .sub.pn-over { color: var(--crit-ink); }
.pn-bio-t { font-size: var(--fs-read); color: var(--ink); overflow-wrap: anywhere; }
.pn-bio-t.pn-m { color: var(--ink-3); }
.pn-acts { display: inline-flex; align-items: baseline; gap: 16px; }
.pn-acts .btn-link[aria-busy="true"] { color: var(--ink-dis); pointer-events: none; }
.pn-acts.pn-icons { align-items: center; flex-wrap: nowrap; gap: 4px; margin: -6px 0; }
.pn-acts .icon-btn[aria-busy="true"] { opacity: .4; pointer-events: none; }
.pn-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.pn-row > .pn-acts { flex-wrap: wrap; row-gap: 8px; } /* two buttons in the narrow side column (1280) wrap, not overflow */
/* profile music (pages/music.js): the bio table look, the search dialog's result list */
.mu .tbl td .sub.mu-why { color: var(--ink-2); }
.mu-note { margin: 0; }
.mu .pn-st:not(.next) { white-space: nowrap; } /* «Будет установлен 17 ноября» wraps before the date */
.mu-acc .tbl td:last-child { min-width: 0; }
.mu-found { max-height: min(50vh, 420px); overflow-y: auto; margin-top: 4px; }
.mu-found:empty { display: none; }
.mu-found li { padding: 10px 0; }
.mu-found .title { overflow-wrap: anywhere; }
.mu-none { display: block !important; color: var(--ink-3); }

/* style profile: rules list, numbers as KV rows, distributions as small tables */
.pn-style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; }
.pn-style-card { display: grid; gap: 10px; align-content: start; max-width: 72ch; }
.pn-style-card ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pn-style-card li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); }
.pn-style-card li::before { content: ""; width: 5px; height: 5px; margin-top: .7em; border-radius: 1px; background: var(--ink-3); }
.pn-style-nums { display: grid; gap: 32px; align-content: start; }
.pn-style-body { display: grid; gap: 40px; }
.pn-dists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 56px; align-items: start; }
.pn-dist { width: 100%; border-collapse: collapse; }
.pn-dist caption { caption-side: top; text-align: left; padding-bottom: 6px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink); }
.pn-dist th, .pn-dist td { padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: var(--fw-regular); }
.pn-dist th { text-align: left; color: var(--ink-2); padding-right: 12px; }
.pn-dist td:nth-child(2) { width: 40%; }
.pn-dist td:last-child { width: 48px; padding-left: 12px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.pn-bar i { display: block; height: 100%; border-radius: 2px; background: var(--c2); }

/* memory */
.pn-mem { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 28px 56px; }
.pn-mem ul { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.pn-mem li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pn-fact { color: var(--ink); }
.pn-fact-m { display: inline-flex; align-items: baseline; gap: 12px; font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }

.pn-st-dd { display: none; }
@media (max-width: 1180px) {
  .pn-grid { grid-template-columns: minmax(0, 1fr); }
  .pn-main, .pn-side { grid-column: auto; grid-row: auto; }
  .pn-style { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pn-archs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pn-st-seg { display: none; } .pn-st-dd { display: block; }
  .pn-archs { grid-template-columns: minmax(0, 1fr); }
  .tbl td .pn-sm { display: block; }
  .pn-arch-sum { -webkit-line-clamp: 2; }
  .pn-head { align-items: flex-start; }
  .pn-f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-foot { flex-wrap: wrap; }
  .pn-foot .head-r { width: 100%; } .pn-foot .head-r .btn { flex: 1; }
  .pn-bio-in { grid-template-columns: minmax(0, 1fr) auto; }
  .pn-bio-in .btn { grid-column: 1 / -1; }
  .pn-mem li { grid-template-columns: minmax(0, 1fr); }
  .pn-acts { flex-wrap: wrap; gap: 4px 16px; }
  .pn-acts .btn-link { padding: 10px 0; } /* 40px tap target */
}


/* ========== section: accounts, proxies, client profiles, account page (pages/accounts.js, account.js); DIRECTION.md §4, §7 ========== */
/* state words: plain when normal, colour only when the state needs attention */
.ac-w { color: var(--ink-2); }
.ac-w.dim { color: var(--ink-3); } .ac-w.link { color: var(--link); } .ac-w.high { color: var(--high); } .ac-w.crit { color: var(--crit-ink); }
a.ac-st-cell { font-weight: var(--fw-regular); }
.ac-lead { margin: 0; font-size: var(--fs-read); font-weight: var(--fw-medium); line-height: var(--lh-ui); color: var(--ink); }
.ac-lead.high { color: var(--high); } .ac-lead.crit { color: var(--crit-ink); }
.ac-warn-line { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--high); text-wrap: pretty; }
.ac-warn-line .ic { margin-top: 3px; }
.ac-warn-line.crit { color: var(--crit-ink); }
.ac-quiet { margin: 0; color: var(--ink-2); }
.ac-nowrap { white-space: nowrap; }
/* why an account is stuck: two lines at most, full text in the tooltip; narrow so a parked row keeps the table in the page */
.ac-state { white-space: normal; min-width: 14ch; } /* the one cell that wraps: the table fits the page */
.ac-err-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 30ch; overflow: hidden; }
.ac-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 20px; }
:is(.ac-box, .ac-acc-grid) .btn-link:disabled { color: var(--ink-dis); cursor: default; }
.ac-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.ac-facts { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.ac-facts b { font-weight: var(--fw-medium); color: var(--ink); }
/* proxies tab (pages/proxies.js) */
.px-wait { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--ink-3); }
.px-pw { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.px-pw .input { flex: 1; }
.px-dots { color: var(--ink-2); letter-spacing: .12em; }
.px-hostport { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 14px; }
.ac-fact { display: block; min-width: 16ch; white-space: normal; }
.ac-st-label { display: block; white-space: nowrap; }
.tbl td:has(> .ac-st-lc) { width: 34%; }
.tbl td .ac-sm-only { display: none; }
.ac-todo { margin-bottom: 32px; }
.ac-box { gap: 16px; }
/* account page: stealth leads in the wide column, facts in the narrow one */
.ac-acc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.ac-acc-grid .sec { scroll-margin-top: 72px; } /* #stealth / #sessions links land below the phone's sticky top bar */
/* warm-up: seven 4px segments, day numbers, phases */
.ac-warm { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ac-warm i { height: 4px; border-radius: 2px; background: var(--surface-3); }
.ac-warm i.done, .ac-warm i.cur { background: var(--accent); }
.ac-warm-scale { display: grid; gap: 8px; margin-bottom: 8px; }
.ac-warm-days, .ac-warm-phases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; font-size: var(--fs-sm); color: var(--ink-3); }
.ac-warm-days .cur { color: var(--ink); font-weight: var(--fw-medium); }
.ac-warm-phases { grid-template-columns: 5fr 1fr 1fr; color: var(--ink-2); }
.ac-warm-phases span { border-top: 1px solid var(--line); padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* timeline: neutral markers, coloured only for warnings; hollow + dashed rail for what is planned */
.ac-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.ac-tl li { --dot: var(--ink-3); position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 16px; padding: 8px 0 8px 22px; }
.ac-tl li::before { content: ""; position: absolute; z-index: 1; left: 3px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
/* one unbroken line: from this dot's centre to the next one's (rows touch, the dots sit on top) */
.ac-tl li::after { content: ""; position: absolute; left: 6px; top: 19.5px; bottom: -19.5px; border-left: 1px solid var(--line-2); }
.ac-tl li:last-child::after { display: none; }
.ac-tl li.crit { --dot: var(--crit); } .ac-tl li.high { --dot: var(--high); } .ac-tl li.med { --dot: var(--med); }
.ac-tl li.future::before { background: var(--bg); border: var(--frame-w) solid var(--dot); }
.ac-tl li.future::after, .ac-tl li:has(+ li.future)::after { border-left-style: dashed; }
.ac-tl li.future .ac-tl-t { color: var(--ink-2); }
.ac-tl .ts { font-size: var(--fs-meta); color: var(--ink-3); padding-top: 1px; }
.ac-tl-t { overflow-wrap: anywhere; }
.ac-tl .sub { display: block; font-size: var(--fs-meta); color: var(--ink-3); }
/* plain lists on the canvas: sessions, the seller's photos */
.ac-list { list-style: none; margin: 0; padding: 0; }
.ac-who { display: flex; align-items: center; gap: 12px; }
.ac-phone { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.page-head .head-r .switch { height: 36px; } /* «Служебная роль» next to the page buttons */
/* account header: the 48px photo centred on the number and the meta line (BRIEF5), meta items spaced, no dots */
.ac-head { align-items: center; }
.ac-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ac-id .min0 { min-width: 0; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.ac-pend { display: grid; gap: 6px; } /* «Скоро»: one planned step per line */
.ac-convo:empty { display: none; }
.ac-convo { margin-top: 48px; }
.ac-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ac-list .title { font-weight: var(--fw-medium); color: var(--ink); }
.ac-list .sub { display: block; font-size: var(--fs-meta); color: var(--ink-3); }
.ac-list .r { display: grid; justify-items: end; gap: 2px; text-align: right; }
/* modals: client profile form, login wizard */
.ac-f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-f4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ac-del-btn { justify-self: start; }
.ac-wiz { display: grid; gap: 16px; }
.ac-wiz-steps { list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; counter-reset: s; border-bottom: 1px solid var(--line); }
.ac-wiz-steps li { counter-increment: s; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-3); }
.ac-wiz-steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: var(--frame-w) solid var(--line-2); font-size: var(--fs-sm); line-height: 1; }
.ac-wiz-steps li:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: var(--line-2); margin-left: 4px; }
.ac-wiz-steps li.cur { color: var(--ink); }
.ac-wiz-steps li.cur::before { border-color: var(--ink-2); color: var(--ink); }
.ac-wiz-steps li.done::before { background: var(--surface-3); border-color: var(--surface-3); color: var(--ink-2); }
.field > .seg { justify-self: start; }
/* import of a purchased account (accounts.js importWizard) */
.ac-drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: var(--frame-w) dashed var(--ctl); border-radius: var(--r-box); color: var(--ink-3); text-align: center; transition: border-color .12s, background .12s; }
.ac-drop b { color: var(--ink); font-weight: var(--fw-medium); }
.ac-drop span { font-size: var(--fs-meta); }
.ac-drop .ic { margin-bottom: 4px; }
.ac-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ac-drop:hover, .ac-drop:has(input:focus-visible) { border-color: var(--ink-2); background: var(--surface); }
.ac-drop:has(input:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.ac-imp-files { list-style: none; margin: -4px 0 0; padding: 0; }
.ac-imp-files li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--line); }
.ac-imp-k { color: var(--ink-3); font-size: var(--fs-meta); }
.ac-imp-f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-imp-none { color: var(--ink-dis); }
.ac-imp-files li:not(.on) .ac-imp-none { grid-column: 2 / -1; }
.ac-imp-files .icon-btn { width: 32px; height: 32px; }
.ac-imp-noproxy { margin: 0; min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: var(--fw-regular); color: var(--ink-2); font-size: var(--fs-body); }
.ac-imp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ac-imp-steps li { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink-3); }
.ac-imp-mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; border: var(--frame-w) solid var(--line-2); }
.ac-imp-steps li.done { color: var(--ink-2); }
.ac-imp-steps li.done .ac-imp-mark { border-color: var(--surface-3); background: var(--surface-3); color: var(--ink); }
.ac-imp-steps li.cur { color: var(--ink); font-weight: var(--fw-medium); }
.ac-imp-steps li.cur .ac-imp-mark { border-color: var(--ink-2); }
.ac-imp-steps li.bad { color: var(--crit-ink); font-weight: var(--fw-medium); }
.ac-imp-steps li.bad .ac-imp-mark { border-color: var(--crit); color: var(--crit-ink); }
.ac-imp-res { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.ac-imp-res b { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.ac-imp-res p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.ac-imp-res.bad b { color: var(--crit-ink); }
.ac-imp-warn { margin: 0; padding-left: 18px; color: var(--ink-2); }
.ac-imp-2fa { display: grid; gap: 8px; }
.ac-imp-2fa p { margin: 0; color: var(--ink-3); font-size: var(--fs-meta); }
.ac-imp-pwrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ac-imp-pw { font-size: var(--fs-read); color: var(--ink); padding: 6px 10px; border-radius: var(--r-ctl); background: var(--surface); user-select: all; }
.ac-imp > .btn-link { justify-self: start; }
.ac-2fa-dots { color: var(--ink-3); }
.ac-2fa-pw { color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.ac-code-in { height: 48px; max-width: 220px; font-size: var(--fs-h2) !important; }
.ac-qr-box { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
.ac-qr { width: 232px; height: 232px; border-radius: var(--r-ctl); display: block; }
.ac-qr-none { padding: 24px; border: var(--frame-w) dashed var(--line-2); border-radius: var(--r-ctl); color: var(--ink-3); text-align: center; }
.ac-qr-how b { color: var(--ink); font-weight: var(--fw-bold); }
.ac-qr-how ol { margin: 8px 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.ac-qr-how p { margin: 0; font-size: var(--fs-meta); }
.ac-qr-wait { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; color: var(--ink-2); }
@media (max-width: 1180px) {
  .ac-acc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ac-f3 { grid-template-columns: minmax(0, 1fr); }
  .ac-f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-qr-box { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ac-tl li { grid-template-columns: minmax(0, 1fr); }
  .ac-tabs > div { min-width: 0; max-width: 100%; }
  .ac-tabs .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ac-tabs .seg button { white-space: nowrap; }
  .ac-state { min-width: 12ch; } /* a parked row fits 390 next to a long number */
  .ac-tabs .grow { margin-left: 0; } /* the «Активные / Неактивные / Все» filter starts its row like the others */
  .ac-list li { grid-template-columns: minmax(0, 1fr); }
  .ac-list .r { justify-items: start; text-align: left; }
  .ac-bar .ac-acts { justify-content: flex-start; }
  .tbl td .ac-sm-only { display: block; margin-top: 4px; white-space: normal; }
  a.ac-st-cell { display: inline-block; white-space: normal; }
  .ac-st-label { white-space: normal; }
}
/* ========== end section: accounts ========== */


/* ---------- editors: scenes and types of persona (pages/def_edit.js, scene_edit.js, archetype.js) ---------- */
.de { display: grid; gap: 24px; }
.de-tabs { margin-bottom: 0; }
.de-secs { max-width: 920px; gap: 40px; }
.de-secs legend { font-size: var(--fs-h2); letter-spacing: -.01em; }
.de-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.de-pair > span[aria-hidden] { color: var(--ink-3); }
.de-listbox { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.de-list { display: grid; gap: 12px; width: 100%; min-width: 0; }
.de-list:empty { display: none; }
.de-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-box); min-width: 0; }
.de-card-h { display: flex; align-items: center; gap: 12px; margin: -6px 0 -2px; }
.de-card-h h3 { margin: 0; }
.de-tools { display: flex; gap: 2px; margin-left: auto; }
.de-tools .icon-btn[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.icon-btn.up .ic { transform: rotate(180deg); }
.de-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: end; min-width: 0; }
.de-line.c3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .5fr) auto; }
.de-line > .de-tools { margin-bottom: 2px; }
.de-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 0; }
.de-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--ink); cursor: pointer; }
.de-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.field .input.de-code, .de-yaml { font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.6; font-variant-numeric: normal; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.de-yaml { min-height: max(420px, calc(100dvh - 360px)); }
.de-form textarea.input { field-sizing: content; min-height: 64px; max-height: 60vh; resize: vertical; }
.de-form textarea.input[rows="1"] { min-height: 40px; padding-block: 7px; line-height: 24px; } /* one line = the 40px input beside it */
.de-err { margin: 0; font-weight: var(--fw-regular); }
.de-foot { z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--line); background: var(--bg); }
.de.dirty .de-foot { position: sticky; bottom: 0; }
.de-foot .min0 { min-width: 0; }
.de-state { font-size: var(--fs-meta); color: var(--ink-3); }
.de-state.on { color: var(--high); }
.de-preview { max-width: 880px; }
.de-side { display: none; }
@media (min-width: 1600px) {
  .de-form.has-side { display: grid; grid-template-columns: minmax(0, 920px) minmax(0, 1fr); gap: 56px; align-items: start; }
  .de-side { display: block; position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow-y: auto; scrollbar-width: thin; padding-top: 4px; }
}
.de-hidden { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.de-live { margin: -16px 0 24px; }
.de-end { align-items: end; }
.de-end > .field > .switch { height: 40px; } /* level with the age fields beside it */
.tbl td:has(.pn-type), .tbl td:has(.pn-topics) { white-space: normal; }
.pn-type { display: grid; gap: 2px; min-width: 220px; max-width: 64ch; }
.pn-type a.title { justify-self: start; color: var(--ink); font-weight: var(--fw-medium); }
.pn-type .pn-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-topics { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 200px; max-width: 44ch; color: var(--ink-2); }
.de-hidden .btn-link { margin-left: 6px; }
@media (max-width: 640px) {
  .de-line, .de-line.c3 { grid-template-columns: minmax(0, 1fr) auto; }
  .de-line > .field { grid-column: 1; }
  .de-line > .de-tools { grid-column: 2; grid-row: 1; align-self: end; }
  .de-card { padding: 12px; }
}


/* ---------- conversations (/conversations, account page «Переписки») ---------- */
.cv-pick, .head-r:has(> .cv-pick) { min-width: 0; max-width: 100%; }
.cv-pick .dd, .cv-pick .dd-btn { max-width: 100%; }
.cv-pick .dd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* desktop: the page is the window (no page scroll), the dialog list and the thread scroll in their panes */
@media (min-width: 901px) {
  .main:has(> .view > .page > .cv) { display: flex; flex-direction: column; height: 100dvh; padding-bottom: 16px; }
  .main:has(> .view > .page > .cv) > * { width: 100%; } /* auto side margins in a flex column would shrink them to fit */
  .main:has(> .view > .page > .cv) > .view, .view > .page:has(> .cv) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
}
.cv { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 520px; border-top: 1px solid var(--line); }
.cv-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 16px 0 0; border-right: 1px solid var(--line); }
.cv-side .search { flex: none; max-width: none; }
.cv-dlgs { display: grid; align-content: start; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 16px; }
.cv-d { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 10px 12px; border: var(--frame-w) solid transparent; border-radius: var(--r-ctl); color: inherit; text-decoration: none; }
.cv-d:hover { background: var(--surface); color: inherit; text-decoration: none; }
.cv-d.on { background: var(--surface-2); border-color: var(--line-2); }
.cv-d > .cv-ava { grid-row: span 2; align-self: center; }
.cv-ava { flex: none; display: block; width: 40px; height: 40px; }
.cv-ava img { width: 100%; height: 100%; border-radius: var(--r-ctl); object-fit: cover; }
.cv-d-t { font-weight: var(--fw-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-d-tm { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.cv-d-x { font-size: var(--fs-meta); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-you { color: var(--ink-2); }
.cv-d-side { display: inline-flex; align-items: baseline; gap: 10px; justify-self: end; font-size: var(--fs-sm); white-space: nowrap; }
.cv-tag { color: var(--ink-3); }
.cv-unread { color: var(--link); font-weight: var(--fw-medium); }
.cv-unread.muted { color: var(--ink-3); }
.cv-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 2px 24px; margin: 0 -12px; }
.cv-thread { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cv-th { display: grid; gap: 4px; padding: 14px 0 12px 28px; border-bottom: 1px solid var(--line); }
.cv-th:empty { display: none; }
.cv-th-row { display: flex; align-items: center; gap: 14px; }
.cv-th-row .min0 { flex: 1; }
.cv-th h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-back { display: none; }
.cv-meta { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-meta); color: var(--ink-3); }
.cv-sbar { display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); }
.cv-sbar .search { max-width: 420px; }
.cv-sbar .icon-btn { margin-left: auto; }
.cv-sub { font-size: var(--fs-meta); color: var(--ink-3); }
.cv-hits { list-style: none; margin: 0; padding: 8px 0 16px 16px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cv-hit { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-ctl); cursor: pointer; }
.cv-hit:hover { background: var(--surface); }
.cv-hit:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
.cv-hit-w { font-weight: var(--fw-medium); color: var(--ink-2); }
.cv-hit time { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.cv-hit-t { grid-column: 1 / -1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-hit-t mark, .cv-fix-t mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--med) 24%, transparent); color: var(--ink); }
.cv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cv-scroll:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
/* a short thread sits on the composer, like a messenger */
.cv-feed { list-style: none; margin: 0; padding: 0 0 16px 28px; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.cv-day { align-self: stretch; display: flex; justify-content: center; padding: 10px 0 4px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.cv-day span { padding: 3px 12px; border: var(--frame-w) solid var(--line-2); border-radius: 999px; background: var(--surface-2); } /* in the flow, not sticky: a sticky band sliced the message under it, sticky pills piled up */
.cv-unr { display: flex; align-items: center; gap: 12px; padding: 8px 0 2px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--link); }
.cv-unr::before, .cv-unr::after { content: ""; flex: 1; border-top: 1px solid color-mix(in srgb, var(--link) 45%, transparent); }
.cv-older { align-self: center; padding: 12px 0 4px; }
.cv-none { margin: auto; align-self: center; }
.cv-m { display: flex; }
.cv-m.out { justify-content: flex-end; }
.cv-m.cont { margin-top: -3px; } /* one sender's run reads as one block */
.cv-m:focus { outline: none; }
.cv-m:focus-visible > .cv-b { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.cv-m.cm .cv-b { box-shadow: 0 0 0 2px var(--accent); } /* its menu is open: the menu may cover it, the ring says which */
@media (hover: none) { .cv-m { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } } /* a long press is the menu */
.cv-b { position: relative; display: grid; justify-items: start; gap: 4px; max-width: min(72ch, 78%); min-width: 0; padding: 8px 12px 6px; border-radius: var(--r-box); background: var(--surface); }
.cv-b > * { max-width: 100%; }
.cv-b.bare { padding: 0; background: none; }
.cv-m.out .cv-b:not(.bare) { background: color-mix(in srgb, var(--link) 13%, var(--bg)); }
.cv-m.hl .cv-b { animation: cv-hl 1.8s var(--ease); }
@keyframes cv-hl { from { box-shadow: 0 0 0 2px var(--link); } to { box-shadow: 0 0 0 2px transparent; } }
.cv-who { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--ink-2); }
.cv-fwd { font-size: var(--fs-meta); color: var(--ink-3); }
.cv-fwd b { font-weight: var(--fw-medium); color: var(--ink-2); }
.cv-q { all: unset; box-sizing: border-box; display: block; max-width: 100%; margin: 2px 0; padding-left: 8px; border-left: 2px solid var(--line-2); font-size: var(--fs-meta); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cv-q:hover { border-left-color: var(--link); color: var(--ink-2); }
.cv-q:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.cv-q b, .cv-reply b { font-weight: var(--fw-medium); color: var(--ink-2); }
.cv-t { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-t a { overflow-wrap: anywhere; }
.cv-media, .cv-gone { color: var(--ink-3); }
.cv-gone { font-size: var(--fs-meta); }
.cv-rx { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cv-rx > * { display: inline-flex; align-items: center; gap: 5px; height: 24px; margin: 0; padding: 0 8px; border: 0; border-radius: 12px; background: var(--surface-3); font: inherit; font-size: var(--fs-sm); color: inherit; }
.cv-rx > .mine { background: color-mix(in srgb, var(--link) 28%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 55%, transparent); }
.cv-rx > button { cursor: pointer; }
.cv-rx > button:hover { box-shadow: inset 0 0 0 1px var(--ctl); }
.cv-rx > button:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
/* colour emoji on every OS, one box per glyph so chips and the menu line up */
.emj { display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--sans); font-style: normal; line-height: 1; }
.cv-rx .emj { font-size: 15px; }
/* the message menu (right click, long press, Shift+F10): the reactions in a grid, then «Ответить», «Копировать текст» */
.menu.cv-cm { position: fixed; right: auto; bottom: auto; z-index: 70; width: 232px; animation: pop-in .12s var(--ease); }
.cv-cm-rx { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu .cv-cm-rx button { justify-content: center; min-height: 0; height: 36px; padding: 0; font-size: 20px; }
.menu .cv-cm-rx button[aria-checked="true"] { background: color-mix(in srgb, var(--link) 28%, var(--surface-2)); }
.menu .cv-cm-rx button:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
.menu.cv-cm button .ic { color: var(--ink-3); }
.cv-rx b { font-weight: var(--fw-medium); color: var(--ink-2); }
.cv-mf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; justify-self: stretch; font-size: var(--fs-sm); color: var(--ink-3); }
.cv-end { display: inline-flex; gap: 14px; margin-left: auto; white-space: nowrap; }
/* attachments: the box size is known before the bytes arrive (no jump in a scrolled feed) */
.cv-vid, .cv-gif { display: block; width: var(--w, 280px); max-width: 100%; aspect-ratio: var(--ar, 4 / 3); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface-3); }
.cv-ph, .cv-play, .cv-round { all: unset; box-sizing: border-box; position: relative; cursor: pointer; }
.cv-ph { display: block; width: var(--w, 280px); max-width: 100%; aspect-ratio: var(--ar, 4 / 3); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface-3); }
.cv-ph img, .cv-vid img, .cv-vid video, .cv-play img { width: 100%; height: 100%; object-fit: cover; }
.cv-vid video { object-fit: contain; background: #000; }
.cv-gif { object-fit: cover; cursor: pointer; }
.cv-play { display: block; width: 100%; height: 100%; }
.cv-ph:focus-visible, .cv-play:focus-visible, .cv-round:focus-visible, .cv-gif:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.cv-play-ic { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; transition: background .12s; }
.cv-play-ic .ic { margin-left: 2px; }
.cv-play:hover .cv-play-ic, .cv-round:hover .cv-play-ic { background: rgb(0 0 0 / .75); }
.cv-dur { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: var(--r-badge); background: rgb(0 0 0 / .6); color: #fff; font-size: var(--fs-sm); }
.cv-round { display: block; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background: var(--surface-3); }
.cv-round video, .cv-round img { width: 100%; height: 100%; object-fit: cover; }
.cv-round .cv-dur { left: 50%; bottom: 10px; transform: translateX(-50%); }
.cv-round.on .cv-play-ic { opacity: 0; }
.cv-voice, .cv-aud { display: grid; gap: 6px; width: 300px; }
.cv-voice { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cv-voice .cv-dur, .cv-aud .cv-dur { position: static; background: none; color: var(--ink-3); padding: 0; }
.cv-voice audio, .cv-aud audio { width: 100%; height: 40px; }
.cv-aud-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cv-aud-t b { font-weight: var(--fw-medium); color: var(--ink); }
.cv-aud-t span { color: var(--ink-3); font-size: var(--fs-meta); }
.cv-stk img { width: 160px; height: 160px; object-fit: contain; }
.cv-emo { display: inline-flex; align-items: baseline; gap: 10px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--sans); font-size: 56px; line-height: 1.1; }
.cv-emo b { font-family: var(--sans); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--ink); }
.cv-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 340px; }
.cv-file-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-ctl); background: var(--surface-3); color: var(--ink-2); }
.cv-file-n { font-weight: var(--fw-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-card { display: grid; gap: 4px; min-width: min(260px, 100%); }
.cv-card b { font-weight: var(--fw-medium); color: var(--ink); }
.cv-poll { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.cv-poll li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 8px; border-radius: var(--r-badge);
  background: linear-gradient(to right, color-mix(in srgb, var(--link) 22%, transparent) var(--p, 0%), var(--surface-2) var(--p, 0%)); }
.cv-big { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
/* speech to text under a voice note or a «кружок» */
.cv-tx { display: grid; justify-items: start; gap: 2px; max-width: min(100%, 60ch); }
.cv-tx-l { font-size: var(--fs-sm); color: var(--ink-3); }
.cv-tx-b { font-size: var(--fs-meta); }
.cv-tx-e { font-size: var(--fs-meta); color: var(--crit-ink); }
.cv-tx-e:empty { display: none; }
.cv-comp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 0 0 28px; border-top: 1px solid var(--line); }
.cv-down { position: absolute; right: 12px; bottom: calc(100% + 12px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: var(--frame-w) solid var(--line-2); border-radius: 50%; background: var(--surface-2); color: var(--ink-2); box-shadow: var(--pop); cursor: pointer; }
.cv-down:hover { color: var(--ink); border-color: var(--ctl); }
.cv-down:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
/* «AI-Узурпация:» row above the field: two buttons of one size (the grid gives both the wider one's width) */
.cv-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cv-ai-l { font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.cv-ai-b { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.cv-ai-btn { gap: 6px; border-color: var(--line-2); color: var(--ink-2); }
.cv-ai-btn .ic { color: var(--accent); }
.cv-ai-btn:hover { border-color: var(--ctl); background: transparent; color: var(--ink); }
.cv-ai-n { font-size: var(--fs-meta); color: var(--ink-3); }
/* «Перевести»: the dropdown's popover; a meme voice has an icon where a language has its flag, and a pin */
.cv-lang { width: 260px; }
.cv-lang-ic { display: grid; place-items: center; width: 16px; height: 16px; color: var(--accent); }
.cv-lang-pin .n { display: inline-flex; color: var(--ink-3); }
.cv-ai-n.crit { color: var(--crit-ink); }
.cv-ai-n:empty { display: none; }
.cv-cnt { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); }
/* the message field: one frame around the textarea and the send button in its bottom-right corner */
.cv-field { display: flex; align-items: flex-end; border: var(--frame-w) solid var(--ctl); border-radius: var(--r-box); background: var(--surface); transition: border-color .12s; }
.cv-field:hover:not(:has(> .cv-in:focus, > .cv-in:disabled)) { border-color: var(--ink-3); }
.cv-field:has(> .cv-in:focus) { border-color: var(--accent); outline: var(--focus-w) solid var(--accent); outline-offset: calc(-1 * var(--frame-w)); }
.cv-field:has(> .cv-in:disabled) { border-color: var(--line-2); background: transparent; }
.cv-in { flex: 1; min-width: 0; min-height: 48px; max-height: 240px; margin: 0; padding: 11px 8px 11px 14px; border: 0; outline: 0; background: transparent; resize: none;
  font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); overflow-y: auto; scrollbar-width: thin; }
.cv-in::placeholder { color: var(--ink-dis); }
.cv-in:disabled { cursor: default; }
.cv-send { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 8px 8px 0; border-radius: var(--r-ctl); background: var(--accent); color: var(--btn-ink); cursor: pointer; transition: background-color .12s, color .12s, opacity .12s; }
.cv-send:hover:not(:disabled) { opacity: .85; }
.cv-send:disabled { background: var(--surface-3); color: var(--ink-dis); cursor: default; }
.cv-send:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.cv-send[aria-busy="true"] { opacity: .6; }
.cv-warn { display: grid; gap: 4px; }
.cv-warn:empty { display: none; }
.cv-w { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--high); }
.cv-w.crit { color: var(--crit-ink); }
.cv-reply { display: flex; align-items: center; gap: 12px; padding-left: 10px; border-left: 2px solid var(--link); font-size: var(--fs-meta); color: var(--ink-3); }
.cv-reply-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-fix { display: grid; gap: 4px; padding: 10px 12px; border: var(--frame-w) solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.cv-fix-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--fs-meta); color: var(--ink-3); }
.cv-fix-t { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-opus { display: grid; gap: 8px; }
.cv-opus-h { display: flex; align-items: center; gap: 16px; font-size: var(--fs-meta); color: var(--ink-3); }
.cv-opus-x { width: 32px; height: 32px; margin: -6px 0 -6px auto; }
.cv-opus-m { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.cv-opus-m.crit { color: var(--crit-ink); }
.cv-opus-l { margin: 0; padding: 0; list-style: none; display: grid; max-height: min(40vh, 320px); overflow-y: auto; border: var(--frame-w) solid var(--line); border-radius: var(--r-ctl); } /* the thread above keeps room */
.cv-opus-l li + li { border-top: 1px solid var(--line); }
.cv-opus-l li:has(> .cv-opus-i:hover) { background: var(--surface); } /* the «по мотивам» line belongs to its joke */
.cv-opus-l li:has(> .cv-opus-i.on) { background: color-mix(in srgb, var(--link) 10%, var(--bg)); }
.cv-opus-i { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; width: 100%; padding: 10px 12px; cursor: pointer; }
.cv-opus-i:has(+ .cv-opus-a) { padding-bottom: 2px; }
.cv-opus-i:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
.cv-opus-a { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 0 12px 10px 120px; font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-opus-a b { font-weight: var(--fw-medium); color: var(--ink-2); }
button.cv-opus-a { cursor: pointer; }
button.cv-opus-a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
button.cv-opus-a:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: -2px; }
.cv-opus-k { font-size: var(--fs-meta); color: var(--ink-3); padding-top: 2px; }
.cv-opus-t { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* photo viewer */
.cv-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.cv-lb:not([open]) { display: none; }
.cv-lb::backdrop { background: rgb(4 6 8 / .92); }
.cv-lb img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px); object-fit: contain; border-radius: var(--r-ctl); cursor: zoom-out; }
.cv-lb-bar { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: var(--r-box); background: rgb(11 14 18 / .8); color: var(--ink-2); }
.cv-lb-bar .icon-btn { color: var(--ink-2); }
.cv-lb-bar .icon-btn:disabled { color: var(--ink-dis); cursor: default; background: none; }
.cv-lb-n { padding: 0 6px; font-size: var(--fs-meta); }
@media (prefers-reduced-motion: reduce) { .cv-m.hl .cv-b { animation: none; box-shadow: 0 0 0 2px var(--link); } .menu.cv-cm, .cv-lang { animation: none; } }
/* a narrow phone: «Причесать» and «Перевести» side by side, «Генерация опуса» under them, nothing scrolls sideways */
@media (max-width: 520px) { .cv-ai-b { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-ai-b > :nth-child(2) { order: 1; grid-column: 1 / -1; } }
@media (max-width: 1180px) { .cv { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 900px) {
  .cv { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; border-top: 0; }
  .main:has(> .view > .page > .cv.open) { padding-bottom: 0; } /* the sticky composer is the page's last line */
  .head-r:has(> .cv-pick), .cv-pick .dd { width: 100%; }
  .cv.open .cv-side, .cv:not(.open) .cv-thread { display: none; }
  .cv-side { padding: 0; border-right: 0; }
  .cv-dlgs { overflow: visible; margin: 0 -12px; }
  .cv-th { padding: 0 0 12px; }
  .cv-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-bottom: 8px; }
  .cv-sbar { padding: 12px 0; }
  .cv-hits { padding: 8px 0 16px; margin: 0 -12px; overflow: visible; }
  .cv-scroll { overflow: visible; }
  .cv-feed { padding: 0 0 12px; min-height: 0; }
  .menu .cv-cm-rx button { height: 40px; }
  .cv-b { max-width: 88%; }
  .cv-round { width: 168px; height: 168px; }
  .cv-opus-i { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cv-opus-a { padding-left: 12px; }
  .cv-ai-b { flex: 1 1 auto; }
  .cv-comp { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 max(12px, env(safe-area-inset-bottom, 0px)); background: var(--bg); }
  .cv-down { right: 0; }
}