/* v2026-05-06-inset-docs-shell: Fluid-style inset left TOC + centered prose + right rail */
/* Internal Feature-Knowledge Portal stylesheet
 * Extracted from Benja's Frequency Capping HTML proof (2026-04-27).
 * Used by both pre-built (curated) and Bilbo-auto-generated dossiers.
 * Portal chrome (topbar, sidebar, search) is layered on top via index.html / dossier-wrapper.
 */

:root {
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  /* Internal Knowledge portal palette — blue accent (was EXADS orange).
     Variable names retained to avoid sweeping rename; values flipped so every
     existing `var(--orange)` consumer renders blue without further edits. */
  --orange: #1E5BB8; --orange-light: #EEF4FB; --orange-dark: #164380;
  --bg: #FFFFFF; --bg-secondary: #F8F9FA; --bg-tertiary: #F0F2F5;
  --sidebar-bg: #FAFAFA; --topbar-bg: #FFFFFF;
  --border: #E5E7EB; --border-strong: #D1D5DB;
  --text: #111827; --text-secondary: #4B5563; --text-muted: #6B7280; --text-link: #1E5BB8; --text-link-hover: #164380;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
  --radius: 8px; --radius-sm: 5px; --radius-lg: 12px;
  --sidebar-w: 248px; --topbar-h: 56px; --right-rail-w: 220px; --docs-shell-max: 1360px; --docs-shell-gutter: max(48px, calc((100vw - var(--docs-shell-max)) / 2)); --transition: 0.18s ease;
  --dossier-main-max: 1320px;
  --dossier-main-pad-x: clamp(28px, 3vw, 52px);
  --dossier-reading-max: 75ch;
  /* Anchor-jump offset: topbar (56px) + sticky-part indicator (32px) + 24px breathing
   * = 112px. Flat px (not calc) so the JS hash handlers in dossier_renderer.py can
   * parseFloat() this directly via getComputedStyle. Single source of truth shared
   * by CSS scroll-padding/scroll-margin AND those JS handlers. If --topbar-h ever
   * changes, update this number too. */
  --anchor-offset: 112px;
}
[data-theme="dark"] {
  --bg: #0F1117; --bg-secondary: #171B24; --bg-tertiary: #1E2330;
  --sidebar-bg: #141720; --topbar-bg: #0F1117;
  --border: #252A36; --border-strong: #323845;
  --text: #E8EAF0; --text-secondary: #9AA0B4; --text-muted: #858CA0; --text-link: #6FA4E6; --text-link-hover: #94BCEC;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
  --orange-light: #1E2939;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 15px;
  /* Anchor jumps must clear topbar (56px) + sticky-part indicator (32px). Uses the
   * shared --anchor-offset variable so CSS and JS hash handlers stay aligned. */
  scroll-padding-top: var(--anchor-offset);
}
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* Portal topbar */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--topbar-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 16px; z-index: 200; box-shadow: var(--shadow-sm); }
#topbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#topbar-logo { width: 28px; height: 28px; display: block; }
.brand-link { display: flex; align-items: center; text-decoration: none; }
.topbar-nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.topbar-nav-link:hover { background: var(--bg-secondary); color: var(--text); }

/* Topbar nav-menu dropdown — replaces a row of inline links. <details>-based
 * so it works without JS and closes on outside click via global handler.
 * Explicitly overrides the generic `details { overflow:hidden; border:1px ... }`
 * rule defined later in this file (intended for in-body collapsibles) — that
 * rule clips the absolutely-positioned panel. */
.topbar-menu {
  position: relative;
  display: inline-block;
  overflow: visible;
  border: 0;
  margin: 0;
  box-shadow: none;
}
.topbar-menu[open] { box-shadow: none; }
/* Explicitly override the generic `summary { padding: 12px 16px; display: flex; ... }`
 * rule defined later in this file (it's intended for the markdown-converted
 * <details> blocks inside dossier bodies). Without these overrides the topbar
 * dropdown summary inherits 12px/16px padding and the '›' ::after marker. */
.topbar-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.topbar-menu summary::-webkit-details-marker { display: none; }
.topbar-menu summary::after { content: none; }  /* kill the generic '›' marker */
.topbar-menu summary:hover { background: var(--bg-tertiary); color: var(--text); border-color: var(--border-strong); }
.topbar-menu[open] summary { background: var(--bg-tertiary); color: var(--text); border-color: var(--accent); }
.topbar-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  z-index: 200;
}
.topbar-menu-panel a {
  display: block;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.topbar-menu-panel a:hover { background: var(--bg-secondary); color: var(--text); }
.topbar-menu-panel hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
/* Menu-injected items (Toggle dark mode / Switch view / Log out) — these now
 * live in the menu on every viewport. The class name "mobile-only" is kept
 * for backwards compat with the topbar-mobile.js selectors but the items
 * are visible on desktop too. The standalone topbar buttons (#dark-toggle,
 * #admin-view-toggle, #admin-auth-btn) are CSS-hidden everywhere — the menu
 * is now the single source of truth for these actions.
 *
 * NOTE: no `!important` on the show-rule. The script selectively hides items
 * via inline `style.display = 'none'` (e.g. hide the view-toggle when whoami
 * says role=exo). Inline styles win over class rules without `!important`. */
.topbar-menu-mobile-only { display: block; }
.topbar-menu-mobile-only-divider { display: block; }
/* The standalone topbar buttons are hidden everywhere — menu is the single
 * surface for these actions. Originally they were desktop-only with the menu
 * picking up on mobile; the duplication added clutter. */
#dark-toggle,
#admin-view-toggle,
#admin-auth-btn { display: none !important; }

/* Topbar admin controls (LOGOUT, admin/user view toggle). Match the
 * topbar-nav-link visual weight so they don't read as primary CTAs. */
#admin-auth-btn,
#admin-view-toggle {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
#admin-auth-btn:hover,
#admin-view-toggle:hover { background: var(--bg-tertiary); color: var(--text); border-color: var(--border-strong); }

/* User-preview state: filled accent background + white text, so the
 * button is unmistakably "you're in preview mode" without needing a
 * separate banner stacked on top of the topbar. */
#admin-view-toggle.active {
  color: #fff;
  background: var(--accent, #9a7a1a);
  border-color: var(--accent, #9a7a1a);
}
#admin-view-toggle.active:hover {
  background: var(--accent-dim, #b8960f);
  border-color: var(--accent-dim, #b8960f);
  color: #fff;
}
/* CTAs — used on home, answers, dossier QA panel + footer */
.cta-primary, .cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 1px 2px rgba(30,91,184,0.18);
}
.cta-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  box-shadow: 0 6px 14px rgba(30,91,184,0.28), 0 2px 4px rgba(30,91,184,0.14);
  transform: translateY(-1px);
}
.cta-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(30,91,184,0.2);
}

/* Dossier text annotations — human reader flags attached to selected text. */
.annotation-highlight {
  background: rgba(245, 158, 11, 0.22);
  border-bottom: 2px solid rgba(217, 119, 6, 0.62);
  border-radius: 2px;
  cursor: help;
}
[data-theme="dark"] .annotation-highlight {
  background: rgba(245, 158, 11, 0.24);
  border-bottom-color: rgba(251, 191, 36, 0.72);
}
#annotation-popover {
  position: fixed;
  z-index: 260;
  display: none;
  padding: 8px;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
}
#annotation-popover[style*="block"] {
  display: flex !important;
}
#annotation-popover button {
  white-space: nowrap;
}
#annotation-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 240;
  width: min(380px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 100px));
  display: none;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
