/* InvestProjects — «Кабинет», направление А.
   One design system for every page: colours, fonts, radii and spacing are tokens below.
   Surfaces are told apart by the page colour and their radius, not by frames: the only border
   is the one on the news that is open (2px accent).
   Light is the base; dark follows the system unless the user picked a theme (html[data-theme]).
   Contrast of every text pair (≥ 4.5:1 in both themes) is tabled in docs/design-contrast.md;
   recompute it there when a colour token changes. */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #F2F3F7;
  --surface: #FFFFFF;
  --surface-2: #F2F3F7;
  --surface-3: #E7E9EE;
  --sep: #D5D8E0;

  /* text */
  --text: #0E1116;
  --text-2: #5B6270;

  /* action */
  --accent: #2F5BFF;
  --accent-strong: #1C3FD6;
  --accent-ink: #FFFFFF;
  --accent-soft: #E8EEFF;
  --accent-soft-ink: #1C3FD6;
  --ai-ink: #13235E;
  --ink: #0E1116;
  --ink-text: #FFFFFF;
  --focus: #2F5BFF;

  /* meaning */
  --danger: #A1231B;
  --danger-soft: #FCE3E1;
  --success: #135C33;
  --success-soft: #DDF3E6;
  --warn: #6A4500;
  --warn-soft: #FFF1D1;

  /* people */
  --avatar: #FFD8C2;
  --avatar-ink: #7A2E00;
  --face: #DDF3E6;
  --face-ink: #135C33;

  /* news types: text colour and its tint; the tint is the chip's background */
  --type-construction: #8A3B00;
  --type-construction-soft: #FFE7D1;
  --type-gov_program: #0B4A8F;
  --type-gov_program-soft: #DDEBFD;
  --type-deal: #4D2FB5;
  --type-deal-soft: #ECE6FF;
  --type-court: #A1231B;
  --type-court-soft: #FCE3E1;
  --type-other: #3E4450;
  --type-other-soft: #E7E9EE;
  --type-none: #5B6270;
  --type-none-soft: #EDEEF2;

  --shadow-hover: 0 6px 24px rgba(14, 17, 22, 0.08);
  --shadow-pop: 0 16px 40px rgba(14, 17, 22, 0.16);

  /* type: Onest for everything, Unbounded only for the big figures */
  --font-ui: "Onest", system-ui, sans-serif;
  --font-figure: "Unbounded", "Onest", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 14px;
  --fs-body: 15px;
  --fs-l: 17px;
  --lh: 1.45;

  /* shape: cards 20, panels and plates 24, buttons 16, chips 20 */
  --r-xs: 8px;
  --r-tag: 10px;
  --r-s: 12px;
  --r-btn: 16px;
  --r-card: 20px;
  --r-chip: 20px;
  --r-panel: 24px;
  --r-pill: 999px;

  /* rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 32px;
  --gutter: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0D12;
    --surface: #161A22;
    --surface-2: #1F2430;
    --surface-3: #293040;
    --sep: #394152;
    --text: #EEF0F5;
    --text-2: #A4ABB9;
    --accent: #2F5BFF;
    --accent-strong: #1C3FD6;
    --accent-ink: #FFFFFF;
    --accent-soft: #1D2A55;
    --accent-soft-ink: #B7C6FF;
    --ai-ink: #D5DDFF;
    --ink: #EEF0F5;
    --ink-text: #0E1116;
    --focus: #7F9BFF;
    --danger: #FF9C8F;
    --danger-soft: #3A1715;
    --success: #6FD6A6;
    --success-soft: #0F2A20;
    --warn: #F2C66D;
    --warn-soft: #2E2410;
    --avatar: #4A2A1A;
    --avatar-ink: #FFD2B8;
    --face: #173826;
    --face-ink: #9FE0BA;
    --type-construction: #FFBE85;
    --type-construction-soft: #3A2512;
    --type-gov_program: #93C2FF;
    --type-gov_program-soft: #12294A;
    --type-deal: #C7B6FF;
    --type-deal-soft: #2A2150;
    --type-court: #FFA197;
    --type-court-soft: #3F1B19;
    --type-other: #C3C9D4;
    --type-other-soft: #262B35;
    --type-none: #A4ABB9;
    --type-none-soft: #22262E;
    --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0D12;
  --surface: #161A22;
  --surface-2: #1F2430;
  --surface-3: #293040;
  --sep: #394152;
  --text: #EEF0F5;
  --text-2: #A4ABB9;
  --accent: #2F5BFF;
  --accent-strong: #1C3FD6;
  --accent-ink: #FFFFFF;
  --accent-soft: #1D2A55;
  --accent-soft-ink: #B7C6FF;
  --ai-ink: #D5DDFF;
  --ink: #EEF0F5;
  --ink-text: #0E1116;
  --focus: #7F9BFF;
  --danger: #FF9C8F;
  --danger-soft: #3A1715;
  --success: #6FD6A6;
  --success-soft: #0F2A20;
  --warn: #F2C66D;
  --warn-soft: #2E2410;
  --avatar: #4A2A1A;
  --avatar-ink: #FFD2B8;
  --face: #173826;
  --face-ink: #9FE0BA;
  --type-construction: #FFBE85;
  --type-construction-soft: #3A2512;
  --type-gov_program: #93C2FF;
  --type-gov_program-soft: #12294A;
  --type-deal: #C7B6FF;
  --type-deal-soft: #2A2150;
  --type-court: #FFA197;
  --type-court-soft: #3F1B19;
  --type-other: #C3C9D4;
  --type-other-soft: #262B35;
  --type-none: #A4ABB9;
  --type-none-soft: #22262E;
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ── base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent-soft-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-3); top: -60px; z-index: 50;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border-radius: var(--r-s); box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: var(--sp-3); }

.muted { color: var(--text-2); }
.meta { color: var(--text-2); font-size: var(--fs-s); }
.icon { flex: none; }

/* ── controls ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-btn);
  background: var(--surface-2); color: var(--text);
  font-weight: 600; font-size: var(--fs-m); line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-s { min-height: 34px; padding: 0 var(--sp-3); border-radius: var(--r-s); font-size: var(--fs-s); }
.btn-l { min-height: 48px; padding: 0 18px; }
.btn-xl { min-height: 52px; padding: 0 var(--sp-5); font-size: 16px; font-weight: 700; }
.btn-wide { width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ink { background: var(--ink); color: var(--ink-text); }
.btn-ink:hover { box-shadow: var(--shadow-hover); }
.btn-surface { background: var(--surface); color: var(--text); }
.btn-surface:hover { box-shadow: var(--shadow-hover); }
.btn-soft, .btn-quiet { background: var(--surface-2); color: var(--text); }
.btn-soft:hover, .btn-quiet:hover { background: var(--surface-3); }
.btn-soft-accent { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 700; }
.btn-soft-accent:hover { box-shadow: inset 0 0 0 2px var(--accent-soft-ink); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn-xl { width: 52px; height: 52px; border-radius: var(--r-btn); background: var(--surface-2); color: var(--text); }
.icon-btn-xl:hover { background: var(--surface-3); }
.icon-btn.star.on { color: var(--accent-soft-ink); }

/* :where() keeps these defaults at zero specificity, so any component rule can adjust them */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: 40px; width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); color: var(--text);
  border: 0; border-radius: var(--r-s);
}
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: 1; }
select { width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

.field { display: grid; gap: var(--sp-1); font-size: var(--fs-s); color: var(--text-2); }
.field > input, .field > select, .field > textarea { color: var(--text); font-size: var(--fs-body); }

form { margin: 0; }

/* ── top bar ──────────────────────────────────────────────────────── */

.page-feed { padding: var(--sp-4) var(--gutter) var(--sp-6); }

.topbar {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 52px;
}
.page-card .topbar, .page-admin .topbar { padding: var(--sp-5) var(--gutter) 0; }
.topbar-slim { justify-content: space-between; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--accent); color: var(--accent-ink);
  font: 700 15px/1 var(--font-figure);
}
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }

