/*
  Вики (Quartz) в оформлении «Штаб» — пара к shtab.css для остальных страниц.
  Подключается в StoneHead.tsx последним стилем (data-persist, чтобы SPA-переходы его не снимали).
  Файл отдаётся с диска (web/assets смонтирован в stone-site), правки видны без пересборки вики.

  Палитра: Radix Colors olive/amber, светлые и тёмные шкалы (MIT) — https://www.radix-ui.com/colors
  Шрифты: Tektur (заголовки, навигация) + Golos Text (текст); код остаётся JetBrains Mono из настроек Quartz.
  Светлая и тёмная тема вики сохраняются, шапка сайта тёмная в обеих.
*/

:root {
  --headerFont: "Tektur", "Golos Text", system-ui, sans-serif;
  --bodyFont: "Golos Text", system-ui, sans-serif;

  /* Radix olive (светлая) + amber (светлая) */
  --sh-bg: #fcfdfc;
  --sh-bg-2: #f8faf8;
  --sh-bg-3: #eff1ef;
  --sh-bg-4: #e7e9e7;
  --sh-line: #d7dad7;
  --sh-line-2: #cccfcc;
  --sh-muted: #60655f;
  --sh-text: #2a2f29;
  --sh-head: #1d211c;
  --sh-accent: #ab6400;
  --sh-accent-fill: #ffc53d;
  --sh-accent-soft: #fff7c2;
  --sh-accent-line: #e2a336;
  --sh-on-accent: #1d211c;

  --gv-radius: 2px;
  --gv-radius-sm: 0;
  --gv-bg: var(--sh-bg);
  --gv-surface: var(--sh-bg);
  --gv-sidebar: var(--sh-bg-2);
  --gv-text: var(--sh-text);
  --gv-heading: var(--sh-head);
  --gv-muted: var(--sh-muted);
  --gv-muted-strong: #3e433d;
  --gv-border: var(--sh-line);
  --gv-border-soft: var(--sh-bg-4);
  --gv-link: var(--sh-accent);
  --gv-link-hover: var(--sh-head);
  --gv-graph-edge: var(--sh-line);
  --gv-graph-node: #b9bcb8;
  --gv-sidebar-menu-text: var(--sh-text);
  --gv-sidebar-menu-active: var(--sh-accent);
  --gv-sidebar-tree-line: var(--sh-line);

  --light: var(--sh-bg);
  --lightgray: var(--sh-bg-4);
  --gray: #898e87;
  --darkgray: var(--sh-text);
  --dark: var(--sh-head);
  --secondary: var(--sh-accent);
  --tertiary: #8f6424;
  --highlight: rgba(255, 197, 61, 0.18);
  --textHighlight: rgba(255, 197, 61, 0.5);
}

:root[saved-theme="dark"] {
  /* Radix olive-dark + amber-dark — как на страницах сайта */
  --sh-bg: #111210;
  --sh-bg-2: #181917;
  --sh-bg-3: #212220;
  --sh-bg-4: #282a27;
  --sh-line: #383a36;
  --sh-line-2: #454843;
  --sh-muted: #9ea49c;
  --sh-text: #dcdfdb;
  --sh-head: #eceeec;
  --sh-accent: #ffc53d;
  --sh-accent-fill: #ffc53d;
  --sh-accent-soft: #1d180f;
  --sh-accent-line: #8f6424;
  --sh-on-accent: #16120c;

  --gv-bg: var(--sh-bg);
  --gv-surface: var(--sh-bg);
  --gv-sidebar: var(--sh-bg);
  --gv-text: var(--sh-text);
  --gv-heading: var(--sh-head);
  --gv-muted: var(--sh-muted);
  --gv-muted-strong: #afb5ad;
  --gv-border: var(--sh-line);
  --gv-border-soft: var(--sh-bg-4);
  --gv-link: var(--sh-accent);
  --gv-link-hover: #ffd60a;
  --gv-graph-edge: var(--sh-line-2);
  --gv-graph-node: #687066;
  --gv-sidebar-menu-text: var(--sh-text);
  --gv-sidebar-menu-active: var(--sh-accent);
  --gv-sidebar-tree-line: var(--sh-line);

  --light: var(--sh-bg);
  --lightgray: var(--sh-bg-4);
  --gray: #767d74;
  --darkgray: var(--sh-text);
  --dark: var(--sh-head);
  --secondary: var(--sh-accent);
  --tertiary: #ffca16;
  --highlight: rgba(255, 197, 61, 0.1);
  --textHighlight: rgba(255, 197, 61, 0.35);
}

