/**
 * ds.css — Disclosure Navigator Design System
 *
 * Loaded globally on every page via nav.js.
 * Color tokens live in tokens.css — do not redefine them here.
 * This file covers spacing, typography scale, component classes, and layout utilities.
 *
 * Component classes always start with .ds-
 * Typography classes start with .dn-
 * Variants use BEM modifier syntax: .ds-component--variant
 * States use plain classes: .active, .disabled
 */

/* ─── SPACING & SIZING TOKENS ────────────────────────────────────────────────
   4-point grid. Use these vars anywhere you need spacing.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* Typography scale — minimum 11px. Nothing below this is readable on desktop. */
  --text-2xs:  10px;  /* absolute minimum — timestamps, inline metadata only     */
  --text-xs:   11px;  /* small labels, ALL-CAPS eyebrows with letter-spacing      */
  --text-sm:   12px;  /* secondary body, captions, badge text                    */
  --text-base: 13px;  /* primary body, card content                              */
  --text-md:   14px;  /* readable body, sidebar text, form labels                */
  --text-lg:   16px;  /* subheadings, panel titles                               */
  --text-xl:   20px;  /* page/section headings                                   */
  --text-2xl:  26px;  /* hero headings                                           */

  /* Letter-spacing scale */
  --ls-tight:  0.5px;
  --ls-normal: 1px;
  --ls-wide:   2px;

  /* Font stack */
  --font-ui: 'Courier New', Courier, monospace;

  /* Component sizing */
  --btn-h-sm:  22px;
  --btn-h:     28px;
  --btn-h-lg:  34px;
  --btn-px-sm: 8px;
  --btn-px:    12px;
  --btn-px-lg: 14px;

  --input-h:   34px;
  --input-h-sm: 28px;

  --tab-h: 40px;

  /* Chip */
  --chip-px: 9px;
  --chip-py: 3px;

  /* Border-radius scale — minimal by default, app aesthetic is flat/sharp */
  --radius-sm:     2px;   /* subtle: buttons, small controls           */
  --radius:        3px;   /* standard: chips, inputs, small cards       */
  --radius-lg:     6px;   /* panels, sidecars, content cards            */
  --radius-pill: 100px;   /* type label chips (PERSON, ORGANIZATION)   */
  --radius-drawer: 12px;  /* mobile bottom-sheet top corners            */

  /* Shadow scale */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.12);   /* subtle card lift     */
  --shadow:       0 2px 8px rgba(0,0,0,0.16);   /* card hover           */
  --shadow-lg:    0 4px 24px rgba(0,0,0,0.25);  /* modal dialog         */
  --shadow-panel: 0 -4px 32px rgba(0,0,0,0.3);  /* bottom-sheet         */

  /* Overlay */
  --overlay-bg: rgba(0,0,0,0.65); /* standard modal backdrop opacity   */

  /* Z-index hierarchy — never use magic numbers, always reference these */
  --z-nav:    100;   /* top navigation bar                  */
  --z-panel:  300;   /* persistent sidecars & panels        */
  --z-drawer: 500;   /* mobile bottom-sheet drawers         */
  --z-modal:  700;   /* modal dialogs                       */
  --z-toast:  900;   /* toasts, temporary notifications     */

  /* Transitions */
  --t-fast: 0.12s;
  --t-base: 0.15s;
}

