/* Company Wiki — shell + leaf-page stylesheet.
 *
 * The brand tokens (--bg, --surface, --ink, --accent, --accent-soft, --font)
 * are injected by the shell's inline <style> from BRAND (config.ts). This file
 * CONSUMES them and defines the rest of the palette + geometry below.
 *
 * Aesthetic: clean, editorial, information-dense, one restrained accent, no
 * gradients or glows on chrome. Show/hide uses the [hidden] attribute, never
 * inline style= (CSP: style-src 'self' blocks inline styles).
 */

:root {
  /* Derived / secondary palette (brand tokens come from the inline block). */
  --sub: #57534e;          /* secondary text */
  --tert: #78716c;         /* tertiary / muted text */
  --line: #e7e5e4;         /* standard hairline */
  --line-soft: #f0efed;    /* faint hairline / zebra */

  --green: #15803d;
  --green-soft: #f0fdf4;
  --amber: #b45309;
  --amber-soft: #fffbeb;
  --red: #b91c1c;
  --red-soft: #fef2f2;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --radius: 8px;
  --radius-lg: 14px;

  --topbar-h: 56px;
  --sidebar-w: 232px;
  --maxw: 1160px;
}

/* ---------- Reset / base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Ingested titles/bodies can contain arbitrarily long unbroken tokens;
     `anywhere` lets them break AND counts toward min-content, so a long token
     can never blow a grid card or table cell out of its column. Inherited. */
  overflow-wrap: anywhere;
}

/* Even line distribution on headings; no orphaned last words on short prose. */
h1, h2, h3 {
  text-wrap: balance;
}
.card-summary, .section-note, .meta, .empty p, .unlock-sub, .cb-note, .cb-hint,
.review-banner, .ask-summary, .st-action, .stat-label {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

/* Consistent, visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--topbar-h);
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Hamburger toggle for the mobile nav drawer. Hidden on desktop (sidebar is
   always visible there); shown at <=768px. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 2px;
  color: var(--sub);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.nav-toggle:hover { background: var(--line-soft); color: var(--ink); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  width: auto;
  display: block;
}

.brand-emoji {
  line-height: 1;
  display: inline-block;
}

/* Size classes for the shared brandMark() helper (Part IV). */
.brand-sm { height: 24px; }
.brand-sm.brand-emoji { font-size: 22px; }
.brand-md { height: 40px; }
.brand-md.brand-emoji { font-size: 36px; }
.brand-lg { height: 64px; }
.brand-lg.brand-emoji { font-size: 56px; }

.name-text {
  font-weight: 650;
}

.topsearch {
  flex: 1;
  max-width: 520px;
  margin-left: auto;
}

.topsearch form {
  position: relative;
  display: flex;
  align-items: center;
}

.topsearch .search-icon {
  position: absolute;
  left: 12px;
  color: var(--tert);
  pointer-events: none;
}

.topsearch input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 36px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.topsearch input::placeholder {
  color: var(--tert);
}

.topsearch input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

/* ---------- App layout: sidebar + main ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 0;
  /* Full viewport: the sidebar pins to the left edge and the main column fills
     all the way to the right. (The graph page relied on graph-mode to break the
     old centered cap; now every page gets the full width.) Prose inside .main
     still caps its own line length via .wiki-content for readability. */
  max-width: none;
  margin: 0;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 24px 16px 40px;
  border-right: 1px solid var(--line);
}

.sidebar-scrim {
  display: none;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar nav a {
  display: block;
  padding: 8px 12px;
  color: var(--sub);
  font-size: 14px;
  border-radius: 6px;
  line-height: 1.4;
}

.sidebar nav a:hover {
  background: var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}

.sidebar nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.section-label {
  margin: 18px 0 6px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tert);
}

.section-label:first-child {
  margin-top: 0;
}

.main {
  min-width: 0;
  padding: 32px 40px 64px;
}

/* ---------- Page header + meta ---------- */

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.meta {
  color: var(--tert);
  font-size: 14px;
}

/* Metadata bar (key/value pairs across the top of a leaf). */
.metabar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 16px 0 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.meta-key {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tert);
}

.meta-val {
  font-size: 14px;
  color: var(--ink);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: capitalize;
  line-height: 1.5;
  white-space: nowrap;
}

/* Colour tones by meaning, with every taxonomy's members named directly:
   freshness/confidence AND contradiction severity map onto the same three
   tones, so templates emit `badge-${value}` without a translation table. */
.badge-fresh,
.badge-strong {
  color: var(--green);
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 22%, transparent);
}