#annotation-panel.open {
  display: flex;
}
.annotation-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.annotation-panel-head strong {
  font-size: 13px;
}
.annotation-panel-head button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  padding: 2px 6px;
}
.annotation-list {
  overflow: auto;
  padding: 10px;
}
.annotation-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 2px;
}
.annotation-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--bg);
}
.annotation-card.open {
  border-left: 3px solid #D97706;
}
.annotation-card.resolved {
  opacity: 0.68;
  border-left: 3px solid #059669;
}
.annotation-card blockquote {
  margin: 0 0 8px;
  padding: 0 0 0 10px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.annotation-card p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
}
.annotation-kind {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
}
.annotation-kind.glossary-term {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}
[data-theme="dark"] .annotation-kind {
  color: #fbbf24;
}
[data-theme="dark"] .annotation-kind.glossary-term {
  color: #93c5fd;
}
.annotation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}
.annotation-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}
.annotation-card-actions button {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.annotation-card-actions button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.annotation-toolbar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 230;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.annotation-toolbar.has-items::after {
  content: attr(data-count);
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #D97706;
  color: #fff;
  font-size: 11px;
}
#annotation-modal {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 17, 23, 0.42);
}
#annotation-modal.open {
  display: flex;
}
.annotation-modal-card {
  width: min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.annotation-modal-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.annotation-selected-preview {
  max-height: 140px;
  overflow: auto;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.annotation-kind-field {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.annotation-kind-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.annotation-modal-card textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.annotation-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
/* Force white label on .cta-primary even when used as an <a>. The global
 * `a:hover { color: var(--text-link-hover) }` rule (specificity 0,1,1) was
 * winning over `.cta-primary { color: #fff }` (0,1,0) on hover, turning the
 * "📖 Open the dossier" link's text dark-blue on the blue button — invisible.
 * Adding `a.cta-primary` (specificity 0,1,1) and the hover/visited/active
 * variants keeps the label white in every link state. */
a.cta-primary,
a.cta-primary:hover,
a.cta-primary:visited,
a.cta-primary:active,
a.cta-primary:focus { color: #fff; text-decoration: none; }
.cta-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--text-link);
  color: var(--text-link);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.cta-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}
.cta-primary:focus-visible, .cta-secondary:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 2px;
}
.cta-primary:disabled, .cta-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.cta-secondary.fb-active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 1px 2px rgba(30,91,184,0.18);
}
.cta-secondary.fb-active:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
}

/* Inline source-type favicons next to citations (📑 Confluence, 🎫 Jira, 💬 Slack, etc.) */
.src-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin: 0 4px 0 1px;
  border-radius: 2px;
  display: inline-block;
  object-fit: contain;
}

/* Product favicon next to the leading dossier-title H1 (identity/continuity
   with /allitems.html card pills). Sized relative to the H1 font so it scales
   if the H1 size ever changes. */
.dossier-title-favicon {
  height: 0.85em;
  width: auto;
  vertical-align: -2px;
  margin-right: 14px;
}

/* Section headers (home page sections) */
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 28px 0 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.section-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); }
.section-link {
  font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none;
  transition: color var(--transition);
}
.section-link:hover { color: var(--text-link); }

/* Dossier grid (home page) */
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
/* In-flight queue (homepage "⚙️ In progress" banner) — shows dossiers
   currently being built / reviewed. Hidden when empty. Polls every 30s. */
.section-subtle {
  font-size: 12px; color: var(--text-secondary); font-weight: 400;
  margin-left: 8px;
}
.in-flight-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.in-flight-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--orange-light, rgba(255, 165, 0, 0.08));
  border: 1px solid var(--border);
  border-left: 3px solid #f5a623;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.in-flight-icon { font-size: 20px; flex-shrink: 0; }
.in-flight-body { flex: 1; min-width: 0; }
.in-flight-title { font-weight: 600; color: var(--text); margin-bottom: 2px; text-transform: capitalize; }
.in-flight-state { font-size: 12px; color: var(--text-secondary); }