/* ─── BUTTON ─────────────────────────────────────────────────────────────────
   Base class for every interactive button in the app.
   Inline styles on buttons should never be used — add a variant instead.

   Default appearance: ghost (no fill, dim border, dim text)

   Variants:
     .ds-btn--primary   filled accent2, white text — main CTA
     .ds-btn--accent    accent2 border + text, no fill — secondary CTA
     .ds-btn--danger    danger-colored border + text
     .ds-btn--ghost     no border (text-only), reveals on hover
     .ds-btn--icon      square, no border; for icon-only controls

   Sizes:
     .ds-btn--sm        26px tall
     (default)          32px tall
     .ds-btn--lg        38px tall (toolbar)

   States:
     .active            accent blue border + text
     :disabled          40% opacity, not-allowed cursor
   ─────────────────────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-base), color var(--t-base),
              background var(--t-base), opacity var(--t-base);
  user-select: none;
  vertical-align: middle;
}
.ds-btn svg,
.ds-btn i[data-lucide] { width: 12px; height: 12px; flex-shrink: 0; }
.ds-btn:hover { border-color: var(--border2); color: var(--text-bright); }
.ds-btn:disabled,
.ds-btn[disabled]  { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.ds-btn.active     { color: var(--accent); border-color: var(--accent); }

/* Primary — filled with accent2 */
.ds-btn--primary                 { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.ds-btn--primary:hover           { opacity: 0.88; border-color: var(--accent2); color: #fff; }
.ds-btn--primary.active          { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* Accent — accent2 outline, no fill */
.ds-btn--accent                  { border-color: var(--accent2); color: var(--accent2); }
.ds-btn--accent:hover            { background: rgba(129,140,248,0.1); border-color: var(--accent2); color: var(--accent2); }

/* Danger */
.ds-btn--danger                  { border-color: rgba(255,107,53,0.35); color: var(--danger); }
.ds-btn--danger:hover            { background: rgba(255,107,53,0.1); border-color: var(--danger); }

/* Ghost — no border until hovered */
.ds-btn--ghost                   { border-color: transparent; }
.ds-btn--ghost:hover             { border-color: var(--border); color: var(--text-bright); }

/* Share button — standalone, used outside ds-btn contexts */
.dn-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 14px; cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.dn-share-btn:hover { color: var(--text-bright); border-color: var(--text-dim); }

/* Icon — square, no border, fixed width matches height */
.ds-btn--icon                    { padding: 0; width: var(--btn-h); min-width: var(--btn-h); border-color: transparent; }
.ds-btn--icon:hover              { border-color: var(--border); color: var(--text-bright); }
.ds-btn--icon svg,
.ds-btn--icon i[data-lucide]     { width: 14px; height: 14px; }

/* Sizes */
.ds-btn--sm                      { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--text-2xs); }
.ds-btn--sm.ds-btn--icon         { width: var(--btn-h-sm); min-width: var(--btn-h-sm); padding: 0; }
.ds-btn--sm svg,
.ds-btn--sm i[data-lucide]       { width: 11px; height: 11px; }

.ds-btn--lg                      { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); }
.ds-btn--lg.ds-btn--icon         { width: var(--btn-h-lg); min-width: var(--btn-h-lg); padding: 0; }
.ds-btn--lg svg,
.ds-btn--lg i[data-lucide]       { width: 14px; height: 14px; }


/* ─── TAB ────────────────────────────────────────────────────────────────────
   Horizontal tab bar item. Active state: accent underline.
   Container should be display:flex with border-bottom: 1px solid var(--border).

   Variants:
     .ds-tab--pill  rounded pill style (no underline, background active state)
   ─────────────────────────────────────────────────────────────────────────── */
.ds-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--tab-h);
  padding: 0 var(--sp-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--t-base), border-color var(--t-base);
  user-select: none;
}
.ds-tab:hover  { color: var(--text-bright); }
.ds-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ds-tab svg    { width: 12px; height: 12px; }

/* Pill variant — no underline; filled background when active */
.ds-tab--pill {
  border-bottom: none;
  padding: 0 var(--sp-3);
  height: var(--btn-h);
  border: 1px solid transparent;
}
.ds-tab--pill:hover  { color: var(--text-bright); }
.ds-tab--pill.active {
  color: var(--text-bright);
  border-color: var(--border2);
  background: var(--surface2);
}


/* ─── CHIP ───────────────────────────────────────────────────────────────────
   Inline tags, badges, and category labels.

   Two shape variants:
     (default)        border-radius: 3px — for categories, keywords, metadata
     .ds-chip--type   border-radius: 100px (pill) — for entity-type labels

   Interactive variants:
     .ds-chip--link   cursor pointer, hover accent
     .ds-chip--accent accent-blue color (topic/category labels)

   Entity-type color variants:
     .ds-chip--person / --location / --org / --program / --concept / --thread / --case / --doc

   Size:
     .ds-chip--sm     smaller (8px font, 1px 6px padding)
     .ds-chip--lg     larger (11px font, 5px 12px padding)
   ─────────────────────────────────────────────────────────────────────────── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 2px; /* 1px extra top compensates Courier New cap-height offset */
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  border-radius: var(--radius);
  cursor: default;
  transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
  user-select: none;
  vertical-align: middle;
}

/* Pill shape — for entity-type labels (PERSON, ORGANIZATION, etc.) */
.ds-chip--type { border-radius: var(--radius-pill); letter-spacing: 1.5px; }