.badge-stale,
.badge-moderate,
.badge-medium {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: color-mix(in srgb, var(--amber) 24%, transparent);
}

.badge-conflicted,
.badge-weak,
.badge-high,
.badge-critical {
  color: var(--red);
  background: var(--red-soft);
  border-color: color-mix(in srgb, var(--red) 22%, transparent);
}

.badge-unverified,
.badge-low {
  color: var(--tert);
  background: var(--line-soft);
  border-color: var(--line);
}

/* Badges are clickable filter links: firm the border on hover. */
a.badge {
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s ease;
}
a.badge:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}
a.badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.badge-type {
  color: var(--sub);
  background: var(--bg);
  border-color: var(--line);
}

/* ---------- Cards ---------- */

.card {
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}

.card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* Whole-card click: the title link is stretched to cover the card. ONLY real
   interactive elements (nested links) are raised above the overlay — raising
   whole text blocks would punch holes in the click surface, so sweeping the
   cursor across the summary would flicker the hover state off and on. Plain
   text stays under the overlay: not selectable, but the card is one link. */
.card-link {
  position: relative;
  cursor: pointer;
}
.card-link:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.card-link h3 a.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card-link .cat-tag,
.card-link .card-meta a {
  position: relative;
  z-index: 1;
}
/* Hovering anywhere on the card colors the title, not only when the pointer
   happens to be over the anchor's own box. */
.card-link:hover h3 a {
  color: var(--accent);
}
.card-time, .card-src { color: var(--tert); }

.card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.card h3 a {
  color: var(--ink);
}

.card h3 a:hover {
  color: var(--accent);
  text-decoration: none;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tert);
}

.card-summary {
  margin: 8px 0 0;
  color: var(--sub);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 8px 0 28px;
}

.stat {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Same hover language as cards: border + soft shadow, no lift. */
a.stat:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  text-decoration: none;
}
a.stat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tert);
}

/* ---------- Section heading ---------- */

.section-heading {
  margin: 32px 0 10px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.section-note {
  margin: 0 0 16px;
  color: var(--sub);
  font-size: 14px;
  max-width: 68ch;
}

/* ---------- Wiki content (rendered body) ---------- */

.wiki-content {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink);
  max-width: 74ch;
}

.wiki-content h1,
.wiki-content h2,
.wiki-content h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

.wiki-content h1 {
  margin: 36px 0 12px;
  font-size: 26px;
  font-weight: 700;
}

.wiki-content h2 {
  margin: 30px 0 10px;
  padding-bottom: 6px;
  font-size: 21px;
  font-weight: 650;
  border-bottom: 1px solid var(--line);
}

.wiki-content h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 650;
}

.wiki-content > *:first-child {
  margin-top: 0;
}

.wiki-content p {
  margin: 0 0 16px;
}

.wiki-content ul,
.wiki-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.wiki-content li {
  margin: 4px 0;
}

.wiki-content li > ul,
.wiki-content li > ol {
  margin: 4px 0;
}

.wiki-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wiki-content code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.12em 0.4em;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.wiki-content pre {
  margin: 0 0 18px;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--ink);
  color: #f5f5f4;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.6;
}

.wiki-content pre code {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
}

.wiki-content blockquote {
  margin: 0 0 18px;
  padding: 4px 18px;
  color: var(--sub);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.wiki-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Wide tables scroll inside their own box instead of breaking the page —
   and opt back out of the global `anywhere` breaking so cells keep natural
   widths rather than snapping words and numbers mid-token. */
.wiki-content table {
  display: block;
  width: 100%;
  max-width: fit-content;
  margin: 0 0 20px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
  overflow-wrap: normal;
}

.wiki-content td {
  font-variant-numeric: tabular-nums;
}

.wiki-content th,
.wiki-content td {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  vertical-align: top;
}

.wiki-content th {
  background: var(--bg);
  font-weight: 650;
}

.wiki-content tr:nth-child(even) td {
  background: var(--line-soft);
}

.wiki-content img {
  display: block;
  height: auto;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.wiki-content hr {
  margin: 28px 0;
  border: none;
  border-top: 1px solid var(--line);
}

/* ---------- Citations / sources ---------- */

.citations {
  margin: 28px 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.citations h2,
.citations h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
}

.citation-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}

.citation-item:first-of-type {
  border-top: none;
}

.source-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sub);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  white-space: nowrap;
}

/* ---------- Relations panels (leaf page) ----------
   Definition-list structure: the relation label holds a fixed left rail, its
   links stack beside it. Hairlines separate GROUPS, not every row, so the
   grouping is visible at a glance. */
