/* ------------------------------------------------------------------ */
/* CSS Variables                                                       */
/* ------------------------------------------------------------------ */
/* Token declarations moved to the generated fleet-shared stylesheet
 * at /_shared/design/tokens/colors.css (source of truth:
 * studio/_shared/design/tokens/src/colors.ts). Loaded before this
 * file in index.html; declarations live in `@layer tokens` per
 * POL-260422 §R7. F-7.b.1 / relay-56, 2026-04-23. */
@layer tokens;

/* ── Fleet utility classes (R-F-7.d.3 / R-F-7.d.1 / DR-260423). ─
 * Named selector rules retiring scattered inline-style emission.
 * Intentionally UNLAYERED: the universal reset `*  { padding: 0 }`
 * at line 58 is itself unlayered, and named-layer rules cascade
 * below unlayered rules regardless of specificity. Utility
 * classes at (0,0,1,0) specificity must beat the reset's
 * (0,0,0,0), so they stay in the same unlayered tier. `.is-hidden`
 * keeps `!important` for robustness against higher-specificity
 * competitors.
 */
.is-hidden {
  display: none !important;
}

/* ── Settings drawer rows (R-F-7.d.1). ──────────────────────────
 * Retires 34 inline-style occurrences from site.js's settings
 * renderer. Tokens consumed where the design scale aligns
 * (--space-md, --font-size-md). Literal 10px / 11.5px / 1.5
 * retained where the current visual tier doesn't map cleanly
 * to the typed scale — separate relay can refine tokens and
 * migrate them. */
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-md, 8px) 0;
  cursor: pointer;
}
.settings-row > input[type="checkbox"] {
  margin-top: var(--space-2xs, 3px);
}
.settings-row > span,
.settings-row-body {
  flex: 1;
}
.settings-row-title {
  font-size: var(--font-size-md, 13px);
  color: var(--text);
  font-weight: 500;
}
.settings-row-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: var(--space-2xs, 3px);
  line-height: 1.5;
}

/* ── Stats-bar containers (R-F-7.d.2). ──────────────────────────
 * Retires `<div id="stats-bar" style="padding:24px 0">` and the
 * collection equivalent. Same padding both instances. */
.stats-bar-wrap {
  padding: var(--space-3xl, 24px) 0;
}

/* ── Collection-view hint strips (R-F-7.d.2). ──────────────────
 * Applied to collection-map-hint, collection-graph-hint,
 * collection-timeline-hint. Small muted caption above each
 * visualisation surface. */
.coll-view-hint {
  padding: 0 0 var(--space-md, 8px);
  font-size: var(--font-size-base, 12px);
  color: var(--text-muted);
}

/* ── Legend labels + swatches (R-F-7.d.2). ─────────────────────
 * Retires the Mandate / UBL inline-styled legend in index.html.
 * Swatch modifier classes read colors from the token layer. */
.legend-label-mandate {
  font-weight: 600;
  margin-right: var(--space-md, 8px);
}
.legend-label-ubl {
  font-weight: 600;
  margin-left: var(--space-xl, 16px);
  margin-right: var(--space-md, 8px);
}
/* Modifiers use compound-class selectors (0,0,2,0 specificity) so
 * they beat the base .legend-swatch / .legend-dot rules declared
 * later in this file (0,0,1,0). Without the bump, file-order
 * would overwrite these. */
.legend-swatch.legend-swatch--mandatory { border-left: 3px solid var(--green); }
.legend-swatch.legend-swatch--partial   { border-left: 3px solid var(--yellow); }
.legend-swatch.legend-swatch--planned   { border-left: 3px solid var(--accent); }
.legend-swatch.legend-swatch--voluntary { border-left: 3px solid var(--text-muted); }
.legend-dot.legend-dot--native       { background: var(--green); }
.legend-dot.legend-dot--adaptable    { background: var(--yellow); }
.legend-dot.legend-dot--incompatible { background: var(--red); }

/* ── Residue utilities (R-F-7.d.4). ─────────────────────────────
 * Names derived from the repeating patterns identified in CA-
 * 2026-04-23-factura-inline-style-baseline. Each replaces a
 * specific high-frequency inline cluster. Unlayered per
 * POL-260422 §R7 v1.2.0 (utilities overriding universal reset
 * must stay in the unlayered tier). Tokens consumed where the
 * scale aligns; literal values retained where existing visuals
 * don't hit a token tier. */

/* Empty-state panels — big muted padding + centered text.
 * Uses literal 40px because the typed spacing scale's 4xl is 32px;
 * the visual tier of an empty-state doesn't align to any current
 * token. A future typography/spacing relay can add 5xl: 40px. */
.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

/* Caption / micro-caption for metadata text below primary content. */
.caption {
  font-size: var(--font-size-sm, 11px);
  color: var(--text-muted);
}
.caption--top    { margin-top: var(--space-sm, 6px); }
.caption--bottom { margin-bottom: var(--space-sm, 6px); }
.caption--bottom-tight { margin-bottom: var(--space-xs, 4px); }
.caption--bottom-loose { margin-bottom: var(--space-md, 8px); }

/* Section label — tiny uppercase muted header. */
.section-label {
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: var(--space-xs, 4px);
}
.section-label--loose { margin-bottom: var(--space-sm, 6px); }

/* Body caption — wider-leading muted blurb. */
.body-caption {
  font-size: var(--font-size-md, 13px);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Monospace muted KV labels. */
.kv-mono {
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: var(--font-size-sm, 11px);
}
.kv-mono--base { font-size: var(--font-size-base, 12px); }

/* Inline-flex with small gap — common chip/badge hugging. */
.inline-flex-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 6px);
}

/* Simple flex spacer — pushes siblings apart. */
.flex-spacer { flex: 1; }

/* Panel-divider row — bottom rule + small vertical padding. */
.panel-divider-row {
  padding: var(--space-md, 8px) 0;
  border-bottom: 1px solid var(--border);
}

/* Filter-bar containers — index.html chrome. */
.filter-bar-root {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg, 12px);
  padding: var(--space-xl, 16px) 0;
  flex-wrap: wrap;
}
.filter-bar-container {
  flex: 1;
  min-width: 0;
}
.filter-bar-padding-bottom {
  padding: 0 0 var(--space-xl, 16px);
}
#collection-search {
  min-width: 280px;
  max-width: 400px;
}

/* Card-surface — recurring token-card chrome under map/graph/
 * timeline containers. */
.card-surface {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-surface--scrollable {
  overflow-x: auto;
  padding: var(--space-xl, 16px) var(--space-lg, 12px);
}
.card-surface--clipped { overflow: hidden; }

/* Collection-tiles-wrap — initially hidden, narrow padding. */
.coll-tiles-wrap {
  padding: var(--space-md, 8px) 0 var(--space-3xl, 24px);
}

/* Accented inline text — typed color for in-flow highlights. */
.text-accent { color: var(--accent); }
.text-default { color: var(--text); }
.text-muted { color: var(--text-muted); }

.clickable { cursor: pointer; }
.flex-column-stretch { flex-direction: column; align-items: stretch; }

.muted-row {
  color: var(--text-muted);
  padding: var(--space-md, 8px) 0;
}
.muted-hint {
  color: var(--text-muted);
  font-size: var(--font-size-base, 12px);
}

/* ── Preferences UI (R-F-7.c.2). ───────────────────────────────
 * Export / import / history section rendered by
 * studio/_shared/components/preferences/preferences-ui.ts. */
.pref-import-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 8px);
}
.pref-import-area {
  width: 100%;
  min-height: 64px;
  font-family: var(--mono);
  font-size: var(--font-size-sm, 11px);
  padding: var(--space-md, 8px);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}
.pref-import-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md, 8px);
}
.pref-import-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 3px);
}
.pref-history-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 8px);
}
.pref-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 3px);
  max-height: 240px;
  overflow-y: auto;
}
.pref-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 8px);
  padding: var(--space-xs, 4px) 0;
  border-bottom: 1px solid var(--border);
}
.pref-history-row:last-child {
  border-bottom: 0;
}
.pref-history-actions {
  display: flex;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Reset & Base                                                        */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* Sidebar */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid var(--border);
  z-index: 250;
  transition: width 0.2s ease;
}
.sidebar.collapsed { width: 56px; }
.sidebar-header {
  height: 41px;
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sidebar-header-text { flex: 1; min-width: 0; }
.sidebar.collapsed .sidebar-header { padding: 16px 12px; justify-content: center; }
.sidebar.collapsed .sidebar-header-text {
  display: block;
  flex: none;
  min-width: 0;
}
.sidebar-company-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  display: none;
  object-fit: cover;
  background: var(--bg-card);
}
.sidebar-company-logo.visible { display: block; }
.sidebar.collapsed .sidebar-header {
  height: 41px;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.sidebar.collapsed .sidebar-company-logo.visible { display: none; }
.sidebar-collapse-btn {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 4px;
  flex-shrink: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
  color: var(--text);
  background: var(--bg-hover);
  outline: none;
}
/* Collapsed sidebar uses the brand mark as the header affordance;
   clicking the header expands the menu. */
.sidebar.collapsed .sidebar-collapse-btn { display: none; }
.sidebar-workspace-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}
.sidebar.collapsed .sidebar-workspace-name {
  font-size: 18px;
  text-align: center;
}
.sidebar-workspace-name.company-loaded {
  color: var(--accent);
}
.sidebar-workspace-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sidebar-group-label {
  font-size: 10px;
  font-weight: 600;
  /* Use the full --text-muted color (no opacity) so WCAG AA
     contrast on --sidebar-bg stays ≥4.5:1. The opacity:0.7 that
     was here dropped effective contrast to 4.24:1 and failed
     Lighthouse color-contrast audit. */
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 20px 6px;
}
.sidebar-group-label:first-child { padding-top: 4px; }
.sidebar.collapsed .sidebar-group-label {
  font-size: 0;
  padding: 6px 0;
  position: relative;
  height: 1px;
  overflow: visible;
}
.sidebar.collapsed .sidebar-group-label::before {
  content: "";
  display: block;
  border-top: 1px solid var(--border);
  margin: 0 14px;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  border-radius: 6px;
  margin: 2px 8px;
  text-decoration: none;
  user-select: none;
}
.sidebar.collapsed .sidebar-nav-item {
  padding: 10px 0;
  justify-content: center;
  margin: 2px 6px;
}
.sidebar.collapsed .nav-label { display: none; }
.nav-icon {
  flex-shrink: 0;
  opacity: 0.8;
}
.sidebar-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-nav-item:hover .nav-icon { opacity: 1; }
.sidebar-nav-item.active {
  background: rgba(108, 140, 255, 0.12);
  color: var(--accent);
}
/* §9.11 — Minimal footer. The row contains two peers: the
   avatar+name button (opens the dropdown) and the theme toggle.
   When collapsed, only the centered person glyph remains. */