/* Accent — blue border + text (topic / category labels) */
.ds-chip--accent {
  background: rgba(74,158,255,0.06);
  border-color: rgba(74,158,255,0.25);
  color: var(--accent);
}

/* Stat — dimmer, for count metadata like "10 docs", "229 events" */
.ds-chip--stat {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: none;
}

/* Interactive */
.ds-chip--link,
.ds-chip[onclick]         { cursor: pointer; }
.ds-chip--link:hover,
.ds-chip[onclick]:hover   { border-color: var(--accent); color: var(--accent); background: rgba(74,158,255,0.08); }
.ds-chip--accent.ds-chip--link:hover,
.ds-chip--accent[onclick]:hover { border-color: var(--accent); background: rgba(74,158,255,0.14); }

.ds-chip.active {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(129,140,248,0.08);
}

/* Entity-type semantic colors */
.ds-chip--person   { border-color: rgba(192,132,252,0.35); color: #c084fc; background: rgba(192,132,252,0.06); }
.ds-chip--location { border-color: rgba(74,158,255,0.35);  color: #4a9eff; background: rgba(74,158,255,0.06);  }
.ds-chip--org      { border-color: rgba(129,140,248,0.35); color: #818cf8; background: rgba(129,140,248,0.06); }
.ds-chip--program  { border-color: rgba(52,211,153,0.35);  color: #34d399; background: rgba(52,211,153,0.06);  }
.ds-chip--concept  { border-color: rgba(251,191,36,0.35);  color: #fbbf24; background: rgba(251,191,36,0.06);  }
.ds-chip--thread   { border-color: rgba(74,158,255,0.35);  color: #4a9eff; background: rgba(74,158,255,0.06);  }
.ds-chip--case     { border-color: rgba(255,107,53,0.35);  color: #ff6b35; background: rgba(255,107,53,0.06);  }
.ds-chip--doc      { border-color: rgba(148,163,184,0.35); color: #94a3b8; background: rgba(148,163,184,0.06); }

/* Hover strengthen for semantic clickable chips */
.ds-chip--person.ds-chip--link:hover,
.ds-chip--person[onclick]:hover     { border-color: #c084fc; background: rgba(192,132,252,0.14); }
.ds-chip--location.ds-chip--link:hover,
.ds-chip--location[onclick]:hover   { border-color: #4a9eff; background: rgba(74,158,255,0.14); }
.ds-chip--org.ds-chip--link:hover,
.ds-chip--org[onclick]:hover        { border-color: #818cf8; background: rgba(129,140,248,0.14); }
.ds-chip--program.ds-chip--link:hover,
.ds-chip--program[onclick]:hover    { border-color: #34d399; background: rgba(52,211,153,0.14); }
.ds-chip--concept.ds-chip--link:hover,
.ds-chip--concept[onclick]:hover    { border-color: #fbbf24; background: rgba(251,191,36,0.14); }
.ds-chip--thread.ds-chip--link:hover,
.ds-chip--thread[onclick]:hover     { border-color: #4a9eff; background: rgba(74,158,255,0.14); }

/* Size modifiers */
.ds-chip--sm { padding: 1px 6px; font-size: var(--text-2xs); gap: 3px; }
.ds-chip--lg { padding: 5px 12px; font-size: var(--text-base); gap: 5px; }


/* ─── LABEL ──────────────────────────────────────────────────────────────────
   Uppercase, letter-spaced section and field labels.
   Used above chip groups, above form fields, as section headings inside panels.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.ds-label--bright  { color: var(--text-bright); }
.ds-label--accent  { color: var(--accent); }
.ds-label--accent2 { color: var(--accent2); }
.ds-label--inline  { display: inline; margin-bottom: 0; }
.ds-label--tight   { margin-bottom: var(--sp-1); }
.ds-label--lg      { font-size: var(--text-xs); letter-spacing: var(--ls-normal); }


/* ─── INPUT & TEXTAREA ───────────────────────────────────────────────────────
   Standard form controls. Consistent height, focus ring, placeholder color.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-input {
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--sp-3);
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text-bright);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--t-base);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.ds-input:focus          { border-color: var(--accent2); }
.ds-input::placeholder   { color: var(--text-dim); }
.ds-input:disabled       { opacity: 0.5; cursor: not-allowed; }
.ds-input--sm            { height: var(--input-h-sm); font-size: var(--text-sm); }

.ds-textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text-bright);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.6;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--t-base);
}
.ds-textarea:focus        { border-color: var(--accent2); }
.ds-textarea::placeholder { color: var(--text-dim); }


/* ─── ICON ───────────────────────────────────────────────────────────────────
   Consistent Lucide icon sizing. Apply to the <i data-lucide="..."> element.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-icon    { width: 14px; height: 14px; flex-shrink: 0; }
.ds-icon-sm { width: 12px; height: 12px; flex-shrink: 0; }
.ds-icon-lg { width: 16px; height: 16px; flex-shrink: 0; }
.ds-icon-xl { width: 20px; height: 20px; flex-shrink: 0; }


/* ─── PANEL / DRAWER ─────────────────────────────────────────────────────────
   Side panels and mobile drawers. On desktop: side panel.
   On mobile (≤768px): .dn-drawer handles bottom sheet animation via nav.js.

   .ds-panel         — generic side panel shell
   .ds-panel__head   — sticky header row (title + close button)
   .ds-panel__body   — scrollable content area
   ─────────────────────────────────────────────────────────────────────────── */
.ds-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.ds-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: var(--btn-h-lg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ds-panel__title {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}
.ds-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
}
.ds-panel__section {
  margin-bottom: var(--sp-5);
}


/* ─── DIVIDER ────────────────────────────────────────────────────────────────
   Thin separator, horizontal or vertical.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-4) 0;
}
.ds-divider--vert {
  border-top: none;
  border-left: 1px solid var(--border);
  margin: 0 var(--sp-2);
  align-self: stretch;
}


/* ─── TOOLBAR ROW ────────────────────────────────────────────────────────────
   Shared top toolbar pattern (used in pinboard, doc viewer, etc.)
   ─────────────────────────────────────────────────────────────────────────── */
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--btn-h-lg);
  padding: 0 var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ds-toolbar__sep {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: var(--sp-2) var(--sp-2);
  flex-shrink: 0;
}
.ds-toolbar__spacer { flex: 1; }
.ds-toolbar__status {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-normal);
  color: var(--text-dim);
  white-space: nowrap;
}


/* ─── MODAL ──────────────────────────────────────────────────────────────────
   Standard modal dialog pattern, built from .pb-modal (the app's best example).

   Usage:
     <div class="ds-overlay" onclick="close()">
       <div class="ds-modal" onclick="event.stopPropagation()">
         <div class="ds-modal__head">
           <span class="ds-modal__title">Modal Title</span>
           <button class="ds-modal__close" onclick="close()">&times;</button>
         </div>
         <div class="ds-modal__body">…content…</div>
         <div class="ds-modal__foot">
           <button class="ds-btn">Cancel</button>
           <button class="ds-btn ds-btn--primary">Save</button>
         </div>
       </div>
     </div>

   Sizes:
     (default)      420px wide
     .ds-modal--sm  320px
     .ds-modal--lg  600px
     .ds-modal--xl  900px (doc viewer, full-content modals)
   ─────────────────────────────────────────────────────────────────────────── */
.ds-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.ds-modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-6);
  width: 420px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
}
.ds-modal--sm  { width: 320px; }
.ds-modal--lg  { width: 600px; }
.ds-modal--xl  { width: 900px; max-height: 92vh; }
.ds-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.ds-modal__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-bright);
}
.ds-modal__close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  transition: color var(--t-base);
  flex-shrink: 0;
}
.ds-modal__close:hover { color: var(--text-bright); }
.ds-modal__body  { flex: 1; }
.ds-modal__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: var(--sp-2);
}
.ds-modal__foot {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  flex-shrink: 0;
}


/* ─── CARD SHELL ─────────────────────────────────────────────────────────────
   Base surface for content cards. Not pinboard canvas items — those have their
   own system. These are library result cards, case cards, briefing items, etc.

   Variants:
     .ds-card--link    clickable, hover border lift
     .ds-card--accent  hover border = accent2
     .ds-card--flush   no padding (content manages its own)
   ─────────────────────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.ds-card--link        { cursor: pointer; }
.ds-card--link:hover  { border-color: var(--border2); box-shadow: var(--shadow-sm); }
.ds-card--accent:hover { border-color: var(--accent2); }
.ds-card--flush       { padding: 0; }


/* ─── EMPTY STATE ────────────────────────────────────────────────────────────
   Centered "no results" or "get started" states.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}
.ds-empty__icon { color: var(--text-dim); opacity: 0.5; }
.ds-empty__title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  color: var(--text-bright);
  letter-spacing: var(--ls-normal);
}
.ds-empty__body {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 400px;
}


/* ─── TOAST / INLINE FEEDBACK ────────────────────────────────────────────────
   One-line feedback messages. Not modals.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-normal);
  pointer-events: none;
}
.ds-toast--success { border-color: rgba(52,211,153,0.4); color: var(--green); }
.ds-toast--warn    { border-color: rgba(251,191,36,0.4);  color: var(--warning); }
.ds-toast--error   { border-color: rgba(255,107,53,0.4);  color: var(--danger); }


/* ─── PIN-TO-BOARD MODAL ─────────────────────────────────────────────────────
   Shared across doc.html, briefings.html, entity.html, graph.html, yt-viewer.html.
   Replaces the duplicated inline style blocks on #pin-modal-overlay.
   ─────────────────────────────────────────────────────────────────────────── */
.pin-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}
.pin-modal-overlay.open { display: flex; }
.pin-modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  width: 380px;
  max-width: 95vw;
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}


/* ─── UTILITY CLASSES ────────────────────────────────────────────────────────
   Misc helpers used everywhere. Not a full utility framework — only what we
   actually use repeatedly.
   ─────────────────────────────────────────────────────────────────────────── */

/* Flex row with standard gap */
.ds-row          { display: flex; align-items: center; gap: var(--sp-2); }
.ds-row--gap1    { gap: var(--sp-1); }
.ds-row--gap3    { gap: var(--sp-3); }
.ds-row--gap4    { gap: var(--sp-4); }
.ds-row--between { justify-content: space-between; }
.ds-row--wrap    { flex-wrap: wrap; }

/* Chip group (wrapping row of chips) */
.ds-chips        { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ds-chips--gap2  { gap: var(--sp-2); }

/* Text utilities */
.ds-text-dim    { color: var(--text-dim)    !important; }
.ds-text-bright { color: var(--text-bright) !important; }
.ds-text-accent { color: var(--accent)      !important; }
.ds-text-xs     { font-size: var(--text-xs)   !important; }
.ds-text-sm     { font-size: var(--text-sm)   !important; }
.ds-text-base   { font-size: var(--text-base) !important; }
.ds-text-md     { font-size: var(--text-md)   !important; }
.ds-mono        { font-family: var(--font-ui) !important; }
.ds-uppercase   { text-transform: uppercase; letter-spacing: var(--ls-normal); }
.ds-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ─── SHARE SHEET ────────────────────────────────────────────────────────────
   Universal share bottom-sheet triggered by openShareSheet().
   Injected into DOM by nav.js on first use.
   ─────────────────────────────────────────────────────────────────────────── */
#ds-share-overlay {
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
#ds-share-sheet {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
#ds-share-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
#ds-share-title {
  font-family: var(--font-ui); font-size: var(--text-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-dim);
}
#ds-share-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 16px; cursor: pointer; line-height: 1;
  padding: 2px 4px;
}
#ds-share-close:hover { color: var(--text-bright); }
#ds-share-url-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
#ds-share-url-text {
  flex: 1; font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--text-dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-share-btn-copy {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border: 1px solid var(--border2);
  background: none; color: var(--text-dim); font-family: var(--font-ui);
  font-size: var(--text-xs); letter-spacing: var(--ls-normal);
  text-transform: uppercase; cursor: pointer; border-radius: var(--radius);
  transition: border-color var(--t-base), color var(--t-base);
  white-space: nowrap; flex-shrink: 0;
}
.ds-share-btn-copy:hover { border-color: var(--accent2); color: var(--accent2); }
.ds-share-btn-copy.copied { color: var(--green); border-color: rgba(52,211,153,0.5); }
#ds-share-platforms {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  flex-wrap: wrap;
}
.ds-share-platform {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); flex: 1; min-width: 60px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-2);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base);
  font-family: var(--font-ui); color: var(--text-dim);
}
.ds-share-platform:hover { border-color: var(--border2); background: var(--surface2); color: var(--text-bright); }
.ds-share-platform-icon { font-size: 20px; line-height: 1; }
.ds-share-platform-label { font-size: var(--text-2xs); letter-spacing: var(--ls-tight); text-transform: uppercase; }