.topbar-search {
  flex: 1 1 240px; max-width: 560px; margin-left: var(--sp-3);
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 var(--sp-4);
  border-radius: var(--r-btn); background: var(--surface); color: var(--text-2);
}
.topbar-search:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.topbar-search input {
  flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0;
  border: 0; background: transparent; color: var(--text); font-size: var(--fs-body);
}
.topbar-search input:focus-visible { outline: none; }

.topbar-jobs { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
/* the AI button and how many news its run takes, as one control */
.ai-run { display: flex; align-items: center; gap: 6px; }
.ai-limit { position: relative; display: inline-flex; }
.ai-limit select {
  appearance: none; -webkit-appearance: none;
  min-height: 48px; padding: 0 30px 0 14px;
  border: 0; border-radius: var(--r-btn); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.ai-limit select:hover { box-shadow: var(--shadow-hover); }
.ai-limit select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ai-limit::after {
  content: ""; position: absolute; right: 13px; top: 50%; margin-top: -5px; pointer-events: none;
  width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
.ai-limit select option { background: var(--surface); color: var(--text); }
.job-state {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-btn); background: var(--surface);
  font-size: var(--fs-m); font-weight: 600; color: var(--text-2);
}

/* the user's square and what it opens */
.user-menu { flex: none; }
.avatar {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-btn);
  background: var(--avatar); color: var(--avatar-ink);
  font-weight: 800; font-size: 16px; cursor: pointer; list-style: none;
}
.avatar::-webkit-details-marker { display: none; }
.user-menu .menu-body { left: auto; right: 0; width: 260px; gap: 2px; padding: var(--sp-2); }
.menu-who { display: grid; padding: var(--sp-2) var(--sp-3) var(--sp-3); overflow-wrap: anywhere; }
.menu-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1) var(--sp-3) var(--sp-2); }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 40px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--text);
  font-size: var(--fs-m); font-weight: 600; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item[hidden] { display: none; }

