:root {
  color-scheme: light dark;
  --border: #d8d8d8;
  --muted: #666;
  --accent: #2f6fed;
  --warn-bg: #fff6e0;
  --warn-border: #e0c060;
  --error: #b3261e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #fafafa;
  color: #1a1a1a;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; margin-top: 0; }

.settings-link {
  float: right;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
}
.settings-link:hover { color: var(--accent); }

.field-status {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
}

.screen { margin-top: 24px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  max-width: 360px;
}
.field span { font-size: 0.85rem; color: var(--muted); }
.field input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
button:hover:not(:disabled) { filter: brightness(0.95); }

.status { margin: 10px 0; color: var(--muted); }

.card {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
}

.current-step {
  font-weight: 600;
}

.progress-log {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-height: 240px;
  overflow-y: auto;
}
.progress-log li { padding: 2px 0; }

.result-section { margin-top: 20px; }
.result-section h3 {
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.sources-block {
  margin: 14px 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f6f7fb;
  font-size: 0.9rem;
  color: var(--muted);
}
.sources-block div { padding: 2px 0; }

.what-was-checked {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
}
.what-was-checked h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.checklist-group { margin: 10px 0; }
.checklist-group:first-of-type { margin-top: 0; }
.checklist-group h3 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
.checklist-item { padding: 2px 0; }

/* De-emphasized by typography, never by collapsing — every item is always
   visible, per direct request (2026-09-20): a smaller, muted font is enough
   to keep 14 "not implemented" lines from visually dominating the 1-5 ✅
   lines above them, without hiding a single one behind a click. */
.checklist-not-implemented { margin-top: 6px; }
.checklist-not-implemented-intro {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 2px;
}
.checklist-item-muted {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 1px 0;
}

.overall-summary {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #eef3fd;
  border-radius: 0 8px 8px 0;
}

.section-nav {
  margin: 14px 0;
  font-size: 0.9rem;
}
.section-nav-label { color: var(--muted); margin-right: 4px; }
.section-nav ol {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}
.section-nav li { display: inline; }
.section-nav li:not(:last-child)::after { content: " · "; color: var(--muted); }
.section-nav a { color: var(--accent); text-decoration: none; }
.section-nav a:hover { text-decoration: underline; }

.toolbar { margin: 10px 0; }
.toolbar button { background: white; color: var(--accent); border: 1px solid var(--accent); }

.finding { margin: 10px 0; }
.finding-summary { display: flex; align-items: baseline; gap: 6px; }
.low-confidence-note {
  color: #8a6d00;
  font-size: 0.85rem;
}

.finding details {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}
.finding summary {
  cursor: pointer;
  color: var(--accent);
}
.finding .quote {
  margin: 6px 0 2px;
  padding: 8px 10px;
  background: #f2f2f2;
  border-left: 3px solid var(--border);
  font-style: italic;
}
.finding .severity {
  margin-top: 4px;
}

.error-banner {
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--error);
  border-radius: 6px;
  color: var(--error);
  background: #fdecea;
}

/*
 * "Что проверялось" — permanent part of the page layout across Экраны 1-3
 * (2026-09-20, по прямому запросу), always fully expanded (no <details>
 * anywhere in it, on any width). Below is ONLY the responsive placement:
 * a sticky left sidebar on wide screens, a plain block above the rest of
 * the page in normal flow on narrow ones. `.layout`'s DOM has exactly two
 * children — `#whatWasCheckedBlock` and `.layout-main` (wrapping
 * Экраны 1-3 + the error banner) — so at the default (narrow) `display:
 * block`, the panel simply renders first, above everything else, no CSS
 * needed for that beyond source order.
 *
 * Bug fixed here (2026-09-20): an earlier version put the sidebar directly
 * inside #screen3 as a `grid-row: 1 / -1`-spanning item, with every OTHER
 * child of #screen3 auto-placed into column 2 across many separate rows.
 * Multi-row-spanning items on an implicit `auto`-sized grid are exactly
 * the kind of case where browsers distribute the spanning item's height
 * requirement unevenly across the tracks it spans (observed: the entire
 * grid's first row was inflated to ~386px — nowhere near any single
 * child's actual size — while other rows and the right column effectively
 * lost the space, making the "found the previous ПООБ" sources card and
 * everything below it invisible below the fold). The fix is the standard
 * one for a sticky sidebar: exactly TWO grid items in a single row (the
 * sidebar and ONE wrapper for everything else), never a spanning item
 * inside an implicit multi-row grid.
 *
 * `.page`'s max-width also widens here — otherwise the sidebar would eat
 * into the existing 760px column and make the content narrower on a WIDER
 * window, which is backwards. Widening it also affects Экран 1/2 even when
 * the panel is short there — harmless (more centered whitespace).
 */
@media (min-width: 1024px) {
  .page {
    max-width: 1100px;
  }
  .layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    column-gap: 28px;
    align-items: start;
  }
  #whatWasCheckedBlock {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}