/* Site theme and layout; design rules live in STYLE.md. */
:root {
  color-scheme: light;
  --bg: #f8f8f4;
  --surface: #ffffff;
  --surface-sunken: #f0f3ed;
  --text: #172321;
  --text-muted: #5b6a64;
  --border: #dce4d9;
  --border-strong: #94a798;
  --accent: #0e6048;
  --accent-rgb: 14, 96, 72;
  --accent-ink: #104e3c;
  --accent-tint: #e4efdf;
  --info: #3e73d6;
  --info-tint: #e6edfa;
  --danger: #b03a2e;
  --danger-tint: #fbebe8;
  --warning: #855700;
  --focus: #0e6048;
  /* The Run press (issue #183): yellow, then back to the accent. */
  --press-flash: #d9a400;
  /* Run held down (issue #187): the accent, half as dark (halfway to white). */
  --press-hold: #8bb4ad;
  /* Behind a dialog: the page dimmed. */
  --backdrop: rgb(0 0 0 / 35%);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --feature-bg: #132c25;
  --feature-text: #f1f8ec;
  --feature-muted: #b5c8bb;
  --feature-accent: #b5df9d;
  --hero-glow: #e1ecd9;
  --cta-bg: #e4edcf;
  --cta-ring: #d1e3ac;
  --elevation-soft: 0 28px 72px rgb(16 44 34 / 14%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #10201b;
    --surface: #172b24;
    --surface-sunken: #0c1914;
    --text: #edf4e9;
    --text-muted: #afc0b4;
    --border: #30483b;
    --border-strong: #607a69;
    --accent: #a4d5a0;
    --accent-rgb: 164, 213, 160;
    --accent-ink: #c8e8b6;
    --accent-tint: #263f2d;
    --info: #7fb0ec;
    --info-tint: #182840;
    --danger: #e38a7d;
    --danger-tint: #35201d;
    --warning: #d9a73b;
    --focus: #a4d5a0;
    --press-flash: #e8c547;
    --press-hold: #a7eadb;
    --backdrop: rgb(0 0 0 / 55%);
    --feature-bg: #0b1b14;
    --feature-text: #f1f8ec;
    --feature-muted: #b5c8bb;
    --feature-accent: #b5df9d;
    --hero-glow: #1c3829;
    --cta-bg: #243e29;
    --cta-ring: #365634;
    --elevation-soft: 0 28px 72px rgb(0 0 0 / 26%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10201b;
  --surface: #172b24;
  --surface-sunken: #0c1914;
  --text: #edf4e9;
  --text-muted: #afc0b4;
  --border: #30483b;
  --border-strong: #607a69;
  --accent: #a4d5a0;
  --accent-rgb: 164, 213, 160;
  --accent-ink: #c8e8b6;
  --accent-tint: #263f2d;
  --info: #7fb0ec;
  --info-tint: #182840;
  --danger: #e38a7d;
  --danger-tint: #35201d;
  --warning: #d9a73b;
  --focus: #a4d5a0;
  --press-flash: #e8c547;
  --press-hold: #a7eadb;
  --backdrop: rgb(0 0 0 / 55%);
  --feature-bg: #0b1b14;
  --feature-text: #f1f8ec;
  --feature-muted: #b5c8bb;
  --feature-accent: #b5df9d;
  --hero-glow: #1c3829;
  --cta-bg: #243e29;
  --cta-ring: #365634;
  --elevation-soft: 0 28px 72px rgb(0 0 0 / 26%);
}
/* Cabinet contrast, owner 2026-11-02. Showcase colours stay in the base theme. */
:root[data-site="app"] {
  color-scheme: light;
  --bg: #f0f3ed;
  --surface: #ffffff;
  --surface-sunken: #e2e9de;
  --text: #102a24;
  --text-muted: #3f554b;
  --border: #b3c3b4;
  --border-strong: #5f7e68;
  --accent: #0e6048;
  --accent-rgb: 14, 96, 72;
  --accent-ink: #0a4634;
  --accent-tint: #d8e7cd;
  --info: #2b61b8;
  --danger: #9d2f25;
  --warning: #755000;
  --focus: #0e6048;
}
:root[data-site="app"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #102a24;
  --surface: #244938;
  --surface-sunken: #0a1c15;
  --text: #f8f8f4;
  --text-muted: #d0e0d0;
  --border: #668c6d;
  --border-strong: #a8c597;
  --accent: #d7ed9b;
  --accent-rgb: 215, 237, 155;
  --accent-ink: #edf5c8;
  --accent-tint: #365735;
  --info: #a8caff;
  --danger: #ffb4a9;
  --warning: #f4d27b;
  --focus: #d7ed9b;
}
/* Tabler (vendor/tabler, owner 2026-10-24) reads its own variables: they
   follow the site's tokens above, so its parts take the site's look and
   the dark theme with no second palette. */
:root {
  --tblr-font-sans-serif: var(--font-ui);
  --tblr-font-monospace: var(--font-mono);
  --tblr-body-font-family: var(--font-ui);
  --tblr-body-bg: var(--bg);
  --tblr-body-color: var(--text);
  --tblr-bg-surface: var(--surface);
  --tblr-bg-surface-secondary: var(--surface-sunken);
  --tblr-border-color: var(--border);
  --tblr-secondary: var(--text-muted);
  --tblr-primary: var(--accent);
  --tblr-primary-rgb: var(--accent-rgb);
  --tblr-link-color: var(--accent-ink);
  --tblr-link-hover-color: var(--accent);
  --tblr-danger: var(--danger);
  --tblr-info: var(--info);
  --tblr-warning: var(--warning);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* The footer sits at the bottom of the window on a short page and after
   the content on a long one (owner, 2026-10-12: «должно стабильно внизу
   держаться»). Never fixed over the page: it would cover the last rows. */
body {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
/* A notice takes its own row above the site; it never covers a document. */
.gpu-outage.alert { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; margin: 0; padding: 6px 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--warning); background: var(--surface); }
.gpu-outage-viewport { flex: 1; min-width: 0; overflow: hidden; }
.gpu-outage-track { display: flex; width: max-content; animation: gpu-notice 28s linear infinite; }
.gpu-outage-track > span { flex: 1 0 auto; padding-right: 5rem; white-space: nowrap; }
.gpu-outage:hover .gpu-outage-track, .gpu-outage:focus-within .gpu-outage-track { animation-play-state: paused; }
.gpu-outage-paused .gpu-outage-track { animation: none; width: auto; }
.gpu-outage-paused .gpu-outage-track > span { padding: 0; white-space: normal; }
.gpu-outage-paused .gpu-outage-track > span + span { display: none; }
@keyframes gpu-notice { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gpu-outage-track { animation: none; width: auto; }
  .gpu-outage-track > span { padding: 0; white-space: normal; }
  .gpu-outage-track > span + span, .gpu-outage > button { display: none; }
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); text-decoration-thickness: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- "work in progress" indicator -- the only animation 9.2 allows ---- */
@media (prefers-reduced-motion: no-preference) {
  .spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { display: inline-block; width: 13px; height: 13px; }
}

/* ---- app shell ---- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
/* The site's name and logo twice the earlier size (owner, 2026-10-24); a
   phone scales them down so the header still fits. */
.brand-mark { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(26px, 6vw, 38px); font-family: var(--font-ui); font-weight: 700; font-style: normal; letter-spacing: -0.01em; text-transform: none; text-decoration: none; color: var(--accent); }
/* The owner's oak leaf (2026-10-19), black on transparent. */
/* The logo in the buttons' colour (owner, 2026-10-24): its own black pixels
   move out of the box and its shape masks the accent, so the dark theme
   follows by itself. */
.brand-logo { height: clamp(36px, 8vw, 52px); width: auto; display: block; background: var(--accent);
  -webkit-mask: url("/img/foliandra-logo.png") center / contain no-repeat; mask: url("/img/foliandra-logo.png") center / contain no-repeat;
  object-position: -9999px 0; }
/* Dark theme: the same leaf in light lines (the drawing itself is unchanged). */
.brand-tagline { color: var(--text-muted); font-size: 12px; }
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.header-nav a.current { color: var(--text); border-color: var(--accent); font-weight: 600; }
.header-account { display: flex; flex-wrap: wrap; min-width: 0; max-width: 100%; overflow-wrap: anywhere; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }
.btn-link {
  background: none;
  border: none;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
}

/* Every screen of the app starts at the left and uses the width there is,
   as Control does (owner, 2026-10-28; design/README.md). Only reading and
   sign-in columns are centred (.privacy-page, .center-page). */
.page { width: 100%; min-width: 0; margin: 0; padding: 32px 24px 64px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.page-head .meta { color: var(--text-muted); font-size: 13px; }

/* ---- banners (errors, empty states) ---- */
.banner {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.banner-error { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.banner-info { background: var(--surface); color: var(--info); border-color: var(--info); }
.empty-state { color: var(--text-muted); font-size: 13px; padding: 20px 4px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;  /* a link drawn as a button (Process, Open, View, Download) */
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
/* Under the pointer a button clearly changes (owner, 2026-10-24). */
.btn:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--surface); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Tabler fills a disabled danger button; ours stays an outline. */
.btn-danger[disabled], .btn-danger:disabled, .btn-danger[disabled]:hover { background: var(--surface); border-color: var(--border-strong); color: var(--danger); box-shadow: none; }
.btn[disabled]:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text); box-shadow: none; }
.btn-primary[disabled]:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); }

/* ---- documents table ---- */
.upload-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.dropzone {
  flex: 1 1 320px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
}
.dropzone.drag-over { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.table-scroll { overflow-x: auto; border-radius: 10px; }
.table-scroll table { min-width: 560px; }
/* About five rows tall; the rest scrolls under a header that stays put. */
.table-scroll-capped { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); }
.table-scroll-capped table { overflow: visible; border: 0; }
.table-scroll-capped th { position: sticky; top: 0; z-index: 1; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface-sunken); }
tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; }
td.right { text-align: right; }
td .btn + .btn { margin-left: 8px; }
/* Fit the document list by wrapping content, never by clipping its actions. */
#documents-table .doc-name { overflow-wrap: anywhere; }
#documents-table .pill { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
#documents-table td.right,
#documents-table td:nth-child(2),
#documents-table td:nth-child(3),
#documents-table td:nth-child(4),
#documents-table td:nth-child(5) { white-space: nowrap; }
.doc-name { font-weight: 600; }
.doc-expiry { color: var(--danger); font-size: 12px; font-weight: 400; margin-top: 2px; }
/* Document names keep the ordinary underlined link style. */

