/* =====================================================================
   tokens.css — lifted from the BOG·docs Phase 3 design system.
   Source: /Users/mikesand/Claude/Projects/BOGDOCS/wireframes/tokens.css
   Plus a small EXTENSIONS block (end of file) adding entity-type hues for
   the types this corpus has but the wireframe didn't (Session/Organization/
   Place/Venue). Component structure is realized in app.js + app.css.

   Two structural laws this system serves:
     * Nested cards mirror nested entities — a card's visual boundary
       equals an entity's data boundary (--card-* + .card nesting).
     * Provenance is the product — confidence + citation get first-class
       visual tokens (--prov-*, .confidence-*).
   ===================================================================== */

:root {
  /* ---- Brand / palette (editorial: warm paper, ink, one signal accent) ---- */
  --color-bg:            #faf7f2;   /* warm paper */
  --color-surface:       #ffffff;   /* card surface */
  --color-surface-sunk:  #f3efe7;   /* sunken wells, code, ribbons */
  --color-ink:           #1c1a17;   /* near-black headline ink */
  --color-ink-2:         #423d36;   /* body text */
  --color-ink-3:         #6b645a;   /* secondary / captions */
  --color-ink-4:         #938b7e;   /* muted / metadata */
  --color-line:          #e3dcd0;   /* hairline borders */
  --color-line-2:        #cfc6b6;   /* stronger borders */

  --color-accent:        #b5451f;   /* signal accent — terracotta/news-red */
  --color-accent-ink:    #8a3416;   /* accent text on light */
  --color-accent-wash:   #f7e9e2;   /* accent tint background */
  --color-link:          #1d5e8c;   /* editorial blue for links */
  --color-link-visited:  #5a4a78;

  /* ---- Entity type accents (each entity type gets a consistent hue) ---- */
  --type-university:     #1d5e8c;   /* blue */
  --type-board:          #6b3fa0;   /* purple */
  --type-committee:      #2f7d62;   /* green */
  --type-meeting:        #b5451f;   /* terracotta */
  --type-agenda-item:    #c07c12;   /* amber */
  --type-action:         #a83246;   /* crimson */
  --type-person:         #4a5a6a;   /* slate */
  --type-document:       #7a6336;   /* sepia */
  --type-procedure:      #3b6b8f;   /* steel */

  /* ---- Provenance / confidence signal ---- */
  --prov-bg:             #f1f4f2;   /* provenance panel ground */
  --prov-border:         #c4d3cb;
  --prov-accent:         #2f7d62;
  --conf-high:           #2f7d62;   /* >= 0.85 */
  --conf-med:            #c07c12;   /* 0.6 - 0.85 */
  --conf-low:            #b5451f;   /* < 0.6 */
  --conf-track:          #e3dcd0;   /* confidence meter track */

  /* ---- Feed signal (developments vs. task-log must look distinct) ---- */
  --feed-dev:            #b5451f;   /* recent developments = editorial */
  --feed-task:           #4a5a6a;   /* task log = operational/slate */

  /* ---- Typography (editorial: serif display + humanist sans body) ---- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display:   2.6rem;   /* page H1 / entity name */
  --fs-h1:        2.0rem;
  --fs-h2:        1.5rem;
  --fs-h3:        1.2rem;
  --fs-h4:        1.02rem;
  --fs-body:      1.0rem;
  --fs-sm:        0.875rem;
  --fs-xs:        0.78rem;   /* metadata, eyebrows, badges */

  --lh-tight:     1.18;
  --lh-snug:      1.35;
  --lh-body:      1.62;

  --fw-regular:   400;
  --fw-medium:    550;
  --fw-bold:      700;

  --tracking-eyebrow: 0.09em;  /* uppercase eyebrows / type labels */

  /* ---- Spacing scale (8px base, editorial generosity) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;

  /* ---- Card system (the nested-card law lives here) ---- */
  --card-radius:        10px;
  --card-radius-sm:     7px;
  --card-pad:           var(--space-5);
  --card-pad-sm:        var(--space-4);
  --card-gap:           var(--space-4);
  --card-border:        1px solid var(--color-line);
  --card-border-strong: 1px solid var(--color-line-2);
  --card-shadow:        0 1px 2px rgba(28,26,23,0.05), 0 1px 0 rgba(28,26,23,0.02);
  /* each nesting level steps the inset card toward the sunken tone */
  --card-nest-bg-0:     var(--color-surface);
  --card-nest-bg-1:     #fcfaf6;
  --card-nest-bg-2:     #f8f4ec;
  --card-nest-bg-3:     #f3efe7;
  --card-accent-width:  3px;   /* left rule carrying the entity-type hue */

  /* ---- Layout ---- */
  --measure:        68ch;      /* readable prose measure */
  --content-max:    1120px;    /* page max width */
  --rail-w:         264px;     /* facet / context rail */
  --radius-pill:    999px;

  /* ---- Misc ---- */
  --focus-ring:     0 0 0 3px rgba(29,94,140,0.35);
  --transition:     140ms ease;
}

/* =====================================================================
   Theme: "modern" — crisp digital-serif variant
   ===================================================================== */