.relation-group {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.relation-group:first-child {
  border-top: none;
  padding-top: 0;
}

.relation-group:last-child {
  padding-bottom: 0;
}

.relation-label {
  justify-self: start;
}

.relation-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.relation-missing {
  font-size: 12.5px;
  color: var(--tert);
}

@media (max-width: 640px) {
  .relation-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---------- Activity / history rows ----------
   Fixed columns so every row has the same skeleton no matter how long its
   text is: [badge] [detail] [who · when]. The eye scans down one rail. */
.act-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.act-row:first-of-type {
  border-top: none;
}

.act-badge {
  justify-self: start;
}

.act-body {
  min-width: 0;
  font-size: 14px;
  text-wrap: pretty;
}

.act-when {
  color: var(--tert);
  font-size: 12.5px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .act-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .act-badge {
    grid-column: 1 / -1;
  }
}

/* ---------- Contradiction banner + resolve box ---------- */

.contradiction-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px 16px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid color-mix(in srgb, var(--red) 26%, transparent);
  border-radius: var(--radius);
  font-size: 14px;
}

.contradiction-banner strong {
  font-weight: 700;
}

/* Contradiction cards: a readable column, the two claims as paired quiet
   panels, and the resolve command as one compact line (the id lives in the
   command — the only place a human needs it). */
.contra-list {
  max-width: 800px;
}

.contra-card .claims {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 14px;
}

.claim {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

.claim p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

.claim-tag {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--sub);
  background: var(--surface);
  border: 1px solid var(--line);
}

.contra-resolve {
  margin: 0;
  font-size: 13.5px;
  color: var(--sub);
}

.contra-resolve code {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ---------- Old-revision banner ---------- */

.rev-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 16px;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  border-radius: var(--radius);
  font-size: 14px;
}

.rev-banner a {
  color: var(--amber);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Empty state ---------- */

.empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--tert);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.empty p {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 14px;
}

/* ---------- Source status grid (dashboard + sources page) ---------- */

.source-status {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 4px 0 28px;
}

.source-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.source-tile.connected {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
}

.st-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.st-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.st-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tert);
}

.st-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.st-status.on {
  color: var(--green);
}

.st-status.off {
  color: var(--tert);
}

.st-action {
  font-size: 12.5px;
  color: var(--sub);
  line-height: 1.5;
}

/* ---------- Site footer ---------- */

.site-footer {
  max-width: none;
  margin: 0;
  padding: 24px 40px 40px;
  color: var(--tert);
  font-size: 12.5px;
  border-top: 1px solid var(--line);
}

.site-footer span {
  color: var(--sub);
  font-weight: 600;
}

/* ---------- Table of contents (inline + floating fab) ---------- */

.toc {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
}

.toc-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 8px;
}

.toc ul,
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li {
  margin: 3px 0;
}

.toc a {
  color: var(--sub);
}

.toc a:hover {
  color: var(--accent);
}

.toc-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.toc-fab[hidden] {
  display: none;
}

/* ---------- Search overlay (Cmd/Ctrl+K) ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 20px 20px;
  background: rgba(28, 25, 23, 0.4);
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay .search-panel {
  width: 100%;
  max-width: 620px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.search-overlay input[type="text"],
.search-overlay input[type="search"] {
  width: 100%;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--line);
}

.search-overlay input:focus {
  outline: none;
}

.search-results {
  overflow-y: auto;
  padding: 6px;
}

.search-results .result {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  /* Concentric with the panel: 14 (panel) = 8 (result) + 6 (list padding). */
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.search-results .result:hover,
.search-results .result.active {
  background: var(--accent-soft);
}

.search-results mark {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.search-results .no-results {
  padding: 20px 14px;
  color: var(--tert);
  font-size: 14px;
  text-align: center;
}

/* ---------- Export menu ---------- */

.export-menu {
  position: relative;
  display: inline-block;
}

.export-menu > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, scale 0.12s ease;
}

.export-menu > button:hover {
  border-color: var(--accent);
}

.export-trigger svg {
  color: var(--tert);
}

.export-list {
  position: absolute;
  /* The trigger sits at the content's left edge, so the panel drops down-right. */
  left: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  /* Concentric: 12 (menu) = 6 (item) + 6 (padding). */
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.export-list[hidden] {
  display: none;
}

.export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.export-item svg {
  flex: none;
  color: var(--tert);
}

.export-item:hover {
  background: var(--line-soft);
}

.export-item:hover svg {
  color: var(--ink);
}

.export-item.copied,
.export-item.copied svg {
  color: var(--green);
}

/* ---------- Chart fullscreen lightbox ---------- */

.chart-lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 25, 23, 0.72);
}