/* ---- status pills ---- */
/* State colours are text only: a word with a dot, never a fill (owner, 2026-10-24). */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-done { color: var(--accent); }
.pill-active { color: var(--info); }
.pill-queued { color: var(--text-muted); }
.pill-failed { color: var(--danger); }

/* 2026-10-09: the worker's own answer to the last status check (manual
   "Get status" click or the page's own 5s poll, same codepath) -- green
   while it answers, red once it does not, yellow for the moment in
   between (the request's own wait, bounded by WorkerClient's timeout). */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  vertical-align: middle;
}
.status-dot-ok { background: var(--accent); }
.status-dot-bad { background: var(--danger); }
.status-dot-pending { background: var(--warning); }

/* ---- document screen ---- */
.doc-meta-row { display: flex; gap: 24px; color: var(--text-muted); font-size: 13px; margin-top: 4px; flex-wrap: wrap; }
/* Run and, on its row, the run in work now (owner, 2026-10-28, issue #183):
   the press turns the button yellow over 2 s, then green; the mark pulses
   from a lighter accent to the accent every 2 s. Reduce motion: still. */
.run-go { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.run-pressed { animation: run-press 2.6s ease-in-out; }
@keyframes run-press {
  0% { background-color: var(--accent); border-color: var(--accent); }
  77% { background-color: var(--press-flash); border-color: var(--press-flash); }
  100% { background-color: var(--accent); border-color: var(--accent); }
}
.run-activity { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 13px; }
.run-activity-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); animation: run-pulse 2s ease-in-out infinite; }
.run-activity-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.run-activity-what { color: var(--text-muted); overflow-wrap: anywhere; }
.run-notify { display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
@keyframes run-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
/* Held down (issue #187): half as dark over 2 s; released, it goes back at
   once and the press flash takes over. */
#document-run-button:active:not([disabled]) { background-color: var(--press-hold); border-color: var(--press-hold); transition: background-color 2s linear, border-color 2s linear; }
.run-hint { font-size: 13px; color: var(--text-muted); transition: opacity 0.7s; }
.run-hint-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .run-pressed, .run-activity-mark { animation: none; } #document-run-button:active { transition: none; } .run-hint { transition: none; } }
.run-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.engine-toggle { display: flex; flex-wrap: wrap; min-width: 0; max-width: 100%; border: 1.5px solid var(--border-strong); border-radius: 7px; overflow: hidden; }
.engine-toggle button {
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-right: 1.5px solid var(--border-strong);
  text-align: left;
  transition: background-color 0.12s, color 0.12s;
}
.engine-toggle button:last-child { border-right: none; }
.engine-toggle button:hover:not([aria-pressed="true"]):not([disabled]) { background: var(--surface-sunken); color: var(--text); }
.engine-toggle button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
/* A cloud engine without the user's key (views/document.js). */
.engine-toggle button.engine-nokey { background: var(--surface-sunken); color: var(--text-muted); opacity: 0.6; }
.engine-toggle button.engine-nokey[aria-pressed="true"] { font-weight: 400; }
.engine-caption { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }
/* Plan, chapter 16: shown only to the user whose run left the model loaded. */
.engine-warm { display: block; font-size: 11px; color: var(--accent-ink); font-weight: 400; margin-top: 1px; }
/* Plan, chapter 18: the run-settings menu, its own row under the run controls. */
.run-settings { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; }
.run-settings-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.run-settings-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.run-settings-version { font-size: 12px; color: var(--text-muted); }
.run-settings-ocr { margin: 0; font-size: 13px; color: var(--text-muted); }
.run-settings-group summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; }
.run-settings-note { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.run-settings-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px 20px; padding: 8px 0 4px; }
.run-setting { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.run-setting-control { display: flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.run-setting-control select { min-width: 0; }
.run-setting-help { font-size: 11px; color: var(--text-muted); }
.run-setting.changed .run-setting-control { font-weight: 600; }
.run-settings select {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 13px;
  max-width: 100%;
}
input[type="text"], input[type="email"], input[type="password"] {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
}
.field input[type="text"] { width: 140px; }
.run-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 10px; flex-wrap: wrap; }
/* The run last closed in the comparison (issue #207): the selection colour. */
.run-row.run-row-last-viewed { border-color: var(--accent); background: var(--accent-tint); }
.doc-run-line { margin: 6px 0 0; }
.run-row .run-engine { width: 120px; font-weight: 600; flex-shrink: 0; }
.run-row .run-status { flex: 1; min-width: 200px; }
.run-row .run-status .detail { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.run-row .run-status .detail-warning { color: var(--danger); }
/* Pages done by the engine, from its own count (strings.js pageProgress). */
.page-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.page-progress progress { flex: 1 1 auto; max-width: 320px; height: 8px; border: none; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; appearance: none; }
.page-progress progress::-webkit-progress-bar { background: var(--surface-sunken); border-radius: 99px; }
.page-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.page-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.run-row .run-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.save-as-dialog { width: min(450px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.save-as-dialog::backdrop { background: var(--backdrop); }
.save-as-dialog h2 { margin: 0 0 12px; }
.save-as-dialog form { display: grid; gap: 16px; }
.save-as-dialog label { display: grid; gap: 6px; }
.save-as-dialog select, .save-as-dialog input[type="text"] { width: 100%; padding: 10px; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
.save-as-dialog .save-as-tables { display: flex; align-items: center; gap: 6px; }
.save-as-description { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.save-as-status { margin: 0; font-size: 13px; }
.save-as-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- admin screen ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.stat-card .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }
.stat-card .stat-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.admin-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
/* A fold (design/components.md): a panel whose summary says what is inside
   and how many; what is finished or seldom needed starts closed. */
.panel-fold { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.panel-fold > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-fold[open] > summary { margin-bottom: 12px; }
.panel-fold-count { font-weight: 400; color: var(--text-muted); }
.auth-note { padding: 0 0 14px; }
.panel-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 12px; }
.power-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.panel-toggle {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.panel-toggle:hover { color: var(--text); }
.panel-toggle-arrow { display: inline-block; transition: transform 0.15s; }
.panel-toggle[aria-expanded="true"] .panel-toggle-arrow { transform: rotate(90deg); }
.panel-toggle-count { font-weight: 400; }
/* About five rows tall; the rest scrolls inside the box. */
.event-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-height: 200px; overflow-y: auto; }
.event-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.event-list li:last-child { border-bottom: none; }
.event-list .event-kind { color: var(--text); }
.event-list .event-time { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
code.resource { font-family: var(--font-mono); font-size: 12px; background: var(--surface-sunken); padding: 2px 6px; border-radius: 5px; }
.invite-result { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--accent); background: var(--accent-tint); border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.invite-result .invite-email { font-weight: 600; flex-shrink: 0; }
.invite-result .invite-note { color: var(--text-muted); font-size: 12px; width: 100%; }
/* Support cases (issue #163): Account / Support and Control / Cases. */
.support-case, .support-document { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; max-width: 56rem; }
.support-case summary, .support-document summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.support-thread { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.support-message { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 12px; }
.support-message.support-team { border-left-color: var(--accent); }
.support-message p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-text { width: 100%; max-width: 40rem; padding: 8px 10px; border: 1.5px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.support-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.support-consent { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* Control -> Email (issue #165): the sender form. */
.sender-form { margin-top: 18px; max-width: 48rem; }
.sender-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sender-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.sender-input { width: 18rem; max-width: 100%; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); }
.invite-result.invite-failed { border-color: var(--danger); background: var(--surface); }

/* ---- sign in / change password / privacy (shell-less) ---- */
.center-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px 30px; }
.auth-card .brand-mark { display: flex; justify-content: center; margin-bottom: 4px; }
.auth-card .brand-tagline { display: block; text-align: center; margin-bottom: 26px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.auth-field input { width: 100%; }
/* No field wider than what goes in it (owner, 2026-10-24): one-line inputs
   stop at 32rem wherever they are; text areas keep the width they are given. */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"] { max-width: 32rem; }
.account-box { max-width: 32rem; }
.auth-submit { width: 100%; margin-top: 8px; padding: 10px; justify-content: center; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 12.5px; }
.auth-error { margin-top: 14px; margin-bottom: 0; }

.privacy-page { width: 100%; min-width: 0; max-width: 640px; margin: 0 auto; padding: 48px 24px 72px; }
.privacy-page h1 { font-size: 21px; margin-bottom: 18px; }
.privacy-page p { color: var(--text); margin: 0 0 14px; }
.privacy-page .muted { color: var(--text-muted); font-size: 13px; }

/* ---- help ---- */
.help-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.help-doc-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.help-doc-button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  color: var(--text-muted); padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer;
  overflow-wrap: anywhere;
}
.help-doc-button:hover { background: var(--surface-sunken); color: var(--text); }
.help-doc-button.current { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
.help-doc-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 24px; min-width: 0;
}
.help-doc-title { font-weight: 600; margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.help-doc-content {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; max-height: 75vh; overflow-y: auto;
}


.help-markdown { font-family: var(--font-ui); font-size: 14px; white-space: normal; line-height: 1.6; }
.help-markdown h2 { font-size: 19px; margin: 0 0 12px; }
.help-markdown h3 { font-size: 15px; margin: 20px 0 8px; }
.help-markdown h4, .help-markdown h5 { font-size: 14px; margin: 16px 0 6px; }
.help-markdown p, .help-markdown ul, .help-markdown ol { margin: 0 0 12px; }
.help-markdown li { margin-bottom: 4px; }
.help-markdown code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }
.help-markdown pre { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-sunken); padding: 10px 12px; border-radius: 7px; overflow-x: auto; }
.help-markdown table { margin-bottom: 12px; }

/* ---- terms (chapter 20) ---- */
.terms-text h2 { font-size: 14px; margin: 16px 0 4px; }
.terms-text p { margin: 0 0 10px; }

/* ---- account (chapter 20) ---- */
.account-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.account-facts dt { color: var(--text-muted); }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-password { max-width: 360px; }
.header-account a.current { color: var(--text); font-weight: 600; }
td.muted { color: var(--text-muted); }
.fold-toggle { display: block; margin: 8px 0 20px; font-size: 13px; }

/* ---- cloud runs are labelled (chapter 22) ---- */
.cloud-label { display: flex; flex-direction: column; font-size: 11.5px; font-weight: 400; color: var(--info); margin-top: 2px; }
.cloud-tag { font-size: 11px; color: var(--info); border: 1px solid var(--info); border-radius: 4px; padding: 0 4px; }

/* ---- cloud engines (chapter 21) ---- */
.cloud-consent { flex-basis: 100%; font-size: 13px; }
.cloud-consent-agree { display: flex; gap: 8px; align-items: flex-start; }
.cloud-consent-agree input { margin-top: 3px; }
.cloud-consent-nokey { margin: 0; color: var(--warning); }
.account-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-bottom: 26px; }
.account-key { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; min-width: 0; max-width: 40rem; }
.account-key h3 { font-size: 14px; margin: 0 0 4px; }
.account-key .key-state { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; overflow-wrap: anywhere; }
.account-key .key-row { display: flex; gap: 8px; flex-wrap: wrap; }
.account-key .key-row input { flex: 1 1 180px; min-width: 0; }
.account-key .key-message { font-size: 12.5px; margin: 10px 0 0; }

/* ---- footer (chapter 20): small, at the end of the page, never fixed ---- */
.site-footer {
  width: 100%; max-width: 1200px; margin: auto auto 0; padding: 18px 24px 28px; text-align: center;
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted); border-top: 1px solid var(--border);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--text-muted); }


@media (max-width: 900px) {
  .admin-columns { grid-template-columns: 1fr; }
  .help-layout { grid-template-columns: 1fr; }
  .help-doc-list { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .app-header { flex-wrap: wrap; }
  .run-panel { flex-direction: column; align-items: stretch; }
  .run-row { flex-wrap: wrap; }
}

/* Control: section menu, pages and current content. */
.pill-warn { color: var(--danger); }
.control-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.control-menu { background: var(--surface); border-right: 1px solid var(--border); padding: 12px 0 32px; }
.control-menu ul { list-style: none; margin: 0; padding: 0; }
.control-menu-section { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--text); text-decoration: none; font-size: 14px; }
.control-menu-section:hover { background: var(--surface-sunken); }
.control-menu li.current > .control-menu-section { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
.control-glyph { width: 18px; text-align: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; }
.control-menu li.current .control-glyph { color: var(--accent-ink); }
.control-menu-label { flex: 1; min-width: 0; }
.control-bubble { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--danger); color: var(--surface); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.control-sub { background: var(--surface-sunken); padding: 4px 0 8px; }
.control-sub a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 16px 6px 44px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.control-sub a:hover { color: var(--text); }
.control-sub a[aria-current="page"] { color: var(--text); font-weight: 600; }
.control-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.control-dot-ready { background: var(--accent); }
.control-dot-part { background: var(--info); }
.control-dot-none { background: var(--border); }
.control-dot-warn { background: var(--danger); }
.control-main { padding: 24px 28px 64px; min-width: 0; }
.control-crumbs { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.control-main h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-purpose { color: var(--text-muted); margin: 0 0 18px; max-width: 70ch; }
.control-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.control-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.control-box h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 10px; }
.control-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.control-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.control-rows li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.control-val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.control-tool { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 7px 10px; border-radius: 7px; background: var(--surface-sunken); }
.control-tool + .control-tool { margin-top: 6px; }
.control-tool a { font-weight: 600; text-decoration: none; }
.control-off { color: var(--text-muted); }
.control-who { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.control-who dt { font-weight: 700; color: var(--text-muted); }
.control-who dd { margin: 0; }
.control-note { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); border-left: 3px solid var(--border); padding-left: 10px; max-width: 75ch; }
.control-note-warn { border-color: var(--danger); color: var(--text); }
.control-tree { margin-top: 14px; columns: 2 260px; column-gap: 24px; font-size: 13px; }
.control-tree h2 { column-span: all; }
.control-tree div { break-inside: avoid; margin-bottom: 10px; }
.control-tree b { display: block; margin-bottom: 2px; }
.control-tree a { display: block; padding-left: 12px; text-decoration: none; }
@media (max-width: 760px) {
  .control-shell { grid-template-columns: 1fr; }
  .control-menu { border-right: 0; border-bottom: 1px solid var(--border); }
  .control-main { padding: 18px 16px 48px; }
}
.control-widget { margin-bottom: 18px; min-width: 0; }
.control-widget .card-grid { margin-bottom: 14px; }
.control-widget .limit-input { width: 7em; }
.event-list-open { max-height: none; }

/* Sortable list headers (LISTS.md), Tabler's class names (table-sort, asc,
   desc). The arrows are drawn bold so they stand out from the header
   (owner, 2026-10-24): unsorted grey, the sorted column in the text colour. */
th[data-sort] { white-space: nowrap; }
.table-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: inherit; color: inherit; }
/* Wide arrows set well apart (owner, 2026-10-24: "шире и разнесены больше по
   вертикали, особенно в телефоне"); a touch screen gets a 44 px target. */
.table-sort::after { content: ""; display: inline-block; flex: none; width: 18px; height: 22px; background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3.5 9.5 10 3l6.5 6.5M3.5 14.5 10 21l6.5-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3.5 9.5 10 3l6.5 6.5M3.5 14.5 10 21l6.5-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.table-sort.asc::after { background: var(--text); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3.5 15 10 8.5l6.5 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3.5 15 10 8.5l6.5 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.table-sort.desc::after { background: var(--text); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3.5 9 10 15.5 16.5 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3.5 9 10 15.5 16.5 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.table-sort:hover { color: var(--text); }
@media (pointer: coarse) { .table-sort { min-height: 44px; gap: 10px; } .table-sort::after { width: 22px; height: 26px; } }
.table-sort:hover::after { background: var(--text); }
.table-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.control-list-title { margin-top: 24px; }

/* Free-text model tasks: keep the complete editable instruction visible. */
.run-setting:has(textarea) { grid-column: 1 / -1; }
.run-setting textarea { display: block; width: 100%; min-height: 8rem; resize: vertical; font: 14px/1.5 ui-monospace, monospace; padding: 10px; border: 1px solid var(--border); border-radius: 6px; color: inherit; background: var(--surface); }
.run-setting-preset { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.run-setting-preset select { max-width: 100%; }
.run-setting-protect { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.run-setting textarea[readonly] { background: var(--surface-sunken); }
.run-status details pre { max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Document comparison: equal columns; a native, touch-scrollable pair on phones. */
.page.document-comparing{max-width:none;padding-inline:16px}
.document-comparing>.run-panel{display:none}
#document-comparison{margin:0 0 28px;scroll-margin-top:12px}
.comparison-title-row,.comparison-run-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.comparison-run-bar{display:flex;flex-wrap:wrap;align-items:end;gap:12px 16px;padding:14px;margin-bottom:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.comparison-run-bar .comparison-engine-field{margin:0;display:grid;gap:6px;flex:0 1 260px;min-width:0}
.comparison-run-bar .comparison-engine-field select{width:100%;min-width:0}
.comparison-run-bar .comparison-run-controls{flex:1 1 480px;min-width:0}
.comparison-run-bar .comparison-settings{flex:1 1 100%}
.comparison-track{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.comparison-pane{min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.comparison-toolbar{border-bottom:1px solid var(--border)}
.comparison-title-row{justify-content:space-between}.comparison-title-row h2{margin:0}
.comparison-settings>summary{cursor:pointer;color:var(--accent-ink)}
.comparison-settings .run-settings{border:0;padding:12px 0 0;margin:0}
.comparison-settings .run-settings-fields{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.comparison-settings .run-setting:has(textarea){grid-column:1/-1}
/* Pages and the run buttons keep their own width, so choosing a custom range
   does not shrink the switch or push Run away (owner, 2026-10-24). */
.comparison-run-controls .field{flex:0 0 auto}.comparison-run-controls>.btn{flex:0 0 auto}
.comparison-run-controls .engine-toggle{width:auto}.comparison-run-controls .engine-toggle button{flex:0 0 auto}
.comparison-run-controls .cloud-consent{width:100%;margin:0}
.comparison-paper,#comparison-result:empty{height:75vh;min-height:450px}
.comparison-paper{padding:12px;background:var(--surface-sunken);overflow:auto}
.comparison-paper img{display:block;width:100%;height:auto;max-width:none}
.comparison-status{color:var(--text-muted);padding:18px;margin:0;min-height:0}.comparison-status:empty{display:none}
#comparison-result{min-width:0;max-height:80vh;overflow:auto}
.comparison-mobile-tabs{display:none}
@media(max-width:800px){
 .page.document-comparing{padding-inline:8px}
 .comparison-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;align-items:flex-start}
 .comparison-pane{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
 .comparison-mobile-tabs{display:flex;align-items:center}
 .comparison-mobile-tabs [aria-pressed=true]{background:var(--accent-tint);border-color:var(--accent)}
 .comparison-paper,#comparison-result:empty{min-height:350px;height:65vh}
}

/* Children must be allowed to shrink inside the site's panels. A long filename
   or a settings grid must never make the phone's whole viewport wider. */
.page > *, .page-head > *, .run-panel > *, .field, .run-settings, .run-setting,
.control-main > *, .control-box, .control-widget, .header-account > * { min-width: 0; }
#document-name, .run-settings-version, .control-val, .control-who dd,
.invite-email, .cloud-consent { overflow-wrap: anywhere; }
.run-setting input:not([type="checkbox"]), .run-setting select, .run-setting textarea { min-width: 0; max-width: 100%; }
.run-row .run-status { min-width: min(200px, 100%); }
.run-row .run-actions { min-width: 0; max-width: 100%; }
.run-row .pill { white-space: normal; overflow-wrap: anywhere; }
#document-engine-toggle button { min-width: 0; flex: 1 1 140px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .page { padding: 24px 16px 48px; }
  .app-header { padding-inline: 16px; gap: 12px; }
  .header-account { gap: 8px 12px; }
  .run-panel { padding: 14px; gap: 14px; }
  .run-panel > .field { width: 100%; }
  .run-settings { width: 100%; }
  .dropzone { flex-wrap: wrap; padding: 12px; }
  .auth-card { padding: 24px 20px; }
  .account-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
  .comparison-run-bar > *, .comparison-run-controls > * { max-width: 100%; }

  /* Keep the same sortable table and the same data on phones. Each document
     wraps into a compact record instead of a seven-column horizontal strip. */
  #documents-table { display: block; min-width: 0; background: none; border: 0; overflow: visible; }
  #documents-table thead { display: block; margin-bottom: 12px; }
  #documents-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  #documents-table th { display: block; padding: 0; border: 0; background: none; }
  #documents-table th:not([data-sort]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #documents-table .table-sort { padding: 6px 8px; min-height: 44px; border: 1.5px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
  #documents-table th[aria-sort="ascending"] .table-sort,
  #documents-table th[aria-sort="descending"] .table-sort { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
  #documents-table tbody { display: grid; gap: 12px; }
  #documents-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  #documents-table tbody td:nth-child(n) { display: block; padding: 0; border: 0; min-width: 0; text-align: left; white-space: normal; }
  #documents-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 11px; font-weight: 400; }
  #documents-table tbody td:first-child,
  #documents-table tbody td:nth-child(5),
  #documents-table tbody td:nth-child(6),
  #documents-table tbody td:last-child { grid-column: 1 / -1; }
  #documents-table tbody td:first-child::before,
  #documents-table tbody td:last-child::before { display: none; }
  #documents-table tbody td:nth-child(5) { display: flex; align-items: baseline; gap: 8px; }
  #documents-table tbody td:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  #documents-table td .btn + .btn { margin-left: 0; }
}

/* A saved run is a reading screen. Both pane headers have the same height;
   shared actions never add a second row to only the Result pane. */
.document-run-review > .page-head .doc-meta-row,
.document-run-review > .page-head .page-head-actions,
.document-run-review .comparison-run-bar,
.document-run-review .comparison-saved-run,
.document-run-review > #document-comparison ~ * { display: none !important; }
.document-run-review > .page-head { margin-bottom: 12px; }
.comparison-review-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.comparison-review-bar .comparison-mobile-tabs { margin: 0 auto 0 0; }
.comparison-review-bar .btn, .comparison-review-bar summary { min-height: 44px; white-space: nowrap; }
.comparison-save-menu { position: relative; }
.comparison-save-menu summary { list-style: none; display: flex; align-items: center; }
.comparison-save-menu summary::-webkit-details-marker { display: none; }
.comparison-save-menu[open] > .dropdown-menu { display: block; right: 0; left: auto; top: 100%; margin-top: 4px; min-width: 14rem; }
.comparison-save-menu .dropdown-item { min-height: 44px; }
.comparison-toolbar { padding: 8px; min-height: 60px; display: block; }
.comparison-title-row { flex-wrap: nowrap; gap: 4px; }
.comparison-title-row h2 { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; white-space: nowrap; }
.comparison-title-row h2 a { display: inline-flex; align-items: center; min-height: 44px; }
.comparison-representation { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.comparison-navigation { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin: 0; }
.comparison-navigation .btn { width: 44px; height: 44px; padding: 0; flex: 0 0 44px; }
.comparison-navigation input { width: 44px; min-width: 44px; height: 44px; padding: 4px; text-align: center; appearance: textfield; }
.comparison-navigation input::-webkit-inner-spin-button, .comparison-navigation input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.comparison-navigation span { font-size: 12px; white-space: nowrap; }
#document-comparison > .comparison-saved-run { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 10px; }
#document-comparison > .comparison-saved-run select { min-width: 0; max-width: 100%; }
@media(max-width:800px) {
  .comparison-review-bar { gap: 4px; justify-content: space-between; }
  .comparison-review-bar .comparison-mobile-tabs { flex-wrap: nowrap; gap: 4px; margin: 0; }
  .comparison-review-bar .btn, .comparison-review-bar summary { font-size: 13px; padding: 7px 6px; }
  .comparison-toolbar { padding: 8px; }
  .comparison-title-row h2 { font-size: 15px; }
  .comparison-navigation { gap: 4px; }
}

.comparison-paper > p:empty { display: none; }

.comparison-navigation { position: relative; }
.comparison-navigation .visually-hidden { left: 0; top: 0; }

@media(max-width:800px) {
  .comparison-review-bar { position: relative; }
  .comparison-save-menu { position: static; }
}

/* Full-page reading reuses the chosen pane; returning restores comparison. */
.comparison-expanded { overflow: hidden; overscroll-behavior-x: none; }
.comparison-full-page { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; background: var(--surface); color: var(--text); overflow: hidden; }
.comparison-full-page[open] { display: block; }
.comparison-full-page > .comparison-pane { display: flex; flex-direction: column; width: 100%; height: 100%; padding-top: calc(58px + env(safe-area-inset-top)); border: 0; border-radius: 0; }
.comparison-full-page .comparison-toolbar { display: none; }
.comparison-full-page .comparison-paper, .comparison-full-page #comparison-result { flex: 1 1 0; height: auto; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
/* A drag off the text moves a zoomed page (issue #249). */
.comparison-full-page.pan-ready .comparison-paper, .comparison-full-page.pan-ready #comparison-result { cursor: grab; }
.comparison-full-page.panning, .comparison-full-page.panning * { cursor: grabbing; user-select: none; }
.comparison-full-tools { position: absolute; z-index: 1; top: env(safe-area-inset-top); left: env(safe-area-inset-left); display: flex; align-items: center; gap: 2px; padding: 4px; max-width: 100%; border-radius: 0 0 8px 0; background: color-mix(in srgb, var(--surface) 78%, transparent); }
.comparison-full-tools .btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 18px; background: transparent; }
#comparison-full-zoom { font-size: 12px; }
#comparison-full-count { width: 30px; text-align: center; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
@media(max-width:359px) { .comparison-representation { display: none; } }

/* The range is entered beside All pages, not in a second row. */
#document-pages-field { width: auto; max-width: 100%; }
.page-selection { display: flex; align-items: flex-end; width: 240px; max-width: 100%; }
.page-selection > .btn { flex: 0 0 auto; height: 44px; border-radius: 7px 0 0 7px; }
.page-selection #document-page-range-field { flex: 1; min-width: 0; }
.page-selection label { padding-left: 10px; }
.page-selection #document-page-range { width: 100%; min-width: 0; height: 44px; margin-left: -1px; border: 1.5px solid var(--border-strong); border-radius: 0 7px 7px 0; }
.page-selection [aria-pressed="true"], #document-page-range-field[data-active="true"] input { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--accent); }

/* Owner, 2026-10-28: a run with an open case stays visibly yellow. */
.case-open { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.run-row.case-open { border-color: var(--warning); }
.case-info { display: block; color: var(--warning); margin-top: 4px; }

.delete-confirmation .save-as-actions { flex-wrap: wrap; }
.delete-confirmation .btn { white-space: normal; }

/* Private screenshots stay inside their conversation at every screen width. */
.support-screenshot { display: block; max-width: 100%; max-height: 24rem; object-fit: contain; margin-top: .5rem; }

/* File names in the Support menu wrap within the existing section navigation. */
#account-support-files a { overflow-wrap: anywhere; min-width: 0; }

#support-content h2, .control-widget h2, .control-widget h3 { overflow-wrap: anywhere; }

#account-history-menu a, #account-history-files a, #account-history-selected h2 { overflow-wrap: anywhere; }


/* Synchronized document-workspace theme controls. Native button keyboard behaviour. */
.theme-toggle.btn { width: 44px; min-height: 44px; padding: 10px; justify-content: center; flex: 0 0 auto; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle[aria-pressed="false"] .theme-icon-sun,
.theme-toggle[aria-pressed="true"] .theme-icon-moon { display: none; }


/* The extra workspace control stays inside the full-page toolbar on narrow phones. */
.comparison-full-tools { flex-wrap: wrap; }
@media (max-width: 370px) {
  .comparison-full-page > .comparison-pane { padding-top: calc(104px + env(safe-area-inset-top)); }
}


/* Prominent, descriptive recognition-history action; native details behaviour. */
.panel-fold.panel-fold-action { padding: 0; border: 1.5px solid var(--accent); overflow: hidden; }
.panel-fold-action > summary.btn {
  display: flex; width: 100%; min-height: 76px; gap: 16px; padding: 16px 20px;
  list-style: none; white-space: normal; text-align: left; font-size: 16px;
  font-weight: 700; color: var(--accent-ink); background: var(--accent-tint);
  border: 0; border-radius: 10px;
}
.panel-fold-action > summary::-webkit-details-marker { display: none; }
.panel-fold-action > summary::marker { content: ''; }
.panel-fold-action > summary.btn:hover { background: var(--surface-sunken); color: var(--accent-ink); }
.panel-fold-action > summary.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.panel-fold-action[open] > summary.btn { margin-bottom: 0; border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--border); }
.panel-fold-chevron { flex: 0 0 24px; }
.panel-fold-action[open] .panel-fold-chevron { transform: rotate(90deg); }
.panel-fold-copy { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.panel-fold-description { font-size: 13px; font-weight: 400; color: var(--text-muted); line-height: 1.5; }
.panel-fold-action .panel-fold-count { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.panel-fold-action:not([open]) .panel-fold-hide, .panel-fold-action[open] .panel-fold-show { display: none; }
.panel-fold-body { padding: 16px; }
@media (max-width: 600px) {
  .panel-fold-action > summary.btn { padding: 16px; gap: 12px; }
}