.sidebar-footer-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
  height: 45px;
  padding: 0 6px;
  box-sizing: border-box;
  gap: 4px;
}
.sidebar.collapsed .sidebar-footer-row { padding: 0; justify-content: center; }
.sidebar-footer {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
}
.sidebar.collapsed .sidebar-footer {
  flex: 0 0 auto;
  padding: 0;
  justify-content: center;
  width: 100%;
}
.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sidebar-footer:hover .sidebar-avatar,
.sidebar-footer[aria-expanded="true"] .sidebar-avatar { color: var(--text); }
.sidebar-avatar-glyph {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.sidebar-user {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sidebar-user-name {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer:hover .sidebar-user-name { color: var(--text); }
.sidebar.collapsed .sidebar-user { display: none; }
.sidebar-theme-toggle {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.sidebar-theme-toggle:hover,
.sidebar-theme-toggle:focus-visible {
  background: var(--bg-hover);
  color: var(--text);
  outline: none;
}
.sidebar.collapsed .sidebar-theme-toggle { display: none; }
.sidebar-theme-toggle .theme-icon { display: none; }
body:not(.theme-light) .sidebar-theme-toggle .theme-icon-sun { display: inline-flex; }
body.theme-light .sidebar-theme-toggle .theme-icon-moon { display: inline-flex; }
/* §9.10/§9.11 — sidebar footer is a real <button> hosting the
   avatar dropdown. Reset native button chrome and make it
   click as a unit. */
.sidebar-footer {
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  position: relative;
  transition: background 0.12s;
}
.sidebar-footer:hover,
.sidebar-footer[aria-expanded="true"] {
  background: var(--bg-hover);
}

/* §9.11 — Avatar dropdown menu. Anchored above the sidebar
   footer; pops upward because the footer is at the bottom. */
.avatar-menu {
  position: fixed;
  bottom: 56px;
  left: 8px;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.avatar-menu[hidden] { display: none; }
.avatar-menu-header {
  padding: 10px 10px 8px;
}
.avatar-menu-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-menu-role {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}
.avatar-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
.avatar-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.avatar-menu-item:hover:not(:disabled),
.avatar-menu-item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}
.avatar-menu-item:disabled { cursor: default; opacity: 0.55; }
.avatar-menu-item-muted .avatar-menu-label { color: var(--text-muted); }
.avatar-menu-kbd {
  display: inline-flex;
  gap: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.avatar-menu-kbd kbd {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: inherit;
  font-size: 10.5px;
  line-height: 1;
}
.avatar-menu-hint {
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.avatar-menu-sub {
  padding: 6px 10px 10px;
}
.avatar-menu-sub-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.avatar-menu-chip {
  font-size: 9px;
  font-weight: 600;
  color: #f4cf6a;
  background: rgba(244, 207, 106, 0.12);
  border: 1px solid rgba(244, 207, 106, 0.35);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.5px;
}
.avatar-menu-select {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
}

/* §9.10 — Sidebar zone divider. A thin horizontal rule signals
   the shift from consumption ("reality I study") to creation
   ("artifacts I own") without a label that would compete with
   the items. */
.sidebar-zone-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 16px;
}
.sidebar.collapsed .sidebar-zone-divider {
  margin: 8px 12px;
}

body[data-user-role="member"] #settings-btn { display: none; }

/* §9.11 — Light theme. A first-pass token override for the
   core palette; many hardcoded colors (filter-bar, badges,
   overlays, code blocks) still read dark-mode. Full audit is
   in BACKLOG.md — the toggle is shipped because the minimal
   surface already works; polish is a follow-up. */
/* Light-theme color-token overrides moved to the generated
 * fleet-shared stylesheet at /_shared/design/tokens/colors.css
 * (inside the @layer tokens wrapper). Per F-7.b.1 / relay-56. */
body.theme-light .sidebar {
  background: var(--bg-card);
}
body.theme-light .avatar-menu {
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.12);
}
body.theme-light .avatar-menu-kbd kbd {
  background: rgba(0, 0, 0, 0.04);
}
body.theme-light .settings-pane-body pre#settings-backlog-body {
  background: var(--bg-card);
}

/* Workspace */
.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.topbar {
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  height: 41px;
}
.topbar-logo {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.3px;
  margin-right: 4px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}
.topbar-views {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}
.topbar-view {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
}
.topbar-view:hover { color: var(--text); }
.topbar-view.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.topbar-view .view-icon { font-size: 14px; }
.topbar {
  overflow: hidden;
}
.topbar-views { min-width: 0; flex-shrink: 1; }
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-width: 0;
  flex-shrink: 1;
}
.topbar-view-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.topbar-view-select {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-size: 12px;
  height: 26px;
  min-width: 0;
  max-width: 160px;
  flex: 0 1 auto;
}
@media (max-width: 900px) {
  .topbar-view-label { display: none; }
  .topbar-view-select { max-width: 120px; }
}
@media (max-width: 640px) {
  .topbar-view-select { max-width: 90px; }
}

.shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ */
/* Stats Bar                                                           */
/* ------------------------------------------------------------------ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 24px 0;
  flex-shrink: 0;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--mono);
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Filters                                                             */
/* ------------------------------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px 0;
  align-items: flex-end;
  flex-shrink: 0;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.filter-group label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-group select, .filter-group input {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font);
  min-width: 120px;
  width: 100%;
}
.filter-group select:focus, .filter-group input:focus {
  outline: none;
  border-color: var(--accent);
}
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input { min-width: 240px !important; padding-right: 32px !important; }
.search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  display: none;
}
.search-clear:hover { color: var(--text); background: var(--bg-hover); }
.search-wrap.has-value .search-clear { display: block; }

/* ------------------------------------------------------------------ */
/* Tabs                                                                */
/* ------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 12px 20px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tab-content#view-tiles.active,
.tab-content#view-map.active {
  overflow: auto;
}

/* ------------------------------------------------------------------ */
/* Table                                                               */
/* ------------------------------------------------------------------ */
.export-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.export-bar-label {
  font-size: 12px;
  color: var(--text-muted);
}
.export-input {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}
.export-input-title { flex: 1; min-width: 160px; max-width: 260px; }
.export-input-note { flex: 2; min-width: 180px; }
.export-input-sm { min-width: 120px; }
.export-btn {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.export-btn:hover { border-color: var(--accent); color: var(--accent); }

#print-report { display: none; }

body.overlay-open { overflow: hidden; }
body.overlay-open .workspace { overflow: hidden; }

/* Research queue toast */
.queue-toast {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 720;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 260px; max-width: 360px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  font-size: 13px;
  color: var(--text);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
}
.queue-toast.visible { transform: translateY(0); opacity: 1; }

/* Skeleton loader shimmer — reused across Reader / Activity / Topic fetch */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
.skel {
  background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-hover) 50%, var(--bg-card) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.3s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}
.skel-line { height: 12px; margin-bottom: 8px; }
.skel-title { height: 22px; width: 60%; margin-bottom: 14px; }
.skel-block { padding: 24px 28px; }
.skel-chip {
  display: inline-block; width: 72px; height: 20px;
  border-radius: 12px; margin: 2px 4px 2px 0;
  background: var(--bg-card);
  animation: skeleton-pulse 1.3s ease-in-out infinite;
}
body.collection-mode #stats-bar,
body.collection-mode #filter-bar-root,
body.graph-mode #stats-bar,
body.graph-mode #filter-bar-root,
body.coverage-mode #stats-bar,
body.coverage-mode #filter-bar-root,
body.timeline-mode #stats-bar,
body.timeline-mode #filter-bar-root,
body.activity-mode #stats-bar,
body.activity-mode #filter-bar-root,
body.reader-mode #stats-bar,
body.reader-mode #filter-bar-root,
body.reader-mode .filters,
body.reader-mode #export-bar,
body.reader-mode #bulk-bar { display: none !important; }

/* Mobile / narrow viewport adaptations */
@media (max-width: 768px) {
  .sidebar:not(.collapsed) { width: 200px; }
  .sidebar.collapsed { width: 48px; }

  /* Coverage: stack cards in a single column */
  .coverage-grid { grid-template-columns: 1fr !important; }
  .cov-stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Timeline: keep Gantt horizontal-scrollable, shrink label column */
  .timeline-row { grid-template-columns: 120px 1fr; }
  .timeline-label { font-size: 11px; padding: 4px 6px; }

  /* Graph: tighten toolbar so controls wrap */
  .graph-toolbar { flex-wrap: wrap; gap: 6px; }
  .graph-search { min-width: 180px; }
  .graph-canvas-wrap { min-height: 360px; }

  /* Activity: stack grid to 2 columns (date+sha collapse) */
  .activity-entry {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .activity-date, .activity-sha { grid-column: 1 / -1; font-size: 10px; }
  .activity-search { min-width: 0; width: 100%; }

  /* Collection workspace: allow filters / stats to wrap */
  #collection-stats-bar .sb-bar { grid-template-columns: repeat(2, 1fr) !important; }
  #view-collection .table-wrapper { overflow-x: auto; }

  /* Reader: switch to single-column read-mode on phones, drop TOC */
  .reader-header { flex-wrap: wrap; gap: 6px; height: auto; padding: 8px 10px; }
  .reader-title { font-size: 13px; }
  .reader-body { grid-template-columns: 1fr; }
  .reader-toc { display: none; }
  .reader-columns { grid-auto-flow: row; overflow-x: hidden; }
  .reader-columns .reader-column { border-right: none; border-bottom: 1px solid var(--border); }

  /* Export bar wraps on phones */
  .export-bar { flex-wrap: wrap; row-gap: 4px; }
  .export-input { max-width: 100%; min-width: 0; }
  .export-input-title, .export-input-note { flex: 1 1 100%; }

  /* Command palette takes full-width on phones */
  .palette-shell { max-width: 94vw; }
  .palette-overlay { padding-top: 8vh; }

  /* Shortcuts modal stays compact */
  .shortcuts-shell { max-width: 94vw; }

  /* Vendor heatmap: allow horizontal scroll */
  .vendor-heatmap-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
  /* Auto-collapse the sidebar on phones */
  .sidebar:not(.collapsed) .sidebar-company-logo,
  .sidebar:not(.collapsed) .sidebar-header-text,
  .sidebar:not(.collapsed) .nav-label,
  .sidebar:not(.collapsed) .sidebar-user { display: none; }
  .sidebar:not(.collapsed) { width: 48px; }
  .sidebar-nav-item { justify-content: center; padding: 10px 0; }
  .sidebar-footer { padding: 0; justify-content: center; }
  .sidebar-collapse-btn { display: none; }
}

/* Activity workspace */
#view-activity.active { display: flex; flex-direction: column; overflow: hidden; }
.activity-header {
  flex-shrink: 0;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.activity-title { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; }
.activity-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.activity-controls {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; font-size: 12px;
}
.activity-search {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-size: 12px;
  min-width: 320px; max-width: 420px;
}
.activity-count { color: var(--text-muted); margin-left: auto; }
.activity-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}
.activity-entry {
  display: grid;
  grid-template-columns: 100px 80px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  font-size: 13px;
}
.activity-date { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.activity-sha { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.activity-main .activity-subject { color: var(--text); font-weight: 500; }
.activity-main .activity-author { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.activity-paths {
  margin-top: 6px;
  display: none;
  flex-wrap: wrap; gap: 4px;
}
.activity-entry.expanded .activity-paths { display: flex; }
.activity-path-chip {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  cursor: pointer;
  font-family: var(--mono);
}
.activity-path-chip:hover { border-color: var(--accent); color: var(--accent); }
.activity-entry-toggle {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  user-select: none;
}
.activity-entry-toggle:hover { color: var(--text); background: var(--bg-hover); }

/* Timeline workspace */
#view-timeline.active { display: flex; flex-direction: column; overflow: hidden; }

/* AR-260418 Phase 4 — split-pane Reader */
#view-reader.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.reader-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.reader-header-left { flex: 1; min-width: 0; }
.reader-header-right { display: flex; align-items: center; gap: 10px; }
.reader-title { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; }
.reader-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-family: var(--mono); word-break: break-all; }
.reader-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.reader-status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.reader-status.in-sync { background: rgba(83, 200, 157, 0.15); color: #53c89d; }
.reader-status.in-sync::before { background: #53c89d; }
.reader-status.stale { background: rgba(247, 167, 52, 0.15); color: #f7a734; }
.reader-status.stale::before { background: #f7a734; }
.reader-status.unprojected { background: rgba(136, 136, 136, 0.15); color: #888; }
.reader-status.unprojected::before { background: #888; }
.reader-close {
  background: none; border: 1px solid var(--border); color: var(--text);
  font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 4px;
  cursor: pointer;
}
.reader-close:hover { background: var(--bg-hover); }
.reader-panes {
  display: grid; grid-template-columns: 1fr 1fr;
  flex: 1; overflow: hidden;
  gap: 1px; background: var(--border);
}
.reader-source, .reader-proj {
  background: var(--bg);
  overflow: auto;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
}
.reader-empty { padding: 40px; text-align: center; color: var(--text-muted); font-family: inherit; font-size: 13px; }
.reader-source-line {
  display: grid; grid-template-columns: 44px 1fr;
  border-left: 2px solid transparent;
  padding: 0 12px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
.reader-source-line .ln {
  color: var(--text-muted); opacity: 0.5;
  padding: 0 8px 0 16px;
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--border);
  font-size: 10px;
}
.reader-source-line .src { padding: 0 4px; }
.reader-source-line.highlight {
  background: rgba(108, 140, 255, 0.12);
  border-left-color: var(--accent);
}
.reader-source-line.highlight .ln { opacity: 0.9; color: var(--accent); }
.reader-proj-tree { padding: 14px 16px; font-family: var(--mono); font-size: 11px; }
.reader-node {
  display: block;
  padding: 5px 10px;
  margin: 2px 0;
  border-left: 2px solid transparent;
  border-radius: 3px;
  cursor: default;
  line-height: 1.4;
}
.reader-node:hover, .reader-node.highlight {
  background: rgba(108, 140, 255, 0.1);
  border-left-color: var(--accent);
}
.reader-node.record      { border-left-color: #a082dc; background: rgba(160, 130, 220, 0.08); }
.reader-node.section     { margin-left: 14px; }
.reader-node.chunk       { margin-left: 28px; color: var(--text-muted); }
.reader-node.field       { margin-left: 14px; }
.reader-node.field .reader-node-type { background: rgba(247, 167, 52, 0.18); color: #f7a734; }
.reader-node-type {
  display: inline-block; padding: 1px 6px;
  border-radius: 6px; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.4px; margin-right: 8px; opacity: 0.7;
  background: rgba(108, 140, 255, 0.12); color: var(--accent);
}
.reader-node.record .reader-node-type { background: rgba(160, 130, 220, 0.18); color: #a082dc; }
.reader-node-title { color: var(--text); }
.reader-node-span {
  float: right; font-size: 10px; color: var(--text-muted); opacity: 0.55;
  font-family: var(--mono);
}
.reader-edges-hd {
  margin-top: 14px; padding-top: 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.reader-edge {
  display: block; padding: 3px 10px; margin: 1px 0;
  border-radius: 3px;
  line-height: 1.4; font-size: 11px;
}
.reader-edge:hover { background: rgba(108, 140, 255, 0.08); }
.reader-edge-type {
  display: inline-block; padding: 1px 6px;
  border-radius: 6px; font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; margin-right: 8px;
  background: rgba(83, 200, 157, 0.14); color: #53c89d;
}
.reader-edge-arrow { color: var(--text-muted); margin: 0 4px; }
.reader-edge-target { color: var(--accent); }

@media (max-width: 900px) {
  .reader-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
.timeline-header {
  flex-shrink: 0;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.timeline-title { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; }
.timeline-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.timeline-controls {
  display: flex; align-items: center; gap: 16px;
  margin-top: 14px;
  font-size: 12px; color: var(--text-muted);
}
.timeline-control {
  display: inline-flex; align-items: center; gap: 6px;
}
.timeline-control select {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 6px; font-size: 12px;
}
.timeline-count { margin-left: auto; }
.timeline-canvas-wrap {
  flex: 1; min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding-bottom: 12px;
}
.timeline-grid { position: relative; }
.timeline-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.timeline-row:hover { background: var(--bg-hover); }
.timeline-row.is-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); color: var(--text-muted);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; min-height: 32px;
  cursor: default;
}
.timeline-row.is-header:hover { background: var(--bg); }
.timeline-label {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--border);
}
.timeline-label code {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
}
.timeline-track {
  position: relative;
  height: 26px;
}
.timeline-year-mark {
  position: absolute;
  top: 0; bottom: -9999px;
  border-left: 1px dashed var(--border);
  font-size: 10px;
  color: var(--text-muted);
  padding-left: 4px;
}
.timeline-bar {
  position: absolute;
  top: 6px; height: 14px;
  border-radius: 2px;
  padding: 0 6px;
  font-size: 10px;
  display: flex; align-items: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-bar-mandatory { background: #53c89d; }
.timeline-bar-partial { background: #f7a734; }
.timeline-bar-planned,
.timeline-bar-proposed { background: #6c8cff; }
.timeline-bar-voluntary { background: #888; }
.timeline-bar-none { display: none; }
/* Standards lane (SD-* records) */
.timeline-bar-standard {
  background: #a082dc;
  border: 1px solid rgba(160, 130, 220, 0.6);
}
.timeline-bar-standard.timeline-bar-range {
  background: linear-gradient(90deg, #a082dc 0%, rgba(160, 130, 220, 0.4) 100%);
}
.timeline-lane-header {
  background: var(--bg-card) !important;
  opacity: 0.75;
}
.timeline-lane-header .timeline-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* Coverage workspace */
#view-coverage.active { display: flex; flex-direction: column; overflow-y: auto; }
.coverage-header { padding: 20px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.coverage-title { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; }
.coverage-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  padding-bottom: 32px;
}
.cov-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.cov-card h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.cov-card.full-width { grid-column: 1 / -1; }
.cov-bar {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 6px;
  font-size: 12px;
}
.cov-bar-label { width: 140px; color: var(--text-muted); }
.cov-bar-track {
  flex: 1; height: 10px; background: var(--bg); border-radius: 3px;
  overflow: hidden; position: relative;
}
.cov-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.3s;
}
.cov-bar-value { width: 56px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.cov-stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.cov-stat {
  background: var(--bg); border-radius: 6px; padding: 10px 12px;
}
.cov-stat-v { font-size: 22px; font-weight: 700; color: var(--text); }
.cov-stat-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 2px; }
.cov-freshness-bucket {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
  font-size: 12px;
}
.cov-fresh-dot { width: 10px; height: 10px; border-radius: 50%; }
.cov-fresh-green { background: #53c89d; }
.cov-fresh-amber { background: #f7a734; }
.cov-fresh-red { background: #e25a6b; }
.cov-fresh-grey { background: var(--text-muted); opacity: 0.5; }
.cov-issue-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 200px; overflow-y: auto;
  font-size: 12px;
}
.cov-issue-list .cov-issue {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.cov-issue:hover { background: var(--bg-hover); }

/* Vendor coverage heatmap (embedded in Coverage workspace)
   Layout: countries on rows (sticky left), vendors on columns
   (sticky top). Horizontal scroll when vendor count overflows. */
.vendor-heatmap-wrap {
  overflow: auto;
  margin-top: 6px;
  border-radius: 6px;
  max-height: 560px;
  border: 1px solid var(--border);
}
.vendor-heatmap {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  background: var(--bg);
  table-layout: fixed;
}
.vendor-heatmap th, .vendor-heatmap td {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.vendor-heatmap thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.vendor-heatmap .vh-corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
  background: var(--bg);
  min-width: 160px;
  padding: 6px 10px;
  text-align: left;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vendor-heatmap .vh-vendor-head {
  min-width: 96px;
  max-width: 140px;
  padding: 8px 8px;
  text-align: center;
  color: var(--text);
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}
.vendor-heatmap .vh-vendor-head:hover { background: rgba(255,255,255,0.04); }
.vendor-heatmap .vh-vendor-head .vh-vcount {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 2px;
}
.vendor-heatmap .vh-country-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg);
  padding: 4px 10px;
  text-align: left;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  min-width: 160px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-heatmap .vh-country-name .vh-ccount {
  color: var(--text-muted);
  font-size: 10px;
  margin-left: 6px;
}
.vendor-heatmap .vh-cell {
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: default;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.vendor-heatmap .vh-cell.on {
  cursor: pointer;
}
.vendor-heatmap .vh-cell.on::after {
  content: "";
  display: block;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #f7a734;
}
.vendor-heatmap .vh-cell.on:hover::after {
  filter: brightness(1.2);
  transform: scale(1.1);
}
.cov-issue-name { color: var(--text); }
.cov-issue-reason { color: var(--text-muted); font-size: 11px; }

/* Graph workspace */
#view-graph { flex-direction: column; }
#view-graph.active { display: flex; flex-direction: column; height: 100%; }
.graph-toolbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.graph-search {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px;
  min-width: 280px; max-width: 400px;
}
.graph-breadcrumbs {
  flex: 1; color: var(--text-muted); font-size: 12px;
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.graph-breadcrumbs .crumb {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color 0.1s;
}
.graph-breadcrumbs .crumb:hover { border-color: var(--accent); color: var(--text); }
.graph-breadcrumbs .crumb-sep { opacity: 0.4; }
.graph-canvas-wrap {
  flex: 1; min-height: 0;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.graph-canvas { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.graph-canvas.dragging { cursor: grabbing; }
.graph-hint {
  position: absolute; bottom: 8px; right: 12px;
  font-size: 10px; color: var(--text-muted);
  background: rgba(15,17,23,0.7); padding: 4px 8px; border-radius: 3px;
  pointer-events: none;
}
.graph-node {
  cursor: pointer;
  transition: filter 0.15s;
}
.graph-node:hover { filter: brightness(1.25); }
.graph-node-box {
  rx: 8; ry: 8;
}
.graph-node-label {
  font-size: 13px; font-weight: 500;
  fill: #fff; pointer-events: none;
}
.graph-node-sub {
  font-size: 10px; fill: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none;
}
.graph-edge {
  stroke: var(--text-muted); stroke-width: 1; opacity: 0.5;
  fill: none;
}
.graph-edge-label {
  font-size: 10px; fill: var(--text-muted);
  pointer-events: none;
}
.graph-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px;
  pointer-events: none;
}
.graph-legend {
  flex-shrink: 0;
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 12px 0;
  font-size: 11px; color: var(--text-muted);
}
.graph-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.gl-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}

/* Collection-view styling reuses the countries .table-wrapper + thead/tbody
   rules defined earlier in this file, so chips and hovers match. */
.entity-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Related-entity chips inside reader columns */
.related-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.related-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.related-chip:hover { border-color: var(--accent); background: var(--bg-hover); }
.related-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.related-chip-rel {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 4px;
}

/* Freshness dots + evidence chip on every row */
.fresh-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
}
.fresh-dot-fresh { background: #53c89d; }
.fresh-dot-stale { background: #f7a734; }
.fresh-dot-aged { background: #e25a6b; }
.fresh-dot-unknown { background: var(--text-muted); opacity: 0.45; }
.evidence-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 6px;
  font-family: var(--mono);
}
.evidence-chip.has-some { color: var(--accent); border-color: rgba(108,140,255,0.3); }

/* Comments module */
.comments-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.comments-btn:hover { color: var(--accent); border-color: var(--accent); }
.comments-btn.has-notes { color: var(--accent); border-color: rgba(108,140,255,0.4); }
.comments-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 16px;
}
.comments-panel h4 {
  margin: 0 0 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 600;
}
.comment-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 10px;
}
.comment-item:last-child { border-bottom: none; }
.comment-body {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.comment-meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.comment-del {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 14px; line-height: 1;
  flex-shrink: 0;
}
.comment-del:hover { color: #e25a6b; }
.comment-form {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.comment-form textarea {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 40px;
}
.comment-form button {
  background: var(--accent); color: white;
  border: none; border-radius: 6px;
  padding: 0 14px; font-size: 12px;
  cursor: pointer;
}

.entity-chip-vendor { background: rgba(247,167,52,0.18); color: #f7a734; }
.entity-chip-regulator { background: rgba(226,106,130,0.18); color: #e25a6b; }
.entity-chip-standard-body { background: rgba(83,200,157,0.18); color: #53c89d; }
.entity-chip-association { background: rgba(108,140,255,0.18); color: var(--accent); }
.entity-chip-standard { background: rgba(108,140,255,0.12); color: var(--accent); }
.entity-chip-platform { background: rgba(160,130,220,0.18); color: #a082dc; }
.entity-chip-high { background: rgba(83,200,157,0.18); color: #53c89d; }
.entity-chip-medium { background: rgba(247,167,52,0.18); color: #f7a734; }
.entity-chip-low { background: rgba(226,106,130,0.18); color: #e25a6b; }
.entity-name { font-weight: 500; color: var(--text); }
.entity-role { color: var(--text-muted); font-size: 12px; }
.entity-juris { color: var(--text-muted); font-size: 12px; font-family: var(--mono); }

.library-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 550;
  display: none;
  flex-direction: column;
}
.library-overlay.visible { display: flex; }
.library-header {
  flex-shrink: 0; height: 48px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: var(--sidebar-bg);
}
.library-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; }
.library-search {
  flex: 1; max-width: 360px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 12px;
}
.library-sort, .library-filter {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: 12px;
}
.library-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
}
.library-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 64px 24px;
  font-size: 13px;
}
.library-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.library-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s;
}
.library-card:hover { border-color: var(--accent); }
.library-card-head {
  display: flex; align-items: flex-start; gap: 6px;
}
.library-card-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; }
.library-card-pin {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 14px; padding: 0 4px;
}
.library-card-pin.pinned { color: #f0b400; }
.library-card-note { font-size: 12px; color: var(--text-muted); font-style: italic; }
.library-card-meta {
  font-size: 11px; color: var(--text-muted);
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 2px;
}
.library-card-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 4px;
}
.library-card-chip {
  background: rgba(108,140,255,0.12);
  color: var(--accent);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.2px;
}
.library-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.library-action-btn {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; font-size: 11px; cursor: pointer;
  transition: all 0.1s;
}
.library-action-btn:hover { color: var(--accent); border-color: var(--accent); }
.library-action-btn.danger:hover { color: #e25a6b; border-color: #e25a6b; }

/* Keyboard cheat sheet */
.shortcuts-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 710;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.shortcuts-overlay.visible { display: flex; }
.shortcuts-shell {
  width: 92%; max-width: 540px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.shortcuts-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.shortcuts-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.shortcuts-body { padding: 14px 18px 18px; }
.shortcuts-group { margin-bottom: 16px; }
.shortcuts-group:last-child { margin-bottom: 0; }
.shortcuts-group-title {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  margin-bottom: 6px;
}
.shortcuts-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0;
  font-size: 13px; color: var(--text);
}
.shortcuts-row > div:first-child { min-width: 140px; flex-shrink: 0; }
.shortcuts-row > div:last-child { color: var(--text-muted); text-align: right; }

/* Command palette */
.palette-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 700;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
}
.palette-overlay.visible { display: flex; }
.palette-shell {
  width: 92%; max-width: 620px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  max-height: 64vh;
  overflow: hidden;
}
.palette-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.palette-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px;
  outline: none;
  font-family: inherit;
}
.palette-input::placeholder { color: var(--text-muted); }
.palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.palette-section-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  padding: 10px 16px 4px;
}
.palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.palette-item.selected {
  background: var(--bg-hover);
  border-left-color: var(--accent);
}
.palette-item-chip {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 56px; text-align: center;
}
.palette-item-chip-country { background: rgba(108,140,255,0.18); color: #6c8cff; }
.palette-item-chip-platform { background: rgba(160,130,220,0.18); color: #a082dc; }
.palette-item-chip-standard { background: rgba(83,200,157,0.18); color: #53c89d; }
.palette-item-chip-vendor { background: rgba(247,167,52,0.18); color: #f7a734; }
.palette-item-chip-regulator { background: rgba(226,106,130,0.18); color: #e25a6b; }
.palette-item-chip-standard-body { background: rgba(83,200,157,0.18); color: #53c89d; }
.palette-item-chip-association { background: rgba(108,140,255,0.18); color: #6c8cff; }
.palette-item-chip-library { background: rgba(200,200,200,0.18); color: var(--text-muted); }
.palette-item-chip-dest { background: rgba(200,200,200,0.1); color: var(--text); }
.palette-item-label { flex: 1; color: var(--text); font-size: 14px; }
.palette-item-sub { color: var(--text-muted); font-size: 12px; }
.palette-empty { color: var(--text-muted); padding: 24px; text-align: center; font-size: 13px; }
.palette-footer {
  flex-shrink: 0;
  display: flex; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted);
}
.palette-kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 10px;
  margin-right: 4px;
}

.preview-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.preview-overlay.visible { display: flex; }
.preview-shell {
  width: 100%; max-width: 1100px; max-height: 100%;
  background: #fff;
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.preview-header {
  flex-shrink: 0;
  height: 44px;
  border-bottom: 1px solid #ddd;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: #f8f9fc;
}
.preview-title { flex: 1; font-size: 13px; font-weight: 600; color: #222; }
.preview-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 24px;
  color: #111;
  background: #fff;
}
.preview-body h1 { font-size: 20px; margin: 0 0 4px; color: #111; }
.preview-body .report-note { font-size: 12px; color: #333; font-style: italic; margin: 0 0 6px; }
.preview-body .report-meta { font-size: 11px; color: #666; margin-bottom: 16px; }
.preview-body .report-company {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f6f7fb; border-radius: 6px;
  margin-bottom: 14px; font-size: 12px;
}
.preview-body .report-company img { height: 22px; }
.preview-body .report-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.preview-body .report-summary-card {
  border: 1px solid #ddd; border-radius: 6px; padding: 10px 14px; background: #fff;
}
.preview-body .report-summary-card .v { font-size: 22px; font-weight: 700; }
.preview-body .report-summary-card .l {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #666; margin-top: 2px;
}
.preview-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
.preview-body th, .preview-body td {
  border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top;
}
.preview-body th { background: #eef0f6; font-weight: 600; color: #222; }
.preview-body .chip {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 11px; font-weight: 500;
}
.preview-body .chip-mandatory, .preview-body .chip-native,
.preview-body .chip-implemented, .preview-body .chip-verified,
.preview-body .chip-high { background: #d8efe0; color: #166c3a; }
.preview-body .chip-partial, .preview-body .chip-adaptable { background: #fce9c8; color: #8b5a00; }
.preview-body .chip-planned, .preview-body .chip-proposed,
.preview-body .chip-researched, .preview-body .chip-web-verified { background: #dde2fa; color: #3546a8; }
.preview-body .chip-voluntary { background: #e2e2ea; color: #444; }
.preview-body .chip-none, .preview-body .chip-not-started,
.preview-body .chip-unknown, .preview-body .chip-low { background: #f1f1f4; color: #888; }
.preview-body .chip-incompatible { background: #f8d8dc; color: #8b1e28; }
.preview-body .country-profile {
  border-top: 1px dashed #ccc; margin-top: 20px; padding-top: 14px;
}
.preview-body .country-profile h2 { font-size: 15px; margin: 0 0 4px; }
.preview-body .country-profile .cp-grid {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 4px 12px; font-size: 11px; margin: 8px 0;
}
.preview-body .country-profile .cp-grid .k { color: #666; }
.preview-body .country-profile .cp-section h3 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin: 8px 0 3px;
}
.preview-body .country-profile .cp-section p { font-size: 11px; line-height: 1.45; }

/* Print: hide the app and show only the report */
@media print {
  body * { visibility: hidden !important; }
  #print-report, #print-report * { visibility: visible !important; }
  #print-report {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: white;
    color: black;
    padding: 24px;
    font-size: 11px;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
  }
  #print-report h1 { font-size: 18px; margin: 0 0 2px; color: #111; }
  #print-report .report-note { font-size: 11px; color: #333; margin: 0 0 6px; font-style: italic; }
  #print-report .report-meta { font-size: 9.5px; color: #555; margin-bottom: 14px; }
  #print-report .report-company {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: #f6f7fb; border-radius: 6px;
    margin-bottom: 14px; font-size: 10px; color: #222;
  }
  #print-report .report-company img { height: 20px; width: auto; }
  #print-report .report-summary {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 14px;
  }
  #print-report .report-summary-card {
    border: 1px solid #ddd; border-radius: 6px;
    padding: 6px 10px; background: #fff;
  }
  #print-report .report-summary-card .v { font-size: 16px; font-weight: 700; color: #111; }
  #print-report .report-summary-card .l {
    font-size: 8.5px; text-transform: uppercase;
    letter-spacing: 0.6px; color: #666; margin-top: 1px;
  }
  #print-report table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
  #print-report th, #print-report td {
    border: 1px solid #ddd;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
  }
  #print-report th { background: #eef0f6; font-weight: 600; color: #222; }
  #print-report .country-profile { page-break-before: always; padding-top: 4px; }
  #print-report .country-profile h2 { font-size: 14px; margin: 0 0 4px; color: #111; }
  #print-report .country-profile .cp-subtitle { font-size: 10px; color: #666; margin-bottom: 10px; }
  #print-report .country-profile .cp-grid {
    display: grid; grid-template-columns: 140px 1fr;
    gap: 4px 12px; font-size: 10px; margin-bottom: 10px;
  }
  #print-report .country-profile .cp-grid .k { color: #666; }
  #print-report .country-profile .cp-section { margin-bottom: 10px; }
  #print-report .country-profile .cp-section h3 {
    font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.5px; color: #555; margin: 6px 0 3px;
  }
  #print-report .country-profile .cp-section p,
  #print-report .country-profile .cp-section li {
    font-size: 9.5px; line-height: 1.4; margin: 2px 0;
  }
  #print-report .country-profile .cp-section ul { margin: 2px 0; padding-left: 14px; }
  #print-report .country-profile .cp-section table {
    font-size: 8.5px; margin: 4px 0;
  }
  #print-report .chip {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 8.5px; font-weight: 500;
  }
  #print-report .chip-mandatory { background: #d8efe0; color: #166c3a; }
  #print-report .chip-partial { background: #fce9c8; color: #8b5a00; }
  #print-report .chip-planned, #print-report .chip-proposed { background: #dde2fa; color: #3546a8; }
  #print-report .chip-voluntary { background: #e2e2ea; color: #444; }
  #print-report .chip-none { background: #f1f1f4; color: #888; }
  #print-report .chip-native { background: #d8efe0; color: #166c3a; }
  #print-report .chip-adaptable { background: #fce9c8; color: #8b5a00; }
  #print-report .chip-incompatible { background: #f8d8dc; color: #8b1e28; }
  #print-report .chip-unknown { background: #f1f1f4; color: #888; }
  #print-report .chip-implemented { background: #d8efe0; color: #166c3a; }
  #print-report .chip-researched { background: #dde2fa; color: #3546a8; }
  #print-report .chip-not-started { background: #f1f1f4; color: #888; }
  @page { margin: 12mm; size: A4 landscape; }
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
thead th:hover { color: var(--text); }
thead th .sort-arrow { margin-left: 4px; opacity: 0.4; }
thead th.sorted .sort-arrow { opacity: 1; color: var(--accent); }

/* AC #38 post-ship — small data-type glyph before every column
   label (Notion parity). Muted by default; brightens with the
   label on hover. Text variants use a monospace feel to match
   the SVG variants' visual weight. */
.th-type-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.th-type-glyph-text {
  font-family: var(--mono, "SFMono-Regular", monospace);
  font-weight: 600;
  letter-spacing: -0.3px;
}
thead th:hover .th-type-glyph { color: var(--text); }

/* AC #38 post-ship — active-filter chip bar. Sibling of the
   icon cluster; hidden unless at least one filter or a
   non-default sort is active. Chips carry a label + × to
   clear; visual weight matches the outline-only OPEN pill
   so elements on the page read as a family. */
.active-filter-bar,
.collection-active-filter-bar,
.destination-active-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
}
.active-filter-bar[hidden],
.collection-active-filter-bar[hidden],
.destination-active-filter-bar[hidden] { display: none; }
.afb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-card);
  height: 22px;
}
/* Aggregate sort chip — single accent-blue pill representing
   the whole sort stack. Clicking opens the sort-stack
   popover (Notion parity). */
.afb-chip-sort-agg {
  background: rgba(108, 140, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.afb-chip-sort-agg:hover { filter: brightness(1.1); }

/* Sort-stack popover — rows listing every rule; drag to
   reorder; footer with Add sort + Delete sort. Override the
   base `.table-popover` max-width so each rule's column +
   direction dropdowns + close button fit on one line. */
.table-popover:has(.ssp-body) {
  max-width: min(500px, calc(100vw - 16px));
  min-width: min(420px, calc(100vw - 16px));
}
.ssp-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
.ssp-row {
  display: grid;
  grid-template-columns: 18px 1fr 140px 28px;
  align-items: center;
  gap: 8px;
}
.ssp-drag {
  display: inline-grid;
  grid-template-columns: repeat(2, 2px);
  grid-template-rows: repeat(3, 2px);
  gap: 1.5px;
  cursor: grab;
  opacity: 0.6;
  padding: 4px;
}
.ssp-drag > span {
  width: 2px; height: 2px; border-radius: 50%;
  background: currentColor;
}
.ssp-drag:hover { opacity: 1; }
.ssp-drag:active { cursor: grabbing; }
.ssp-row-dragging { opacity: 0.5; }
.ssp-row.ssp-drop-above { box-shadow: 0 -2px 0 0 var(--accent) inset; }
.ssp-row.ssp-drop-below { box-shadow: 0 2px 0 0 var(--accent) inset; }
.ssp-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ssp-close:hover { color: #e25a6b; background: rgba(226, 90, 107, 0.08); }
.ssp-add {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  margin-top: 4px;
}
.ssp-add:hover { border-color: var(--accent); color: var(--accent); }
.ssp-delete-all {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  margin-top: 4px;
}
.ssp-delete-all:hover { color: #e25a6b; }

.afb-chip-sort {
  cursor: pointer;
  padding-left: 4px;
}
.afb-chip-sort:hover { background: var(--bg-hover, rgba(108,140,255,0.06)); }
.afb-chip-sort.afb-chip-primary {
  border-color: var(--accent);
  color: var(--accent);
}
/* Drag handle inside a sort chip (2×3 dots, muted); grabs
   reorder the rule in the stack. */
.afb-chip-drag {
  display: inline-grid;
  grid-template-columns: repeat(2, 2px);
  grid-template-rows: repeat(3, 2px);
  gap: 1.5px;
  padding: 0 4px 0 0;
  cursor: grab;
  opacity: 0.5;
}
.afb-chip-drag > span {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}
.afb-chip-drag:hover { opacity: 1; }
.afb-chip-drag:active { cursor: grabbing; }
.afb-chip-dragging { opacity: 0.45; }
.afb-chip.afb-drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.afb-chip.afb-drop-after { box-shadow: 3px 0 0 0 var(--accent); }
body.afb-reordering,
body.afb-reordering * { cursor: grabbing !important; user-select: none !important; }

/* Sort-config popover (opens when a sort chip is clicked). */
.tp-sort-config { min-width: 300px; }
.tp-sort-row {
  display: grid;
  grid-template-columns: 16px 1fr 120px 24px;
  align-items: center;
  gap: 6px;
}
.tp-sort-drag {
  cursor: grab;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  user-select: none;
}
.tp-sort-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.tp-sort-close:hover { color: #e25a6b; background: rgba(226,90,107,0.08); }
.tp-sort-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 6px;
}
.afb-chip-label { line-height: 1; }
.afb-chip-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.afb-chip-close:hover {
  color: #e25a6b;
  background: rgba(226, 90, 107, 0.08);
}

/* + Filter chip — trailing affordance in the bar for adding
   a new filter. Dashed border signals "this is an action
   slot, not a filled chip." */
.afb-chip-add {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11.5px;
}
.afb-chip-add:hover { border-color: var(--accent); color: var(--accent); }

/* Column-picker popover (opened by `+ Filter`). */
.tp-filter-picker { min-width: 280px; padding: 0; gap: 0; }
.tp-filter-picker .fcp-input {
  margin: 6px;
  width: calc(100% - 12px);
}
.tp-filter-picker .fcp-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.tp-filter-picker .fcp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.tp-filter-picker .fcp-row:hover,
.tp-filter-picker .fcp-row.fcp-active { background: rgba(108, 140, 255, 0.12); }
.tp-filter-picker .fcp-label { flex: 1; }
.tp-filter-picker .fcp-advanced {
  border-top: 1px solid var(--border);
  width: calc(100% - 12px);
  margin: 4px 6px 6px;
  text-align: left;
  padding: 8px 8px;
}

/* Transient toast shown when the advanced-filter stub is
   invoked. */
.filter-advanced-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 900;
}
.filter-advanced-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ═══ AC #38 post-ship — advanced filter composer ═══ */

/* Chip in the bar representing the whole advanced filter. */
.afb-chip-advanced {
  background: rgba(108, 140, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.afb-chip-advanced:hover { filter: brightness(1.1); }
.afb-chip-caret { font-size: 10px; opacity: 0.8; }

/* Composer popover — wider than the other popovers so rows
   breathe. */
.table-popover:has(.advf-body) { max-width: 720px; min-width: 620px; }
.advf-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}

/* A single rule row. Grid: connector · column · op · value · ⋯ */
.advf-rule {
  display: grid;
  grid-template-columns: 60px 140px 150px 1fr 28px;
  align-items: center;
  gap: 6px;
}
.advf-connector {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 6px;
}
.advf-connector-where { font-style: italic; }
.advf-connector-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
}
.advf-connector-btn:hover { border-color: var(--accent); color: var(--accent); }

.advf-col,
.advf-op {
  font-size: 12.5px;
  padding: 5px 8px;
}
.advf-val {
  font-size: 13px;
  padding: 5px 8px;
  min-width: 0;
}
.advf-val-placeholder { display: block; }

.advf-more {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.advf-more:hover { border-color: var(--border); color: var(--text); background: var(--bg-card); }

/* A nested group renders as a bordered card inset into the
   composer grid. */
.advf-group-row {
  display: grid;
  grid-template-columns: 60px 1fr 28px;
  align-items: flex-start;
  gap: 6px;
}
.advf-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.advf-add-row {
  display: flex;
}
.advf-add {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: left;
}
.advf-add:hover { background: var(--bg-card); color: var(--text); }
.advf-add-caret {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0 4px;
  font-size: 10px;
}

.advf-delete-all {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12.5px;
  padding: 8px 8px;
  margin-top: 4px;
  text-align: left;
}
.advf-delete-all:hover { color: #e25a6b; }

/* Dropdowns opened from the composer (connector / add / overflow). */
.advf-connector-menu,
.advf-add-menu,
.advf-overflow-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.advf-opt {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.advf-opt:hover,
.advf-opt.advf-opt-active { background: rgba(108, 140, 255, 0.12); }
.advf-opt-active { outline: 1px solid var(--accent); }
.advf-opt-title { font-size: 13px; font-weight: 500; }
.advf-opt-desc { font-size: 11.5px; color: var(--text-muted); }
.advf-opt.advf-opt-danger { color: #e25a6b; }
.advf-opt.advf-opt-danger:hover { background: rgba(226, 90, 107, 0.08); }

/* AC #38 Wave 2 — type-aware footer totals row. Sticky to the
   bottom of the scrollable table so it acts as a spreadsheet-
   style totals surface. Replaces the legacy `#stats-bar` for new
   visitors; click a cell (with ▾) to switch the aggregation. */
/* AC #38 post-ship — the table footer totals row is no longer
   sticky-bottom by default. It renders as the natural last row
   of the table (only visible when the user has scrolled to the
   end). A peek overlay appears when the user hovers the bottom
   zone of the `.table-wrapper` or focuses a row near the end
   (see .tfoot-peek below). Toggle hidden entirely via Settings
   → "Show table footer totals". */
tfoot #table-foot {
  position: static;
  z-index: 9;
}
body.table-foot-off #view-table tfoot,
body.table-foot-off #view-collection tfoot { display: none !important; }

/* AC #38 post-ship — page footer ("Built with ❤️ for Diana")
   toggle. Separate from the table-footer toggle. */
body.page-foot-off > .workspace > footer,
body.page-foot-off .workspace footer { display: none !important; }

/* Peek overlay — when .table-wrapper receives the .peek-foot
   class (set by pointer hover near the bottom or by focus on
   the last N rows), the tfoot row detaches into a pinned-to-
   bottom view. Selectors use id to beat the `tfoot #table-foot`
   base rule's specificity. */
.table-wrapper.peek-foot tfoot #table-foot,
.table-wrapper.peek-foot tfoot #collection-table-foot {
  position: sticky;
  bottom: 0;
  z-index: 9;
}
.table-wrapper.peek-foot tfoot td {
  box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.25);
}
.tfoot-cell {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tfoot-cell[data-col] { cursor: pointer; }
.tfoot-cell[data-col]:hover { color: var(--text); background: var(--bg-hover, rgba(108,140,255,0.06)); }
.tfoot-empty { background: var(--bg-card); border-top: 1px solid var(--border); }
.tfoot-agg-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-right: 6px;
}
.tfoot-agg-value {
  color: var(--text);
  font-weight: 500;
}
.tfoot-caret {
  margin-left: 4px;
  opacity: 0.4;
  font-size: 10px;
}
.tfoot-cell:hover .tfoot-caret { opacity: 0.9; }

.tfoot-agg-popover {
  position: fixed;
  z-index: 800;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 4px;
  min-width: 140px;
}
.tfoot-agg-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  text-transform: capitalize;
}
.tfoot-agg-opt:hover { background: rgba(108, 140, 255, 0.12); color: var(--accent); }

/* AC #38 Wave 6 (DR-260420) — legacy chrome permanently
   hidden. The `body.legacy-*` feature flags from Waves 2-4
   are retired; the footer totals row, icon cluster + column
   caret menus, and the Reports workspace are the only
   authoring surfaces. Elements remain in DOM as mirror
   targets for Reports' export pipeline. */
#stats-bar, #collection-stats-bar {
  display: none !important;
}

/* AC #38 Wave 3 — top-right icon cluster. Small, muted; each
   icon opens a popover below itself. No permanent controls. */
.table-header-cluster {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 0 8px;
}
.thc-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.08s, border-color 0.08s, background 0.08s;
  padding: 0;
}
.thc-icon svg { display: block; }
.thc-icon:hover,
.thc-icon:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-card);
  outline: none;
}
/* Active state — the icon lights up in accent blue when its
   corresponding chrome has a non-default value (filter set,
   non-default sort, etc.). Mirrors Notion's sort-is-active
   treatment in the user's reference. Uses `!important` so the
   accent wins over any hover/focus state on the same element. */
.thc-icon.thc-active,
.thc-icon.thc-active:hover,
.thc-icon.thc-active:focus-visible { color: var(--accent) !important; }
.thc-icon.thc-active:focus-visible { border-color: var(--accent); background: var(--bg-card); }
/* Filter icon also tints accent when the bar is open (even
   with no filters yet) so users see the toggle state. */
.thc-icon.thc-bar-open:not(.thc-active) {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-card);
}

/* Inline search field — replaces the Search icon in place
   when expanded. Borders match the cluster icons' hover
   state; focus-within accents the outline; a small × clear
   button fades in when the input has content. */
.thc-search-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 8px;
  height: 28px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 280px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  transition: border-color 0.1s;
}
.thc-search-field[hidden] { display: none; }
.thc-search-field:focus-within { border-color: var(--accent); color: var(--text); }
.thc-search-glyph { flex-shrink: 0; }
.thc-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  height: 100%;
}
.thc-search-input::placeholder { color: var(--text-muted); }
.thc-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.thc-search-clear {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.08s, background 0.08s;
}
.thc-search-clear[hidden] { display: none; }
.thc-search-clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }

/* ═══ AC #38 post-ship — column context menu ═══ */
.table-popover:has(.ccm-body) { max-width: 300px; min-width: 260px; padding: 6px; }
.ccm-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ccm-rename {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}
.ccm-rename .th-type-glyph {
  margin: 0;
  width: 24px;
  height: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
}
.ccm-rename-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  min-width: 0;
}
.ccm-rename {
  position: relative;
}
.ccm-rename-reset {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ccm-rename-reset:hover { color: var(--text); }
.ccm-sep {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.ccm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  width: 100%;
}
.ccm-item:hover:not(:disabled) { background: rgba(108, 140, 255, 0.12); }
.ccm-item:disabled,
.ccm-item.ccm-disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }
.ccm-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}
.ccm-item:hover .ccm-icon { color: var(--text); }
.ccm-label { flex: 1; }
.ccm-chevron { color: var(--text-muted); font-size: 14px; }

.table-popover:has(.ccm-submenu) { max-width: 220px; min-width: 200px; padding: 4px; }
.ccm-submenu { display: flex; flex-direction: column; gap: 2px; }

/* Column-header caret — revealed on row hover or when the <th>
   is focused via keyboard. Clicking sorts the column via the
   existing handler; clicking the caret opens the per-column
   menu. */
thead th .th-caret {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 0 4px;
  font-size: 10px;
  cursor: pointer;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.08s, color 0.08s;
}
/* Column resize handle — 4px strip on the th's right edge.
   Invisible by default; hover highlights. Pointer-drag resizes;
   double-click resets to the default width. */
thead th .th-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  transition: background 0.08s;
  z-index: 11;
}
thead th:hover .th-resize-handle,
thead th .th-resize-handle:hover { background: var(--accent); opacity: 0.6; }
body.col-resizing,
body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
thead th:hover .th-caret,
thead th:focus-within .th-caret,
thead th .th-caret:focus-visible { opacity: 0.7; }
thead th .th-caret:hover { opacity: 1; color: var(--accent); }

/* Shared popover surface for Wave 2 footer-aggs and Wave 3
   cluster + column menus. */
.table-popover {
  position: fixed;
  z-index: 810;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  padding: 8px;
  min-width: 220px;
  max-width: 340px;
  font-size: 13px;
  color: var(--text);
}
.table-popover .tp-body { display: flex; flex-direction: column; gap: 8px; }
.table-popover .tp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.table-popover .tp-input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
}
.table-popover .tp-input:focus { outline: none; border-color: var(--accent); }
.table-popover .tp-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.table-popover .tp-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.table-popover .tp-action {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.table-popover .tp-action:hover { border-color: var(--accent); color: var(--accent); }
.table-popover .tp-action-muted { color: var(--text-muted); }
.table-popover .tp-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  color: var(--text-muted);
}
.table-popover .tp-chip-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.table-popover .tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--text);
}
.table-popover .tp-chip-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.table-popover .tp-chip-close:hover { color: #e25a6b; }
.table-popover .tp-empty {
  color: var(--text-muted);
  font-size: 11.5px;
}
.table-popover .tp-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.table-popover .tp-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  text-transform: capitalize;
}

/* Legacy filter-bar (Wave 6) — permanently hidden. */
#filter-bar-root, #collection-filter-bar {
  display: none !important;
}

/* Reports icon (Wave 3 placeholder) — the export-bar can be
   revealed for the current session via the Reports popover's
   "Show legacy export bar" escape hatch. */
#export-bar.force-show { display: flex !important; }

/* AC #39 Wave 4 — Legacy export-bar hidden by default; users
   with the feature flag on re-enable via Settings. Removed
   in Wave 6. */
/* Legacy export-bar (Wave 6) — permanently hidden. Inputs
   inside (#report-title, #report-note, …) remain in DOM as
   mirror targets for the Reports workspace's export
   pipeline. */
#export-bar, #collection-export-bar {
  display: none !important;
}

/* AC #39 Wave 4 — Reports workspace. Three-card vertical stack
   (draft editor, template gallery, saved-report library). No
   toolbar — inputs + actions live inside their cards. */
#view-reports { flex-direction: column; gap: 16px; padding-bottom: 48px; }
#view-reports.active { display: flex; flex-direction: column; }

.reports-hd h2 {
  margin: 12px 0 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.reports-sub {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.reports-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reports-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.reports-card-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.reports-state-line {
  margin: 6px 0 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.reports-state-line strong { color: var(--text); }
.reports-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.reports-field {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.reports-field input,
.reports-field select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.reports-field input:focus,
.reports-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.reports-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.reports-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.reports-btn:hover { border-color: var(--accent); color: var(--accent); }
.reports-btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.reports-btn-accent:hover { filter: brightness(1.1); color: #fff; }
.reports-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.reports-template-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.08s, background 0.08s;
}
.reports-template-card:hover { border-color: var(--accent); background: var(--bg-card); }
.rtc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.rtc-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.reports-library {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.reports-empty {
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 10px 0;
}
.reports-library-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.rl-title { font-size: 13px; color: var(--text); }
.rl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rl-open {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.rl-open:hover { border-color: var(--accent); color: var(--accent); }

/* Hide topbar-views + table-only chrome while in Reports mode. */
body.reports-mode .topbar-views { visibility: hidden !important; }

/* AC #38 Wave 6 — Cmd+K command palette. Centred modal with a
   search input + virtualised result list. Opens on Cmd+K /
   Ctrl+K / `/` (outside an editable). */
.command-palette {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 950;
}
.command-palette[hidden] { display: none; }
.cmd-palette-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 560px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.cmd-palette-input {
  background: var(--bg);
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
}
.cmd-palette-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow: auto;
  flex: 1;
}
.cmd-palette-section {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.cmd-palette-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
}
.cmd-palette-item.active {
  background: rgba(108, 140, 255, 0.15);
  color: var(--accent);
}
.cmd-palette-sec {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cmd-palette-item.active .cmd-palette-sec { color: var(--accent); }
.cmd-palette-empty {
  padding: 16px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}
.cmd-palette-hint {
  border-top: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
}
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
/* AC #38 post-ship — unified row hover. Every td in the
   hovered row picks up the hover bg, including sticky-left
   cells whose own solid bg would otherwise mask the row's
   background. */
tbody tr:hover td { background: var(--bg-hover); }
tbody tr.selected td { background: rgba(108, 140, 255, 0.08); }
tbody tr.selected:hover td { background: rgba(108, 140, 255, 0.14); }
td {
  /* Breathing-space pass — Notion parity. Vertical padding +
     a bit more horizontal keep the row airy; height ~40 px. */
  padding: 12px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
td.country-name {
  font-weight: 500;
  white-space: normal;
  min-width: 140px;
  /* Flex the hero cell so the text sits left and the OPEN
     peek pill sits right-aligned + vertically centred without
     a magic margin hack. */
  display: flex;
  align-items: center;
  gap: 8px;
}
td.country-name > *:first-child { flex: 1; min-width: 0; }
td.entity-hero {
  display: flex;
  align-items: center;
  gap: 8px;
}
td.entity-hero > *:first-child { flex: 1; min-width: 0; }
thead th {
  padding: 12px 14px;
}

/* AC #38 post-ship — row-hover drag handle (Notion 2×3 dot).
   Sits in the sel-col, to the left of the checkbox. Revealed
   on row hover / focus; pointer-drag reorders the row. */
td.sel-col { position: relative; }
.row-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 20px;
  color: var(--text-muted);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.08s, color 0.08s;
  vertical-align: middle;
  margin-right: 4px;
  user-select: none;
}
#view-table tbody tr:hover .row-drag,
#view-collection tbody tr:hover .row-drag,
.row-drag:focus-visible { opacity: 0.7; }
.row-drag:hover { opacity: 1; color: var(--text); }
.row-drag:active { cursor: grabbing; }
.row-drag-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 2px);
  grid-template-rows: repeat(3, 2px);
  gap: 1.5px;
}
.row-drag-grid span {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}
/* Ghost styling for the row under drag + drop-target marker */
tr.row-dragging { opacity: 0.45; background: rgba(108, 140, 255, 0.08); }
tr.row-drop-above > td { box-shadow: 0 -2px 0 0 var(--accent) inset; }
tr.row-drop-below > td { box-shadow: 0 2px 0 0 var(--accent) inset; }
body.row-reordering,
body.row-reordering * { cursor: grabbing !important; user-select: none !important; }

/* Side-peek affordance inside the hero cell: a compact
   outlined pill — grey stroke, no fill, small icon + "OPEN"
   label. Right-aligned via `float` so the cell's text keeps
   its natural left-aligned flow. Revealed only on row hover
   or keyboard focus, per the Notion convention. */
.row-peek {
  /* Lives inside a flex hero cell; pushed to the right edge
     via `margin-left: auto`. Breathing-space padding to match
     the other hover icons' visual weight. */
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.08s, color 0.08s, border-color 0.08s;
  height: 20px;
}
.row-peek-label { line-height: 1; }
.row-peek-icon { flex-shrink: 0; }
#view-table tbody tr:hover .row-peek,
#view-collection tbody tr:hover .row-peek,
.row-peek:focus-visible { opacity: 0.85; }
.row-peek:hover {
  opacity: 1;
  color: var(--text);
  border-color: var(--text-muted);
}

/* Truncated cell affordance — a faint ▾ glyph on the right
   hints at "there's more here." Revealed on row hover + cell
   focus. Clicking / hovering / pressing Enter opens a
   popover with the full text (see .cell-reveal below). */
td.td-truncated { cursor: help; position: relative; }
td.td-truncated::after {
  content: "▾";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s;
}
tbody tr:hover td.td-truncated::after,
td.td-truncated:focus-visible::after { opacity: 0.7; }

.cell-reveal {
  position: fixed;
  z-index: 840;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  padding: 8px 10px;
  max-width: 480px;
  font-size: 13px;
  color: var(--text);
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.45;
}
.cell-reveal-empty { color: var(--text-muted); font-style: italic; }
td .code { color: var(--text-muted); font-family: var(--mono); font-size: 12px; }

/* AC #38 post-ship — countries table gets a selection column
   (matching the collection tables) + a sticky-left Country
   column so the row identity stays visible during horizontal
   scroll. Both the sel-col and the country-name col remain
   pinned; the rest of the row scrolls underneath. */
#view-table thead th.sel-col,
#view-table tbody td.sel-col,
#view-table tfoot td.sel-col {
  width: 40px;
  padding: 0 8px;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 11;
  background: var(--bg);
}
/* Keep sel-col as table-cell (default). `display: flex` on a
   <td> breaks the column layout — the cell collapses and
   subsequent columns render behind it. The drag handle and
   checkbox inside sit as inline-block siblings; the cell's
   `text-align: center` + their own `vertical-align: middle`
   give them the intended visual alignment without needing
   flex on the cell itself. */
#view-table tbody td.sel-col .row-drag,
#view-table tbody td.sel-col .row-check { vertical-align: middle; }
/* Header stays pinned top AND left (two-axis freeze for the
   top-left corner cell). The footer's sticky-bottom only
   activates under `.peek-foot` on the wrapper. */
#view-table thead th.sel-col { top: 0; z-index: 13; }
#view-table tfoot td.sel-col { background: var(--bg-card); z-index: 10; }
#view-table .table-wrapper.peek-foot tfoot td.sel-col { bottom: 0; }
#view-table tbody tr:hover td.sel-col { background: var(--bg-hover); }
#view-table tbody tr.selected td.sel-col { background: rgba(108, 140, 255, 0.08); }
#view-table tbody tr.selected:hover td.sel-col { background: rgba(108, 140, 255, 0.14); }

#view-table thead th[data-sort="name"],
#view-table tbody td.country-name,
#view-table tfoot td.tfoot-cell[data-col="name"] {
  position: sticky;
  left: 40px;
  z-index: 10;
  background: var(--bg);
}
/* AC #38 post-ship — user can toggle the Country column's
   freeze via the column context menu. When unfrozen, drop
   the sticky-left so the column scrolls with the rest. */
body.col-unfrozen-name #view-table thead th[data-sort="name"],
body.col-unfrozen-name #view-table tbody td.country-name,
body.col-unfrozen-name #view-table tfoot td.tfoot-cell[data-col="name"] {
  position: static;
  left: auto;
  z-index: auto;
}

/* Wrap content per column — class derived from the column's
   key. Targets both the body cell and the header so wide
   content can breathe on multiple lines. */
body[class*="col-wrap-"] #view-table tbody td[data-col-key] {
  white-space: normal;
  word-wrap: break-word;
  overflow: visible;
  text-overflow: unset;
}
/* Only wrap the columns that are actually flagged. */
body:not(.col-wrap-name) #view-table tbody td[data-col-key="name"],
body:not(.col-wrap-region) #view-table tbody td[data-col-key="region"],
body:not(.col-wrap-mandate) #view-table tbody td[data-col-key="mandate"],
body:not(.col-wrap-standard) #view-table tbody td[data-col-key="standard"],
body:not(.col-wrap-platform) #view-table tbody td[data-col-key="platform"],
body:not(.col-wrap-mandate_date) #view-table tbody td[data-col-key="mandate_date"],
body:not(.col-wrap-ubl) #view-table tbody td[data-col-key="ubl"],
body:not(.col-wrap-factura) #view-table tbody td[data-col-key="factura"],
body:not(.col-wrap-tax_id) #view-table tbody td[data-col-key="tax_id"],
body:not(.col-wrap-confidence) #view-table tbody td[data-col-key="confidence"],
body:not(.col-wrap-tags) #view-table tbody td[data-col-key="tags"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
}
#view-table thead th[data-sort="name"] { top: 0; z-index: 12; }
#view-table tfoot td.tfoot-cell[data-col="name"] { z-index: 9; background: var(--bg-card); }
#view-table .table-wrapper.peek-foot tfoot td.tfoot-cell[data-col="name"] { bottom: 0; }
#view-table tbody tr:hover td.country-name { background: var(--bg-hover); }
#view-table tbody tr.selected td.country-name { background: rgba(108, 140, 255, 0.08); }
#view-table tbody tr.selected:hover td.country-name { background: rgba(108, 140, 255, 0.14); }

/* Countries bulk-action bar — appears only while rows are
   selected; slotted above the table-wrapper. */
.countries-bulk-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 4px 0 8px;
  background: rgba(108, 140, 255, 0.08);
  border: 1px solid var(--accent);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--text);
  width: fit-content;
}
.cbb-count { font-weight: 600; color: var(--accent); }
.cbb-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.cbb-btn:hover { border-color: var(--accent); color: var(--accent); }
.cbb-btn-muted { color: var(--text-muted); }

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-mandatory { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.badge-partial { background: rgba(251, 191, 36, 0.15); color: var(--yellow); }
.badge-planned { background: rgba(108, 140, 255, 0.15); color: var(--accent); }
.badge-voluntary { background: rgba(139, 143, 163, 0.15); color: var(--text-muted); }
.badge-proposed { background: rgba(167, 139, 250, 0.15); color: var(--purple); }
.badge-none { background: rgba(139, 143, 163, 0.08); color: #555; }

.scope-chips { display: flex; gap: 4px; }
.scope-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.scope-chip.scope-green { background: rgba(52, 211, 153, 0.2); color: var(--green); }
.scope-chip.scope-yellow { background: rgba(251, 191, 36, 0.2); color: var(--yellow); }
.scope-chip.scope-gray { background: rgba(139, 143, 163, 0.1); color: #555; }

/* Tags */
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(108, 140, 255, 0.12);
  color: var(--accent);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.tag-chip .tag-remove {
  background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: 12px; line-height: 1;
  padding: 0; opacity: 0.5;
}
.tag-chip .tag-remove:hover { opacity: 1; }
.tag-add-wrap {
  display: flex; gap: 4px; margin-top: 6px;
}
/* Visibility scope chip — see AR-260418. Signals which tier owns a column. */
.vis-chip {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  opacity: 0.85;
}
.vis-chip-public   { background: rgba(83, 200, 157, 0.18); color: #53c89d; }
.vis-chip-paywalled { background: rgba(247, 167, 52, 0.18); color: #f7a734; }
.vis-chip-tenant   { background: rgba(108, 140, 255, 0.18); color: #6c8cff; }
.vis-chip-user     { background: rgba(160, 130, 220, 0.22); color: #c2a8f2; }
.tag-add-input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font);
}
.tag-add-input:focus { outline: none; border-color: var(--accent); }
.tag-add-input::placeholder { color: #555; }
.tag-available { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag-available .tag-pick {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(139, 143, 163, 0.1);
  color: var(--text-muted);
  border: 1px dashed rgba(139, 143, 163, 0.3);
  border-radius: 12px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.1s;
}
.tag-available .tag-pick:hover {
  background: rgba(108, 140, 255, 0.12);
  color: var(--accent);
  border-color: rgba(108, 140, 255, 0.3);
}
/* Tag popover is now the shared multi-select-popover via filter-bar 0.2.0 */
.td-tags { white-space: normal !important; }

.badge-native { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.badge-adaptable { background: rgba(251, 191, 36, 0.15); color: var(--yellow); }
.badge-incompatible { background: rgba(248, 113, 113, 0.15); color: var(--red); }
.badge-unknown { background: rgba(139, 143, 163, 0.15); color: var(--text-muted); }

.badge-implemented { background: rgba(52, 211, 153, 0.2); color: var(--green); border: 1px solid rgba(52, 211, 153, 0.3); }
.badge-researched { background: rgba(108, 140, 255, 0.15); color: var(--accent); }
.badge-not-started { background: rgba(139, 143, 163, 0.08); color: var(--text-muted); }

/* Confidence badges (AC #25 — TS-260414 Phase 7). Colours align with
   MAP_DIMENSIONS.confidence. Shape redundancy for deuteranopia /
   tritanopia via the .conf-glyph prefix in confBadge(). */
.badge-verified     { background: rgba(52, 211, 153, 0.2);  color: var(--green);  border: 1px solid rgba(52, 211, 153, 0.3); }
.badge-web-verified { background: rgba(34, 211, 238, 0.18); color: var(--cyan); }
.badge-high         { background: rgba(108, 140, 255, 0.15); color: var(--accent); }
.badge-low          { background: rgba(251, 191, 36, 0.15);  color: var(--yellow); }
.badge.conf .conf-glyph { display: inline-block; margin-right: 4px; font-weight: 700; opacity: 0.95; }

/* AC #26: Demo-mode chip. Deliberately breaks the .conf glyph
   family — demo signals a different axis (control realness) from
   confidence (data truth). Dashed border + no glyph + uppercase
   text reads as "not a solid claim" without shouting. */
.badge-demo {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  vertical-align: middle;
}
/* When demo_mode is off, any element tagged data-demo-mock is
   hidden entirely (including any children). Implemented via body
   class rather than attribute selectors for simpler toggling. */
body:not(.demo-mode-on) [data-demo-mock] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Map View                                                            */
/* ------------------------------------------------------------------ */
.map-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.map-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.map-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.map-tile .tile-code {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}
.map-tile .tile-name {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-tile .tile-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  position: absolute;
  top: 4px; right: 4px;
}
.map-tile[data-mandate="mandatory"] { border-left: 3px solid var(--green); }
.map-tile[data-mandate="partial"] { border-left: 3px solid var(--yellow); }
.map-tile[data-mandate="planned"] { border-left: 3px solid var(--accent); }
.map-tile[data-mandate="voluntary"] { border-left: 3px solid var(--text-muted); }
.map-tile[data-mandate="proposed"] { border-left: 3px solid var(--purple); }
.map-tile[data-mandate="none"] { border-left: 3px solid #333; }

.map-tile[data-ubl="native"] .tile-dot { background: var(--green); }
.map-tile[data-ubl="adaptable"] .tile-dot { background: var(--yellow); }
.map-tile[data-ubl="incompatible"] .tile-dot { background: var(--red); }

.map-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* ------------------------------------------------------------------ */
/* Detail Panel (right-side drawer)                                    */
/* ------------------------------------------------------------------ */
.detail-panel {
  position: fixed;
  top: 41px;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: calc(100vh - 41px);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0.2s;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.detail-panel.visible {
  transform: translateX(0);
  visibility: visible;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.detail-header h2 { font-size: 18px; font-weight: 600; }
.detail-expand {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
}
.detail-expand:hover { color: var(--text); background: var(--bg-hover); }

.detail-pin {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
}
.detail-pin:hover { color: var(--text); background: var(--bg-hover); }
.detail-panel.pinned .detail-pin { color: var(--accent); }

/* Pin context menu (right-click on pinnable rows) */
.pin-ctx-menu {
  position: fixed;
  z-index: 400;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 180px;
  padding: 4px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  font-size: 13px;
}
.pin-ctx-item {
  padding: 8px 16px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pin-ctx-item:hover { background: var(--bg-hover); }
.pin-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Split 2-pane — independently scrollable right-rail list workspace. */
.side-pane {
  position: fixed;
  top: 41px;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 50vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: none;
  flex-direction: column;
  z-index: 180;
  box-shadow: -6px 0 16px rgba(0,0,0,0.2);
}
.side-pane.visible { display: flex; }
.side-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.side-pane-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.side-pane-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 8px;
}
.side-pane-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
.side-pane-close:hover { color: var(--text); background: var(--bg-hover); }
.side-pane-search {
  padding: 8px 16px 0;
  flex-shrink: 0;
}
.side-pane-search input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  box-sizing: border-box;
}
.side-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
}
.side-pane-row {
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-pane-row:hover { background: var(--bg-hover); }
.side-pane-row-title { font-size: 13px; color: var(--text); font-weight: 500; }
.side-pane-row-sub { font-size: 11px; color: var(--text-muted); }

/* Shrink the main workspace when side pane is open. Detail panel
   (pin) slides further right to share the same rail area. */
body.side-pane-open .workspace { margin-right: 480px; }
@media (max-width: 1280px) {
  body.side-pane-open .side-pane { width: 40vw; }
  body.side-pane-open .workspace { margin-right: 40vw; }
}

/* ============================================================== */
/* Reader — full-screen document viewer with N-up comparison      */
/* ============================================================== */
/* Reader is a shell-level sibling of .shell inside .workspace.
   When visible it takes .shell's flex slot; .shell is hidden via
   body.reader-mode below. Sidebar, topbar, and footer remain
   visible — layout invariance per IN-260419. */
.reader {
  background: var(--bg);
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.reader.visible { display: flex; }
/* When the N-up overlay Reader is visible, hide the shell so the
   Reader takes its flex slot. Uses :has() so toggling is purely
   CSS-driven off the Reader's own visibility class. */
.workspace:has(> .reader.visible) > .shell { display: none; }
.reader-header {
  height: 48px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--sidebar-bg);
}
.reader-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.2px;
}
.reader-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.reader-back-btn:hover { color: var(--text); border-color: var(--accent); }
.reader-breadcrumbs {
  font-size: 11px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.reader-breadcrumbs .crumb {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
}
.reader-breadcrumbs .crumb:hover { border-color: var(--accent); color: var(--text); }
.reader-breadcrumbs .crumb-sep { opacity: 0.5; }
.reader-layout-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.reader-layout-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid var(--border);
  min-width: 28px;
}
.reader-layout-btn:last-child { border-right: none; }
.reader-layout-btn:hover { color: var(--text); background: var(--bg-hover); }
.reader-layout-btn.active { color: var(--accent); background: rgba(108,140,255,0.12); }
.reader-sync-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.reader-sync-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(108,140,255,0.08); }
.reader-sync-btn:hover { color: var(--text); }
.reader-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 2px 8px; border-radius: 6px;
}
.reader-close:hover { color: var(--text); background: var(--bg-hover); }
.reader-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  overflow: hidden;
}
.reader-toc {
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--sidebar-bg);
}
.reader-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.reader-toc a:hover { background: var(--bg-hover); color: var(--text); }
.reader-toc a.active { background: rgba(108,140,255,0.14); color: var(--accent); }
.reader-columns {
  min-height: 0;
  display: grid;
  grid-auto-rows: 100%;
  overflow-x: auto;
}
.reader-column {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.reader-column:last-child { border-right: none; }
.reader-col-head {
  flex-shrink: 0;
  height: 44px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bg-card);
}
.reader-col-picker {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  min-width: 0;
}
.reader-col-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.reader-col-close:hover { color: var(--text); background: var(--bg-hover); }
.reader-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 20px 28px;
  scroll-behavior: auto;
}
/* Reader — single-item "invite to compare" panel.
   When the Reader is showing exactly one item, the second grid
   slot is occupied by this invite instead of being empty, so
   the active column doesn't need to fill 100% of the viewport. */
.reader-compare-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 24px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  text-align: center;
  overflow-y: auto;
}
.reader-compare-illust {
  width: 160px;
  height: 80px;
  display: flex;
  gap: 4px;
  align-items: flex-end;
}
.reader-compare-illust div {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 100%;
  flex: 1;
  animation: rci-fade 1.4s ease-in-out infinite alternate;
}
.reader-compare-illust div:nth-child(1) {
  background: rgba(120, 160, 255, 0.15);
  border-color: var(--accent);
  animation: none;
}
.reader-compare-illust div:nth-child(2) { animation-delay: 0s; }
.reader-compare-illust div:nth-child(3) { animation-delay: 0.3s; }
.reader-compare-illust div:nth-child(4) { animation-delay: 0.6s; }
@keyframes rci-fade {
  from { opacity: 0.35; transform: translateY(4px); }
  to   { opacity: 0.85; transform: translateY(0); }
}
.reader-compare-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  margin: 0;
}
.reader-compare-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 340px;
  margin: 0;
}
.reader-compare-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.reader-compare-opt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.reader-compare-opt:hover,
.reader-compare-opt:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(120, 160, 255, 0.18);
}
.reader-compare-opt-visual {
  display: flex;
  gap: 3px;
  height: 18px;
}
.reader-compare-opt-visual span {
  display: block;
  width: 8px;
  background: var(--bg-hover);
  border-radius: 2px;
}
.reader-compare-opt-visual span.primary { background: var(--accent); }
.reader-compare-opt-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}
.reader-compare-opt-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Mobile: below the single column, not beside it. */
@media (max-width: 900px) {
  .reader-compare-invite {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 28px 16px;
  }
}

/* Row action bar — floating action icons anchored to the right
   edge of the hovered table row. Replaces the prior
   #hover-preview card (which duplicated visible column data)
   with discoverable direct-action icons. One floating element,
   positioned dynamically, so every tr[data-code|data-slug] in
   Tables and Collection Tables participates without per-render
   DOM changes. */
.row-action-bar {
  position: fixed;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: linear-gradient(to left, var(--bg-card) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  z-index: 700;
  pointer-events: auto;
}
.row-action-bar.visible { display: inline-flex; }
.row-action-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  padding: 0;
}
.row-action-btn:hover,
.row-action-btn:focus-visible {
  color: var(--accent);
  background: rgba(120, 160, 255, 0.1);
  border-color: var(--accent);
  outline: none;
}
.row-action-btn svg { display: block; }
/* Touch devices: no hover events fire, so surface icons
   inline in each row via a stylistic fallback. Kept simple —
   hover-only on desktop, always-inline on narrow viewports. */
@media (max-width: 768px) {
  .row-action-bar { display: inline-flex; position: static; box-shadow: none; padding: 2px 0; }
}

/* Cross-column section correlation: when the Reader has 2+
   columns, hovering a section's h3 in one column highlights
   the same-named section in every other column. Pattern
   borrowed from the Phase 4 split-pane Reader
   (markdown ↔ projection) — same "bidirectional hover sync"
   applied to the comparison Reader. */
.reader-section > h3 { cursor: pointer; }
.reader-section.peer-highlight {
  background: rgba(108, 140, 255, 0.06);
  box-shadow: inset 3px 0 0 var(--accent);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.reader-section.peer-highlight > h3 {
  color: var(--accent);
}
.reader-section.peer-source > h3 {
  color: var(--accent);
}
/* Field-level peer sync — finer-grained than section sync.
   Fires when the user hovers a .detail-field or a tbody <tr>
   inside a section. Same "bidirectional hover" pattern as
   section sync; stronger tint on the source row, subtler on
   the matching peer(s). */
.reader-section .detail-field.field-peer-highlight,
.reader-section tbody tr.field-peer-highlight {
  background: rgba(108, 140, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.reader-section .detail-field.field-peer-source,
.reader-section tbody tr.field-peer-source {
  background: rgba(108, 140, 255, 0.14);
  box-shadow: inset 3px 0 0 var(--accent);
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
/* Padding tweak so the inset bar renders cleanly at the left. */
.reader-section .detail-field { padding-left: 6px; border-radius: 3px; }
.reader-section tbody tr { transition: background 0.1s ease; }

.reader-section {
  scroll-margin-top: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.reader-section:last-child { border-bottom: none; }
.reader-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 0 0 12px;
  font-weight: 600;
}
.reader-section .detail-field { margin-bottom: 10px; }
.reader-section table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.reader-section td, .reader-section th { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
@media (max-width: 900px) {
  .reader-body { grid-template-columns: 140px 1fr; }
  .reader-toc { font-size: 11px; padding: 10px 6px; }
  .reader-content { padding: 16px 16px; }
}
@media (max-width: 640px) {
  .reader-body { grid-template-columns: 1fr; }
  .reader-toc { display: none; }
}

.detail-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius);
}
.detail-close:hover { color: var(--text); background: var(--bg-hover); }
.detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.detail-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(42, 46, 58, 0.5);
}
.detail-field:last-child { border-bottom: none; }
.detail-field label {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: 16px;
}
.detail-field .value {
  font-size: 14px;
  text-align: right;
}

/* Profile accordion in detail panel */
.profile-divider {
  border-top: 1px solid var(--border);
  margin: 12px 0 4px;
}
.profile-section {
  border-bottom: 1px solid rgba(42, 46, 58, 0.4);
}
.profile-section:last-child { border-bottom: none; }
.profile-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
  font-weight: 600;
}
.profile-toggle:hover { background: var(--bg-hover); }
.profile-toggle .chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.profile-section.open .profile-toggle .chevron { transform: rotate(90deg); }
.profile-content {
  display: none;
  padding: 0 24px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.profile-section.open .profile-content { display: block; }
.profile-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
  margin: 6px 0;
}
.profile-content table th,
.profile-content table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(42, 46, 58, 0.3);
  text-align: left;
  font-size: 12px;
  white-space: normal;
}
.profile-content table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}
.profile-content h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--text);
}
.profile-content p { margin: 4px 0; }
.profile-content ul, .profile-content ol { padding-left: 18px; margin: 4px 0; }
.profile-no-data {
  padding: 12px 24px;
  font-size: 12px;
  color: #555;
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Region Headers                                                      */
/* ------------------------------------------------------------------ */
.region-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 0 4px 0;
}

/* ------------------------------------------------------------------ */
/* Geo Map View                                                        */
/* ------------------------------------------------------------------ */
.geo-map-container {
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Legend overlay box */
.geo-legend-box {
  position: absolute;
  top: calc(50% - 44px);
  left: 16px;
  width: 206px;
  background: rgba(15, 17, 23, 0.88);
  border: none;
  border-radius: var(--radius);
  padding: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.geo-legend-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px 0;
}
.geo-legend-header {
  padding: 4px 10px 8px;
}
.geo-legend-select {
  width: 100%;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
}
.geo-legend-select:focus { outline: none; border-color: var(--accent); }
.geo-legend-items {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.geo-legend-items .legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-muted);
}
.geo-legend-items .legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-info-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: help;
  padding: 0 2px;
  opacity: 0.5;
  vertical-align: middle;
}
.legend-info-btn:hover { opacity: 1; }
.legend-help {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 25;
}
.legend-help.visible { display: block; }
.legend-help .lh-summary {
  margin-bottom: 8px;
  color: var(--text);
}
.legend-help .lh-value {
  margin-bottom: 4px;
}
.legend-help .lh-value strong {
  color: var(--text);
  font-weight: 500;
}
/* ------------------------------------------------------------------ */
/* Landing view (game-like first-visit screen).                        */
/* Shown only when no saved view exists; clicking a card routes        */
/* the user to the chosen dimension and persists that choice so the    */
/* landing is not shown again unless reset.                            */
/* ------------------------------------------------------------------ */
/* #view-landing becomes a flex item of .shell via
   .tab-content.active (display:flex, flex:1). The .landing
   wrapper takes the full vertical space by flex-growing rather
   than height:100% (which doesn't resolve inside an
   implicit-height flex parent). */
.tab-content#view-landing.active { padding: 0; overflow: hidden; }
.landing {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  background: radial-gradient(ellipse at center, var(--bg-card) 0%, var(--bg) 70%);
}
/* Subtle constellation background — pure CSS radial gradients
   simulating a scatter of dim dots. No image asset needed. */
.landing-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(120,160,255,0.25), transparent 2px),
    radial-gradient(1px 1px at 78% 18%, rgba(120,160,255,0.18), transparent 2px),
    radial-gradient(1px 1px at 34% 76%, rgba(120,160,255,0.22), transparent 2px),
    radial-gradient(1px 1px at 62% 40%, rgba(120,160,255,0.15), transparent 2px),
    radial-gradient(1px 1px at 84% 68%, rgba(120,160,255,0.22), transparent 2px),
    radial-gradient(1px 1px at 18% 54%, rgba(120,160,255,0.18), transparent 2px),
    radial-gradient(1px 1px at 50% 12%, rgba(120,160,255,0.2), transparent 2px),
    radial-gradient(1px 1px at 70% 88%, rgba(120,160,255,0.17), transparent 2px),
    radial-gradient(2px 2px at 26% 36%, rgba(120,160,255,0.32), transparent 3px),
    radial-gradient(2px 2px at 72% 60%, rgba(120,160,255,0.28), transparent 3px);
  pointer-events: none;
  animation: landing-bg-drift 30s linear infinite alternate;
}
@keyframes landing-bg-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(12px, -8px); }
}
.landing-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 48px 48px;
  animation: landing-fade-in 0.5s ease both;
}
@keyframes landing-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-hero { text-align: center; margin-bottom: 48px; }
.landing-title {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin: 0 0 6px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-sub {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.landing-sub #landing-pulse {
  color: var(--accent);
  font-weight: 600;
}
.landing-counts {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 0 0 32px;
  flex-wrap: wrap;
}
.landing-counts > div { display: flex; flex-direction: column; align-items: center; }
.landing-counts .lc-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
}
/* AC #25: landing coverage line — honest disclosure of data provenance.
   Appears under the 4 headline count badges. Each segment uses the
   same shape+colour grammar as .badge.conf so the vocabulary is
   consistent across map / table / landing. */
.landing-coverage {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  letter-spacing: 0.2px;
}
.landing-coverage .lcov {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.landing-coverage .lcov-g { font-weight: 700; opacity: 0.95; }
.landing-coverage .lcov-n { font-weight: 600; color: var(--text); }
.lcov.lcov-verified     { color: var(--green);  background: rgba(52, 211, 153, 0.15); }
.lcov.lcov-web-verified { color: var(--cyan);   background: rgba(34, 211, 238, 0.15); }
.lcov.lcov-high         { color: var(--accent); background: rgba(108, 140, 255, 0.12); }
.lcov.lcov-low          { color: var(--yellow); background: rgba(251, 191, 36, 0.12); }
.lcov.lcov-unknown      { color: var(--text-muted); background: rgba(139, 143, 163, 0.12); }

/* AC #27: CLI ↔ site reconciliation — discreet landing disclosure.
   Muted, non-CTA; fits under the coverage line. */
.landing-cli-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-align: center;
}
.landing-cli-note code {
  background: rgba(139, 143, 163, 0.12);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
}
.landing-cli-note .landing-cli-link {
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
}
.landing-cli-note .landing-cli-link:hover,
.landing-cli-note .landing-cli-link:focus-visible {
  text-decoration: underline;
  outline: none;
}
.landing-cli-note .landing-cli-sep {
  margin: 0 4px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* AC #31: desktop-only notice — hidden at comfortable widths,
   visible on narrower viewports (phones / small tablets / split
   screens). CSS-only gating; no JS. */
.landing-desktop-notice {
  display: none;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--yellow);
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.3);
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 999px) {
  .landing-desktop-notice { display: block; }
}

.landing-counts .lc-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.landing-tagline {
  font-size: 18px;
  color: var(--text);
  margin: 12px 0 0;
  opacity: 0.85;
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0 0 40px;
}
.landing-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px 20px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.landing-card:hover,
.landing-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(120, 160, 255, 0.18);
}
.landing-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.landing-ic {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.landing-card-t {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.landing-card-s {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.landing-skip { text-align: center; }
.landing-skip-btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  padding: 10px 18px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.landing-skip-btn:hover,
.landing-skip-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
/* When body.landing-mode is active, hide workspace chrome that
   would compete with the landing. Uses display:none (not
   visibility:hidden) so the hidden elements don't consume
   space in .shell's flex-column layout — otherwise they push
   the landing below the fold. */
body.landing-mode #topbar-views,
body.landing-mode #stats-bar,
body.landing-mode #filter-bar-root,
body.landing-mode .export-bar,
body.landing-mode #bulk-bar,
body.landing-mode .filters { display: none !important; }
/* Mobile */
@media (max-width: 768px) {
  .landing-inner { padding: 40px 20px 32px; }
  .landing-title { font-size: 40px; }
  .landing-counts { gap: 20px; }
  .landing-counts .lc-value { font-size: 22px; }
}

/* ------------------------------------------------------------------ */
/* Onboarding — spotlight tour + ambient coach-marks.
   Two complementary features:
   1. Spotlight tour: runs once after first card-dismiss, teaches
      the main flows via 4 numbered steps. Skippable; replayable
      via the "Take a tour" link in the sidebar.
   2. Coach-marks: small "?" pills hovering next to key UI
      clusters. Toggled by the "Hints" sidebar link.
   Both are zero-dependency, pure-DOM. */

/* ---- Spotlight tour ---- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: auto;
  display: none;
}
.tour-overlay.visible { display: block; }
/* Spotlight uses an outsized box-shadow to dim everything OUTSIDE
   its rect — no image mask needed. The inner rect stays
   transparent so the highlighted element reads normally. */
.tour-spotlight {
  position: fixed;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68);
  z-index: 901;
  pointer-events: none;
  transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}
.tour-tooltip {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 18px 20px 14px;
  width: 320px;
  max-width: calc(100vw - 40px);
  z-index: 902;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  transition: top 0.22s ease, left 0.22s ease, opacity 0.15s ease;
}
.tour-tooltip h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--accent);
  letter-spacing: -0.2px;
}
.tour-tooltip p { margin: 0 0 14px; color: var(--text); }
.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.tour-progress {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.tour-actions { display: flex; gap: 6px; align-items: center; }
.tour-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.tour-btn:hover,
.tour-btn:focus-visible {
  color: var(--text);
  border-color: var(--text-muted);
  outline: none;
}
.tour-btn-primary {
  background: var(--accent);
  color: #0b0d13;
  border-color: var(--accent);
}
.tour-btn-primary:hover,
.tour-btn-primary:focus-visible {
  color: #fff;
  background: var(--accent);
}
.tour-skip {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.tour-skip:hover { color: var(--text); }

/* ---- Coach-marks ---- */
.coach-pill {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #0b0d13;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: help;
  z-index: 600;
  box-shadow: 0 0 0 2px var(--bg), 0 6px 16px rgba(120, 160, 255, 0.35);
  font-family: inherit;
  border: none;
  transition: transform 0.15s;
}
body.hints-visible .coach-pill { display: inline-flex; }
.coach-pill:hover,
.coach-pill:focus-visible {
  transform: scale(1.15);
  outline: none;
}
.coach-popover {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 260px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  z-index: 601;
  display: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.coach-popover.visible { display: block; }

/* ---- Sidebar tour + hints links ---- */
.sidebar-onboarding {
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar.collapsed .sidebar-onboarding { display: none; }
.sidebar-onboard-btn {
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-onboard-btn:hover,
.sidebar-onboard-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.sidebar-onboard-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  background: rgba(120, 160, 255, 0.08);
}

/* ------------------------------------------------------------------ */
/* Freeze panes across the app.
   - Tables: first-column sticky (in addition to the existing
     sticky thead); the header ⨯ column intersection gets the
     highest z-index so it overlays both axes.
   - Country Timeline: sticky left-label column (row name stays
     visible when horizontally scrolling the year track).
   - Collection Timeline: sticky .ct-label column.
   - Coverage: sticky page header as the view scrolls.
   - Reader: sticky .reader-section h3 titles as each column
     scrolls long records.
   - Activity / Edit-events: sticky workspace header (belt-and-
     suspenders; the flex layout already keeps it in place).
   - Tiles (countries): sticky map-legend while grid scrolls.
   All changes are additive — display/position stays unchanged
   when the feature isn't triggered. */

/* Tables — first column sticky, plus corner-cell z-index */
.table-wrapper table thead th:first-child,
#collection-table-wrap table thead th:first-child,
#view-collection table thead th:first-child {
  left: 0;
  /* Corner (row 0 ⨯ col 0): highest z among stickies. */
  z-index: 12;
}
.table-wrapper table tbody td:first-child,
#collection-table-wrap table tbody td:first-child,
#view-collection table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 8;
}
/* Existing thead th sticky rule already applies; make the
   first-child position:sticky explicit for the cross-axis. */
.table-wrapper table thead th,
#collection-table-wrap table thead th,
#view-collection table thead th { z-index: 10; }
.table-wrapper table thead th:first-child,
#collection-table-wrap table thead th:first-child,
#view-collection table thead th:first-child { position: sticky; }

/* Country Timeline — sticky first column (.timeline-label). */
.timeline-row .timeline-label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-card);
}
.timeline-row.is-header .timeline-label {
  /* Top-left corner: stickier than the rest on both axes. */
  z-index: 7;
  background: var(--bg);
}