.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-s); background: var(--surface-2);
}
.theme-switch[hidden] { display: none; }
.theme-opt {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-2); cursor: pointer;
}
.theme-opt[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(14, 17, 22, .12); }
.corner { position: absolute; top: var(--sp-3); right: var(--sp-3); }

/* the key help: opened from the menu or with "?", under the bar at the right */
.keys-help[hidden] { display: none; }
.topbar .keys-help { position: absolute; right: 0; top: 100%; }
.keys-help .drop-body { left: auto; right: 0; width: 330px; }
.keys-body:focus { outline: none; }
.keys { margin: 0; display: grid; gap: var(--sp-1); }
.keys > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--sp-2); font-size: var(--fs-s); }
.keys dd { margin: 0; }
kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px; text-align: center;
  font: 600 var(--fs-xs)/1.5 var(--font-mono); color: var(--text);
  background: var(--surface-2); border-radius: 6px;
}

/* ── the summary: four figures about the whole flow ───────────────── */

.summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.stat {
  display: grid; align-content: start; gap: 6px; min-width: 0;
  padding: 16px 22px;
  background: var(--surface); border-radius: var(--r-panel);
}
.stat-label, .stat-note { font-size: var(--fs-m); color: var(--text-2); overflow-wrap: anywhere; }
.stat-figure {
  font: 600 32px/1.15 var(--font-figure);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text);
}
/* the first plate is the week's thesis: construction news, in the accent */
.stat-lead { background: var(--accent); }
.stat-lead .stat-label, .stat-lead .stat-note, .stat-lead .stat-figure { color: var(--accent-ink); }

/* ── notices ──────────────────────────────────────────────────────── */

.notices { display: grid; gap: var(--sp-2); }
.notices:not(:empty) { margin-top: var(--sp-4); }
.notice {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-btn);
  background: var(--surface); font-size: var(--fs-s);
}
.notice-warn { display: block; background: var(--warn-soft); color: var(--warn); }
.notice-warn ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.notice-warn .meta { color: var(--warn); }
/* a notice about a finished run: the text, and the "×" that closes it at the top right */
.notice-closable { display: flex; align-items: flex-start; gap: var(--sp-2); }
.notice-body { flex: 1; min-width: 0; }
.notice-dismiss { flex: none; margin: -6px -8px -6px 0; }
.notice-dismiss .icon-btn { width: 30px; height: 30px; color: var(--warn); }
.notice-dismiss .icon-btn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.notice-dismiss .icon-btn:focus-visible { outline: 2px solid var(--warn); outline-offset: 1px; }
.notice-toast { background: var(--ink); color: var(--ink-text); font-size: var(--fs-m); }
/* "Открыть архив" in the toast: the toast's own text colour, underlined, so it reads as a link on ink */
.toast-link { color: var(--ink-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast-link:focus-visible { outline: 2px solid var(--ink-text); outline-offset: 2px; border-radius: 4px; }
/* the feed's notice floats at the bottom, so "Отменить" is at hand wherever the user scrolled */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); z-index: 40; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2 * var(--sp-4)); box-shadow: var(--shadow-pop);
}

/* ── filters: type chips, then the other filters as white chips ───── */