.chart-lightbox[hidden] {
  display: none;
}

.chart-lightbox .lightbox-inner {
  width: 100%;
  max-width: 980px;
  max-height: 88vh;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: auto;
}

.chart-lightbox .lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .main {
    padding: 24px 22px 56px;
  }
  .site-footer {
    padding: 20px 22px 32px;
  }
}

@media (max-width: 768px) {
  /* Single column; the sidebar becomes an off-canvas drawer (below). */
  .app {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
  }
  .main {
    padding: 20px 18px 56px;
  }
  /* Show the hamburger; the company title stays visible next to the logo. */
  .nav-toggle {
    display: inline-flex;
  }
  .name-text {
    display: inline;
    font-size: 15px;
  }
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .topsearch {
    max-width: none;
  }
  .page-header h1 {
    font-size: 25px;
  }
  .wiki-content {
    max-width: none;
  }

  /* ---- Sidebar as a slide-in drawer ---- */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    z-index: 55;
    width: min(280px, 82vw);
    height: calc(100vh - var(--topbar-h));
    padding: 16px 14px 40px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: 50;
    background: rgba(28, 25, 23, 0.4);
  }
  .sidebar-scrim[hidden] {
    display: none;
  }
  /* Lock body scroll while the drawer is open. */
  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* ---------- Press feedback ----------
   One tactile language for every real button, in ONE place — including the
   buttons styled in index.css and graph.css (this sheet loads on every page).
   Whole-card surfaces deliberately excluded. */
.cb-toggle:active,
.cb-skip:active,
.cb-dismiss:active,
.export-menu > button:active,
.ask-form button:active,
.unlock-card button:active,
.toc-fab:active,
.nav-toggle:active,
.filter-trigger:active,
.filter-drawer .fd-close:active,
.fd-view:active,
.graph-btn:active,
.graph-empty-cta:active {
  scale: 0.96;
}
.toc-fab,
.nav-toggle {
  transition: background-color 0.12s ease, scale 0.12s ease;
}

/* ---------- Reduced motion ---------- */

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

/* ---------- Print (export as PDF, EXP-2) ---------- */

@media print {
  .topbar,
  .sidebar,
  .site-footer,
  .toc-fab,
  .export-menu,
  .search-overlay {
    display: none !important;
  }
  .app {
    display: block;
    max-width: none;
  }
  .main {
    padding: 0;
  }
  body {
    background: #fff;
    color: #000;
  }
}


/* ---- Connect-sources banner (dashboard) ---- */
.connect-banner {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
}
.cb-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.cb-text { font-size: 14px; color: var(--ink); }
.cb-text strong { font-weight: 700; }
.cb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.cb-toggle {
  font: 600 13px/1 var(--font);
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  min-height: 32px;
  transition: background-color 0.12s ease, color 0.12s ease, scale 0.12s ease;
}
.cb-toggle:hover { background: var(--accent); color: #fff; }
.cb-dismiss {
  font: 400 15px/1 var(--font);
  color: var(--tert);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  /* Icon-only control: full 40px hit area. */
  min-width: 40px;
  min-height: 40px;
}
.cb-dismiss:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.cb-toggle:focus-visible, .cb-dismiss:focus-visible, .cb-skip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cb-list { border-top: 1px solid var(--accent); padding: 8px 16px 14px; background: var(--surface); }
.cb-note { font-size: 13px; color: var(--sub); margin: 8px 0 10px; }
.cb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cb-row:last-child { border-bottom: none; }
.cb-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.cb-hint { font-size: 12.5px; color: var(--tert); }
.cb-skip {
  font: 500 13px/1 var(--font);
  color: var(--sub);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  flex: none;
  min-height: 32px;
  transition: border-color 0.12s ease, color 0.12s ease, scale 0.12s ease;
}
.cb-skip:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.cb-skip:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) {
  .cb-summary { flex-wrap: wrap; }
}

/* ---- Card information hierarchy (review) ---- */
/* Category tags = the primary metadata (what the page is about). Prominent,
   right under the title. */
.cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.cat-tag {
  display: inline-block;
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  line-height: 1.5;
  text-decoration: none;
}
.cat-tag:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.cat-tags-lg { margin: 12px 0 4px; }
.cat-tags-lg .cat-tag { font-size: 13px; padding: 4px 13px; }