/* Collection Timeline — sticky first column (.ct-label). */
.ct-row .ct-label,
.ct-header .ct-header-label {
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 1;
}
.ct-header .ct-header-label { z-index: 4; background: var(--bg); }

/* Coverage — sticky page header as the view scrolls. */
.coverage-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 6;
}

/* Reader — sticky section h3 titles as each column scrolls. */
.reader-section h3 {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 6px 0 8px;
  margin: 0 0 12px;
  z-index: 2;
  /* Clear the existing border so the sticky bg doesn't double-
     up with the section's bottom border. */
  border-bottom: 1px solid var(--border);
}

/* Activity / Edit-events — defensive sticky header (the flex
   layout already keeps the header out of scroll, but if future
   refactors swap the inner scroll pattern this guarantees the
   header stays). */
.activity-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 6;
}

/* Tiles (countries) — sticky map-legend while the region grid
   scrolls. */
#view-tiles .map-legend {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 6;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

/* Placeholder shown while world-paths.json streams in (relay #18).
   Matches the rendered-map aspect ratio so there's no CLS on
   paint swap. */
.geo-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 6px;
  pointer-events: none;
}
.geo-map-placeholder.hidden { display: none; }
.geo-map-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
#geo-map-svg {
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
}
#geo-map-svg path {
  stroke: #182030;
  stroke-width: 0.4;
  transition: fill 0.2s, opacity 0.2s, stroke 0.15s;
  cursor: default;
}
#geo-map-svg path.tracked {
  cursor: pointer;
  stroke-width: 0.5;
}
#geo-map-svg path.tracked:hover {
  stroke: var(--text);
  stroke-width: 1;
  filter: brightness(1.2);
}
#geo-map-svg path.highlighted {
  stroke: #f7a734;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px rgba(247,167,52,0.7));
  opacity: 1 !important;
}
.map-highlight-badge {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 30;
  background: rgba(15,17,23,0.88);
  color: var(--text);
  border: 1px solid rgba(247,167,52,0.5);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(6px);
}
.map-highlight-badge button {
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; line-height: 1;
}
.map-highlight-badge button:hover { color: var(--text); }

