/* Общее для всех карт: токены темы, меню слева, заготовка пустой страницы */
:root {
  --ground: #F1F3F6; --surface: #FFFFFF; --ink: #131922; --muted: #5A6573; --line: #D3D9E1;
  --always: #2A52CF; --always-soft: #E5EBFA;
  --demand: #9E5F10; --demand-soft: #F6ECDC;
  --hook: #0A7A6D; --hook-soft: #DCF0EC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0C1015; --surface: #141A21; --ink: #E2E8EE; --muted: #909CA9; --line: #29323C;
    --always: #82A0FF; --always-soft: #1A2447;
    --demand: #E2A552; --demand-soft: #33260F;
    --hook: #45C4B1; --hook-soft: #0F2D29;
  }
}
:root[data-theme="dark"] {
  --ground: #0C1015; --surface: #141A21; --ink: #E2E8EE; --muted: #909CA9; --line: #29323C;
  --always: #82A0FF; --always-soft: #1A2447;
  --demand: #E2A552; --demand-soft: #33260F;
  --hook: #45C4B1; --hook-soft: #0F2D29;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 15px/1.55 "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.mono { font-family: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace; }

.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; container-type: inline-size; }

.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: grid; align-content: start; gap: 22px;
  padding: 24px 12px; background: var(--surface); border-right: 1px solid var(--line);
}
.brand { display: grid; gap: 2px; padding-inline: 10px; }
.brand b { font-size: 16px; font-weight: 700; line-height: 1.25; }
.side-h, .brand span {
  font: 500 11px/1.3 "JetBrains Mono", ui-monospace, Consolas, monospace;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.side-h { margin: 0 0 6px; padding-inline: 10px; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.side a {
  display: grid; gap: 1px; padding: 9px 10px; border-radius: 6px;
  border: 1px solid transparent; color: var(--ink); text-decoration: none;
}
.side a:hover { background: var(--ground); }
.side a[aria-current="page"] { background: var(--always-soft); border-color: var(--always); }
.side a:focus-visible { outline: 2px solid var(--always); outline-offset: 2px; }
.s-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.s-sub { display: flex; justify-content: space-between; gap: 8px; font: 12px/1.4 "JetBrains Mono", ui-monospace, Consolas, monospace; color: var(--muted); }
.s-badge.ready { color: var(--hook); }

/* Пустая страница харнесса */
.stub { max-width: 900px; padding-inline: clamp(16px, 3vw, 40px); padding-block: 36px 56px; display: grid; gap: 20px; }
.stub .eyebrow { margin: 0; font: 500 11.5px "JetBrains Mono", ui-monospace, Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.stub h1 { margin: 0; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.stub .lede { margin: 0; max-width: 64ch; font-size: 17px; color: var(--muted); }
.stub .todo { padding: 18px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; gap: 10px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand span, .side-h { display: none; }
  .side ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}