/* Quiet secondary meta line: type · time · sources. No colored pills. */
.card .card-meta {
  margin-top: 10px;
  gap: 6px;
  color: var(--tert);
  font-size: 12.5px;
}
.cm-type { text-transform: capitalize; }
.cm-sep { color: var(--line); }
.cm-time.cm-recent { color: var(--green); font-weight: 600; }

/* The one actionable colored signal: needs review. */
.review-chip {
  color: var(--amber);
  font-weight: 600;
}
.review-banner {
  margin: 14px 0 18px;
  padding: 12px 16px;
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink);
}
.review-banner strong { color: var(--amber); }


/* ---- Header search: collapsed to an icon, expands on click (artifacts pattern) ---- */
.topbar-spacer { flex: 1; }
.topsearch { display: flex; align-items: center; }
.topsearch .search-open {
  display: none; /* desktop: hidden, the field is shown outright (there's room) */
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--sub); cursor: pointer;
}
.topsearch .search-open:hover { background: var(--line-soft); color: var(--ink); }
.topsearch .search-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Desktop: the search field is open by default (space allows it). */
.topsearch .search-form { display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 14px; width: 300px; height: 38px; margin-left: auto; }
.topsearch .search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topsearch .search-form svg { flex: none; color: var(--tert); }
.topsearch .search-form input { flex: 1; border: none; outline: none; background: transparent;
  font: 400 15px var(--font); color: var(--ink); }

/* Mobile: collapse to the icon; the field opens on tap (.open). */
@media (max-width: 768px) {
  .topsearch .search-open { display: inline-flex; }
  .topsearch .search-form { display: none; }
  .topsearch.open .search-open { display: none; }
  .topsearch.open .search-form { display: flex; width: min(320px, 66vw); height: 38px; }
}

/* Count kicker under a page title: small, uppercase, no border (artifacts idx-count). */
.count-kicker {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tert);
}

/* ---- Leaf-page trust pills (visible confidence/freshness, per review) ---- */
.trust-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent; text-decoration: none;
  letter-spacing: 0.01em; text-transform: capitalize;
}
.trust-pill .tp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tp-strong, .tp-fresh { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 24%, transparent); }
.tp-moderate { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.tp-stale, .tp-weak { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 26%, transparent); }
.tp-conflicted { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 24%, transparent); }
.tp-unverified { color: var(--tert); background: var(--line-soft); border-color: var(--line); }
.tp-sources { color: var(--sub); background: var(--bg); border-color: var(--line); }
.tp-sources:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---- Ask the wiki (structured query surface) ---- */
.ask-form { display: flex; gap: 10px; margin: 0 0 20px; }
.ask-form input { flex: 1; padding: 12px 16px; font: 400 16px var(--font);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); outline: none; }
.ask-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask-form button { padding: 12px 22px; font: 600 15px var(--font); color: #fff; background: var(--accent);
  border: none; border-radius: var(--radius-lg); cursor: pointer;
  transition: background-color 0.12s ease, scale 0.12s ease; }
.ask-form button:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.ask-for { font-size: 13px; color: var(--sub); margin: 0 0 16px; }
.ask-result { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.ask-result:first-of-type { padding-top: 0; }
.ask-result h3 { font-size: 17px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
.ask-summary { color: var(--sub); font-size: 14.5px; line-height: 1.55; margin: 4px 0 10px; }
.ask-sources, .ask-neighbors { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 6px 0; }
.ask-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tert); margin-right: 4px; }
.ask-chip { display: inline-block; padding: 3px 10px; font-size: 12.5px; border-radius: 999px;
  background: var(--line-soft); color: var(--sub); text-decoration: none; }
.ask-chip:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.ask-chip-rel { background: var(--bg); border: 1px solid var(--line); }
.ask-meta { font-size: 12px; color: var(--tert); margin-top: 8px; text-transform: capitalize; }

/* ---------- Unlock gate (private wiki) ---------- */

.unlock-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.unlock-card {
  width: min(94vw, 400px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  /* Outer radius must exceed the 12px inputs it contains. */
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.unlock-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--ink);
}

.unlock-card h1 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.unlock-sub {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sub);
}

.unlock-card label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sub);
}

.unlock-card input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
}

.unlock-card input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.unlock-card button {
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--surface);
  background: var(--ink);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.12s ease, scale 0.12s ease;
}

.unlock-card button:hover {
  background: var(--accent);
}

.unlock-err {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  line-height: 1.4;
}

.unlock-by {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--tert);
}