#geo-map-svg path.dimmed {
  opacity: 0.15;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
footer {
  height: 45px;
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Knowledge Panel (right-side drawer)                                 */
/* ------------------------------------------------------------------ */
.knowledge-panel {
  position: fixed;
  top: 41px;
  left: 240px;
  width: 480px;
  max-width: 90vw;
  height: calc(100vh - 41px);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0.2s;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.knowledge-panel.visible {
  transform: translateX(0);
  visibility: visible;
}
.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.knowledge-header h2 { font-size: 18px; font-weight: 600; }
.knowledge-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius);
}
.knowledge-close:hover { color: var(--text); background: var(--bg-hover); }
.knowledge-search {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.knowledge-search input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font);
}
.knowledge-search input:focus { outline: none; border-color: var(--accent); }
.knowledge-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.knowledge-category {
  padding: 16px 24px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.knowledge-entry {
  padding: 12px 24px;
  border-bottom: 1px solid rgba(42, 46, 58, 0.4);
  cursor: pointer;
  transition: background 0.1s;
}
.knowledge-entry:hover { background: var(--bg-hover); }
.knowledge-entry.expanded { background: var(--bg); }
.knowledge-entry .ke-term {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.knowledge-entry .ke-definition {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.knowledge-entry .ke-detail {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(42, 46, 58, 0.4);
}
.knowledge-entry.expanded .ke-detail { display: block; }
.ke-detail-row {
  margin-bottom: 8px;
}
.ke-detail-row label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}
.ke-detail-row .value {
  font-size: 13px;
  line-height: 1.5;
}
.ke-see-also {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ke-see-also-link {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(108, 140, 255, 0.1);
  color: var(--accent);
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s;
}
.ke-see-also-link:hover { background: rgba(108, 140, 255, 0.2); }
.knowledge-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Term Tooltips                                                       */
/* ------------------------------------------------------------------ */
.term-link {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.term-link:hover {
  background: rgba(108, 140, 255, 0.14);
  border-bottom-style: solid;
}
.term-tooltip {
  display: none;
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  z-index: 300;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.term-tooltip.visible { display: block; }
.term-tooltip .tt-term {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
}
.term-tooltip .tt-def {
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ */
/* Settings Panel                                                      */
/* ------------------------------------------------------------------ */
.settings-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 7px 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  align-self: flex-end;
}
.settings-btn:hover { color: var(--text); border-color: var(--text-muted); }
/* Skip-link (WCAG 2.4.1 — bypass blocks). Visible only when
   keyboard focus lands on it; stays out of sight otherwise. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bg-card);
  color: var(--accent);
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 0 0 6px 0;
  font-size: 13px;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* Admin edit-mode harness (DR-260419-factura-admin-edit-mode).
   When body.edit-mode-on is active, any element marked with
   .edit-editable gets a dashed outline + hover affordance.
   Subsequent relays mark the specific regions; this relay only
   ships the CSS rules and the toggle/shortcut infrastructure. */
body.edit-mode-on #edit-mode-btn {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(120, 160, 255, 0.12);
}
body.edit-mode-on .edit-editable {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
  cursor: pointer;
  transition: outline-style 0.08s, background 0.08s;
}
body.edit-mode-on .edit-editable:hover {
  outline-style: solid;
  background: rgba(120, 160, 255, 0.06);
}
body.edit-mode-on .topbar-view.dragging { opacity: 0.5; }
body.edit-mode-on .topbar-view.drag-target {
  box-shadow: -2px 0 0 var(--accent);
}
body.edit-mode-on .sidebar-nav-item.dragging { opacity: 0.5; }
body.edit-mode-on .sidebar-nav-item.drag-target {
  box-shadow: 0 -2px 0 var(--accent);
}
.edit-hidden { display: none !important; }
.sidebar-hidden-badge {
  display: none;
  margin: 8px 16px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
body.edit-mode-on .sidebar-hidden-badge { display: block; }
.sidebar-hidden-badge:hover {
  color: var(--text);
  border-color: var(--accent);
}
.edit-inline-input {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  outline: none;
  min-width: 80px;
  max-width: 220px;
}
/* Reset-all button: surfaced next to the edit-mode pencil,
   visible only while edit-mode is ON. */
#edit-reset-all-btn { display: none; }
body.edit-mode-on #edit-reset-all-btn {
  display: inline-flex;
  color: var(--text-muted);
}
body.edit-mode-on #edit-reset-all-btn:hover { color: var(--red, #e25); border-color: var(--red, #e25); }
/* Keyboard-focus ring for edit-mode focusable items. */
body.edit-mode-on .edit-draggable:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Undo toast — reuses the edit-mode-toast visual idiom but is
   its own instance so edit-mode can swap in/out independently. */
.edit-undo-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 780;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.edit-undo-toast.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.edit-undo-toast button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.edit-undo-toast button:hover { border-color: var(--accent); }
.topbar-view-hidden-badge {
  display: none;
  align-items: center;
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 4px;
  font-family: inherit;
}
body.edit-mode-on .topbar-view-hidden-badge { display: inline-flex; }
.topbar-view-hidden-badge:hover {
  color: var(--text);
  border-color: var(--accent);
}
.edit-ctx-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 6px;
  min-width: 180px;
  padding: 4px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 770;
  font-size: 13px;
  display: none;
}
.edit-ctx-menu.visible { display: block; }
.edit-ctx-item {
  padding: 6px 14px;
  cursor: pointer;
  color: var(--text);
}
.edit-ctx-item:hover { background: var(--bg-hover); color: var(--accent); }
.edit-ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.edit-ctx-flyout {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 6px;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 770;
  font-size: 13px;
  display: none;
}
.edit-ctx-flyout.visible { display: block; }
.edit-ctx-flyout-hd {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.edit-mode-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 40px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 780;
  pointer-events: none;
}
.edit-mode-toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.edit-mode-toast kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  margin: 0 2px;
}
.settings-panel {
  position: fixed;
  top: 41px;
  right: 0;
  width: 300px;
  max-width: 90vw;
  height: calc(100vh - 41px);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  z-index: 210;
}
.settings-panel.visible { transform: translateX(0); visibility: visible; }
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
.settings-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius);
}
.settings-close:hover { color: var(--text); background: var(--bg-hover); }
.settings-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.settings-col {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  cursor: grab;
  transition: background 0.1s;
  user-select: none;
}
.settings-col:hover { background: var(--bg-hover); }
.settings-col.dragging { opacity: 0.4; }
.settings-col.drag-over { border-top: 2px solid var(--accent); }
.settings-col .drag-handle {
  color: var(--text-muted);
  font-size: 12px;
  cursor: grab;
  flex-shrink: 0;
}
.settings-col .col-name {
  flex: 1;
  font-size: 13px;
}
.settings-col .col-eye {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}
.settings-col .col-eye:hover { color: var(--text); }
.settings-col .col-eye.hidden { opacity: 0.3; }