::selection {
  background: var(--sh-accent-fill);
  color: var(--sh-on-accent);
}

:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 2px;
}

body {
  font-family: var(--bodyFont);
}

/* В тёмной теме — координатная сетка, как на страницах сайта */
:root[saved-theme="dark"] body {
  background-color: var(--sh-bg);
  background-image:
    linear-gradient(rgba(236, 238, 236, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 238, 236, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
}

/* ── Шапка сайта: та же, что на остальных страницах ── */
header.stone-site-header {
  background: #111210;
  backdrop-filter: none;
  border-bottom: 1px solid #383a36;
  font-family: "Golos Text", system-ui, sans-serif;
  color: #eceeec;
}

.stone-site-header .brand {
  color: #eceeec;
  font-family: "Tektur", "Golos Text", sans-serif;
  letter-spacing: 0.1em;
}

.stone-site-header .brand:hover { color: #ffc53d; }

.stone-site-header .brand img {
  border-radius: 2px;
  filter: none;
  outline: 1px solid #454843;
  outline-offset: 2px;
}

.stone-site-header .brand-sub {
  font-family: "Golos Text", system-ui, sans-serif;
  color: #ffca16;
  letter-spacing: 0.24em;
}

.stone-site-header .nav a {
  font-family: "Tektur", "Golos Text", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: #afb5ad;
  border-radius: 0;
}

.stone-site-header .nav a:hover {
  color: #eceeec;
  background: transparent;
}

.stone-site-header .nav a.active {
  color: #ffc53d;
  background: transparent;
  box-shadow: inset 0 -2px 0 #ffc53d;
}

@media (min-width: 861px) {
  .stone-site-header .nav { align-self: stretch; }
  .stone-site-header .nav a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0.95rem;
  }
}

.stone-site-header .stone-user { color: #afb5ad; }
.stone-site-header .stone-user b { color: #eceeec; }

.stone-site-header .stone-btn {
  border: 1px solid #454843;
  border-radius: 0;
  background: transparent;
  color: #eceeec;
  font-family: "Tektur", "Golos Text", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.stone-site-header .stone-btn:hover {
  border-color: #ffc53d;
  color: #ffc53d;
  background: #1d180f;
}

@supports (corner-shape: bevel) {
  .stone-site-header .stone-btn {
    border-radius: 9px 0;
    corner-shape: bevel;
  }
}

/* ── Левая колонка ── */
.page-title,
.page-title a,
.explorer button.title-button h2,
.sidebar.left h2 {
  font-family: var(--headerFont);
  letter-spacing: 0.08em;
}

.explorer-content ul li > a.active {
  color: var(--sh-accent);
  box-shadow: inset 2px 0 0 var(--sh-accent);
  padding-left: 0.4rem;
}

.search > .search-button {
  border-radius: 0;
  background: var(--sh-bg-3);
  border-color: var(--sh-line);
}

.search > .search-container > .search-space {
  border-radius: 0;
  border: 1px solid var(--sh-line-2);
}

.search > .search-container > .search-space > input {
  border-radius: 0;
}

/* ── Статья ── */
h1.article-title,
.page article h1 {
  font-family: var(--headerFont);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sh-head);
}

.page article h2,
.page article h3,
.page article h4 {
  font-family: var(--headerFont);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sh-head);
}

.page article h2 {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--sh-line);
}

.page article table th {
  font-family: var(--headerFont);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-muted);
  background: var(--sh-bg-3);
}

:root[saved-theme="dark"] .page article table th { color: #ffca16; }

.page article table td,
.page article table th { border-color: var(--sh-line); }

.page article table tr:hover td { background: var(--highlight); }

.page article code {
  border-radius: 0;
}

.page article pre,
pre {
  border-radius: 0;
  border: 1px solid var(--sh-line);
}

.page article blockquote {
  border-left: 3px solid var(--sh-accent-line);
}

.page article .callout {
  border-radius: 0;
  border-left-width: 3px;
}

.page article hr { border-color: var(--sh-line); }

/* ── Правая колонка, всплывающие превью ── */
.graph > .graph-outer,
.toc,
.backlinks > ul.overflow {
  border-radius: 0;
}

.graph > h3,
.backlinks > h3,
button.toc-header h3 {
  font-family: var(--headerFont);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--sh-muted);
}

.popover > .popover-inner {
  border-radius: 0;
  border: 1px solid var(--sh-line-2);
  background: var(--sh-bg);
}

@media (max-width: 860px) {
  .stone-site-header .nav a { font-size: 0.72rem; }
}