/* ─── RESIZABLE SIDEBAR ──────────────────────────────────────────────────────
   Reusable collapsible + resizable sidebar pattern.

   HTML structure:
     <aside class="ds-sidebar" id="my-sidebar" data-min-width="160" data-max-width="480">
       …sidebar content…
     </aside>
     <div class="ds-sidebar-edge" data-sidebar="my-sidebar">
       <button class="ds-sidebar-toggle" onclick="dsSidebarToggle('my-sidebar')" title="Collapse">‹</button>
       <div class="ds-sidebar-handle" title="Drag to resize"></div>
     </div>

   Parent container must be display:flex; flex-direction:row (or use .ds-layout-split).
   Mobile: add .dn-drawer to .ds-sidebar for bottom-sheet; .ds-sidebar-edge auto-hides.
   Collapse/resize JS is initialized by nav.js on DOMContentLoaded.
   ─────────────────────────────────────────────────────────────────────────── */

/* Horizontal split layout for sidebar + content */
.ds-layout-split {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.ds-sidebar {
  width: var(--ds-sidebar-w, 260px);
  min-width: 0;
  background: var(--surface);
  border-right: none; /* edge strip provides the visual border */
  overflow-x: hidden; /* allow vertical scroll; collapse is handled via inline style */
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}
/* Collapsed state managed via inline styles by dsSidebarToggle() in nav.js */

/* Edge strip: sits between sidebar and content, provides border + controls */
.ds-sidebar-edge {
  width: 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  z-index: 10;
  position: relative;
}
/* Toggle button — takes MOST of the edge height, click ONLY to collapse/expand */
.ds-sidebar-toggle {
  width: 20px;
  flex: 1;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), color var(--t-base);
  font-family: var(--font-ui);
  padding: 0;
  user-select: none;
}
.ds-sidebar-toggle:hover { background: var(--surface2); color: var(--accent); }