/* Settings panel sections */
.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 20px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-section-title:first-child { padding-top: 8px; }
.settings-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.settings-reset-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.settings-reset-btn:hover { color: var(--text); background: var(--bg-hover); }
.settings-scope-hd {
  padding: 10px 20px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.settings-scope-hd strong { color: var(--text); }
.settings-empty {
  padding: 14px 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.settings-pref-row {
  padding: 8px 20px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-pref-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings-pref-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.settings-pref-row select,
.settings-pref-row input[type="text"],
.settings-pref-row input[type="number"],
.settings-pref-row textarea {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.settings-pref-row textarea { resize: vertical; min-height: 48px; }

/* Collection tiles */
.coll-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.coll-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coll-tile:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.coll-tile-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.coll-tile-title .fresh-dot { flex-shrink: 0; }
.coll-tile-title .evidence-chip { margin-left: auto; }
/* Country tiles: name grows, ISO code sits on the right in
   muted mono — mirrors the collection tile's evidence-chip
   slot so both tile families line up visually. */
.coll-tile-title .coll-tile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-tile-title .coll-tile-code {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
  flex-shrink: 0;
}
/* UBL chip tint — mirrors the badge colours used in the
   table view. */
.coll-tile-chip.ubl-native { color: var(--green); background: rgba(52, 211, 153, 0.12); }
.coll-tile-chip.ubl-adaptable { color: var(--yellow); background: rgba(251, 191, 36, 0.12); }
.coll-tile-chip.ubl-incompatible { color: var(--red); background: rgba(248, 113, 113, 0.12); }
.coll-tile-chip.ubl-unknown { color: var(--text-muted); }
.coll-tile-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coll-tile-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.coll-tile-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--mono);
}
.coll-tile-chip.relevance-high { color: #53c89d; background: rgba(83,200,157,0.1); }
.coll-tile-chip.relevance-medium { color: #f7a734; background: rgba(247,167,52,0.1); }

/* Collection map — highlight jurisdictions */
#collection-map-wrap .geo-country { fill: var(--bg-card); stroke: var(--border); stroke-width: 0.4; }
#collection-map-wrap .geo-country.hit { fill: #f7a734; }
#collection-map-wrap .geo-country.hit:hover { fill: #ffbf66; cursor: pointer; }

/* Hide country-scoped topbar controls on non-country workspaces */
body.collection-mode #filter-view,
.workspaces-popover {
  position: fixed;
  top: 48px;
  right: 12px;
  z-index: 220;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  min-width: 280px;
  max-width: 360px;
  padding: 10px 0;
}
.workspaces-hd {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 4px 14px 8px;
}
.workspaces-list { max-height: 260px; overflow-y: auto; }
.workspaces-empty { padding: 10px 14px; color: var(--text-muted); font-size: 12px; font-style: italic; }
.workspace-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.workspace-row:hover { background: var(--bg-hover); }
.workspace-row .ws-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-row .ws-del {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px;
}
.workspace-row .ws-del:hover { color: var(--text); background: var(--bg); }
.workspaces-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.workspaces-save-row {
  display: flex;
  gap: 6px;
  padding: 4px 14px 2px;
}
.workspaces-save-row input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 12px;
  min-width: 0;
}
.activity-ee-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  vertical-align: middle;
}
.activity-ee-badge:hover { filter: brightness(1.2); }

/* ===== Edit events workspace ===== */

.ee-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.ee-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) max-content max-content max-content max-content;
  gap: 14px;
  align-items: center;
  font-size: 13px;
}
.ee-row:hover { background: var(--bg-hover); }
.ee-row:last-child { border-bottom: none; }
.ee-primary { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-secondary { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.ee-state {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ee-state-saved { background: rgba(108, 140, 255, 0.15); color: #a2b7ff; }
.ee-state-under-review { background: rgba(247, 167, 52, 0.15); color: #ffc776; }
.ee-state-approved { background: rgba(83, 200, 157, 0.15); color: #9ee6bf; }
.ee-state-rejected { background: rgba(226, 90, 107, 0.15); color: #f4a5b0; }
.ee-state-reverted { background: rgba(128, 128, 128, 0.2); color: #bbb; }
.ee-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 12px; font-style: italic; }

/* Edit-event detail modal (reuses diff-shell structure) */
.ee-detail-section {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.ee-detail-section:first-child { border-top: 0; }
.ee-detail-hd {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ee-detail-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.ee-detail-meta dt { color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px; }
.ee-detail-meta dd { margin: 0; color: var(--text); font-family: var(--mono); font-size: 11px; }
.ee-history-entry {
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.ee-history-entry:last-child { border-bottom: none; }
.ee-history-transition {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  margin-right: 6px;
}
.ee-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ee-action-btn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.ee-action-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.ee-action-btn.approve:hover { border-color: #53c89d; color: #9ee6bf; }
.ee-action-btn.reject:hover { border-color: #e25a6b; color: #f4a5b0; }

/* ===== Record diff viewer ===== */

.diff-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 440;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.diff-overlay.visible { display: flex; }
.diff-shell {
  width: 1100px;
  max-width: 96vw;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.diff-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.diff-title { font-size: 14px; font-weight: 600; flex: 1; }
.diff-path {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
}
.diff-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.diff-close:hover { color: var(--text); background: var(--bg-hover); }
.diff-body {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
  min-height: 480px;
}
.diff-commits {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.diff-commit {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.diff-commit:hover { background: var(--bg-hover); }
.diff-commit.active { background: rgba(108, 140, 255, 0.12); }
.diff-commit-subject {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diff-commit-meta {
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--mono);
  margin-top: 4px;
}
.diff-pane {
  overflow: auto;
  background: var(--bg);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  color: var(--text);
}
.diff-line { display: block; padding: 0 6px; }
.diff-line-add { background: rgba(83, 200, 157, 0.15); color: #9ee6bf; }
.diff-line-del { background: rgba(226, 90, 107, 0.15); color: #f4a5b0; }
.diff-line-hunk { color: #6c8cff; font-weight: 600; margin-top: 10px; }
.diff-line-meta { color: var(--text-muted); font-weight: 500; }
.diff-empty {
  padding: 40px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
.detail-history {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
}
.detail-history:hover { color: var(--text); background: var(--bg-hover); }

/* ===== Record editor modal ===== */

.record-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 450;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.record-editor-overlay.visible { display: flex; }
.record-editor-shell {
  width: 960px;
  max-width: 95vw;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.record-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.record-editor-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.record-editor-path {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
}
.record-editor-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.record-editor-close:hover { color: var(--text); background: var(--bg-hover); }
.record-editor-body {
  flex: 1;
  overflow: auto;
  padding: 14px 18px;
}
.record-editor-reason {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.record-editor-textarea {
  width: 100%;
  min-height: 420px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  box-sizing: border-box;
  resize: vertical;
  tab-size: 2;
}
.record-editor-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.record-editor-status {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
}
.record-editor-status.ok { color: #53c89d; }
.record-editor-status.err { color: #e25a6b; }
.record-editor-btn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.record-editor-btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.record-editor-btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.record-editor-btn.primary:hover { filter: brightness(1.1); }
.record-editor-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* "Edit" button inside the pin detail header */
.detail-edit {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
}
.detail-edit:hover { color: var(--text); background: var(--bg-hover); }

/* ===== Accessibility ===== */

/* Suppress default focus outline on mouse clicks; show a crisp ring
   only when the user is navigating via keyboard. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--accent);
  color: white;
  padding: 8px 12px;
  border-radius: var(--radius);
  z-index: 500;
  text-decoration: none;
  font-size: 13px;
}
.skip-link:focus { top: 8px; }

/* Collection tile selection */
.coll-tile { position: relative; }
.coll-tile.selected {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.08);
}
.tile-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
  margin: 0;
}
.coll-tile:hover .tile-check,
.coll-tile.selected .tile-check,
.coll-tile:focus-within .tile-check { opacity: 1; }

/* Collection row selection */
#collection-table-wrap table th.sel-col,
#collection-table-wrap table td.sel-col {
  width: 32px;
  padding: 0 6px;
  text-align: center;
}
#collection-table-wrap table td.sel-col { cursor: default; }
#collection-table-wrap table tr[data-slug].selected td { background: rgba(108, 140, 255, 0.08); }
#collection-table-wrap table tr[data-slug].selected .entity-name { color: var(--text); }
/* AC-28-exempt a11y / consistency fix (2026-04-20):
   The native checkbox default renders with a loud white fill on
   the dark theme, louder than any other chrome element. Match
   the sidebar's outline-only icon grammar: transparent interior
   by default, muted border; border brightens on hover/focus;
   checked state uses the accent stroke with a small check glyph
   instead of a solid fill. Stdlib CSS only. */
.row-check,
#collection-table-wrap .row-check {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1.5px solid var(--text-muted);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, background-color 0.12s, opacity 0.08s;
  flex-shrink: 0;
}
/* AC #38 post-ship — Notion-style: hover-only row checkbox.
   Header select-all stays always visible; tbody cells hide
   until the row is hovered, focused, or already selected. */
#view-table tbody .row-check,
#view-collection tbody .row-check { opacity: 0; }
#view-table tbody tr:hover .row-check,
#view-table tbody tr.selected .row-check,
#view-table tbody .row-check:checked,
#view-table tbody .row-check:focus-visible,
#view-collection tbody tr:hover .row-check,
#view-collection tbody tr.selected .row-check,
#view-collection tbody .row-check:checked,
#view-collection tbody .row-check:focus-visible { opacity: 1; }
.row-check:hover,
#collection-table-wrap .row-check:hover {
  border-color: var(--text);
}
.row-check:focus-visible,
#collection-table-wrap .row-check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.row-check:checked,
#collection-table-wrap .row-check:checked {
  border-color: var(--accent);
  background: transparent;
}
/* Header select-all: indeterminate state = partial selection.
   Browser's native :indeterminate applies when the box is neither
   fully checked nor unchecked (we set it explicitly via
   `el.indeterminate = true`). Show a filled accent square with
   a horizontal dash to communicate "some rows selected." */
.row-check:indeterminate,
#collection-table-wrap .row-check:indeterminate {
  border-color: var(--accent);
  background: var(--accent);
}
.row-check:indeterminate::after,
#collection-table-wrap .row-check:indeterminate::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
  border-radius: 1px;
}
/* Header checkbox always visible (the tbody hover-only rule
   was scoped to `tbody`; this is belt-and-braces). */
#view-table thead .row-check,
#view-collection thead .row-check { opacity: 1; }
.row-check:checked::after,
#collection-table-wrap .row-check:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 3px;
  height: 7px;
  border: solid var(--accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.row-check:indeterminate,
#collection-table-wrap .row-check:indeterminate {
  border-color: var(--accent);
}
.row-check:indeterminate::after,
#collection-table-wrap .row-check:indeterminate::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 7px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* AC #36 — Graph-mode interaction chrome.
   Detail panel (right side), context menu (canvas + node), and
   view-tab non-interactive treatment while in graph mode. */
.graph-detail-panel {
  position: fixed;
  top: 41px;
  right: 0;
  bottom: 40px;
  width: 340px;
  max-width: 90vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.18s ease-out;
  z-index: 280;
  overflow-y: auto;
  color: var(--text);
}
.graph-detail-panel.visible { transform: translateX(0); }
.graph-detail-panel .gdp-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
}
.graph-detail-panel .gdp-title {
  font-size: 15px;
  font-weight: 600;
  padding-right: 32px;
}
.graph-detail-panel .gdp-sub {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.graph-detail-panel .gdp-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.graph-detail-panel .gdp-close:hover { color: var(--text); }
.graph-detail-panel .gdp-body {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
}
.graph-detail-panel .gdp-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 8px 10px;
  background: rgba(108, 140, 255, 0.06);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin-bottom: 12px;
}
.graph-detail-panel .gdp-expansions { display: flex; flex-direction: column; gap: 6px; }

.graph-context-menu {
  position: fixed;
  z-index: 410;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 4px;
  display: none;
  font-family: var(--font);
}
.graph-context-menu.visible { display: block; }
.graph-context-menu .gcm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.graph-context-menu .gcm-item:hover,
.graph-context-menu .gcm-item:focus-visible {
  background: rgba(108, 140, 255, 0.12);
  outline: none;
}
.graph-context-menu .gcm-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  opacity: 0.9;
}
.graph-context-menu .gcm-short {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--mono);
  opacity: 0.7;
}
.graph-context-menu .gcm-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

/* AC #10 (Wave 1B) — relation-expansion buttons in the detail panel. */
.graph-detail-panel .gdp-exp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.graph-detail-panel .gdp-exp-btn:hover,
.graph-detail-panel .gdp-exp-btn:focus-visible {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.08);
  outline: none;
}
.graph-detail-panel .gdp-exp-label {
  font-weight: 500;
  text-transform: capitalize;
}
.graph-detail-panel .gdp-exp-count {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(139, 143, 163, 0.12);
  border-radius: 10px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.graph-detail-panel .gdp-exp-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
}

/* AC #9 (Wave 1B) — hover highlight. */
.graph-node.graph-hover-dim,
.graph-edge.graph-hover-dim,
.graph-edge-label.graph-hover-dim { opacity: 0.18; transition: opacity 0.12s; }
.graph-node.graph-hover-on { filter: brightness(1.15); transition: filter 0.12s; }

/* AC #8 (Wave 1B) — legend as filter-to-focus.
   Chips are now buttons; off-state dims the chip, and the
   corresponding nodes fade via .graph-type-off (0.2 opacity,
   no layout change — stable). */
.graph-legend-item {
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 9px;
  border-radius: 12px;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  transition: opacity 0.12s, border-color 0.12s, background 0.12s;
}
.graph-legend-item:hover,
.graph-legend-item:focus-visible {
  border-color: var(--border);
  background: rgba(139, 143, 163, 0.08);
  outline: none;
}
.graph-legend-item.off {
  opacity: 0.45;
  text-decoration: line-through;
}
.graph-node.graph-type-off { opacity: 0.2; transition: opacity 0.12s; }

/* AC #37 Wave 2 — Pattern 9 path highlight. A successful path
   lookup adds .graph-path-on to the N path-member nodes + edges
   and .graph-path-dim to everything else. Dim-plus-accent chosen
   over colour-only so the path reads unambiguously against the
   existing chrome (see DR-260420 Gate A rationale). */
.graph-node.graph-path-dim,
.graph-edge.graph-path-dim,
.graph-edge-label.graph-path-dim {
  opacity: 0.2;
  transition: opacity 0.12s;
}
.graph-node.graph-path-on {
  filter: brightness(1.35);
  transition: filter 0.12s;
}
.graph-node.graph-path-on .graph-node-box {
  stroke: var(--accent);
  stroke-width: 2;
}
.graph-edge.graph-path-on {
  stroke: var(--accent);
  stroke-width: 2.5;
  opacity: 1;
  stroke-dasharray: 6 3;
  animation: graphPathDash 1.2s linear infinite;
}
.graph-edge-label.graph-path-on {
  fill: var(--accent);
  opacity: 1;
}
@keyframes graphPathDash {
  to { stroke-dashoffset: -18; }
}

/* Pattern 9 path UI — two small search inputs + Find / Clear. */
.graph-path-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.graph-path-input {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  width: 110px;
}
.graph-path-input:focus {
  outline: none;
  border-color: var(--accent);
}
.graph-path-arrow {
  color: var(--text-muted);
  font-size: 13px;
  padding: 0 2px;
  user-select: none;
}

/* Pattern 10a — Minimap. Bottom-right corner of the canvas wrap,
   z-index well below the WIP overlay (300) and Reader (500+). */
.graph-minimap {
  position: absolute;
  bottom: 34px;
  right: 12px;
  width: 180px;
  height: 128px;
  background: rgba(15, 17, 23, 0.85);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  z-index: 5;
  user-select: none;
  touch-action: none;
}
.graph-minimap svg {
  display: block;
  cursor: grab;
  width: 180px;
  height: 110px;
}
.graph-minimap:active svg { cursor: grabbing; }
.graph-minimap::after {
  content: "Minimap — drag to pan";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: var(--text-muted);
  pointer-events: none;
  letter-spacing: 0.3px;
}
.mm-edge {
  stroke: var(--text-muted);
  stroke-width: 0.5;
  opacity: 0.4;
}
.mm-edge.mm-dim { opacity: 0.1; }
.mm-edge.mm-path {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 1;
}
.mm-node { opacity: 0.85; }
.mm-node.mm-dim { opacity: 0.2; }
.mm-node.mm-path {
  opacity: 1;
  stroke: var(--accent);
  stroke-width: 0.7;
}
#mm-viewport {
  fill: var(--accent);
  fill-opacity: 0.08;
  stroke: var(--accent);
  stroke-width: 1.5;
  cursor: move;
}

/* AC #37 Wave 3 — Pattern 5 community outline. The entity-type
   fill already carries type; community lives on the stroke so
   the two signals stack without competing. 6-colour palette —
   detected community count typically lands in 4-6 groups at
   the current node count. */
.graph-node .graph-node-box { stroke-width: 0; }
.graph-node[data-community="0"] .graph-node-box { stroke: #ffd166; stroke-width: 2.5; }
.graph-node[data-community="1"] .graph-node-box { stroke: #06aed5; stroke-width: 2.5; }
.graph-node[data-community="2"] .graph-node-box { stroke: #ef476f; stroke-width: 2.5; }
.graph-node[data-community="3"] .graph-node-box { stroke: #b0e57c; stroke-width: 2.5; }
.graph-node[data-community="4"] .graph-node-box { stroke: #d9a3ff; stroke-width: 2.5; }
.graph-node[data-community="5"] .graph-node-box { stroke: #ffa07a; stroke-width: 2.5; }
/* Communities beyond the palette fall back to no stroke — rare
   in practice with ~120 nodes. */

/* Minimap mirrors the same community palette as a stroke so the
   overview picks up cluster structure at a glance. */
.mm-node { stroke-width: 0; }
.mm-node[data-community="0"] { stroke: #ffd166; stroke-width: 0.9; }
.mm-node[data-community="1"] { stroke: #06aed5; stroke-width: 0.9; }
.mm-node[data-community="2"] { stroke: #ef476f; stroke-width: 0.9; }
.mm-node[data-community="3"] { stroke: #b0e57c; stroke-width: 0.9; }
.mm-node[data-community="4"] { stroke: #d9a3ff; stroke-width: 0.9; }
.mm-node[data-community="5"] { stroke: #ffa07a; stroke-width: 0.9; }

/* Pattern 9 (Wave 2) path-on edge/node strokes override the
   community stroke when both apply — accent wins for
   discoverability. Enforced via the more-specific selector. */
.graph-node.graph-path-on .graph-node-box { stroke: var(--accent); stroke-width: 2; }
.mm-node.mm-path { stroke: var(--accent); stroke-width: 0.9; }

/* AC #37 Wave 3 — Pattern 6 semantic zoom. Classes are toggled
   on #graph-view by graphAttachPanZoom()'s apply() handler with
   ±0.05 hysteresis (enter-far at 0.55, exit at 0.65; enter-near
   at 1.45, exit at 1.35). */
.graph-zoom-far .graph-node-sub { display: none; }
.graph-zoom-far .graph-edge-label { display: none; }
.graph-zoom-far .graph-node-label { font-size: 11px; }
.graph-zoom-near .graph-node-label { font-size: 15px; }
.graph-zoom-near .graph-edge-label { font-size: 12px; }

/* AC #37 Wave 4 — breadcrumb pills. Perspective pill uses the
   accent colour; layout suffix is muted, right-aligned. */
.graph-breadcrumbs .crumb-perspective {
  background: rgba(108, 140, 255, 0.14);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.graph-breadcrumbs .crumb-layout {
  color: var(--text-muted);
  font-style: italic;
  padding: 0 4px;
}

/* Perspective manager — light modal over the graph workspace. */
.graph-perspective-manager {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 23, 0.5);
  z-index: 720;
}
.graph-perspective-manager.visible { display: flex; }
.graph-perspective-manager .gpm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 360px;
  max-width: 520px;
  max-height: 70vh;
  overflow: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.graph-perspective-manager .gpm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.graph-perspective-manager .gpm-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}
.graph-perspective-manager .gpm-list {
  list-style: none;
  margin: 0;
  padding: 6px 10px 12px;
}
.graph-perspective-manager .gpm-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px dotted var(--border);
}
.graph-perspective-manager .gpm-apply {
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
.graph-perspective-manager .gpm-apply:hover { color: var(--accent); }
.graph-perspective-manager .gpm-meta {
  color: var(--text-muted);
  font-size: 11.5px;
}
.graph-perspective-manager .gpm-del {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
}
.graph-perspective-manager .gpm-del:hover {
  color: #e25a6b;
  border-color: #e25a6b;
}

/* AC #36 — view-tab bar is a visual signpost (not a
   navigator) while the graph is the active view. Topbar view
   tabs still render but clicks do nothing; the cursor signals
   the mode. The canvas right-click menu becomes the only way
   to switch views; Escape is a keyboard backdoor. */
body.graph-mode .topbar-view[data-view] {
  pointer-events: none;
  opacity: 0.55;
  cursor: not-allowed;
}
body.graph-mode .topbar-view[data-view].active {
  opacity: 0.9;
}

/* AC #34 — Organizations cluster: topbar subtype dropdown.
   Replaces the prose .topbar-logo when the active collection
   is one of the 4 org subtypes. Native <select> for a11y; the
   visual matches the other topbar-logo prose (lowercase label,
   bold weight, same colour). */
.topbar-org-subtype {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  padding: 0 20px 0 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.topbar-org-subtype:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.topbar-org-subtype option {
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

/* AC #33 — WIP overlay pattern.
   Semi-transparent, blurred overlay covering the view content
   area ONLY. Sidebar, topbar and footer remain visible and
   interactive (user explicit directive 2026-04-20). Central
   card describes the WIP state and offers contribution intake.
   Role vocabulary is future-tense; see IN-260420 for Layer B. */
.view-wip-overlay {
  position: fixed;
  /* Respect chrome: topbar is 41px; sidebar is 240px (56px when
     collapsed); footer is 40px. Use the existing sidebar width
     variable if available, else hardcode via CSS var. */
  top: 41px;
  left: 240px;
  right: 0;
  bottom: 40px;
  z-index: 300;                 /* above view content (<300), below Reader (500+) and modals */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 17, 23, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wipFadeIn 160ms ease-out;
}
.sidebar.collapsed ~ .workspace .view-wip-overlay,
body:has(.sidebar.collapsed) .view-wip-overlay {
  left: 56px;
}
@keyframes wipFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.view-wip-card {
  max-width: 520px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  color: var(--text);
}
.view-wip-card .wip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.view-wip-card .wip-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.view-wip-card .wip-cell {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--mono);
  margin-bottom: 10px;
}
.view-wip-card .wip-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 8px;
}
.view-wip-card .wip-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.55;
}
.view-wip-card .wip-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.view-wip-card .wip-ctas .wip-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.12s, background 0.12s;
}
.view-wip-card .wip-ctas .wip-btn:hover,
.view-wip-card .wip-ctas .wip-btn:focus-visible {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.08);
  outline: none;
}
.view-wip-card .wip-ctas .wip-btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.view-wip-card .wip-ctas .wip-btn.primary:hover,
.view-wip-card .wip-ctas .wip-btn.primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.view-wip-card .wip-future {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  line-height: 1.5;
}
.view-wip-card .wip-future a { color: var(--accent); text-decoration: none; }
.view-wip-card .wip-future a:hover { text-decoration: underline; }
/* WIP chip — breaks the confidence-glyph family (different
   axis: view-readiness, not data-truth). Dashed amber border,
   text-only "WIP". */
.badge-wip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.35);
}

/* Hover preview card — peek any row/tile without committing */
.hover-preview {
  position: fixed;
  z-index: 380;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  padding: 12px 14px 10px;
  width: 320px;
  max-width: 80vw;
  font-size: 12px;
  display: none;
  animation: hoverPreviewIn 0.1s ease-out;
}
@keyframes hoverPreviewIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hp-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 10px;
  margin-bottom: 10px;
  font-size: 11px;
}
.hp-fields dt {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.hp-fields dd { color: var(--text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.hp-btn {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s;
}
.hp-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.hp-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Related-entities inline panel (inside detail-panel) */
.related-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.related-hd {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.related-group { margin-bottom: 12px; }
.related-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.related-count {
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: 10px;
  opacity: 0.7;
}
.related-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.related-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid transparent;
}
.related-chip:hover { background: rgba(108,140,255,0.15); border-color: var(--accent); }
.related-more { font-size: 11px; color: var(--text-muted); padding: 3px 6px; font-style: italic; }

/* Sidebar hover tooltip with shortcut hint (Claude Code Desktop style) */
.sidebar-tooltip {
  position: fixed;
  z-index: 400;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  pointer-events: none;
  white-space: nowrap;
}
.sb-tt-label { font-weight: 500; }
.sb-tt-keys { display: inline-flex; align-items: center; gap: 4px; }
.sb-kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  min-width: 12px;
  text-align: center;
  line-height: 1.3;
}
.sb-kbd-sep { color: var(--text-muted); font-size: 10px; }
/* Leader-key "g" hint indicator */
.leader-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 12px;
  font-family: var(--mono);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 400;
  display: none;
}

.share-toast {
  position: fixed;
  top: 48px;
  right: 12px;
  z-index: 230;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Data-error banner (C8). Surfaced when a critical fetch fails. Sits
   under the topbar, one row per failure, with a Retry button. */
.data-error-banner {
  position: fixed;
  top: 44px;
  left: 56px;            /* clear the sidebar */
  right: 12px;
  z-index: 240;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;  /* rows re-enable */
}
.data-error-banner[hidden] { display: none; }
.data-error-row {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(226, 90, 107, 0.12);
  border: 1px solid rgba(226, 90, 107, 0.55);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.data-error-row .err-label { color: #e25a6b; font-weight: 600; }
.data-error-row .err-message { flex: 1; opacity: 0.9; }
.data-error-row .err-detail {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.55;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-error-row .err-retry,
.data-error-row .err-dismiss {
  background: rgba(226, 90, 107, 0.2);
  border: 1px solid rgba(226, 90, 107, 0.55);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.data-error-row .err-retry:hover,
.data-error-row .err-dismiss:hover {
  background: rgba(226, 90, 107, 0.3);
}

body.collection-mode .topbar-view-label,
body.graph-mode #filter-view,
body.graph-mode .topbar-view-label,
body.coverage-mode #filter-view,
body.coverage-mode .topbar-view-label,
body.timeline-mode #filter-view,
body.timeline-mode .topbar-view-label,
body.activity-mode #filter-view,
body.activity-mode .topbar-view-label { display: none; }

/* Views in settings */
.view-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
}
.view-item:hover { background: var(--bg-hover); }
.view-item.is-active { color: var(--accent); }
.view-item .view-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-item .view-star {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; padding: 0 2px;
}
.view-item .view-star.is-default { color: var(--yellow); }
.view-item .view-star:hover { color: var(--yellow); }
.view-item .view-delete {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; padding: 0 2px; opacity: 0;
}
.view-item:hover .view-delete { opacity: 1; }
.view-item .view-delete:hover { color: var(--red); }
.view-item.is-preset .view-delete { display: none; }
.view-tabs-settings-note {
  padding-bottom: 10px;
}
.view-tabs-settings-list {
  display: grid;
  gap: 8px;
}
.view-tab-setting-row {
  display: grid;
  grid-template-columns: max-content max-content minmax(120px, 1fr) max-content;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.view-tab-order {
  display: inline-flex;
  gap: 4px;
}
.view-tab-move {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
}
.view-tab-move:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
}
.view-tab-move:disabled {
  opacity: 0.35;
  cursor: default;
}
.view-tab-visible,
.view-tab-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.view-tab-label-input {
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font);
}
.view-tab-label-input:focus {
  outline: none;
  border-color: var(--accent);
}
.view-save-row {
  display: flex; gap: 6px; padding: 8px 20px;
}
.view-save-row input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font);
}
.view-save-row input:focus { outline: none; border-color: var(--accent); }
.view-save-row button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.view-save-row button:hover { background: var(--accent-hover); }
.view-save-row button.is-update { background: #059669; }

/* Views dropdown */
#filter-view { min-width: 0 !important; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
/* Stats cards fill the row at all widths */
#stats-bar .sb-bar {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Tablet / small-laptop */
@media (max-width: 1200px) {
  #stats-bar .sb-bar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Filter bar fills row; its internal items wrap naturally via flex-wrap */
#filter-bar-root { width: 100%; }
#filter-bar-container .fb-bar { width: 100%; }

@media (max-width: 768px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  #stats-bar .sb-bar { grid-template-columns: repeat(2, 1fr); }
  .filters { flex-direction: column; align-items: stretch; }
  .filter-group select, .filter-group input { min-width: 100% !important; }
  .map-grid { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); }
  .knowledge-panel { width: 100%; max-width: 100vw; }
  .detail-panel { width: 100%; max-width: 100vw; }
}

/* ------------------------------------------------------------------ */
/* §9.9 Settings workspace                                            */
/*   Full-page Settings view. Left category rail + right content       */
/*   pane, modelled on Codex + Claude Code. Replaces the right-slide   */
/*   peek panel as the primary Settings entry-point.                   */
/* ------------------------------------------------------------------ */
#view-settings.active { display: flex; padding: 0; overflow: hidden; }
.settings-workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.settings-rail {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 18px 10px 24px;
  overflow-y: auto;
  background: var(--bg);
}
.settings-rail-group-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 14px 12px 6px;
}
.settings-rail-group-label:first-child { padding-top: 2px; }
.settings-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  border-radius: 6px;
  margin: 1px 2px;
  text-decoration: none;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.settings-rail-item .settings-rail-icon {
  opacity: 0.8;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-rail-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.settings-rail-item:hover .settings-rail-icon { opacity: 1; }
.settings-rail-item.active {
  background: rgba(108, 140, 255, 0.12);
  color: var(--accent);
}
.settings-rail-item.active .settings-rail-icon { opacity: 1; }
.settings-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 28px 40px 48px;
}
.settings-pane-header {
  max-width: 720px;
  margin: 0 auto 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.settings-pane-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.settings-pane-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.settings-pane-body {
  max-width: 720px;
  margin: 0 auto;
}
.settings-pane-body .settings-section {
  margin-bottom: 6px;
}
.settings-pane-body .settings-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-pane-body .settings-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}
.settings-pane-body .settings-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 0;
  line-height: 1.55;
}
.settings-pane-body .settings-pref-row {
  padding: 10px 0;
  border-bottom: 1px solid transparent;
}
.settings-pane-body .settings-pref-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 6px;
}
/* .settings-row padding now lives in the @layer components
 * utility-class block at the top of this file; this unlayered
 * rule retired per F-7.d.1 / relay-61. */
.settings-pane-body #views-list,
.settings-pane-body #settings-list,
.settings-pane-body #collection-settings-list { max-height: none; }
.settings-pane-body .view-save-row,
.settings-pane-body .settings-reset-btn { font-size: 12px; }

@media (max-width: 768px) {
  .settings-rail { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
  .settings-workspace { flex-direction: column; }
  .settings-pane { padding: 18px 18px 36px; }
}