/* Базовая тёмная палитра; theme.css применяет выбор читателя. */
:root {
  color-scheme: dark;
  --color-bg: #14171a;
  --color-surface: #1c2024;
  --color-text: #e8eaed;
  --color-muted: #9aa4af;
  --color-border: #30363d;
  --color-accent: #6ea2ff;
  --color-accent-contrast: #0d1117;
  --color-danger: #ff8a80;
  --color-danger-bg: #3a1f1d;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text); background: var(--color-bg); line-height: 1.55;
}
a { color: var(--color-accent); }
.topbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center; gap: 0.7rem 1rem; padding: 0.65rem 1.25rem;
  background: rgb(28 32 36 / 96%); color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
/* Логотип — как в рабочем месте редактора (решение владельца 24.09.2026):
   прозрачный анимированный знак и текстовый логотип целиком, с впечённым в
   PNG слоганом. Шапка витрины тёмная — фильтры светлой темы не нужны. */
.topbar .brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--color-text); text-decoration: none; }
.brand-mark { display: block; flex: none; width: 2.75rem; height: 2.75rem; }
.brand-text { --brand-word-w: 232px; display: flex; flex-direction: column; min-width: 0; }
.brand-word { display: block; line-height: 0; width: var(--brand-word-w); }
.brand-word img { display: block; width: var(--brand-word-w); height: auto; }
/* Меню — вкладки с подчёркиванием, как на витрине (owner-выбор 2026-08-22). */
.showcase-nav {
  display: flex; align-items: center; justify-self: start; gap: 1rem; min-width: 0; max-width: 100%;
  overflow-x: auto; scrollbar-width: thin;
}
.showcase-nav a {
  border-bottom: 2px solid transparent; padding: 0.38rem 0.06rem 0.44rem;
  color: var(--color-muted); font-size: 0.88rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.showcase-nav a:hover, .showcase-nav a:focus-visible { color: var(--color-text); }
.showcase-nav a[aria-current=page] { color: var(--color-text); border-bottom-color: var(--color-accent); font-weight: 600; }
.topbar .reader { min-width: 0; max-width: 14rem; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--color-muted); }
.logout-form { flex: 0 0 auto; margin: 0; }
.logout-form button {
  background: rgb(255 255 255 / 3%); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 999px;
  padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.82rem;
}
main { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
h1 { font-size: 1.55rem; line-height: 1.25; }
h2 { font-size: 1.15rem; margin-top: 1.6rem; }
h3 { font-size: 0.98rem; margin-bottom: 0.3rem; }
.meta, .provenance, .hint { color: var(--color-muted); font-size: 0.88rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--color-muted); margin-bottom: 0.2rem; }
.badge {
  display: inline-block; background: rgb(110 162 255 / 14%); color: var(--color-accent); border-radius: 999px;
  font-size: 0.75rem; padding: 0.1rem 0.6rem; font-weight: 600;
}
.brief-item { margin: 1.6rem 0; padding: 1.1rem 1.2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.brief-item h2 { margin: 0.2rem 0; }
.brief-item .meta { margin: 0.4rem 0 0; }
.catalogue-lines { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.75rem 0 1.2rem; }
.catalogue-lines a[aria-current=page] { color: var(--color-text); font-weight: 600; }
.catalogue-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 0.7rem; }
.catalogue-filter label { display: grid; gap: 0.25rem; color: var(--color-muted); font-size: 0.85rem; }
.catalogue-filter select, .catalogue-filter input, .catalogue-filter button { min-height: 2.3rem; padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; }
.catalogue-filter button { cursor: pointer; }
.brief-items { list-style: none; padding: 0; }
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-list li { background: rgb(255 255 255 / 7%); border-radius: 999px; padding: 0.1rem 0.65rem; font-size: 0.8rem; }
blockquote { margin: 0.4rem 0; padding: 0.5rem 0.9rem; border-left: 3px solid var(--color-accent); background: rgb(255 255 255 / 4%); font-size: 0.92rem; }
.evidence-list { list-style: none; padding: 0; }
.evidence-list li { margin-bottom: 0.9rem; }
.form-error { background: var(--color-danger-bg); color: var(--color-danger); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.auth-card { max-width: 22rem; margin: 3rem auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; }
.auth-card label { display: block; margin: 0.8rem 0 0.3rem; font-size: 0.9rem; }
.auth-card input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.95rem; background: var(--color-bg); color: var(--color-text); }
/* One shared measure keeps email, password and submit aligned. */
.auth-field-narrow { display: flex; flex-direction: column; align-items: center; margin: 0.8rem 0 0.3rem; font-size: 0.9rem; }
.auth-card label.auth-field-narrow { display: flex; flex-direction: column; align-items: center; }
.auth-field-narrow > input { width: min(100%, 22rem); }
.auth-password-control { display: flex; width: min(100%, 22rem); }
.auth-password-control input { width: 100%; min-width: 0; border-radius: 6px 0 0 6px; }
.auth-card button.password-toggle { display: grid; place-items: center; width: 2.8rem; min-width: 2.8rem; flex: 0 0 2.8rem; margin: 0; padding: 0; border: 1px solid var(--color-border); border-left: 0; border-radius: 0 6px 6px 0; background: var(--color-surface); color: var(--color-muted); }
.auth-card button.password-toggle:hover { color: var(--color-text); background: rgb(255 255 255 / 7%); }
.auth-card button.password-toggle[hidden] { display: none; }
.password-eye { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.password-eye-hide, .password-toggle.is-visible .password-eye-show { display: none; }
.password-toggle.is-visible .password-eye-hide { display: block; }
.auth-card button { margin-top: 1.1rem; width: 100%; padding: 0.55rem; background: var(--color-accent); color: var(--color-accent-contrast); border: none; border-radius: 6px; font-size: 0.95rem; cursor: pointer; font-weight: 600; }
.auth-card button.auth-submit { display: block; width: min(100%, 22rem); margin: 1.1rem auto 0; }
.brief-date-nav { display: flex; gap: 1rem; font-size: 0.9rem; margin-bottom: 0.6rem; }
.empty-state { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem; }
footer.data-age { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 2rem; font-size: 0.85rem; color: var(--color-muted); }
footer.data-age .stale { color: var(--color-danger); font-weight: 600; }
/* Логин — полная тёмная сцена как на заводе: без топбара и карточки,
   фон чернее темы, потому что следует за подложкой #030304 внутри
   утверждённого анимированного знака (ассеты скопированы байт-в-байт
   из web/static/img — см. правило approved-visuals). */
html.auth-page { color-scheme: dark; background: #030304; }
body.auth-page { background: #030304; min-height: 100dvh; display: grid; place-items: center; }
/* main — контекст наложения для звёздного неба (js/starfield.js, правка
   владельца 2026-09-30): canvas внутри на z-index -1 ложится поверх чёрной
   подложки страницы и под форму. Цвет страницы повторён здесь как подложка,
   с которой внутри этого контекста смешивается lighten локапа, — без неё
   чисто-чёрный прямоугольник wordmark виден на #030304. */
body.auth-page main { position: relative; z-index: 0; width: 100%; max-width: 34rem; padding: 1.5rem 1.25rem; background: #030304; }
.auth-starfield { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
/* У утверждённых файлов знака и wordmark непрозрачная тёмная подложка —
   она срезала бы галактики и метеоры ровным квадратом. lighten берёт более
   светлое из картинки и неба: на чёрном локап выглядит как раньше, сами
   файлы не меняются. */
body.auth-page .auth-mark, body.auth-page .auth-wordmark { mix-blend-mode: lighten; }
body.auth-page .auth-card { max-width: 32.5rem; margin: 0 auto; background: none; border: none; padding: 0; }
/* Mark stacked above the wordmark, both centered (owner request
   2026-07-15). Fixed rem sizes (not % of .auth-card) so the mark stays
   enlarged independently of the wordmark; stacking needs no off-card
   centering hack since neither dimension exceeds the card width. */
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; }
.auth-logo picture { display: flex; justify-content: center; max-width: 100%; }
/* The animated SVG's own artwork isn't centered in its viewBox (ring
   drawn around x~576/1000, not 500/1000) -- nudge left so the ring
   itself, not just the <img> box, sits on the centerline. */
.auth-mark { width: min(18.2rem, 100%); height: auto; transform: translateX(-1.38rem); }
.auth-wordmark { width: min(21.45rem, 100%); height: auto; }
/* Radar edition view (same screen as the factory portal's `/`).
   Default (no-JS) flow keeps every detail card visible in order;
   [data-radar-enhanced] is set by the page's inline script and
   switches the layout to master-detail. */
main.main-wide { max-width: 72rem; }
.radar-edition { display: grid; gap: 1rem; }
.radar-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.radar-stat { display: grid; gap: 0.15rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.radar-stat-label { color: var(--color-muted); font-size: 0.85rem; }
.radar-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.radar-stat-sub { color: var(--color-muted); font-size: 0.8rem; }
.radar-brief { border-left: 3px solid var(--color-accent); padding: 0.25rem 0 0.25rem 1rem; }
.radar-brief h2 { margin: 0 0 0.35rem; }
.radar-brief p { margin: 0; max-width: 75ch; font-size: 1.02rem; }
.radar-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.radar-controls label { display: grid; gap: 0.25rem; flex: 1 1 12rem; min-width: 0; color: var(--color-muted); font-size: 0.85rem; }
.radar-controls select { padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; }
.radar-layout { display: grid; gap: 1rem; align-items: start; }
.radar-layout[data-radar-enhanced] { grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.35fr); }
.radar-list, .radar-detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); min-width: 0; }
.radar-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 1rem; border-bottom: 1px solid var(--color-border); }
.radar-list-head h2 { margin: 0; font-size: 1.05rem; }
.radar-count { color: var(--color-muted); font-size: 0.85rem; }
.radar-row { display: grid; gap: 0.45rem; width: 100%; padding: 0.9rem 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; cursor: pointer; }
.radar-rows > .radar-row:last-of-type { border-bottom: 0; }
.radar-row:hover { background: rgb(255 255 255 / 5%); }
.radar-row:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--color-accent); outline-offset: -3px; }
.radar-row[aria-current="true"] { background: var(--color-accent); color: var(--color-accent-contrast); }
.radar-row[aria-current="true"] .badge { background: rgb(13 17 23 / 12%); border-color: rgb(13 17 23 / 28%); color: var(--color-accent-contrast); }
.radar-row-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--color-muted); }
.radar-row[aria-current="true"] .radar-row-kicker, .radar-row[aria-current="true"] .radar-row-sub { color: var(--color-accent-contrast); opacity: 0.8; }
.radar-row-title { font-weight: 600; line-height: 1.3; }
.radar-row-sub { color: var(--color-muted); font-size: 0.8rem; }
.radar-list-empty { margin: 0; padding: 1.25rem 1rem; color: var(--color-muted); }
.radar-details { display: grid; gap: 1rem; min-width: 0; }
.radar-detail-head { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.radar-detail-head h2 { margin: 0.35rem 0 0; line-height: 1.25; }
.radar-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; color: var(--color-muted); font-size: 0.85rem; }
.radar-detail-section { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.radar-detail-section h3 { margin: 0 0 0.35rem; color: var(--color-text); font-size: 1.05rem; letter-spacing: normal; text-transform: none; }
.radar-detail-section p { margin: 0; }
.radar-evidence .radar-evidence-caveat { margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; }
.radar-source-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.radar-detail-section h2 { margin-top: 0; }
.radar-watch-list { margin: 0; padding-left: 1.25rem; }
.radar-watch-list li + li { margin-top: 0.35rem; }
.radar-detail-link { margin: 0; padding: 1rem; font-size: 0.9rem; }
.radar-pattern { padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.radar-pattern-head { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.radar-pattern-label { color: var(--color-muted); font-size: 0.8rem; }
.radar-pattern h2 { margin: 0.2rem 0 0; font-size: 1.25rem; }
.radar-pattern p { margin: 0.55rem 0 0; color: var(--color-muted); }
/* The UA's [hidden]{display:none} is normal-specificity and loses to the
   display:grid/flex rules above -- restate it for everything the radar
   script (or the server-rendered hidden on the filter form) hides. */
.radar-controls[hidden], .radar-row[hidden], .radar-list-empty[hidden], .radar-detail[hidden] { display: none; }
@media (max-width: 720px) {
  .radar-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .radar-stat { gap: 0.1rem; padding: 0.65rem; }
  .radar-stat-label, .radar-stat-sub { font-size: 0.7rem; }
  .radar-stat-value { font-size: clamp(0.9rem, 3.7vw, 1.15rem); }
  .radar-layout[data-radar-enhanced] { grid-template-columns: 1fr; }
  .radar-layout[data-radar-enhanced] .radar-rows > .radar-detail { border-inline: 0; border-inline-start: 3px solid var(--color-accent); border-radius: 0; border-bottom: 3px solid var(--color-accent); box-shadow: 0 0.85rem 0 var(--color-bg); margin-bottom: 0.85rem; }
  .radar-layout[data-radar-enhanced] .radar-rows > .radar-detail .radar-detail-link { border-bottom: 0; }
  .radar-layout[data-radar-enhanced] .radar-rows > .radar-detail + .radar-row { border-top: 1px solid var(--color-border); }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .showcase-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
@media (max-width: 390px) {
  .topbar { gap: 0.6rem; padding-inline: 0.75rem; }
  .brand-mark { width: 2.4rem; height: 2.4rem; }
  .brand-text { --brand-word-w: 12rem; }
  .topbar .reader { display: none; }
  .auth-mark { transform: none; }
}