/* Resize handle — small fixed zone at the BOTTOM, drag ONLY to resize */
.ds-sidebar-handle {
  width: 20px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  color: var(--border2);
  transition: background var(--t-base), color var(--t-base);
  user-select: none;
}
.ds-sidebar-handle:hover { background: var(--surface2); }
/* Grip dots */
.ds-sidebar-handle::before {
  content: '';
  display: block;
  width: 3px;
  height: 16px;
  background: repeating-linear-gradient(
    to bottom,
    var(--border2) 0px, var(--border2) 2px,
    transparent 2px, transparent 4px
  );
  border-radius: 1px;
  opacity: 0.6;
}
.ds-sidebar-handle:hover::before { opacity: 1; }

/* Right-panel variant: edge sits to the LEFT of a right sidecar.
   Border flips to left; toggle arrow is › (close) instead of ‹ (collapse).
   Visibility managed by JS (show when sidecar opens, hide when it closes). */
.ds-sidebar-edge--right {
  border-right: none;
  border-left: 1px solid var(--border);
}

/* Hide edge strip on mobile — drawers use pill handle instead */
@media (max-width: 768px) {
  .ds-sidebar-edge { display: none; }
}

/* ─── TYPOGRAPHY CLASSES ─────────────────────────────────────────────────────
   Use these everywhere instead of inline font-size / color / letter-spacing.
   Never hardcode hex color values — always use a var() from tokens.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Eyebrow — small ALL-CAPS label above a heading */
