@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-variable.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  /*
   * Daylight and dark, from one set of names.
   *
   * Every value the stylesheet paints with is named here — the rules below hold no literals
   * of their own. A name says what a colour is for, never what it looks like, which is what
   * lets `light-dark()` carry both themes on one line and lets the whole portal switch by
   * changing `color-scheme` on the root element and nothing else.
   *
   * Two families exist because of that switch. `--sunken*` is a recessed or hovered surface:
   * darker than the page in daylight, lighter than it in the dark, because depth reads as a
   * step towards the light in both. `--on-dark*` is text sitting on a dark or accent fill —
   * the same as a page surface at noon, its opposite at night, so it cannot share the name.
   */
  color-scheme: light dark;
  --ink: light-dark(#191b23, #f4f4f0);
  --ink-soft: light-dark(#3f4552, #d8d9d4);
  --muted: light-dark(#626875, #aeb2b8);
  --muted-weak: light-dark(#737985, #94989f);
  --on-dark: #fff;
  --on-dark-muted: #b9bbc0;
  --on-dark-line: #464951;
  --line: light-dark(#e2e5ea, #343941);
  --line-strong: light-dark(#c9ced7, #4a5059);
  --paper: light-dark(#ffffff, #131619);
  --paper-raised: light-dark(#fafbfc, #171a1e);
  --sunken: light-dark(#f3f4f6, #1b1f23);
  --sunken-deep: light-dark(#e9ecf0, #22262b);
  --canvas: light-dark(#f7f8fa, #0c0f12);
  --canvas-deep: light-dark(#eef0f4, #090b0d);
  --settings-canvas: light-dark(#fafbfc, #0d1013);
  --settings-surface: light-dark(#fff, #171b20);
  --assistant-surface: light-dark(#fff, #14171a);
  --assistant-stage: light-dark(#fefefe, #171a1e);
  /* The dark article console has five deliberately separate planes. Reusing the generic
     dark cards for all of them flattened the reference's hierarchy: the navigation rail and
     reader became as bright as the material register, while cards disappeared into the
     passport. These names keep the correction local to knowledge instead of shifting every
     dark settings and chat surface along with it. */
  --knowledge-chrome: light-dark(#fafbfc, #0b0e11);
  --knowledge-index: light-dark(#ffffff, #15191e);
  --knowledge-reader: light-dark(#ffffff, #0c0f12);
  --knowledge-passport: light-dark(#fafbfc, #1a1f24);
  --knowledge-card: light-dark(#ffffff, #20262c);
  --knowledge-control: light-dark(#ffffff, #1d2228);
  --knowledge-control-line: light-dark(#dfe3e9, #3a4047);
  --knowledge-placeholder: light-dark(#737985, #afb3ba);
  --knowledge-agent-control: light-dark(#6c55ed, #5a30b1);
  --knowledge-agent-line: light-dark(#ded7fa, #2c254f);
  --knowledge-chrome-texture:
    radial-gradient(ellipse at 22% 8%, light-dark(transparent, #111419), transparent 44%),
    linear-gradient(115deg, light-dark(transparent, #0e1013), light-dark(transparent, #0f1114) 58%, light-dark(transparent, #101216));
  --knowledge-index-texture:
    radial-gradient(ellipse at 56% 14%, light-dark(transparent, #16191d), transparent 42%),
    linear-gradient(145deg, light-dark(transparent, #14171b), light-dark(transparent, #121519));
  --knowledge-reader-texture:
    radial-gradient(ellipse at 54% 48%, light-dark(transparent, #0c0e10), transparent 59%),
    radial-gradient(ellipse at 18% 10%, light-dark(transparent, #111419), transparent 38%);
  --knowledge-passport-texture:
    radial-gradient(ellipse at 62% 16%, light-dark(transparent, #171a1e), transparent 44%),
    linear-gradient(150deg, light-dark(transparent, #15181c), light-dark(transparent, #13171a));

  /*
   * Жёлтый — общий с сайтом продукта.
   *
   * Значение совпадает с действующим сайтом-визиткой (`#ffc321`), чтобы
   * человек, пришедший с сайта по кнопке демо, не увидел два оттенка одного продукта. Прежний
   * `#f3b900` был приглушённее; новый заодно ближе к жёлтому самой 1С, ради которого он и
   * выбирался.
   */
  --accent: #ffc321;
  --accent-bright: light-dark(#ffd15c, #ffd24d);
  --accent-strong: light-dark(#e7ab0d, #e8b420);
  --accent-line: light-dark(#e6c568, #6e5c1f);
  --accent-soft: light-dark(#fff0bb, #3d3413);
  --accent-tint: light-dark(#fff7df, #2f2911);
  --accent-wash: light-dark(#fffcf2, #24200e);
  --accent-ink: light-dark(#725100, #ffd968);
  --accent-ink-soft: light-dark(#8f6800, #c9a94f);
  --selection-accent: light-dark(#fece02, #ffd968);
  --selection-navigation: linear-gradient(90deg, light-dark(#fff4d5, #3d3413), light-dark(#fff6dc, #2f2911));
  --selection-settings: light-dark(#fff0c9, #22262b);
  --selection-overview: light-dark(#fff4d8, #2f2911);
  --selection-knowledge: light-dark(#fff4d8, #22262b);
  --selection-project: light-dark(#fff4d8, #2f2911);
  --selection-user: light-dark(#fff4d8, #2f2911);
  --selection-report: light-dark(#fff4d8, #2f2911);
  --selection-version: light-dark(#fff4d8, #2f2911);
  --selection-article: light-dark(#fff0bb, #2f2a14);
  --selection-outline: light-dark(#725100, #f4f4f0);
  --selection-filter: light-dark(#fff4d8, #2f2911);
  --selection-agent: light-dark(#624cb5, #c3b8ff);
  --selection-agent-background: light-dark(#f1ebfa, #2a2550);
  --selection-agent-control: light-dark(#f4f1fe, #2a2550);
  /*
   * Фиолетовый принадлежит ответам модели, и только им.
   *
   * Это не украшение: цвет отделяет текст, который кто-то написал и проверил, от текста, который
   * составила модель за секунду до показа. Читатель решает, насколько доверять прочитанному, и
   * граница между этими двумя видами материала — самое важное, что интерфейс может ему сказать.
   * Значения сняты с утверждённого макета лендинга, где тем же цветом помечены источники.
   */
  --agent: light-dark(#6c55ed, #9b8cff);
  --agent-fill: light-dark(#6c55ed, #6c55ed);
  --agent-line: light-dark(#ded7fa, #4a4180);
  --agent-soft: light-dark(#f0ebff, #2a2550);
  --agent-wash: light-dark(#fcfaff, #201c3d);
  --agent-ink: light-dark(#6541c6, #c3b8ff);
  --agent-dialog: light-dark(#6c55ed, #9b8cff);
  --agent-dialog-ink: light-dark(#6541c6, #c3b8ff);
  --ai-dialog-paper: light-dark(#fff, #171a1e);
  --nav: light-dark(#222429, #0d0f12);
  --nav-soft: light-dark(#303238, #25292e);
  --success: light-dark(#247a55, #3fa877);
  --success-bright: #62bf91;
  --success-ink: light-dark(#176443, #8fe0b8);
  --success-line: light-dark(#b9d8c7, #2c5a45);
  --success-soft: light-dark(#e2f3ea, #16302a);
  --success-wash: light-dark(#f6fcf8, #14231f);
  --progress: light-dark(#3f67b2, #6b93e0);
  --progress-ink: light-dark(#3e5687, #a9c4f0);
  --progress-line: light-dark(#cad5ef, #2f4064);
  --progress-soft: light-dark(#e7edfb, #1b2233);
  --danger: light-dark(#a43d3d, #d97070);
  --danger-strong: light-dark(#8f3030, #e08a8a);
  --danger-bright: #e07878;
  --danger-ink: light-dark(#7d3535, #f0a8a8);
  --danger-line: light-dark(#d8aaa6, #5c3535);
  --danger-soft: light-dark(#f9e7e5, #331e1e);
  --danger-wash: light-dark(#fffafa, #2a1a1a);
  --bitrix-brand: light-dark(#2fc6f4, #78ddfa);
  /*
   * Type scale. Steps are named for the job they do, not the size they are, so a wrong
   * choice reads as wrong at the call site. Nothing is smaller than 12px: the portal is read
   * all day, often on a laptop at 125% Windows scaling, and the interface around an article
   * used to be half the size of the article itself.
   */
  --text-micro: 12px;
  --text-caption: 13px;
  --text-ui: 14px;
  --text-body: 15px;
  --text-read: 16px;
  --text-title: 19px;
  --text-section: 22px;
  --text-page: 26px;
  --text-reference-page: 28px;
  --text-reference-major: 30px;
  --text-task-title: 32px;
  --text-display: clamp(28px, 3vw, 34px);
  --text-auth-title: 38px;
  --text-hero: clamp(30px, 4vw, 42px);
  --text-reader-title: clamp(30px, 3vw, 40px);
  /* Corner radius: four steps plus a pill. Chips and counters are pills, not rounded boxes. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --mobile-header-height: 52px;
  --mobile-nav-height: 52px;
  --topbar: light-dark(rgb(255 255 255 / 94%), rgb(12 15 18 / 96%));
  --paper-veil: light-dark(rgb(255 255 255 / 50%), rgb(19 22 25 / 55%));
  --backdrop: light-dark(rgb(18 19 22 / 62%), rgb(0 0 0 / 74%));
  --ai-dialog-backdrop: light-dark(rgb(18 19 22 / 48%), rgb(0 0 0 / 74%));
  /* A shadow is how far a surface floats. On a dark page that costs more black to read, so
     only the colour switches — the geometry of each layer is the same in both themes. */
  --shadow-sm:
    0 1px 2px light-dark(rgb(22 24 28 / 5%), rgb(0 0 0 / 44%)),
    0 8px 24px light-dark(rgb(22 24 28 / 3%), rgb(0 0 0 / 26%));
  --shadow-md: 0 10px 32px light-dark(rgb(22 24 28 / 9%), rgb(0 0 0 / 48%));
  --shadow-lg: 0 24px 70px light-dark(rgb(22 24 28 / 12%), rgb(0 0 0 / 62%));
  --focus: light-dark(#755b00, #ffd54a);
  /* One self-hosted family shared with the product website; no OS-dependent reference metrics. */
  --font-ui: "Golos Text", Arial, sans-serif;
  font-synthesis: none;
  font-family: var(--font-ui);
}

/*
 * Following the operating system is the default; these two let a person overrule it. The
 * whole theme hangs off `color-scheme`, so a switch is one attribute on <html> — there is no
 * second set of rules to keep in step, and nothing flashes while stylesheets settle.
 */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Shared geometry in both themes; only reading-plane colors vary. */
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .topbar,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .sidebar {
  background-color: var(--knowledge-chrome);
  background-image: var(--knowledge-chrome-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .search-box {
  border-color: var(--knowledge-control-line);
  background-color: var(--knowledge-passport);
  background-image: var(--knowledge-passport-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .search-box input::placeholder {
  color: var(--knowledge-placeholder);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) #portal-navigation .nav-item.active {
  background-color: var(--sunken-deep);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .theme-toggle[aria-pressed="true"] {
  background-color: var(--knowledge-card);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .knowledge-layout,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .reader-stage,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .reader {
  background-color: var(--knowledge-reader);
  background-image: var(--knowledge-reader-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .knowledge-index,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .knowledge-index-tools {
  background-color: var(--knowledge-index);
  background-image: var(--knowledge-index-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-provenance {
  background-color: var(--knowledge-passport);
  background-image: var(--knowledge-passport-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .provenance-fact,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .provenance-section,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .provenance-trust {
  background-color: var(--knowledge-card);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-ai-console {
  border-color: var(--knowledge-agent-line);
  background-color: var(--knowledge-passport);
  background-image: var(--knowledge-passport-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-ai-console input,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-ai-console-prompts button {
  border-color: var(--knowledge-control-line);
  background-color: var(--knowledge-control);
  background-image: var(--knowledge-passport-texture);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-ai-console-mark,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-ai-console form > button {
  background-color: var(--knowledge-agent-control);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .favorite-action,
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-actions-menu > summary {
  border-color: var(--line-strong);
  background-color: var(--knowledge-reader);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-author {
  color: var(--accent-ink);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .provenance-heading button {
  border-color: transparent;
  background: transparent;
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-item.selected {
  background-color: var(--selection-article);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) .article-outline-link[aria-current="location"] {
  background-color: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent);
}
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"])
  .provenance-layer[data-layer="object"][data-layer-state="ready"] .provenance-layer-icon {
  color: var(--nav);
  background-color: var(--accent);
}



* { box-sizing: border-box; }
html { min-width: 320px; max-width: 100%; overflow-x: hidden; background: var(--canvas); }
/* Native modal state owns the lock, including Escape, successful submit and stacked dialogs. */
html:has(dialog:modal), body:has(dialog:modal) { overflow: hidden; }
body { min-height: 100vh; max-width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--canvas); font-size: var(--text-body); }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
/* `wait` says the button is busy. Most disabled buttons here are not busy — they are waiting
   for a selection or a filled field, and the pointer should say unavailable, not in progress. */
button:disabled { cursor: not-allowed; opacity: .5; }
code, kbd { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.ui-icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spin { animation: icon-spin .85s linear infinite; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; inset-block-start: 10px; inset-inline-start: 10px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--on-dark); background: var(--nav); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.topbar {
  height: 72px;
  padding-inline: 16px;
  display: grid;
  grid-template-columns: 260px minmax(380px, 660px) minmax(190px, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: var(--topbar);
  border-bottom: 1px solid var(--line);
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}
body:has(.account-menu[open]) .topbar { z-index: 80; }
/* In the knowledge console the global rail collapses to 72px and the register starts right
   after it; the search field lines up with that same axis instead of a brand column sized for
   the wordmark, so it shares a left edge with the article beneath it rather than floating to
   its left. Scoped to where that rail is actually collapsed (see the matching rule at 901px) so
   narrower breakpoints keep their own topbar treatment untouched. */
@media (min-width: 901px) {
  body:has(.workspace[data-active-view="knowledge"]) .topbar {
    grid-template-columns: minmax(160px, 352px) minmax(380px, 670px) minmax(190px, 1fr) auto;
  }
}
.brand { min-width: 0; max-width: 100%; color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: var(--radius-md); background: var(--accent); box-shadow: inset 0 -1px rgb(90 67 0 / 15%); color: var(--nav); }
.brand-mark .ui-icon { width: 23px; height: 23px; stroke-width: 1.9; }
.brand-mark.large { width: 58px; height: 58px; margin-block-end: 22px; border-radius: var(--radius-lg); font-size: var(--text-section); }
.brand-copy { min-width: 0; }
/* The tagline is the first thing to give way when the rail narrows: it identifies the portal
   but nobody navigates by it, so it truncates rather than pushing into the search field. */
.brand-copy strong, .brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { font-size: var(--text-title); letter-spacing: -.02em; }
.brand-copy small { margin-block-start: 1px; color: var(--muted); font-size: var(--text-micro); }
.search-area { min-width: 0; position: relative; }
.global-search-results { width: min(560px, calc(100vw - 32px)); max-height: min(520px, calc(100dvh - 112px)); padding: 8px; position: absolute; z-index: 70; inset: calc(100% + 8px) 0 auto auto; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-lg); }
.global-search-results-status { margin: 2px 8px 6px; color: var(--muted); font-size: var(--text-caption); }
.global-search-results-list { display: grid; gap: 2px; }
.global-search-result { min-height: 52px; }
.global-search-result:focus-visible { outline: 2px solid var(--selection-outline); outline-offset: -2px; }
.global-search-results-empty { margin: 12px 8px; color: var(--muted); font-size: var(--text-ui); }
@media (min-width: 1440px) {
  .global-search-results { width: 100%; position: static; max-height: 480px; margin-block-start: 8px; }
}
.search-box { height: 46px; margin: 0; padding: 4px 4px 4px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.search-box:focus-within { background: var(--paper); border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box input { min-width: 0; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); outline: none; box-shadow: none; }
.search-box input:focus-visible { border: 0; outline: none; box-shadow: none; }
.search-box input::placeholder { color: var(--muted-weak); }
.search-actions { display: flex; align-items: center; gap: 3px; }
.search-leading-icon { width: 19px; height: 19px; color: var(--ink-soft); }
.search-area.has-query .search-leading-icon { visibility: hidden; }
.search-action { width: 36px; height: 36px; padding: 8px; border: 0; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.search-action:hover:not(:disabled) { color: var(--ink); background: var(--paper); }
.search-action.ai { color: var(--agent-ink); }
.search-action.ai:hover:not(:disabled) { background: var(--agent-soft); }
.search-action:disabled { display: none; }
.search-action .ui-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-action.ai .ui-icon { fill: none; stroke-width: 1.7; }
.global-tools { min-width: 0; display: flex; align-items: center; justify-content: end; gap: 4px; }
.global-tool { width: 38px; height: 38px; padding: 0; position: relative; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink-soft); background: transparent; cursor: pointer; }
.global-tool:hover { border-color: var(--line); background: var(--paper-raised); }
.theme-toggle[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.global-tool .ui-icon { width: 19px; height: 19px; }
.notification-menu { position: relative; }
.notification-count { min-width: 19px; height: 19px; padding-inline: 4px; position: absolute; inset: -1px -5px auto auto; border: 2px solid var(--topbar); border-radius: var(--radius-pill); display: grid; place-items: center; color: var(--nav); background: var(--accent); font-size: var(--text-micro); font-weight: 800; line-height: 1; }
.notification-panel { width: min(520px, calc(100vw - 24px)); padding: 0; position: absolute; z-index: 80; inset: calc(100% + 10px) 0 auto auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-lg); }
.notification-heading { min-height: 60px; padding: 12px 18px; border-block-end: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-heading h2 { margin: 0; font-size: var(--text-title); }
.notification-heading span { color: var(--accent-ink); font-size: var(--text-micro); font-weight: 800; }
.notification-list { max-height: min(480px, calc(100dvh - 120px)); overflow-y: auto; overscroll-behavior: contain; }
.notification-list > .empty-inline { margin: 0; padding: 30px 18px; text-align: center; }
.notification-row { width: 100%; min-height: 80px; padding: 12px 18px; border: 0; border-block-end: 1px solid var(--line); display: grid; grid-template-columns: 40px minmax(0, 1fr) 8px; gap: 13px; align-items: center; color: var(--ink); background: var(--paper); cursor: pointer; text-align: start; }
.notification-row:last-child { border-block-end: 0; }
.notification-row, .notification-row:hover { text-decoration: none; }
.notification-row:focus-visible { outline: 2px solid var(--selection-outline); outline-offset: -3px; }
.notification-row:hover { background: var(--sunken); }
.notification-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.notification-row.agent .notification-icon { border-radius: 50%; color: var(--agent-ink); background: var(--agent-soft); }
.notification-icon .ui-icon { width: 20px; height: 20px; }
.notification-copy { min-width: 0; display: grid; gap: 3px; }
.notification-copy strong, .notification-copy small { overflow-wrap: anywhere; white-space: normal; }
.notification-copy strong { font-size: var(--text-caption); }
.notification-copy small { color: var(--muted); font-size: var(--text-micro); }
.notification-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notification-row.agent .notification-unread { background: var(--agent-ink); }
.team-account { min-width: 0; display: flex; align-items: center; justify-content: end; gap: 8px; }
kbd { padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--paper); color: var(--muted); font-size: var(--text-micro); box-shadow: 0 1px 0 var(--line-strong); white-space: nowrap; }
.account { min-width: 0; position: relative; justify-self: end; }
.account-menu { position: relative; }
.account-menu[open] { z-index: 70; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu-backdrop { position: fixed; inset: 0; z-index: 55; background: var(--backdrop); }
.account-trigger { min-height: 44px; max-width: 220px; padding: 4px 7px 4px 4px; position: relative; z-index: 56; border: 1px solid transparent; border-radius: var(--radius-md); display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.account-trigger:hover, .account-menu[open] .account-trigger { border-color: var(--line); background: var(--sunken); }
.account-menu[open] .account-trigger { border-color: transparent; background: transparent; }
.account-trigger-copy { min-width: 0; }
.account-trigger-copy strong { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-ui); }
.account-chevron { width: 17px; height: 17px; margin-inline-start: auto; color: var(--muted); transform: rotate(90deg); transition: transform 150ms ease; }
.account-menu[open] .account-chevron { transform: rotate(-90deg); }
.account-dropdown { width: min(440px, calc(100vw - 24px)); min-height: 0; padding: 20px; position: absolute; inset-block-start: calc(100% + 48px); inset-inline-end: 77px; z-index: 60; border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; background: var(--settings-surface); box-shadow: var(--shadow-md); }
.account-profile { margin-block-end: 8px; padding: 8px 9px 18px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.avatar.account-profile-avatar { width: 96px; height: 96px; font-size: var(--text-page); }
.account-profile-copy { min-width: 0; }
.account-profile strong, .account-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-profile strong { font-size: var(--text-page); }
.account-profile small { margin-block-start: 5px; color: var(--muted); font-size: var(--text-title); }
.account-action { width: 100%; min-height: 64px; padding: 12px 14px; border: 0; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 14px; color: var(--ink-soft); background: transparent; cursor: pointer; text-align: start; font-size: var(--text-title); font-weight: 700; }
.account-action .ui-icon { width: 28px; height: 28px; }
.account-dropdown .account-action .ui-icon { width: 32px; height: 32px; }
.account-action:hover { color: var(--ink); background: var(--sunken); }
.account-theme-action { display: none; }
.account-action.logout { min-height: 80px; margin-block-start: auto; padding-block-start: 20px; border-block-start: 1px solid var(--line); border-radius: 0; color: var(--danger-ink); }
.avatar { width: 35px; height: 35px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--nav); font-weight: 700; }
.avatar img, .avatar-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }

.app-shell {
  --sidebar-rail-width: 246px;
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  background: var(--canvas);
  transition: grid-template-columns 180ms ease;
}
.sidebar { min-height: calc(100vh - 72px); display: flex; flex-direction: column; position: sticky; inset-block-start: 72px; height: calc(100vh - 72px); background: var(--paper-raised); border-inline-end: 1px solid var(--line); }
.sidebar-toggle { width: 36px; height: 36px; margin: auto 12px 16px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: var(--paper); box-shadow: var(--shadow-sm); cursor: pointer; }
.sidebar-toggle:hover { color: var(--ink); background: var(--paper); }
.sidebar-toggle .ui-icon { transform: rotate(180deg); transition: transform 180ms ease; }
.workspace-identity { margin: 20px 15px 12px; padding: 11px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); background: var(--paper); }
.workspace-monogram { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--sunken); color: var(--muted); font: 800 10px "Cascadia Mono", monospace; }
.workspace-identity strong, .workspace-identity small { display: block; }
.workspace-identity strong { font-size: var(--text-ui); }
.workspace-identity small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-micro); }
.section-nav { padding: 4px 12px; }
.nav-item { width: 100%; min-height: 42px; margin-block: 3px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); display: grid; grid-template-columns: 25px 1fr auto; gap: 7px; align-items: center; background: transparent; color: var(--muted); cursor: pointer; text-align: start; font-weight: 600; font-size: var(--text-ui); }
.nav-item:hover { color: var(--ink); background: var(--sunken-deep); }
.nav-item.active { color: var(--ink); background: var(--accent-soft); box-shadow: none; font-weight: 700; }
#portal-navigation .nav-item[data-view="overview"].active { background: var(--selection-overview); }
#portal-navigation .nav-item[data-view="knowledge"].active { background: var(--selection-knowledge); }
#portal-navigation .nav-item[data-view="settings"].active { background: var(--selection-settings); }
#portal-navigation .nav-item[data-view="assistant"].active {
  color: var(--selection-agent);
  background: var(--selection-agent-background);
}
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; color: currentColor; font-size: var(--text-read); }
.nav-count { min-width: 24px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--sunken-deep); color: var(--muted); font-size: var(--text-micro); text-align: center; }
.nav-item.active .nav-count { color: var(--ink); background: var(--accent); }
.nav-alert { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); background: var(--danger); font-size: var(--text-micro); }
.nav-submenu { max-height: min(240px, 30vh); margin: 0 4px 10px 38px; padding-inline-end: 3px; display: grid; gap: 2px; overflow: auto; scrollbar-width: thin; }
.nav-subitem { width: 100%; min-height: 30px; padding: 5px 7px; border: 0; border-radius: var(--radius-xs); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; color: var(--muted); background: transparent; cursor: pointer; font-size: var(--text-micro); text-align: start; }
.nav-subitem:hover { color: var(--ink); background: var(--sunken-deep); }
.nav-subitem.active { color: var(--accent-ink); background: var(--accent-soft); font-weight: 700; }
.nav-subitem span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-subcount { min-width: 20px; color: var(--muted-weak); font-size: var(--text-micro); text-align: end; }
.assistant-agent-menu { min-height: 0; display: grid; gap: 7px; }
.assistant-agent-item { width: 100%; min-height: 62px; padding: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--ink); background: transparent; cursor: pointer; text-align: start; }
.assistant-agent-item:hover { border-color: var(--line); background: var(--paper-raised); }
.assistant-agent-item.active { border-color: transparent; color: var(--agent-ink); background: var(--agent-soft); }
.assistant-agent-item.unavailable { opacity: .62; cursor: not-allowed; }
.assistant-agent-nav-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--agent-ink); background: var(--agent-soft); }
.assistant-agent-item:nth-child(2) .assistant-agent-nav-icon { color: var(--success-ink); background: var(--success-soft); }
.assistant-agent-item:nth-child(3) .assistant-agent-nav-icon { color: var(--progress-ink); background: var(--progress-soft); }
.assistant-agent-nav-icon .ui-icon { width: 22px; height: 22px; }
.assistant-agent-nav-copy { min-width: 0; display: grid; gap: 4px; }
.assistant-agent-nav-copy strong, .assistant-agent-nav-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-agent-nav-copy strong { font-size: var(--text-caption); }
.assistant-agent-nav-copy small { color: var(--muted); font-size: var(--text-micro); font-weight: 600; }
.assistant-agent-status::before { content: ""; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; display: inline-block; background: var(--success); }
.assistant-agent-item.unavailable .assistant-agent-status::before { background: var(--muted); }
/*
 * Нижняя навигация телефона. Те же разделы, что в рейке, и тот же класс `nav-item` — поэтому
 * состояние «активен» и правила доступа считаются один раз. Прячется на всех широких ширинах.
 */
.bottom-nav { display: none; height: var(--mobile-nav-height); padding: 3px 8px calc(3px + env(safe-area-inset-bottom, 0px)); position: fixed; z-index: 30; inset: auto 0 0; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; border-block-start: 1px solid var(--line); background: var(--paper); }
.bottom-nav .nav-item { width: 100%; min-height: 46px; margin: 0; padding: 3px 2px; grid-template-columns: minmax(0, 1fr); gap: 1px; justify-items: center; background: transparent; font-size: var(--text-micro); font-weight: 700; text-align: center; }
.bottom-nav .nav-item > span:not(.nav-icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav .nav-item.active { color: var(--accent-ink); background: transparent; }
.bottom-nav .nav-item.active .nav-icon { color: var(--accent-ink); }
/* «Спросить» приподнят и фиолетовый: это единственный вход к модели, и он обозначен её цветом. */
.bottom-nav-ask .nav-icon { width: 40px; height: 40px; margin-block-start: -14px; border-radius: 50%; color: var(--on-dark); background: var(--agent-fill); box-shadow: var(--shadow-md); }
.bottom-nav-ask.nav-item.active { color: var(--selection-agent); }
.bottom-nav-ask.nav-item.active .nav-icon {
  width: 28px;
  height: 28px;
  margin-block-start: 0;
  border-radius: 0;
  color: var(--selection-agent);
  background: transparent;
  box-shadow: none;
}
.article-ask-launcher {
  position: fixed;
  z-index: 28;
  inset: auto 24px 24px auto;
  display: grid;
  justify-items: end;
  gap: 10px;
}
.article-ask-launcher[hidden] { display: none; }
body:has(.toast.visible) .article-ask-launcher { inset-block-end: 88px; }
.article-ask-button {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--agent) 72%, var(--ink));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-dark);
  background: var(--agent);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.article-ask-button .ui-icon { width: 25px; height: 25px; }
.article-ask-button:hover { background: color-mix(in srgb, var(--agent) 88%, black); box-shadow: 0 12px 30px color-mix(in srgb, var(--agent) 28%, transparent); transform: translateY(-2px); }
.article-ask-button:active { transform: translateY(0) scale(.96); }
.article-ask-button:focus-visible { outline: 3px solid var(--paper); box-shadow: 0 0 0 5px var(--agent), var(--shadow-lg); }
.article-ask-bubble {
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 13px;
  border: 1px solid var(--agent-line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transform-origin: bottom right;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.article-ask-bubble.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1180px) {
  .knowledge-layout .article-ask-launcher { inset-inline-end: calc(var(--provenance-width) + 24px); }
}
@media (max-width: 767px) {
  .article-ask-launcher { inset: auto 16px calc(var(--mobile-nav-height) + 14px + env(safe-area-inset-bottom, 0px)) auto; }
  body:has(.toast.visible) .article-ask-launcher { inset-block-end: calc(var(--mobile-nav-height) + 82px + env(safe-area-inset-bottom, 0px)); }
  .article-ask-button { width: 52px; height: 52px; }
  .article-ask-bubble { max-width: min(260px, calc(100vw - 32px)); font-size: var(--text-micro); }
}
@media (prefers-reduced-motion: reduce) {
  .article-ask-button, .article-ask-bubble { transition-duration: 0.01ms; }
  .article-ask-button:hover, .article-ask-button:active { transform: none; }
}
.search-open { display: none; }
.workspace { min-width: 0; padding: 46px clamp(26px, 4.5vw, 72px) 80px; }
.workspace[data-active-view="knowledge"] { height: calc(100vh - 72px); padding: 0; overflow: hidden; }
.view { width: min(1180px, 100%); margin-inline: auto; }
#knowledge-view { width: 100%; max-width: none; }
#knowledge-view:not([hidden]) { height: 100%; display: flex; flex-direction: column; }
/* `backwards`, не `both`: заполнение вперёд оставляет вычисленный transform (пусть и единичной
   матрицей) навсегда, а любой transform делает экран containing block — и выдвижные панели с
   `position: fixed` начинают считать координаты от него, а не от окна. */
.active-view { animation: view-in 260ms ease-out backwards; }
.context-label { color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.page-heading { margin-block-end: 22px; display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.page-heading h1 { margin: 4px 0 0; font-size: var(--text-display); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.page-heading > p { max-width: 470px; margin: 0; color: var(--muted); line-height: 1.6; }
.page-heading > div > p { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.section-block { margin-block-start: 44px; }
.section-heading { margin-block-end: 14px; display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.section-heading.compact { align-items: start; }
.section-heading h2 { margin: 4px 0 0; font-size: var(--text-section); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.section-heading p { max-width: 74ch; margin: 0; color: var(--muted); line-height: 1.5; }

/*
 * The skeleton every page under Settings is built from.
 *
 * They used to disagree on all three counts: section headings were 19px on one page and 22px
 * on the rest, the gap between sections was 18, 24 or 28px depending on the page, and the
 * surface under the content was a bordered box, a shadowed box, or nothing at all with
 * hairlines standing in for it. One heading, one rhythm, one surface.
 */
.settings-section + .settings-section { margin-block-start: 30px; }
.settings-panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; }
.settings-panel.rows { overflow: hidden; }
.settings-panel.padded { padding: clamp(18px, 2.2vw, 24px); }

.button { min-height: 44px; padding: 9px 15px; border: 1px solid transparent; border-radius: var(--radius-sm); display: inline-flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-ui); font-weight: 700; }
/* Sending a question to the model is the model's own action, so `.button.agent` carries the
   trust boundary instead of the register's knowledge-yellow — the same purple the article's AI
   console already uses for its send control. */
.button.primary { color: var(--nav); background: var(--accent); box-shadow: none; }
.button.primary:hover { background: var(--accent-bright); }
.button.agent { color: var(--on-dark); background: var(--agent-fill); box-shadow: none; }
.button.agent:hover { background: var(--agent-ink); }
.button.secondary { background: var(--paper); border-color: var(--line-strong); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
.button.secondary:hover { background: var(--sunken); }
.button.dark { color: var(--on-dark); background: var(--nav); }
.button.dark:hover { background: var(--nav-soft); }
.button.danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-wash); }
.button.danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.button.danger.solid { color: var(--on-dark); border-color: var(--danger); background: var(--danger); box-shadow: 0 3px 10px rgb(164 61 61 / 18%); }
.button.danger.solid:hover:not(:disabled) { background: var(--danger-strong); }
.button.text { min-height: 35px; padding-inline: 8px; color: var(--muted); background: transparent; }
.button.full { width: 100%; }
.text-link { min-height: 34px; padding: 4px 0; border: 0; background: transparent; color: var(--accent-ink); cursor: pointer; font-weight: 700; font-size: var(--text-caption); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; }
.text-link:hover { color: var(--ink); }
.button:active:not(:disabled), .text-link:active:not(:disabled), .nav-item:active:not(:disabled), .recent-row:active:not(:disabled) { scale: .96; }

/* The overview is a work register: one continuous plane, with panels only where a complete task
   needs a boundary. Its active location is already present in the global navigation. */
.workspace[data-active-view="overview"] { padding: 0; background: var(--settings-canvas); }
#overview-view { width: 100%; max-width: none; min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 1fr); }
.portal-data-status {
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 24px;
  border-block-end: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--text-caption);
}
.portal-data-status:not([hidden]) { display: flex; }
.portal-data-status .text-link { margin-inline-start: auto; }
.overview-dashboard { min-width: 0; padding: 41px 60px 54px 41px; background: var(--settings-canvas); }
.overview-greeting { margin-block-end: 30px; padding-inline: 18px; }
.overview-greeting h1 { margin: 0; font-size: var(--text-display); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.overview-greeting p { margin: 10px 0 0; color: var(--muted); font-size: var(--text-read); }
.overview-top-grid { display: grid; grid-template-columns: minmax(0, 1.78fr) minmax(360px, 1fr); gap: 26px; align-items: start; }
.overview-main-column, .overview-side-column { min-width: 0; display: grid; gap: 22px; }
.overview-panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--settings-surface); }
.overview-panel > h2, .overview-panel > .section-heading h2 { margin: 0; font-size: var(--text-title); line-height: 1.2; letter-spacing: -.02em; }
.overview-continue { min-height: 205px; padding: 24px 20px; }
.overview-readiness { min-height: 350px; padding: 24px 20px; }
.overview-lead { width: 100%; min-height: 112px; margin-block-start: 11px; padding: 0; border: 0; display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 22px; align-items: center; background: transparent; cursor: pointer; text-align: start; }
.overview-lead:hover .overview-lead-title { color: var(--accent-ink); }
.overview-lead-marker { width: 86px; height: 86px; border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--ink); background: var(--accent-wash); }
.overview-lead-marker .ui-icon { width: 46px; height: 46px; stroke-width: 1.65; }
.overview-lead-copy { min-width: 0; display: grid; gap: 7px; }
.overview-lead-title { overflow: hidden; color: var(--ink); font-size: var(--text-title); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.overview-lead-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-ui); }
.overview-lead-reason { font-size: var(--text-caption); }
.overview-lead-excerpt { max-width: 54ch; overflow: hidden; color: var(--muted); font-size: var(--text-caption); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.overview-lead-open { min-height: 48px; padding: 11px 16px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 7px; color: var(--nav); background: var(--accent); font-size: var(--text-ui); font-weight: 800; white-space: nowrap; }
.overview-lead:hover .overview-lead-open { background: var(--accent-bright); }
.overview-lead-open .ui-icon { width: 17px; height: 17px; }
.overview-inline-empty { min-height: 120px; margin-block-start: 14px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.overview-readiness > h2 { min-height: 31px; display: flex; align-items: center; gap: 13px; }
.overview-ready-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); background: var(--success); }
.overview-ready-mark .ui-icon { width: 18px; height: 18px; }
#overview-readiness-title[data-ready="false"] .overview-ready-mark { color: var(--accent-ink); background: var(--accent-soft); }
.overview-readiness-facts { margin: 17px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.overview-readiness-facts li { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; }
.overview-fact-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--ink); background: var(--accent-wash); }
.overview-fact-icon.ai { color: var(--agent-ink); background: var(--agent-soft); }
.overview-fact-icon .ui-icon { width: 26px; height: 26px; }
.overview-readiness-facts strong, .overview-readiness-facts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-readiness-facts strong { font-size: var(--text-ui); }
.overview-readiness-facts small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-caption); }
.overview-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.overview-stat { min-width: 0; min-height: 122px; padding: 18px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); background: var(--settings-surface); cursor: pointer; text-align: start; }
.overview-stat:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-wash); }
.overview-stat:disabled { opacity: 1; cursor: default; }
.overview-stat-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--ink); background: var(--accent-wash); }
.overview-stat.process .overview-stat-icon { color: var(--success-ink); background: var(--success-soft); }
.overview-stat.object .overview-stat-icon { color: var(--progress-ink); background: var(--progress-soft); }
.overview-stat-icon .ui-icon { width: 27px; height: 27px; }
.overview-stat strong { display: block; font-size: var(--text-display); line-height: 1; font-variant-numeric: tabular-nums; }
.overview-stat small { margin-block-start: 4px; display: block; color: var(--ink); font-size: var(--text-caption); font-weight: 700; }
.overview-stat em { margin-block-start: 9px; display: block; overflow: hidden; color: var(--muted); font-size: var(--text-micro); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.kind-icon { width: 22px; height: 22px; flex: 0 0 auto; border-radius: var(--radius-xs); display: inline-grid; place-items: center; font-style: normal; font-size: var(--text-ui); font-weight: 800; }
.kind-icon.process { color: var(--success-ink); background: var(--success-soft); }
.kind-icon.object { color: var(--accent-ink); background: var(--accent-soft); }
.kind-icon.its { color: var(--accent-ink); background: var(--accent-line); }
.overview-recent { min-height: 344px; padding: 21px 17px 17px; }
.overview-recent > .section-heading { margin-block-end: 14px; }
.recent-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); }
.recent-row { width: 100%; min-height: 53px; padding: 8px 11px; border: 0; border-block-end: 1px solid var(--line); display: grid; grid-template-columns: 34px minmax(160px, 1fr) auto minmax(148px, auto) 20px; gap: 10px; align-items: center; background: var(--paper); cursor: pointer; text-align: start; }
.recent-row:last-child { border-block-end: 0; }
.recent-row:hover { background: var(--paper-raised); }
.recent-copy { min-width: 0; }
.recent-copy strong, .recent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-copy strong { font-size: var(--text-ui); }
.recent-copy small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
/* Left over from a card layout this list no longer uses: absolute placement with no positioned
   ancestor stacked all four chevrons in one corner of the page instead of one per row. */
.recent-kind { padding: 3px 8px; border-radius: var(--radius-xs); color: var(--accent-ink); background: var(--accent-soft); font-size: var(--text-micro); white-space: nowrap; }
.recent-kind.process { color: var(--success-ink); background: var(--success-soft); }
.recent-updated { color: var(--muted); font-size: var(--text-micro); white-space: nowrap; }
.recent-arrow { width: 17px; height: 17px; color: var(--muted); }
.overview-all-link { margin: 14px auto 0; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.overview-actions { min-height: 344px; padding: 21px 17px; }
.overview-action-list { margin-block-start: 20px; display: grid; gap: 13px; }
.overview-action { width: 100%; min-height: 77px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 13px; align-items: center; color: var(--ink); background: var(--paper); cursor: pointer; text-align: start; }
.overview-action:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.overview-action-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-wash); }
.overview-action.ai .overview-action-icon { color: var(--agent-ink); background: var(--agent-soft); }
.overview-action-icon .ui-icon { width: 25px; height: 25px; }
.overview-action strong, .overview-action small { display: block; }
.overview-action strong { font-size: var(--text-ui); }
.overview-action small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
.overview-action-arrow { color: var(--muted); }
.overview-empty { grid-column: 1 / -1; min-height: 150px; padding: 28px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--paper-veil); }
.overview-empty p { margin: 5px 0 8px; color: var(--muted); }

/*
 * The quick start is a page under Settings and looks like one.
 *
 * It used to open with a near-black slab under a heavy shadow — the only surface of its kind
 * in the portal, which made the first screen a new administrator sees the one screen that
 * matched nothing else.
 */
.setup-progress-card { max-width: 820px; margin-block-end: 30px; display: grid; gap: 8px; }
.setup-progress-meta { display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--muted); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.setup-progress-meta span { width: max-content; padding: 6px 11px; border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--accent-soft); font-weight: 800; }
.setup-progress-meta strong { font-size: var(--text-caption); }
.setup-progress-card progress, .upload-progress progress { width: 100%; height: 10px; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--sunken-deep); accent-color: var(--accent); }
.setup-progress-card progress::-webkit-progress-bar, .upload-progress progress::-webkit-progress-bar { background: var(--sunken-deep); border-radius: var(--radius-pill); }
.setup-progress-card progress::-webkit-progress-value, .upload-progress progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.quickstart-workspace { display: grid; grid-template-columns: minmax(0, 820px) 294px; gap: 30px; align-items: start; }
.setup-grid { margin: 0; padding: 0; position: relative; display: grid; gap: 14px; list-style: none; }
.setup-grid::before { content: ''; width: 2px; position: absolute; inset: 28px auto 28px 20px; background: var(--line); }
.setup-card { min-height: 100px; margin-inline-start: 56px; padding: 18px 20px; position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 17px; align-items: center; background: var(--paper); }
.setup-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.setup-card.done .setup-status { color: var(--success); }
.setup-number { width: 40px; height: 40px; position: absolute; z-index: 1; inset: 28px auto auto -57px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--paper); font-weight: 800; }
.setup-card.current .setup-number { border-color: var(--accent); color: var(--ink); }
.setup-card.done .setup-number { border-color: var(--success-line); color: var(--success-ink); background: var(--success-soft); }
.setup-card.done .setup-number::before { content: "✓"; }
.setup-card.done .setup-number { font-size: 0; }
.setup-card.done .setup-number::before { font-size: var(--text-title); }
.setup-card h2 { margin: 0 0 5px; font-size: var(--text-title); }
.setup-card p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.45; }
.setup-status { display: block; margin-block-start: 8px; color: var(--accent-ink); font-size: var(--text-micro); font-weight: 800; }
.setup-card > .button { width: 176px; justify-content: center; }
.setup-card-actions { width: 176px; display: grid; gap: 8px; }
.setup-card-actions > .button { width: 100%; justify-content: center; }
.setup-next { padding: 25px 27px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.setup-next h2 { margin: 0 0 18px; font-size: var(--text-title); }
.setup-next > button { width: 100%; min-height: 76px; padding: 10px 0; border: 0; border-block-start: 1px solid var(--line); display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 10px; align-items: center; color: var(--ink); background: transparent; cursor: pointer; text-align: start; }
.setup-next > button:first-of-type { border-block-start: 0; }
.setup-next > button:hover { color: var(--accent-ink); }
.setup-next > button > .ui-icon { width: 24px; height: 24px; }
.setup-next > button > .ui-icon.ai { color: var(--agent-ink); }
.setup-next > button > .ui-icon:last-child { width: 16px; height: 16px; color: var(--muted); }
.setup-next strong, .setup-next small { display: block; }
.setup-next strong { font-size: var(--text-caption); }
.setup-next small { margin-block-start: 4px; color: var(--muted); font-size: var(--text-micro); line-height: 1.4; }

.settings-subnav { min-width: 0; padding: 34px 10px 28px; align-self: stretch; border-inline-end: 1px solid var(--line); background: var(--paper); }
.settings-subnav-home { width: 100%; min-height: 44px; margin-block-end: 12px; padding: 8px 23px; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: var(--text-caption); font-weight: 800; text-align: start; text-transform: uppercase; }
.settings-subnav nav { display: grid; gap: 4px; }
.settings-subnav-item { width: 100%; min-height: 52px; padding: 9px 22px; border: 0; border-radius: var(--radius-xs); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; align-items: center; color: var(--ink-soft); background: transparent; cursor: pointer; font: inherit; text-align: start; }
.settings-subnav-item:hover { background: var(--paper-raised); }
.settings-subnav-item.active { box-shadow: inset 4px 0 0 var(--selection-accent); color: var(--ink); background: var(--selection-navigation); font-weight: 400; }
.settings-subnav-item .ui-icon { width: 23px; height: 23px; }
.settings-subnav-item[data-settings-nav-link^="ai-"] .ui-icon { color: var(--agent-ink); }
.settings-subnav-separator { height: 1px; margin: 9px 12px; background: var(--line); }
@media (min-width: 1180px) {
  .settings-subnav-item > span { white-space: nowrap; }
}
.workspace:has(> .settings-destination.active-view) { padding: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: stretch; background: var(--settings-canvas); }
.workspace:has(> .settings-destination.active-view) > .settings-destination { width: 100%; max-width: none; margin: 0; padding: 34px 40px 52px; }

#settings-view { width: min(1424px, 100%); }
.settings-heading { margin-block-end: 36px; align-items: start; flex-direction: column; gap: 8px; }
.settings-heading > p { max-width: none; font-size: var(--text-body); }
.settings-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; }
.settings-group { min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.settings-group:nth-child(1), .settings-group:nth-child(3) { grid-column: span 1; }
.settings-group:nth-child(2), .settings-group:nth-child(5) { grid-column: span 2; }
.settings-group-ai { grid-column: 1 / -1; }
.settings-group:not(:has(.settings-item:not([hidden]))) { display: none; }
.settings-group h2 { margin: 0; padding-block-end: 10px; border-block-end: 1px solid var(--line); font-size: var(--text-body); }
.settings-group-ai h2 { color: var(--agent-ink); }
.settings-grid { min-width: 0; display: grid; gap: 16px; }
.settings-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-item { width: 100%; min-height: 167px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 19px; align-items: start; color: var(--ink); background: var(--settings-surface); cursor: pointer; text-align: start; box-shadow: none; }
.settings-item:hover, .settings-item:focus-visible { border-color: var(--line-strong); background: var(--paper-raised); }
.settings-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.settings-item-copy { min-width: 0; min-height: 129px; display: flex; flex-direction: column; align-items: flex-start; }
.settings-item-copy strong { font-size: var(--text-read); line-height: 1.25; }
.settings-item-copy > span:not(.settings-status) { margin-block-start: 7px; color: var(--muted); font-size: var(--text-caption); line-height: 1.45; }
.settings-icon { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--settings-surface); }
.settings-icon .ui-icon { width: 42px; height: 42px; color: var(--ink-soft); stroke-width: 1.35; }
.settings-group-ai .settings-icon { border-color: var(--agent-line); background: var(--agent-wash); }
.settings-group-ai .settings-icon .ui-icon { color: var(--agent-ink); }
.settings-status { min-height: 26px; margin-block-start: auto; padding: 3px 10px; border-radius: var(--radius-pill); color: var(--ink-soft); background: var(--sunken); font-size: var(--text-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.settings-group-ai .settings-status { color: var(--agent-ink); background: var(--agent-soft); }
.settings-chevron { width: 18px; height: 18px; align-self: center; color: var(--ink-soft); }
.portal-version { min-height: 63px; margin-block-start: 19px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; gap: 9px; align-items: center; color: var(--muted); background: var(--settings-surface); font-size: var(--text-caption); }
.portal-version strong { color: var(--ink-soft); font-weight: 700; }
.switch-input { width: 46px; min-height: 26px; height: 26px; margin: 0; padding: 2px; border: 0; border-radius: var(--radius-pill); appearance: none; background: var(--line-strong); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); cursor: pointer; transition: background 160ms ease; }
.switch-input::before { content: ""; width: 22px; height: 22px; display: block; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 4px rgb(0 0 0 / 22%); transition: transform 160ms ease; }
.switch-input:checked { background: var(--success); }
.switch-input:checked::before { transform: translateX(20px); }

.view-mode-control { width: auto; margin: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.icon-toggle { width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.icon-toggle:hover { color: var(--ink); background: var(--sunken); }
.icon-toggle.active { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgb(117 91 0 / 8%); }
.article-filter-menu { min-width: 0; flex: 1 1 auto; position: relative; }
.article-filter-menu > summary { min-height: 44px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--ink-soft); background: var(--sunken); cursor: pointer; list-style: none; font-size: var(--text-caption); font-weight: 700; }
.article-filter-menu > summary::-webkit-details-marker { display: none; }
.article-filter-menu > summary:hover, .article-filter-menu[open] > summary { color: var(--ink); border-color: var(--accent-line); background: var(--accent-wash); }
#article-filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-filter-current-icon { width: 22px; height: 22px; flex: 0 0 auto; display: none; place-items: center; color: var(--progress-ink); }
.article-filter-current-icon .ui-icon { width: 17px; height: 17px; }
.article-filter-chevron { width: 14px; height: 14px; margin-inline-start: auto; flex: 0 0 auto; transform: rotate(90deg); transition: transform 140ms ease; }
.article-filter-menu[open] .article-filter-chevron { transform: rotate(-90deg); }
.article-filter-options { width: 190px; padding: 6px; position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 50; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-md); }
.article-filter-option { width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; color: var(--ink-soft); background: transparent; cursor: pointer; text-align: start; font-size: var(--text-caption); font-weight: 700; }
.article-filter-option:hover { color: var(--ink); background: var(--sunken); }
.article-filter-option.active { color: var(--accent-ink); background: var(--accent-soft); }
.kind-icon.all { color: var(--progress-ink); background: var(--sunken); }
.knowledge-add-action { min-height: 44px; margin: 0; padding: 7px 9px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--accent-ink); background: var(--accent-soft); cursor: pointer; font-size: var(--text-caption); font-weight: 700; white-space: nowrap; }
.knowledge-add-action:hover { color: var(--ink); border-color: var(--accent-line); background: var(--accent-soft); }
.agent-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.agent-row { min-width: 0; min-height: 82px; padding: 14px 16px; display: grid; grid-template-columns: 48px minmax(220px, 1.5fr) minmax(130px, .65fr) minmax(180px, .9fr) auto; align-items: center; gap: 16px; border-block-end: 1px solid var(--line); background: var(--paper); }
.agent-row:last-child { border-block-end: 0; }
.agent-row.off { background: var(--sunken); }
.agent-settings-symbol { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--agent-ink); background: var(--agent-soft); }
.agent-settings-symbol .ui-icon { width: 22px; height: 22px; }
#ai-agent-settings .agent-settings-symbol { border: 1px solid var(--line); color: var(--ink); background: var(--settings-surface); }
#ai-agent-settings .agent-row:first-child .agent-settings-symbol { border-color: var(--accent-line); }
.agent-settings-copy { min-width: 0; }
.agent-settings-title { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.agent-settings-copy > p { margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: var(--text-caption); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.agent-audience, .agent-model { min-width: 0; display: grid; gap: 4px; }
.agent-audience small, .agent-model small { color: var(--muted); font-size: var(--text-micro); font-weight: 600; }
.agent-audience strong, .agent-model strong { overflow: hidden; color: var(--ink-soft); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.agent-row-actions { display: flex; gap: 6px; align-items: center; }
.agent-enabled-inline { min-height: 32px; margin: 0; display: inline-flex; grid-template-columns: none; gap: 8px; align-items: center; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 600; cursor: pointer; white-space: nowrap; }
.agent-enabled-inline .switch-input { width: 42px; min-width: 42px; height: 24px; min-height: 24px; }
.agent-badge { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--sunken); color: var(--muted); font-size: var(--text-caption); }
.agent-editor-dialog { width: min(1000px, calc(100vw - 40px)); height: min(850px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); overflow: hidden; }
.agent-editor-card { height: 100%; max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--paper); text-align: start; }
.agent-editor-head { min-height: 74px; padding: 16px 62px 15px 30px; border-block-end: 1px solid var(--line); display: flex; align-items: center; }
.agent-editor-symbol { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--agent-ink); background: var(--agent-soft); }
.agent-editor-symbol .ui-icon { width: 24px; height: 24px; }
.agent-editor-head h2 { margin: 0; font-size: var(--text-page); letter-spacing: -.025em; }
.agent-editor-head p { margin: 3px 0 0; color: var(--muted); font-size: var(--text-caption); }
.agent-enabled-control { margin: 0 0 10px !important; padding: 2px 0; border: 0; border-radius: 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--ink-soft); background: transparent; }
.agent-enabled-control strong, .agent-enabled-control small { display: block; }
.agent-enabled-control strong { font-size: var(--text-caption); }
.agent-enabled-control small { display: none; }
.agent-enabled-control .switch-input { width: 42px; min-width: 42px; height: 24px; min-height: 24px; flex: 0 0 auto; }
.agent-enabled-control .switch-input::before { width: 20px; height: 20px; }
.agent-enabled-control .switch-input:checked::before { transform: translateX(18px); }
.agent-editor-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 73fr) minmax(260px, 27fr); }
.agent-editor-main, .agent-editor-options { min-height: 0; padding: 22px 20px; overflow-y: auto; }
.agent-editor-main { padding-inline: 30px; }
.agent-editor-main, .agent-editor-options { scrollbar-width: none; }
.agent-editor-main::-webkit-scrollbar, .agent-editor-options::-webkit-scrollbar { display: none; }
.agent-editor-main { border-inline-end: 1px solid var(--line); }
.agent-editor-main > label { margin: 0 0 28px; }
.agent-editor-options label { margin: 0 0 15px; }
.agent-editor-main > label:last-child, .agent-editor-options > :last-child { margin-block-end: 0; }
.agent-editor-main textarea { resize: none; }
.agent-prompt-field { margin-block-end: 28px; }
.agent-prompt-field textarea { height: 128px; min-height: 128px; font-family: inherit; }
#agent-description { min-height: 96px; }
#agent-dialog :is(input, textarea, select) { font-weight: 400; }
.field-label-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.field-label-row label { margin: 0; }
.field-label-actions { display: inline-flex; gap: 10px; align-items: center; }
.field-counter { color: var(--muted); font-size: var(--text-micro); font-weight: 600; font-variant-numeric: tabular-nums; }
.field-label-row .button { min-height: 28px; padding: 3px 0; font-size: var(--text-caption); }
.agent-editor-options { background: var(--ai-dialog-paper); }
.agent-option-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.agent-icon-control { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: center; }
#agent-dialog .agent-icon-preview { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); background: var(--agent-fill); }
.agent-icon-preview .ui-icon { width: 28px; height: 28px; }
.agent-icon-picker { min-width: 0; min-height: 44px; position: relative; display: grid; place-items: center; }
.agent-icon-picker-label { width: 100%; min-height: 44px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink-soft); background: var(--ai-dialog-paper); font-size: var(--text-caption); font-weight: 700; }
.agent-icon-picker select { min-width: 0; min-height: 44px; position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.agent-icon-picker:focus-within .agent-icon-picker-label { border-color: var(--accent-ink); outline: 2px solid var(--accent-ink); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft); }
.agent-scope-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.agent-scope-group + .agent-scope-group { margin-block-start: 18px; }
#agent-dialog .agent-scope-group:nth-of-type(3) { margin-block-start: 88px; }
.agent-scope-group legend { margin-block-end: 8px; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 800; }
.agent-scope-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#agent-dialog .agent-scope-options { grid-template-columns: minmax(0, 1fr); }
.agent-scope-options label { min-width: 0; padding: 5px 2px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 0; background: transparent; font-size: var(--text-ui); }
.agent-scope-options input, .agent-role-options input { width: 17px; min-height: 17px; flex: 0 0 auto; }
#agent-dialog :is(.agent-role-options, .agent-scope-options) input[type="checkbox"] { accent-color: var(--agent); }
.agent-role-options { display: grid; gap: 7px; }
.agent-role-options label { margin: 0; padding: 5px 2px; border: 0; border-radius: 0; display: flex; grid-template-columns: none; gap: 9px; align-items: center; background: transparent; cursor: pointer; }
.agent-role-options span, .agent-role-options strong, .agent-role-options small { min-width: 0; display: block; }
.agent-role-options strong { color: var(--ink-soft); font-size: var(--text-caption); }
.agent-role-options small { display: none; }
.agent-project-options { max-height: 146px; overflow-y: auto; }
.agent-starters-field > label { margin-block-end: 6px; }
.agent-starters-editor { min-height: 174px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 7px; background: var(--ai-dialog-paper); }
.agent-starters-list { display: grid; align-content: start; gap: 6px; }
.agent-starter-chip { width: 100%; min-height: 34px; padding: 5px 7px 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); display: inline-flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--ink-soft); background: var(--paper-raised); font-size: var(--text-micro); }
.agent-starter-remove { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.agent-starter-remove:hover { color: var(--ink); background: var(--sunken); }
.agent-starter-remove .ui-icon { width: 12px; height: 12px; }
.agent-starter-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.agent-starter-add-row input { min-height: 34px; margin: 0; }
.agent-starter-add-row .button { min-height: 34px; padding-inline: 8px; justify-self: start; white-space: nowrap; }
.agent-editor-footer { min-height: 78px; padding: 11px 20px 25px; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.agent-editor-footer .form-error { margin: 0; }
.agent-editor-footer .form-actions { margin: 0 0 0 auto; justify-content: flex-end; gap: 32px; }
#agent-dialog .agent-editor-footer .button { min-height: 56px; }
#agent-dialog .agent-editor-footer .button.secondary { min-width: 126px; }
#agent-dialog .agent-editor-footer .button.primary { min-width: 210px; }
.compact-switch-row { margin: 0; }
.workspace[data-active-view="assistant"] { height: calc(100vh - 72px); padding: 0; overflow: hidden; }
#assistant-view { width: 100%; }
#assistant-view:not([hidden]) { height: 100%; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.assistant-drawer-bar { display: none; }
.assistant-drawer-backdrop { display: none; }
.assistant-layout { min-height: 0; grid-row: 2; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; background: var(--paper); }
/* Источники не меняют геометрию разговора: они открываются тем же drawer на любой ширине. */
.assistant-layout.with-materials { grid-template-columns: 320px minmax(0, 1fr); }
.assistant-layout.without-rail { grid-template-columns: minmax(0, 1fr); }
.assistant-layout.without-rail.with-materials { grid-template-columns: minmax(0, 1fr); }
.chat-panel-head { min-height: 88px; padding: 14px 30px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; border-block-end: 1px solid var(--line); background: var(--paper); }
.assistant-layout[data-chat-state="answer"] .assistant-agent-catalog { display: none; }
.assistant-layout[data-chat-state="answer"],
.assistant-layout[data-chat-state="answer"] .assistant-rail,
.assistant-layout[data-chat-state="answer"] .assistant-chat-panel,
.assistant-layout[data-chat-state="answer"] .chat-panel-head,
.assistant-layout[data-chat-state="answer"] .assistant-materials,
.assistant-layout[data-chat-state="answer"] .assistant-material-card,
.assistant-layout[data-chat-state="answer"] .chat-form { background: var(--assistant-surface); }
.assistant-layout[data-chat-state="answer"] .assistant-conversation { background: var(--assistant-stage); }
.chat-panel-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--on-dark); background: var(--agent-fill); }
.chat-panel-avatar .ui-icon { width: 30px; height: 30px; }
.chat-panel-copy { min-width: 0; display: grid; gap: 4px; }
.chat-panel-copy strong, .chat-panel-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel-copy strong { font-size: var(--text-title); }
.chat-panel-copy small { color: var(--ink-soft); font-size: var(--text-caption); }
.chat-panel-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-panel-title > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel-meta { min-width: 0; display: flex; align-items: center; gap: 12px; }
.chat-panel-meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel-model:not(:empty) { width: max-content; flex: 0 0 auto; padding: 4px 9px; border-radius: var(--radius-xs); color: var(--agent-ink); background: var(--agent-soft); font-weight: 700; }
.assistant-rail { min-height: 0; padding: 20px 18px; display: flex; flex-direction: column; border: 0; border-inline-end: 1px solid var(--line); border-radius: 0; overflow: hidden; background: var(--paper); }
.assistant-rail-heading { min-height: 38px; padding: 0 4px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assistant-rail-heading > strong { font-size: var(--text-caption); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.assistant-new-chat { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-soft); background: var(--paper); cursor: pointer; font-size: var(--text-caption); font-weight: 800; }
.assistant-new-chat:hover { border-color: var(--accent-line); color: var(--ink); background: var(--accent-wash); }
.assistant-new-chat .ui-icon { width: 17px; height: 17px; }
.assistant-chat-search { min-height: 44px; margin-block: 18px 14px; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--muted); background: var(--paper); }
.assistant-chat-search:focus-within { border-color: var(--agent-line); box-shadow: 0 0 0 3px var(--agent-soft); }
.assistant-chat-search .ui-icon { width: 19px; height: 19px; }
.assistant-chat-search input { min-width: 0; height: 42px; padding: 0; border: 0; color: var(--ink); background: transparent; box-shadow: none; font-size: var(--text-caption); }
.assistant-chat-search input:focus { outline: 0; box-shadow: none; }
.assistant-agent-catalog { flex: 0 1 auto; overflow: auto; }
.assistant-rail-section-title { margin-block-start: 18px; padding: 15px 8px 9px; border-block-start: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-micro); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.chat-list { min-height: 0; flex: 1; padding-block: 0 10px; display: flex; flex-direction: column; gap: 5px; overflow: auto; }
.chat-list-empty { margin: 18px 8px; color: var(--muted); font-size: var(--text-caption); text-align: center; }
.chat-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px; }
.chat-open { min-width: 0; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; gap: 3px; color: inherit; background: transparent; cursor: pointer; text-align: start; }
.chat-open > .ui-icon { display: none; }
.chat-open strong, .chat-open small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-open strong { font-size: var(--text-caption); font-weight: 500; }
.chat-open small { color: var(--muted); font-size: var(--text-micro); }
.chat-open:hover { background: var(--sunken); }
.chat-open.active { border-color: transparent; color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 58%, var(--paper)), color-mix(in srgb, var(--accent-tint) 62%, var(--paper))); box-shadow: inset 4px 0 0 var(--accent); }
.chat-open.active > .ui-icon { color: var(--agent-dialog-ink); }
.chat-open.active strong { font-weight: 700; }
.chat-open.active small { color: var(--ink-soft); }
.chat-delete { width: 32px; height: 32px; padding: 7px; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; opacity: 0; }
.chat-delete:hover { color: var(--danger); background: var(--danger-soft); }
.chat-row:hover .chat-delete, .chat-delete:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) { .chat-delete { opacity: 1; } }
.assistant-chat-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; overflow: hidden; background: var(--paper); box-shadow: none; container: assistant-chat / inline-size; }
.chat-message-avatar, .chat-empty-avatar { display: grid; place-items: center; color: var(--agent-ink); background: var(--agent-soft); }
.assistant-conversation { min-height: 0; flex: 1; position: relative; overflow: hidden; background: var(--paper-raised); }
.chat-empty { width: min(860px, 100%); min-height: 100%; margin-inline: auto; padding: 30px clamp(18px, 4vw, 46px) 24px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; align-items: start; column-gap: 14px; text-align: start; }
.chat-empty-orbit { width: 36px; height: 36px; grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; color: var(--on-dark); }
.chat-empty-avatar { width: 36px; height: 36px; border-radius: 50%; color: inherit; background: var(--agent-fill); }
.chat-empty-avatar .ui-icon { width: 20px; height: 20px; stroke-width: 1.5; }
.chat-empty h2 { margin: 4px 0 0; grid-column: 2; font-size: var(--text-title); letter-spacing: -.02em; }
.chat-empty p { max-width: 65ch; margin: 8px 0 0; grid-column: 2; color: var(--muted); font-size: var(--text-body); line-height: 1.5; }
.chat-empty #chat-empty-support { margin-block-start: 1px; }
.chat-messages { height: 100%; min-height: 0; padding: 26px clamp(18px, 4vw, 46px) 34px; display: flex; flex-direction: column; gap: 24px; overflow: auto; scroll-padding-block: 26px; }
.chat-message { width: min(860px, 100%); margin-inline: auto; }
.chat-message.assistant { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; }
.chat-message.user { display: flex; justify-content: flex-end; }
.chat-message-avatar { width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--on-dark); background: var(--agent-fill); }
.chat-message-avatar .ui-icon { width: 19px; height: 19px; }
.chat-message-content { min-width: 0; }
.chat-message-meta { min-height: 22px; margin-block-end: 5px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-caption); }
.chat-message-meta strong { color: inherit; font-size: inherit; font-weight: 400; }
.chat-message.assistant .chat-message-meta time::before { content: "·"; margin-inline-end: 6px; }
.chat-message.user .chat-message-meta { min-height: auto; margin: 6px 0 0; justify-content: flex-end; color: var(--ink-soft); }
.chat-message.user .chat-message-content { max-width: min(680px, 78%); padding: 10px 14px; border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md); color: var(--ink); background: var(--accent-tint); }
.chat-message.user p { margin: 0; line-height: 1.5; }
.chat-message-image { display: block; max-width: 100%; max-height: 240px; margin-block-end: 8px; border-radius: var(--radius-sm); object-fit: cover; }
.chat-answer { color: var(--ink-soft); font-size: var(--text-body); line-height: 1.62; }
.chat-budget-notice { margin-block: 8px 12px; padding: 10px 12px; border-inline-start: 3px solid var(--accent-bright); border-radius: var(--radius-xs); color: var(--ink); background: var(--accent-tint); font-size: var(--text-caption); line-height: 1.5; overflow-wrap: anywhere; }
.chat-budget-notice p { margin: 0; }
.chat-budget-notice p + p { margin-block-start: 6px; }
.chat-answer > :first-child { margin-block-start: 3px; }
.chat-answer > :last-child { margin-block-end: 0; }
.chat-answer p { margin: 0 0 10px; }
.chat-answer h1, .chat-answer h2, .chat-answer h3 { margin: 20px 0 8px; color: var(--ink); line-height: 1.3; }
.chat-answer h1 { font-size: var(--text-section); }
.chat-answer h2 { font-size: var(--text-title); }
.chat-answer h3 { font-size: var(--text-read); }
.chat-answer ul, .chat-answer ol { margin: 8px 0 12px; padding-inline-start: 24px; }
.chat-answer blockquote { margin: 14px 0; padding: 13px 16px; border: 1px solid var(--accent-bright); border-radius: var(--radius-sm); color: var(--ink); background: var(--accent-tint); }
.chat-message-actions { margin-block-start: 12px; display: flex; align-items: center; gap: 7px; }
.chat-message-action { width: 34px; min-height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 0; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: 0; font-weight: 700; }
.chat-message-action:hover { border-color: var(--agent-line); color: var(--agent-ink); background: var(--agent-wash); }
.chat-message-action .ui-icon { width: 16px; height: 16px; }
.chat-citation-ref { margin-inline: 2px; padding: 1px 5px; border: 1px solid var(--agent-line); border-radius: var(--radius-pill); color: var(--agent-ink); background: var(--agent-wash); font-size: var(--text-micro); font-weight: 800; text-decoration: none; vertical-align: .08em; }
.chat-citation-ref:hover { background: var(--agent-soft); }
/* Задача 232: длинные неразрывные токены остаются внутри пузыря; код и таблицы прокручиваются
   внутри ответа, а не растягивают ленту. `display: block` на table переносит overflow
   на саму таблицу — строки и ячейки сохраняют table-row/table-cell от UA (см. комментарий
   к .article-table-scroll выше). */
.chat-message.user .chat-message-content p { overflow-wrap: anywhere; }
.chat-answer { min-width: 0; overflow-wrap: break-word; }
.chat-answer pre { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.chat-answer table { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.assistant-materials { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-inline-start: 1px solid var(--line); background: var(--paper); }
.assistant-materials-heading { min-height: 60px; padding: 18px 20px; display: flex; align-items: center; border-block-end: 1px solid var(--line); }
.assistant-materials-heading h2 { margin: 0; font-size: var(--text-caption); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.assistant-material-list { min-height: 0; padding: 16px; display: grid; align-content: start; gap: 10px; overflow: auto; }
.assistant-material-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 11px; color: inherit; background: var(--paper); text-decoration: none; }
.assistant-material-card:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.assistant-material-mark { width: 24px; height: 24px; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.assistant-material-mark .ui-icon { width: 16px; height: 16px; }
.assistant-material-copy { min-width: 0; display: grid; gap: 5px; }
.assistant-material-copy strong { overflow-wrap: anywhere; font-size: var(--text-caption); line-height: 1.35; }
.assistant-material-copy small { overflow: hidden; color: var(--muted); font-size: var(--text-micro); line-height: 1.4; text-overflow: ellipsis; }
.assistant-material-summary { margin-block-start: 5px; display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.assistant-material-footer { margin-block-start: 8px; padding-block-start: 10px; border-block-start: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.assistant-material-footer > small { min-width: 0; white-space: nowrap; }
.assistant-material-open { min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: var(--ink); background: var(--paper); font-size: var(--text-caption); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.assistant-material-open .ui-icon { width: 14px; height: 14px; }
.assistant-material-card > .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.chat-composer-shell { width: min(930px, calc(100% - 48px)); margin: 0 auto 24px; padding: 0; position: relative; z-index: 3; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chat-starters { width: 100%; margin-block-start: 24px; grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chat-starters:empty { display: none; }
.chat-starter { min-height: 76px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px; color: var(--ink); background: var(--paper); cursor: pointer; font-size: var(--text-body); font-weight: 700; line-height: 1.4; text-align: start; }
.chat-starter:hover { border-color: var(--agent-line); color: var(--agent-ink); background: var(--agent-wash); }
.chat-starter-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink); background: var(--accent-soft); }
.chat-starter-icon .ui-icon { width: 22px; height: 22px; }
.chat-starter > .ui-icon { width: 19px; height: 19px; color: var(--ink-soft); }
.chat-attachment-bar { max-width: 860px; margin: 0 auto 7px; display: flex; align-items: center; gap: 8px; }
.chat-attachment-chip { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-soft); background: var(--sunken); font-size: var(--text-caption); }
.chat-attachment-chip button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.chat-attachment-chip button:hover { color: var(--ink); background: var(--line); }
.chat-attachment-chip .ui-icon { width: 14px; height: 14px; }
.chat-form { max-width: none; min-height: 58px; margin-inline: auto; padding: 6px; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; align-items: end; gap: 8px; border: 1px solid var(--agent-line); border-radius: var(--radius-sm); background: var(--paper); }
.chat-form:has(.chat-form-attach[hidden]):has(.chat-agent-picker[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
.chat-form:has(.chat-form-attach[hidden]):not(:has(.chat-agent-picker[hidden])) { grid-template-columns: minmax(0, 1fr) 44px auto; }
.chat-form:not(:has(.chat-form-attach[hidden])):has(.chat-agent-picker[hidden]) { grid-template-columns: 44px minmax(0, 1fr) auto; }
.chat-form:focus-within { border-color: var(--agent-line); box-shadow: 0 0 0 3px var(--agent-soft); }
.chat-form-attach { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.chat-form-attach:hover, .chat-form-attach.active { color: var(--agent-ink); background: var(--agent-soft); }
.chat-form-attach .ui-icon { width: 20px; height: 20px; }
.chat-agent-picker { width: 44px; height: 44px; position: relative; }
.chat-agent-picker > summary { width: 44px; height: 44px; border: 1px solid var(--agent-line); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--agent-ink); background: var(--agent-wash); cursor: pointer; list-style: none; }
.chat-agent-picker > summary::-webkit-details-marker { display: none; }
.chat-agent-picker > summary:hover, .chat-agent-picker[open] > summary { background: var(--agent-soft); }
.chat-agent-picker > summary .ui-icon { width: 22px; height: 22px; }
.chat-agent-options { width: min(520px, calc(100vw - 48px)); padding: 10px; position: absolute; z-index: 25; inset: auto 0 calc(100% + 12px) auto; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; gap: 4px; background: var(--paper); box-shadow: var(--shadow-lg); }
.chat-agent-picker:not([open]) > .chat-agent-options { display: none; }
.chat-agent-options::before { content: "Выберите агента"; padding: 4px 8px 8px; color: var(--ink); font-size: var(--text-caption); font-weight: 800; }
.chat-agent-option { width: 100%; min-height: 70px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; grid-template-columns: 20px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; color: var(--ink); background: transparent; cursor: pointer; text-align: start; }
.chat-agent-option:hover { border-color: var(--line); background: var(--paper-raised); }
.chat-agent-option.active { border-color: var(--agent-line); background: var(--agent-wash); }
.chat-agent-option-radio { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; }
.chat-agent-option.active .chat-agent-option-radio { border-color: var(--agent); }
.chat-agent-option.active .chat-agent-option-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--agent-fill); }
.chat-agent-option-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--agent-ink); background: var(--agent-soft); }
.chat-agent-option-avatar .ui-icon { width: 23px; height: 23px; }
.chat-agent-option-copy { min-width: 0; display: grid; gap: 4px; }
.chat-agent-option-copy strong, .chat-agent-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-agent-option-copy strong { font-size: var(--text-caption); }
.chat-agent-option-copy small { color: var(--muted); font-size: var(--text-micro); }
.chat-agent-option-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-micro); white-space: nowrap; }
.chat-agent-option-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
@media (min-width: 768px) {
  .chat-agent-options { width: min(615px, calc(100vw - 48px)); background: var(--settings-surface); }
  .chat-agent-option.active .chat-agent-option-avatar { color: var(--on-dark); background: var(--agent-dialog); }
  .chat-agent-option:is([data-agent-icon="document"], [data-agent-icon="headset"]) .chat-agent-option-avatar { color: var(--accent-ink); background: var(--accent-soft); }
  .chat-agent-option:is([data-agent-icon="database"], [data-agent-icon="package"]) .chat-agent-option-avatar { color: var(--progress-ink); background: var(--progress-soft); }
  /* While choosing an agent, make that choice the single leading composer action. The
     attachment returns as soon as the picker closes; the submit action stays available. */
  .chat-form:has(.chat-agent-picker[open]) { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .chat-form:has(.chat-agent-picker[open]) .chat-form-attach { display: none; }
  .chat-form:has(.chat-agent-picker[open]) .chat-agent-picker { position: static; grid-column: 1; grid-row: 1; }
  .chat-form:has(.chat-agent-picker[open]) textarea { grid-column: 2; grid-row: 1; }
  .chat-form:has(.chat-agent-picker[open]) > .button.agent { width: 44px; min-width: 44px; padding-inline: 0; grid-column: 3; grid-row: 1; }
  .chat-form:has(.chat-agent-picker[open]) > .button.agent span { display: none; }
  .chat-form:has(.chat-agent-picker[open]) .chat-agent-options { inset: auto auto calc(100% + 3px) 50%; transform: translateX(-50%); }
}
.chat-form textarea { min-height: 44px; max-height: 140px; padding: 11px 10px; border: 0; resize: none; color: var(--ink); background: transparent; box-shadow: none; }
.chat-form textarea:focus { outline: 0; box-shadow: none; }
.chat-form .button { min-height: 44px; }
.chat-composer-note { margin: 11px 1px 0; color: var(--ink-soft); font-size: var(--text-micro); }
.chat-composer-shell > .form-error { max-width: 860px; margin: 6px auto 0; }
.chat-composer-shell > .form-error:empty { display: none; }
.ai-index-form { display: grid; gap: 0; }
#ai-agents-view .page-heading { margin-block-end: 29px; }
#ai-index-settings { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
#ai-index-settings > .section-heading { min-height: 48px; margin-block-end: 16px; align-items: center; }
#ai-index-settings > .settings-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
.ai-index-heading { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; }
.section-feature-icon { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink); background: var(--paper-raised); }
.section-feature-icon .ui-icon { width: 26px; height: 26px; }
.ai-index-method { min-width: 0; min-height: 80px; padding: 17px 0; border: 0; border-block-start: 1px solid var(--line); display: grid; grid-template-columns: minmax(270px, .9fr) minmax(0, 1.45fr); gap: 22px; align-items: center; background: transparent; }
#ai-index-settings .ai-index-method { min-height: 73px; padding-block: 13px; }
.ai-index-method:first-child { border-block-start: 0; }
.ai-index-method-heading { margin-block-end: 15px; display: grid; justify-items: start; gap: 10px; }
#ai-index-settings .ai-index-method-heading { margin-block-end: 0; }
.ai-index-method-heading > div { min-width: 0; display: grid; gap: 4px; }
.ai-index-method-heading strong { color: var(--ink); font-size: var(--text-ui); }
.ai-index-method-heading small { color: var(--muted); font-size: var(--text-caption); line-height: 1.45; }
.ai-index-method-state { max-width: 100%; padding: 5px 9px; border-radius: var(--radius-pill); color: var(--muted); background: var(--sunken-deep); font-size: var(--text-micro); font-weight: 500; overflow-wrap: anywhere; }
.ai-index-method-state.configured { color: var(--success-ink); background: var(--success-soft); }
.ai-index-method-state.needs-attention { color: var(--danger-ink); background: var(--danger-soft); }
.ai-index-fields { display: grid; grid-template-columns: auto minmax(150px, .8fr) auto minmax(210px, 1.2fr); align-items: center; gap: 8px 10px; }
.ai-index-fields.single { grid-template-columns: minmax(0, 1fr); }
.ai-index-fields.single .field-note { grid-column: 1 / -1; margin-block-start: 2px; }
.ai-index-job-meter { margin: 0 20px 14px; }
@media (max-width: 880px) { .ai-index-job-meter { margin-inline: 12px; } }
.ai-index-fields label { margin: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
@media (max-width: 880px) { .ai-index-fields { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 900px) {
  .agent-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .agent-audience, .agent-model { grid-column: 2; }
  .agent-row-actions { grid-column: 3; grid-row: 1 / span 2; }
  .agent-editor-body { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .agent-editor-main, .agent-editor-options { overflow: visible; }
  .agent-editor-main { border-inline-end: 0; border-block-end: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .agent-editor-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .agent-editor-card { max-height: calc(100dvh - 16px); }
  .agent-editor-head { padding: 14px 56px 14px 16px; grid-template-columns: 42px minmax(0, 1fr); }
  .agent-editor-symbol { width: 42px; height: 42px; }
  .agent-enabled-control { grid-column: 1 / -1; }
  .agent-editor-main, .agent-editor-options { padding: 17px 16px; }
  .agent-option-pair { grid-template-columns: minmax(0, 1fr); }
  .agent-editor-footer { align-items: stretch; flex-direction: column; }
  .agent-editor-footer .form-actions { width: 100%; margin: 0; }
}
.ai-index-form .form-error:empty { display: none; }
.ai-index-form .ai-prompt-actions { margin-block-start: 2px; }
.chat-thinking { width: 44px; height: 10px; display: inline-block; border-radius: var(--radius-pill); background: var(--agent-fill); animation: chat-thinking 1.1s ease-in-out infinite; }
@keyframes chat-thinking { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-thinking { animation: none; opacity: .6; } }
@media (max-width: 560px) {
  #ai-index-settings { padding: 16px; }
  #ai-index-settings > .section-heading { align-items: stretch; flex-direction: column; }
  .ai-index-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; }
  .section-feature-icon { width: 42px; height: 42px; }
  .ai-index-method-heading { align-items: stretch; flex-direction: column; gap: 9px; }
  .ai-index-method-state { max-width: 100%; }
  .ai-index-fields { grid-template-columns: minmax(0, 1fr); }
}
/* The shell clips its grid without becoming a scroll container; reader-stage owns article scroll. */
.knowledge-layout { --knowledge-index-width: 280px; --provenance-width: 300px; min-height: 0; flex: 1; position: relative; display: grid; grid-template-columns: var(--knowledge-index-width) 1px minmax(0, 1fr) var(--provenance-width); border: 0; border-radius: 0; overflow: clip; background: var(--paper); box-shadow: none; }
/* Строка ящиков живёт только ниже 1180px: на desktop все три области — колонки консоли. */
.knowledge-drawer-bar { display: none; }
.drawer-toggle { min-height: 40px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); cursor: pointer; font-size: var(--text-ui); font-weight: 700; }
.drawer-toggle:hover { background: var(--sunken); }
.drawer-toggle .ui-icon { width: 19px; height: 19px; color: var(--muted); }
.drawer-toggle[aria-expanded="true"] { border-color: var(--accent-strong); background: var(--accent-soft); }
.drawer-count { min-width: 22px; min-height: 22px; padding-inline: 6px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; color: var(--ink-soft); background: var(--sunken-deep); font-size: var(--text-micro); }
.drawer-backdrop { display: none; }
.knowledge-index { min-width: 0; height: 100%; max-height: none; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); container: knowledge-index / inline-size; }
.knowledge-resizer { width: 1px; position: relative; z-index: 2; cursor: col-resize; touch-action: none; background: var(--accent-line); outline: 0; }
.knowledge-resizer::before { content: ""; width: 11px; position: absolute; inset-block: 0; inset-inline-start: -5px; }
.knowledge-resizer::after { content: ""; width: 1px; position: absolute; inset-block: 0; inset-inline-start: 0; background: transparent; transition: background-color 120ms ease; }
.knowledge-resizer:hover::after, .knowledge-resizer:focus-visible::after, body.knowledge-resizing .knowledge-resizer::after { background: var(--accent); }
body.knowledge-resizing { cursor: col-resize; user-select: none; }
/* Контролы переносятся, а не сжимаются: в 280px они помещались только ценой подписи фильтра,
   и «Все» превращалось в «В..» — метка, которая уже ничего не называет. */
.knowledge-index-tools { min-height: 52px; padding: 7px 10px; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; border-block-end: 1px solid var(--line); background: var(--paper); }
.knowledge-index-tools > * { flex: 0 0 auto; }
.article-list { min-height: 0; flex: 1; padding: 13px 10px 28px; overflow-x: hidden; overflow-y: auto; }
.article-group + .article-group { margin-block-start: 18px; }
.article-group-heading { padding: 8px 9px; display: grid; grid-template-columns: minmax(0, 1fr) 4ch 14px; gap: 7px; align-items: center; color: var(--muted); font-size: var(--text-caption); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.article-group-heading > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-group > summary.article-group-heading { min-height: 40px; grid-template-columns: minmax(0, 1fr) 4ch 14px; gap: 7px; align-items: center; cursor: pointer; list-style: none; }
.article-group > summary.article-group-heading::-webkit-details-marker { display: none; }
.article-group > summary.article-group-heading:hover { color: var(--ink); background: var(--paper-raised); }
.article-group-chevron { width: 14px; height: 14px; transition: transform 120ms ease; }
.article-group[open] .article-group-chevron { transform: rotate(90deg); }
.article-group-items { display: grid; }
.favorite-group { padding-block-end: 4px; border-block-end: 1px solid var(--accent-line); }
.favorite-group .article-group-heading { color: var(--accent-ink); }
.favorite-heading-label { display: inline-flex; align-items: center; gap: 6px; }
.favorite-heading-label .ui-icon { width: 14px; height: 14px; fill: var(--accent); }
.favorite-more { margin-block-end: 4px; }
.group-count { min-width: 0; width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.subsystem-tree { padding-block-end: 12px; }
.subsystem-node { margin-inline-start: calc(var(--tree-depth) * 8px); }
.subsystem-node > summary { min-height: 44px; padding: 6px 8px; border-radius: var(--radius-sm); display: grid; grid-template-columns: 14px 24px minmax(0, 1fr); gap: 5px; align-items: center; color: var(--muted); cursor: pointer; font-size: var(--text-caption); list-style: none; }
.subsystem-node > summary::-webkit-details-marker { display: none; }
.subsystem-node > summary:hover { background: var(--sunken); }
.subsystem-node > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subsystem-chevron { color: var(--muted); transform: rotate(0); transition: transform 120ms ease; }
.subsystem-node[open] > summary .subsystem-chevron { transform: rotate(90deg); }
/* A folder is a shelf, not a selection — it earns the yellow seam only where the selected
   article actually sits inside it, the same restraint the register row and the passport
   layers already keep. */
.subsystem-folder { width: 23px; height: 23px; display: grid; place-items: center; overflow: visible; color: var(--muted); background: transparent; font-size: var(--text-micro); }
.subsystem-folder > .ui-icon { width: 16px; height: 16px; }
.subsystem-folder img { width: auto; height: auto; max-width: 20px; max-height: 20px; display: block; object-fit: contain; image-rendering: auto; }
.subsystem-node:has(.article-item.selected) > summary .subsystem-folder { color: var(--accent-ink); }
/* Depth is read from the indent alone, the way a configuration tree does it — the connecting
   rule that used to run down the left of every branch drew another vertical line beside the
   one the selected row already carries. */
.subsystem-content { margin-inline-start: 14px; padding-inline-start: 7px; }
.subsystem-content > .article-item { margin-inline-start: 3px; width: calc(100% - 3px); }
.article-item { width: 100%; min-height: 48px; margin-block: 2px; padding: 5px 8px; position: relative; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; color: inherit; background: transparent; cursor: pointer; text-align: start; text-decoration: none; }
.article-item:hover { background: var(--sunken); }
.article-item.selected { background: var(--selection-article); box-shadow: inset 3px 0 var(--accent); }
/* A bare outline glyph, as in the reference: selectedness is already the row's yellow wash and
   left seam, and a filled tile behind every icon turned the register into a column of chips.
   Kind still reads from the icon's own colour. */
.article-marker { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: transparent; font: 800 15px/1 system-ui, sans-serif; }
.article-marker.process, .suggestion-icon.process { color: var(--success-ink); }
.suggestion-icon.process { background: var(--success-soft); }
.article-item strong, .article-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The selected row is the one that earns bold; the rest of the register reads as a plain list. */
.article-item strong { font-size: var(--text-ui); font-weight: 500; }
.article-item.selected strong { font-weight: 700; }
.article-item small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-caption); }

@container knowledge-index (max-width: 330px) {
  .knowledge-index-tools { padding-inline: 5px; justify-content: flex-start; }
  .view-mode-control { display: flex; gap: 4px; }
  .article-filter-menu { width: auto; flex: 1 1 96px; position: static; }
  .article-filter-menu > summary { width: 100%; padding-inline: 8px 6px; gap: 4px; justify-content: flex-start; }
  #article-filter-label { display: block; }
  .article-filter-chevron { display: block; }
  .article-filter-options { width: auto; inset-inline: 5px; }
  .article-filter-current-icon { display: grid; }
}
.list-more { width: calc(100% - 18px); min-height: 42px; margin: 10px 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; justify-content: center; gap: 8px; align-items: center; color: var(--accent-ink); background: var(--accent-wash); cursor: pointer; font-weight: 700; }
.list-more:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.list-empty { padding: 42px 20px; text-align: center; }
.list-empty p { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.reader-stage { min-width: 0; height: 100%; padding: 0; overflow: auto; scrollbar-width: none; background: var(--paper); }
.reader-stage::-webkit-scrollbar { display: none; }
.empty-state { min-height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; }
.empty-mark { width: 62px; height: 62px; display: grid; place-items: center; border-radius: var(--radius-lg); color: var(--accent-ink); background: var(--accent-soft); font-size: var(--text-page); }
.empty-mark .ui-icon { width: 28px; height: 28px; }
.empty-state h2 { margin: 18px 0 7px; font-size: var(--text-section); }
.empty-state p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.55; }
/* The side contents rail costs the article ~200px of measure, so the reader's own gutters give
   some of it back: with the rail, the register and the passport all on screen at once, the
   article was down to 584px and the table was breaking headers inside words. */
.reader { container: article-reader / inline-size; width: 100%; margin-inline: auto; padding: 28px clamp(24px, 3cqi, 40px) 36px; border-radius: 0; background: var(--paper); box-shadow: none; }
.article-provenance { min-width: 0; height: 100%; padding: 18px 16px 28px; position: relative; overflow: auto; border-inline-start: 1px solid var(--line); background: var(--paper-raised); }
.provenance-heading { min-height: 52px; padding: 0 2px 14px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-block-end: 1px solid var(--line); }
.provenance-heading h2 { margin: 0; font-size: var(--text-title); letter-spacing: -.02em; }
.provenance-heading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-micro); line-height: 1.4; }
.provenance-heading > .ui-icon { width: 20px; height: 20px; margin-block-start: 2px; color: var(--accent-ink); }
.provenance-facts { margin: 0; }
.provenance-fact { padding: 15px 2px; border-block-end: 1px solid var(--line); }
.provenance-fact dt, .provenance-section h3 { margin: 0 0 8px; color: var(--muted); font-size: var(--text-micro); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.provenance-fact dd { margin: 0; display: grid; gap: 4px; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.45; }
.provenance-fact dd strong { color: var(--ink); font-size: var(--text-ui); }
.provenance-fact dd span { color: var(--muted); }
.provenance-fact code { width: fit-content; max-width: 100%; padding: 3px 6px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--sunken); color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-micro); }
.provenance-freshness-age { font-size: var(--text-micro); }
/* The fill is the measurement. It used to be a fixed 34/67 gradient — identical on every
   article — so the bar looked like it reported age while reporting nothing; only a 7px dot
   moved. Now the yellow runs to the article's actual position on the 30-day scale. */
.provenance-relationships { display: flex !important; flex-wrap: wrap; gap: 5px !important; }
.provenance-relationship { width: fit-content; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--paper); color: var(--ink-soft) !important; font-size: var(--text-micro); }
.provenance-relationship.empty { color: var(--muted) !important; background: transparent; }
.provenance-section { padding: 17px 2px 0; }
.provenance-layers { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.provenance-layer { min-height: 48px; padding: 7px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); display: grid; grid-template-columns: 30px minmax(0, 1fr) 8px; gap: 9px; align-items: center; color: var(--ink-soft); }
.provenance-layer-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--muted); background: var(--sunken); }
.provenance-layer-icon .ui-icon { width: 17px; height: 17px; }
.provenance-layer-copy strong, .provenance-layer-copy small { display: block; }
.provenance-layer-copy strong { color: inherit; font-size: var(--text-caption); }
.provenance-layer-copy small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-micro); }
.provenance-layer-state { width: 7px; height: 7px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--sunken-deep); }
/* Every layer that has data says so with the same quiet grey dot; only the layer that is the
   article's own kind — always the first, always ready — carries the yellow seam onward from the
   selected row. Reserving the accent for that one layer is what makes it read as active instead
   of just decorated. */
.provenance-layer[data-layer-state="ready"] .provenance-layer-state { border-color: var(--muted); background: var(--muted); }
.provenance-layer[data-layer="object"][data-layer-state="ready"] .provenance-layer-state { border-color: var(--accent-strong); background: var(--accent); }
.provenance-layer[data-layer="object"][data-layer-state="ready"] .provenance-layer-icon { color: var(--accent-ink); background: var(--accent-soft); }
.provenance-layer[data-layer-state="progress"] .provenance-layer-state { border-color: var(--progress); background: var(--progress); }
.provenance-layer[data-layer-state="danger"] .provenance-layer-state { border-color: var(--danger); background: var(--danger); }
.provenance-layer[data-layer="ai"] .provenance-layer-icon { color: var(--agent-ink); background: var(--agent-soft); }
.provenance-layer[data-layer-state="review"] { color: var(--agent-ink); border-color: var(--agent-line); background: var(--agent-wash); }
.provenance-layer[data-layer-state="review"] .provenance-layer-state { border-color: var(--agent); background: var(--agent-fill); }
.provenance-trust { margin-block-start: 12px; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.provenance-trust p { margin: 0; color: var(--muted); font-size: var(--text-micro); line-height: 1.55; }
.provenance-heading { min-height: 44px; padding: 0 2px 12px; align-items: center; }
.provenance-heading h2 { font-size: var(--text-ui); font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.provenance-heading button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--muted); background: var(--paper); cursor: pointer; }
.provenance-heading button:hover { color: var(--ink); border-color: var(--accent-line); background: var(--accent-tint); }
.provenance-heading button .ui-icon { transform: rotate(180deg); transition: transform 160ms ease; }
/* One column, like the reference: the facts are a vertical stack of full-width panels. The
   two-column grid this used to be left «Версия» — the only fact not explicitly spanned — at
   half the width of the panels above and below it. */
.provenance-facts { padding-block-start: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.provenance-fact { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.provenance-fact dt, .provenance-section h3 { margin-block-end: 7px; font-size: var(--text-micro); letter-spacing: .09em; }
.provenance-fact dd { gap: 5px; }
/* Reference shape: a diamond glyph beside the release number, and the record id as a compact
   "#" chip sized to its own text rather than a full-width bar. The chip stays neutral instead
   of the reference's lavender — purple marks the model's own material here and nothing else. */
.provenance-version-fact dd { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.provenance-version-fact strong { display: inline-flex; align-items: center; gap: 7px; }
.provenance-version-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.provenance-version-fact code { width: fit-content; color: var(--ink-soft); background: var(--sunken); }
.provenance-version-fact code::before { content: "#"; margin-inline-end: 5px; color: var(--muted-weak); }
.provenance-lineage { margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 12px; list-style: none; }
.provenance-lineage li { position: relative; color: var(--ink-soft); font-size: var(--text-micro); font-weight: 600; }
.provenance-lineage li:not(:last-child)::after { content: "›"; position: absolute; inset-inline-end: -9px; color: var(--accent-ink-soft); }
.provenance-lineage .provenance-lineage-source { flex-basis: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--ink); font-size: var(--text-ui); }
.provenance-lineage .provenance-lineage-source::after { display: none; }
.provenance-lineage-source .ui-icon { width: 20px; height: 20px; color: var(--muted); }
.provenance-section { margin-block-start: 10px; padding: 13px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.provenance-layers { gap: 3px; }
.provenance-layer { min-height: 46px; padding: 6px; border-color: transparent; }
.provenance-layer:hover { border-color: var(--line); background: var(--paper-raised); }
.provenance-layer-icon { width: 28px; height: 28px; border-radius: var(--radius-xs); }
.provenance-relationships { display: grid !important; gap: 5px !important; }
.provenance-relationship { width: 100%; min-height: 36px; padding: 4px; border: 0; border-radius: var(--radius-xs); display: grid; grid-template-columns: minmax(0, 1fr) 14px; gap: 8px; align-items: center; color: var(--ink-soft) !important; background: var(--paper-raised); cursor: pointer; text-align: start; font-size: var(--text-micro); }
.provenance-relationship:hover { color: var(--ink) !important; background: var(--accent-tint); }
.provenance-relationship .ui-icon { width: 14px; height: 14px; }
.provenance-relationship-kind { display: none; }
.provenance-relationship-copy { min-width: 0; display: grid; gap: 1px; }
.provenance-relationship-copy strong, .provenance-relationship-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provenance-relationship-copy strong { color: inherit; font-size: var(--text-caption); font-weight: 400; }
.provenance-relationship-copy small { color: var(--muted); font-size: var(--text-micro); }
.provenance-relationship.empty { display: block; cursor: default; }
.knowledge-layout.provenance-collapsed { --provenance-width: 52px; }
.knowledge-layout.provenance-collapsed .article-provenance { padding-inline: 10px; overflow: hidden; }
.knowledge-layout.provenance-collapsed .article-provenance > :not(.provenance-heading),
.knowledge-layout.provenance-collapsed .provenance-heading h2 { display: none; }
.knowledge-layout.provenance-collapsed .provenance-heading { justify-content: center; border: 0; }
.knowledge-layout.provenance-collapsed .provenance-heading button .ui-icon { transform: none; }
.analysis-state { color: var(--muted); font-size: var(--text-micro); font-weight: 700; }
.analysis-state.ready { color: var(--success-ink); }
.article-breadcrumbs { min-height: 28px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: var(--muted); font-size: var(--text-caption); }
.article-breadcrumbs button { min-height: 32px; padding: 4px 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.article-breadcrumbs button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-breadcrumbs-separator { color: var(--muted-weak); }
.article-header { margin-block-end: 0; padding-block: 12px 18px; border-block-end: 0; }
.article-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.article-heading-copy { min-width: 0; }
.article-context, .article-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: var(--text-caption); line-height: 1.4; }
.article-context { display: none; }
.article-context-separator, .article-meta-separator { color: var(--muted-weak); }
.article-kind { display: inline-flex; gap: 5px; align-items: center; color: var(--accent-ink); font-size: var(--text-caption); font-weight: 800; }
.article-kind.process { color: var(--progress-ink); }
.article-kind .ui-icon { width: 15px; height: 15px; }
.article-title { max-width: 26ch; margin: 9px 0 10px; color: var(--ink); font-family: var(--font-ui); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.article-tabs-shell { position: relative; }
.article-tablist { margin-inline: calc(clamp(24px, 3cqi, 40px) * -1); padding-inline: clamp(24px, 3cqi, 40px); display: flex; gap: 25px; overflow-x: auto; border-block: 1px solid var(--line); scrollbar-width: none; }
.article-tablist::-webkit-scrollbar { display: none; }
.article-tabs-scroll { width: 38px; height: 38px; padding: 0; position: absolute; z-index: 4; inset-block-start: 8px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); cursor: pointer; }
.article-tabs-scroll[hidden] { display: none; }
.article-tabs-scroll.previous { inset-inline-start: -18px; }
.article-tabs-scroll.next { inset-inline-end: -18px; }
.article-tabs-scroll.previous .ui-icon { transform: rotate(180deg); }
.article-tabs-scroll:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.article-tabs-scroll .ui-icon { width: 18px; height: 18px; }
.article-tablist button { min-height: 54px; padding: 0; position: relative; border: 0; display: inline-flex; gap: 7px; align-items: center; color: var(--muted); background: transparent; cursor: pointer; white-space: nowrap; font-size: var(--text-caption); }
.article-tablist button::after { content: ""; height: 2px; position: absolute; inset: auto 0 -1px; background: transparent; }
.article-tablist button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.article-tablist button[aria-selected="true"]::after { background: var(--accent); }
.article-tablist .ui-icon { width: 17px; height: 17px; }
.article-tab-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; color: var(--muted); background: var(--sunken); font-size: var(--text-micro); }
.article-tab-panel { padding-block-start: 20px; }
.article-analysis-panel { min-height: 260px; padding: 8px 0 28px; }
.article-analysis-panel h2 { margin: 0 0 16px; font-size: var(--text-section); }
.article-analysis-list { margin: 0; padding: 0; display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--line); list-style: none; }
.schema-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.schema-table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.schema-table th, .schema-table td { padding: 9px 12px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.schema-table th { background: var(--sunken); color: var(--ink); font-weight: 800; white-space: nowrap; }
.schema-table tbody tr:last-child td { border-block-end: 0; }
.schema-name strong { display: block; color: var(--ink); font-size: var(--text-ui); }
.schema-name small { display: block; margin-block-start: 2px; color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: var(--text-micro); }
.schema-type { color: var(--ink-soft); font-family: "Cascadia Mono", Consolas, monospace; white-space: nowrap; }
.schema-empty { margin: 0; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-caption); }
.article-analysis-list li { min-height: 50px; padding: 11px 13px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--paper); }
.article-analysis-list strong, .article-analysis-list small { display: block; }
#article-relations-content .article-analysis-list li { grid-template-columns: 28px minmax(0, 1fr); }
#article-relations-content .article-analysis-list li.article-analysis-empty { grid-template-columns: minmax(0, 1fr); }
.relation-title-link { width: fit-content; max-width: 100%; padding: 0; border: 0; overflow: hidden; color: var(--accent-ink); background: transparent; cursor: pointer; text-align: start; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--text-body)/1.35 inherit; }
.relation-title-link:hover { color: var(--ink); }
.article-analysis-list small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
.article-ai-console { margin-block-start: 10px; padding: 14px; border: 1px solid var(--agent-line); border-radius: var(--radius-sm); background: var(--agent-wash); color: var(--agent-ink); }
.article-ai-console form { display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.article-ai-console-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--on-dark); background: var(--agent-fill); }
.article-ai-console input { min-height: 46px; margin: 0; border-color: var(--agent-line); background: var(--paper); color: var(--ink); }
.article-ai-console form > button { width: 44px; height: 46px; padding: 0; border: 0; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--on-dark); background: var(--agent-fill); cursor: pointer; }
.article-ai-console-prompts { margin-block-start: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.article-ai-console-prompts button { min-height: 36px; padding: 5px 9px; border: 1px solid var(--agent-line); border-radius: var(--radius-xs); display: inline-flex; align-items: center; gap: 6px; color: var(--agent-ink); background: var(--paper); cursor: pointer; font-size: var(--text-micro); font-weight: 700; }
.article-ai-console-prompts button:hover { background: var(--agent-soft); }
.reader-actions { display: flex; align-items: center; gap: 8px; }
.favorite-action { width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: var(--paper); cursor: pointer; }
.favorite-action:hover { color: var(--ink); border-color: var(--accent-line); background: var(--accent-tint); }
.favorite-action[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.favorite-action[aria-pressed="true"] .ui-icon { fill: var(--accent); }
.favorite-action:disabled { opacity: .55; cursor: wait; }
.favorite-action .ui-icon { width: 19px; height: 19px; }
.article-actions-menu { position: relative; }
.article-actions-menu > summary { width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: var(--paper); cursor: pointer; list-style: none; }
.article-actions-menu > summary::-webkit-details-marker { display: none; }
.article-actions-menu > summary:hover, .article-actions-menu[open] > summary { color: var(--ink); border-color: var(--accent-line); background: var(--accent-tint); }
.article-actions-menu > summary .ui-icon { width: 19px; height: 19px; }
.article-actions-popover { width: min(290px, calc(100vw - 36px)); padding: 5px; position: absolute; z-index: 25; inset: calc(100% + 7px) 0 auto auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-md); }
.article-menu-action { width: 100%; min-height: 48px; padding: 10px 13px; border: 0; border-radius: var(--radius-xs); display: flex; gap: 11px; align-items: center; color: var(--ink); background: transparent; cursor: pointer; text-align: start; font: 600 var(--text-body)/1.3 inherit; }
.article-menu-action:hover:not(:disabled) { background: var(--accent-soft); }
/* An action that applies but cannot run yet keeps its place and says why underneath. */
.article-menu-note { margin: 0 0 4px; padding: 0 8px 4px 31px; color: var(--muted); font-size: var(--text-micro); line-height: 1.35; }
.article-menu-action .ui-icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--ink-soft); }
#article-copy-link-action { margin-block-start: 4px; border-block-start: 1px solid var(--line); border-radius: 0 0 var(--radius-xs) var(--radius-xs); }
@media (min-width: 768px) {
  .article-actions-popover { background: var(--settings-surface); }
  .article-menu-action { min-height: 51px; font-size: var(--text-read); }
  .article-menu-action .ui-icon { width: 22px; height: 22px; }
  #article-copy-link-action { min-height: 59px; }
}
.article-author { color: var(--muted); }
.article-author.person { color: var(--accent-ink); font-weight: 700; }
.visibility-label { color: var(--muted); font-size: var(--text-caption); }
.article-current { min-width: 0; }
.article-reading-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.article-reading-layout.has-outline { grid-template-columns: 160px minmax(0, 1fr); gap: clamp(18px, 2.2cqi, 26px); align-items: start; }
.article-reading-layout > .article-content { width: 100%; min-width: 0; }
.article-reading-layout > .article-content > :first-child { margin-block-start: 0; }
.article-current .article-content { max-width: none; }
.article-current .article-content { font-size: var(--text-body); line-height: 1.55; }
.article-current-empty { max-width: 72ch; margin-inline: auto; padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); display: flex; gap: 14px; align-items: flex-start; color: var(--muted); background: var(--paper-raised); }
.article-current-empty > .ui-icon { width: 25px; height: 25px; flex: 0 0 auto; color: var(--muted-weak); }
.article-current-empty h2 { margin: 0 0 5px; font-size: var(--text-title); }
.article-current-empty p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.55; }
.article-outline { max-height: calc(100vh - 150px); padding: 4px 20px 4px 0; position: sticky; inset-block-start: 18px; align-self: start; overflow: auto; border-inline-end: 1px solid var(--line); scrollbar-width: thin; }
.article-outline-title { display: block; margin-block-end: 9px; color: var(--muted); font-size: var(--text-caption); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.article-outline-list { margin: 0; padding: 0; display: grid; gap: 2px; list-style: none; }
.article-outline-list li { min-width: 0; }
.article-outline-link { min-height: 40px; padding: 7px 8px; border-radius: var(--radius-xs); display: block; overflow: hidden; color: var(--muted); text-decoration: none; text-overflow: ellipsis; font-size: var(--text-caption); font-weight: 600; line-height: 1.4; }
.article-outline-link:hover, .article-outline-link:focus-visible { color: var(--accent-ink); background: var(--accent-soft); }
.article-outline-link[aria-current="location"] { color: var(--selection-outline); background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }
.article-outline-link.level-3 { margin-inline-start: 11px; color: var(--muted); font-size: var(--text-caption); }
.article-related { margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.article-related-title { display: block; margin-block-end: 9px; color: var(--muted); font-size: var(--text-caption); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.article-related-list { margin: 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.article-related-item { display: flex; align-items: center; gap: 4px; }
.article-related-link { flex: 1; min-width: 0; padding: 7px 8px; border-radius: var(--radius-xs); display: block; overflow: hidden; color: var(--muted); text-decoration: none; font-size: var(--text-caption); font-weight: 600; line-height: 1.4; }
.article-related-link:hover, .article-related-link:focus-visible { color: var(--accent-ink); background: var(--accent-soft); }
.article-related-link strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-related-reason { display: block; margin-block-start: 2px; font-weight: 500; color: var(--muted-weak); }
.article-related-exclude { flex: 0 0 auto; width: 26px; height: 26px; min-height: 0; padding: 0; }
.article-related-editor { margin-block-start: 8px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.article-related-pin-label { display: block; color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
.article-related-pin-label input { width: 100%; margin-block-start: 5px; }
.article-faq { margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.article-faq h2 { margin: 0 0 14px; font-size: var(--text-title); }
.article-faq-list { display: grid; gap: 8px; }
.article-faq-item { overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.article-faq-item > summary { min-height: 50px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-weight: 700; }
.article-faq-item > summary::-webkit-details-marker { display: none; }
.article-faq-item > summary:hover { background: var(--paper-raised); }
.article-faq-item[open] > summary { border-block-end: 1px solid var(--line); background: var(--paper-raised); }
.article-faq-item-answer { padding: 14px 16px; color: var(--muted); line-height: 1.55; }
.article-faq-review-list { display: grid; gap: 12px; margin-block-start: 12px; }
.article-faq-review-item { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.article-faq-review-item textarea { width: 100%; margin-block-end: 6px; resize: vertical; }
.article-faq-review-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.article-admin-layers { margin-block-start: 0; padding-block: 8px 28px; }
.article-admin-layers-heading { margin-block-end: 16px; }
.article-admin-layers-heading h2 { margin: 5px 0 6px; font-size: var(--text-title); letter-spacing: -.02em; }
.article-admin-layers-heading p { max-width: 620px; margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.source-layer-list { display: grid; gap: 8px; }
.source-layer-details { overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.source-layer-details > summary { min-height: 58px; padding: 9px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; cursor: pointer; list-style: none; }
.source-layer-details > summary::-webkit-details-marker { display: none; }
.source-layer-details > summary:hover { background: var(--paper-raised); }
.source-layer-details > summary:focus-visible { outline: 2px solid var(--accent-ink-soft); outline-offset: -2px; }
/* This tab exists to separate what a person wrote from what the model generated, so the model's
   own layer wears the purple trust boundary here of all places — it used to share the same
   yellow tile as the 1C help and the technical data. */
.source-layer-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.source-layer-details[data-source-layer="ai"] .source-layer-icon { color: var(--agent-ink); background: var(--agent-soft); }
.source-layer-icon .ui-icon { width: 18px; height: 18px; }
.source-layer-copy { min-width: 0; display: grid; gap: 2px; }
.source-layer-copy strong { font-size: var(--text-caption); }
.source-layer-copy small { overflow: hidden; color: var(--muted); font-size: var(--text-caption); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.source-layer-status { padding: 4px 7px; border-radius: var(--radius-pill); color: var(--muted); background: var(--sunken); font-size: var(--text-caption); font-weight: 800; white-space: nowrap; }
.source-layer-status[data-state="ready"] { color: var(--success-ink); background: var(--success-soft); }
.source-layer-status[data-state="progress"], .source-layer-status[data-state="review"] { color: var(--accent-ink); background: var(--accent-soft); }
.source-layer-status[data-state="danger"] { color: var(--danger-strong); background: var(--danger-soft); }
.source-layer-status[data-state="attention"] { color: var(--accent-ink); background: var(--accent-tint); }
.source-layer-chevron { width: 17px; height: 17px; color: var(--muted-weak); transition: transform .16s ease; }
.source-layer-details[open] > summary { border-block-end: 1px solid var(--line); background: var(--paper-raised); }
.source-layer-details[open] .source-layer-chevron { transform: rotate(90deg); }
.source-layer-body { padding: 20px; }
.source-layer-body .article-content { font-size: var(--text-body); }
.source-layer-body .article-content > :first-child { margin-block-start: 0; }
.source-layer-empty { margin: 0; padding: 13px 14px; border-radius: var(--radius-sm); color: var(--muted); background: var(--sunken); font-size: var(--text-caption); line-height: 1.5; }
.source-layer-body .review-panel { margin: 0; }
.technical-layer .article-content { max-width: none; font-size: var(--text-body); }
.technical-layer .article-content h1 { font-size: var(--text-display); }
.technical-layer .article-content h2 { margin-block-start: 34px; font-size: var(--text-title); }
.article-form-gallery { margin-block-start: 30px; }
.article-form-gallery > h2 { margin: 0 0 14px; font-size: var(--text-title); }
.article-form-images { display: grid; gap: 22px; }
.article-form-image { margin: 22px 0 0; min-width: 0; }
.article-form-images .article-form-image { margin: 0; }
.article-form-image img { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--paper); }
.article-form-image figcaption { margin-block-start: 7px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.review-panel, .reference-panel { margin-block-start: 28px; padding: 20px; border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: var(--accent-wash); }
.review-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.review-heading h2, .reference-panel h2 { margin: 4px 0 12px; font-size: var(--text-title); }
.review-heading > div:last-child { display: flex; gap: 8px; }
.review-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: var(--text-caption); }
/* Where this draft stands in the queue: a decision is easier knowing whether it is the last. */
.review-queue-position { margin-block-start: 8px !important; color: var(--accent-ink) !important; font-weight: 700; }
.review-queue-position[hidden] { display: none; }
.review-draft-content { margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--accent-line); font-size: var(--text-body); }
.review-compare { margin-block-start: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-line); }
.review-compare > section { min-width: 0; padding: 16px; background: var(--paper); }
.review-compare > section > strong { display: block; margin-block-end: 12px; color: var(--muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .07em; }
.review-compare .article-content { font-size: var(--text-ui); }
.access-options { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.access-options legend { padding: 0 6px; font-weight: 700; }
.access-role-grid, .access-user-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 8px 14px; }
.access-role-grid label, .access-user-grid label { display: flex; gap: 7px; align-items: center; font-size: var(--text-caption); }
/* `break-word`, not `anywhere`: both stop a long slug or URL from pushing the column wider,
   but `anywhere` also counts toward a table's intrinsic minimum width, which let the requisites
   table squeeze its columns until ordinary words like «Наименование» broke mid-word. */
.article-content { max-width: 72ch; color: var(--ink-soft); font-size: var(--text-read); line-height: 1.68; overflow-wrap: break-word; }
.article-content h1 { margin: 0 0 30px; color: var(--ink); font-size: var(--text-hero); line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.article-content h2 { margin: 28px 0 9px; color: var(--ink); font-size: var(--text-section); line-height: 1.2; letter-spacing: -.025em; }
.article-content h3 { margin: 30px 0 10px; color: var(--ink); font-size: var(--text-title); }
.article-content h2[id], .article-content h3[id] { scroll-margin-block-start: 18px; }
.article-content p { margin: 11px 0; }
.article-content hr { margin: 18px 0; border: 0; border-block-start: 1px solid var(--line); }
.article-content ul, .article-content ol { margin: 12px 0; padding-inline-start: 25px; }
.article-content li { margin-block: 6px; padding-inline-start: 4px; }
.article-content code { padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--sunken); color: var(--ink-soft); font-size: .87em; }
/* Tables carry a field and what to put in it, so the first column is the one that reads. */
/* `display: block` moves overflow handling onto the table itself — its rows and cells keep
   their own table-row/table-cell display from the UA stylesheet, so the grid still lays out
   correctly, but a reader on a narrow measure gets a horizontal scrollbar on the table instead
   of a header splitting mid-word. */
.article-table-shell { margin: 14px 0 8px; position: relative; }
.article-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.article-table-scroll:focus-visible { outline-offset: 2px; }
.article-table-shell:has(.article-table-more:not([hidden])) { display: grid; grid-template-rows: auto auto; }
.article-table-shell:has(.article-table-more:not([hidden])) .article-table-scroll { grid-row: 2; }
.article-table-more { margin-block-end: 6px; padding: 5px 8px; position: static; grid-row: 1; justify-self: end; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); pointer-events: none; font-size: var(--text-micro); font-weight: 800; }
.article-table-more[hidden] { display: none; }
.article-content table { width: 100%; min-width: 100%; margin: 0; border-collapse: collapse; font-size: var(--text-ui); line-height: 1.5; }
.article-content th, .article-content td { padding: 8px 12px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.article-content th { background: var(--sunken); font-weight: 600; white-space: nowrap; }
.article-content tr:nth-child(2n) td { background: var(--paper-raised); }
.rich-editor table td:empty::after { content: ""; display: inline-block; min-width: 1px; }
.article-content blockquote { margin: 27px 0; padding: 15px 18px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); }
.article-content a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.technical-details { margin-block: 28px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.technical-details > summary { padding: 14px 16px; display: flex; gap: 10px; align-items: center; color: var(--ink); cursor: pointer; font-weight: 800; list-style: none; }
.technical-details > summary::-webkit-details-marker { display: none; }
.technical-details > summary::after { content: "Показать"; margin-inline-start: auto; color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
.technical-details[open] > summary::after { content: "Скрыть"; }
.technical-details > summary .ui-icon { color: var(--accent-ink); }
.technical-details-body { padding: 0 18px 18px; border-block-start: 1px solid var(--line); }
.technical-details-body > :first-child { margin-block-start: 18px; }
.wiki-link { position: relative; padding: 2px 4px; border-radius: var(--radius-xs); background: var(--accent-soft); cursor: pointer; }
.wiki-link[data-tooltip]::after { content: attr(data-tooltip); width: min(330px, 80vw); padding: 12px 14px; position: absolute; z-index: 30; inset: calc(100% + 8px) auto auto 0; border: 1px solid var(--muted); border-radius: var(--radius-sm); color: var(--on-dark); background: var(--nav); box-shadow: 0 14px 35px rgb(0 0 0 / 24%); opacity: 0; transform: translateY(-4px); pointer-events: none; white-space: pre-line; font-size: var(--text-caption); line-height: 1.5; text-decoration: none; }
.wiki-link[data-tooltip]:hover::after, .wiki-link[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); }

/*
 * Содержание остаётся закреплённой колонкой и на узком читателе. Раньше здесь оно
 * разворачивалось горизонтальной карточкой чипов над текстом — ровно та карточка, которую
 * `TARGET-DESIGN.md` исключает: она уезжала вместе с текстом и повторяла заголовки,
 * до которых читатель и так дошёл. Тесно — колонка сужается, а не меняет природу.
 */
@container article-reader (max-width: 720px) {
  .article-reading-layout.has-outline { grid-template-columns: minmax(132px, 148px) minmax(0, 1fr); gap: 14px; }
  .article-outline { padding-inline-end: 12px; }
  .article-header { max-width: none; margin-inline: 0; }
}

@container article-reader (max-width: 620px) {
  .article-heading-row { gap: 10px; }
  .article-context, .article-meta { font-size: var(--text-caption); }
  .article-title { max-width: none; margin-block-start: 7px; font-size: clamp(28px, 8cqi, 34px); }
  .favorite-action, .article-actions-menu > summary { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .favorite-action-label, .article-action-label { display: none; }
  .source-layer-details > summary { grid-template-columns: 34px minmax(0, 1fr) 18px; }
  .source-layer-status { grid-column: 2; width: max-content; }
  .source-layer-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .source-layer-copy small { display: none; }
  .source-layer-body { padding: 16px; }
  .review-heading { display: grid; }
}

.workspace[data-active-view="studio"] { height: calc(100vh - 72px); padding: 0; overflow: hidden; }
#studio-view { width: 100%; height: 100%; max-width: none; }
.studio-layout { height: 100%; }
#article-form.form-card { height: 100%; padding: 0; border: 0; border-radius: 0; display: grid; grid-template-columns: clamp(232px, 17vw, 272px) minmax(520px, 1fr) clamp(300px, 22vw, 360px); grid-template-rows: minmax(0, 1fr) 106px; overflow: hidden; background: var(--settings-canvas); }
.studio-parameters, .studio-editor-pane, .studio-preview-pane { min-width: 0; min-height: 0; overflow-y: auto; }
.studio-parameters { padding: 30px 22px; grid-column: 1; grid-row: 1 / 3; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; background: var(--settings-canvas); }
.studio-parameters > h2, .studio-preview-heading h2 { margin: 0 0 20px; color: var(--ink); font-size: var(--text-ui); letter-spacing: .045em; text-transform: uppercase; }
.studio-parameters > h2 { margin-block-end: 34px; }
.studio-parameters > label { margin-block: 0 26px; gap: 17px; }
.studio-project-control { display: block; position: relative; }
.studio-project-control > .ui-icon { width: 20px; height: 20px; position: absolute; z-index: 1; inset: 50% auto auto 13px; color: var(--ink-soft); pointer-events: none; transform: translateY(-50%); }
.studio-parameters > label select { min-height: 50px; padding-inline-start: 40px; font-weight: 400; }
.studio-access { margin: 0 0 22px; padding: 0; border: 0; }
.studio-access legend { margin-block-end: 21px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.studio-access-options { display: grid; gap: 8px; }
.studio-access-options label { margin: 0; min-height: 36px; display: flex; grid-template-columns: none; gap: 10px; align-items: center; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 400; cursor: pointer; }
.studio-access-options input { width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: var(--accent); }
.studio-audience { margin: 10px 0 0; padding: 0; border: 0; }
.studio-audience legend { margin-block-end: 23px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.studio-audience-summary { min-height: 24px; display: flex; gap: 10px; align-items: center; color: var(--ink-soft); font-size: var(--text-caption); }
.studio-audience-summary strong { font-weight: 500; }
.studio-audience-summary .ui-icon { width: 21px; height: 21px; }
.studio-audience-chips { margin-block-start: 19px; display: flex; flex-wrap: wrap; gap: 8px; }
.studio-audience-chips label { min-height: 32px; margin: 0; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-xs); display: inline-flex; grid-template-columns: none; gap: 7px; align-items: center; color: var(--ink-soft); background: var(--settings-surface); cursor: pointer; font-size: var(--text-micro); font-weight: 500; }
.studio-audience-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.studio-audience-chips .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.studio-audience-chips label:has(input:not(:checked)) { opacity: .58; background: var(--sunken); text-decoration: line-through; }
.studio-audience-chips label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.studio-audience-chips label.is-mandatory { cursor: default; }
.studio-audience-chips label.is-mandatory .ui-icon { color: var(--ink-soft); }
.studio-parameters .access-options { margin-block: -9px 22px; }
.studio-import-title { margin: auto 0 18px; color: var(--ink-soft); font-size: var(--text-caption); }
.studio-parameters .document-import-row { min-height: 208px; margin: 0 0 68px; padding: 20px 16px; align-content: center; align-items: center; justify-items: center; flex-direction: column; gap: 10px; text-align: center; }
.studio-parameters .document-import-row > .ui-icon { width: 48px; height: 48px; color: var(--progress-ink); }
.studio-parameters .document-import-row .file-button { margin-block-start: 4px; }
.studio-editor-pane { padding: 28px 23px 32px 25px; grid-column: 2; grid-row: 1; border-inline-end: 1px solid var(--line); background: var(--settings-canvas); }
.studio-editor-heading #studio-context { display: none; }
.studio-editor-heading { margin-block-end: 41px; padding-inline-start: 3px; position: relative; }
.studio-editor-heading h1 { margin: 5px 0 3px; font-size: var(--text-page); line-height: 1.08; letter-spacing: -.025em; }
.studio-editor-heading p { margin: 0; color: var(--muted); font-size: var(--text-caption); }
.studio-editor-heading .draft-status { max-width: 190px; padding: 8px 10px; position: absolute; inset: 31px auto auto 198px; border: 1px solid var(--line); border-radius: var(--radius-xs); text-align: start; }
.studio-editor-heading .draft-status::before { content: ""; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 50%; display: inline-block; background: var(--success); }
.studio-editor-pane > label { margin-block: 0 20px; gap: 11px; }
.studio-editor-pane > label input { min-height: 48px; font-weight: 400; }
.studio-editor-pane .editor-field { margin-block-start: 31px; }
.studio-editor-pane .editor-field-head { margin-block-end: 8px; }
.studio-editor-pane .rich-editor { height: 525px; min-height: 525px; max-height: 525px; padding-block-start: 34px; background: var(--settings-surface); }
.studio-editor-pane .article-content > :first-child { margin-block-start: 0; }
.studio-editor-pane .article-content h2 { margin-block-start: 32px; }
.studio-editor-pane .article-content ol { margin-block: 20px; }
.studio-editor-pane .article-content li { margin-block: 11px; }
.studio-preview-pane .article-content { line-height: 1.55; }
.studio-preview-pane .article-content h2:not(:first-child) { margin-block-start: 41px; }
.studio-preview-pane .article-content ol { margin-block: 20px; }
.studio-preview-pane .article-content li { margin-block: 11px; }
.studio-preview-pane { padding: 26px 28px 32px 24px; grid-column: 3; grid-row: 1 / 3; background: var(--settings-canvas); }
.studio-preview-heading { margin-block-end: 16px; display: flex; justify-content: space-between; align-items: center; }
.studio-preview-heading h2 { margin: 0 0 0 8px; }
.studio-preview-modes { display: flex; gap: 4px; }
.studio-preview-modes button { width: 38px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.studio-preview-modes button.active { border-color: var(--line); color: var(--ink); background: var(--settings-surface); box-shadow: inset 0 -2px 0 var(--accent); }
.studio-preview-pane .instruction-preview { min-height: calc(100% - 110px); max-height: none; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--settings-surface); }
.studio-editor-pane .article-content blockquote,
.studio-preview-pane .article-content blockquote { padding: 15px 18px 15px 56px; position: relative; border-color: var(--agent-line); color: var(--ink-soft); background: var(--agent-wash); }
.studio-editor-pane .article-content blockquote { width: calc(100% - 20px); max-width: none; margin-block: 32px 30px; margin-inline-start: 3px; padding-block: 12px; line-height: 1.5; }
.studio-preview-pane .article-content blockquote { margin-block: 47px 27px; margin-inline: -2px; padding-inline-start: 48px; line-height: 1.4; }
.studio-editor-pane .article-content blockquote::before,
.studio-preview-pane .article-content blockquote::before { content: ""; width: 24px; height: 24px; position: absolute; inset: 15px auto auto 20px; color: var(--agent); background: currentColor; -webkit-mask: url("/icon-ai-callout.svg") center / contain no-repeat; mask: url("/icon-ai-callout.svg") center / contain no-repeat; }
.studio-preview-pane .article-content blockquote::before { inset-inline-start: 15px; }
.studio-preview-pane .instruction-preview ol { padding: 0; counter-reset: studio-preview-step; list-style: none; }
.studio-preview-pane .instruction-preview ol > li { min-height: 24px; padding-inline-start: 36px; position: relative; counter-increment: studio-preview-step; }
.studio-preview-pane .instruction-preview ol > li::before { content: counter(studio-preview-step); width: 22px; height: 22px; position: absolute; inset: 1px auto auto 0; border: 1px solid var(--accent-line); border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--paper); font-size: var(--text-micro); font-weight: 700; line-height: 1; }
.studio-preview-pane[data-preview-mode="mobile"] .instruction-preview { width: min(300px, 100%); margin-inline: auto; }
.studio-form-actions { padding: 14px 24px; grid-column: 2; grid-row: 2; border-block-start: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; align-items: center; background: var(--settings-canvas); }
.studio-form-actions #editor-preview-toggle { display: none; }
.studio-form-actions #article-form-reset { margin-inline-end: auto; }
.studio-form-actions #article-submit { min-width: 283px; }
.form-card { padding: clamp(23px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; }
label { margin-block: 15px; display: grid; gap: 7px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
input, textarea, select { width: 100%; min-height: 44px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
select { padding-inline-end: 34px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2370747c' stroke-width='1.8'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 18px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px solid var(--accent-strong); outline-offset: 0; border-color: var(--accent-strong); box-shadow: none; }
/* A field that cannot be changed says so before it is clicked. Left looking editable, the
   locked name of an object article answered a click with nothing at all. */
input:disabled, textarea:disabled, select:disabled { border-style: dashed; color: var(--muted); background: var(--sunken); cursor: not-allowed; }
textarea { resize: vertical; line-height: 1.55; }
.form-grid.two-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 13px; }
.form-actions { margin-block-start: 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
/* The status belongs to the button it qualifies. Floated dead centre between the two, it read
   as a caption to neither — and «Очистить» is the last action it should appear to describe. */
.draft-status { flex: 1; color: var(--muted); font-size: var(--text-caption); text-align: end; }
.draft-recovery { margin-block-end: 16px; padding: 13px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: var(--accent-soft); }
.draft-recovery[hidden] { display: none; }
.draft-recovery > .ui-icon { color: var(--accent-ink); }
.draft-recovery strong, .draft-recovery small { display: block; }
.draft-recovery small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
.draft-recovery .button { min-height: 36px; }
/* Where the open text came from, when it came from the configuration or the model rather
   than from a person — because saving it changes which of them the article follows. */
.editor-origin-note { margin-block-end: 16px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; background: var(--sunken); }
.editor-origin-note[hidden] { display: none; }
#article-manual-stale { grid-template-columns: minmax(0, 1fr); }
.editor-origin-note > .ui-icon { margin-block-start: 2px; color: var(--muted); }
.editor-origin-note strong, .editor-origin-note small { display: block; }
.editor-origin-note strong { color: var(--ink); }
.editor-origin-note small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.form-hint { color: var(--muted); font-size: var(--text-caption); }
.document-import-row { margin-block: 18px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); display: flex; justify-content: space-between; gap: 18px; align-items: center; background: var(--paper-raised); }
.document-import-row strong, .document-import-row small { display: block; }
.document-import-row strong { font-size: var(--text-caption); }
.document-import-row small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); line-height: 1.4; }
.file-button { width: max-content; margin: 0; display: inline-flex; cursor: pointer; white-space: nowrap; }
.file-button.loading { opacity: .6; pointer-events: none; }
.upload-zone { min-height: 150px; margin-block: 18px; padding: 22px; border: 1.5px dashed var(--accent-line); border-radius: var(--radius-md); display: grid; place-items: center; align-content: center; gap: 8px; position: relative; color: var(--accent-ink); background: var(--accent-wash); cursor: pointer; text-align: center; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.upload-zone:hover, .upload-zone:focus-within { border-color: var(--accent-ink); background: var(--accent-soft); transform: translateY(-1px); }
.upload-zone > input { width: 1px; height: 1px; min-height: 0; position: absolute; opacity: 0; pointer-events: none; }
.upload-zone > .ui-icon { width: 34px; height: 34px; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { color: var(--ink); font-size: var(--text-body); }
.upload-zone small { color: var(--muted); font-weight: 500; line-height: 1.45; }
/* What the import dropped: a notice, not an error — the document did come through. */
.import-losses { margin-block-start: 10px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--accent-ink); font-size: var(--text-caption); }
.import-losses ul { margin: 6px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; line-height: 1.5; }
.editor-field { margin-block-start: 18px; position: relative; }
/* Preview switches what the whole field shows; it belongs to the field, not to the row of
   formatting commands, where it used to sit alone at the far end of a wrapping toolbar. */
.editor-field-head { margin-block-end: 7px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.editor-label { display: block; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.editor-toolbar { min-height: 42px; padding: 3px 6px; border: 1px solid var(--line); border-block-end: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; display: flex; align-items: center; overflow: visible; background: var(--settings-surface); }
.editor-toolbar-groups { min-width: max-content; flex: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 8px; }
/* Related controls sit together and are separated by a rule, the way a word processor does it.
   A group never breaks inside itself: a wrap that split «Вложить» from «Поднять» read as two
   unrelated rows of buttons rather than one row that ran out of width. */
.editor-group { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; }
.editor-group + .editor-group { padding-inline-start: 10px; border-inline-start: 1px solid var(--line-strong); }
.editor-toolbar button { min-width: 36px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; font-size: var(--text-caption); }
.editor-toolbar button:hover:not(:disabled) { background: var(--paper); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
/* The paragraph style is a choice among four, and it also answers what the paragraph is now. */
.editor-menu { position: relative; }
.editor-menu > summary { min-width: 112px; min-height: 36px; padding: 6px 9px; display: flex; gap: 8px; align-items: center; justify-content: space-between; border-radius: var(--radius-xs); cursor: pointer; font-size: var(--text-caption); list-style: none; }
/* Insert names an action, not a current value, so it needs no room to hold the longest one. */
.editor-menu-compact > summary { min-width: 36px; width: 36px; padding: 6px; justify-content: center; }
.editor-menu-compact .editor-menu-popover { width: 232px; inset-inline: auto 0; }
.editor-menu > summary::-webkit-details-marker { display: none; }
.editor-menu-chevron { width: 16px; height: 16px; color: var(--muted); transition: transform 150ms ease; }
.editor-menu[open] .editor-menu-chevron { transform: rotate(90deg); }
.editor-menu > summary:hover { background: var(--paper); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
.editor-menu[open] > summary { background: var(--paper); }
.editor-menu.disabled { opacity: .5; pointer-events: none; }
.editor-menu-popover { width: 200px; padding: 5px; position: absolute; z-index: 25; inset-block-start: calc(100% + 4px); inset-inline-start: 0; display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 14px 40px rgb(22 24 28 / 20%); }
.editor-menu-popover button { width: 100%; justify-content: flex-start; gap: 8px; text-align: start; }
.editor-menu-popover button .ui-icon { width: 17px; height: 17px; }
.editor-menu-popover .editor-nesting-group { display: grid; gap: 1px; }
.editor-menu-popover .editor-nesting-group button { width: 100%; justify-content: flex-start; gap: 8px; }
.editor-menu-popover .editor-nesting-group button::after { font-size: var(--text-caption); }
.editor-menu-popover #editor-indent::after { content: 'Сделать пункт подшагом'; }
.editor-menu-popover #editor-outdent::after { content: 'Поднять пункт на уровень выше'; }
/* Each choice is set in the style it applies, so the menu shows the result before the click. */
.editor-menu-popover button[data-editor-value="h2"] { font-size: var(--text-title); font-weight: 800; }
.editor-menu-popover button[data-editor-value="h3"] { font-weight: 700; }
.editor-menu-popover button[data-editor-value="blockquote"] { border: 1px solid var(--accent-line); border-radius: var(--radius-xs); color: var(--accent-ink); }
/* Preview is a mode, not a format, so it sits apart from the formatting buttons. */
.editor-preview-toggle { min-height: 32px; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--paper); color: var(--ink-soft); cursor: pointer; font-size: var(--text-caption); font-weight: 700; }
.editor-preview-toggle:hover { border-color: var(--line-strong); }
.editor-preview-toggle[aria-pressed=true] { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.editor-toolbar button code { padding: 2px 5px; border-radius: var(--radius-xs); background: var(--sunken-deep); font-size: .92em; }
.instruction-preview { width: 100%; max-width: none; min-height: 280px; padding: 18px; border: 1px solid var(--line); border-block-start: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--paper); }
/* The editor carries `article-content` too: what a format looks like here is what it will
 * look like when it is published, so a table has its grid and a note its yellow band.
 *
 * It carries the reader's measure and type as well. The field keeps the full width of the
 * card — the toolbar needs it — but the line the author writes is the line the employee will
 * read: 72ch at 16px, not a 936px line at 15px that broke into different places on publish. */
.rich-editor { min-height: 330px; max-height: 620px; max-width: none; padding: 22px; overflow: auto; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--paper); }
.rich-editor > * { max-width: 72ch; }
.rich-editor > :first-child { margin-block-start: 0; }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--muted-weak); pointer-events: none; }
.rich-editor:focus-visible { outline: 2px solid var(--accent-ink-soft); outline-offset: 1px; border-color: var(--accent-ink-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.rich-editor h1, .rich-editor h2, .rich-editor h3 { margin-block: 20px 8px; color: var(--ink); }
.editor-wiki-link { display: inline-block; color: var(--accent-ink); text-decoration: none; }
.link-picker { width: min(520px, calc(100vw - 50px)); padding: 12px; position: absolute; z-index: 25; inset: 42px 8px auto auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: 0 18px 55px rgb(22 24 28 / 22%); }
.link-picker-head { margin-block-end: 8px; display: flex; justify-content: space-between; align-items: center; }
.link-picker-head button { width: 31px; height: 31px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: var(--text-title); }
.link-picker > input { margin-block-end: 8px; }
.link-results { max-height: 330px; overflow: auto; }
.link-result { width: 100%; padding: 9px; border: 0; border-radius: var(--radius-sm); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; background: transparent; cursor: pointer; text-align: start; }
.link-result:hover { background: var(--sunken); }
.link-result-copy strong, .link-result-copy small { display: block; }
.link-result-copy small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-caption); }
.link-result-copy p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.35; }

.source-methods { margin-block-end: 18px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.source-method { min-height: 164px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; grid-template-columns: 48px 1fr; gap: 17px; background: var(--paper); }
.source-method.selected { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line), var(--shadow-sm); }
.source-method.locked { background: var(--sunken); }
.source-method-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--accent); background: var(--nav); font-size: var(--text-page); }
.source-method h2 { margin: 11px 0 5px; font-size: var(--text-title); }
.source-method p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.badge { width: max-content; padding: 4px 7px; border-radius: var(--radius-pill); background: var(--sunken-deep); color: var(--muted); font-size: var(--text-caption); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.badge.free, .badge.active { color: var(--success-ink); background: var(--success-soft); }
.badge.paid { color: var(--accent-ink); background: var(--accent-soft); }
.badge.locked { color: var(--danger-ink); background: var(--danger-soft); }
#sources-view .page-heading { margin-block-end: 52px; }
.projects-workspace { container: projects / inline-size; overflow: visible; }
.project-command-bar { min-height: 48px; margin-block-end: 30px; position: relative; z-index: 3; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.project-command-group { min-width: 0; display: flex; align-items: center; gap: 7px; }
.project-actions-menu { position: relative; flex: 0 0 auto; }
.project-actions-menu > summary { list-style: none; }
.project-actions-menu > summary::-webkit-details-marker { display: none; }
.project-actions-summary { min-width: 112px; }
.project-actions-chevron { width: 14px; height: 14px; margin-inline-start: 2px; transform: rotate(90deg); transition: transform 150ms ease; }
.project-actions-menu[open] .project-actions-chevron { transform: rotate(-90deg); }
.project-actions-popover { width: 250px; padding: 7px; position: absolute; z-index: 20; inset: calc(100% + 7px) auto auto 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-md); }
.project-action-button { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); display: flex; gap: 9px; align-items: center; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: var(--text-caption); font-weight: 700; text-align: start; }
.project-action-button:hover:not(:disabled) { color: var(--ink); background: var(--sunken); }
.project-action-button.danger { margin-block-start: 5px; border-block-start: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--danger); }
.project-action-button.danger:hover:not(:disabled) { background: var(--danger-soft); }
.project-refresh-button { margin-inline-start: auto; }
.project-command-bar .button { min-height: 46px; padding: 9px 16px; font-size: var(--text-caption); font-weight: 400; }
.projects-list-frame { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.projects-list-heading { min-height: 72px; padding: 14px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.projects-list-heading h2 { margin: 0; font-size: var(--text-title); }
.projects-list-heading p { margin: 3px 0 0; color: var(--muted); font-size: var(--text-caption); }
.project-count { min-width: 30px; height: 30px; padding-inline: 9px; border-radius: var(--radius-pill); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); font-size: var(--text-micro); font-weight: 800; }
/* Wide enough for the longest heading to stand on one line: «НУЖНО ОБНОВИТЬ» broke in two and
   pushed «ЖДУТ ПРОВЕРКИ» after it, which read as four headings over three columns of numbers. */
.projects-list-header, .project-main { display: grid; grid-template-columns: minmax(260px, 320px) minmax(100px, 1fr) minmax(90px, 1fr) minmax(80px, 1fr) minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(100px, 1fr); gap: 9px; align-items: center; }
.projects-list-header { min-height: 50px; padding: 0 16px; border-block-start: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: var(--text-caption); font-weight: 600; line-height: 1.15; }
.projects-list-header > span { min-width: 0; }
.projects-list-header > span:first-child { padding-inline-start: 31px; }
.project-dialog-card { width: min(560px, calc(100vw - 30px)); }
#ai-provider-dialog { width: min(780px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow-y: auto; }
#ai-provider-dialog .ai-provider-dialog-card { width: 100%; padding: 30px 38px; }
#ai-provider-dialog .ai-provider-dialog-card > label { margin-block: 12px; }
#ai-provider-dialog .form-actions { margin-block-start: 16px; }
.instructed-kinds { margin-block: 16px 0; padding: 0; border: 0; }
.instructed-kinds legend { padding: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.instructed-kinds-copy { display: none; }
.instructed-kinds-scroll-hint { display: none; }
.instructed-kinds-list { max-height: 210px; padding: 4px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
.instructed-kind { margin: 0; padding: 5px 6px; border-radius: var(--radius-xs); display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: var(--text-caption); font-weight: 600; cursor: pointer; }
.instructed-kind:hover { background: var(--sunken); }
.instructed-kind input { width: 16px; height: 16px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--accent-strong); }
.instructed-kind .object-kind-icon { width: 16px; height: 16px; color: var(--muted); }
.project-settings-option { margin: 16px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--paper-raised); cursor: pointer; }
.project-settings-option strong, .project-settings-option small { display: block; }
.project-settings-option strong { color: var(--ink); font-size: var(--text-caption); }
.project-settings-option small { margin-block-start: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 500; line-height: 1.45; }
#source-dialog-copy { display: none; }
@media (min-width: 768px) {
  #project-dialog { height: min(540px, calc(100dvh - 30px)); }
  #source-dialog { height: min(760px, calc(100dvh - 30px)); }
  #project-settings-dialog { height: min(550px, calc(100dvh - 30px)); }
  :is(#project-dialog, #source-dialog, #project-settings-dialog) > .login-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog) .form-actions { margin-block-start: auto; }
  #project-delivery small { display: none; }
  #project-settings-dialog .project-settings-option {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}
.project-delete-card { width: min(560px, calc(100vw - 30px)); }
.dialog-feature-icon.danger { color: var(--danger); background: var(--danger-soft); }
.danger-text { color: var(--danger); }
.delete-confirmation-lead { margin-block: 12px; display: flex; gap: 12px; align-items: center; }
.delete-confirmation-lead p { margin: 0; color: var(--ink-soft); line-height: 1.45; }
.delete-confirmation-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); }
.delete-confirmation-icon .ui-icon { width: 22px; height: 22px; }
.delete-summary { margin: 14px 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 4px; color: var(--ink-soft); background: var(--paper-raised); }
.delete-summary strong { font-size: var(--text-caption); }
.delete-summary small { color: var(--muted); font-size: var(--text-micro); font-weight: 500; }
.path-note { margin-block: 17px; padding: 12px; border-radius: var(--radius-sm); display: grid; grid-template-columns: 23px 1fr; gap: 9px; background: var(--sunken); }
.path-note > span { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; font: 700 10px Georgia, serif; }
.path-note p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.folder-picker { padding: 14px; border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-wash); }
.folder-picker input { min-height: 36px; padding: 5px; border: 0; background: transparent; }
.folder-picker small { color: var(--muted); font-weight: 500; }
.upload-progress { margin-block: 14px; padding: 13px; border-radius: var(--radius-sm); background: var(--progress-soft); }
.upload-progress > div { margin-block-end: 7px; display: flex; justify-content: space-between; color: var(--progress-ink); font-size: var(--text-micro); }
.upload-progress progress { height: 8px; background: var(--progress-line); }
.managed-copy { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
.projects-list { margin: 0; }
.project-row { border-block-end: 1px solid var(--line); background: var(--paper); }
.project-row:last-child { border-block-end: 0; }
.project-row:hover { background: var(--paper-raised); }
.project-row.selected { background: var(--selection-project); }
.project-main { width: 100%; min-height: 69px; padding: 10px 16px; border: 0; background: transparent; cursor: pointer; text-align: start; }
.project-main:hover { background: var(--accent-wash); }
.project-main:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent-ink-soft); outline-offset: -3px; }
.project-overview { min-width: 0; display: flex; gap: 13px; align-items: center; }
.project-identity { min-width: 0; flex: 0 1 auto; display: flex; gap: 11px; align-items: center; }
.project-selection { width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; }
.project-row.selected .project-selection { border-color: var(--accent); }
.project-row.selected .project-selection::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.project-copy { min-width: 0; }
.project-copy strong, .project-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-copy strong { font-size: var(--text-ui); }
.project-copy small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-micro); }
.project-list-value { color: var(--ink-soft); font-size: var(--text-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
.project-updated { white-space: nowrap; }
.project-detail-grid { margin-block-start: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
#sources-view .project-detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.project-detail-panel { min-width: 0; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.project-detail-heading { min-height: 42px; margin-block-end: 10px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.project-detail-heading h2 { margin: 0; font-size: var(--text-title); }
.project-detail-heading p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-caption); }
.project-composition-list .project-source-row:first-child { border-block-start: 0; }
.project-detail-panel > .switch-row { margin-block-start: 8px; padding: 12px 0; border: 0; background: transparent; }
.project-detail-panel > .switch-row small { margin-block-start: 16px; line-height: 1.55; }
.project-source-panel { padding: 0 18px 10px 67px; border-block-start: 1px solid var(--line); background: var(--paper-raised); }
.project-source-panel-heading { min-height: 45px; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.project-source-panel-heading strong, .project-source-panel-heading small { display: block; }
.project-source-panel-heading strong { font-size: var(--text-caption); }
.project-source-panel-heading small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-caption); }
.project-source-row { min-height: 48px; padding: 7px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-block-start: 1px solid var(--sunken-deep); }
.project-source-row.disabled { opacity: .55; }
.project-source-row.stale { border-inline-start: 3px solid var(--danger-ink); padding-inline-start: 9px; }
.project-source-copy { min-width: 0; display: flex; gap: 9px; align-items: center; }
.project-source-copy > .ui-icon { width: 20px; height: 20px; color: var(--accent-ink); }
.project-source-copy strong, .project-source-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-source-copy strong { font-size: var(--text-caption); }
.project-source-copy small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-caption); }
/* Composition text must shrink before the existing actions, including long localized dates. */
.project-composition-list .project-source-row { flex-direction: row; gap: 12px; }
.project-composition-list .project-source-copy { flex: 1 1 0; }
.project-composition-list .project-source-copy > span { min-width: 0; }
.project-composition-list .project-source-copy > .ui-icon { flex: 0 0 20px; }
.project-composition-list .project-source-copy strong,
.project-composition-list .project-source-copy small { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.project-composition-list .source-edit,
.project-composition-list .source-retry { flex: 0 0 auto; }
.source-replace { flex: 0 0 auto; color: var(--accent-ink) !important; }
.source-actions { display: flex; gap: 4px; align-items: center; }
.source-actions .button { min-height: 40px; padding: 7px 9px; font-size: var(--text-caption); }
.source-enable { margin: 0 0 0 5px; display: flex; flex-direction: row; gap: 7px; align-items: center; color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
.source-enable .switch-input { width: 38px; min-height: 22px; height: 22px; padding: 2px; }
.source-enable .switch-input::before { width: 18px; height: 18px; }
.source-enable .switch-input:checked::before { transform: translateX(16px); }
.project-status { flex: 0 0 auto; display: grid; justify-items: start; gap: 4px; text-align: start; }
.project-status small { display: none; }
.status-chip { display: inline-flex; width: max-content; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 5px 8px; border-radius: var(--radius-pill); color: var(--muted); background: var(--sunken-deep); font-size: var(--text-caption); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.status-chip.success { color: var(--success-ink); background: var(--success-soft); }
.status-chip.progress { color: var(--progress-ink); background: var(--progress-soft); }
.status-chip.danger { color: var(--danger-ink); background: var(--danger-soft); }

.jobs-list { display: grid; }
.job-row { min-height: 62px; padding: 11px 3px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-block-start: 1px solid var(--line); }
/* The panel edge already separates the list from the heading. */
.job-row:first-child { border-block-start: 0; }
.job-timeline { width: 10px; height: 10px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--sunken); }
.job-timeline.success { border-color: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.job-timeline.progress { border-color: var(--progress); box-shadow: 0 0 0 4px var(--progress-soft); }
.job-timeline.danger { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.job-trailing { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.job-cancel { min-height: 34px; padding-inline: 10px; color: var(--danger-ink); }
.job-copy strong, .job-copy small { display: block; }
.job-copy strong { font-size: var(--text-caption); }
.job-copy small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
/* Which stage, how far into it, and the share as a number — the bar alone answered none of it. */
.job-meter { margin-block-start: 9px; display: grid; grid-template-columns: minmax(0, 360px) auto; gap: 4px 10px; align-items: center; }
.job-step { grid-column: 1 / -1; color: var(--progress-ink); font-size: var(--text-micro); font-weight: 700; }
.job-percent { color: var(--muted); font-size: var(--text-micro); font-weight: 700; font-variant-numeric: tabular-nums; }
.job-progress { width: 100%; height: 6px; border-radius: var(--radius-pill); overflow: hidden; background: var(--progress-line); }
.job-progress-fill { width: 100%; height: 100%; display: block; border-radius: inherit; background: var(--progress); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
/* Nothing has been counted yet, so there is no share to show: the bar travels instead of
   sitting at nought, which reads as a job that has stalled rather than one still counting. */
.job-progress.counting .job-progress-fill { width: 35%; animation: job-counting 1.4s ease-in-out infinite; }
@keyframes job-counting {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}
.empty-inline { margin: 0; padding: 25px 10px; color: var(--muted); text-align: center; font-size: var(--text-caption); }

.ai-dashboard { color: var(--ink); }
.ai-dashboard-head { display: grid; gap: 14px; align-items: start; }
.ai-dashboard-head h2 { margin: 0 0 6px; font-size: var(--text-section); letter-spacing: -.025em; }
.ai-dashboard-head p { margin: 0; color: var(--muted); font-size: var(--text-caption); }
/* `flex: 0 0 auto`: without it the wrapping row shrank to one control wide and stacked the
   period under the project, in a column pinned to the right edge of the heading. */
.ai-usage-controls { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 36px; }
/* Definite widths: `min(…, 100%)` against an indefinite basis made the row measure itself short
   and wrap, which is how the period ended up stacked under the project. */
.ai-usage-controls label { width: 200px; max-width: 100%; margin: 0; font-size: var(--text-caption); }
.ai-usage-controls label:first-child { width: 320px; }
.ai-usage-controls select { min-height: 38px; margin-block-start: 4px; }
.ai-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 9px; align-items: end; }
.ai-controls label { width: auto; margin: 0; color: var(--on-dark-muted); font-size: var(--text-micro); }
.ai-controls select { min-width: 140px; min-height: 38px; color: var(--on-dark); border-color: var(--muted); background: var(--nav-soft); }
.ai-controls .button { min-height: 38px; }
.ai-metric-grid { margin-block: 23px 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ai-metric-grid article { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-raised); }
.ai-metric-grid span, .ai-metric-grid strong { display: block; }
.ai-metric-grid span { color: var(--muted); font-size: var(--text-caption); }
.ai-metric-grid strong { margin-block-start: 5px; color: var(--ink); font-size: var(--text-section); font-variant-numeric: tabular-nums; }
.ai-chart-wrap { margin-inline: -20px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.ai-chart-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--text-caption); }
.ai-usage-chart { width: 100%; height: 260px; margin-block-start: 10px; overflow: visible; }
.ai-usage-chart[hidden] { display: none; }
.ai-chart-grid-line { stroke: var(--line); stroke-width: 1; }
.ai-chart-axis-label { fill: var(--muted); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.ai-chart-series-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-chart-point { stroke: var(--on-dark); stroke-width: 2; }
.ai-chart-bar { opacity: .9; }
.ai-chart-bar:hover { opacity: 1; }
.ai-chart-legend { margin-block-start: 8px; display: flex; flex-wrap: wrap; gap: 7px 16px; }
.ai-chart-legend-item { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: var(--text-caption); }
.ai-chart-legend-marker { width: 9px; height: 9px; border-radius: 2px; }
.review-queue-card { margin-block-start: 0; }
.review-queue-card .settings-panel { padding: 0; overflow: hidden; }
.review-queue-card .settings-panel > .section-heading { padding: 22px 18px 0; }
.ai-review-list-head, .ai-review-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px 80px; gap: 14px; align-items: center; }
.ai-review-list-head { min-height: 48px; padding: 0 18px; border-block-end: 1px solid var(--line); color: var(--muted); font-size: var(--text-micro); font-weight: 400; }
.ai-review-list { display: grid; gap: 0; }
.ai-review-row { width: 100%; min-height: 76px; padding: 10px 18px; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; color: inherit; background: var(--paper); cursor: pointer; text-align: start; }
.ai-review-row:last-child { border-block-end: 0; }
.ai-review-row:hover { background: var(--accent-wash); }
.ai-review-identity { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; align-items: center; }
.ai-review-mark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); }
.ai-review-mark .ui-icon { width: 23px; height: 23px; }
.ai-review-created { color: var(--ink-soft); font-size: var(--text-caption); }
.ai-review-open { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: var(--text-caption); }
.ai-review-open .ui-icon { width: 15px; height: 15px; }
.review-queue-card .empty-inline { margin: 0; padding: 22px 18px; }
.review-toggle { margin-block-start: 10px; }
.dialog-context { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; gap: 10px; align-items: center; background: var(--paper-raised); }
.dialog-context > .ui-icon { color: var(--accent-ink); }
.dialog-context small, .dialog-context strong { display: block; }
.dialog-context small { color: var(--muted); font-size: var(--text-caption); }
/* Wider than the other dialogs: it holds a two-column summary whose values are model names
   like «LM Studio · qwen2.5-14b», and at the standard width those broke mid-identifier. */
.project-ai-card { width: 100%; }
.generation-preview { margin-block: 16px; border-block: 1px solid var(--line); display: grid; background: transparent; }
.generation-preview > div { min-width: 0; min-height: 52px; padding: 11px 2px; border-block-end: 1px solid var(--line); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; }
.generation-preview > div:last-child { border-block-end: 0; }
.generation-preview span, .generation-preview strong { display: block; }
.generation-preview span { color: var(--ink-soft); font-size: var(--text-caption); font-weight: 600; }
.generation-preview strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-ui); }

.ai-behavior-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* The panel is the surface now, so what sits inside it does not draw a second one. */
.ai-prompt-form { margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.ai-prompt-form > label { margin: 0 0 9px; }
/* The longest prose an administrator writes on this portal, and it was set across the whole
   card at caption size. It reads at the register's own measure now, like everything else. */
.ai-prompt-editor { min-height: 170px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 40px minmax(0, 1fr); background: var(--paper); }
.ai-prompt-line-numbers { min-height: 170px; padding: 10px 8px; overflow: hidden; color: var(--muted); background: var(--sunken); text-align: end; user-select: none; font-size: var(--text-ui); line-height: 1.6; }
.ai-prompt-line-numbers > span { display: block; }
/* Keep wrapping stable when line-number height makes the native scrollbar appear/disappear. */
.ai-prompt-form .ai-prompt-editor textarea { min-height: 170px; padding: 10px 44px 10px 12px; border: 0; border-inline-start: 1px solid var(--line); border-radius: 0; resize: vertical; scrollbar-gutter: stable; font-family: inherit; font-size: var(--text-ui); line-height: 1.6; }
.ai-prompt-form .ai-prompt-editor textarea:focus-visible { outline: 2px solid var(--accent-ink-soft); outline-offset: -2px; border-color: var(--line); box-shadow: none; }
.ai-prompt-expand { width: 34px; height: 34px; padding: 0; position: absolute; z-index: 2; inset: 8px 8px auto auto; border: 1px solid transparent; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--ink-soft); background: var(--paper-raised); cursor: pointer; }
.ai-prompt-expand:hover { border-color: var(--line-strong); color: var(--ink); }
.ai-prompt-expand .ui-icon { width: 18px; height: 18px; }
.ai-prompt-editor.expanded { min-height: 0; position: fixed; z-index: 110; inset: 24px; grid-template-columns: 48px minmax(0, 1fr); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.ai-prompt-editor.expanded .ai-prompt-line-numbers,
.ai-prompt-form .ai-prompt-editor.expanded textarea { min-height: calc(100vh - 48px); height: 100%; resize: none; }
body:has(.ai-prompt-editor.expanded) { overflow: hidden; }
.ai-prompt-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ai-generation-layout { padding-block-start: 42px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); gap: 20px; align-items: start; }
.ai-generation-side { min-width: 0; display: grid; gap: 30px; }
.ai-generation-layout .settings-section { min-width: 0; margin: 0; }
.ai-generation-layout .settings-panel { height: auto; }
.ai-generation-layout .settings-panel > .section-heading { margin-block-end: 26px; }
#ai-behavior-settings > .settings-panel { min-height: 615px; }
#ai-project-rules > .settings-panel { min-height: 209px; }
.review-queue-card > .settings-panel { min-height: 375px; }
.ai-generation-layout .compact-switch-row { padding: 0 0 24px; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; background: transparent; }
.ai-generation-card { padding: clamp(23px, 3vw, 32px); border-radius: var(--radius-md); background: var(--paper); }
.field-heading { display: block; margin-block-end: 8px; font-size: var(--text-caption); }
.ai-review-project-list { display: grid; gap: 0; }
.ai-review-project-head, .ai-review-project-row { display: grid; grid-template-columns: minmax(140px, .75fr) minmax(150px, .75fr) minmax(210px, 1fr); gap: 12px; align-items: center; }
.ai-review-project-head { min-height: 38px; padding: 0 2px; border-block-end: 1px solid var(--line); color: var(--muted); font-size: var(--text-micro); font-weight: 400; }
.ai-generation-layout .settings-panel > .section-heading h2 { font-weight: 600; }
.ai-review-project-row { min-height: 58px; margin: 0; padding: 8px 2px; border: 0; border-radius: 0; }
.ai-review-project-copy strong, .ai-review-project-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-review-project-copy strong { font-size: var(--text-caption); }
.ai-review-project-copy small { margin-block-start: 2px; color: var(--muted); font-size: var(--text-caption); }
.ai-review-project-status { min-width: 0; display: inline-flex; gap: 8px; align-items: center; color: var(--ink-soft); font-size: var(--text-caption); }
.ai-review-project-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--success); }
.ai-review-project-status-dot.off { background: var(--muted-weak); }
@media (min-width: 1180px) {
  .workspace:has(> #ai-generation-view.active-view) > #ai-generation-view { padding: 45px 51px 52px 34px; }
  #ai-generation-view .ai-generation-layout { margin-inline-start: -14px; padding-block-start: 31px; grid-template-columns: minmax(0, .91fr) minmax(430px, 1.09fr); gap: 25px; }
  #ai-generation-view #ai-review-required:checked { background: var(--accent); }
  /* The real prompt is longer than the illustrative copy, so its viewport—not its contents—
     carries the canonical 278px measure and keeps the publication card on the shared baseline. */
  #ai-behavior-settings .ai-prompt-form > label { margin-block-end: 22px; }
  #ai-behavior-settings #ai-prompt-editor:not(.expanded) { height: 278px; }
  #ai-behavior-settings .ai-prompt-actions { justify-content: space-between; }
  #ai-behavior-settings #restore-ai-prompt { width: 185px; padding-inline: 4px; justify-content: flex-start; }
  #ai-behavior-settings .ai-prompt-actions .button.primary { width: 205px; transform: translateX(10px); }
  .ai-generation-layout .review-queue-card .settings-panel > .section-heading { margin-block-end: 22px; padding-block-start: 18px; }
  .workspace:has(> #ai-agents-view.active-view) > #ai-agents-view { padding-inline-end: 51px; padding-block-end: 48px; }
  #ai-index-settings .ai-index-method { min-height: 0; padding-block: 15px; grid-template-columns: 330px minmax(0, 1fr); align-items: start; }
  #ai-index-settings .ai-index-method-heading { display: grid; justify-content: start; gap: 10px; }
  #ai-index-settings .ai-index-method-state { max-width: 100%; justify-self: start; white-space: normal; }
  #ai-index-settings .ai-index-fields {
    grid-template-columns: 235px 230px;
    grid-template-rows: 17px 44px auto;
    grid-template-areas:
      "model-label provider-label"
      "model provider";
    height: auto;
    align-self: center;
    justify-content: start;
    gap: 4px 96px;
  }
  #ai-index-settings label[for$="-model"] { grid-area: model-label; }
  #ai-index-settings input[id$="-model"] { grid-area: model; }
  #ai-index-settings label[for$="-provider"] { grid-area: provider-label; }
  #ai-index-settings select[id$="-provider"] { grid-area: provider; }
  #ai-index-settings .ai-index-fields.single { width: 100%; max-width: 420px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "provider-label" "provider"; gap: 6px; justify-self: end; align-self: start; }
  #ai-index-form .ai-prompt-actions { min-height: 44px; align-items: flex-start; justify-content: flex-start; }
  #ai-index-settings .ai-index-fields.single .field-note { margin-block: 8px 0; line-height: 1.45; }
  #ai-index-form .ai-prompt-actions .button { min-height: 38px; padding-block: 7px; transform: translateY(7px); }
  #ai-agent-settings > .section-heading { margin-block-end: 10px; }
  #ai-agent-settings > .settings-panel { padding: 0; border: 0; background: transparent; }
  #ai-agent-settings .agent-list { gap: 8px; }
  #ai-agent-settings .agent-row { min-height: 98px; padding-inline: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  #ai-agent-settings .agent-row:last-child { border-block-end: 1px solid var(--line); }
}
.ai-review-project-row select { min-height: 40px; padding: 5px 30px 5px 8px; font-size: var(--text-caption); }
.provider-heading-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.button.agent-outline { border-color: var(--agent-line); color: var(--agent-ink); background: var(--paper); }
.button.agent-outline:hover { background: var(--agent-wash); }
.provider-heading-copy #provider-count { color: var(--muted); font-size: var(--text-caption); }
#ai-settings-view > .page-heading { margin-block-end: 26px; }
#ai-models-section { margin-block-start: 4px; margin-inline: -14px 5px; }
#ai-models-section .settings-panel { padding: 17px 20px 3px; overflow: visible; }
.ai-provider-list-header, .ai-provider-row { min-width: 0; display: grid; grid-template-columns: minmax(160px, 1.5fr) minmax(100px, .8fr) minmax(120px, 1.1fr) 92px 100px 156px; gap: 14px; align-items: center; }
.ai-provider-list-header { min-height: 42px; padding: 0 14px; border-block: 1px solid var(--line); color: var(--muted); background: var(--sunken); font-size: var(--text-caption); font-weight: 500; }
.ai-provider-list { min-width: 0; display: grid; gap: 0; }
.ai-provider-row { min-height: 72px; padding: 10px 14px; border-block-end: 1px solid var(--line); }
.ai-provider-row:last-child { border-block-end: 0; }
.ai-provider-row.disabled { opacity: .6; background: var(--sunken); }
.ai-provider-cell { min-width: 0; }
.ai-provider-identity { display: flex; align-items: center; gap: 11px; }
/* Every model on this screen sits outside the portal's own knowledge, so the whole screen is
   drawn on the model's side of the boundary — the same violet the chat and the agents use. */
.ai-provider-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--agent-ink); background: var(--agent-soft); }
.ai-provider-copy { min-width: 0; }
.ai-provider-copy strong, .ai-provider-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-provider-copy strong { font-size: var(--text-ui); }
.ai-provider-copy small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); }
.ai-provider-model, .ai-provider-endpoint { overflow: hidden; color: var(--ink-soft); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.ai-provider-actions { display: flex; gap: 4px; align-items: center; }
.ai-provider-actions .button { min-height: 44px; padding-inline: 10px; font-size: var(--text-caption); }
.ai-provider-default { padding: 6px 10px; color: var(--agent-ink); background: var(--agent-soft); text-align: center; font-weight: 500; letter-spacing: normal; text-transform: none; }
.ai-provider-default-cell .make-default { min-height: 36px; padding-inline: 7px; }
.muted-value { color: var(--muted); }
.provider-actions-menu { position: relative; }
.provider-actions-menu > summary { list-style: none; }
.provider-actions-menu > summary::-webkit-details-marker { display: none; }
.provider-actions-popover { width: 170px; padding: 6px; position: absolute; inset-block-start: calc(100% + 5px); inset-inline-end: 0; z-index: 40; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; background: var(--paper); box-shadow: var(--shadow-md); }
.provider-action-button { min-height: 44px; padding: 7px 9px; border: 0; border-radius: var(--radius-xs); display: flex; align-items: center; gap: 7px; color: var(--ink-soft); background: transparent; cursor: pointer; font: inherit; font-size: var(--text-caption); text-align: start; }
.provider-action-button:hover { background: var(--sunken); }
.provider-action-button.danger { color: var(--danger-ink); }
.ai-period-control { width: 292px; margin: 0; padding: 0; border: 0; }
.ai-period-control legend { margin-block-end: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.ai-period-tabs { display: flex; border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: visible; background: var(--paper); }
.ai-period-tabs button { min-height: 38px; padding: 7px 11px; border: 0; border-inline-start: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: var(--text-caption); }
.ai-period-tabs button { flex: 1; }
.ai-period-tabs button:first-child { border-inline-start: 0; }
.ai-period-tabs button.active { position: relative; z-index: 1; border: 1px solid var(--accent-line); border-radius: var(--radius-xs); color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
#ai-dashboard { margin: 20px 5px 0 -14px; }
#ai-dashboard > .settings-panel { padding: 14px 20px 17px; }
.switch-row { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); grid-template-columns: 1fr auto; align-items: center; }
.switch-row strong, .switch-row small { display: block; }
.switch-row small { margin-block-start: 3px; color: var(--muted); font-weight: 500; }
/* Определяется автоматически, а не выбирается — глаз показывает факт, а не служит переключателем. */
.ai-vision-icon, .ai-provider-vision { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: var(--sunken-deep); }
.ai-vision-status { display: grid; }
.ai-vision-status .ai-vision-icon { width: 26px; height: 26px; border-radius: var(--radius-pill); }
.ai-vision-icon.supported, .ai-provider-vision.supported { color: var(--success-ink); background: var(--success-soft); }
.ai-provider-vision { width: 36px; height: 36px; }
/*
 * One card per row.
 *
 * Two columns inside a dialog left roughly twenty characters per line, so a choice like
 * «Внешние отчёты и обработки» broke into six two-word lines and an odd card was stranded
 * alone in the second row. Stacked, each option reads as a sentence.
 */
.choice-cards { margin-block: 16px; padding: 0; border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.choice-cards legend { margin-block-end: 5px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.choice-cards label { min-height: 0; margin: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); grid-template-columns: 28px 1fr; align-items: center; gap: 12px; position: relative; cursor: pointer; }
.choice-cards label:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
:is(#project-delivery, #source-delivery, #source-kind-options).choice-cards label:has(input:checked) { background: var(--settings-surface); }
.choice-cards input { width: 1px; height: 1px; min-height: 0; position: absolute; opacity: 0; }
.choice-cards .ui-icon { width: 25px; height: 25px; color: var(--accent-ink); }
.choice-cards strong, .choice-cards small { display: block; }
.choice-cards strong { font-size: var(--text-caption); }
.choice-cards small { margin-block-start: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 500; line-height: 1.4; }
.ai-generation-card { margin-block-start: 0; padding: 24px 0; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; align-items: end; color: var(--ink); background: transparent; box-shadow: none; }
.ai-generation-card h2 { margin: 5px 0 6px; }
.ai-generation-card p { margin: 0; color: var(--muted); }
.ai-controls label { color: var(--muted); font-size: var(--text-caption); }
.ai-controls select { color: var(--ink); border-color: var(--line-strong); background: var(--paper); }

.team-tabs { margin-block-end: 22px; display: flex; gap: 24px; border-block-end: 1px solid var(--line); }
.team-tab { min-height: 44px; margin-block-end: -1px; padding: 0 2px; border: 0; border-block-end: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: var(--text-caption); font-weight: 700; }
.team-tab.active { border-color: var(--selection-accent); color: var(--ink); }
.team-users-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.users-workspace { min-width: 0; container: users / inline-size; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.user-command-bar { min-height: 58px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; border-block-end: 1px solid var(--line); background: var(--paper-raised); }
.user-command-bar .button { min-height: 40px; padding: 8px 11px; font-size: var(--text-caption); }
.users-search { width: min(250px, 100%); min-height: 40px; margin: 0 0 0 auto; padding-inline: 11px; border: 1px solid var(--line); border-radius: var(--radius-xs); display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; align-items: center; color: var(--muted); background: var(--paper); }
.users-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.users-search input { min-width: 0; min-height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.users-list-frame { overflow: hidden; }
.users-list-heading { min-height: 67px; padding: 14px 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.users-list-heading h2 { margin: 0; font-size: var(--text-title); }
.user-count { min-width: 30px; height: 30px; padding-inline: 9px; border-radius: var(--radius-pill); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); font-size: var(--text-micro); font-weight: 800; }
.users-list-header, .user-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(85px, .7fr) minmax(90px, .7fr) minmax(132px, .9fr) minmax(86px, .65fr) minmax(72px, .55fr); gap: 12px; align-items: center; }
.users-list-header { min-height: 38px; padding: 0 18px; border-block: 1px solid var(--line); color: var(--muted); background: var(--sunken); font-size: var(--text-caption); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.users-list { margin: 0; }
.user-row { width: 100%; min-height: 67px; padding: 10px 18px; border: 0; border-block-end: 1px solid var(--line); color: var(--ink); background: var(--paper); cursor: pointer; font: inherit; text-align: start; }
.user-row:last-child { border-block-end: 0; }
.user-row:hover { background: var(--paper-raised); }
.user-row.selected { background: var(--selection-user); }
.user-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent-ink-soft); outline-offset: -3px; }
.user-identity { min-width: 0; display: flex; gap: 11px; align-items: center; }
.user-identity strong { overflow: hidden; font-size: var(--text-ui); text-overflow: ellipsis; white-space: nowrap; }
.user-login { overflow: hidden; color: var(--muted); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.user-authentication, .user-last-login { overflow: hidden; color: var(--muted); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.user-status { width: max-content; max-width: 100%; padding: 5px 8px; border-radius: var(--radius-pill); color: var(--success-ink); background: var(--success-soft); font-size: var(--text-caption); font-weight: 700; }
.user-status.inactive { color: var(--muted); background: var(--sunken-deep); }
.user-status.pending { color: var(--accent-ink); background: var(--accent-soft); }
.invite-explainer { margin: 12px 0 4px; padding: 12px 14px; border-inline-start: 3px solid var(--accent); color: var(--muted); background: var(--accent-soft); font-size: var(--text-caption); line-height: 1.45; }
.invite-result-field { display: grid; gap: 7px; }
.invite-result-field input { width: 100%; font-family: "Cascadia Mono", Consolas, monospace; font-size: var(--text-caption); }
#invite-result-expiry { margin-block: 8px 0; }
#invite-activation-error:focus, #user-form-error:focus, #user-edit-form-error:focus { outline: none; }
.team-access-summary { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.team-access-summary h2 { margin: 0 0 16px; font-size: var(--text-title); }
.team-access-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.access-metric { min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; justify-items: center; gap: 3px; text-align: center; }
.access-metric-icon { width: 32px; height: 32px; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.access-metric strong { font-size: var(--text-title); font-variant-numeric: tabular-nums; }
.access-metric > span:last-child { overflow: hidden; color: var(--muted); font-size: var(--text-micro); text-overflow: ellipsis; }
.team-integration-status { margin-block-start: 16px; display: grid; gap: 8px; }
.team-integration-card { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; align-items: center; color: var(--ink); background: var(--paper-raised); cursor: pointer; text-align: start; }
.team-integration-icon { width: 36px; height: 36px; grid-row: 1 / span 2; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.team-integration-card > span:last-child { color: var(--muted); font-size: var(--text-caption); }
.large-avatar { width: 40px; height: 40px; }
.role-label { width: max-content; max-width: 100%; padding: 5px 8px; border-radius: var(--radius-pill); overflow: hidden; color: var(--muted); background: var(--sunken-deep); font-size: var(--text-caption); white-space: normal; overflow-wrap: anywhere; }
/* A label is one grid row of its own, so a qualifier has to be wrapped with the label text —
   left loose it becomes the next row and reads as the field's value rather than its caption. */
.field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.optional-label { color: var(--muted); font-weight: 500; }
.field-note { margin-block-start: 5px; display: block; color: var(--muted); font-size: var(--text-micro); font-weight: 500; line-height: 1.4; }

#plugins-view .page-heading { margin-block-end: 17px; }
.plugin-controls { margin-block: 3px 18px; position: relative; inset-block-start: 3px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.plugin-controls > button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--ink-soft); background: var(--paper); cursor: pointer; }
.plugin-controls > button:hover { border-color: var(--accent-line); }
.plugin-controls > button.active { border-color: var(--selection-accent); color: var(--ink); background: var(--selection-filter); }
.plugin-search { width: min(374px, 100%); height: 40px; min-height: 40px; margin-inline-start: -1px; padding-inline: 13px; border: 1px solid var(--line); border-radius: var(--radius-xs); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: center; color: var(--muted); background: var(--paper); }
.plugin-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.plugin-search .ui-icon { width: 19px; height: 19px; }
.plugin-search input { min-width: 0; min-height: 0; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font-weight: 400; }
.plugin-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
@media (min-width: 1180px) {
  #plugins-view { padding: 28px 66px 52px 50px; }
}
/*
 * Fixed tracks for the status and the controls.
 *
 * Every row is its own grid, so content-sized tracks made each row measure itself: a plugin
 * with a «Настроить» button gave its control column half again the width of one without, and
 * the licence badge beside it landed at a different place on every line. Only the switches
 * lined up, because they are flush right. Fixed widths give the badges a column too.
 */
.plugin-card { min-height: 224px; padding: 21px 18px 18px 17px; position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(126px, 1fr) auto; gap: 12px 15px; align-items: start; background: var(--paper); }
.plugin-card:hover { border-color: var(--line-strong); }
.plugin-card.locked { background: var(--sunken); }
.plugin-symbol { width: 62px; height: 62px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink); background: var(--paper); font: 800 10px "Cascadia Mono", monospace; }
/* Yellow means the portal's own material. A plugin that hands the work to a model is not that,
   and marking it yellow put the register's colour on the one thing it does not answer for. */
.plugin-symbol.agent { border-color: var(--agent-line); color: var(--agent-ink); background: var(--agent-wash); }
.plugin-symbol .ui-icon { width: 34px; height: 34px; }
.plugin-card.locked .plugin-symbol { color: var(--muted); background: var(--paper-raised); }
.plugin-card[data-plugin-id="bitrix24"] .plugin-symbol { color: var(--bitrix-brand); }
.plugin-copy { min-width: 0; }
.plugin-copy h3 { margin: 7px 0 0; font-size: var(--text-read); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.plugin-copy p { min-height: 42px; margin: 6px 0 0; overflow: hidden; display: -webkit-box; color: var(--muted); font-size: var(--text-ui); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* Left edges align, so «ПЛАТНО» and «БЕСПЛАТНО» start on the same line down the page. */
.plugin-version { margin: 0; position: absolute; inset: 122px auto auto 17px; display: block; color: var(--muted); font-size: var(--text-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
#plugins-view .plugin-card,
#plugins-view .plugin-symbol:not(.agent),
#plugins-view .plugin-controls > button,
#plugins-view .plugin-search { background: var(--settings-surface); }
#plugins-view .plugin-controls > button.active { background: var(--selection-filter); }
#plugins-view .plugin-card.locked { background: var(--sunken); }
#plugins-view .plugin-card.locked .plugin-symbol { color: var(--muted); background: var(--paper-raised); }
#plugins-view .plugin-card[data-plugin-id="bitrix24"] .plugin-symbol { color: var(--bitrix-brand); }
.plugin-badges { min-width: 0; display: flex; flex-wrap: wrap; justify-content: start; gap: 5px; }
.plugin-card-footer { min-height: 40px; grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: flex-start; gap: 10px; align-items: center; align-self: end; }
.plugin-badges .badge { text-transform: none; letter-spacing: 0; }
.plugin-card-footer-main { min-width: 0; margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.plugin-settings-button { min-height: 40px; padding: 8px 11px; font-size: var(--text-caption); font-weight: 400; }
.plugin-toggle { flex: 0 0 auto; margin-inline-start: auto; }
.plugin-toggle:checked { background: var(--accent); }
.plugin-toggle:disabled { opacity: .45; cursor: not-allowed; }

dialog { max-width: none; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-lg); }
:is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog),
:is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) > .login-card,
:is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) :is(input, select) {
  background-color: var(--settings-surface);
}
:is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) {
  /* These are compact task sheets over an already darkened workspace. The generic floating
     panel shadow spread into a second dark frame once the modal was scaled in the review and
     made the sheet look nested. Keep just the reference's close, soft elevation. */
  box-shadow: 0 12px 32px rgb(22 24 28 / 12%);
}
:is(#login-dialog, #invite-activation-dialog, #invite-result-dialog, #ldap-test-dialog, #report-dialog),
:is(#login-dialog, #invite-activation-dialog, #invite-result-dialog, #ldap-test-dialog, #report-dialog) .login-card,
:is(#login-dialog, #invite-activation-dialog, #invite-result-dialog, #ldap-test-dialog, #report-dialog) :is(input, textarea) {
  background-color: var(--settings-surface);
}
:is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #ai-provider-dialog, #agent-dialog, #article-ai-dialog, #project-ai-dialog, #login-dialog, #invite-activation-dialog, #invite-result-dialog, #ldap-test-dialog, #report-dialog):focus-visible { outline: none; }
dialog::backdrop { background: var(--backdrop); }
:is(#ai-provider-dialog, #agent-dialog, #article-ai-dialog, #project-ai-dialog)::backdrop {
  background: var(--ai-dialog-backdrop);
}
:is(#ai-provider-dialog, #agent-dialog, #article-ai-dialog, #project-ai-dialog),
#ai-provider-dialog .ai-provider-dialog-card,
#agent-dialog .agent-editor-card,
#article-ai-dialog .login-card,
#article-ai-dialog .dialog-context,
#project-ai-dialog .login-card { background-color: var(--ai-dialog-paper); }
:is(#ai-provider-dialog, #agent-dialog, #article-ai-dialog, #project-ai-dialog) :is(input, textarea, select) { background-color: var(--ai-dialog-paper); }
.login-card { width: min(430px, calc(100vw - 30px)); padding: 38px; position: relative; }
/* Titles carry project and model names of any length, so the break is balanced rather than
   left to fall wherever the line runs out — «Настройки «Бухгалтерия / 3.0»» is what happens
   otherwise, with the closing quote orphaned onto the version number. */
.login-card h2 { margin: 7px 0 8px; font-size: var(--text-page); letter-spacing: -.03em; text-wrap: balance; }
.login-card h2:focus { outline: none; }
.login-card > p { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.login-security-note, .ldap-password-note { display: flex; gap: 8px; align-items: center; }
.login-security-note .ui-icon, .ldap-password-note .ui-icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent-strong); }
#login-dialog .login-security-note .ui-icon { width: 30px; height: 30px; }
#ldap-test-dialog .ldap-password-note .ui-icon { width: 28px; height: 28px; color: var(--muted); }
.dialog-field { margin-block: 15px; display: grid; gap: 7px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.dialog-field > label { margin: 0; display: block; }
.password-field { display: block; position: relative; }
.password-field input { padding-inline-end: 48px; }
.password-visibility { width: 40px; height: 40px; padding: 0; position: absolute; inset: 2px 2px auto auto; border: 0; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.password-visibility:hover { color: var(--ink); background: var(--sunken); }
.password-visibility .ui-icon { width: 19px; height: 19px; }
.login-divider { margin: 18px 0 14px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; color: var(--muted); font-size: var(--text-caption); }
.login-divider::before, .login-divider::after { content: ''; height: 1px; background: var(--line); }
.bitrix24-login {
  padding-inline: 30px;
  gap: 9px;
  justify-content: flex-start;
  color: var(--ink);
  background: var(--settings-surface);
  text-decoration: none;
}
.bitrix24-login > span:last-child { font-weight: 400; }
.bitrix24-wordmark { color: var(--ink-soft); font-size: var(--text-title); font-weight: 800; letter-spacing: -.04em; }
#login-dialog .bitrix24-wordmark { font-size: var(--text-task-title); }
.bitrix24-wordmark > span { color: var(--bitrix-brand); }
/* One column: every field here is a line of configuration read top to bottom, and a grid would
   put the password beside the address as though they were a pair. A DN or an LDAP URL is a long
   string but never a paragraph, so the column has a measure: stretched to the whole card, six of
   them read as six empty rows with a word at the left edge of each. */
.ldap-form { display: grid; gap: 14px; }
/* The measure belongs to the panel, not to the form inside it: capping the form alone left a
   third of the card empty inside its own border. */
#ldap-settings .settings-panel, #bitrix24-settings .settings-panel { max-width: 740px; }
.ldap-form .form-actions { margin-block-start: 4px; }
.bitrix24-callback { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.bitrix24-callback .button { margin-block-end: 1px; }
.bitrix24-directory-row { margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bitrix24-directory-row > div { display: grid; gap: 3px; }
.bitrix24-directory-row span { color: var(--muted); font-size: var(--text-caption); }
.dialog-feature-icon { width: 48px; height: 48px; margin-block-end: 18px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); font-size: var(--text-section); }
.dialog-close { width: 40px; height: 40px; padding: 0; position: absolute; inset: 12px 12px auto auto; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; line-height: 1; }
.dialog-close .ui-icon { width: 22px; height: 22px; }
.dialog-close:hover { background: var(--sunken); }

/* The remaining reference dialogs are task sheets, not marketing cards. Their heading and
   fields already explain the task, so repeating it with a large decorative tile or an eyebrow
   only spends vertical space. The destructive confirmation keeps its warning treatment. */
#project-dialog .dialog-feature-icon,
#project-dialog .context-label,
#user-dialog .dialog-feature-icon,
#user-edit-dialog .context-label,
#password-dialog .dialog-feature-icon,
#password-dialog .context-label,
#avatar-dialog .context-label,
#avatar-dialog .avatar-dialog-intro,
#ai-provider-dialog .dialog-feature-icon,
#report-dialog .dialog-feature-icon,
#report-dialog .context-label,
#source-dialog .context-label,
#source-edit-dialog .dialog-feature-icon,
#source-edit-dialog .context-label,
#article-ai-dialog .context-label,
#project-ai-dialog .context-label { display: none; }

#project-dialog .login-card,
#project-settings-dialog .login-card,
#project-delete-dialog .login-card,
#source-edit-dialog .login-card,
#password-dialog .login-card,
#avatar-dialog .login-card,
#user-dialog .login-card,
#user-edit-dialog .login-card,
#invite-result-dialog .login-card,
#invite-activation-dialog .login-card,
#login-dialog .login-card,
#ldap-test-dialog .login-card,
#report-dialog .login-card,
#article-ai-dialog .login-card,
#project-ai-dialog .login-card { padding: 26px 28px; }
#article-ai-dialog .login-card,
#project-ai-dialog .login-card { padding-block-end: 36px; }
#project-dialog .login-card,
#project-settings-dialog .login-card,
#project-delete-dialog .login-card,
#source-edit-dialog .login-card,
#password-dialog .login-card,
#avatar-dialog .login-card,
#user-dialog .login-card,
#user-edit-dialog .login-card,
#invite-result-dialog .login-card,
#invite-activation-dialog .login-card,
#login-dialog .login-card,
#ldap-test-dialog .login-card,
#report-dialog .login-card { width: 100%; }

/* The reference task dialogs use the desktop canvas instead of reusing the narrow sign-in
   card. Explicit measures keep forms readable while preserving the mobile bottom-sheet rule. */
@media (min-width: 621px) {
  #project-dialog,
  #project-settings-dialog { width: min(920px, calc(100vw - 30px)); }
  #source-dialog { width: min(920px, calc(100vw - 30px)); }
  #source-edit-dialog { width: min(580px, calc(100vw - 30px)); }
  #project-delete-dialog { width: min(900px, calc(100vw - 30px)); }
  #user-dialog { width: min(650px, calc(100vw - 30px)); }
  #user-edit-dialog,
  #invite-result-dialog,
  #password-dialog,
  #avatar-dialog { width: min(700px, calc(100vw - 30px)); }
  #invite-activation-dialog { width: min(556px, calc(100vw - 30px)); }
  #user-dialog .login-card,
  #user-edit-dialog .login-card,
  #password-dialog .login-card,
  #avatar-dialog .login-card { display: flex; flex-direction: column; justify-content: flex-start; }
  #user-dialog .login-card,
  #user-edit-dialog .login-card { height: auto; }
  #avatar-dialog .login-card { height: auto; }
  #password-dialog .login-card { height: auto; max-height: calc(100dvh - 30px); justify-content: flex-start; overflow-y: auto; }
  #password-dialog .form-actions { margin-block-start: 24px; }
  #user-dialog label,
  #user-edit-dialog label,
  #password-dialog label,
  #avatar-dialog label { font-size: var(--text-caption); }
  #user-dialog input,
  #user-dialog select,
  #user-edit-dialog input,
  #user-edit-dialog select,
  #password-dialog input,
  #avatar-dialog input,
  #user-dialog .form-actions .button,
  #user-edit-dialog .form-actions .button,
  #password-dialog .form-actions .button,
  #avatar-dialog .form-actions .button,
  #user-edit-dialog .avatar-file-button,
  #avatar-dialog .avatar-file-button { min-height: 44px; font-size: var(--text-ui); }
  #user-dialog .password-visibility,
  #user-edit-dialog .password-visibility,
  #password-dialog .password-visibility { width: 44px; height: 44px; inset: 0 0 auto auto; }
  #user-edit-dialog label { margin-block: 5px; }
  /* The first field starts on the reference axis, while the following fields use a tighter
     repeated rhythm. A uniform 35px margin accumulated 20px of drift at every row. */
  #password-dialog label { margin-block: 25px; }
  #password-dialog label:first-of-type { margin-block-start: 35px; }
  #password-dialog label:last-of-type { margin-block-end: 0; }
  #password-form-error:empty { display: none; }
  #login-dialog {
    width: min(556px, calc(100vw - 30px));
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
  }
  #ldap-test-dialog { width: min(663px, calc(100vw - 30px)); translate: 10px 6px; }
  #report-dialog { width: min(868px, calc(100vw - 30px)); translate: -4px 5px; }
  #ai-provider-dialog .ai-provider-dialog-card { height: min(770px, calc(100dvh - 30px)); display: flex; flex-direction: column; justify-content: space-between; }
  #article-ai-dialog .login-card,
  #project-ai-dialog .login-card { height: min(600px, calc(100dvh - 30px)); display: flex; flex-direction: column; justify-content: space-between; }
  #article-ai-dialog label,
  #project-ai-dialog label { font-size: var(--text-title); }
  #article-ai-dialog select,
  #project-ai-dialog select,
  #article-ai-dialog .form-actions .button,
  #project-ai-dialog .form-actions .button { min-height: 56px; font-size: var(--text-title); }

  /* Authentication stays secondary to the portal behind it: desktop keeps a compact working
     rhythm while the independent mobile bottom-sheet rules retain their roomier touch layout. */
  #login-dialog .login-card { min-height: 0; padding: 28px 36px 32px; display: flex; flex-direction: column; justify-content: flex-start; }
  #ldap-test-dialog .login-card { min-height: 0; padding: 36px 52px; display: flex; flex-direction: column; justify-content: flex-start; }
  #login-dialog .login-card h2 { margin: 0; font-size: var(--text-page); }
  #ldap-test-dialog .login-card h2 { margin: 0; font-size: var(--text-display); }
  #login-dialog .login-card > p,
  #ldap-test-dialog .login-card > p { margin: 0; }
  #login-dialog .login-security-note { font-size: var(--text-ui); }
  #ldap-test-dialog .login-card > p { font-size: var(--text-section); }
  #login-dialog label,
  #login-dialog .dialog-field { margin-block: 0; font-size: var(--text-ui); }
  #ldap-test-dialog label,
  #ldap-test-dialog .dialog-field { margin-block: 0; font-size: var(--text-section); }
  #ldap-test-dialog .login-card > h2 + p { margin-block-start: 6px; }
  #ldap-test-dialog .login-card > label { margin-block-start: 42px; }
  #ldap-test-dialog .dialog-field { margin-block-start: 50px; }
  #ldap-test-dialog .login-card > .ldap-password-note { margin-block-start: 38px; }
  #login-dialog input { min-height: 48px; font-size: var(--text-read); font-weight: 400; }
  #ldap-test-dialog input { min-height: 56px; font-size: var(--text-section); font-weight: 400; }
  #login-dialog .password-visibility { width: 44px; height: 44px; inset: 2px 2px auto auto; }
  #ldap-test-dialog .password-visibility { width: 50px; height: 50px; inset: 3px 3px auto auto; }
  #login-dialog .button { min-height: 48px; font-size: var(--text-read); }
  #ldap-test-dialog .button { min-height: 64px; font-size: var(--text-section); }
  #ldap-test-dialog .form-actions { margin-block-start: 24px; justify-content: flex-end; gap: 40px; }
  #ldap-test-dialog .form-actions .button { min-width: 255px; }
  #login-dialog .login-divider { margin: 0 0 12px; }
  #login-dialog .login-card > .login-security-note { margin: 10px 0 20px; }
  #login-dialog .login-card > label { margin-block-end: 18px; }
  #login-dialog .dialog-field { margin-block-end: 22px; }
  #login-dialog #external-login-actions { margin-block-start: 16px; display: grid; gap: 0; }
  #login-dialog .login-security-note .ui-icon { width: 22px; height: 22px; }
  #login-dialog .bitrix24-wordmark { font-size: var(--text-title); }
  #login-error:empty,
  #ldap-test-error:empty,
  #report-error:empty { display: none; }

  #report-dialog .login-card { min-height: 837px; padding: 22px 50px 45px; display: flex; flex-direction: column; }
}
#article-ai-dialog { width: min(680px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); overflow-y: auto; }
#project-ai-dialog { width: min(760px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); overflow-y: auto; }
#article-ai-dialog .login-card,
#project-ai-dialog .login-card { width: 100%; }
@media (min-width: 768px) {
  #project-ai-dialog label {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }
}
#article-ai-dialog .dialog-intro { max-width: 60ch; margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
#article-ai-dialog .article-ai-context-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
#article-ai-dialog .article-ai-context-row .context-label { display: block; padding-block-start: 14px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
#article-ai-dialog .dialog-context { min-height: 88px; margin-block-end: 16px; }
#article-ai-dialog .dialog-context > .ui-icon { width: 24px; height: 24px; color: var(--accent); }
#article-ai-dialog .dialog-context span { min-width: 0; }
#article-ai-dialog #article-ai-project { margin-block-start: 3px; }
#article-ai-dialog .ai-model-recommendation { margin: -4px 0 15px; display: flex; gap: 7px; align-items: center; color: var(--agent-ink); font-size: var(--text-micro); }
.ai-model-recommendation .ui-icon { width: 16px; height: 16px; }
.article-ai-validation { margin-block: 0 4px; padding-block-start: 15px; border-block-start: 1px solid var(--line); }
.article-ai-validation h3 { margin: 0 0 6px; font-size: var(--text-ui); }
.article-ai-validation p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.generation-preview strong:has(.ui-icon) { display: flex; gap: 7px; align-items: center; }
.generation-preview strong > .ui-icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent-ink); }
#project-ai-dialog .generation-preview strong > .ui-icon { width: 24px; height: 24px; color: var(--accent); }

#project-dialog .login-card h2,
#project-settings-dialog .login-card h2,
#source-dialog .login-card h2,
#source-edit-dialog .login-card h2,
#password-dialog .login-card h2,
#avatar-dialog .login-card h2,
#user-dialog .login-card h2,
#user-edit-dialog .login-card h2,
#report-dialog .login-card h2,
#ai-provider-dialog .login-card h2,
#article-ai-dialog .login-card h2,
#project-ai-dialog .login-card h2 { margin-block: 0 8px; font-size: var(--text-section); }

@media (min-width: 768px) {
  #ai-provider-dialog .login-card h2,
  #article-ai-dialog .login-card h2,
  #project-ai-dialog .login-card h2 { font-size: var(--text-page); }
  #ai-provider-dialog :is(input:not(.switch-input), select) { min-height: 50px; font-weight: 400; }
  #ai-provider-dialog .form-actions .button { min-height: 54px; }
  #ai-provider-dialog .form-actions .button.secondary { min-width: 120px; }
  #ai-provider-dialog .form-actions .button.primary { min-width: 205px; }
  #article-ai-dialog label,
  #project-ai-dialog label { font-size: var(--text-read); }
  #article-ai-dialog select { min-height: 48px; font-size: var(--text-read); font-weight: 400; }
  #article-ai-dialog .form-actions .button.secondary { min-width: 128px; }
  #article-ai-dialog .form-actions .button.primary { min-width: 250px; }
  #project-ai-dialog label { grid-template-columns: 196px minmax(0, 1fr); }
  #project-ai-dialog select { min-height: 52px; font-size: var(--text-read); font-weight: 400; }
  #project-ai-dialog .generation-preview > div { grid-template-columns: 220px minmax(0, 1fr); }
  #project-ai-dialog .generation-preview :is(span, strong) { font-size: var(--text-read); }
  #project-ai-dialog .form-actions .button.secondary { min-width: 140px; }
  #project-ai-dialog .form-actions .button.primary { min-width: 280px; }
}

@media (min-width: 768px) {
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .login-card h2 {
    font-size: var(--text-page);
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .form-actions .button.secondary {
    border-color: var(--sunken-deep);
    background: var(--sunken);
  }

  /* The project reference keeps one clear upload target and its actions inside the sheet.
     The generic document-import drop zone is intentionally taller and made this short task
     overflow its own 540px dialog. */
  #project-dialog .upload-zone {
    min-height: 100px;
    margin-block: 10px;
    padding: 12px;
    gap: 4px;
  }
  #project-dialog .upload-zone > .ui-icon { width: 28px; height: 28px; }
  #project-dialog .upload-zone strong { font-size: var(--text-caption); }
  #project-dialog .upload-zone small { font-size: var(--text-micro); }

  /* Material kinds are the decision in this window. The reference gives each one a strong,
     vertically centred icon/title hierarchy; delivery modes remain useful but secondary. */
  #source-dialog .login-card h2 { margin-block-end: 26px; }
  #source-dialog #source-delivery.choice-cards { margin-block: 4px; }
  #source-dialog #source-delivery.choice-cards legend {
    display: none;
  }
  #source-dialog #source-delivery.choice-cards label {
    min-height: 32px;
    padding: 8px 10px;
    align-items: center;
  }
  #source-dialog #source-delivery.choice-cards label:has(input:checked) {
    border-color: var(--line);
    background: var(--settings-surface);
    box-shadow: inset 0 -2px 0 var(--accent-strong);
  }
  #source-dialog #source-delivery.choice-cards small { display: none; }
  #source-dialog #source-kind-options.choice-cards { margin-block: 10px 16px; }
  #source-dialog #source-kind-options.choice-cards label {
    min-height: 218px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    text-align: center;
  }
  #source-dialog #source-kind-options.choice-cards label > span { width: 100%; }
  #source-dialog #source-kind-options.choice-cards label:has(input:checked) { box-shadow: none; }
  #source-dialog #source-kind-options.choice-cards .ui-icon { width: 32px; height: 32px; }
  #source-dialog #source-kind-options.choice-cards strong { font-size: var(--text-body); line-height: 1.25; }
  #source-dialog #source-kind-options.choice-cards small { margin-block-start: 5px; line-height: 1.35; }
  #source-dialog label:has(#source-name) { gap: 25px; }
  #source-dialog :is(input, select) { min-height: 56px; }
  #source-dialog .form-actions .button { min-height: 64px; }
  #source-dialog .upload-zone {
    display: none;
  }

  /* The catalogue is already the dialog's only list. A nested bordered table and 28px rows
     made it read as a secondary technical register instead of the main project choice. */
  #project-settings-dialog .instructed-kinds-list {
    max-height: 220px;
    padding: 0;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
    background: transparent;
    scrollbar-gutter: stable;
  }
  #project-settings-dialog .instructed-kind {
    min-height: 42px;
    padding: 5px 2px;
    font-size: var(--text-caption);
  }
  #project-settings-dialog .instructed-kind .object-kind-icon { width: 18px; height: 18px; }
  #project-settings-dialog .instructed-kinds-scroll-hint { margin: 6px 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 5px; color: var(--muted); font-size: var(--text-micro); }
  #project-settings-dialog .instructed-kinds-scroll-hint .ui-icon { width: 14px; height: 14px; transform: rotate(90deg); }
  #project-settings-dialog .project-settings-option small { display: none; }
  #project-settings-dialog .switch-input:checked {
    border-color: var(--accent-strong);
    background: var(--accent);
  }
  #project-settings-dialog .form-actions .button { min-height: 54px; }

  /* Reference task sheets keep cancellation and confirmation as one deliberate decision
     group. Fixed desktop measures preserve that rhythm without changing the compact mobile
     footer, whose controls share one flexible row. */
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .form-actions {
    justify-content: flex-end;
    gap: 40px;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog) .form-actions .button.secondary { min-width: 170px; }
  #project-dialog .form-actions .button.primary { min-width: 280px; }
  #source-dialog .form-actions .button.primary { min-width: 270px; }
  #project-settings-dialog .form-actions .button.primary { min-width: 340px; }
  #project-delete-dialog .form-actions .button.secondary { min-width: 180px; }
  #project-delete-dialog .form-actions .button.danger { min-width: 295px; }

  #source-edit-dialog > .login-card {
    height: 352px;
    padding: 17px 20px 23px;
    background: var(--settings-surface);
  }
  #source-edit-dialog .login-card h2 { margin-block-end: 30px; font-size: var(--text-title); }
  #source-edit-dialog .switch-row { padding: 0; border: 0; background: transparent; }
  #source-edit-dialog .switch-input:checked { background: var(--accent); }
  #source-edit-dialog .source-edit-facts { margin: 25px 0 0; padding: 0; border-radius: 0; background: transparent; }
  #source-edit-dialog .source-edit-facts dl { display: flex; align-items: center; gap: 10px; }
  #source-edit-dialog .source-edit-facts dt { display: none; }
  #source-edit-dialog .source-edit-facts dd { display: flex; align-items: center; white-space: nowrap; }
  #source-edit-dialog .source-edit-facts dd:not(:last-child)::after {
    content: "·";
    margin-inline-start: 10px;
    color: var(--muted);
  }
  #source-edit-dialog .form-actions { margin-block-start: 30px; gap: 34px; }
  #source-edit-dialog #source-delete {
    min-width: auto;
    padding-inline: 0;
    margin-inline-end: auto;
    border: 0;
    background: transparent;
  }
  #source-edit-dialog #source-delete:hover:not(:disabled) { background: transparent; }
  #source-edit-dialog .form-actions .button.secondary { min-width: 124px; }
  #source-edit-dialog .form-actions .button.primary { min-width: 165px; }

  /* Disabled destructive actions remain recognisable actions in the reference: an outline says
     what will happen once the exact project name is entered without presenting a pink banner. */
  #project-delete-submit:disabled {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--paper);
    box-shadow: none;
    opacity: 1;
  }
}

#project-delivery.choice-cards,
#report-dialog .choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#source-dialog { max-height: calc(100dvh - 30px); overflow: hidden; }
#source-dialog .login-card { width: 100%; max-height: calc(100dvh - 32px); padding: 26px 28px; overflow-y: auto; }
#source-delivery.choice-cards,
#source-kind-options.choice-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#source-delivery.choice-cards label,
#source-kind-options.choice-cards label { padding: 13px 11px; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; }
#source-delivery.choice-cards small,
#source-kind-options.choice-cards small { font-size: var(--text-micro); }
@media (min-width: 768px) {
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) > .login-card {
    padding-inline: 44px;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) :is(input, select) {
    font-size: var(--text-read);
    font-weight: 400;
  }
  #project-delivery.choice-cards,
  #source-kind-options.choice-cards { gap: 20px; }
  #source-dialog #source-kind-options.choice-cards .ui-icon { width: 44px; height: 44px; color: var(--ink-soft); }
  #source-dialog #source-kind-options.choice-cards strong { font-size: var(--text-title); }
  #source-dialog #source-kind-options.choice-cards small { font-size: var(--text-caption); }
  #project-delivery.choice-cards label:not(:has(input:checked)) .ui-icon { color: var(--ink-soft); }
  #project-dialog .upload-zone > .ui-icon { width: 40px; height: 40px; color: var(--ink-soft); }
  #project-settings-dialog .switch-input { width: 56px; height: 28px; min-height: 28px; }
  #project-settings-dialog .switch-input::before { width: 24px; height: 24px; }
  #project-settings-dialog .switch-input:checked::before { transform: translateX(28px); }
}
#report-dialog { max-height: calc(100dvh - 30px); overflow-y: auto; }
#report-dialog .login-card { width: 100%; }
#report-dialog .login-card h2 { margin: 0; font-size: var(--text-task-title); }
#report-dialog .choice-cards legend,
#report-dialog .choice-cards small { display: none; }
#report-dialog .choice-cards strong,
#report-dialog label,
#report-dialog input,
#report-dialog textarea,
#report-dialog .button { font-size: var(--text-title); }
#report-dialog input[name="title"],
#report-dialog textarea[name="description"] { font-weight: 400; }
#report-dialog textarea { min-height: 118px; }
#report-dialog .upload-zone { min-height: 86px; margin: 19px 0 0; padding: 10px 13px; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; place-items: initial; align-content: center; gap: 2px 10px; text-align: start; }
#report-dialog .upload-zone { grid-template-columns: auto auto; justify-content: center; justify-items: center; text-align: center; }
#report-dialog .upload-zone > .ui-icon { width: 30px; height: 30px; grid-column: 1; grid-row: 1; align-self: center; }
#report-dialog .upload-zone strong,
#report-dialog .upload-zone small { grid-column: 1 / -1; }
#report-dialog .upload-zone strong { grid-column: 2; grid-row: 1; font-size: var(--text-section); }
#report-dialog .upload-zone small { grid-row: 2; font-size: var(--text-ui); }
#report-dialog .choice-cards { margin: 32px 0 0; gap: 16px; }
#report-dialog .login-card > .choice-cards + label { margin: 38px 0 45px; }
#report-dialog .login-card > .choice-cards + label + label { margin: 0; }
#report-dialog .login-card > details { margin-block-start: 41px; }
#report-dialog .choice-cards label .ui-icon { width: 30px; height: 30px; }
#report-dialog .choice-cards label:has(input:checked) { background: var(--accent-wash); }
#report-dialog .form-actions { margin-block-start: 12px; }
:is(#ldap-test-dialog, #report-dialog) .dialog-close { inset: 24px 24px auto auto; }
#login-dialog .dialog-close { inset: 28px 44px auto auto; }
@media (min-width: 621px) {
  #login-dialog .dialog-close { inset: 20px 24px auto auto; }
  #report-dialog .choice-cards label { min-height: 64px; }
  #report-dialog textarea { height: 128px; min-height: 128px; }
  #report-dialog .upload-zone { min-height: 112px; }
  #report-dialog .form-actions .button { min-height: 64px; }
}
@media (min-width: 768px) {
  #report-dialog .form-actions { margin-block-start: auto; justify-content: flex-end; gap: 20px; }
  #report-dialog .form-actions .button.secondary { min-width: 270px; }
  #report-dialog .form-actions .button.primary { min-width: 310px; }
}
#ai-provider-dialog .ai-provider-dialog-card { padding: 24px 28px 38px; }
#ai-provider-dialog .ai-provider-dialog-card > label:not(.switch-row) { margin: 7px 0; position: relative; grid-template-columns: 208px minmax(0, 1fr); align-items: center; gap: 10px; }
#ai-provider-dialog .ai-provider-dialog-card > label:not(.switch-row) > .field-label-row { min-width: 0; }
#ai-provider-dialog .ai-provider-dialog-card > label:not(.switch-row) > .field-label-row .field-counter {
  position: absolute;
  z-index: 1;
  inset: 50% 10px auto auto;
  transform: translateY(-50%);
  pointer-events: none;
}
#ai-provider-dialog .ai-provider-dialog-card > label:not(.switch-row):has(.field-counter) > input { padding-inline-end: 58px; }
#ai-provider-dialog .ai-provider-key-field { margin: 7px 0; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 10px; align-items: center; }
#ai-provider-dialog .ai-provider-key-field > label { margin: 0; }
#ai-provider-dialog .ai-provider-key-field .password-field { min-width: 0; }
#ai-provider-dialog #ai-preset-note,
#ai-provider-dialog #ai-model-note { display: none; }
#ai-provider-dialog .switch-row { margin: 8px 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; }
#ai-provider-dialog .form-actions { margin-block-start: 12px; }
:is(#ai-provider-dialog, #article-ai-dialog, #project-ai-dialog) .form-actions {
  justify-content: flex-end;
  gap: 32px;
}
#avatar-dialog .avatar-picker-large { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; border: 0; background: transparent; }
#avatar-dialog .avatar-picker-large > div { justify-items: center; }
#avatar-dialog .avatar-picker-large .avatar-preview { width: 250px; height: 250px; font-size: var(--text-hero); }
#user-edit-dialog .avatar-picker-compact { padding: 0; border: 0; background: transparent; }
#user-edit-dialog .avatar-picker-compact .avatar-preview { width: 108px; height: 108px; font-size: var(--text-page); }
#user-edit-dialog .avatar-preview,
#avatar-dialog .avatar-preview { color: var(--nav); background: linear-gradient(135deg, var(--accent-soft), var(--accent)); }
@media (min-width: 621px) {
  /* Editing an existing user is the compact profile sheet in the reference. It uses 52px
     controls; inheriting the 64px create-user controls crowded the avatar upward and made the
     last rows drift away from their axes. */
  #user-edit-dialog .login-card h2 { margin-block-start: 15px; }
  #user-edit-dialog :is(input:not([type="hidden"]):not([type="file"]), select),
  #user-edit-dialog .form-actions .button,
  #user-edit-dialog .avatar-file-button { min-height: 52px; }
}
#ai-provider-dialog .button.primary,
#agent-dialog .button.primary,
#article-ai-dialog .button.primary,
#project-ai-dialog .button.primary { border-color: var(--agent); color: var(--on-dark); background: var(--agent-fill); }
#ai-provider-dialog { --agent: var(--agent-dialog); --agent-ink: var(--agent-dialog-ink); }
#agent-dialog { --agent: var(--agent-dialog); --agent-ink: var(--agent-dialog-ink); }
#article-ai-dialog { --agent: var(--agent-dialog); --agent-ink: var(--agent-dialog-ink); }
#project-ai-dialog { --agent: var(--agent-dialog); --agent-ink: var(--agent-dialog-ink); }
#ai-provider-dialog .switch-input:checked,
#agent-dialog .switch-input:checked { background: var(--agent-fill); }
.avatar-card { width: min(470px, calc(100vw - 30px)); }
/*
 * History is read side by side: the list is the index, the panel is the version itself. An
 * instruction is a document, and a document read through a letterbox is not read at all — so
 * this dialog takes the window, and the version keeps the same measure as the reader's page.
 */
.versions-dialog { width: calc(100vw - 120px); height: calc(100dvh - 120px); max-width: none; max-height: none; overflow: hidden; transform: translateY(12px); background: var(--settings-surface); }
.versions-card { height: 100%; position: relative; display: grid; grid-template-rows: 96px minmax(0, 1fr) 68px; text-align: start; }
.versions-head { padding: 20px 28px; border-block-end: 1px solid var(--line); display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.versions-title { min-width: 0; display: flex; gap: 18px; align-items: center; }
.versions-title > .ui-icon { width: 38px; height: 38px; flex: none; color: var(--ink); }
.versions-head h2 { margin: 3px 0 0; font-size: var(--text-page); letter-spacing: -.03em; }
.versions-head h2:focus { outline: none; }
.versions-head p { display: none; }
.versions-head .dialog-close { position: static; flex: none; }
.versions-head-actions { width: 360px; flex: none; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.versions-mode { padding: 0; border: 0; border-radius: var(--radius-sm); display: flex; gap: 8px; background: transparent; }
.versions-mode button { min-height: 36px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); background: var(--settings-surface); cursor: pointer; font: inherit; font-size: var(--text-caption); font-weight: 700; }
.versions-mode button:hover:not(:disabled) { color: var(--ink); background: var(--paper); }
.versions-mode button.active { border-color: var(--accent); color: var(--ink); background: var(--settings-surface); }
.versions-mode button:disabled { cursor: not-allowed; opacity: .45; }
.versions-layout { min-height: 0; display: grid; grid-template-columns: minmax(360px, 400px) minmax(0, 1fr) minmax(380px, 410px); }
.versions-list-column { min-width: 0; min-height: 0; padding: 30px 24px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.versions-list-heading { margin: 0; color: var(--muted); font-size: var(--text-ui); }
.versions-list { min-height: 0; margin: 0; padding: 0 4px 0 0; overflow: auto; scrollbar-width: none; display: grid; gap: 10px; align-content: start; list-style: none; }
.versions-list::-webkit-scrollbar { display: none; }
.version-row { width: 100%; min-height: 84px; padding: 14px 16px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: start; }
.version-row:hover { background: var(--sunken); }
.version-row.selected { border-color: var(--accent); background: var(--selection-version); }
.version-row strong { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--ink); font-size: var(--text-ui); }
.version-current { padding: 1px 7px; border-radius: 999px; color: var(--success-ink); background: var(--success-soft); font-size: var(--text-micro); font-weight: 700; }
.version-number { margin-inline-start: auto; padding: 2px 7px; border-radius: var(--radius-xs); color: var(--muted); background: var(--sunken-deep); font-size: var(--text-micro); font-weight: 700; }
#article-history-content .article-analysis-list strong { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
#article-history-content .article-analysis-list li.article-analysis-empty { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 620px) {
  #article-history-content .article-analysis-list li { grid-template-columns: 28px minmax(0, 1fr); }
  #article-history-content .article-analysis-list .text-link { grid-column: 2; justify-self: start; min-height: 44px; }
}
.provenance-revisions { order: -1; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: var(--text-ui); font-weight: 700; }
.provenance-revisions .ui-icon { color: var(--muted-weak); }
.version-row small { color: var(--muted); font-size: var(--text-micro); }
.versions-detail { min-width: 0; min-height: 0; border-inline: 1px solid var(--line); display: grid; grid-template-rows: minmax(0, 1fr); background: var(--settings-surface); }
.versions-scroll { min-height: 0; padding: 32px 24px; overflow: auto; scrollbar-width: none; }
.versions-scroll::-webkit-scrollbar { display: none; }
/* The same measure the reader gets: a version is judged by how it reads, not by how it fits. */
.versions-preview { max-width: 76ch; margin-inline: auto; }
.version-comparison { max-width: 76ch; margin-inline: auto; }
.version-comparison > header { display: flex; gap: 16px; align-items: center; }
.version-document-icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--ink); background: var(--accent); }
.version-document-icon .ui-icon { width: 22px; height: 22px; }
.version-comparison h3 { margin: 3px 0 4px; font-size: var(--text-section); }
.version-comparison header p { margin: 0; color: var(--muted); font-size: var(--text-caption); }
.version-comparison-content { margin-block-start: 26px; font-size: var(--text-body); line-height: 1.5; }
.version-comparison-content > :first-child { margin-block-start: 0; }
.version-comparison-content > .version-change { margin-block: 16px; }
.version-comparison-content h2 { margin-block: 24px 8px; font-size: var(--text-title); }
.version-comparison-content ul,
.version-comparison-content ol { margin-block: 4px; }
.version-comparison-content li { margin-block: 0; }
.version-changes { padding-block-start: 18px; display: grid; gap: 10px; }
.version-change { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-inline-start-width: 3px; border-radius: var(--radius-sm); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; background: var(--paper-raised); }
.version-change.added { border-inline-start-color: var(--success); background: var(--success-wash); }
.version-change.changed { border-inline-start-color: var(--accent); background: var(--accent-wash); }
.version-change.removed { border-inline-start-color: var(--muted-weak); }
.version-change-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--sunken); }
.version-change.added .version-change-icon { color: var(--success-ink); background: var(--success-soft); }
.version-change.changed .version-change-icon { color: var(--accent-ink); background: var(--accent-soft); }
.version-change-icon .ui-icon { width: 15px; height: 15px; }
.version-change-copy { min-width: 0; display: grid; gap: 5px; line-height: 1.5; }
.version-change-copy strong { color: var(--ink); font-size: var(--text-caption); }
.version-change-copy small { color: var(--muted); font-size: var(--text-micro); }
.versions-inspector { min-height: 632px; margin: 32px 24px; padding: 22px; align-self: start; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; flex-direction: column; background: var(--settings-surface); }
.versions-inspector h3 { margin: 0 0 16px; font-size: var(--text-title); }
.versions-inspector-fact { padding-block: 18px; border-block-end: 1px solid var(--line); display: grid; gap: 13px; }
.versions-inspector-fact h4 { margin: 0 0 2px; font-size: var(--text-ui); }
.versions-inspector-fact span { display: flex; gap: 10px; align-items: center; }
.versions-inspector-fact .ui-icon { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.versions-inspector-fact strong { color: var(--ink-soft); font-size: var(--text-caption); font-weight: 500; }
.versions-inspector-stats { margin: 0; padding-block: 8px; border-block-end: 1px solid var(--line); }
.versions-inspector-stats > div { min-height: 39px; display: grid; grid-template-columns: minmax(0, 86px) minmax(0, 1fr); gap: 10px; align-items: center; }
.versions-inspector-stats dt { color: var(--muted); font-size: var(--text-caption); }
.versions-inspector-stats dd { margin: 0; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 700; }
.versions-changes-summary { margin: 0; padding-block: 8px 14px; border-block-end: 1px solid var(--line); }
.versions-changes-summary > div { min-height: 43px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.versions-changes-summary dt { display: flex; gap: 8px; align-items: center; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 700; }
.versions-changes-summary dt .ui-icon { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--sunken); }
.versions-changes-summary .added dt .ui-icon { color: var(--success-ink); background: var(--success-soft); }
.versions-changes-summary .changed dt .ui-icon { color: var(--accent-ink); background: var(--accent-soft); }
.versions-changes-summary dd { margin: 0; color: var(--ink); font-size: var(--text-ui); font-weight: 800; font-variant-numeric: tabular-nums; }
.versions-inspector .version-selection-note { margin: auto 0 18px; padding: 14px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--ink-soft); background: var(--accent-tint); font-size: var(--text-caption); line-height: 1.5; }
.version-selection-note .ui-icon { width: 20px; height: 20px; }
.versions-inspector .button { width: 100%; justify-content: center; flex-shrink: 0; }
.versions-inspector { min-height: 0; max-height: calc(100% - 64px); overflow: auto; }
.versions-footnote { margin: 0; border-block-start: 1px solid var(--line); display: flex; gap: 12px; align-items: center; justify-content: center; color: var(--muted); font-size: var(--text-ui); }
.versions-footnote .ui-icon { width: 22px; height: 22px; }
.versions-card:has(#article-versions-error:not(:empty)) { grid-template-rows: 96px minmax(0, 1fr) auto; }
.versions-card:has(#article-versions-error:not(:empty)) .versions-footnote { display: none; }
#article-versions-error:not(:empty) { margin: 8px 16px 12px; padding: 8px 12px; background: var(--danger-soft); }
#article-versions-error:empty { display: none; }
@media (min-width: 1500px) {
  .versions-dialog { width: calc(100vw - 110px); height: calc(100dvh - 124px); transform: translate(4px, 12px); }
  .versions-head-actions { width: 344px; }
  .versions-mode button { padding-inline: 18px; }
  .versions-layout { grid-template-columns: 403px 683px minmax(0, 1fr); }
  .versions-list-column { padding: 30px 21px 30px 28px; gap: 19px; }
  .versions-list { gap: 11px; }
  .version-row { min-height: 85px; }
  .version-comparison { width: 100%; max-width: 602px; margin-inline: 0; }
  .versions-inspector { margin: 32px 27px 32px 0; }
}
@media (max-width: 1120px) {
  #ai-index-settings .ai-index-method { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  #ai-index-settings .ai-index-method-heading { margin-block-end: 0; }
  .versions-dialog { width: calc(100vw - 40px); }
  .versions-layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(260px, 300px); }
  .versions-list-column { padding-inline: 16px; }
  .versions-inspector { margin-inline: 16px; }
}
@media (max-width: 860px) {
  .versions-dialog { width: 100vw; height: 100dvh; transform: none; border-radius: 0; }
  .versions-card { padding: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .versions-card:has(#article-versions-error:not(:empty)) { grid-template-rows: auto minmax(0, 1fr) auto; }
  .versions-head { align-items: stretch; flex-direction: column; }
  .versions-head-actions { width: 100%; justify-content: space-between; order: -1; }
  .versions-layout { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
  .versions-list-column { max-height: 210px; padding: 14px 16px; gap: 10px; }
  .versions-list { max-height: 160px; }
  .versions-scroll { padding: 16px; }
  .versions-inspector { min-height: 0; max-height: none; margin: 10px 16px 16px; padding: 12px; }
  .versions-inspector-fact { padding-block: 8px; }
  .version-selection-note { display: none !important; }
  .versions-footnote { min-height: 52px; padding-inline: 16px; text-align: center; }
}
@media (max-width: 620px) {
  #project-delivery.choice-cards,
  #report-dialog .choice-cards,
  #source-delivery.choice-cards,
  #source-kind-options.choice-cards { grid-template-columns: minmax(0, 1fr); }
  #ai-provider-dialog .ai-provider-dialog-card > label:not(.switch-row) { grid-template-columns: minmax(0, 1fr); }
  #ai-provider-dialog .ai-provider-key-field { grid-template-columns: minmax(0, 1fr); }
  .notification-panel { position: fixed; inset: 66px 12px auto auto; }
}
.faq-dialog { width: min(640px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); }
.faq-dialog-card { max-height: inherit; padding: 24px 26px; overflow-y: auto; display: grid; gap: 14px; text-align: start; }
.faq-dialog-toolbar { display: flex; justify-content: flex-end; }
.article-faq-review-empty { margin: 0; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); text-align: center; }
@media (max-width: 860px) {
  .faq-dialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .faq-dialog-card { padding: 18px 16px; }
}
.avatar-picker { margin-block: 20px 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: center; background: var(--paper-raised); }
.avatar-picker-compact { margin-block: 12px 16px; padding: 11px; }
.avatar-preview { width: 82px; height: 82px; overflow: hidden; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); background: var(--nav); font-size: var(--text-page); font-weight: 800; }
.avatar-picker-compact .avatar-preview { width: 62px; height: 62px; font-size: var(--text-section); }
.avatar-picker > div { min-width: 0; display: grid; justify-items: start; gap: 5px; }
.avatar-picker small, .avatar-picker strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-picker small { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.avatar-picker strong { font-size: var(--text-caption); }
.avatar-file-button { min-height: 40px; padding: 8px 10px; font-size: var(--text-caption); }
.form-error { min-height: 18px; margin: 6px 0 !important; color: var(--danger) !important; font-size: var(--text-caption); }
.toast { max-width: min(390px, calc(100vw - 30px)); padding: 13px 17px; position: fixed; z-index: 50; inset: auto 22px 22px auto; visibility: hidden; border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--on-dark); background: var(--nav); box-shadow: 0 15px 40px rgb(0 0 0 / 22%); transform: translateY(25px); pointer-events: none; font-size: var(--text-caption); }
.toast[data-tone="success"] { border-color: var(--success-bright); }
.toast[data-tone="danger"] { border-color: var(--danger-bright); }
.toast.visible { visibility: visible; transform: translateY(0); }

@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes icon-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .nav-item, .button, .text-link, .recent-row, .article-item, .article-filter-option, .sidebar-toggle, .toast { transition-property: color, background-color, border-color, box-shadow, transform, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
}

@media (min-width: 901px) {
  .app-shell[data-sidebar-collapsed="true"] { --sidebar-rail-width: 72px; grid-template-columns: 72px minmax(0, 1fr); }
  .app-shell[data-sidebar-collapsed="true"] .sidebar-toggle .ui-icon { transform: none; }
  .app-shell[data-sidebar-collapsed="true"] .sidebar-toggle { margin-inline: auto; }
  .app-shell[data-sidebar-collapsed="true"] .section-nav { padding-inline: 10px; }
  .app-shell[data-sidebar-collapsed="true"] .nav-item { padding-inline: 8px; grid-template-columns: 1fr; justify-items: center; }
  .app-shell[data-sidebar-collapsed="true"] .nav-item > span:not(.nav-icon),
  .app-shell[data-sidebar-collapsed="true"] .nav-count,
  .app-shell[data-sidebar-collapsed="true"] .nav-alert,
  .app-shell[data-sidebar-collapsed="true"] .nav-submenu { display: none; }
  /* The knowledge console has no rail rules of its own: one toggle, one state, the same
     behaviour as every other screen. A second, console-only state meant the two could disagree —
     and on a narrow desktop, where the shared state auto-collapses, the toggle did nothing. */
  .app-shell:has(.workspace[data-active-view="knowledge"]) .workspace-identity { display: none; }
}

/* The canonical desktop settings map uses the whole register plane. Its 1424px content rail is
   measured from the 70px navigation seam, rather than inheriting the narrower reading-page
   padding. The dimensions below are the stable geometry of 04-settings-home.png. */
@media (min-width: 1180px) {
  .topbar { height: 82px; padding-inline: 20px; grid-template-columns: minmax(230px, 320px) minmax(200px, 1fr) auto minmax(150px, 220px); gap: 15px; }
  .brand { gap: 17px; transform: translateY(-3px); }
  .brand-mark { width: 46px; height: 46px; }
  .brand-copy small { font-size: var(--text-caption); }
  .search-area { transform: none; }
  .search-box { height: 48px; }
  /* The settings directory has no local section rail. Its search follows the narrower centre
     column; destination pages use the wider axis shared by their persistent settings rail. */
  body:has(.workspace[data-active-view="assistant"]) .topbar {
    grid-template-columns: minmax(230px, 320px) minmax(200px, 1fr) auto minmax(150px, 220px);
  }
  body:has(.workspace[data-active-view="assistant"]) .search-box { padding: 4px 18px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  body:has(.workspace[data-active-view="assistant"]) .search-box input { grid-column: 1; grid-row: 1; }
  body:has(.workspace[data-active-view="assistant"]) .search-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  body:has(.workspace[data-active-view="assistant"]) .search-leading-icon { grid-column: 2; grid-row: 1; justify-self: end; }
  body:has(.workspace[data-active-view="settings"]) .topbar {
    grid-template-columns: minmax(230px, 320px) minmax(200px, 1fr) auto minmax(150px, 220px);
  }
  body:has(.workspace[data-active-view="settings"]) .search-area { transform: translateY(-2px); }

  .app-shell { min-height: calc(100vh - 82px); }
  .workspace[data-active-view="assistant"] { height: calc(100vh - 82px); }
  .assistant-layout.with-materials[data-chat-state="answer"] { grid-template-columns: 320px minmax(0, 1fr); }
  .assistant-layout.with-materials .chat-panel-head { padding-inline-end: 190px; }
  .assistant-drawer-bar {
    min-height: 0;
    padding: 0;
    position: absolute;
    z-index: 20;
    inset: 18px 18px auto auto;
    display: flex;
    pointer-events: none;
  }
  #assistant-dialogs-toggle { display: none; }
  #assistant-materials-toggle:not([hidden]) { display: inline-flex; pointer-events: auto; }
  body[data-assistant-drawer="materials"] { overflow: hidden; }
  .assistant-materials {
    width: min(384px, 88vw);
    height: auto;
    max-height: none;
    position: fixed;
    z-index: 60;
    inset: 82px 0 0 auto;
    visibility: hidden;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 200ms ease;
    box-shadow: var(--shadow-lg);
  }
  body[data-assistant-drawer="materials"] .assistant-materials { visibility: visible; transform: none; }
  .assistant-drawer-backdrop:not([hidden]) { position: fixed; z-index: 55; inset: 82px 0 0; display: block; background: var(--backdrop); opacity: .62; }
  .assistant-layout[data-chat-state="answer"] .chat-composer-note { text-align: center; }
  .assistant-layout[data-chat-state="answer"] .assistant-material-list { padding: 15px 21px 16px 17px; gap: 20px; }
  .assistant-layout[data-chat-state="answer"] .assistant-material-card { min-height: 276px; }
  .assistant-layout[data-chat-state="answer"] .assistant-material-copy { height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; }
  .assistant-layout[data-chat-state="answer"] .assistant-material-footer { padding-block-start: 18px; }
  .sidebar { min-height: calc(100vh - 82px); height: calc(100vh - 82px); inset-block-start: 82px; }
  .app-shell[data-sidebar-collapsed="true"] { --sidebar-rail-width: 70px; grid-template-columns: 70px minmax(0, 1fr); }
  .app-shell[data-sidebar-collapsed="true"]:has(.workspace[data-active-view="assistant"]) { --sidebar-rail-width: 66px; grid-template-columns: 66px minmax(0, 1fr); }
  .workspace[data-active-view="knowledge"] { height: calc(100vh - 82px); }
  #overview-view { min-height: calc(100vh - 82px); }
  body:has(.workspace[data-active-view="studio"]) .topbar { height: 85px; grid-template-columns: minmax(230px, 320px) minmax(200px, 1fr) auto minmax(150px, 220px); }
  body:has(.workspace[data-active-view="studio"]) .brand { transform: translateY(-2px); }
  body:has(.workspace[data-active-view="studio"]) .search-area { transform: none; }
  body:has(.workspace[data-active-view="studio"]) .search-box { height: 50px; }
  body:has(.workspace[data-active-view="studio"]) .app-shell { min-height: calc(100vh - 85px); }
  body:has(.workspace[data-active-view="studio"]) .sidebar { min-height: calc(100vh - 85px); height: calc(100vh - 85px); inset-block-start: 85px; }
  .workspace[data-active-view="studio"] { height: calc(100vh - 85px); }
  #article-form.form-card { grid-template-rows: minmax(0, 1fr) 95px; }
  .studio-parameters { padding-block-start: 28px; }
  .studio-parameters .document-import-row { margin-block-end: 58px; }
  .studio-editor-pane { padding-block-start: 21px; }
  .studio-editor-heading { margin-block-end: 45px; }
  .studio-editor-heading .draft-status { inset-block-start: 33px; }
  .studio-preview-pane { padding-block-start: 23px; }
  .studio-preview-pane .instruction-preview { min-height: calc(100% - 98px); }
  .workspace[data-active-view="settings"] { padding: 33px 44px 26px 48px; background: var(--settings-canvas); }
  #settings-view { width: 100%; max-width: none; }
  .settings-heading { margin-block-end: 39px; gap: 12px; }
  .settings-list { grid-template-columns: 360px 610px minmax(0, 1fr); column-gap: 44px; row-gap: 34px; }
  .settings-group, .settings-group:nth-child(1), .settings-group:nth-child(2), .settings-group:nth-child(3), .settings-group:nth-child(5) { grid-column: auto; }
  .settings-group:nth-child(1) { grid-column: 1; }
  .settings-group:nth-child(2) { grid-column: 2; transform: translateX(4px); }
  .settings-group:nth-child(3) { grid-column: 3; }
  .settings-group h2 { font-size: var(--text-read); }
  .settings-group { gap: 18px; }
  .settings-group:nth-child(2) .settings-grid-two { grid-template-columns: 303px minmax(0, 1fr); gap: 18px; }
  .settings-group-ai { grid-column: 1 / -1; transform: translateY(9px); }
  .settings-group-ai .settings-grid-three { grid-template-columns: 442px 446px minmax(0, 1fr); gap: 22px; }
  .settings-group-ai .settings-item { min-height: 155px; }
  .settings-group-ai .settings-item-copy { min-height: 117px; padding-block-start: 7px; }
  .settings-group:nth-child(5) { grid-column: 1 / -1; gap: 14px; transform: translateY(8px); }
  .settings-group:nth-child(5) .settings-grid { width: 536px; }

  /* The article console has its own denser canonical shell: the reference reserves 73px for
     the header and 685px for the two persistent side columns. Keeping those dimensions in
     light and dark avoids a layout jump when the theme is toggled. */
  body:has(.workspace[data-active-view="knowledge"]) .topbar {
    height: 73px;
    padding-inline: 15px;
    grid-template-columns: minmax(230px, 320px) minmax(200px, 1fr) auto minmax(150px, 220px);
    gap: 15px;
  }
  body:has(.workspace[data-active-view="knowledge"]) .brand { gap: 16px; transform: none; }
  body:has(.workspace[data-active-view="knowledge"]) .brand-mark { width: 40px; height: 40px; }
  body:has(.workspace[data-active-view="knowledge"]) .search-area { transform: none; }
  body:has(.workspace[data-active-view="knowledge"]) .app-shell { min-height: calc(100vh - 73px); }
  body:has(.workspace[data-active-view="knowledge"]) .sidebar {
    min-height: calc(100vh - 73px);
    height: calc(100vh - 73px);
    inset-block-start: 73px;
  }
  .workspace[data-active-view="knowledge"] { height: calc(100vh - 73px); }
  .workspace[data-active-view="knowledge"] .knowledge-layout { --knowledge-index-width: clamp(240px, 17vw, 280px); }
  .workspace[data-active-view="knowledge"] .knowledge-layout:not(.provenance-collapsed) { --provenance-width: clamp(220px, 16vw, 260px); }
  .workspace[data-active-view="knowledge"] .reader { padding: 17px 31px 36px 33px; }
  .workspace[data-active-view="knowledge"] .article-reading-layout.has-outline {
    min-height: 524px;
    grid-template-columns: minmax(0, 1fr) 160px;
  }
  .workspace[data-active-view="knowledge"] .article-reading-layout.has-outline > .article-outline {
    order: 2;
    padding-inline: 20px 0;
    border-inline-start: 1px solid var(--line);
    border-inline-end: 0;
  }
  .workspace[data-active-view="knowledge"] .article-ai-console { margin-block-start: 12px; }
  .workspace[data-active-view="knowledge"] .article-ai-console input { min-height: 52px; }
  .settings-group:nth-child(5) .settings-item { min-height: 109px; }
  .settings-group:nth-child(5) .settings-item-copy { min-height: 71px; }
  .settings-group:nth-child(-n+3) .settings-item-copy { padding-block: 9px 4px; }
  .portal-version { margin-block-start: 26px; }

  #quickstart-view .setup-progress-card { max-width: 816px; }
  #quickstart-view .quickstart-workspace { grid-template-columns: 816px 292px; gap: 29px; }
  #quickstart-view .setup-card { min-height: 98px; padding-inline: 51px 20px; }
  #quickstart-view .setup-card.done .setup-status {
    margin: 0;
    padding: 7px 14px;
    position: absolute;
    inset: 20px 20px auto auto;
    border-radius: var(--radius-pill);
    background: var(--success-soft);
  }
  #quickstart-view .setup-card.current { min-height: 181px; grid-template-columns: minmax(0, 1fr); }
  #quickstart-view .setup-card-actions { width: auto; display: flex; gap: 16px; }
  #quickstart-view .setup-card-actions > .button { width: auto; white-space: nowrap; }
  #quickstart-view .setup-card-actions > .button:first-child { width: 194px; }
  #quickstart-view .setup-card-actions > .button:last-child { width: 208px; }

  .workspace:has(> #general-view.active-view) > #general-view { padding: 29px 42px 52px 38px; }
  #general-view .settings-section + .settings-section { margin-block-start: 22px; }
  #its-view .its-switch-row { grid-template-columns: 46px minmax(0, 1fr); justify-content: start; gap: 16px; }
  #its-view .its-switch-row .switch-input { flex: 0 0 auto; order: -1; }

  .workspace:has(> #team-view.active-view) > #team-view { padding: 42px 51px 52px 40px; }
  #team-view .page-heading { margin-block-end: 36px; }
  #team-view .team-tabs { margin-block-end: 50px; }
  #team-view .users-workspace { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  #team-view .user-command-bar { min-height: 50px; padding: 0; gap: 24px; border: 0; background: transparent; }
  #team-view .user-command-bar .button { min-height: 50px; }
  #team-view #open-user-dialog { width: 211px; justify-content: center; }
  #team-view #edit-selected-user { width: 141px; justify-content: center; }
  #team-view .users-search { width: 312px; min-height: 50px; margin-inline-start: 3px; }
  #team-view .users-list-frame { min-height: 521px; margin-block-start: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
  #team-view .users-list-heading { min-height: 73px; }
  #team-view .users-list-header { min-height: 55px; }
  #team-view .user-row { min-height: 72px; }
  #sources-view .project-refresh-button.button.text {
    width: 186px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    transform: translateX(14px);
    justify-content: center;
  }
}

@container projects (max-width: 960px) {
  .projects-list-header, .project-main { grid-template-columns: minmax(220px, 1.4fr) 70px 62px 54px 88px 110px 90px; }
  .projects-list-header { min-height: 44px; }
  .projects-list-header > span { overflow-wrap: anywhere; }
  .project-main { min-height: 72px; }
  .project-overview { gap: 10px; }
}

@container projects (max-width: 760px) {
  .projects-list-header { display: none; }
  .project-main { min-height: 68px; grid-template-columns: minmax(0, 1fr); }
  .project-main > .project-list-value { display: flex; gap: 8px; flex-wrap: wrap; }
  .project-main > .project-list-value::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
  .project-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding-block: 16px; }
  .project-overview { grid-column: 1 / -1; }
  .project-main > .status-chip { justify-self: start; }
  .project-overview { width: 100%; justify-content: space-between; }
}

@container projects (max-width: 620px) {
  .project-command-bar { padding-inline: 8px; gap: 6px; align-items: center; }
  .project-command-group { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .project-command-group .button { min-width: 0; padding-inline: 9px; white-space: nowrap; }
  #open-project-dialog .project-command-label, #add-source-button .project-command-label, #project-settings-button .project-command-label, .project-actions-summary .project-command-label, .project-refresh-button .project-command-label { display: none; }
  #open-project-dialog::after { content: "Новый"; }
  .project-actions-summary { min-width: 38px; padding-inline: 9px; }
  .project-actions-chevron { display: none; }
  .project-actions-popover { inset-inline: auto 0; }
  .project-refresh-button { width: 38px; margin-inline-start: 0; padding-inline: 9px !important; }
  .project-main { padding-inline: 12px; }
  .project-source-row { align-items: flex-start; flex-direction: column; }
  .source-actions { width: 100%; flex-wrap: wrap; }
  .source-replace { justify-content: flex-start; }
}

@container users (max-width: 620px) {
  .user-command-bar { min-height: 0; padding: 8px; flex-wrap: wrap; gap: 6px; }
  #open-user-dialog { min-width: 0; flex: 1 1 auto; justify-content: center; }
  #edit-selected-user { flex: 0 0 auto; }
  .users-search { width: 100%; max-width: none; margin-inline-start: 0; flex: 1 0 100%; order: 3; }
  .users-list-header { display: none; }
  .users-list-heading { min-height: 58px; padding-inline: 14px; }
  .user-row { min-height: 72px; padding-inline: 14px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; }
  .user-identity { grid-column: 1; grid-row: 1; }
  .user-login { margin-inline-start: 51px; grid-column: 1; grid-row: 2; }
  .user-authentication, .user-last-login { display: none; }
  .role-label { grid-column: 2; grid-row: 1; }
  .user-status { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .workspace:has(> .settings-destination.active-view) { grid-template-columns: 240px minmax(0, 1fr); }
  .workspace:has(> .settings-destination.active-view) > .settings-destination { padding-inline: 28px; }
  .settings-subnav-item { height: 58px; padding-inline: 16px; }
  .agent-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .agent-audience, .agent-model { grid-column: 2; }
  .agent-row-actions { grid-column: 3; grid-row: 1 / span 2; }
  .portal-status-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .quickstart-workspace { grid-template-columns: minmax(0, 1fr); }
  .setup-next { display: none; }
  .project-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #versioning-settings { min-height: 0; grid-column: 1 / -1; }
  .team-users-layout { grid-template-columns: minmax(0, 1fr); }
  .team-access-summary { order: -1; }
  .ai-generation-layout { grid-template-columns: minmax(0, 1fr); }
  #article-form.form-card { grid-template-columns: 270px minmax(0, 1fr); }
  .studio-editor-heading { display: flex; justify-content: space-between; gap: 22px; align-items: center; }
  .studio-editor-heading .draft-status { position: static; flex: 0 0 auto; }
  .studio-preview-pane { width: min(420px, 90vw); position: fixed; z-index: 70; inset: 72px 0 0 auto; display: none; box-shadow: var(--shadow-lg); }
  #studio-view.preview-open .studio-preview-pane { display: block; }
  .studio-form-actions #editor-preview-toggle { display: inline-flex; }
  .reports-workspace { grid-template-columns: minmax(0, 1fr); }
  .reports-list-pane { border-inline-end: 0; border-block-end: 1px solid var(--accent-line); }
}

/*
 * Промежуточная ширина 768–1179 из `reference-manifest.json`.
 *
 * Реестр, чтение и паспорт втроём больше не помещаются, не отняв у статьи читаемую меру. По
 * канону `23-article-tablet.png` уступают именно дерево и паспорт: их открывают, чтобы перейти
 * или проверить, а не читают. Содержание остаётся закреплённой колонкой справа от текста —
 * оно нужно всё время чтения. Глобальная рейка держится узкой, и её переключатель уходит:
 * два соседних контрола «покажи панель» читаются как один сломанный.
 */
@media (max-width: 1179px) {
  body[data-drawer], body[data-assistant-drawer] { overflow: hidden; }
  .topbar { grid-template-columns: 214px minmax(300px, 1fr) auto auto; gap: 10px; }
  .settings-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-group:nth-child(1), .settings-group:nth-child(3), .settings-group:nth-child(5) { grid-column: span 1; }
  .settings-group:nth-child(2), .settings-group-ai { grid-column: 1 / -1; }
  #overview-view { grid-template-columns: minmax(0, 1fr); }
  .overview-dashboard { padding: 34px clamp(24px, 4vw, 42px) 54px; }
  .overview-top-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-layout { grid-template-columns: 1fr; }
  .ai-settings-layout { grid-template-columns: 1fr; }
  .view-mode-control { flex: 0 0 auto; margin: 0; gap: 3px; }
  .reader { padding-inline: 28px; }
  .article-tablist { margin-inline: -28px; padding-inline: 28px; gap: 18px; }

  .app-shell, .app-shell[data-sidebar-collapsed="false"] { --sidebar-rail-width: 72px; grid-template-columns: 72px minmax(0, 1fr); }
  .sidebar-toggle { display: none; }
  .workspace-identity { display: none; }
  /* Только рейка: те же селекторы без ограничения гасили подписи и в нижней навигации,
     оставляя её кнопки вовсе без доступного имени. */
  .sidebar .section-nav { padding-block-start: 14px; padding-inline: 10px; }
  .sidebar .nav-item { padding-inline: 8px; grid-template-columns: 1fr; justify-items: center; }
  .sidebar .nav-item > span:not(.nav-icon),
  .sidebar .nav-count, .sidebar .nav-alert, .sidebar .nav-submenu { display: none; }

  .assistant-drawer-bar { min-height: 60px; padding: 10px clamp(16px, 3vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 10px; border-block-end: 1px solid var(--line); background: var(--paper); }
  .assistant-layout,
  .assistant-layout.with-materials,
  .assistant-layout.without-rail,
  .assistant-layout.without-rail.with-materials { grid-template-columns: minmax(0, 1fr); }
  .chat-composer-shell { margin-block-end: 20px; }
  .assistant-rail, .assistant-materials {
    width: min(384px, 88vw); position: fixed; z-index: 60; inset-block: 72px 0; height: auto; max-height: none;
    border: 0; background: var(--paper); box-shadow: var(--shadow-lg); visibility: hidden; transition: transform 200ms ease;
  }
  .assistant-rail { inset-inline-start: 0; transform: translateX(-100%); border-inline-end: 1px solid var(--line); }
  .assistant-materials { inset-inline-end: 0; transform: translateX(100%); border-inline-start: 1px solid var(--line); }
  body[data-assistant-drawer="dialogs"] .assistant-rail,
  body[data-assistant-drawer="materials"] .assistant-materials { transform: none; visibility: visible; }
  .assistant-drawer-backdrop:not([hidden]) { position: fixed; z-index: 55; inset: 72px 0 0; display: block; background: var(--backdrop); opacity: .62; }

  .knowledge-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .knowledge-drawer-bar { min-height: 60px; padding: 10px clamp(16px, 3vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block-end: 1px solid var(--line); background: var(--paper); }
  .knowledge-drawer-bar-end { display: flex; align-items: center; gap: 8px; }
  #outline-drawer-toggle { display: none; }
  .knowledge-resizer { display: none; }

  /* Панели съезжают поверх страницы, а не занимают её место: у них нет своей колонки. */
  .knowledge-index, .article-provenance {
    width: min(384px, 88vw); position: fixed; z-index: 60; inset-block: 72px 0; height: auto; max-height: none;
    border: 0; box-shadow: var(--shadow-lg); transition: transform 200ms ease; visibility: hidden;
  }
  .knowledge-index { inset-inline-start: 0; transform: translateX(-100%); border-inline-end: 1px solid var(--line); }
  .article-provenance { inset-inline-end: 0; transform: translateX(100%); border-inline-start: 1px solid var(--line); }
  body[data-drawer="materials"] .knowledge-index,
  body[data-drawer="passport"] .article-provenance { transform: none; visibility: visible; }
  .knowledge-layout.provenance-collapsed .article-provenance { max-height: none; }
  .drawer-backdrop:not([hidden]) { position: fixed; z-index: 55; inset: 72px 0 0; display: block; background: var(--backdrop); opacity: .62; }

  /* Содержание переходит вправо от текста и остаётся закреплённым при прокрутке. */
  .article-reading-layout.has-outline { grid-template-columns: minmax(0, 1fr) minmax(196px, 232px); }
  .article-reading-layout.has-outline > .article-outline { order: 2; padding-inline: 20px 0; border-inline-start: 1px solid var(--line); border-inline-end: 0; }
}

@media (min-width: 768px) and (max-width: 1179px) {
  body:has(.workspace[data-active-view="knowledge"]) .topbar { height: 56px; padding-inline: 12px; }
  body:has(.workspace[data-active-view="knowledge"]) .brand { gap: 9px; }
  body:has(.workspace[data-active-view="knowledge"]) .brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); }
  body:has(.workspace[data-active-view="knowledge"]) .brand-mark .ui-icon { width: 17px; height: 17px; }
  body:has(.workspace[data-active-view="knowledge"]) .brand-copy strong { font-size: var(--text-ui); }
  body:has(.workspace[data-active-view="knowledge"]) .search-box { height: 34px; padding-block: 2px; }
  body:has(.workspace[data-active-view="knowledge"]) .app-shell {
    --sidebar-rail-width: 48px;
    min-height: calc(100vh - 56px);
    grid-template-columns: 48px minmax(0, 1fr);
    transition: none;
  }
  body:has(.workspace[data-active-view="knowledge"]) .sidebar {
    width: 48px;
    max-width: 48px;
    min-width: 0;
    min-height: calc(100vh - 56px);
    height: calc(100vh - 56px);
    inset-block-start: 56px;
    overflow: hidden;
  }
  body:has(.workspace[data-active-view="knowledge"]) .sidebar .section-nav { padding-inline: 4px; }
  body:has(.workspace[data-active-view="knowledge"]) .sidebar .nav-item { padding-inline: 4px; }
  body:has(.workspace[data-active-view="knowledge"]) .workspace[data-active-view="knowledge"] { height: calc(100vh - 56px); }
  body:has(.workspace[data-active-view="knowledge"]) :is(.knowledge-index, .article-provenance) { inset-block: 56px 0; }
  body:has(.workspace[data-active-view="knowledge"]) .drawer-backdrop:not([hidden]) { inset: 56px 0 0; }

  .workspace[data-active-view="knowledge"] .reader { padding-block-start: 8px; }
}

/*
 * Телефон: до 767px из `reference-manifest.json`, канон `24-article-mobile.png`.
 *
 * Разделы уходят вниз, под большой палец, и рейка исчезает совсем — горизонтальная лента
 * разделов над каждым экраном отнимала первый экран у самого материала. Поле поиска в шапке
 * уступает место кнопке: искать здесь начинают намеренно, а бренд и учётная запись нужны всегда.
 */
@media (max-width: 767px) {
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
  /* The three supplied phone references use deliberately different chrome density. Keeping
     those measured heights on the active surface prevents every row below the header from
     drifting while the shared controls and behaviour remain identical. */
  body:has(.workspace[data-active-view="knowledge"]) { --mobile-header-height: 56px; --mobile-nav-height: 51px; }
  body:has(.workspace[data-active-view="assistant"]) { --mobile-header-height: 64px; --mobile-nav-height: 56px; }
  body:has(.workspace[data-active-view="settings"]) {
    --mobile-header-height: 52px;
    --mobile-nav-height: calc(44px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.workspace[data-active-view="settings"]) .bottom-nav {
    padding-block-start: 1px;
    padding-block-end: calc(1px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.workspace[data-active-view="settings"]) .bottom-nav .nav-item { min-height: 40px; padding-block: 1px; gap: 0; font-size: var(--text-micro); line-height: 1; }
  body:has(.workspace[data-active-view="settings"]) .bottom-nav .nav-icon { width: 20px; height: 20px; }
  body:has(.workspace[data-active-view="settings"]) .bottom-nav .nav-icon .ui-icon { width: 18px; height: 18px; }
  body:has(.workspace[data-active-view="settings"]) .bottom-nav-ask .nav-icon { width: 30px; height: 30px; margin-block-start: -4px; }
  .topbar { height: var(--mobile-header-height); padding-inline: 14px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .brand { gap: 9px; }
  .brand-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); }
  .brand-mark .ui-icon { width: 20px; height: 20px; }
  .brand-copy strong { font-size: var(--text-read); }
  html[data-read-only="true"] #brand-caption { white-space: normal; text-wrap: balance; line-height: 1.1; }
  body:has(.workspace[data-active-view="knowledge"]) .brand-mark { width: 26px; height: 26px; }
  body:has(.workspace[data-active-view="knowledge"]) .brand-mark .ui-icon { width: 16px; height: 16px; }
  .global-tools { gap: 2px; }
  .global-tool { width: 32px; height: 32px; }
  #theme-toggle { display: none; }
  .account-trigger { min-height: 44px; padding: 2px; }
  .account-trigger > .avatar { width: 32px; height: 32px; }
  body:has(.workspace[data-active-view="knowledge"]) .account-trigger > .avatar { width: 24px; height: 24px; }
  .account-chevron { display: none; }
  .account-theme-action { display: flex; }
  /* Та же удельная сила, что у правила промежуточной ширины: иначе колонка рейки остаётся
     стоять там, где самой рейки уже нет. */
  .app-shell, .app-shell[data-sidebar-collapsed="true"], .app-shell[data-sidebar-collapsed="false"] { min-width: 0; min-height: calc(100dvh - var(--mobile-header-height)); max-width: 100%; grid-template-columns: minmax(0, 1fr); background: transparent; }
  .sidebar { display: none; }
  .search-open { display: grid; }
  .search-area { display: none; }
  body[data-search-open="true"] .search-area { padding: 0 14px 10px; position: fixed; inset: var(--mobile-header-height) 0 auto; z-index: 25; display: block; border-block-end: 1px solid var(--line); background: var(--topbar); }
  body[data-search-open="true"] .global-search-results { width: calc(100vw - 28px); inset: calc(100% - 2px) 14px auto; max-height: min(460px, calc(100dvh - var(--mobile-header-height) - 80px)); }
  .bottom-nav { display: grid; }
  .assistant-agent-menu { max-width: none; }
  .workspace { padding: 26px 16px calc(var(--mobile-nav-height) + 24px); }
  .workspace[data-active-view="overview"] { padding: 0 0 calc(var(--mobile-nav-height) + 24px); }
  #overview-view { min-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-nav-height)); }
  .overview-dashboard { padding: 24px 16px 30px; }
  .overview-greeting { margin-block-end: 20px; }
  .overview-greeting h1 { font-size: var(--text-page); }
  .overview-greeting p { margin-block-start: 7px; font-size: var(--text-ui); }
  .overview-top-grid, .overview-main-column, .overview-side-column { gap: 14px; }
  .overview-continue, .overview-readiness, .overview-recent, .overview-actions { min-height: 0; padding: 18px 15px; }
  .overview-lead { min-height: 0; grid-template-columns: 58px minmax(0, 1fr); gap: 13px; }
  .overview-lead-marker { width: 58px; height: 58px; }
  .overview-lead-marker .ui-icon { width: 31px; height: 31px; }
  .overview-lead-title { white-space: normal; }
  .overview-lead-excerpt { display: none; }
  .overview-lead-open { margin-block-start: 12px; grid-column: 1 / -1; justify-content: center; }
  .overview-readiness-facts strong, .overview-readiness-facts small { white-space: normal; }
  .overview-stat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .overview-stat { min-height: 90px; }
  .recent-row { grid-template-columns: 34px minmax(0, 1fr) 18px; }
  .recent-kind, .recent-updated { display: none; }
  .workspace:has(> .settings-destination.active-view) { padding: 0 0 calc(var(--mobile-nav-height) + 24px); display: block; }
  .workspace:has(> .settings-destination.active-view) > .settings-destination { padding: 26px 16px 30px; }
  .settings-subnav { display: none; }
  #ai-models-section { margin-inline: 0; }
  #ai-models-section .settings-panel { padding: 12px; overflow-x: visible; }
  .ai-provider-list-header { display: none; }
  .ai-provider-list { min-width: 0; gap: 10px; }
  .ai-provider-row {
    min-width: 0; min-height: 0; padding: 14px 12px;
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  .ai-provider-row:last-child { border-block-end: 1px solid var(--line); }
  .ai-provider-identity { grid-column: 1; grid-row: 1; }
  .ai-provider-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .ai-provider-model { grid-column: 1 / -1; grid-row: 2; }
  .ai-provider-endpoint { grid-column: 1 / -1; grid-row: 3; }
  .ai-provider-row > .status-chip { grid-column: 1; grid-row: 4; justify-self: start; }
  .ai-provider-default-cell { grid-column: 2; grid-row: 4; justify-self: end; }
  .ai-provider-vision { display: none; }
  .ai-provider-actions .button { min-width: 0; padding-inline: 9px; }
  .portal-status-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .plugin-catalog { grid-template-columns: minmax(0, 1fr); }
  .plugin-controls > button { flex: 1 1 auto; }
  .plugin-search { width: 100%; margin-inline-start: 0; }
  .project-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .project-detail-panel { min-height: 0; padding: 18px 16px; }
  .workspace[data-active-view="knowledge"] { height: calc(100dvh - var(--mobile-header-height) - var(--mobile-nav-height)); }
  .workspace[data-active-view="assistant"] { height: calc(100dvh - var(--mobile-header-height)); padding: 0 0 var(--mobile-nav-height); }
  .assistant-drawer-bar { min-height: 60px; padding: 9px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .assistant-drawer-bar > .drawer-toggle { width: 100%; justify-content: center; }
  .assistant-rail, .assistant-materials { width: min(340px, 90vw); inset-block: var(--mobile-header-height) var(--mobile-nav-height); }
  .assistant-drawer-backdrop:not([hidden]) { inset-block: var(--mobile-header-height) var(--mobile-nav-height); }
  .assistant-rail { padding: 16px 14px; }
  .assistant-material-list { padding: 14px; }
}

@media (max-width: 767px) {
  .page-heading { align-items: start; flex-direction: column; gap: 10px; }
  .settings-heading { margin-block-end: 32px; }
  .settings-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .settings-group, .settings-group:nth-child(1), .settings-group:nth-child(2), .settings-group:nth-child(3), .settings-group:nth-child(5), .settings-group-ai { grid-column: 1; }
  .settings-grid, .settings-grid-two, .settings-grid-three { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .settings-item { min-height: 150px; padding: 18px; }
  .portal-version { margin-block-start: 28px; }
  .chat-panel-head,
  .assistant-layout[data-chat-state="empty"] .chat-panel-head,
  .assistant-layout[data-chat-state="answer"] .chat-panel-head { min-height: 72px; padding: 10px 16px; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .chat-panel-avatar,
  .assistant-layout[data-chat-state="answer"] .chat-panel-avatar { width: 36px; height: 36px; border-radius: 50%; }
  .chat-panel-avatar .ui-icon { width: 23px; height: 23px; }
  .chat-panel-copy strong { font-size: var(--text-read); }
  .chat-panel-copy small { font-size: var(--text-micro); }
  .chat-panel-model { display: none; }
  .chat-messages { padding: 14px 16px 18px; gap: 14px; }
  .chat-message.assistant { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .chat-message-avatar { width: 30px; height: 30px; border-radius: 50%; }
  .chat-message-avatar .ui-icon { width: 16px; height: 16px; }
  .chat-message.user .chat-message-content { max-width: 90%; }
  .chat-message.user .chat-message-content { padding: 8px 11px; font-size: var(--text-caption); }
  .chat-message-meta { margin-block-end: 3px; }
  .chat-answer { font-size: var(--text-caption); line-height: 1.52; }
  .chat-answer p { margin-block-end: 7px; }
  .chat-answer h1, .chat-answer h2, .chat-answer h3 { margin: 12px 0 6px; }
  .chat-answer h2 { font-size: var(--text-read); }
  .chat-answer ul, .chat-answer ol { margin: 5px 0 8px; padding-inline-start: 20px; }
  .chat-answer blockquote { margin-block: 9px; padding: 10px 12px; }
  .chat-message-actions { margin-block-start: 8px; }
  .chat-empty { padding: 20px 16px; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
  .chat-empty-orbit { width: 30px; height: 30px; }
  .chat-empty-avatar { width: 30px; height: 30px; }
  .chat-empty-avatar .ui-icon { width: 17px; height: 17px; }
  .chat-empty h2 { margin-block-start: 2px; font-size: var(--text-read); }
  .chat-empty p { font-size: var(--text-body); }
  .chat-starters { margin-block-start: 16px; grid-template-columns: minmax(0, 1fr); }
  .chat-starter { min-height: 68px; }
  .chat-composer-shell { width: calc(100% - 20px); margin-block-end: 10px; padding: 9px 10px 10px; box-shadow: none; }
  .chat-composer-note { display: none; }
  .chat-form .button { width: 44px; padding-inline: 0; justify-content: center; }
  .chat-form .button span { display: none; }
  .reader-stage { padding: 0; }
  .empty-state { min-height: 350px; }
  .reader { padding-inline: 16px; border-radius: 0; box-shadow: none; }
  .article-ai-console-prompts { display: none; }
  .article-tabs-shell { margin-inline: -16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .article-tablist { margin-inline: 0; padding-inline: 16px; grid-column: 2; grid-row: 1; }
  .article-tabs-scroll { width: 44px; height: 44px; position: static; grid-row: 1; align-self: center; }
  .article-tabs-scroll.previous { margin-inline-start: 4px; grid-column: 1; }
  .article-tabs-scroll.next { margin-inline-end: 4px; grid-column: 3; }
  .assistant-material-footer { grid-template-columns: minmax(0, 1fr); }
  .assistant-material-open { justify-self: start; }
  /* Паспорт открывается ящиком и не досыпается в конец документа: там его никто не искал,
     а до него надо было прокрутить всю статью. */
  .knowledge-drawer-bar { min-height: 56px; padding: 7px 14px; gap: 8px; }
  .drawer-toggle { padding-inline: 11px; }
  .drawer-toggle span { font-size: var(--text-caption); }
  .knowledge-index, .article-provenance { width: min(340px, 90vw); inset-block: var(--mobile-header-height) var(--mobile-nav-height); }
  .drawer-backdrop:not([hidden]) { inset-block: var(--mobile-header-height) var(--mobile-nav-height); }
  /* Содержание — тоже ящик: закреплённой колонке на этой ширине негде стоять. */
  .article-reading-layout.has-outline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .article-reading-layout.has-outline > .article-outline {
    width: min(340px, 90vw); max-height: none; padding: 20px 16px; position: fixed; z-index: 60;
    inset-block: var(--mobile-header-height) var(--mobile-nav-height); inset-inline-end: 0; overflow: auto; visibility: hidden; transform: translateX(100%);
    border: 0; border-inline-start: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-lg); transition: transform 200ms ease;
  }
  body[data-drawer="outline"] .article-reading-layout.has-outline > .article-outline { transform: none; visibility: visible; }
  .provenance-facts { display: block; }
  .provenance-fact { padding: 15px 2px; border-block-end: 1px solid var(--line); border-inline-start: 0; }
  .provenance-section { padding: 17px 2px 0; }
  .provenance-trust { display: block; }
  .ai-behavior-switches { grid-template-columns: 1fr; }
  .review-heading { flex-direction: column; }
  .source-methods { grid-template-columns: 1fr; }
  .form-grid.two-columns { grid-template-columns: 1fr; gap: 0; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .draft-recovery { grid-template-columns: 28px minmax(0, 1fr); }
  .draft-recovery .button { grid-column: 2; width: 100%; }
  .generation-preview { grid-template-columns: 1fr; }
  .workspace[data-active-view="studio"] { height: auto; min-height: calc(100dvh - var(--mobile-header-height)); padding: 0 0 calc(var(--mobile-nav-height) + 24px); overflow: visible; }
  #article-form.form-card { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow: visible; }
  .studio-parameters { padding: 24px 16px; grid-column: 1; grid-row: 1; border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .studio-parameters .document-import-row { min-height: 170px; margin-block-end: 0; }
  .studio-editor-pane { padding: 24px 16px; grid-column: 1; grid-row: 2; border-inline-end: 0; overflow: visible; }
  .studio-editor-heading { align-items: flex-start; flex-direction: column; }
  .studio-editor-heading .draft-status { max-width: none; }
  .studio-preview-pane { width: min(360px, 94vw); position: fixed; z-index: 70; inset: var(--mobile-header-height) 0 var(--mobile-nav-height) auto; display: none; box-shadow: var(--shadow-lg); }
  #studio-view.preview-open .studio-preview-pane { display: block; }
  .studio-form-actions { padding: 12px 16px; grid-column: 1; grid-row: 3; position: sticky; inset-block-end: var(--mobile-nav-height); z-index: 20; flex-wrap: wrap; }
  .studio-form-actions #editor-preview-toggle { display: inline-flex; }
  .reports-workspace { min-height: 0; display: block; }
  .reports-list-header { display: none; }
  .report-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .report-subject { grid-column: 1; }
  .report-kind, .report-status { grid-row: 2; }
  .report-author, .report-updated, .report-row > .ui-icon { display: none; }
  .report-detail { border-block-start: 1px solid var(--accent-line); }
  .report-controls { align-items: stretch; flex-direction: column; }
  .report-search { width: 100%; }
  .team-tabs { overflow-x: auto; gap: 18px; }
  .team-tab { flex: 0 0 auto; white-space: nowrap; }
  .team-access-metrics { grid-template-columns: repeat(3, minmax(76px, 1fr)); }
  .ai-dashboard-head, .ai-controls { align-items: stretch; flex-direction: column; }
  .ai-usage-controls { justify-content: flex-start; }
  .ai-usage-controls label { width: min(240px, 100%); }
  .ai-controls { justify-content: start; }
  .ai-controls label, .ai-controls select { width: 100%; }
  .ai-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .review-compare { grid-template-columns: 1fr; }
  .ai-generation-card { align-items: stretch; flex-direction: column; }
  .choice-cards { grid-template-columns: 1fr; }
  .quickstart-workspace { grid-template-columns: minmax(0, 1fr); }
  .setup-next { display: none; }
  .setup-card { grid-template-columns: minmax(0, 1fr); }
  .setup-card .button { grid-column: 1; width: 176px; }
  .setup-card-actions { width: 176px; }
  .document-import-row { align-items: stretch; flex-direction: column; }
  .file-button { width: 100%; justify-content: center; }
}

@media (max-width: 500px) {
  #login-dialog .login-card h2 { margin-inline-end: 74px; }
  /* Text keeps its size here. A phone is held closer, but the reader is not younger, and the
     nav rail scrolls sideways — there is room to spend on legibility rather than on labels. */
  kbd, .account-trigger-copy { display: none; }
  .account-trigger { padding-inline-end: 5px; gap: 3px; }
  .account-dropdown { width: min(280px, calc(100vw - 24px)); min-height: 0; padding: 8px; inset-inline-end: 0; display: block; }
  .account-profile { grid-template-columns: 54px minmax(0, 1fr); gap: 11px; padding: 8px 9px 11px; border-block-end: 1px solid var(--line); }
  .avatar.account-profile-avatar { width: 54px; height: 54px; font-size: var(--text-title); }
  .account-profile strong { font-size: var(--text-ui); }
  .account-profile small { font-size: var(--text-micro); }
  .account-action { min-height: 42px; padding: 8px 9px; gap: 9px; font-size: var(--text-caption); }
  .account-action .ui-icon { width: 20px; height: 20px; }
  .account-action.logout { min-height: 48px; padding-block-start: 12px; }
  .account .button.text { padding-inline: 5px; font-size: var(--text-micro); }
  .nav-item { padding-inline: 8px; }
  .nav-count { display: none; }
  .reader { padding: 4px 14px 32px; position: relative; }
  .drawer-toggle { padding-inline: 8px; gap: 5px; }
  .drawer-toggle .ui-icon { width: 16px; height: 16px; }
  .drawer-toggle span { font-size: var(--text-micro); }
  .article-breadcrumbs, .article-breadcrumbs button { min-height: 24px; }
  .article-heading-row { position: relative; display: block; }
  .reader-actions { position: absolute; inset: 0 0 auto auto; gap: 6px; }
  .favorite-action, .article-actions-menu > summary { width: 36px; height: 36px; }
  .article-title { max-width: calc(100% - 100px); margin-block: 4px 8px; font-size: var(--text-hero); }
  .article-meta { gap: 2px; font-size: var(--text-micro); letter-spacing: -.04em; white-space: nowrap; }
  .article-header { padding-block: 2px 25px; }
  .article-tablist { gap: 16px; }
  .article-tablist button { min-height: 50px; }
  .article-tablist button { font-size: var(--text-micro); }
  .article-tablist .ui-icon { width: 14px; height: 14px; }
  .article-tab-panel { padding-block-start: 16px; }
  .ai-review-list-head { display: none; }
  .ai-review-row { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; }
  .ai-review-created { display: none; }
  .ai-review-project-head { display: none; }
  .ai-review-project-row { grid-template-columns: 1fr; }
  .source-method { grid-template-columns: 1fr; }
  .source-method-icon { width: 40px; height: 40px; }
  .job-row { grid-template-columns: 17px minmax(0, 1fr); }
  .job-row .job-trailing { grid-column: 2; justify-content: flex-start; }
  .ai-metric-grid { grid-template-columns: 1fr; }
  .ai-models-section, .ai-behavior-settings, .ai-dashboard { padding: 18px 14px; }
  .ai-prompt-actions { align-items: stretch; flex-direction: column; }
  .ai-prompt-actions .button { width: 100%; }
  .ai-usage-controls, .ai-usage-controls label { width: 100%; }
  .plugin-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .plugin-badges { display: none; }
  .plugin-card-footer { grid-column: 2 / -1; justify-content: flex-start; }
  .login-card { padding: 30px 24px; }
  .setup-card { padding: 16px 14px; gap: 12px; }
  .setup-card .button { width: 100%; }
  .setup-card-actions { width: 100%; }
  .editor-toolbar button { flex: 1 1 auto; }
  .rich-editor { min-height: 280px; padding: 16px; }
}

@media (max-width: 500px) {
  .account-dropdown {
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 12px;
    max-block-size: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 501px) and (max-width: 767px) {
  .account-dropdown {
    width: min(360px, calc(100vw - 24px));
    max-block-size: calc(100dvh - 96px);
    padding: 12px;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .account-dropdown > * { flex-shrink: 0; }
  .account-profile {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 8px 9px 14px;
  }
  .avatar.account-profile-avatar { width: 64px; height: 64px; }
  .account-action { min-height: 48px; }
  .account-action.logout { min-height: 52px; }
}

@media (min-width: 768px) {
  .account-dropdown {
    max-block-size: calc(100dvh - 24px);
    inset-block-start: calc(100% + 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Issue #17: реестр сообщений и одно выбранное обращение рядом, как в эталоне. */
.workspace[data-active-view="reports"] { background: var(--settings-canvas); }
@media (min-width: 1180px) {
  .workspace[data-active-view="reports"] { padding-block-start: 34px; }
}
#reports-view { width: 100%; max-width: 1320px; }
#general-title { font-size: var(--text-reference-major); font-weight: 600; line-height: 37px; }
#reports-view .page-heading { align-items: center; }
#reports-view .page-heading h1 { font-size: var(--text-reference-page); font-weight: 600; line-height: 36px; }
#reports-view .page-heading p { margin: 7px 0 0; color: var(--muted); }
.report-controls { margin-block: 8px 16px; display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.report-filter-tabs { display: flex; gap: 22px; border-block-end: 1px solid var(--line); }
.report-filter-tabs button { min-height: 44px; margin-block-end: -1px; padding: 0 2px; border: 0; border-block-end: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: var(--text-caption); font-weight: 700; }
.report-filter-tabs button.active { border-color: var(--accent); color: var(--ink); }
.report-filter-tabs span { min-width: 22px; height: 22px; margin-inline-start: 5px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--sunken); font-size: var(--text-micro); }
.report-search { width: min(290px, 100%); min-height: 42px; margin: 0; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--muted); background: var(--paper); }
.report-search input { min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.reports-workspace { min-width: 0; }
.reports-list-pane { min-width: 0; min-height: 590px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.reports-list-header, .report-row { display: grid; grid-template-columns: minmax(180px, 1.35fr) 88px 98px minmax(120px, .8fr) 116px 18px; gap: 10px; align-items: center; }
.reports-list-header { min-height: 42px; padding: 0 16px; border-block-end: 1px solid var(--line); color: var(--muted); background: var(--sunken); font-size: var(--text-micro); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.reports-list { display: grid; }
.report-row { width: 100%; min-height: 72px; padding: 10px 16px; border: 0; border-block-end: 1px solid var(--line); color: var(--ink); background: var(--paper); cursor: pointer; font: inherit; text-align: start; }
.report-row:hover { background: var(--paper-raised); }
.report-row.selected { background: var(--selection-report); }
.report-row.report-fixed { opacity: .72; }
.report-subject { min-width: 0; display: grid; gap: 3px; }
.report-subject strong, .report-subject small { overflow: hidden; text-overflow: ellipsis; }
.report-subject strong { font-size: var(--text-caption); }
.report-subject small { color: var(--muted); font-size: var(--text-micro); white-space: nowrap; }
.report-kind { display: flex; gap: 6px; align-items: center; color: var(--ink-soft); font-size: var(--text-micro); }
.report-kind .ui-icon { width: 16px; height: 16px; color: var(--danger-ink); }
.report-kind-wish .ui-icon { color: var(--accent-ink); }
.report-status { display: flex; gap: 6px; align-items: center; color: var(--ink-soft); font-size: var(--text-micro); }
.report-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.report-status-accepted i { background: var(--progress); }
.report-status-declined i { background: var(--muted-weak); }
.report-status-fixed i { background: var(--success); }
.report-author { min-width: 0; display: flex; gap: 7px; align-items: center; }
.report-author .avatar, .report-activity-row .avatar { width: 28px; height: 28px; font-size: var(--text-micro); }
.report-author > span:last-child { overflow: hidden; font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.report-updated { color: var(--muted); font-size: var(--text-micro); }
.report-row > .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.report-detail { min-width: 0; padding: 26px 24px; overflow-y: auto; background: var(--paper); }
.report-detail-empty { min-height: 500px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.report-detail-empty .ui-icon { width: 34px; height: 34px; }
.report-detail-empty span { max-width: 34ch; font-size: var(--text-caption); line-height: 1.5; }
.report-detail-heading { padding-block-end: 18px; border-block-end: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.report-detail-heading h2 { margin: 0; font-size: var(--text-title); }
.report-detail-heading p { margin: 7px 0 0; color: var(--muted); font-size: var(--text-caption); }
.report-detail-status { padding: 7px 10px; border: 1px solid var(--accent-line); border-radius: var(--radius-xs); color: var(--accent-ink); background: var(--accent-wash); font-size: var(--text-caption); font-weight: 700; }
.report-detail-section { padding-block: 18px; border-block-end: 1px solid var(--line); }
.report-detail-section h3 { margin: 0 0 10px; font-size: var(--text-ui); }
.report-detail-section p { margin: 0; color: var(--ink-soft); line-height: 1.6; white-space: pre-wrap; }
.report-detail-section > small { margin-block-start: 9px; display: block; color: var(--muted); }
.report-tracker { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-tracker h3 { margin: 0; }
.report-tracker-link { flex: 0 0 auto; overflow-wrap: anywhere; color: var(--accent-ink); font-weight: 700; }
.report-environment pre { max-height: 180px; margin: 0; padding: 12px; overflow: auto; border-radius: var(--radius-xs); color: var(--ink-soft); background: var(--sunken); font: 600 var(--text-micro)/1.55 "Cascadia Mono", monospace; white-space: pre-wrap; }
.report-attachment-row { min-width: 0; padding: 8px; display: grid; grid-template-columns: 116px minmax(0, 1fr) 36px; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-raised); }
.report-image { width: 116px; height: 74px; display: block; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-xs); }
.report-attachment-copy { min-width: 0; }
.report-attachment-copy strong, .report-attachment-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-attachment-copy strong { font-size: var(--text-caption); }
.report-attachment-copy small { margin-block-start: 4px; color: var(--muted); font-size: var(--text-micro); }
.report-attachment-download { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--ink-soft); background: var(--paper); }
.report-attachment-download:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-wash); }
.report-attachment-download .ui-icon { width: 18px; height: 18px; }
.report-activity { display: grid; gap: 10px; }
.report-activity h3 { margin-block-end: 2px; }
.report-activity-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; font-size: var(--text-caption); }
.report-activity-row time { color: var(--muted); font-size: var(--text-micro); }
.report-activity-system { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--sunken); }
.report-actions { padding-block-start: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.report-actions .button { min-height: 38px; padding: 7px 11px; font-size: var(--text-caption); }

@media (min-width: 1180px) {
  .workspace:has(> #reports-view.active-view) { grid-template-columns: 250px minmax(0, 1fr); }
  .workspace:has(> #reports-view.active-view) > #reports-view { padding: 25px 0 0 10px; }
  #reports-view:not([hidden]) { display: grid; grid-template-columns: 618px minmax(0, 1fr); column-gap: 15px; align-items: stretch; }
  #reports-view .reports-workspace { padding-block-start: 9px; }
  #reports-view .page-heading { margin: 0 0 0 24px; padding-inline-end: 24px; align-items: flex-start; flex-direction: column; gap: 26px; }
  #reports-view .report-controls { margin: 32px 24px 21px; }
  /* The split workspace gives the register a fixed 618px track. Keeping the owner column here
     * made the six-column grid wider than that track and cut the timestamp. The author is an
     * intentionally neutral “Вы” in this private projection, so the column carries no decision
     * value; preserve the subject, type, status and time instead. */
  #reports-view .reports-list-header,
  #reports-view .report-row { grid-template-columns: minmax(150px, 1fr) 72px 88px 90px 16px; gap: 8px; }
  #reports-view .reports-list-header > span:nth-child(4),
  #reports-view .report-author { display: none; }
  #reports-view .report-updated { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The register owns the full reference column: its taller head aligns the first selected row,
     while only that selected two-line row is compacted to the canonical 64px measure. */
  #reports-view .reports-list-pane { min-height: 609px; }
  #reports-view .reports-list-header { min-height: 50px; }
  #reports-view .report-row.selected { min-height: 64px; }
  #reports-view .report-subject small { display: none; }
  #reports-view .report-detail { min-height: 100%; border: 0; border-inline-start: 1px solid var(--accent-line); border-radius: 0; }
  #reports-view .report-activity { padding-block-end: 48px; gap: 24px; }
  #reports-view .report-activity-row { min-height: 40px; }
}

@media (min-width: 1180px) and (max-width: 1399px) {
  #reports-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  #reports-view .report-detail { margin-block-start: 18px; }
}

.badge.unreleased { background: var(--sunken); color: var(--muted); }

/* Разделы ИТС и их назначение. */
.its-sections { padding: 0; border: 0; }
.its-sections legend { padding: 0; font-size: var(--text-caption); font-weight: 600; }
.its-sections-list { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.its-section-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.its-section-row input { flex: 1 1 180px; min-width: 0; }
.its-section-row select { flex: 1 1 220px; min-width: 0; }
.its-section-row .button { flex: 0 0 auto; }

/* Картинки внутри статьи: чужая ширина не должна выламывать колонку. */
.article-image { display: block; max-width: 100%; height: auto; margin: 12px 0; border-radius: var(--radius-sm); }

/* Состояние портала: пары «что» и «сколько». */
.portal-status-list { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.portal-status-card { min-width: 0; min-height: 94px; padding: 18px 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--paper); }
.portal-status-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); }
.portal-status-icon .ui-icon { width: 28px; height: 28px; }
.portal-status-copy { min-width: 0; display: grid; gap: 5px; }
.portal-status-list dt { color: var(--ink); font-size: var(--text-caption); font-weight: 700; }
.portal-status-list dd { min-width: 0; margin: 0; overflow: visible; color: var(--ink-soft); font-size: var(--text-caption); font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.portal-status-warning { color: var(--danger-ink) !important; font-weight: 700; }
.license-settings-panel { max-width: 820px; }
.license-settings-summary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.license-settings-summary > div { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-raised); }
.license-settings-summary dt { color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.license-settings-summary dd { min-width: 0; margin: 5px 0 0; color: var(--ink); font-size: var(--text-ui); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.license-import-form { margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.license-import-form input[type="file"] { display: block; width: 100%; margin-block-start: 8px; color: var(--ink-soft); font: inherit; }
.license-import-form .field-note { min-height: 1.4em; margin-block: 8px 0; }
#license-status-message:empty, #license-import-error:empty { display: none; }
#license-status-message { margin-block: 18px 0; }
#license-view .button.secondary { color: var(--ink); }
#license-retry { margin-block-start: 0; }
.license-quota-summary { margin-block-start: 18px; }
.license-attention { padding: 12px 14px; border-inline-start: 3px solid var(--accent); background: var(--accent-wash); color: var(--ink); }
.license-affected-list { margin-block: 18px; padding-inline-start: 20px; color: var(--ink-soft); }
.license-affected-list li + li { margin-block-start: 8px; }
.license-handoff { margin-block-start: 18px; border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.license-handoff summary { cursor: pointer; min-height: 44px; align-content: center; color: var(--ink); font-weight: 600; }
.license-feature-details { margin-block-start: 12px; }
.license-feature-details summary { cursor: pointer; min-height: 44px; align-content: center; }
.license-handoff .button, .license-form-handoff > .button, .plugin-license-button { min-height: 44px; }
.license-handoff textarea { display: block; width: 100%; min-height: 180px; margin-block: 8px 12px; resize: vertical; }
.license-handoff .form-hint { margin-block: 10px 0; }
.license-form-handoff:empty, #project-form-error:empty { display: none; }
.plugin-availability { color: var(--ink-soft); }
#portal-status > .settings-panel { padding: 0; border: 0; background: transparent; }
#its-settings > .settings-panel { padding: 22px 20px 20px; }
.its-panel-heading { margin-block-end: 18px; }
.its-panel-heading h2 { margin: 0; font-size: var(--text-title); }
#its-form { gap: 0; }
.its-switch-row { margin: 0 0 18px; padding: 0; border: 0; background: transparent; }
.its-field { min-height: 68px; margin: 0; padding-block: 12px; display: grid; grid-template-columns: 315px minmax(0, 1fr); gap: 18px; align-items: center; }
.its-field > span strong, .its-field > span small { display: block; }
.its-field > span strong { color: var(--ink); font-size: var(--text-ui); font-weight: 500; }
.its-field > span small { margin-block-start: 3px; color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.its-field > input { width: 100%; margin: 0; }
.its-field > input[type="number"] { max-width: 198px; }
.its-key-note { margin-block: 14px 4px; padding: 13px 16px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--accent-wash); }
.its-actions { margin-block-start: 18px !important; display: grid; grid-template-columns: auto auto auto 1fr; gap: 12px; align-items: center; }
.its-actions .button.primary { min-width: 184px; justify-self: end; }
@media (min-width: 1180px) {
  #its-settings > .settings-panel { min-height: 0; }
  #its-form { min-height: 0; display: grid; }
  .its-field { min-height: 72px; margin: 0; }
  .its-switch-row + .its-field { margin-block-start: 10px; }
  .its-actions { margin-block-start: 18px !important; padding-block-start: 0; }
  #its-form-error:empty { display: none; }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .portal-status-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .its-field { grid-template-columns: 240px minmax(0, 1fr); }
  .its-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .its-actions .button { width: 100%; justify-content: center; }
  .its-actions .button.primary { min-width: 0; justify-self: stretch; }
}
@media (max-width: 767px) {
  .portal-status-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .license-settings-summary { grid-template-columns: minmax(0, 1fr); }
  .its-field { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .its-field > input[type="number"] { max-width: none; }
  .its-actions { grid-template-columns: minmax(0, 1fr); }
  .its-actions .button, .its-actions .button.primary { width: 100%; min-width: 0; justify-self: stretch; justify-content: center; }
}
.portal-status-warning { color: var(--danger-ink, var(--muted)); font-weight: 600; }

/* Листинги внутри статьи: строки и отступы — часть смысла. */
.reader pre { margin: 12px 0; padding: 12px 14px; overflow-x: auto; background: var(--sunken); border-radius: var(--radius-sm); }
.reader pre code { font-family: Consolas, 'Courier New', monospace; font-size: var(--text-caption); white-space: pre; }

/* Адрес источника: длинный и не должен растягивать строку. */
.project-source-address { color: var(--muted); font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-edit { flex: 0 0 auto; min-height: 40px; padding: 7px 9px; }
.source-edit-facts { margin: 4px 0 0; padding: 12px 14px; background: var(--sunken); border-radius: var(--radius-sm); }
.source-edit-facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.source-edit-facts dt { color: var(--muted); font-size: var(--text-caption); }
.source-edit-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-caption); }

/*
 * Mobile reference 26/27: settings are a compact directory, while task dialogs are sheets.
 * Keeping the desktop card height on a phone hid half of the destinations below the fold;
 * centring a narrow desktop modal made the primary action needlessly harder to reach.
 */
@media (max-width: 767px) {
  .workspace[data-active-view="settings"] {
    padding: 16px 21px calc(var(--mobile-nav-height) + 24px);
    background: var(--settings-canvas);
  }
  .settings-heading { margin-block-end: 9px; gap: 2px; }
  .settings-heading h1 { font-size: var(--text-section); }
  .settings-heading > p { font-size: var(--text-caption); line-height: 1.35; }
  .settings-list { gap: 6px; }
  .settings-group { gap: 5px; }
  .settings-group h2 { padding-block-end: 4px; font-size: var(--text-ui); }
  .settings-grid, .settings-grid-two, .settings-grid-three { gap: 4px; }
  .settings-item,
  .settings-group-ai .settings-item,
  .settings-group:nth-child(5) .settings-item {
    min-height: 80px;
    padding: 5px 11px;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    gap: 12px;
    align-items: center;
  }
  .settings-group-ai .settings-item { min-height: 72px; }
  .settings-item-copy,
  .settings-group-ai .settings-item-copy,
  .settings-group:nth-child(5) .settings-item-copy {
    min-height: 0;
    padding: 0;
    align-self: stretch;
    justify-content: center;
  }
  .settings-item-copy strong { font-size: var(--text-ui); }
  .settings-item-copy > span:not(.settings-status) { margin-block-start: 2px; font-size: var(--text-micro); line-height: 1.25; }
  .settings-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); }
  .settings-icon .ui-icon { width: 28px; height: 28px; }
  .settings-status { min-height: 18px; margin-block-start: 2px; padding: 1px 8px; font-size: var(--text-micro); }
  .settings-chevron { width: 16px; height: 16px; }
  .portal-version { min-height: 52px; margin-block-start: 22px; padding: 11px 13px; }

  .chat-composer-shell {
    width: calc(100% - 34px);
    margin: 0 auto 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
  }
  .chat-composer-shell > .form-error:empty { display: none; }
  .chat-form { min-height: 52px; padding: 4px; }
  .chat-form textarea { min-height: 36px; padding-block: 7px; }
  .chat-form .button { width: 36px; min-height: 36px; }
  .assistant-layout[data-chat-state="answer"] .chat-message.assistant,
  .chat-message.assistant { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .assistant-layout[data-chat-state="answer"] .chat-message.assistant .chat-message-avatar,
  .chat-message-avatar { width: 36px; height: 36px; }
  .assistant-layout[data-chat-state="answer"] .chat-messages { padding-block-start: 1px; }
  .chat-message.user .chat-message-content { max-width: 79%; font-size: var(--text-micro); letter-spacing: -.045em; }
  .chat-composer-note { display: none; }
  .article-title { font-size: var(--text-page); line-height: 1.08; }
  .editor-toolbar-groups { min-width: 0; flex-wrap: wrap; }

  dialog:not(.versions-dialog):modal {
    width: 100vw;
    max-width: none;
    max-height: calc(100dvh - var(--mobile-header-height));
    margin: 0;
    position: fixed;
    inset: auto 0 0;
    overflow: hidden;
    border-inline: 0;
    border-block-end: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  dialog:not(.versions-dialog):modal > .login-card {
    width: 100% !important;
    max-width: none;
    max-height: calc(100dvh - var(--mobile-header-height));
    padding: 28px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
  }

  /* The project flows are compact task sheets in the mobile reference. The generic dialog
     rule above deliberately remains roomier for authentication and AI editors; applying that
     spacing here turned two short choices into almost full-screen forms and hid the actions. */
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog):modal > .login-card {
    padding: 22px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) .login-card::before {
    content: "";
    width: 44px;
    height: 4px;
    position: absolute;
    inset: 7px auto auto 50%;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
    transform: translateX(-50%);
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) .dialog-close {
    width: 32px;
    height: 32px;
    inset: 13px 12px auto auto;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) .dialog-close .ui-icon {
    width: 18px;
    height: 18px;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) .login-card h2 {
    margin: 0 40px 8px 0;
    font-size: var(--text-title);
    line-height: 1.2;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .login-card > label {
    margin-block: 9px;
    gap: 4px;
    font-size: var(--text-micro);
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) input,
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) select {
    min-height: 38px;
    padding-block: 7px;
    /* iOS zooms the whole viewport when a focused form control is below 16px. */
    font-size: var(--text-read);
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .field-counter,
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .field-note {
    font-size: var(--text-micro);
  }
  #source-dialog-copy { display: none; }
  #project-dialog .project-format-note { margin: 6px 0 0; line-height: 1.35; }

  #project-delivery.choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #project-delivery.choice-cards small { display: none; }
  #source-delivery.choice-cards,
  #source-kind-options.choice-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#project-delivery, #source-delivery, #source-kind-options).choice-cards {
    margin-block: 10px;
    gap: 7px;
  }
  :is(#project-delivery, #source-delivery, #source-kind-options).choice-cards legend {
    margin-block-end: 4px;
    font-size: var(--text-micro);
  }
  :is(#project-delivery, #source-delivery, #source-kind-options).choice-cards label {
    min-height: 62px;
    padding: 8px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
  }
  :is(#project-delivery, #source-delivery, #source-kind-options).choice-cards .ui-icon {
    width: 21px;
    height: 21px;
  }
  :is(#project-delivery, #source-delivery, #source-kind-options).choice-cards strong {
    font-size: var(--text-micro);
    line-height: 1.25;
  }
  :is(#project-delivery, #source-delivery, #source-kind-options).choice-cards small {
    margin-block-start: 2px;
    font-size: var(--text-micro);
    line-height: 1.25;
  }
  :is(#project-dialog, #source-dialog) .upload-zone {
    min-height: 84px;
    margin-block: 10px;
    padding: 10px;
    gap: 4px;
  }
  :is(#project-dialog, #source-dialog) .upload-zone > .ui-icon {
    width: 27px;
    height: 27px;
  }
  :is(#project-dialog, #source-dialog) .upload-zone strong { font-size: var(--text-micro); }
  :is(#project-dialog, #source-dialog) .upload-zone small {
    font-size: var(--text-micro);
    line-height: 1.3;
  }

  #project-settings-dialog .project-settings-option {
    margin: 8px 0 4px;
    padding: 9px 10px;
    gap: 10px;
  }
  #project-settings-dialog .project-settings-option strong { font-size: var(--text-micro); }
  #project-settings-dialog .project-settings-option small {
    margin-block-start: 2px;
    font-size: var(--text-micro);
    line-height: 1.3;
  }
  #project-settings-dialog .instructed-kinds { margin-block: 10px 0; }
  #project-settings-dialog .instructed-kinds legend { font-size: var(--text-micro); }
  #project-settings-dialog .instructed-kinds-copy { display: none; }
  #project-settings-dialog .instructed-kinds-list {
    max-height: 228px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 8px;
  }
  #project-settings-dialog .instructed-kind {
    min-height: 28px;
    padding: 3px 4px;
    gap: 6px;
    font-size: var(--text-micro);
  }
  #project-settings-dialog .instructed-kind input {
    width: 14px;
    height: 14px;
  }

  :is(#project-delete-dialog, #agent-delete-dialog) .delete-confirmation-lead {
    margin-block: 8px;
    gap: 9px;
    font-size: var(--text-micro);
  }
  :is(#project-delete-dialog, #agent-delete-dialog) .delete-confirmation-icon {
    width: 34px;
    height: 34px;
  }
  :is(#project-delete-dialog, #agent-delete-dialog) .delete-confirmation-icon .ui-icon {
    width: 18px;
    height: 18px;
  }
  :is(#project-delete-dialog, #agent-delete-dialog) .delete-summary { margin-block: 8px; padding: 8px 10px; }
  :is(#project-delete-dialog, #agent-delete-dialog) .delete-summary strong { font-size: var(--text-micro); }
  :is(#project-delete-dialog, #agent-delete-dialog) .delete-summary small { font-size: var(--text-micro); }

  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) .form-actions {
    margin-block-start: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog, #agent-delete-dialog) .form-actions .button {
    width: auto;
    min-height: 40px;
    padding: 7px 12px;
    flex: 1 1 0;
    font-size: var(--text-micro);
  }
  :is(#project-dialog, #source-dialog, #project-settings-dialog, #project-delete-dialog) .form-actions .button.primary,
  :is(#project-delete-dialog, #agent-delete-dialog) .form-actions .button.danger { flex-grow: 1.35; }

  /* Source and settings keep every working option, but mobile presents the self-explanatory
     choices as compact controls. Otherwise the comparison sheet has to scale the whole phone
     down just to fit repeated descriptions, making the real form look like a desktop modal. */
  #source-dialog:modal > .login-card {
    padding: 18px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #source-dialog .login-card h2 { margin-block-end: 5px; }
  #source-dialog .login-card > label { margin-block: 4px; }
  #source-dialog :is(#source-delivery, #source-kind-options).choice-cards { margin-block: 6px; }
  #source-delivery.choice-cards label { min-height: 44px; padding: 5px; }
  #source-delivery.choice-cards small { display: none; }
  #source-kind-options.choice-cards label { min-height: 56px; padding: 5px; }
  #source-kind-options.choice-cards small[data-mobile-label] { font-size: 0; }
  #source-kind-options.choice-cards small[data-mobile-label]::after {
    content: attr(data-mobile-label);
    font-size: var(--text-micro);
  }
  #source-dialog .upload-zone { min-height: 62px; margin-block: 6px; padding-block: 6px; }
  #source-dialog .form-actions { margin-block-start: 8px; }

  #project-settings-dialog:modal > .login-card {
    padding: 18px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #project-settings-dialog .login-card h2 { margin-block-end: 5px; }
  #project-settings-dialog .project-settings-option {
    margin: 4px 0 2px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #project-settings-dialog .switch-input:checked { background: var(--accent); }
  #project-settings-dialog .instructed-kinds { margin-block: 6px 0; }
  #project-settings-dialog .instructed-kinds-list {
    max-height: 168px;
    padding: 0;
    border: 0;
    border-radius: 0;
    gap: 0 6px;
    background: transparent;
  }
  #project-settings-dialog .instructed-kind { min-height: 22px; padding: 1px 2px; }
  #project-settings-dialog .form-actions { margin-block-start: 8px; }

  :is(#project-delete-dialog, #agent-delete-dialog) .delete-confirmation-lead { margin-block: 6px; }
  :is(#project-delete-dialog, #agent-delete-dialog) .form-actions { margin-block-start: 8px; }
  #project-delete-submit:disabled {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--paper);
    box-shadow: none;
  }
  :is(#project-delete-dialog, #agent-delete-dialog):modal > .login-card {
    padding-block-end: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #agent-dialog:modal .agent-editor-card { width: 100%; max-height: calc(100dvh - 65px); }
}

/* Read and operate behavior fixes from the September visual audit.
   Content determines height; secondary context shares one quiet surface. */
.knowledge-panel-heading, .drawer-close { display: none; }
.provenance-heading .drawer-close { display: none; }
.outline-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-close { width: 44px; height: 44px; padding: 0; flex: 0 0 auto; place-items: center; border: 0; border-radius: var(--radius-xs); color: var(--ink-soft); background: transparent; cursor: pointer; }
.drawer-close:hover { background: var(--sunken); }
#knowledge-empty { padding: 40px 24px; }
#knowledge-empty-reset { margin-block-start: 16px; }
#knowledge-view.no-results .reader-stage { min-width: 0; }
#knowledge-view.no-results .article-list > .list-empty { display: none; }
.provenance-heading { min-height: 44px; padding-block-end: 12px; }
.provenance-heading h2 { font-size: var(--text-ui); font-weight: 600; letter-spacing: normal; text-transform: none; }
.provenance-facts { gap: 0; padding-block-start: 0; }
.provenance-fact, .provenance-section { padding: 16px 0; margin: 0; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; background: transparent; }
:root[data-theme="dark"] body:has(.workspace[data-active-view="knowledge"]) :is(.provenance-fact, .provenance-section) { background: transparent; }
.provenance-fact dt, .provenance-section h3 { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: normal; text-transform: none; }
.provenance-lineage { margin-block-start: 0; gap: 6px 12px; }
.provenance-lineage .provenance-lineage-source { font-size: var(--text-caption); font-weight: 600; }
.provenance-fact code { white-space: normal; overflow-wrap: anywhere; }
.provenance-layer { padding-inline: 0; }
.provenance-relationship { min-height: 44px; background: transparent; }
.article-title { font-size: var(--text-reader-title); }
.article-item strong { font-weight: 600; }
.article-item.selected strong { font-weight: 700; }

.overview-continue { min-height: 170px; }
.overview-readiness { min-height: 0; padding: 24px 20px; }
.overview-stat-grid { gap: 12px; }
.overview-stat { min-height: 112px; padding: 18px 14px; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.overview-stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); }
.overview-stat-icon .ui-icon { width: 26px; height: 26px; }
.overview-stat strong { font-size: var(--text-page); }
.overview-stat small { font-weight: 500; }
.overview-stat em { margin-block-start: 4px; white-space: normal; }


.team-access-summary { order: -1; padding: 0; border: 0; background: transparent; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.team-access-summary h2 { margin: 0; font-size: var(--text-ui); }
.team-access-metrics { display: flex; flex-wrap: wrap; gap: 16px; }
.access-metric { padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; text-align: start; }
.access-metric-icon { display: none; }
.access-metric strong { font-size: var(--text-ui); }
.access-metric > span:last-child { overflow: visible; font-size: var(--text-caption); }
.team-integration-status { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.team-integration-card { width: auto; min-height: 44px; padding: 8px 10px; display: flex; gap: 8px; border: 0; background: var(--sunken); }
.team-integration-icon { width: 24px; height: 24px; background: transparent; }
.team-integration-icon .ui-icon { width: 20px; height: 20px; }
.role-label { overflow: visible; white-space: normal; overflow-wrap: anywhere; border-radius: var(--radius-xs); }
.agent-row-actions button { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--ink-soft); background: var(--paper); cursor: pointer; }
.agent-row-actions button:hover { background: var(--sunken); }
#ai-provider-dialog, #agent-dialog, #article-ai-dialog, #project-ai-dialog { --agent-fill: var(--agent-dialog); }
#team-view .users-list-frame { min-height: 0; }
#general-view #versioning-settings { max-width: 850px; margin-block: 24px; }
#versioning-settings .switch-row { margin: 0; }

#article-form.form-card { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.studio-parameters { padding: 24px 18px; }
.studio-parameters-body { display: flex; flex-direction: column; }
#studio-parameters-toggle { display: none; }
.studio-parameters > h2 { margin-block-end: 20px; font-size: var(--text-ui); letter-spacing: normal; text-transform: none; }
.studio-parameters > label { margin-block-end: 20px; gap: 8px; }
.studio-parameters-body > label { margin-block: 0 20px; gap: 8px; }
.studio-parameters-body > label select { min-height: 50px; padding-inline-start: 40px; font-weight: 400; }
.studio-access legend, .studio-audience legend { margin-block-end: 10px; }
.studio-import-title { margin-block: 24px 10px; }
.studio-parameters .document-import-row { min-height: 0; margin: 0; padding: 16px 12px; }
.studio-parameters .document-import-row > .ui-icon { width: 32px; height: 32px; }
.studio-editor-pane { padding: 24px clamp(24px, 4vw, 64px) 32px; border: 0; }
.studio-editor-pane > * { width: 100%; max-width: 900px; margin-inline: auto; }
.studio-editor-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 24px; padding: 0; }
.studio-editor-heading .draft-status { position: static; max-width: none; border: 0; padding: 0; }
.studio-editor-pane .editor-field { margin-block-start: 24px; }
.studio-editor-pane .rich-editor { height: auto; min-height: 420px; max-height: none; padding: 24px; overflow: visible; }
.studio-preview-pane { position: static; width: auto; padding: 24px; border-inline-start: 1px solid var(--line); box-shadow: none; }
.studio-preview-heading { gap: 8px; flex-wrap: wrap; }
.studio-preview-heading h2 { margin: 0; font-size: var(--text-ui); letter-spacing: normal; text-transform: none; }
.studio-preview-pane .instruction-preview { min-height: 0; padding: 20px; }
.studio-form-actions { padding: 14px 24px; flex-wrap: wrap; }
.studio-form-actions #article-submit { min-width: 0; }
@media (max-width: 1179px) {
  .knowledge-panel-heading { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-block-end: 1px solid var(--line); }
  #outline-drawer-toggle { display: inline-flex; }
  .drawer-close { display: grid; }
  .provenance-heading #provenance-collapse { display: none; }
  .provenance-heading .drawer-close { display: grid; width: 44px; height: 44px; border: 0; background: transparent; }
  .provenance-heading .drawer-close .ui-icon { transform: none; }
  #studio-view.preview-open .studio-editor-pane { display: none; }
  #studio-view.preview-open .studio-preview-pane { display: block; grid-column: 2; grid-row: 1; }
  .studio-preview-pane { border: 0; }
}
@media (max-width: 1399px) {
  #ai-models-section .settings-panel { padding: 12px; }
  .ai-provider-list-header { display: none; }
  .ai-provider-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 16px 8px; }
  .ai-provider-identity { grid-column: 1; grid-row: 1; }
  .ai-provider-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .ai-provider-model { grid-column: 1 / -1; grid-row: 2; }
  .ai-provider-endpoint { grid-column: 1 / -1; grid-row: 3; }
  .ai-provider-row > .status-chip { grid-column: 1; grid-row: 4; justify-self: start; }
  .ai-provider-default-cell { grid-column: 2; grid-row: 4; justify-self: end; }
}
@media (max-width: 767px) {
  .ai-generation-layout { padding-block-start: 24px; grid-template-columns: minmax(0, 1fr); }
  #ai-behavior-settings > .settings-panel, #ai-project-rules > .settings-panel, .review-queue-card > .settings-panel { min-height: 0; }
  .ai-review-project-head { display: none; }
  .ai-review-project-row { grid-template-columns: minmax(0, 1fr); }
  .knowledge-drawer-bar { padding-inline: 12px; gap: 6px; }
  .knowledge-drawer-bar-end { gap: 6px; }
  .knowledge-drawer-bar .drawer-toggle { padding-inline: 8px; gap: 5px; }
  .knowledge-drawer-bar .drawer-toggle .ui-icon { display: none; }
  #settings-view .settings-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #settings-view .settings-item { min-height: 80px; padding-block: 10px; }
  #settings-view .settings-group-ai { grid-row: auto; }
  .overview-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .overview-stat { min-height: 84px; padding: 12px 10px; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .overview-stat-icon { display: none; }
  .overview-stat strong { font-size: var(--text-page); }
  .overview-stat small { font-size: var(--text-micro); }
  .overview-stat em { display: none; }
  .team-access-summary h2 { flex-basis: 100%; }
  .team-access-metrics { gap: 8px 16px; }
  .team-integration-card { flex-wrap: wrap; }
  #article-form.form-card { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; overflow: visible; }
  .studio-parameters { padding: 20px 16px; }
  .studio-parameters > h2 { display: none; }
  #studio-parameters-toggle { min-height: 44px; width: 100%; padding: 0; border: 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--ink); background: transparent; cursor: pointer; font-weight: 600; }
  #studio-parameters-toggle .ui-icon { transform: rotate(90deg); }
  #studio-parameters-toggle[aria-expanded="true"] .ui-icon { transform: rotate(-90deg); }
  .studio-parameters-body { margin-block-start: 20px; }
  #studio-view:not(.parameters-open) .studio-parameters-body { display: none; }
  .studio-editor-pane { padding: 24px 16px; }
  #studio-view.preview-open .studio-preview-pane { grid-column: 1; grid-row: 2; padding: 24px 16px; }
  .studio-editor-pane .rich-editor { padding: 20px 16px; }
  .studio-form-actions { padding: 12px; gap: 8px; }
  .studio-form-actions #article-submit { flex: 1 1 100%; }
}

/* Reference-led correction: neutral working surfaces, one product family, explicit editor modes. */
#portal-navigation .nav-item .ui-icon { width: 24px; height: 24px; stroke-width: 1.75; }
#portal-navigation .nav-item { color: var(--ink-soft); }
#portal-navigation .nav-item.active { color: var(--ink); background: var(--accent-tint); }
#portal-navigation .nav-item[data-view="assistant"] .ui-icon { color: var(--agent-ink); }
.brand-mark .ui-icon { width: 26px; height: 26px; stroke-width: 1.75; }
.button .ui-icon { stroke-width: 1.75; }
.section-heading { flex-wrap: wrap; gap: 12px; }
.section-heading > div { min-width: 0; }
.status-chip { font-weight: 600; letter-spacing: normal; text-transform: none; }

/* The reading and operating screens share a quieter hierarchy in the product typeface. */
#overview-view :is(h1, h2, strong), #sources-view :is(h2, strong),
#ai-settings-view :is(h2, strong), #ai-agents-view :is(h2, strong),
#its-view :is(h1, h2), .article-title, .article-content :is(h2, h3) { font-weight: 600; }
#overview-view :is(.overview-lead-title, .overview-lead-open, .button),
#sources-view .button, #ai-settings-view .button, #ai-agents-view .button { font-weight: 500; }
.overview-greeting h1 { letter-spacing: -.025em; }
#overview-view .recent-copy strong { font-weight: 500; }
.project-list-value, .agent-audience strong, .agent-model strong { font-weight: 500; }
#its-settings { margin-block-start: 0; }
#its-form .optional-label { display: block; margin-block-start: 4px; line-height: 1.5; }
#its-form-error:empty { display: none; }
#its-form input:not(.switch-input) { font-size: var(--text-ui); font-weight: 400; }
#its-form .its-switch-row strong { color: var(--ink); font-size: var(--text-ui); font-weight: 600; }
#its-form .button { font-weight: 500; }
.settings-load-error { display: grid; justify-items: start; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.settings-load-error p { margin: 0; }

#settings-view .settings-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
#settings-view .settings-group { grid-column: span 1; grid-row: auto; transform: none; gap: 16px; align-content: start; align-self: start; }
#settings-view .settings-group:nth-child(2) { grid-column: span 2; }
#settings-view .settings-group-ai, #settings-view .settings-group:nth-child(5) { grid-column: 1 / -1; }
#settings-view .settings-group h2 { font-size: var(--text-body); font-weight: 600; }
#settings-view .settings-grid { width: auto; gap: 18px; }
#settings-view .settings-grid-single { grid-template-columns: minmax(0, 1fr); }
#settings-view .settings-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#settings-view .settings-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#settings-view .settings-item { min-height: 176px; padding: 20px 18px; grid-template-columns: 56px minmax(0, 1fr) 16px; gap: 16px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--settings-surface); }
#settings-view .settings-item:hover { border-color: var(--line-strong); background: var(--paper-raised); }
#settings-view .settings-item-copy { min-height: 134px; padding: 4px 0 0; align-self: stretch; justify-content: flex-start; gap: 8px; }
#settings-view .settings-item-copy strong { font-size: var(--text-read); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
#settings-view .settings-item-copy > span:not(.settings-status) { margin: 0; font-size: var(--text-ui); line-height: 1.55; }
#settings-view .settings-status { min-height: 26px; max-width: 100%; margin-block-start: auto; padding: 4px 9px; border-radius: var(--radius-xs); font-size: var(--text-micro); font-weight: 500; line-height: 1.5; background: var(--sunken); white-space: normal; }
#settings-view .settings-group-ai .settings-status { color: var(--agent-ink); background: var(--agent-soft); }
#settings-view .settings-icon { width: 56px; height: 56px; border-color: var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); }
#settings-view .settings-icon .ui-icon { width: 32px; height: 32px; stroke-width: 1.5; color: var(--ink); }
#settings-view .settings-group-ai .settings-icon { border-color: var(--agent-line); background: var(--agent-wash); }
#settings-view .settings-group-ai .settings-icon .ui-icon { color: var(--agent-ink); }
#settings-view .settings-chevron { width: 18px; height: 18px; align-self: center; }
#settings-view .settings-group:nth-child(5) .settings-grid { max-width: none; }
#settings-view .settings-group:nth-child(5) .settings-item { min-height: 128px; }
#settings-view .settings-group:nth-child(5) .settings-item-copy { min-height: 86px; }
#settings-view .portal-version { min-height: 56px; margin-block-start: 22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--settings-surface); }

#article-form.form-card, #studio-view.preview-open #article-form { grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
#article-form.ai-draft-mode, #studio-view.preview-open #article-form.ai-draft-mode { grid-template-columns: minmax(0, 1fr); }
#article-form.ai-draft-mode .studio-parameters, #article-form.ai-draft-mode #article-title-field { display: none; }
#article-form.ai-draft-mode .studio-editor-heading,
#article-form.ai-draft-mode .studio-editor-pane,
#studio-view.preview-open #article-form.ai-draft-mode .studio-editor-pane,
#article-form.ai-draft-mode .studio-preview-pane,
#studio-view.preview-open #article-form.ai-draft-mode .studio-preview-pane,
#article-form.ai-draft-mode .studio-form-actions { grid-column: 1; }
.studio-parameters { grid-column: 1; grid-row: 1 / -1; padding: 28px 22px; background: var(--paper); }
.studio-parameters .document-import-row { margin-block-start: 8px; border-color: var(--line-strong); background: var(--paper-raised); }
.studio-parameters .document-import-row > .ui-icon { color: var(--ink-soft); }
.studio-editor-heading { grid-column: 2; grid-row: 1; margin: 0; padding: 24px 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; background: var(--paper); border-block-end: 1px solid var(--line); }
.studio-editor-heading h1 { margin: 0; font-size: var(--text-page); font-weight: 600; line-height: 1.3; }
.studio-editor-heading p { margin: 6px 0 0; color: var(--muted); font-size: var(--text-ui); }
.studio-editor-heading .draft-status { position: static; padding: 5px 9px; align-self: start; border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: var(--text-micro); background: var(--paper); }
.editor-mode-switch { grid-column: 1 / -1; display: flex; gap: 24px; }
.editor-mode-switch button { min-height: 48px; padding: 10px 2px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-block-end: 3px solid transparent; color: var(--muted); background: transparent; font-size: var(--text-ui); font-weight: 500; cursor: pointer; }
.editor-mode-switch button[aria-pressed="true"] { color: var(--ink); border-block-end-color: var(--accent); }
.editor-mode-switch button:hover { color: var(--ink); background: var(--paper-raised); }
.editor-mode-switch .ui-icon { width: 18px; height: 18px; }
.studio-editor-pane, #studio-view.preview-open .studio-editor-pane { grid-column: 2; grid-row: 2; padding: 28px 32px 40px; min-height: 0; background: var(--paper-raised); }
.studio-editor-pane > * { max-width: 960px; }
.studio-editor-pane .rich-editor { min-height: 420px; padding: 28px; font-size: var(--text-read); line-height: 1.7; }
.studio-editor-pane .editor-field { margin-block-start: 24px; }
.editor-toolbar { min-height: 48px; flex-wrap: wrap; row-gap: 4px; }
.editor-toolbar .toolbar-icon, .editor-toolbar > button { min-width: 36px; min-height: 36px; }
.studio-preview-pane, #studio-view.preview-open .studio-preview-pane { position: static; grid-column: 2; grid-row: 2; width: auto; min-height: 0; padding: 24px 32px 40px; border: 0; background: var(--paper-raised); box-shadow: none; }
.studio-preview-heading { width: 100%; max-width: 960px; margin: 0 auto 20px; gap: 12px; align-items: center; }
.studio-preview-heading h2 { margin: 0; font-size: var(--text-ui); font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--muted); }
.studio-preview-modes { gap: 4px; }
.studio-preview-modes button { width: auto; min-height: 40px; padding: 8px 10px; display: inline-flex; gap: 7px; font-size: var(--text-micro); }
.studio-preview-document { width: 100%; max-width: 848px; margin: 0 auto; padding: 40px 44px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.studio-preview-pane[data-preview-mode="mobile"] .studio-preview-document { max-width: 390px; padding: 24px; }
.preview-draft-note { display: inline-flex; margin-block-end: 14px; padding: 4px 8px; border-radius: var(--radius-xs); color: var(--muted); background: var(--sunken); font-size: var(--text-micro); }
#instruction-preview-title { margin: 0 0 26px; font-size: var(--text-task-title); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.studio-preview-pane .instruction-preview { min-height: 0; width: auto; margin: 0; padding: 0; border: 0; background: transparent; font-size: var(--text-read); line-height: 1.7; }
.studio-form-actions { grid-column: 2; grid-row: 3; padding: 16px 24px; background: var(--paper); }
.studio-form-actions #article-submit { min-height: 44px; }
@media (max-width: 1399px) and (min-width: 768px) {
  #settings-view .settings-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  #settings-view .settings-group:nth-child(2) { grid-column: auto; }
  #settings-view .settings-group:nth-child(2) .settings-grid { grid-template-columns: minmax(0, 1fr); }
  #settings-view .settings-group:nth-child(3) { grid-column: 1 / -1; }
  #settings-view .settings-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #settings-view .settings-item, #settings-view .settings-group:nth-child(5) .settings-item { min-height: 150px; }
  #settings-view .settings-item-copy, #settings-view .settings-group:nth-child(5) .settings-item-copy { min-height: 108px; }
}
@media (max-width: 1179px) and (min-width: 768px) {
  #article-form.form-card, #studio-view.preview-open #article-form { grid-template-columns: 232px minmax(0, 1fr); }
  #article-form.ai-draft-mode, #studio-view.preview-open #article-form.ai-draft-mode { grid-template-columns: minmax(0, 1fr); }
  .studio-editor-heading { padding-inline: 24px; }
  .studio-editor-pane, #studio-view.preview-open .studio-editor-pane, .studio-preview-pane, #studio-view.preview-open .studio-preview-pane { padding-inline: 24px; }
  .studio-preview-document { padding: 28px; }
}
@media (max-width: 767px) {
  #ai-agent-settings > .settings-panel { padding: 0; border: 0; background: transparent; }
  .ai-provider-identity { grid-column: 1 / -1; }
  .ai-provider-copy strong { white-space: normal; overflow-wrap: anywhere; }
  .ai-provider-actions { grid-column: 1 / -1; grid-row: 5; width: 100%; padding-block-start: 10px; border-block-start: 1px solid var(--line); justify-content: flex-end; }
  #ai-agent-settings .agent-list { gap: 12px; }
  #ai-agent-settings .agent-row { padding: 18px 16px; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); align-items: start; }
  .agent-row > .agent-settings-symbol { grid-column: 1; grid-row: 1; }
  .agent-row > .agent-settings-copy { grid-column: 2; grid-row: 1; }
  .agent-row > .agent-audience { grid-column: 2; grid-row: 2; }
  .agent-row > .agent-model { grid-column: 2; grid-row: 3; }
  .agent-row > .agent-row-actions { grid-column: 1 / -1; grid-row: 4; justify-content: space-between; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .agent-settings-copy > p, .agent-audience strong, .agent-model strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #settings-view .settings-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #settings-view .settings-group, #settings-view .settings-group:nth-child(2), #settings-view .settings-group:nth-child(3), #settings-view .settings-group:nth-child(5) { grid-column: 1; }
  #settings-view .settings-group { gap: 12px; }
  #settings-view .settings-grid, #settings-view .settings-grid-two, #settings-view .settings-grid-three { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #settings-view .settings-item, #settings-view .settings-group:nth-child(5) .settings-item { min-height: 136px; padding: 18px 16px; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 12px; }
  #settings-view .settings-item-copy, #settings-view .settings-group:nth-child(5) .settings-item-copy { min-height: 98px; padding: 0; }
  #settings-view .settings-icon { width: 44px; height: 44px; }
  #settings-view .settings-icon .ui-icon { width: 28px; height: 28px; }
  #settings-view .settings-status { margin-block-start: 8px; }
  .settings-heading { margin-block-end: 28px; }
  .settings-heading h1 { font-size: var(--text-reference-page); }
  .article-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
  .article-title { max-width: none; }
  .reader-actions { position: static; padding-block-start: 4px; }
  .article-meta { white-space: normal; flex-wrap: wrap; gap: 4px 8px; letter-spacing: normal; }
  #article-form.form-card, #studio-view.preview-open #article-form { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .studio-parameters { grid-column: 1; grid-row: 1; padding: 12px 16px; }
  .studio-editor-heading { grid-column: 1; grid-row: 2; padding: 20px 16px 0; gap: 12px; scroll-margin-top: calc(var(--mobile-header-height) + 8px); }
  .studio-editor-heading .draft-status { grid-column: 1 / -1; justify-self: start; }
  .editor-mode-switch { gap: 20px; }
  .editor-mode-switch button { font-size: var(--text-caption); }
  .studio-editor-pane, #studio-view.preview-open .studio-editor-pane, .studio-preview-pane, #studio-view.preview-open .studio-preview-pane { grid-column: 1; grid-row: 3; padding: 20px 16px 28px; }
  .studio-editor-pane .rich-editor { padding: 20px 16px; }
  .studio-preview-heading { align-items: flex-start; flex-direction: column; }
  .studio-preview-document, .studio-preview-pane[data-preview-mode="mobile"] .studio-preview-document { padding: 24px 20px; }
  #instruction-preview-title { font-size: var(--text-page); }
  .studio-form-actions { grid-column: 1; grid-row: 4; padding: 12px 16px; }
}

/* Work surfaces keep their data and reading space as the viewport changes. */
.studio-editor-heading .draft-status[data-state="idle"]::before { background: var(--muted); }
.studio-editor-heading .draft-status[data-state="pending"]::before { background: var(--accent-ink); }
.studio-editor-heading .draft-status[data-state="warning"] { color: var(--danger-ink); }
.studio-editor-heading .draft-status[data-state="warning"]::before { background: var(--danger); }
#studio-parameters-summary { display: block; margin-block-start: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 400; line-height: 1.5; white-space: normal; text-align: start; }
.agent-scope-group > select { width: 100%; margin-block-end: 12px; }
.agent-scope-options[hidden] { display: none; }
.ai-chart-wrap { margin-inline: 0; padding: 16px; }
.ai-chart-legend-item { flex-wrap: wrap; gap: 8px 14px; }
.ai-chart-legend-item > strong { color: var(--ink-soft); font-weight: 500; }
.ai-chart-legend-segment { display: inline-flex; align-items: center; gap: 6px; }
.ai-usage-details { margin-block-start: 20px; border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.ai-usage-details > summary { min-height: 44px; padding-block: 10px; cursor: pointer; color: var(--ink-soft); font-size: var(--text-caption); }
.ai-usage-table-scroll { max-height: 360px; overflow: auto; }
.ai-usage-table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.ai-usage-table-scroll th, .ai-usage-table-scroll td { padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--line); white-space: nowrap; }
.ai-usage-table-scroll th { position: sticky; inset-block-start: 0; background: var(--paper-raised); }
.ai-usage-table-scroll :is(th, td):nth-child(n+3) { text-align: end; font-variant-numeric: tabular-nums; }
.settings-nav-group { display: grid; gap: 2px; padding-block: 10px; }
.settings-nav-group h3 { margin: 0 12px 6px; color: var(--muted); font-size: var(--text-micro); font-weight: 500; }
.settings-nav-group:not(:has(button:not([hidden]))) { display: none; }

/* MCP follows the settings register: policy first, then named connections. */
.mcp-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mcp-status-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; margin-block: 8px 24px; }
.mcp-status-line span { color: var(--muted); overflow-wrap: anywhere; }
.mcp-policy { max-width: 920px; margin-block-end: 32px; }
.mcp-policy > summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.mcp-form { display: grid; gap: 20px; min-width: 0; }
.mcp-form label, #mcp-result > label { margin: 0; }
.mcp-policy .mcp-form { margin-block-start: 20px; }
.mcp-form > label, #mcp-result > label { display: grid; gap: 8px; font-weight: 500; min-width: 0; }
.mcp-form input:not([type="checkbox"]), .mcp-form select, #mcp-result input, #mcp-result select, #mcp-result textarea { width: 100%; min-width: 0; min-height: 44px; font-size: var(--text-read); }
.mcp-form select, #mcp-result select { color: var(--ink); background: var(--paper); }
.mcp-form .mcp-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; cursor: pointer; }
.mcp-check input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--accent); }
.mcp-scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.mcp-scope fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.mcp-scope legend { margin-block-end: 8px; font-weight: 600; }
.mcp-project-options { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
.mcp-project-options label { overflow-wrap: anywhere; }
.mcp-form .field-note { margin: -10px 0 0; }
.mcp-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mcp-form-actions [role="status"] { color: var(--muted); }
.mcp-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.mcp-table th { font-size: var(--text-caption); color: var(--muted); font-weight: 500; }
.mcp-table th, .mcp-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.mcp-table th:first-child, .mcp-table td:first-child { padding-inline-start: 0; }
.mcp-table th:last-child, .mcp-table td:last-child { width: 120px; padding-inline-end: 0; }
.mcp-table td > span, .mcp-table td > strong { display: block; }
.mcp-table td > span + span, .mcp-table td > strong + span { color: var(--muted); font-size: var(--text-caption); margin-block-start: 6px; }
.mcp-table td { font-variant-numeric: tabular-nums; }
.mcp-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; overflow-y: auto; overscroll-behavior: contain; }
.mcp-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block-end: 24px; }
.mcp-dialog-heading h2 { margin: 0; text-wrap: balance; }
#mcp-result { display: grid; gap: 18px; }
#mcp-result[hidden] { display: none; }
#mcp-result h3, #mcp-result p { margin: 0; }
#mcp-client-config { font-family: monospace; font-size: var(--text-caption); line-height: 1.6; white-space: pre; resize: vertical; }
#mcp-secret { font-family: monospace; font-size: var(--text-caption); }
.mcp-message { display: grid; gap: 12px; justify-items: start; }
.mcp-message[hidden] { display: none; }
#mcp-action-status:empty { display: none; }
@media (max-width: 1100px) {
  .mcp-heading { align-items: flex-start; flex-direction: column; }
  .mcp-table thead { display: none; }
  .mcp-table, .mcp-table tbody, .mcp-table tr, .mcp-table td { display: block; width: 100%; }
  .mcp-table tr { padding-block: 16px; border-bottom: 1px solid var(--line); }
  .mcp-table td, .mcp-table td:last-child { padding: 8px 0; border: 0; width: 100%; }
  .mcp-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--text-caption); margin-block-end: 4px; }
  .mcp-dialog { padding: 20px; }
}
@media (max-width: 760px) {
  .mcp-scope { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.settings-subnav-item { min-height: 40px; }
#settings-view .settings-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; align-items: start; }
#settings-view .settings-group { grid-column: auto; transform: none; gap: 12px; }
#settings-view .settings-group:nth-child(2), #settings-view .settings-group-ai { grid-column: span 2; }
#settings-view .settings-group:nth-child(5) { grid-column: 1 / -1; }
#settings-view .settings-grid { width: auto; gap: 12px; }
#settings-view .settings-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#settings-view .settings-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#settings-view .settings-group-ai { grid-template-columns: minmax(0, 1fr) auto; }
#settings-view .settings-group-ai .settings-grid { grid-column: 1 / -1; }
#settings-view .settings-search-link { font-size: var(--text-caption); align-self: center; justify-self: end; }
#settings-view .settings-item, #settings-view .settings-group:nth-child(5) .settings-item { min-height: 132px; padding: 16px; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; }
#settings-view .settings-item-copy, #settings-view .settings-group:nth-child(5) .settings-item-copy { min-height: 0; padding: 0; gap: 8px; }
#settings-view .settings-item-copy strong { font-size: var(--text-ui); }
#settings-view .settings-item-copy > span:not(.settings-status) { font-size: var(--text-caption); line-height: 1.5; }
#settings-view .settings-icon { width: 40px; height: 40px; }
#settings-view .settings-icon .ui-icon { width: 24px; height: 24px; }
#settings-view .settings-status { margin-block-start: 0; }
#ai-index-settings { scroll-margin-block-start: 96px; }

@media (min-width: 1180px) and (max-width: 1439px) {
  body[data-drawer] { overflow: hidden; }
  .workspace[data-active-view="knowledge"] .knowledge-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .knowledge-drawer-bar { min-height: 60px; padding: 10px 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-block-end: 1px solid var(--line); background: var(--paper); }
  .knowledge-drawer-bar-end { display: flex; gap: 8px; }
  #outline-drawer-toggle, .knowledge-resizer { display: none; }
  .knowledge-index, .article-provenance { width: min(384px, 88vw); position: fixed; z-index: 60; inset-block: 73px 0; height: auto; max-height: none; border: 0; box-shadow: var(--shadow-lg); visibility: hidden; }
  .knowledge-index { inset-inline-start: 0; transform: translateX(-100%); }
  .article-provenance { inset-inline-end: 0; transform: translateX(100%); }
  body[data-drawer="materials"] .knowledge-index, body[data-drawer="passport"] .article-provenance { visibility: visible; transform: none; }
  .knowledge-layout.provenance-collapsed .article-provenance { max-height: none; }
  .drawer-backdrop:not([hidden]) { position: fixed; z-index: 55; inset: 73px 0 0; display: block; background: var(--backdrop); opacity: .62; }
  .knowledge-panel-heading { display: flex; }
  .drawer-close, .provenance-heading .drawer-close { display: grid; }
  .article-outline .drawer-close { display: none; }
  #provenance-collapse { display: none; }
  .workspace[data-active-view="knowledge"] .article-reading-layout.has-outline { grid-template-columns: minmax(0, 1fr) 180px; }
  #article-content > :is(p, ul, ol) { max-width: 88ch; }
}
@media (max-width: 1399px) {
  #settings-view .settings-list { grid-template-columns: minmax(0, 1fr); }
  #settings-view .settings-group, #settings-view .settings-group:nth-child(2), #settings-view .settings-group:nth-child(5), #settings-view .settings-group-ai { grid-column: 1; }
}
@media (max-width: 767px) {
  #settings-view .settings-grid, #settings-view .settings-grid-two, #settings-view .settings-grid-three { grid-template-columns: minmax(0, 1fr); }
  #settings-view .settings-group-ai { grid-template-columns: minmax(0, 1fr); }
  #settings-view .settings-search-link { justify-self: start; }
  #settings-view .settings-item, #settings-view .settings-group:nth-child(5) .settings-item { min-height: 96px; padding: 14px; }
  .ai-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ai-metric-grid article { padding: 12px; }
  .ai-metric-grid strong { font-size: var(--text-page); }
  .ai-chart-wrap { padding: 12px; }
  #ai-agent-settings .agent-row { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 14px; }
  .agent-row > .agent-settings-copy { grid-column: 2 / -1; }
  .agent-row > .agent-audience { grid-column: 2; grid-row: 2; }
  .agent-row > .agent-model { grid-column: 3; grid-row: 2; }
  .agent-row > .agent-row-actions { grid-row: 3; }
  .agent-row .agent-settings-symbol { width: 32px; height: 32px; }
}

/* First-success states use the incumbent cards and chat surface. */
#first-import-status { margin-block: 8px 4px; overflow-wrap: anywhere; }
#first-import .setup-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
#first-import .button, #quickstart-first-article, .chat-recovery .button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
#quickstart-first-article { text-align: start; }
.chat-panel-scope { display: block; white-space: normal; overflow-wrap: anywhere; font-size: var(--text-micro); }
.chat-recovery { display: grid; justify-items: start; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.chat-recovery p { margin: 0; }
.chat-recovery[hidden], .chat-form[hidden] { display: none; }
.assistant-material-project { font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 1180px) {
  #quickstart-view .quickstart-workspace { grid-template-columns: minmax(0, 1fr) minmax(200px, 24%); }
}
.chat-recovery-choices { display: flex; flex-wrap: wrap; gap: 8px; }
#quickstart-view .setup-card.done > .setup-card-actions { display: none; }
.coverage-dialog { inset: 0 0 0 auto; margin: 0; width: min(620px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: var(--paper); color: var(--ink); }
.coverage-dialog[open] { display: flex; flex-direction: column; }
.coverage-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 24px; border-bottom: 1px solid var(--line); }
.coverage-head h2 { margin: 0; font-size: var(--text-section); }
.coverage-head p { margin: 6px 0 0; color: var(--muted); font-size: var(--text-caption); }
.coverage-content { padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.coverage-source { display: grid; gap: 8px; font-weight: 700; }
.coverage-source select { width: 100%; min-height: 44px; }
#import-coverage-body section { padding: 24px 0; border-bottom: 1px solid var(--line); }
#import-coverage-body section:last-child { border-bottom: 0; padding-bottom: 0; }
#import-coverage-body h3 { margin: 0 0 16px; font-size: var(--text-title); }
#import-coverage-body h4 { margin: 20px 0 8px; font-size: var(--text-ui); }
#import-coverage-body p { font-size: var(--text-ui); line-height: 1.55; }
.coverage-facts { display: grid; gap: 10px; margin: 0; }
.coverage-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.coverage-facts dt { color: var(--ink-soft); font-size: var(--text-ui); }
.coverage-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.coverage-paths { padding: 0; margin: 8px 0; list-style: none; }
.coverage-paths li { padding: 8px 0; }
.coverage-paths code { display: block; overflow-wrap: anywhere; font-size: var(--text-micro); }
.coverage-paths small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.coverage-note, .coverage-more { color: var(--muted); }
.coverage-warning { padding: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.status-chip.warning { background: var(--accent-soft); color: var(--accent-ink); }
.job-timeline.warning { background: var(--accent-ink); }
.job-coverage { min-height: 44px; }
@media (max-width: 480px) { .coverage-head, .coverage-content { padding: 16px; } .coverage-head { gap: 12px; } .coverage-head h2 { font-size: var(--text-title); } }

.reader-revision-notice { margin-block: 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent-ink); border-radius: 8px; background: var(--accent-soft); color: var(--ink); overflow-anchor: none; }
.reader-revision-notice[hidden], .reader-revision-unavailable[hidden] { display: none; }
.reader-revision-notice p { margin: 0 0 8px; }
.reader-revision-notice [role="status"] { font-weight: 650; }
.reader-revision-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reader-revision-actions button, .reader-revision-dialog button, .reader-revision-unavailable button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.reader-revision-actions button:hover, .reader-revision-dialog button:hover, .reader-revision-unavailable button:hover { background: var(--sunken); }
.reader-revision-actions button:focus-visible, .reader-revision-dialog button:focus-visible, .reader-revision-unavailable button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.reader-revision-actions button:disabled, .reader-revision-actions button[aria-disabled="true"] { opacity: .55; cursor: default; }
.reader-revision-actions button[hidden] { display: none; }
.reader-revision-dialog { width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); }
.reader-revision-dialog::backdrop { background: var(--ai-dialog-backdrop); }
.reader-revision-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.reader-revision-dialog-head h2 { margin: 0; }
.reader-revision-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.reader-revision-columns section { min-width: 0; }
.reader-revision-columns h3 { font-size: var(--text-ui); border-block-end: 1px solid var(--line); padding-block-end: 12px; }
.reader-revision-columns pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
.reader-revision-unavailable { padding: 32px 24px; }
@media (max-width: 600px) { .reader-revision-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; } .reader-revision-dialog { padding: 16px; } .reader-revision-dialog-head { flex-wrap: wrap; } }

/* Account hub keeps the existing dialog and control vocabulary. */
#account-hub { width: min(32rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
#account-hub:modal { inset: 12px; margin: auto; max-height: calc(100dvh - 24px); overflow: hidden; border-radius: var(--radius-lg); }
#account-hub:modal > .account-hub-card { max-height: calc(100dvh - 24px); overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
#account-hub-close { width: 44px; height: 44px; }
#account-hub-report-link { color: inherit; white-space: normal; }
.account-hub-card { min-width: 0; overflow-wrap: anywhere; }
.account-hub-card h2 { padding-inline-end: 44px; }
.account-hub-card section + section { margin-block-start: 20px; }
.account-hub-actions { display: grid; gap: 12px; margin-block-start: 20px; }
.account-hub-card .form-actions { flex-wrap: wrap; }
.account-hub-card button, .account-hub-card a { min-height: 44px; }
.account-hub-actions a { color: inherit; text-decoration: none; }
.account-help { max-width: 48rem; margin: 32px auto; padding: 24px; line-height: 1.6; }

/* Плагин «Фирменный стиль» (#27): шапка держит фиксированную высоту — экстремальные пропорции
   чужого логотипа меняют его видимую ширину, но не ломают строку навигации. */
.brand { height: 42px; }
.brand-logo { height: 100%; width: auto; max-width: 180px; object-fit: contain; border-radius: var(--radius-sm); }
.login-branding-note { margin: 0 0 6px; font-size: var(--text-caption); color: var(--muted); }
.portal-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px; padding: 14px 16px 18px; font-size: var(--text-micro); color: var(--muted); }
.portal-footer a { color: var(--accent-strong); }
.branding-form { display: grid; gap: 14px; }
.branding-form > label { display: grid; gap: 4px; }
.branding-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.branding-image-field { display: grid; gap: 8px; justify-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.branding-image-field .field-label { font-weight: 600; font-size: var(--text-caption); }
.branding-image-field .field-note { justify-self: stretch; }
.branding-preview { max-height: 56px; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); background: var(--sunken); padding: 3px; }
.branding-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Файловый input визуально скрыт, но остаётся в Tab-порядке: фокус показывает кнопка-обёртка. */
.branding-image-actions label:has(input[type="file"]:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.branding-locked-copy { margin: 0; color: var(--muted); }
@media (max-width: 767px) { .branding-image-grid { grid-template-columns: 1fr; } }
/* Issue 234: API failure is not a confirmed-empty list — inline error with retry replaces content. */
.list-load-error { display: grid; gap: 10px; justify-items: start; padding: 18px 16px; }
.list-load-error p { margin: 0; color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.5; }

/* #43: the optional draft assistant inherits Studio; purple denotes model actions. */
.process-ai-panel { margin: 16px 0; border: 1px solid var(--agent-line); border-radius: var(--radius-md); background: var(--agent-wash); }
.process-ai-panel > summary { padding: 12px 16px; min-height: 44px; color: var(--agent-ink); font-weight: 700; cursor: pointer; }
.process-ai-controls { display: grid; gap: 14px; margin: 0; padding: 4px 16px 16px; min-width: 0; border: 0; }
.process-ai-controls > button, .process-ai-output > button { justify-self: start; }
.process-ai-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.process-ai-panel label { display: grid; gap: 6px; min-width: 0; margin: 0; font-size: var(--text-ui); }
.process-ai-panel input, .process-ai-panel select, .process-ai-panel textarea { width: 100%; min-width: 0; font-weight: 400; }
.process-ai-panel textarea { resize: vertical; line-height: 1.55; }
.process-ai-panel .primary { background: var(--agent-fill); color: var(--on-dark); }
.process-ai-panel .primary:hover { background: var(--agent-fill); filter: brightness(.92); }
.process-ai-panel .field-note { margin: 0 16px 12px; }
.process-ai-panel .field-note:empty { margin: 0; }
#process-ai-cancel { margin: 0 16px 16px; }
.process-ai-output { display: grid; gap: 12px; padding: 0 16px 16px; }
.process-ai-output[hidden] { display: none; }
@media (max-width: 767px) { .process-ai-fields { grid-template-columns: 1fr; } }