.filters {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.filters fieldset { border: 0; margin: 0; padding: 0; }
.type-toggles, .filter-drops { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.filters-sep { width: 1px; height: 24px; margin: 0 6px; background: var(--sep); }
.filters-break { flex-basis: 100%; height: 0; }
.filters-note { margin-left: auto; font-size: var(--fs-s); color: var(--text-2); }
.filters-note-archive { margin-left: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-chip);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-m); font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none;
}
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chip:hover { box-shadow: var(--shadow-hover); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* "Все": black while every type is shown */
.chip-all[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); }

/* a type chip wears its colour while its news are in the feed: all of them with "Все",
   only the picked ones once the user picks */
/* positioned, so its hidden box stays inside the row when the row scrolls sideways */
.type-toggle { position: relative; background: var(--chip-soft); color: var(--chip-c); }
.is-picking .type-toggle { background: var(--surface); color: var(--text-2); }
.is-picking .type-toggle:has(input:checked) { background: var(--chip-soft); color: var(--chip-c); }
.is-picking .type-toggle:has(input:checked)::before { content: "✓"; font-weight: 800; }

/* "Без AI-разбора": a switch beside the types, not a type; blue while on, like a set filter */
.switch-chip { position: relative; }
.switch-chip:has(input:checked) { background: var(--accent-soft); color: var(--accent-soft-ink); }
.switch-chip:has(input:checked)::before { content: "✓"; font-weight: 800; }

/* the other filters: a white chip; one that is set turns blue and gets its own ✕ */
.fchip {
  position: relative; display: inline-flex; align-items: center;
  height: 40px; border-radius: var(--r-chip); background: var(--surface); color: var(--text);
  font-size: var(--fs-m);
}
.fchip:hover { box-shadow: var(--shadow-hover); }
.fchip.is-set { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; }
.fchip .drop { position: static; }
.fchip .drop > summary, .fchip select {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; min-height: 0; padding: 0 14px;
  border: 0; border-radius: var(--r-chip); background: transparent; color: inherit;
  font: inherit; cursor: pointer; list-style: none;
}
.fchip select { appearance: none; -webkit-appearance: none; padding-right: 32px; }
.fchip.select::after {
  content: ""; position: absolute; right: 16px; top: 16px; pointer-events: none;
  width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
.fchip select option { background: var(--surface); color: var(--text); }
.fchip .drop > summary::-webkit-details-marker { display: none; }
.fchip:not(.is-set) .drop > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
.fchip.is-set .drop > summary { padding-right: 4px; }
.fchip-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip-clear:empty { display: none; }
.chip-x {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 5px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; cursor: pointer;
}
.chip-x:hover { background: var(--surface); }

.drop { position: relative; }
.drop > summary { cursor: pointer; }
.drop-body {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
  width: 300px; max-width: calc(100vw - 2 * var(--sp-4));
  display: grid; gap: var(--sp-2); padding: var(--sp-3);
  background: var(--surface); color: var(--text); border-radius: var(--r-btn); box-shadow: var(--shadow-pop);
  font-weight: 400;
}
.fchip .drop-body { top: calc(100% + 8px); left: 0; }
.drop-amount { grid-template-columns: 1fr 1fr; }
.ms-list { max-height: 260px; overflow: auto; display: grid; gap: 2px; }
.ms-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-2); border-radius: var(--r-xs); font-size: var(--fs-m); cursor: pointer;
}
.ms-item:hover { background: var(--surface-2); }
.ms-item[hidden] { display: none; }

/* with the page script the filters apply as they change; the button is for pages without it */
.js .filters .apply { display: none; }

/* type colours, shared by the chips in the filters, the rows and the card */
.type-construction { --chip-c: var(--type-construction); --chip-soft: var(--type-construction-soft); }
.type-gov_program { --chip-c: var(--type-gov_program); --chip-soft: var(--type-gov_program-soft); }
.type-deal { --chip-c: var(--type-deal); --chip-soft: var(--type-deal-soft); }
.type-court { --chip-c: var(--type-court); --chip-soft: var(--type-court-soft); }
.type-other { --chip-c: var(--type-other); --chip-soft: var(--type-other-soft); }
.type-none { --chip-c: var(--type-none); --chip-soft: var(--type-none-soft); }

.type-chip {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px 10px; border-radius: var(--r-tag);
  background: var(--chip-soft); color: var(--chip-c);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.25;
}
/* a type the rules gave: the same colour at full contrast, the note in plain weight so AI's word reads firmer */
.type-chip .type-by { font-size: inherit; font-weight: 500; margin-left: 2px; }