html[data-theme="modern"] {
  --color-bg:            #f4f5f7;
  --color-surface:       #ffffff;
  --color-surface-sunk:  #eceef2;
  --color-ink:           #11151c;
  --color-ink-2:         #353c46;
  --color-ink-3:         #69707c;
  --color-ink-4:         #9aa1ac;
  --color-line:          #e1e4e9;
  --color-line-2:        #c7cdd6;

  --color-accent:        #c4451a;
  --color-accent-ink:    #9c3614;
  --color-accent-wash:   #fbe9e1;
  --color-link:          #1f5fa8;
  --color-link-visited:  #5f4f9c;

  --prov-bg:             #eef3f1;
  --prov-border:         #c9dcd5;
  --prov-accent:         #1f7a5c;

  --font-display: "Source Serif 4", "Source Serif Pro", Charter, "Georgia", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-bold:      650;
  --tracking-eyebrow: 0.07em;

  --card-radius:        6px;
  --card-radius-sm:     4px;
  --card-border:        1px solid var(--color-line);
  --card-border-strong: 1px solid var(--color-line-2);
  --card-shadow:        0 1px 2px rgba(17,21,28,0.04);
  --card-nest-bg-0:     var(--color-surface);
  --card-nest-bg-1:     #fafbfc;
  --card-nest-bg-2:     #f2f4f7;
  --card-nest-bg-3:     #eceef2;
  --card-accent-width:  3px;

  --radius-pill: 6px; /* crisp pills, not fully rounded */
}
html[data-theme="modern"] h1 { letter-spacing: -0.02em; }
html[data-theme="modern"] .brand { letter-spacing: -0.01em; }

/* =====================================================================
   Theme switcher control (shared chrome, lives in .site-header__inner)
   ===================================================================== */
.theme-switcher {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--color-ink-3);
  font-family: var(--font-body);
}
.theme-switcher select {
  font-family: var(--font-body); font-size: var(--fs-xs);
  color: var(--color-ink-2); background: var(--color-surface-sunk);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: 3px 8px; cursor: pointer;
}

/* =====================================================================
   Primitive layer — shared utilities.
   ===================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-display); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--color-link-visited); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---- Page scaffold ---- */
.page      { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }
.site-header {
  border-bottom: var(--card-border-strong);
  background: var(--color-surface);
}
.site-header__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-5);
}
.brand { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--color-ink); }
.brand b { color: var(--color-accent); }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: var(--space-4); font-size: var(--fs-sm); margin-left: auto; }
.snapshot-badge {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-ink-3); background: var(--color-surface-sunk);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* ---- Two-column layout (content + rail) ---- */
.layout { display: grid; grid-template-columns: 1fr var(--rail-w); gap: var(--space-6); align-items: start; }
.rail   { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } .rail { position: static; } }

/* ---- Eyebrow / type label ---- */
.eyebrow {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); font-weight: var(--fw-bold);
  color: var(--color-ink-4);
}

/* ---- Breadcrumb (the compositional spine, made walkable) ---- */
.spine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
         font-size: var(--fs-sm); color: var(--color-ink-3); margin-bottom: var(--space-4); }
.spine a { color: var(--color-ink-3); }
.spine .sep { color: var(--color-ink-4); }
.spine .current { color: var(--color-ink); font-weight: var(--fw-medium); }

/* ---- THE CARD (nested-card law) ---- */
.card {
  background: var(--card-nest-bg-0);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
  border-left: var(--card-accent-width) solid var(--card-type-color, var(--color-line-2));
}
.card__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--color-ink); margin: 0; }
.card__meta { font-size: var(--fs-sm); color: var(--color-ink-3); }
.card__body { font-size: var(--fs-body); }

/* nested children container — drives the inset step */
.card-children { display: flex; flex-direction: column; gap: var(--card-gap); margin-top: var(--space-4); }
.card .card                 { background: var(--card-nest-bg-1); }
.card .card .card           { background: var(--card-nest-bg-2); border-radius: var(--card-radius-sm); }
.card .card .card .card     { background: var(--card-nest-bg-3); }

/* group label that sits above a set of child cards */
.card-group__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-bold); color: var(--color-ink-4);
  margin: var(--space-4) 0 var(--space-2);
}

/* ---- Entity-type hue helpers (set --card-type-color + dot color) ---- */
.t-university   { --card-type-color: var(--type-university); }
.t-board        { --card-type-color: var(--type-board); }
.t-committee    { --card-type-color: var(--type-committee); }
.t-meeting      { --card-type-color: var(--type-meeting); }
.t-agenda-item  { --card-type-color: var(--type-agenda-item); }
.t-action       { --card-type-color: var(--type-action); }
.t-person       { --card-type-color: var(--type-person); }
.t-document     { --card-type-color: var(--type-document); }
.t-procedure    { --card-type-color: var(--type-procedure); }

.type-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: var(--fw-bold); color: var(--color-ink-3);
}
.type-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--card-type-color, var(--color-ink-4));
}