.dn-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);    /* 11px */
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Label — compact uppercase label, slightly larger than eyebrow */
.dn-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);    /* 12px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Body small — captions, secondary content */
.dn-body-sm {
  font-family: var(--font-ui);
  font-size: var(--text-sm);    /* 12px */
  color: var(--text);
  line-height: 1.7;
}

/* Body — primary reading text */
.dn-body {
  font-family: var(--font-ui);
  font-size: var(--text-base);  /* 13px */
  color: var(--text);
  line-height: 1.75;
}

/* Title — panel/section headings */
.dn-title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);    /* 16px */
  font-weight: bold;
  color: var(--text-bright);
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* Heading — page-level headings */
.dn-heading {
  font-family: var(--font-ui);
  font-size: var(--text-xl);    /* 20px */
  font-weight: bold;
  color: var(--text-bright);
  letter-spacing: 1px;
  line-height: 1.25;
}

/* Hero — large display headings */
.dn-hero {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);   /* 26px */
  font-weight: bold;
  color: var(--text-bright);
  letter-spacing: 1px;
  line-height: 1.2;
}

/* Color utilities */
.dn-muted  { color: var(--text-dim) !important; }
.dn-bright { color: var(--text-bright) !important; }
.dn-accent { color: var(--accent) !important; }
.dn-danger { color: var(--danger) !important; }
.dn-green  { color: var(--green) !important; }