/* ── feed and card, side by side ──────────────────────────────────── */

.layout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: var(--sp-5);
  align-items: start; margin-top: 14px;
}
.feed-col { min-width: 0; }

/* the sections: a compact switch over the list they change */
.tabs {
  display: flex; gap: 2px; flex: none;
  padding: 3px; border-radius: var(--r-chip); background: var(--surface);
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 var(--sp-3); border-radius: 17px;
  color: var(--text-2); font-weight: 600; font-size: var(--fs-m); white-space: nowrap;
}
.tab:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.tab b { font-weight: 600; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tab[aria-current="page"] { background: var(--ink); color: var(--ink-text); }

.feed:focus { outline: none; }
.feed-list { list-style: none; display: grid; gap: 10px; }

.news-row {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 14px 22px;
  background: var(--surface); border: 2px solid transparent; border-radius: var(--r-card);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.news-row:hover { box-shadow: var(--shadow-hover); }
.news-row.is-open { border-color: var(--accent); }
.row-main { flex: 1; min-width: 0; display: grid; gap: 6px; }

.row-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-s); color: var(--text-2); }
.row-status { font-weight: 600; font-size: var(--fs-s); color: var(--text-2); }
.row-status.is-work { color: var(--accent-soft-ink); }

.row-title { font-size: var(--fs-l); font-weight: 700; line-height: 23px; letter-spacing: -.01em; }
.row-open { color: var(--text); }
.row-open:hover { text-decoration: none; }
/* the whole card opens the news */
.row-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.row-open:focus-visible { outline: none; }
.news-row:has(.row-open:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.row-facts { font-size: var(--fs-m); color: var(--text-2); }

/* interest to the bank, 0–100: a small tinted tag; pairs are the tokens' own (≥ 4.5:1 in both themes) */
.bank-score {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--r-tag);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums;
}
.bank-high { background: var(--success-soft); color: var(--success); }
.bank-mid { background: var(--accent-soft); color: var(--accent-soft-ink); }
.bank-low { background: var(--surface-2); color: var(--text-2); }

/* the amount: a big figure with where it came from */
.news-amount {
  flex: none; width: 150px;
  display: grid; justify-items: end; text-align: right; gap: 2px;
}
.news-amount[data-empty]::before { content: "—"; font: 600 20px/1.2 var(--font-figure); }
.figure {
  font: 600 20px/1.2 var(--font-figure);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text);
}
.origin { font-size: var(--fs-xs); color: var(--text-2); }

.status-badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-tag);
  font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--text-2);
}
.status-in_progress { background: var(--accent-soft); color: var(--accent-soft-ink); }
.status-closed_deal { background: var(--success-soft); color: var(--success); }
.status-closed_refused { background: var(--danger-soft); color: var(--danger); }

.empty, .card-empty {
  display: grid; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); text-align: center;
  background: var(--surface); border-radius: var(--r-panel);
}
.empty-title { font-weight: 700; font-size: var(--fs-l); }

.pager { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); }
.btn-more { min-height: 48px; flex: 1; }
.pager .meta { margin-left: auto; }

/* ── the card ─────────────────────────────────────────────────────── */

.card-pane {
  position: sticky; top: var(--sp-4);
  max-height: calc(100vh - 2 * var(--sp-4)); overflow: auto; overscroll-behavior: contain;
  border-radius: var(--r-panel); background: var(--surface);
}
.card-pane[aria-busy="true"] .card { opacity: .55; transition: opacity .15s ease; }
.card-close { display: none; }

/* the user closed the panel: the feed takes the whole width until they open a news */
/* .panel-off: remembered in this browser, set before the page paints; the page script then closes it for good */
.layout.no-panel, .panel-off .layout:not(.has-card) { grid-template-columns: minmax(0, 1fr); }
.layout.no-panel .card-pane, .panel-off .layout:not(.has-card) .card-pane { display: none; }
.pane-close {
  display: inline-grid; place-items: center; flex: none; margin-left: auto;
  width: 36px; height: 36px; border: 0; border-radius: var(--r-btn);
  background: var(--surface-2); color: var(--text-2);
}
.pane-close:hover { background: var(--surface-3); color: var(--text); }