/* ---- Pills / tags ---- */
.pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--color-surface-sunk); color: var(--color-ink-3);
  border: 1px solid var(--color-line);
}
.pill--accent { background: var(--color-accent-wash); color: var(--color-accent-ink); border-color: #ecd3c7; }

/* ---- Key/value facts grid ---- */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.facts dt { font-size: var(--fs-sm); color: var(--color-ink-4); }
.facts dd { font-size: var(--fs-sm); color: var(--color-ink-2); margin: 0; }

/* ---- Provenance panel + confidence meter (provenance is the product) ---- */
.provenance {
  background: var(--prov-bg);
  border: 1px solid var(--prov-border);
  border-left: 3px solid var(--prov-accent);
  border-radius: var(--card-radius-sm);
  padding: var(--card-pad-sm);
  font-size: var(--fs-sm);
}
.provenance__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-bold); color: var(--prov-accent); margin-bottom: var(--space-2);
}
.provenance__quote {
  border-left: 2px solid var(--color-line-2); padding-left: var(--space-3);
  color: var(--color-ink-2); font-style: italic; margin: var(--space-2) 0;
}
.cite { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-ink-3); }

.confidence { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }
.confidence__meter { width: 64px; height: 6px; border-radius: var(--radius-pill); background: var(--conf-track); overflow: hidden; }
.confidence__fill  { height: 100%; border-radius: var(--radius-pill); background: var(--conf-med); }
.confidence--high .confidence__fill { background: var(--conf-high); }
.confidence--med  .confidence__fill { background: var(--conf-med); }
.confidence--low  .confidence__fill { background: var(--conf-low); }
.confidence__val  { font-family: var(--font-mono); color: var(--color-ink-3); }
.method-badge {
  font-size: var(--fs-xs); font-family: var(--font-mono);
  background: var(--color-surface); border: 1px solid var(--prov-border);
  border-radius: var(--radius-pill); padding: 1px 8px; color: var(--color-ink-3);
}

/* ---- Segmentation ribbon (Source-PDF view) ---- */
.ribbon { display: flex; gap: 3px; background: var(--color-surface-sunk);
          border: 1px solid var(--color-line); border-radius: var(--card-radius-sm); padding: 6px; }
.ribbon__seg {
  flex: 1 1 auto; min-width: 0; padding: var(--space-3); border-radius: 5px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-top: 3px solid var(--card-type-color, var(--type-document));
  font-size: var(--fs-xs);
}
.ribbon__seg .pages { font-family: var(--font-mono); color: var(--color-ink-4); }
.ribbon__seg .label { font-weight: var(--fw-bold); color: var(--color-ink); display: block; margin-top: 2px; }

/* ---- Search ---- */
.searchbar { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.searchbar input {
  flex: 1; font-size: var(--fs-h4); padding: var(--space-3) var(--space-4);
  border: var(--card-border-strong); border-radius: var(--card-radius-sm);
  background: var(--color-surface); font-family: var(--font-body);
}
.searchbar button {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body);
  padding: 0 var(--space-5); border: none; border-radius: var(--card-radius-sm);
  background: var(--color-accent); color: #fff; cursor: pointer;
}
.result { padding: var(--space-4) 0; border-bottom: var(--card-border); }
.result__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.result__snippet mark, mark { background: var(--color-accent-wash); color: var(--color-accent-ink); padding: 0 2px; }

/* ---- Facet rail ---- */
.facet-group { border-bottom: var(--card-border); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.facet-group__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-2); }
.facet { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--color-ink-3); padding: 2px 0; }
.facet .count { font-family: var(--font-mono); color: var(--color-ink-4); }

/* ---- Vote tally ---- */
.tally { display: inline-flex; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-sm); }
.tally .for     { color: var(--conf-high); }
.tally .against { color: var(--conf-low); }
.tally .abstain { color: var(--color-ink-4); }
.outcome { font-weight: var(--fw-bold); }
.outcome--passed { color: var(--conf-high); }
.outcome--failed { color: var(--conf-low); }

/* ---- Graph island (rail link into the explorer) ---- */
.graph-island {
  border: 1px dashed var(--color-line-2); border-radius: var(--card-radius-sm);
  background: var(--color-surface-sunk); padding: var(--space-5);
  text-align: center; color: var(--color-ink-3); font-size: var(--fs-sm);
}

/* =====================================================================
   EXTENSIONS (BOG Viewer) — entity types in this corpus that the wireframe
   design system did not enumerate. Same idiom: a hue token + a .t-* helper.
   ===================================================================== */
:root {
  --type-session:      #5b7a99;   /* slate-blue — distinct from agenda-item amber it contains */
  --type-organization: #6b3fa0;   /* purple */
  --type-place:        #3b6b8f;   /* steel */
  --type-venue:        #8a7a5c;   /* muted sepia — virtual/unknown venues */
}
.t-session      { --card-type-color: var(--type-session); }
.t-agendaitem   { --card-type-color: var(--type-agenda-item); }  /* node type "AgendaItem" → amber */
.t-organization { --card-type-color: var(--type-organization); }
.t-place        { --card-type-color: var(--type-place); }
.t-venue        { --card-type-color: var(--type-venue); }