.dossier-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 18px 14px;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s;
  position: relative;
}
.dossier-card:hover {
  border-color: var(--text-link);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.dossier-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--orange-light), rgba(30,91,184,0.06));
  border-radius: 8px; margin-bottom: 10px; font-size: 16px;
}
.dossier-card-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text); margin-bottom: 6px;
  text-transform: capitalize;
}
.dossier-card-preview {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 12px; min-height: 38px;
}
.dossier-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-muted);
}
.dossier-card-meta .pill {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
}
.dossier-card-meta .pill.curated { color: #065F46; background: #D1FAE5; }
.dossier-card-meta .pill.permanent { color: #7c2d12; background: #fde68a; }
.dossier-card-meta .pill.auto { color: var(--orange); background: var(--orange-light); }

/* Quick Answer compact list (home page) */
.qa-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.qa-disclosure {
  min-width: 0;
}
.qa-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none; color: inherit;
  transition: background var(--transition), border-color var(--transition);
}
.qa-row:hover { background: var(--bg-tertiary); border-color: var(--border-strong); }
.qa-row-icon { font-size: 13px; opacity: 0.6; }
.qa-row-question {
  flex: 1; font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: capitalize;
}
.qa-row-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.qa-disclosure-body {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .qa-list {
    grid-template-columns: 1fr;
  }
}
#topbar-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; }
#topbar-title a { color: inherit; text-decoration: none; }
#topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.curation-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; border-radius: 4px; padding: 3px 8px; text-transform: uppercase; }
.curation-badge.curated { color: #065F46; background: #D1FAE5; border: 1px solid rgba(6,95,70,0.2); }
.curation-badge.auto { color: var(--orange); background: var(--orange-light); border: 1px solid rgba(30,91,184,0.2); }
.curation-badge.permanent { color: #1E40AF; background: #DBEAFE; border: 1px solid rgba(30,64,175,0.2); }
[data-theme="dark"] .curation-badge.curated { color: #6EE7B7; background: #064E3B; }
[data-theme="dark"] .curation-badge.permanent { color: #93C5FD; background: #1E3A5F; }
#dark-toggle { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: background var(--transition), border-color var(--transition), transform 0.2s; flex-shrink: 0; }
#dark-toggle:hover { background: var(--bg-tertiary); border-color: var(--border-strong); transform: scale(1.05); }

/* Search box */
#search-wrap { position: relative; }
#search-input { width: 320px; padding: 8px 14px 8px 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text); font-family: var(--font); font-size: 13px; outline: none; transition: border-color var(--transition), box-shadow var(--transition), width var(--transition); }
#search-input:focus { border-color: var(--text-link); box-shadow: 0 0 0 3px rgba(30,91,184,0.12); width: 380px; }
#search-input::placeholder { color: var(--text-muted); }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 14px; }
#search-results { display: none; position: absolute; top: 44px; left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 420px; overflow-y: auto; z-index: 400; min-width: 380px; }
#search-results.visible { display: block; }
.sr-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px; }
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--bg-secondary); }
.sr-title { font-weight: 600; color: var(--text); display: block; }
.sr-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Per-dossier sidebar (TOC navigation) */
#sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: var(--docs-shell-gutter);
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 0 40px;
  z-index: 90;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.toc-group { margin-bottom: 4px; }
.toc-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); padding: 10px 20px 4px; }
.toc-link {
  display: block;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  line-height: 1.4;
}
.toc-link:hover { color: var(--text); background: var(--bg-tertiary); text-decoration: none; }
.toc-link.active { color: var(--text-link); border-left-color: var(--text-link); background: #EEF4FB; font-weight: 600; }
.toc-sub {
  display: block;
  padding: 4px 20px 4px 32px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  line-height: 1.4;
}
.toc-sub:hover { color: var(--text-secondary); background: var(--bg-tertiary); text-decoration: none; }
.toc-sub.active { color: var(--text-link); border-left-color: var(--text-link); background: #EEF4FB; }
.toc-divider { height: 1px; background: var(--border); margin: 8px 20px; }

/* Audience quick-jump pills (top of sidebar) */
.audience-jump { padding: 12px 16px 4px; }
.audience-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pill {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 10px;
  font-size: 12px; font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
}
.pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.pill-cs    { background: var(--orange-light); color: var(--orange); border-color: rgba(30,91,184,0.3); }
.pill-cs:hover    { background: var(--orange); color: #fff; border-color: var(--orange); }
.pill-sales { background: #DBEAFE; color: #1E40AF; border-color: rgba(30,64,175,0.3); }
.pill-sales:hover { background: #1E40AF; color: #fff; border-color: #1E40AF; }
.pill-dev   { background: #EDE9FE; color: #5B21B6; border-color: rgba(91,33,182,0.3); }
.pill-dev:hover   { background: #5B21B6; color: #fff; border-color: #5B21B6; }
.pill-pm    { background: #D1FAE5; color: #065F46; border-color: rgba(6,95,70,0.3); }
.pill-pm:hover    { background: #065F46; color: #fff; border-color: #065F46; }
[data-theme="dark"] .pill-cs    { background: #2A1A12; color: #FF9A6C; }
[data-theme="dark"] .pill-sales { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark"] .pill-dev   { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .pill-pm    { background: #064E3B; color: #6EE7B7; }

/* Main */
#main {
  padding-top: calc(var(--topbar-h) + 32px);
  padding-bottom: 100px;
  max-width: var(--dossier-main-max);
  padding-left: var(--dossier-main-pad-x);
  padding-right: var(--dossier-main-pad-x);
}
/* When sidebar is present, push main content right */
body.has-sidebar #main {
  margin-left: calc(var(--docs-shell-gutter) + var(--sidebar-w));
  margin-right: calc(var(--docs-shell-gutter) + var(--right-rail-w));
  max-width: calc(100vw - (2 * var(--docs-shell-gutter)) - var(--sidebar-w) - var(--right-rail-w));
}
body.has-sidebar #topbar {
  padding-left: calc(var(--docs-shell-gutter) + var(--sidebar-w) + 20px);
  padding-right: calc(var(--docs-shell-gutter) + 20px);
}
body:not(.has-sidebar) #main { margin: 0 auto; }

#right-rail,
body.has-sidebar::after {
  content: "";
  position: fixed;
  top: var(--topbar-h);
  right: var(--docs-shell-gutter);
  bottom: 0;
  width: var(--right-rail-w);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 90;
}

/* Sections from Benja's design */
.part { margin-bottom: 56px; scroll-margin-top: var(--anchor-offset); }
.part-header { margin-bottom: 28px; }
.part-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.part-title { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 10px; }
.part-underline { height: 3px; width: 48px; background: var(--orange); border-radius: 2px; }

h1, h2, h3, h4 { color: var(--text); }

/* Per-element scroll-margin so anchored headings clear topbar + sticky-part overlay,
 * regardless of which element is the scroll container. Belt-and-braces with the
 * html { scroll-padding-top } rule. */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: var(--anchor-offset);
}

/* Destination chip in Latest News priority-change bullets — bolds the "new" priority
 * in `priority {old} → {new}` so the movement direction pops at a glance. Applied to
 * the second priority chip via the `destination=True` flag in _priority_chip(). */
.priority-destination { font-weight: 800; }

/* Form controls (e.g. cadence select) that are admin-only. Native :disabled
 * already greys them; this class adds consistent cursor + opacity so the
 * non-interactive affordance is unambiguous. */
.admin-disabled,
select.admin-disabled,
input.admin-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Modal — copied from feature-portal/index.html so the admin-login-modal in
 * dossier pages renders correctly. Without these rules `.modal.hidden` falls
 * back to `display: block`, leaving the modal HTML visible at the top of
 * every dossier as a stray block of text. */
.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--bg);
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-content h3 { font-size: 18px; margin-bottom: 8px; }
.modal-content p { font-size: 13px; margin-bottom: 18px; }
.modal-content label {
  display: block; font-size: 12px; font-weight: 600;
  margin-bottom: 14px;
}
.modal-content input[type="password"],
.modal-content input[type="text"], .modal-content textarea {
  width: 100%; margin-top: 6px;
  padding: 10px 12px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); outline: none;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Priority icon leads the bullet between the date and the ticket key. The
 * inner `.priority-cell::before` has `margin-right: 6px`, so the outer right
 * margin stays zero; left margin keeps a small gap from the bolded date. */
.latest-news-priority-icon { margin-left: 4px; margin-right: 0; }

/* Parenthetical ticket type label after the key (e.g. "EX-32258 (Story)").
 * Muted so it reads as metadata, not part of the summary. */
.lnt-type-label { color: var(--text-muted); font-size: 0.92em; }

/* FAQ-question literal-token wrapper. Italic styling without any padding,
 * margin, background, border, or font-style override that could amplify
 * visual spacing in a bold summary heading. Just a plain italic span. */
.faq-q-token {
  font-style: italic;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 16px; }
/* H2 — main section heading. Subtle blue under-line marks "section starts here"
   without competing with the brand-orange accent chrome. */
h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text-link);
}
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin: 28px 0 10px; }
h4 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
/* Section separator (markdown `---` → <hr>) — muted, blue-tinted */
hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
p,
ul,
ol,
blockquote,
.callout,
.plain-english-callout,
.glossary-definition-card,
.workaround,
details {
  max-width: var(--dossier-reading-max);
}
body.has-sidebar p,
body.has-sidebar ul,
body.has-sidebar ol,
body.has-sidebar blockquote,
body.has-sidebar .callout,
body.has-sidebar .plain-english-callout,
body.has-sidebar .glossary-definition-card,
body.has-sidebar .workaround,
body.has-sidebar details {
  max-width: 100%;
}
p { color: var(--text-secondary); margin-bottom: 12px; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

/* Verbatim quotes — TWO treatments depending on placement:
   1. <em class="quote-pop">"…"</em> — inline-with-prose: a box around the quote
      text only (subtle blue tint + thin border). Keeps prose flow intact but
      visually flags the verbatim section as someone-speaking.
   2. <blockquote> — standalone pull-quote: light tint + orange left-border. */
em.quote-pop {
  background: #EEF4FB;
  border: 1px solid #D6E5F5;
  padding: 1px 7px;
  border-radius: 4px;
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme='dark'] em.quote-pop {
  background: #1E2939;
  border-color: #2A3D55;
}

blockquote {
  margin: 16px 0;
  padding: 12px 18px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: 8px; }
blockquote a { color: var(--text-link); }

ul { padding-left: 0; margin: 0 0 12px; list-style: none; }
ul li { padding: 8px 0 8px 22px; position: relative; font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }
ul li::before { content: "•"; position: absolute; left: 6px; top: 7px; color: var(--orange); font-weight: 700; }
ul li + li { margin-top: 4px; }
ul li p { margin: 4px 0; }

ol { padding-left: 24px; margin: 0 0 12px; }
ol li { padding: 8px 0; font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }
ol li + li { margin-top: 4px; }
ol li p { margin: 4px 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 14px 0; border-radius: var(--radius); border: 1px solid var(--border); }
th { background: var(--bg-secondary); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-secondary); }

/* Digest tables — full grid lines for readability. Scoped to .digest-table
 * so dossier tables elsewhere keep their horizontal-only border style. */
.digest-table { border: 1px solid var(--border); }
.digest-table th, .digest-table td { border: 1px solid var(--border); }
.digest-table tr:last-child td { border-bottom: 1px solid var(--border); }

/* Code */
table,
pre,
.code-wrap,
.ticket,
#dossier-config-panel,
.dossier-footer {
  max-width: 100%;
}

/* Source-document figures (docs.exads.com diagrams hot-linked via markdown
 * image syntax). Image fills container width (like tables/code); caption is
 * anchored to the prose rail so it reads as body text. Light-bg padding keeps
 * docs.exads.com diagrams (designed for white bg) readable on dark theme. */
figure {
  margin: 24px 0;
}
/* `figure > img` (direct child only) so the renderer's auto-injected
 * <img class="src-icon"> favicons inside <figcaption> aren't caught by these
 * rules and rendered as 720px blocks. The .docs-img selector remains the
 * explicit hook for any plain image author wants styled the same way. */
figure > img,
img.docs-img {
  display: block;
  /* Cap at ~docs.exads.com content width so embeds don't dwarf the 75ch prose rail.
   * Left-aligned (margin 0, not 0 auto) so images share the same left gutter as
   * prose, callouts, tables — protects the docs-pattern visual hierarchy. */
  max-width: min(100%, 720px);
  height: auto;
  margin: 0;
  background: #fff;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
figcaption {
  display: block;
  max-width: var(--dossier-reading-max);
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
}
body.has-sidebar figcaption {
  max-width: 100%;
}
figcaption a {
  font-style: normal;
  color: var(--text-link);
}
[data-theme="dark"] figure > img,
[data-theme="dark"] img.docs-img {
  border-color: var(--border-strong);
}
.lightboxable-img {
  cursor: zoom-in;
}
.lightboxable-img:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}
body.lightbox-open {
  overflow: hidden;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(10, 12, 18, 0.88);
  color: #fff;
}
.image-lightbox.open {
  display: grid;
}
.image-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(10, 12, 18, 0.96);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.image-lightbox-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.image-lightbox-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.image-lightbox-actions button {
  min-width: 34px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.image-lightbox-actions button:hover {
  background: rgba(255,255,255,0.16);
}
.image-lightbox-stage {
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}
.image-lightbox-stage img {
  display: block;
  max-width: min(96vw, 1400px);
  max-height: none;
  width: auto;
  height: auto;
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  transition: transform 120ms ease;
}
.image-lightbox-caption {
  max-height: 92px;
  overflow: auto;
  padding: 10px 16px 14px;
  background: rgba(10, 12, 18, 0.96);
  border-top: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.78);
  font-size: 12.5px;
  line-height: 1.45;
}
pre { background: #0D1117; border-radius: var(--radius); padding: 16px 20px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: #E6EDF3; border: 1px solid #30363D; margin: 14px 0; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-secondary); color: var(--text); padding: 1px 5px; border-radius: 3px; }
pre code { background: none; color: inherit; padding: 0; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; white-space: nowrap; position: relative; }
/* Instant CSS tooltip for status badges — replaces the slow native title="…" tooltip
   (the user complaint was native tooltips not appearing reliably; native has ~1.5s
   trigger delay and is suppressed if the cursor moves at all). data-tip="" hits
   instantly on hover. aria-label="" still covers screen readers. 2026-05-02. */
.badge[data-tip], .row-malformed[data-tip] { cursor: help; }
.row-malformed {
  display: inline-block;
  position: relative;
  color: #dc2626;
  font-weight: 700;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: -1px;
}
.badge[data-tip]:hover::after, .badge[data-tip]:focus-visible::after,
.row-malformed[data-tip]:hover::after, .row-malformed[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 7px 10px;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #111);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  z-index: 200;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  pointer-events: none;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.8; }
/* Suppress the leading currentColor dot on status badges — the chip background +
   text already convey the category and the bullet adds visual noise (especially
   awkward beside multi-line wrap-slash variants). Type badges keep their dot
   because it's redefined further down as the Jira SVG icon. Must come AFTER
   `.badge::before` to win the cascade — same specificity, later declaration. */
.badge-done::before, .badge-indev::before, .badge-park::before,
.badge-rfdev::before, .badge-open::before, .badge-not-prioritised::before {
  content: none;
}
/* Breathing space when multiple badges sit adjacent in a single cell */
.badge + .badge { margin-left: 6px; }
td .badge, th .badge { vertical-align: middle; }

/* Issue-type badges: render the actual EXADS Jira SVG icons in their native colours
   (red Bug, green Story, purple Epic, blue Task) so readers immediately recognize the
   type — same visual language as Jira itself. Pill chip backgrounds are tinted to match
   each icon's colour family so they harmonize. 2026-05-02. */
.badge-bug::before, .badge-story::before, .badge-epic::before, .badge-task::before,
.badge-bug-sub-task::before, .badge-qa-automation::before, .badge-sub-task::before,
.badge-infra::before, .badge-infra-sub-task::before, .badge-new-feature::before,
.badge-documentation::before, .badge-analytics::before {
  content: '';
  background-color: transparent;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
  opacity: 1;
  vertical-align: -3px;
}
.badge-bug::before           { background-image: url('/assets/jira-types/bug.svg'); }
.badge-story::before         { background-image: url('/assets/jira-types/story.svg'); }
.badge-epic::before          { background-image: url('/assets/jira-types/epic.svg'); }
.badge-task::before          { background-image: url('/assets/jira-types/task.svg'); }
.badge-bug-sub-task::before  { background-image: url('/assets/jira-types/bug-sub-task.svg'); }
.badge-sub-task::before      { background-image: url('/assets/jira-types/sub-task.svg'); }
.badge-new-feature::before   { background-image: url('/assets/jira-types/new-feature.svg'); }
.badge-documentation::before { background-image: url('/assets/jira-types/documentation.svg'); }
/* PNG variants — EXADS admin uploaded these as PNGs (not SVGs) when creating the
   custom issue-type avatars. Nginx serves with the correct MIME type from the .png
   extension; otherwise browsers refuse to render binary PNG content sniffed as image/svg+xml. */
.badge-qa-automation::before { background-image: url('/assets/jira-types/qa-automation.png'); }
.badge-infra::before         { background-image: url('/assets/jira-types/infra.png'); }
.badge-infra-sub-task::before { background-image: url('/assets/jira-types/infra-sub-task.png'); }
.badge-analytics::before     { background-image: url('/assets/jira-types/analytics-data-science.svg'); }


/* Sortable ticket tables — auto-applied by sortableTables() in inline JS */
table.sortable th { cursor: pointer; user-select: none; position: relative; }
table.sortable th:hover { background: rgba(30, 91, 184, 0.06); }
[data-theme="dark"] table.sortable th:hover { background: rgba(255, 154, 108, 0.08); }
/* Sortable column headers — keep header text + arrow together on the same line. */
table.sortable th { white-space: nowrap; }
/* Idle sort indicator — single arrow showing the DEFAULT direction the column will sort to on click.
   Date / Updated / Released etc. default to DESC (newest first); everything else defaults to ASC. */
table.sortable th[data-default-dir="asc"]::after  { content: " ↑"; }
table.sortable th[data-default-dir="desc"]::after { content: " ↓"; }
table.sortable th[data-default-dir]::after {
  margin-left: 6px;
  color: var(--orange);
  font-weight: 800;
  font-size: 0.95em;
  font-family: var(--font);
  opacity: 0.85;
}
[data-theme="dark"] table.sortable th[data-default-dir]::after { color: #FF9A6C; }
table.sortable th[data-default-dir]:hover::after { opacity: 1; }
/* Active sort — same arrow but full opacity, slightly larger */
table.sortable th.sort-asc::after  { content: " ↑"; opacity: 1; font-size: 1.05em; }
table.sortable th.sort-desc::after { content: " ↓"; opacity: 1; font-size: 1.05em; }
/* Non-sortable headers (Title / What / etc. without canonical names) — no cursor + no idle ↕ */
table.sortable th.sort-none-allowed { cursor: default; }
table.sortable th.sort-none-allowed:hover { background: transparent; }
table.sortable th.sort-none-allowed::after { content: ""; }

/* Long-content cell clamp — uses -webkit-line-clamp (well-supported now: Chrome, Safari,
   Edge, Firefox 68+) to truncate cell content to 6 lines. Wrapping in a div + line-clamp
   is the modern reliable way to clamp inside table cells (where max-height/overflow misbehave).
   Auto-applied by clampLongCells() in inline JS to "What"/"Summary"/"Title" cells with >400 chars. */
table td .clamp-wrapper {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
table td .clamp-wrapper.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.cell-expand-btn {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--orange);
  cursor: pointer;
  user-select: none;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cell-expand-btn:hover { color: var(--orange-dark); text-decoration-style: solid; }
[data-theme="dark"] .cell-expand-btn { color: #FF9A6C; }
[data-theme="dark"] .cell-expand-btn:hover { color: #FFB48F; }
/* Done is dialled back vs active states — completed/resolved is "settled context", not "alert".
   Active states (open/indev/rfdev/req) keep their alert chroma. 2026-05-02. */
/* Status badges aligned to Jira's 3 status-category palette (matches what readers see
   in EXADS Jira itself). Auto-tagged at runtime by tagStatusBadges() in inline JS —
   reads the status text content and applies status-done / status-indeterminate /
   status-new based on canonical Jira mapping. Robust: any future status name picks up
   styling automatically as long as the JS map knows the category. 2026-05-02. */

.badge.status-done {
  background: #DCFFF1;           /* DONE — Atlassian's canonical Done lozenge bg; soft green, readable */
  color: #1F845A;
}
.badge.status-indeterminate {
  background: #FFF0B3;          /* INDETERMINATE — yellow; active in-progress */
  color: #533F04;
}
.badge.status-new {
  background: #F1F2F4;          /* NEW — blue-grey; pre-development / awaiting */
  color: #44546F;
}
[data-theme="dark"] .badge.status-done {
  background: rgba(31, 132, 90, 0.18);
  color: #94E2B0;
}
[data-theme="dark"] .badge.status-indeterminate {
  background: #3D2C0F;
  color: #F5CD47;
}
[data-theme="dark"] .badge.status-new {
  background: rgba(75, 85, 99, 0.25);
  color: #B3BAC5;
}
/* Type badges: native-colour Jira icon + plain black/default text. No chip.
   Icon carries the colour signal; text stays neutral. Status badges (badge-done,
   badge-open, etc) keep their chip styling. Patrick 2026-05-02. */
.badge-bug, .badge-bug-sub-task, .badge-story, .badge-qa-automation, .badge-epic,
.badge-task, .badge-sub-task, .badge-new-feature, .badge-infra, .badge-infra-sub-task,
.badge-documentation, .badge-analytics {
  background: transparent;
  border: none;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  color: var(--text);
}
/* Status badge dark-mode rules now live with the .badge.status-* selectors above —
   per-status dark rules removed 2026-05-02 in favour of the 3-category model. */
/* Dark mode: same — text inherits default theme colour, icon carries Jira colour. */

.ticket-id { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-link); letter-spacing: 0.3px; }

/* Priority column indicators — actual EXADS Jira SVG icons (mirrored to /assets/jira-priorities/).
   JS adds .priority-{level} class to Priority cells in any ticket table; ::before pulls in
   the matching Atlassian SVG so dossiers visually match what readers see in Jira itself.
   Source markdown stays as plain text ("Critical", "High", etc.). 2026-05-02. */
.priority-cell { white-space: nowrap; }
.priority-cell::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}
.priority-critical::before   { content: url('/assets/jira-priorities/critical.svg'); }
.priority-very-high::before  { content: url('/assets/jira-priorities/very-high.svg'); }
.priority-high::before       { content: url('/assets/jira-priorities/high.svg'); }
.priority-moderate::before   { content: url('/assets/jira-priorities/moderate.svg'); }
.priority-low::before        { content: url('/assets/jira-priorities/low.svg'); }
.priority-trivial::before    { content: url('/assets/jira-priorities/trivial.svg'); }

.ticket { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); margin: 14px 0; overflow: hidden; transition: box-shadow var(--transition); box-shadow: var(--shadow-sm); }
.ticket:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.ticket-top { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ticket-id-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.ticket-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.ticket-body { padding: 12px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.workaround { background: #FFFBEB; border-left: 3px solid #F59E0B; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 12px; margin-top: 8px; font-size: 13px; color: #78350F; }
.workaround strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 3px; }
[data-theme="dark"] .workaround { background: #1C1505; color: #FCD34D; }

/* Callouts */
.callout { border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; border-left: 3px solid; font-size: 13.5px; line-height: 1.6; }
.callout strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.callout-info { background: #EFF6FF; border-color: #3B82F6; color: #1E3A5F; }
.callout-warning { background: #FFFBEB; border-color: #F59E0B; color: #78350F; }
.callout-future { background: var(--orange-light); border-color: var(--orange); color: var(--orange-dark); }
.callout-scope { background: #F5F3FF; border-color: #8B5CF6; color: #3B0764; }
[data-theme="dark"] .callout-info { background: #0F2044; color: #93C5FD; }
[data-theme="dark"] .callout-warning { background: #1C1505; color: #FCD34D; }
[data-theme="dark"] .callout-future { background: #1C0E05; color: #FF9A6C; }
[data-theme="dark"] .callout-scope { background: #1A0B2E; color: #C4B5FD; }

.warning-banner { background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: #991B1B; font-weight: 500; margin: 14px 0; display: flex; align-items: center; gap: 10px; }
[data-theme="dark"] .warning-banner { background: #450A0A; border-color: #7F1D1D; color: #FCA5A5; }

/* Collapsible details */
details { border: 1px solid var(--border); border-radius: var(--radius); margin: 8px 0; overflow: hidden; transition: box-shadow var(--transition); }
details[open] { box-shadow: var(--shadow-sm); }
summary { padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg-secondary); list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: background var(--transition); }
summary:hover { background: var(--bg-tertiary); }
summary::after { content: '›'; font-size: 18px; color: var(--text-muted); transform: rotate(90deg); transition: transform 0.2s ease; display: inline-block; }
details[open] summary::after { transform: rotate(270deg); }
summary::-webkit-details-marker { display: none; }
.faq-body { padding: 12px 16px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; background: var(--bg); border-top: 1px solid var(--border); }
.faq-source { font-size: 11px; color: var(--text-muted); margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Audience filter chips (portal-wide) */
.audience-chips { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.chip { padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; transition: all var(--transition); }
.chip:hover { background: var(--bg-tertiary); border-color: var(--border-strong); }
.chip.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.audience-section { display: block; }
.audience-section.hidden { display: none; }

/* Quick-launch tiles on landing */
.quick-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0 32px; }
.tile { padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); text-decoration: none; display: block; }
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--orange); text-decoration: none; }
.tile-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tile-meta { font-size: 11px; color: var(--text-muted); }

/* Fuzzy match candidates (shown when exact-hash misses) */
.fuzzy-card {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-secondary);
}
.fuzzy-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.fuzzy-card-head strong { font-size: 13px; }
.fuzzy-score { font-size: 11px; color: var(--text-muted); }
.fuzzy-preview { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.fuzzy-pick { font-size: 12px; padding: 5px 10px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

@media (max-width: 768px) {
  #main { padding-left: 20px; padding-right: 20px; }
  #search-input { width: 200px; }
  #search-input:focus { width: 240px; }
}

/* Plain-English callout — wraps the simpler-language sub-block in Master Overview */
.plain-english-callout {
  margin: 16px 0 24px;
  padding: 14px 18px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
}
.plain-english-callout .plain-english-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.plain-english-callout p:not(.plain-english-label) {
  margin: 0;
  color: var(--text-secondary);
  max-width: none;
}

/* Glossary tooltip — info icon next to first-mention of a jargon term per section.
   Hover OR keyboard-focus reveals the tooltip; tap toggles it on touch devices. */
.gloss-term {
  white-space: nowrap;
}
.gloss-info {
  display: inline-block;
  position: relative;
  margin-left: 3px;
  padding: 0;
  width: 14px;
  height: 14px;
  line-height: 13px;
  background: transparent;
  border: 1px solid var(--text-muted, #888);
  border-radius: 50%;
  color: var(--text-muted, #888);
  font-family: serif;
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  vertical-align: 0.05em;
  cursor: help;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.gloss-info:hover, .gloss-info:focus, .gloss-info.gloss-active {
  color: var(--orange, #d97706);
  border-color: var(--orange, #d97706);
  background: var(--bg-secondary, #f8f9fa);
  outline: none;
}
.gloss-info .gloss-icon {
  display: inline-block;
  pointer-events: none;
}
.gloss-tip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 10px 12px;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #111);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  white-space: normal;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  text-transform: none;
  letter-spacing: 0;
}
.gloss-info:hover .gloss-tip,
.gloss-info:focus .gloss-tip,
.gloss-info.gloss-active .gloss-tip {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}
.gloss-tip-term {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #888);
  margin-bottom: 4px;
}
.gloss-tip-def {
  display: block;
  color: var(--text-primary, #111);
}
/* Tooltip flip when near the top of viewport — fallback handled via JS adding .gloss-flip */
.gloss-info.gloss-flip .gloss-tip {
  bottom: auto;
  top: calc(100% + 8px);
}

/* ── UX affordances 2026-05-01 ──────────────────────────────────────── */

/* Glossary definition card — frosted-glass aesthetic: faint purple tint with
   subtle border + soft backdrop blur, so it reads as a distinct aside without
   feeling like a heavy block. Sits below the Plain English callout. */
.glossary-definition-card {
  margin: 12px 0 22px;
  padding: 12px 16px 14px;
  background: rgba(139, 92, 246, 0.045);
  border: 1px solid rgba(139, 92, 246, 0.14);
  border-left: 3px solid rgba(139, 92, 246, 0.40);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.glossary-definition-card .glossary-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.glossary-definition-card .glossary-card-head .suggest-pill.glossary {
  background: rgba(139, 92, 246, 0.18);
  color: #5B21B6;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-radius: 4px;
}
.glossary-definition-card .glossary-card-body {
  color: var(--text-secondary);
}
[data-theme="dark"] .glossary-definition-card {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(196, 181, 253, 0.32);
  border-left-color: rgba(196, 181, 253, 0.65);
}
[data-theme="dark"] .glossary-definition-card .glossary-card-head .suggest-pill.glossary {
  background: rgba(196, 181, 253, 0.2);
  color: #C4B5FD;
}

/* IAB external-link icon next to glossary terms backed by an IAB Tech Lab standard.
   Used in /glossary page (next to term H3) and in dossier glossary callouts. */
.iab-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.12);
  color: #6D28D9;
  border: 1px solid rgba(139, 92, 246, 0.30);
  text-decoration: none;
  vertical-align: middle;
  transition: background var(--transition);
}
.iab-link:hover { background: rgba(139, 92, 246, 0.20); text-decoration: none; }
[data-theme="dark"] .iab-link { background: rgba(196, 181, 253, 0.16); color: #C4B5FD; border-color: rgba(196, 181, 253, 0.36); }
[data-theme="dark"] .iab-link:hover { background: rgba(196, 181, 253, 0.26); }

.iab-divergence {
  margin-top: 8px;
  padding: 8px 12px;
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  border-radius: 4px;
  font-size: 12.5px;
  color: #78350F;
  line-height: 1.5;
}
.iab-divergence::before {
  content: "⚠ EXADS divergence from IAB: ";
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.4px;
}
[data-theme="dark"] .iab-divergence { background: #1C1505; color: #FCD34D; }

/* Per-dossier-card auto-refresh indicator — small pill inside dossier-card-meta
   on the home page. Mirrors the dossier-page top pill but tighter. */
.card-cadence-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
  border-radius: 9px;
  border: 1px solid rgba(120, 120, 140, 0.15);
  background: rgba(120, 120, 140, 0.04);
  color: var(--text-muted);
  opacity: 0.8;
  transition: background var(--transition), color var(--transition);
}
.card-cadence-pill.on {
  background: rgba(30, 91, 184, 0.05);
  color: rgba(30, 91, 184, 0.75);
  border-color: rgba(30, 91, 184, 0.16);
}
[data-theme="dark"] .card-cadence-pill.on {
  background: rgba(255, 154, 108, 0.06);
  color: rgba(255, 154, 108, 0.78);
  border-color: rgba(255, 154, 108, 0.18);
}

/* Top-of-page auto-refresh status pill — sits inline after the "Last update"
   line (below dossier title). Soft-edges, semi-transparent, low-emphasis so it
   reads as ambient metadata rather than a CTA. */
.top-cadence-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2px;
  border-radius: 10px;
  border: 1px solid rgba(120, 120, 140, 0.18);
  background: rgba(120, 120, 140, 0.05);
  color: var(--text-muted);
  text-decoration: none;
  vertical-align: middle;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  opacity: 0.85;
}
.top-cadence-pill:hover {
  background: rgba(120, 120, 140, 0.10);
  border-color: rgba(120, 120, 140, 0.30);
  color: var(--text-secondary);
  opacity: 1;
}
.top-cadence-pill.cadence-on {
  background: rgba(30, 91, 184, 0.06);
  color: rgba(30, 91, 184, 0.75);
  border-color: rgba(30, 91, 184, 0.18);
}
.top-cadence-pill.cadence-on:hover {
  background: rgba(30, 91, 184, 0.10);
  color: var(--orange-dark);
}
[data-theme="dark"] .top-cadence-pill.cadence-on {
  background: rgba(255, 154, 108, 0.07);
  color: rgba(255, 154, 108, 0.80);
  border-color: rgba(255, 154, 108, 0.20);
}

/* TOC sidebar count badge — small "(N)" after parent label when children are
   suppressed (e.g. CS FAQ shows "(11)" so readers see section size without
   the per-entry sub-items crowding the sidebar). */
.toc-count {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* Related Quick Answers card — populated at page load via /api/answers */
#related-quick-answers {
  margin: 40px 0 56px;
  padding: 18px 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#related-quick-answers + section.part,
section.part + #related-quick-answers { margin-top: 56px; }
#related-quick-answers .related-qa-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Horizontal pill layout — questions flow side-by-side as compact chips, click to expand
   answer inline. Preview hidden when collapsed; full body shows when open. */
#related-quick-answers .related-qa-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#related-quick-answers .related-qa-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 13px;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), border-radius 0.18s ease;
  flex: 0 1 auto;
}
#related-quick-answers .related-qa-item:hover {
  border-color: var(--border-strong);
}
#related-quick-answers .related-qa-item[open] {
  flex-basis: 100%;
  border-color: var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
#related-quick-answers .related-qa-item summary {
  padding: 6px 14px 6px 26px;
  cursor: pointer;
  list-style: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#related-quick-answers .related-qa-item[open] summary {
  padding: 10px 14px 10px 32px;
  white-space: normal;
}
#related-quick-answers .related-qa-item summary::-webkit-details-marker { display: none; }
#related-quick-answers .related-qa-item summary::before {
  content: '▸';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}
#related-quick-answers .related-qa-item[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
  color: var(--orange);
  top: 18px;
}
#related-quick-answers .related-qa-item .related-qa-title {
  font-weight: 600;
  display: inline;
}
#related-quick-answers .related-qa-item[open] .related-qa-title {
  display: block;
  margin-bottom: 4px;
}
#related-quick-answers .related-qa-item .related-qa-preview {
  display: none;  /* always hidden in pill mode — pill shows title only; expand reveals full body */
}
#related-quick-answers .related-qa-item .related-qa-body {
  padding: 0 16px 12px 32px;
  border-top: 1px dashed var(--border);
  margin: 4px 0 0;
  padding-top: 10px;
}
#related-quick-answers .related-qa-item .related-qa-content {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}
#related-quick-answers .related-qa-item .related-qa-content a { color: var(--text-link); }
#related-quick-answers .related-qa-item .related-qa-content code {
  background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 12px;
}
#related-quick-answers .related-qa-item .related-qa-loading {
  font-size: 12px; color: var(--text-muted); font-style: italic;
}
#related-quick-answers .related-qa-item .related-qa-error {
  font-size: 12px; color: #991B1B;
}
#related-quick-answers .related-qa-item .related-qa-footer-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
}
#related-quick-answers .related-qa-item .related-qa-fullview {
  color: var(--text-link);
  text-decoration: none;
}
#related-quick-answers .related-qa-item .related-qa-fullview:hover { text-decoration: underline; }
#related-quick-answers.empty { display: none; }


/* Audience tag pill — extracted from heading text and rendered to the right.
   Background tinted by audience label so cs/sales/dev/pm read at a glance. */
.audience-tag {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 12px;
  vertical-align: middle;
  font-family: var(--font);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.audience-tag .audience-label {
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.audience-tag .aud-cs { background: #FEF3E2; color: #9A4400; border-color: #F8C078; }
.audience-tag .aud-sales { background: #FFF3F3; color: #9C2A2A; border-color: #F3B5B5; }
.audience-tag .aud-dev { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.audience-tag .aud-pm { background: #EDE9FE; color: #5B21B6; border-color: #C4B5FD; }
.audience-tag .aud-all { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
[data-theme="dark"] .audience-tag .audience-label { background: #252A36; color: #9AA0B4; border-color: #323845; }
[data-theme="dark"] .audience-tag .aud-cs { background: #2C1A05; color: #F8C078; border-color: #5A3208; }
[data-theme="dark"] .audience-tag .aud-sales { background: #2C0A0A; color: #F3B5B5; border-color: #5A1414; }
[data-theme="dark"] .audience-tag .aud-dev { background: #1E3A5F; color: #93C5FD; border-color: #2D5894; }
[data-theme="dark"] .audience-tag .aud-pm { background: #2E1065; color: #C4B5FD; border-color: #4D1E9C; }
[data-theme="dark"] .audience-tag .aud-all { background: #064E3B; color: #6EE7B7; border-color: #0A7558; }

/* The audience pill sits inline next to the heading text but visually distinct. */
section.part h1 .audience-tag,
section.part h2 .audience-tag,
section.part h3 .audience-tag {
  position: relative;
  top: -2px;
}


/* Reading progress bar — fixed at top of viewport, fills as user scrolls */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  z-index: 1000;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* Sticky Part-N indicator — current top-level section pinned just under the topbar */
#sticky-part {
  position: fixed;
  top: var(--topbar-h, 56px);
  left: 0;
  right: 0;
  height: 32px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
  z-index: 90;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
#sticky-part.visible {
  opacity: 1;
  transform: translateY(0);
}
#sticky-part .sticky-part-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 10px;
}
#sticky-part .sticky-part-parent {
  color: var(--text-secondary);
}
#sticky-part .sticky-part-sep {
  color: var(--text-muted);
  margin: 0 6px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
#sticky-part .sticky-part-child {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
}
body.has-sidebar #sticky-part {
  left: calc(var(--docs-shell-gutter) + var(--sidebar-w));
  right: calc(var(--docs-shell-gutter) + var(--right-rail-w));
}
@media (max-width: 1180px) {
  #right-rail,
  body.has-sidebar::after {
    display: none;
  }
  body.has-sidebar #main,
  body.has-sidebar.has-right-rail #main {
    margin-left: calc(var(--docs-shell-gutter) + var(--sidebar-w));
    margin-right: var(--docs-shell-gutter);
    max-width: calc(100vw - (2 * var(--docs-shell-gutter)) - var(--sidebar-w));
  }
  body.has-sidebar #sticky-part {
    left: calc(var(--docs-shell-gutter) + var(--sidebar-w));
    right: var(--docs-shell-gutter);
  }
}
@media (max-width: 900px) {
  body.has-sidebar #sticky-part {
    left: 0;
    right: 0;
  }
  /* Hide the dossier TOC/index sidebar on narrow viewports — restores full
   * reading width on phones/tablets. Sidebar reads as a fixed-width column
  * that crowds the content out at <900px. The sidebar's anchors are still
  * reachable via the main body's H2/H3 in-page navigation. */
  #sidebar { display: none; }
  #right-rail,
  body.has-sidebar::after {
    display: none;
  }
  body.has-sidebar #main,
  body.has-sidebar.has-right-rail #main {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Wide tables (esp. ticket tables with Title/Type/Priority/Status/Assignee/Updated)
   * overflow viewport on phones. Make every table its own horizontal scroll container
   * so content that doesn't fit becomes swipe-able instead of getting clipped.
   * `display: block` drops the table-layout algorithm, so cells use natural widths —
   * narrow 2-3 col tables stay narrow (no scrollbar appears unless content overflows),
   * wide ticket tables get horizontal scroll. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Subtle visual cue that there's more table to the right.
   * `mask-image` fades the right edge so users see content cut off rather than a hard wall. */
  table {
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  /* Drop the fade once the user has scrolled — they've found the edge. (Pure-CSS:
   * scrolling resets to start, so this is a static hint, not state-aware. Acceptable.) */

  /* Prevent excessive header wrapping on small cells; let `Title`-like cells still wrap. */
  th { white-space: nowrap; }

  /* Code blocks already have overflow-x:auto; keep them readable on phones. */
  pre { font-size: 11.5px; padding: 12px 14px; }

  /* ── Topbar collapse on phones ─────────────────────────────────────
   * On <900px the topbar runs out of room: the brand title, search input,
   * dark-toggle, admin view toggle, and LOGOUT button push the menu off
   * the right edge — sometimes off-screen entirely. Collapse all of those
   * into the menu (or hide them) so only [logo] + [search] + [☰ Menu]
   * remain on the bar itself.
   *
   * Login/logout, dark mode, and admin view-toggle controls are injected
   * into the menu panel by a small mobile-controls script (loaded by
   * portal.js / dossier_renderer / how.html / glossary template). The
   * menu items proxy clicks to the now-hidden originals so the existing
   * event handlers keep working without duplication. */
  #topbar { padding: 0 12px; gap: 10px; }
  #topbar-title { display: none; }
  #topbar-right { gap: 8px; }
  /* Search bar shrinks to fill remaining space (was a fixed-width input
   * that overflowed). On the smallest screens the input becomes the same
   * size as the menu trigger so both fit comfortably. */
  #search-wrap { flex: 1 1 auto; min-width: 0; }
  #search-wrap input { width: 100% !important; min-width: 0; }
  /* (#dark-toggle, #admin-view-toggle, #admin-auth-btn are hidden globally
   * now — see top-of-file rule. Menu is the single source.) */
  /* The menu trigger stays on the bar */
  .topbar-menu { flex-shrink: 0; }
  /* On mobile, anchor the dropdown panel to the topbar bottom and span
   * the full viewport width (minus the topbar's horizontal padding).
   * The desktop "right: 0; min-width: 220px" rule extends LEFT from the
   * trigger and overflowed off the left edge on narrow phones. Switching
   * to fixed-position + left/right anchoring guarantees the panel always
   * fits, regardless of the trigger's position or label width. */
  .topbar-menu-panel {
    position: fixed;
    top: var(--topbar-h, 56px);
    left: 12px;
    right: 12px;
    min-width: 0;
    width: auto;
  }
}

/* Anchor-link icons on H2/H3 (hover-to-show "#" — click copies permalink) */
section.part h1, section.part h2, section.part h3, section.part h4 {
  position: relative;
}
.anchor-link {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  padding: 2px 4px;
  line-height: 1;
}
section.part h1:hover .anchor-link,
section.part h2:hover .anchor-link,
section.part h3:hover .anchor-link,
section.part h4:hover .anchor-link,
.anchor-link:hover, .anchor-link:focus {
  opacity: 1;
}
.anchor-link:hover, .anchor-link:focus {
  color: var(--orange);
}
.anchor-link.copied::after {
  content: 'Copied';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  color: #065F46;
  background: #D1FAE5;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-family: var(--font);
}
[data-theme="dark"] .anchor-link.copied::after {
  color: #6EE7B7;
  background: #064E3B;
}
@media (max-width: 900px) {
  /* On narrow viewports, the negative-left absolute anchor would clip — pin inline-after-heading instead */
  .anchor-link {
    position: static;
    transform: none;
    margin-left: 8px;
    opacity: 0.4;
  }
}

/* Code-block copy buttons — wraps Bilbo's ``` blocks and inline-emitted <pre> blocks */
.code-wrap {
  position: relative;
  margin: 14px 0;
}
.code-wrap pre {
  margin: 0;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid #30363D;
  color: #9AA0B4;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 1;
}
.copy-btn:hover, .copy-btn:focus {
  background: rgba(255,255,255,0.14);
  color: #E6EDF3;
  border-color: #484F5C;
}
.copy-btn.copied {
  background: rgba(110, 231, 183, 0.15);
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, 0.4);
}

/* ── Print stylesheet ──────────────────────────────────────────────── */
@media print {
  /* Strip portal chrome — only the dossier body should print */
  #topbar, #toc, #sidebar, #right-rail, #search-wrap, #dark-toggle, #reading-progress, #sticky-part,
  #dossier-config-panel, .dossier-footer, .copy-btn, .anchor-link {
    display: none !important;
  }
  body.has-sidebar::after {
    display: none !important;
  }
  body, body.has-sidebar {
    margin: 0;
    padding: 0;
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  #main {
    margin: 0 !important;
    padding: 12mm 14mm !important;
    max-width: none !important;
  }
  /* Avoid breaking tables / ticket cards across pages where possible */
  table, .ticket, .callout, .plain-english-callout, .workaround, details {
    page-break-inside: avoid;
  }
  /* Headings shouldn't sit alone at the bottom of a page */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
  /* Make external links printable — show the URL after the link text */
  section.part a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444444;
    word-break: break-all;
  }
  /* Don't expand internal anchor links */
  section.part a[href^="#"]::after {
    content: "";
  }
  /* Ensure callouts render with visible borders in B&W print */
  .callout, .plain-english-callout, .workaround {
    border: 1pt solid #777777 !important;
    background: transparent !important;
    color: #000000 !important;
    padding: 8pt 10pt;
    margin: 8pt 0;
  }
  /* Code blocks readable in print */
  pre, code {
    background: #F5F5F5 !important;
    color: #000000 !important;
    border: 0.5pt solid #CCCCCC;
  }
  pre {
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* Force light theme in print */
  [data-theme="dark"] {
    --bg: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --text: #000000;
    --text-secondary: #333333;
    --border: #CCCCCC;
  }
}