.card {
  display: grid; gap: 18px;
  padding: 26px 28px;
}
.card > * { min-width: 0; }
.card-head { display: grid; gap: var(--sp-3); }
.card-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title { font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: -.02em; }
.card-title:focus { outline: none; }
.btn-open { justify-self: start; min-height: 40px; border-radius: var(--r-s); }

.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: var(--r-btn); background: var(--surface-2); min-width: 0; }
.fact dt { font-size: var(--fs-xs); color: var(--text-2); }
.fact dd { margin: 0; display: grid; gap: 4px; }
.fact-main { font-size: 16px; font-weight: 700; line-height: 1.3; }

.ai-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-btn); background: var(--accent-soft);
}
.ai-note .icon { color: var(--accent-soft-ink); margin-top: 1px; }
.ai-note p { font-size: var(--fs-m); line-height: 20px; color: var(--ai-ink); }
.ai-note-body { display: grid; gap: var(--sp-2); min-width: 0; }
.bank-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bank-by { font-size: var(--fs-xs); font-weight: 600; }
/* on the blue block the tag keeps its own tint; the lowest one gets the surface so it stays visible */
.ai-note .bank-mid, .ai-note .bank-low { background: var(--surface); }

.section-title { font-size: 15px; font-weight: 700; margin-bottom: var(--sp-2); }

.card-status { display: grid; gap: var(--sp-3); }
.status-line { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); }
.card-actions { display: flex; gap: 10px; align-items: center; }
.card-actions .act-main { flex: 1; display: flex; }
.card-actions .act-main .btn { flex: 1; }

.close-box > summary { list-style: none; width: fit-content; }
.close-box > summary::-webkit-details-marker { display: none; }
.close-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-btn); background: var(--surface-2); }
.close-form :where(textarea) { background: var(--surface); }
.segmented { border: 0; margin: 0; padding: 0; display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.segmented legend { float: left; margin-right: var(--sp-2); font-size: var(--fs-s); color: var(--text-2); }
.segmented label { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; font-size: var(--fs-m); }

.crow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--fs-m); line-height: 20px; }
.face {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 11px;
  background: var(--face); color: var(--face-ink); font-weight: 800;
}
.cbody { flex: 1; min-width: 0; }
.cmeta { display: flex; align-items: center; gap: var(--sp-2); }
.cmeta .meta { font-size: var(--fs-xs); }
.cu { font-weight: 700; }
.cdel-form { margin-left: auto; }
.cdel { width: 26px; height: 26px; }
.cm { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.card-history { display: grid; gap: 2px; }
.hrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); padding: 3px 0; font-size: var(--fs-s); color: var(--text-2); }
.hrow .ts { font-variant-numeric: tabular-nums; }
.hrow .who { font-weight: 700; color: var(--text); }
.hrow .act b { color: var(--text); font-weight: 600; }
.hrow .note { flex-basis: 100%; }

/* a long unbroken word (a URL, a company code) wraps instead of pushing the page sideways */
.row-title, .row-facts, .row-kicker .meta, .card-title, .card-kicker .meta,
.fact dd, .ai-note p, .hrow .note, .hrow .who, .cu, .empty-title, .notice {
  overflow-wrap: anywhere;
}

/* ── single-column pages: card page, login, admin, error ──────────── */

.single { max-width: 760px; margin: var(--sp-5) auto; padding: 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.page-card .single > .card { background: var(--surface); border-radius: var(--r-panel); }
.page-admin .single { max-width: 1000px; }
.narrow { max-width: 420px; margin: 10vh auto var(--sp-6); padding: 0 var(--sp-4); display: grid; gap: var(--sp-5); }
.brand-big { justify-content: center; }
.brand-big .brand-mark { width: 44px; height: 44px; font-size: 17px; border-radius: 13px; }
.brand-big .brand-name { font-size: 22px; }

.panel {
  display: grid; gap: var(--sp-4);
  padding: 26px 28px; background: var(--surface); border-radius: var(--r-panel);
}
.panel-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.stack { display: grid; gap: var(--sp-3); }
.btn-wide.btn-primary { min-height: 48px; }
.form-error { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-s); }

.inline-fields { display: flex; gap: var(--sp-2); align-items: end; flex-wrap: wrap; }
.inline-fields .field { flex: 1 1 160px; }
.inline-fields > input { flex: 1 1 160px; width: auto; }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.table th { text-align: left; color: var(--text-2); font-weight: 600; font-size: var(--fs-xs); }
.table th, .table td { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--surface-2); vertical-align: middle; }

/* ── narrower screens ─────────────────────────────────────────────── */

@media (max-width: 1280px) {
  :root { --gutter: 24px; }
  .topbar { gap: var(--sp-3); }
  .topbar-search { margin-left: 0; }
  .topbar-jobs .btn-surface .icon { display: none; }
  .filters-note { flex-basis: 100%; margin-left: 0; }
}

/* the card covers the feed and closes back to it */
@media (max-width: 960px) {
  :root { --gutter: 16px; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .card-pane { display: none; }
  .layout.has-card .card-pane {
    display: block; position: fixed; inset: 0; z-index: 30; max-height: none;
    border-radius: 0; background: var(--bg); padding: var(--sp-3);
  }
  .layout.has-card .card { background: var(--surface); border-radius: var(--r-panel); }
  .layout.has-card .card-close { display: inline-flex; margin-bottom: var(--sp-2); }
  /* here the card covers the feed and "← К ленте" leads back; there is no panel to close */
  .pane-close { display: none; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .topbar { flex-wrap: wrap; }
  .topbar-search { order: 5; flex-basis: 100%; max-width: none; }
}

/* ── the phone: a list of news, the card over the whole screen, its actions at the bottom ── */

@media (max-width: 620px) {
  .page-feed { padding: var(--sp-3) var(--gutter) var(--sp-6); }
  .topbar { gap: var(--sp-2); min-height: 0; }
  .brand-name { display: none; }
  .topbar-jobs { order: 2; margin-left: auto; gap: var(--sp-2); min-width: 0; }
  .user-menu { order: 3; }
  .topbar-search { order: 4; height: 44px; }
  .topbar-jobs .btn-l, .job-state { min-height: 40px; padding: 0 var(--sp-3); font-size: var(--fs-s); border-radius: var(--r-s); }
  .topbar-jobs .icon { display: none; }
  /* no room for the run size in the phone's top bar: a run there takes every news waiting, as before */
  .ai-limit { display: none; }
  .avatar { width: 40px; height: 40px; border-radius: var(--r-s); }
  .job-state { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .summary { gap: var(--sp-2); margin-top: var(--sp-3); }
  .stat { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); gap: 2px; }
  .stat-label, .stat-note { font-size: var(--fs-xs); }
  .stat-figure { font-size: 24px; }

  /* long rows of choices scroll sideways inside themselves; the page never does */
  .filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); position: relative; }
  .filters-sep { display: none; }
  .type-toggles, .filter-drops, .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; min-inline-size: 0;
  }
  .filters .type-toggles, .filters .filter-drops { margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
  .type-toggles::-webkit-scrollbar, .filter-drops::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .chip, .fchip, .tab { flex: none; }
  .tabs { width: 100%; }
  /* a drop-down opens across the screen under the filters, not off its right edge */
  .fchip { position: static; }
  .fchip.select { position: relative; }
  .drop-body, .fchip .drop-body { left: 0; right: 0; width: auto; max-width: none; top: auto; margin-top: 6px; }
  .user-menu .menu-body { left: auto; right: 0; width: min(280px, calc(100vw - 2 * var(--gutter))); top: calc(100% + 8px); }

  /* a row: the amount under the text */
  .news-row { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: 14px 16px; }
  .news-amount { width: auto; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--sp-2); }
  .row-title { font-size: 16px; line-height: 21px; }
  .btn-more { flex-basis: 100%; }

  /* the card covers the screen; the work with the lead stays pinned at its bottom */
  .layout.has-card .card-pane { padding: 0 var(--sp-2); }
  /* the way back to the list stays at hand at the top */
  .layout.has-card .card-close {
    position: sticky; top: 0; z-index: 3; margin: 0; width: 100%; justify-content: flex-start;
    border-radius: 0; background: var(--bg); min-height: 48px;
  }
  .card { padding: var(--sp-4); gap: var(--sp-4); }
  .card-title { font-size: 20px; line-height: 26px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .card-status {
    order: 99; position: sticky; bottom: 0; z-index: 2;
    margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    max-height: 70vh; overflow: auto;
    background: var(--surface); border-radius: var(--r-panel) var(--r-panel) 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  }
  .card-actions .btn-xl { min-height: 48px; }
  .card-actions .icon-btn-xl { width: 48px; height: 48px; }
  .toast { bottom: var(--sp-3); }
  .keys-help { display: none; }
}

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