/* ============================================================
   Screens — screen-specific styles
   ============================================================ */

/* ============================================================
   KANBAN (landing)
   ============================================================ */
.kanban-stats {
  display: grid;
  /* auto-fit so 5 stage cards + the optional Total card fit in one row when
   * there's space, but cards stay legible on narrower viewports. Previous
   * `repeat(5, 1fr)` forced the 6th card to wrap onto a row by itself. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--t-fast);
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-label {
  font-size: var(--fs-11);
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-value {
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-foot {
  font-size: var(--fs-11);
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Lifecycle stage bar — the 4 stages */
.lifecycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.lifecycle-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
  overflow: hidden;
}
.lifecycle-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--text-4);
  opacity: 0.5;
}
.lifecycle-card[data-stage='ideation']::before    { background: var(--highlight); }
.lifecycle-card[data-stage='inception']::before   { background: var(--accent); }
.lifecycle-card[data-stage='construction']::before { background: var(--warning); }
.lifecycle-card[data-stage='operation']::before   { background: var(--success); }
.lifecycle-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.lifecycle-card.is-active { border-color: var(--accent); background: var(--accent-100); }
.lifecycle-label {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lifecycle-count { font-size: var(--fs-18); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lifecycle-sub { font-size: var(--fs-11); color: var(--text-4); }

/* Kanban board */
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.board-filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  font-weight: 500;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip svg { width: 12px; height: 12px; }

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  scroll-padding: var(--sp-3);
}
.board-col {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  min-height: 420px;
  max-height: calc(100vh - 380px);
}
.board-col-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.board-col-title {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.board-col-count {
  font-size: var(--fs-11);
  color: var(--text-3);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.board-col-body {
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow-y: auto;
}

.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
}
.task-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.task-card-top { display: flex; align-items: center; gap: var(--sp-2); }
.task-id {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
  font-weight: 500;
}
.task-title {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  color: var(--text-4);
  font-size: var(--fs-11);
}
.task-meta-svc {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: var(--r-1);
}
.task-indicators { margin-left: auto; display: flex; gap: var(--sp-1); }
.indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-1);
  background: var(--bg-3);
  color: var(--text-3);
}
.indicator svg { width: 10px; height: 10px; }
.indicator--conflict { background: var(--danger-100); color: var(--danger); }
.indicator--drift-amber { background: var(--warning-100); color: var(--warning); }
.indicator--drift-red { background: var(--danger-100); color: var(--danger); }
.indicator--mustfix { background: var(--highlight-100); color: var(--highlight); }

/* ============================================================
   TASK DETAIL
   ============================================================ */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-5);
}
.detail-main { min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: var(--sp-3); }

.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.tab {
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.tab .nav-count { font-size: 10px; padding: 0 5px; height: 14px; min-width: 14px; }

.detail-section { margin-bottom: var(--sp-5); }
.detail-section h3 {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3) var(--sp-5);
}
.meta-item .meta-label {
  font-size: var(--fs-11);
  color: var(--text-3);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.meta-item .meta-value { font-size: var(--fs-13); color: var(--text); font-weight: 500; }

/* ============================================================
   KNOWLEDGE BROWSER
   ============================================================ */
.kb-layout {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 0;
  height: calc(100vh - var(--topbar-h));
  width: 100%;
  position: relative;
  transition: grid-template-columns 180ms ease;
}
.kb-layout--no-comments { grid-template-columns: 260px 1fr; }
/* Collapsible panes — toggled via .is-tree-collapsed / .is-comments-collapsed on the grid parent.
 * When a pane collapses, the middle column absorbs the freed width automatically (1fr).          */
.kb-layout.is-tree-collapsed { grid-template-columns: 0 1fr 320px; }
.kb-layout.is-tree-collapsed.is-comments-collapsed { grid-template-columns: 0 1fr 0; }
.kb-layout.is-comments-collapsed { grid-template-columns: 260px 1fr 0; }
.kb-layout.is-tree-collapsed > .kb-tree,
.kb-layout.is-comments-collapsed > .kb-comments {
  overflow: hidden;
  border: 0;
  padding: 0;
}
.kb-layout.is-tree-collapsed > .kb-tree > *,
.kb-layout.is-comments-collapsed > .kb-comments > * { display: none; }

/* Dynamic mid-pane width — when at least one side pane is collapsed, stretch content to full
 * pane width for maximum reading surface. With both side panes open, keep the readable 960px
 * column centred so long-form markdown stays legible. */
.kb-layout .kb-content-inner { max-width: min(960px, 100%); padding: var(--sp-5); margin: 0 auto; }
.kb-layout.is-tree-collapsed .kb-content-inner,
.kb-layout.is-comments-collapsed .kb-content-inner {
  max-width: 100%;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
}

/* In-pane collapse/expand buttons — live INSIDE the tree/comments panes, not floating over the
 * middle pane. Each pane has a tiny header strip with a chevron that collapses it. When collapsed,
 * a narrow "peek" rail appears at the inside edge of the middle pane so the user can expand it. */
.kb-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 40px;
  background: var(--bg-1);
}
.kb-pane-header-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kb-pane-header-meta { font-size: 11px; color: var(--text-4); }
.kb-pane-collapse {
  /* Enough contrast in both themes — outlined chip, not invisible ghost */
  width: 28px; height: 28px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 120ms ease;
}
.kb-pane-collapse:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Peek rail — shows when a pane is collapsed. Uses accent colour tint so it
 * stands out against both dark and light app backgrounds. */
.kb-peek-rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 72px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 120ms ease;
  z-index: 3;
  opacity: 0.85;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.kb-peek-rail:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.kb-peek-rail.kb-peek-left  { left: 0; border-left: 0; border-radius: 0 10px 10px 0; }
.kb-peek-rail.kb-peek-right { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
.kb-peek-rail svg { width: 16px; height: 16px; }

/* Zoom controls (text / markdown / image / code viewers).
 * Outer shell holds the floating toolbar + the scrolling wrap. Toolbar is
 * absolute-positioned on the shell (NOT sticky on the wrap) so it stays
 * pinned to the top-right of the visible viewer area regardless of scroll. */
.fv-zoom-shell {
  position: relative;
  width: 100%;
  /* Flex into the constrained .kb-content-inner above (set by the
   * :has(.fv-zoom-shell) rule). `min-height: 0` is the unlock that lets the
   * shell shrink to its parent's clientHeight rather than ballooning to the
   * markdown's natural height. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fv-zoom-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.fv-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  z-index: 10;
}
/* Default placement when the toolbar lives directly under a viewer shell
 * or an iframe wrapper — pinned top-right, never moves with content. */
.fv-zoom-shell > .fv-zoom-controls,
.fv-iframe-wrap > .fv-zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
}
.fv-zoom-btn {
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fv-zoom-btn:hover { background: var(--bg-3); color: var(--text); }
.fv-zoom-level {
  font-size: 11px; color: var(--text-3); min-width: 36px; text-align: center;
  font-family: var(--font-mono);
}
.fv-zoom-canvas {
  transition: transform 120ms ease;
  will-change: transform;
}

/* PDF viewer — stretched to full height/width of its container.
 * The iframe needs an explicit height; ancestors (kb-content, kb-content-inner)
 * need display:flex so the iframe can flex:1 to fill vertical space. */
iframe[data-file-viewer="pdf"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px;
  flex: 1 1 auto;
}
/* When PDF is the mid-pane content, nuke max-width + padding so it truly fills,
 * and turn the inner container into a flex column so the iframe fills vertically. */
.kb-content:has(iframe[data-file-viewer="pdf"]),
.kb-content:has(iframe[sandbox]) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kb-content:has(iframe[data-file-viewer="pdf"]) .kb-content-inner,
.kb-content:has(iframe[sandbox]) .kb-content-inner {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* When the file pane carries a zoomable shell, push the constraint down so
 * the .fv-zoom-wrap becomes the scroller (rather than the outer .kb-content).
 * Without this, the wrap expands to its own content height and never owns the
 * scrollbar, which breaks BOTH (a) the absolute-positioned toolbar (it scrolls
 * with the document) AND (b) per-file scroll memory (we read .fv-zoom-wrap
 * .scrollTop, which is always 0 if the wrap isn't the scroller).
 *
 * NOTE: do NOT override max-width / padding / margin here — markdown content
 * keeps its centred reading column from the base `.kb-layout .kb-content-inner`
 * rule. The iframe variant (further down) zeroes those out because PDFs/HTML
 * need to bleed edge-to-edge; markdown does not. */
.kb-content:has(.fv-zoom-shell) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kb-content:has(.fv-zoom-shell) > .kb-content-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kb-content:has(iframe[data-file-viewer="pdf"]) .kb-header,
.kb-content:has(iframe[sandbox]) .kb-header {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  margin: 0;
  flex-shrink: 0;
}
.kb-tree {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.kb-version {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kb-cat-tabs {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.kb-cat-tab {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.kb-cat-tab:hover {
  background: var(--bg-3);
  color: var(--text);
}
.kb-cat-tab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.kb-tree-body { padding: var(--sp-2); overflow-y: auto; flex: 1; }
.tree-group {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tree-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2) 6px var(--sp-4);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: all var(--t-fast);
  line-height: 1.3;
}
.tree-item:hover { background: var(--bg-hover); color: var(--text); }
.tree-item.is-active { background: var(--accent-100); color: var(--accent); font-weight: 500; }
.tree-item svg { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; }
.tree-item.is-active svg { color: var(--accent); }
.tree-item .tree-badge { margin-left: auto; font-size: 10px; color: var(--text-4); font-family: var(--font-mono); }

/* Folder tree structure */
.tree-folder {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-2);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: background var(--t-fast);
}
.tree-folder:hover { background: var(--bg-hover); }
.tree-folder-arrow {
  font-size: 10px;
  color: var(--text-3);
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}
.tree-folder .tree-badge {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--font-mono);
}
.tree-folder-icon,
.tree-file-icon,
.wd-tree-folder-icon,
.wd-tree-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  line-height: 1;
}
.tree-folder-icon svg,
.tree-file-icon svg,
.wd-tree-folder-icon svg,
.wd-tree-file-icon svg {
  display: block;
}
/* File-type color semantics — subtle tints on top of the app's dark palette */
.fi-folder    { color: #E6A243; }  /* amber — folders pop without shouting */
.fi-pdf       { color: #D96459; }  /* red — PDFs */
.fi-doc       { color: #8FA6B8; }  /* neutral slate — plain docs / markdown */
.fi-code      { color: #4A90D9; }  /* blue — source code */
.fi-style     { color: #9B6FD4; }  /* purple — CSS / styles */
.fi-config    { color: #7A8A99; }  /* grey — YAML/JSON/config */
.fi-html      { color: #E67A3F; }  /* orange — HTML */
.fi-image     { color: #48B07A; }  /* green — images */
.fi-archive   { color: #B88A56; }  /* brown — archives */
.fi-data      { color: #5BA896; }  /* teal — CSV / SQL / data */
.tree-folder-children { /* expandable */ }

.kb-content {
  overflow-y: auto;
  background: var(--bg);
}
.kb-content-inner {
  max-width: min(960px, 100%);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
}
.kb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.kb-path {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
  margin-bottom: var(--sp-1);
}
.kb-file-title {
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
}

.kb-comments {
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.kb-comments-head {
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Comments pane — densified P6.1. Avatar 22px, font 12px, action buttons
   24×24 icon-only. Pane width assumption: ~280-340px in the 3-pane layout;
   every dimension below has been tuned for that. */
.kb-comments-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}
.comment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
}
.comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.comment .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2, #c9ccd1);
  flex-shrink: 0;
}
.comment-author { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time { font-size: 11px; color: var(--text-4); margin-left: auto; }
.comment-quote {
  font-size: 11px;
  color: var(--text-3);
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 6px;
  margin-bottom: 4px;
  font-style: italic;
  max-height: 36px;
  overflow: hidden;
}
.comment-body {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  word-wrap: break-word;
}
.comment-composer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
}
.comment-composer .input,
.comment-composer textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
}
.comment-composer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.comment-composer-actions .cp-spacer { flex: 1; }
.cp-submit-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 5px;
  background: var(--primary, #4a90d9);
  color: white;
  border: 1px solid var(--primary, #4a90d9);
  cursor: pointer;
  transition: background 120ms ease;
}
.cp-submit-btn:hover { background: #3d7cc0; border-color: #3d7cc0; }
.comment-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.comment-attach-btn:hover {
  background: var(--surface);
  color: var(--primary, #4a90d9);
  border-color: var(--primary, #4a90d9);
}
.comment-attach-btn svg { display: block; }
.cp-pending-attach { font-size: 11px; color: var(--text-3); }
.cp-error {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(217, 100, 89, 0.12);
  color: #d96459;
  font-size: 11px;
  border-radius: 4px;
}
.cp-empty { padding: 14px; font-size: 12px; color: var(--text-4); text-align: center; }
.cp-list { display: flex; flex-direction: column; gap: 8px; }

/* Icon-only action buttons in the comment header. 24×24 each, transparent
   by default, hover swaps the foreground colour. Replaces the chunky text
   buttons from P6 that pushed the header onto two lines on narrow panes. */
.comment-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.comment-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-3);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.comment-action-btn svg { display: block; }
.comment-action-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.comment-delete-btn:hover { color: var(--danger, #d96459); border-color: var(--danger, #d96459); }
.comment-reply-btn:hover  { color: var(--primary, #4a90d9); border-color: var(--primary, #4a90d9); }

/* Legacy class names kept for backwards-compat with any non-bumped consumer. */
.comment-edit-btn, .comment-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-3);
}
.comment-edit-btn svg, .comment-delete-btn svg { display: block; }

.cp-confirm-msg { font-size: 11px; color: var(--text-2); margin-right: 4px; }
.comment-edited {
  font-size: var(--fs-11);
  color: var(--text-4);
  font-style: italic;
  margin-left: 4px;
}
.comment-anchor {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--primary, #4a90d9);
  margin-left: 2px;
  padding: 1px 5px;
  background: rgba(74, 144, 217, 0.1);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}
.comment-anchor svg { display: block; }
.comment-anchor:hover { background: rgba(74, 144, 217, 0.2); }
.comment-anchor--exact { color: var(--success, #48b07a); }
.comment-anchor--fuzzy { color: var(--warning, #e6a243); }
.comment-anchor--lost { color: var(--text-4); opacity: 0.7; cursor: not-allowed; }
.comment-anchor--block { color: var(--primary, #4a90d9); font-weight: 500; }
.comment--anchored { border-left: 3px solid var(--primary, #4a90d9); padding-left: 8px; }
.comment--anchored.has-anchor-exact { border-left-color: var(--success, #48b07a); }
mark.annotation-mark {
  background: rgba(230, 162, 67, 0.35);
  padding: 0 1px;
  border-radius: 2px;
  animation: annotation-pulse 1.2s ease-out;
}
@keyframes annotation-pulse {
  0% { background: rgba(74, 144, 217, 0.6); }
  100% { background: rgba(230, 162, 67, 0.35); }
}
/* Block-level annotation flash — used when a comment anchored to a heading,
   mermaid, code, image, or table row is clicked. The whole block pulses
   without wrapping in <mark> (which would break across element boundaries). */
.annotation-block-mark {
  outline: 3px solid var(--primary, #4a90d9);
  outline-offset: 4px;
  border-radius: 4px;
  animation: annotation-block-pulse 1.4s ease-out;
}
@keyframes annotation-block-pulse {
  0%   { outline-color: rgba(74, 144, 217, 0.95); background-color: rgba(74, 144, 217, 0.18); }
  100% { outline-color: rgba(74, 144, 217, 0.4);  background-color: transparent; }
}
/* ---- Image / PDF region capture (BoundingBoxSelector) ---- */
.fv-imgrgn-overlay { user-select: none; }
.fv-imgrgn-box {
  transition: fill 200ms ease, stroke-width 200ms ease;
}
.fv-imgrgn-box:hover {
  fill: rgba(74, 144, 217, 0.22) !important;
  stroke-width: 3 !important;
}
.fv-imgrgn-box--flash {
  animation: imgrgn-pulse 1.4s ease-out;
}
@keyframes imgrgn-pulse {
  0%   { fill: rgba(74, 144, 217, 0.5); stroke-width: 4; }
  100% { fill: rgba(74, 144, 217, 0.12); stroke-width: 2; }
}
/* While in annotate mode, the PDF iframe must not eat pointer events on
   the overlay drag layer. Disable its pointer-events when our overlay
   is mounted (the overlay covers the iframe with inset:0 + z-index 20). */
#tp-viewer[data-annotate="on"] [data-anchor-kind="pdf-page"] iframe {
  pointer-events: none;
}

/* ---- CSV viewer — full-width, sticky header, dense rows ---- */
.fv-csv-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-1);
}
.fv-csv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface);
  flex-shrink: 0;
}
.fv-csv-meta-cols, .fv-csv-meta-rows { font-variant-numeric: tabular-nums; }
.fv-csv-meta-sep { opacity: 0.5; }
.fv-csv-scroll {
  flex: 1;
  overflow: auto;
  /* Subtle thin scrollbars */
  scrollbar-width: thin;
}
.fv-csv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
}
.fv-csv-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-2, #c9ccd1);
  background: var(--surface);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 var(--border);
  white-space: nowrap;
}
.fv-csv-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2, #c9ccd1);
  vertical-align: top;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-csv-table tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.015);
}
.fv-csv-table tbody tr:hover td {
  background: rgba(74, 144, 217, 0.06);
}
.fv-csv-table tbody td:first-child {
  font-weight: 500;
  color: var(--text);
}
[data-theme='light'] .fv-csv-table tbody tr:nth-child(odd) td {
  background: rgba(15, 18, 22, 0.025);
}
[data-theme='light'] .fv-csv-table tbody tr:hover td {
  background: rgba(74, 144, 217, 0.08);
}

/* ---- Inline-comment toggle (lives inside .fv-zoom-controls floating toolbar) ----
 * The banner above the file content was removed (filename is on the tab
 * strip already). The toggle is now sized to sit alongside the 26px zoom
 * buttons inside the same sticky/absolute pill. */
.fv-annotate-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  background: transparent;
  color: var(--text-2);
  border: 0;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
}
.fv-annotate-toggle:hover {
  background: var(--bg-3);
  color: var(--text);
}
.fv-annotate-toggle[data-on="true"] {
  background: var(--primary, #4a90d9);
  color: white;
}
.fv-annotate-toggle[data-on="true"]:hover {
  background: var(--primary, #4a90d9);
  filter: brightness(1.05);
}
.fv-annotate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fv-annotate-icon svg { display: block; }
.fv-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
}

/* Iframe-based viewers (HTML, PDF) — non-zoomable, but still need the
 * inline-comment toggle floating top-right. The toolbar absolute-anchors
 * above the iframe (sticky doesn't work because the iframe paints over
 * its parent's scroll). */
.fv-iframe-wrap {
  position: relative;
  height: 100%;
  width: 100%;
}
.fv-iframe-wrap > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #525659;
}
.fv-iframe-wrap > iframe[srcdoc] { background: #fff; min-height: 500px; }
/* `.fv-iframe-wrap > .fv-zoom-controls` placement is shared with
 * `.fv-zoom-shell > .fv-zoom-controls` — see the consolidated rule near the
 * `.fv-zoom-controls` definition. */

/* Hover affordance — only when Inline Comment mode is active. Default:
   no noise. data-annotate="on" toggled by the toolbar button. */
#tp-viewer[data-annotate="on"] [data-anchor-id]:hover {
  outline: 1px dashed var(--primary, #4a90d9);
  outline-offset: 2px;
}
#tp-viewer[data-annotate="on"] [data-anchor-id] {
  position: relative;
}
/* Persistent gutter pin per block — uses an SVG (lucide message-square-plus)
   embedded as a CSS background instead of an emoji. Matches the rest of the
   app's icon system; no font fallbacks, no platform inconsistency. */
#tp-viewer[data-annotate="on"] [data-anchor-id]::before {
  content: "";
  position: absolute;
  top: 4px;
  right: -32px;
  width: 22px;
  height: 22px;
  background-color: var(--surface);
  border: 1px solid var(--border, #2C3038);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a90d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/><line x1='12' y1='8' x2='12' y2='14'/><line x1='9' y1='11' x2='15' y2='11'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 120ms ease, transform 120ms ease;
}
#tp-viewer[data-annotate="on"] [data-anchor-id]:hover::before {
  opacity: 1;
  transform: scale(1.08);
  border-color: var(--primary, #4a90d9);
}

/* ---- Status pill + status menu ---- */
.comment-status {
  font-size: 10px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.comment-status--active     { background: rgba(74,144,217,0.18);  color: #4a90d9; }
.comment-status--resolved   { background: rgba(72,176,122,0.22);  color: #48b07a; }
.comment-status--rejected   { background: rgba(217,100,89,0.22);  color: #d96459; }
.comment-status--superseded { background: rgba(154,155,158,0.22); color: #9a9b9e; }
.comment-status-menu       { position: relative; display: inline-block; }
.comment-status-trigger    {
  background: transparent; border: 0; cursor: pointer;
  font-size: 12px; padding: 2px 4px; opacity: 0.6;
}
.comment-status-trigger:hover { opacity: 1; }
.comment-status-popup {
  position: absolute; top: 100%; right: 0;
  background: var(--surface);
  border: 1px solid var(--border, #2C3038);
  border-radius: 4px;
  padding: 4px;
  min-width: 130px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.comment-status-popup button {
  display: block; width: 100%;
  background: transparent; border: 0; color: var(--text);
  text-align: left; padding: 6px 8px; cursor: pointer;
  font-size: 12px;
}
.comment-status-popup button:hover { background: var(--bg-3); }

/* ---- Threaded replies ---- */
.comment--reply        { border-left: 2px solid var(--border, #2c3038); padding-left: 10px; margin-top: 6px; }
.comment-reply-slot    { margin-top: 8px; }
.comment-reply-composer { margin: 8px 0; padding: 6px; background: var(--surface); border-radius: 4px; }
.comment-replies       { margin-top: 6px; }

/* ---- AI badge + actions ---- */
.comment-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 2px;
  background: rgba(155,111,212,0.18);
  color: #9b6fd4;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.comment-ai-badge svg { display: block; }
.comment-ai-actions { display: flex; gap: 6px; margin-top: 6px; }
.comment-ai-accept, .comment-ai-reject {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border, #2C3038);
  color: var(--text);
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
}
.comment-ai-accept svg, .comment-ai-reject svg { display: block; }
.comment-ai-accept:hover { border-color: #48b07a; color: #48b07a; }
.comment-ai-reject:hover { border-color: #d96459; color: #d96459; }

/* ---- LOST banner ---- */
.cp-lost-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(217,100,89,0.1);
  border: 1px solid rgba(217,100,89,0.35);
  border-radius: 5px;
  font-size: 11px;
  margin-bottom: 6px;
  color: var(--text-2);
}
.cp-lost-banner strong { color: #d96459; }
.cp-lost-icon { display: inline-flex; color: #d96459; flex-shrink: 0; }
.cp-lost-icon svg { display: block; }
.cp-triage-btn {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.cp-triage-btn:hover { background: var(--surface); color: var(--text); }
.cp-list--filter-lost .comment:not(:has(.comment-anchor--lost)) { display: none; }

/* Resolved/rejected comments dim slightly so the eye lands on active ones. */
.comment--status-resolved   { opacity: 0.65; }
.comment--status-rejected   { opacity: 0.55; }
.comment--status-superseded { opacity: 0.5; }

/* ---- Inline composer drawer (block-anchored composer that lives INSIDE
   the viewer, so capture works even when comments pane is collapsed) ---- */
.fv-inline-composer {
  margin: 10px 0;
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--primary, #4a90d9);
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(74, 144, 217, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fv-inline-anchor-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3, #9aa0a6);
}
.fv-inline-anchor-label svg {
  color: var(--primary, #4a90d9);
  flex-shrink: 0;
}
.fv-inline-anchor-label code {
  font-size: 11px;
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-2, #c9ccd1);
}
.fv-inline-anchor-label strong { color: var(--text-2, #c9ccd1); font-weight: 600; }
.fv-inline-snippet {
  flex-basis: 100%;
  margin-top: 2px;
  font-style: italic;
  color: var(--text-4, #6c7480);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-inline-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--border, #2C3038);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  min-height: 64px;
  resize: vertical;
}
.fv-inline-textarea:focus {
  outline: none;
  border-color: var(--primary, #4a90d9);
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}
.fv-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  /* Sticky-bottom inside the drawer so Cancel/Submit are always reachable
     even on small viewports / long quoted previews. Live in normal flow
     of the drawer, NOT inside a scroll container, so they always render. */
}
.fv-inline-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.fv-inline-btn--ghost {
  background: transparent;
  color: var(--text-2, #c9ccd1);
  border-color: var(--border, #2C3038);
}
.fv-inline-btn--ghost:hover {
  background: var(--bg-3);
  border-color: var(--text-4, #6c7480);
}
.fv-inline-btn--primary {
  background: var(--primary, #4a90d9);
  color: white;
  border-color: var(--primary, #4a90d9);
}
.fv-inline-btn--primary:hover { background: #3d7cc0; border-color: #3d7cc0; }
.fv-inline-error {
  color: #d96459;
  font-size: 11px;
  margin-top: 4px;
}
/* Legacy selectors kept for any unbumped consumer until cache rolls. */
.fv-inline-composer .fv-inline-actions {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px;
}
.comment-edit-block { padding: 4px 0; }
.comment-edit-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-2);
}
.cp-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.cp-att {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-12);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-att:hover { background: var(--bg-3); color: var(--text); }
.cp-att-img-placeholder { font-size: var(--fs-11); color: var(--text-4); }

/* Markdown rendered */
.md {
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.7;
}
.md h1, .md h2, .md h3, .md h4, .md h5 { color: var(--text); margin-top: var(--sp-5); margin-bottom: var(--sp-3); line-height: 1.3; }
.md h1 { font-size: var(--fs-24); letter-spacing: -0.015em; border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
.md h2 { font-size: var(--fs-18); }
.md h3 { font-size: var(--fs-15); }
.md h4 { font-size: var(--fs-14); }
.md .md-heading { position: relative; scroll-margin-top: 24px; }
.md .md-heading-anchor {
  position: absolute;
  left: -18px;
  top: 0;
  width: 16px;
  text-align: center;
  color: var(--text-4);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s;
  font-weight: 400;
}
.md .md-heading:hover .md-heading-anchor { opacity: 1; }
.md .md-heading-anchor:hover { color: var(--accent); }
.md p { margin-bottom: var(--sp-3); }
.md ul, .md ol { margin: 0 0 var(--sp-3) var(--sp-4); padding: 0; }
.md li { margin-bottom: 4px; }
.md code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: var(--r-1);
  border: 1px solid var(--code-border);
  font-size: 0.88em;
  color: var(--text);
}
.md pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  overflow-x: auto;
  margin: var(--sp-3) 0;
  line-height: 1.5;
}
.md pre code { background: none; border: none; padding: 0; font-size: var(--fs-12); color: var(--text-2); }
.md blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--sp-2) var(--sp-4);
  color: var(--text-3);
  margin: var(--sp-3) 0;
  background: var(--accent-100);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.md table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: var(--fs-13);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}
.md th, .md td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
.md th { background: var(--bg-1); font-weight: 600; color: var(--text); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; }
.md tr:last-child td { border-bottom: none; }
.md a { color: var(--accent); }
.md img { max-width: 100%; border-radius: var(--r-3); border: 1px solid var(--border); cursor: zoom-in; transition: transform 0.2s ease; }
.md hr { border: 0; height: 1px; background: var(--border); margin: var(--sp-5) 0; }

/* Mermaid diagrams inside md */
.md .mermaid {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  text-align: center;
  margin: var(--sp-4) 0;
  overflow-x: auto;
  cursor: zoom-in;
  position: relative;
}
.md .mermaid svg { max-width: 100%; height: auto; }

/* Fullscreen zoom overlay with pan + zoom controls */
.zoom-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0,0,0,0.6);
  flex-shrink: 0;
}
.zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.zoom-btn:hover { background: rgba(255,255,255,0.25); }
.zoom-close-btn { margin-left: auto; }
.zoom-level {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  min-width: 50px;
  text-align: center;
}
.zoom-viewport {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.zoom-pan-area {
  transform-origin: center center;
  transition: none;
}
/* Fit mode: content sized to fill viewport */
.zoom-pan-area.zoom-fit img {
  width: 85vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.zoom-pan-area.zoom-fit svg {
  width: 85vw !important;
  height: auto !important;
  max-height: 82vh;
}
.zoom-pan-area.zoom-fit .zoom-content {
  width: 85vw;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}
.zoom-pan-area.zoom-fit .zoom-content svg {
  width: 100% !important;
  height: auto !important;
}
/* Zoomed mode: scale from the already-large fit size */
.zoom-pan-area:not(.zoom-fit) img {
  width: 85vw;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.zoom-pan-area:not(.zoom-fit) .zoom-content {
  width: 85vw;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}
.zoom-pan-area:not(.zoom-fit) .zoom-content svg {
  width: 100% !important;
  height: auto !important;
}

/* YAML viewer — simple monochrome highlighting */
.yaml-view {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-2);
}
.yaml-key   { color: var(--accent); }
.yaml-str   { color: var(--success); }
.yaml-num   { color: var(--warning); }
.yaml-bool  { color: var(--highlight); }
.yaml-comment { color: var(--text-4); font-style: italic; }

/* JSON tree viewer */
.json-view {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.6;
}

/* ============================================================
   CONFLICTS
   ============================================================ */
.conflict-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.severity-card {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.severity-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.severity-icon svg { width: 18px; height: 18px; }
.severity-icon--critical { background: var(--danger-100); color: var(--danger); }
.severity-icon--critical::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--danger);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 100, 89, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 100, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 100, 89, 0); }
}
.severity-icon--high { background: var(--danger-100); color: var(--danger); }
.severity-icon--medium { background: var(--warning-100); color: var(--warning); }
.severity-icon--low { background: var(--success-100); color: var(--success); }
.severity-card-body { display: flex; flex-direction: column; gap: 2px; }
.severity-card-count { font-size: var(--fs-24); font-weight: 600; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.severity-card-label { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 500; }

.conflict-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.conflict-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
}
.conflict-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--r-3) 0 0 var(--r-3);
  background: var(--text-4);
}
.conflict-card[data-sev='HIGH']::before, .conflict-card[data-sev='CRITICAL']::before { background: var(--danger); }
.conflict-card[data-sev='MEDIUM']::before { background: var(--warning); }
.conflict-card[data-sev='LOW']::before { background: var(--success); }

.conflict-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.conflict-tasks { font-size: var(--fs-14); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: var(--sp-2); }
.conflict-tasks .task-id { color: var(--accent); }

.conflict-levels {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-3);
  border-radius: var(--r-2);
  font-size: var(--fs-11);
  color: var(--text-3);
  font-family: var(--font-mono);
  border: 1px solid var(--border-subtle);
}
.level-chip.is-active { background: var(--accent-100); color: var(--accent); border-color: transparent; }
.level-chip-num { font-weight: 700; font-size: 10px; padding: 1px 4px; background: rgba(0, 0, 0, 0.2); border-radius: var(--r-1); color: inherit; }
[data-theme='light'] .level-chip-num { background: rgba(0, 0, 0, 0.08); }

.ai-analysis {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.ai-analysis-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--r-2);
  background: var(--highlight-100);
  color: var(--highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-analysis-body { flex: 1; font-size: var(--fs-12); color: var(--text-2); line-height: 1.55; }
.ai-analysis-label { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--highlight); margin-bottom: 4px; }

.conflict-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.conflict-services { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-12); color: var(--text-3); }

/* ============================================================
   FRICTION
   ============================================================ */
.friction-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-5);
}
.friction-feed { display: flex; flex-direction: column; gap: var(--sp-3); }
.friction-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}
.friction-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.friction-body { font-size: var(--fs-13); color: var(--text-2); line-height: 1.5; margin-bottom: var(--sp-2); }
.friction-foot { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-11); color: var(--text-4); }

.pattern-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}
.pattern-card + .pattern-card { margin-top: var(--sp-3); }
.pattern-count {
  font-size: var(--fs-28);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pattern-label { font-size: var(--fs-12); color: var(--text-3); margin-top: 4px; line-height: 1.4; }

/* Capture form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-full { grid-column: 1 / -1; }

/* ============================================================
   IDEATIONS
   ============================================================ */
.ideation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.ideation-card + .ideation-card { margin-top: var(--sp-3); }
.ideation-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.ideation-card-main { flex: 1; }
.ideation-title { font-size: var(--fs-15); font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); }
.ideation-desc { font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; margin-bottom: var(--sp-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ideation-stats { display: flex; gap: var(--sp-4); font-size: var(--fs-11); color: var(--text-4); }

/* Ideation workspace — tabs content */
.ideation-tabs-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  min-height: 400px;
}

/* ============================================================
   MISSION
   ============================================================ */
.mission-chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  position: relative;
}
.phase-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
}
.phase-card:hover { border-color: var(--accent); }
.phase-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.phase-num { font-size: var(--fs-11); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.phase-title { font-size: var(--fs-13); font-weight: 600; color: var(--text); line-height: 1.35; }
.phase-meta { font-size: var(--fs-11); color: var(--text-4); display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.phase-progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--sp-1);
}
.phase-progress-bar { height: 100%; background: var(--accent); transition: width var(--t-base); }

/* ============================================================
   RELEASES
   ============================================================ */
.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.release-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}

/* ============================================================
   REGISTRY
   ============================================================ */
.reg-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.reg-table thead { background: var(--bg-1); }
.reg-table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.reg-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-2);
  border-bottom: 1px solid var(--border-subtle);
}
.reg-table tbody tr:last-child td { border-bottom: none; }
.reg-table tbody tr:hover { background: var(--bg-hover); }

/* ============================================================
   NOTIFICATIONS PANEL
   ============================================================ */
.notif-group {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  font-weight: 600;
}
.notif {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  transition: background var(--t-fast);
  border-left: 2px solid transparent;
}
.notif:hover { background: var(--bg-hover); }
.notif.is-unread { border-left-color: var(--accent); background: var(--accent-100); }
[data-theme='light'] .notif.is-unread { background: rgba(74, 144, 217, 0.06); }
.notif-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-2);
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-2);
}
.notif-icon svg { width: 14px; height: 14px; }
.notif-body { flex: 1; font-size: var(--fs-12); line-height: 1.45; color: var(--text); }
.notif-time { font-size: var(--fs-11); color: var(--text-4); margin-top: 2px; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
}
.settings-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.settings-nav-item {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-13);
  color: var(--text-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text); }
.settings-nav-item.is-active { background: var(--accent-100); color: var(--accent); font-weight: 500; }
.settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.settings-section h3 { margin-bottom: var(--sp-4); }

.theme-toggle { display: flex; gap: var(--sp-2); }
.theme-option {
  flex: 1;
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
}
.theme-option:hover { border-color: var(--border-strong); }
.theme-option.is-active { border-color: var(--accent); background: var(--accent-100); color: var(--accent); }

/* ============================================================
   DOCS (separate app uses same tokens + this)
   ============================================================ */
.docs-toc { position: sticky; top: 0; padding: var(--sp-4); }
.toc-item {
  display: block;
  padding: 4px 8px;
  font-size: var(--fs-12);
  color: var(--text-3);
  border-left: 2px solid var(--border);
  margin-left: var(--sp-2);
}
.toc-item:hover { color: var(--text); border-left-color: var(--text-3); text-decoration: none; }
.toc-item.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }

/* ---------- Work item detail drawer (kept — used by /work/:id) ---------- */
.wi-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40;
  animation: fadeIn 0.15s ease;
}
.wi-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 90vw);
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.2s ease;
}
.wi-drawer[hidden] { display: none !important; }
.wi-drawer-backdrop[hidden] { display: none !important; }
.wi-drawer-head {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wi-drawer-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.wi-drawer-title-row h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
}
.wi-drawer-title-row .icon-btn {
  font-size: 24px;
  line-height: 1;
  padding: 4px 10px;
  color: var(--text-3);
}
.wi-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wi-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
}
.wi-drawer-section {
  margin-bottom: var(--sp-5);
}
.wi-drawer-section h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0 0 var(--sp-2) 0;
}
.wi-kv {
  display: flex;
  gap: var(--sp-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.wi-kv:last-child { border-bottom: none; }
.wi-k {
  flex: 0 0 120px;
  color: var(--text-3);
  font-weight: 500;
}
.wi-v {
  flex: 1;
  color: var(--text);
  line-height: 1.5;
}
.wi-v.mono {
  font-family: var(--font-mono);
  font-size: 11px;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.level-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.level-picker select {
  padding: 6px 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs-13);
  cursor: pointer;
}

/* ============================================================
   Login screen
   ============================================================ */
.login-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0F1216);
  z-index: 100;
}
.login-card {
  width: min(420px, 90vw);
  padding: 48px 40px;
  border-radius: 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.login-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-brand-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.login-brand-sub {
  font-size: 12px;
  color: var(--text-3);
}
.login-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}
.login-hint {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 24px 0;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}
.login-field .input {
  width: 100%;
  box-sizing: border-box;
}
.login-error {
  padding: 10px 14px;
  background: rgba(217, 100, 89, 0.12);
  border: 1px solid var(--danger, #D96459);
  border-radius: 8px;
  color: var(--danger, #D96459);
  font-size: 13px;
}
.login-submit {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}
.login-footer {
  text-align: center;
  margin-top: 32px;
  font-size: 11px;
  color: var(--text-4);
}
.topbar-team-badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
}
.topbar-persona-badge {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  /* Subtle pill — accent text + tinted background, neutral border. The
   * earlier 1px solid accent border read like a stuck focus state and
   * out-shouted every other element in the topbar. */
  background: var(--accent-100, rgba(74, 144, 217, 0.10));
  color: var(--accent);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ======================== Work Detail Page ======================== */

.wd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  margin-bottom: var(--sp-4);
  color: var(--text-3);
}
.wd-crumb { color: var(--accent); text-decoration: none; }
.wd-crumb:hover { text-decoration: underline; }
.wd-crumb--current { color: var(--text); font-weight: 500; }
.wd-crumb-sep { color: var(--text-4); }

.wd-header {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.wd-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
}
.wd-id {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-3);
}
.wd-title {
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
}
.wd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.wd-meta-item { display: flex; flex-direction: column; gap: 2px; }
.wd-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 600; }
.wd-meta-value { font-size: var(--fs-13); color: var(--text); display: flex; align-items: center; gap: 6px; }

.wd-progress {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.wd-progress-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-sunken);
  margin-bottom: 6px;
}
.wd-progress-text { font-size: var(--fs-12); color: var(--text-3); }

.wd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--sp-4);
}
.wd-tab {
  padding: 10px 20px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s ease;
}
.wd-tab:hover { color: var(--text); }
.wd-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.wd-content { min-height: 300px; }
/* 3-pane layout inside the epic Artifacts tab — override kb-layout full-viewport height */
.wd-content .wd-artifacts-3pane { height: calc(100vh - 280px); min-height: 480px; }
.wd-empty { padding: 48px 24px; text-align: center; color: var(--text-4); font-size: var(--fs-14); }
.wd-empty code { background: var(--code-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

/* Children grid (stories under epic) */
.wd-children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.wd-child-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s ease;
}
.wd-child-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.wd-child-top { display: flex; align-items: center; gap: 8px; }
.wd-child-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.wd-child-title { font-size: var(--fs-14); font-weight: 500; }
.wd-child-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }

/* Artifact list */
.wd-artifact-list { display: flex; flex-direction: column; gap: 4px; }
.wd-artifact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
}
.wd-artifact-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.wd-artifact-item svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.wd-artifact-info { flex: 1; min-width: 0; }
.wd-artifact-name { font-size: var(--fs-13); font-weight: 500; color: var(--text); }
.wd-artifact-meta { font-size: 11px; color: var(--text-4); margin-top: 2px; }

/* Artifact folder tree (epic Artifacts tab) */
.wd-artifact-tree { display: flex; flex-direction: column; }
.wd-tree-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  user-select: none;
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: 500;
  transition: background 0.1s ease;
}
.wd-tree-folder:hover { background: var(--bg-hover); }
.wd-tree-arrow { font-size: 10px; color: var(--text-4); flex-shrink: 0; width: 12px; text-align: center; }
/* .wd-tree-folder-icon size handled by unified rule above */
.wd-tree-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-tree-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-4);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.wd-tree-folder-children { /* no extra spacing; indentation is via padding-left on children */ }
.wd-tree-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background 0.1s ease;
}
.wd-tree-file:hover { background: var(--bg-hover); }
.wd-tree-file.is-active { background: var(--accent-muted, rgba(74,144,217,0.12)); }
/* .wd-tree-file-icon size handled by unified rule above */
.wd-tree-file-info { flex: 1; min-width: 0; }
.wd-tree-file-name { font-size: var(--fs-13); font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-tree-file-meta { font-size: 11px; color: var(--text-4); margin-top: 2px; }

/* File viewer */
.wd-file-viewer { }
.wd-file-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.wd-file-path { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.wd-file-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  max-width: 100%;
}

/* Activity / comments */
.wd-comment {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.wd-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--fs-13);
}
.wd-comment-time { font-size: 11px; color: var(--text-4); margin-left: auto; }
.wd-comment-body { font-size: var(--fs-13); color: var(--text-2); line-height: 1.6; white-space: pre-wrap; }
.wd-comment-form { padding: var(--sp-4) 0; }

/* ============================================================
   REVIEWS — review queue + gate approval cards
   ============================================================ */

/* Toolbar: view toggle + gate filter pills on same row */
.review-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Gate filter pills */
.gate-filter-pills {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.gate-pill {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.gate-pill:hover { border-color: var(--accent); color: var(--accent); }
.gate-pill.is-active {
  background: var(--accent-100);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Gate panel: collapsible section */
.review-gate-group { margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
.review-gate-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-1);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
}
.review-gate-header:hover { background: var(--bg-2, var(--surface)); }
.review-gate-chevron { font-size: 10px; color: var(--text-3); flex-shrink: 0; }
.review-gate-label {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.review-gate-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.review-gate-empty {
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-12);
  color: var(--text-4);
  font-style: italic;
}

.review-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--sp-3);
}
.review-card { transition: border-color var(--t-fast); }
.review-card:hover { border-color: var(--accent); }
.review-card-title:hover { color: var(--accent); text-decoration: none; }

/* ============================================================
   REVIEW DETAIL — 3-panel drill-in view  (#/reviews/:id)
   ============================================================ */

/* Page wrapper — flex column so header + body + footer stack cleanly */
.rd-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);   /* subtract top-bar height */
  overflow: hidden;
}

/* 3-panel body: left tree | center viewer | right comments */
.rd-body {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-top: none;
}

/* Left: artifact tree */
/* reviews.js uses the shared ThreePaneLayout scaffold — scrollable-body
 * styles come from `.kb-tree-body` and `.kb-comments-body`. The pane
 * wrappers still carry `.rd-tree` / `.rd-comments` for reviews-specific
 * background/borders. IDs #rd-tree-body and #rd-comments-body no longer
 * exist in the DOM (replaced by scaffold's #tp-*). */
.rd-tree {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-1);
}

/* Center: file viewer — inherits .kb-content styles */
.rd-viewer {
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

/* Right: comment drawer */
.rd-comments {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.rd-comments .comment-composer {
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Footer: approval bar */
.rd-approval-bar {
  flex-shrink: 0;
  border-top: 2px solid var(--border);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.rd-approval-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.rd-approval-slots {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  flex-wrap: wrap;
}
.rd-approval-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  min-width: 160px;
}
.rd-approval-sep {
  width: 1px;
  height: 36px;
  background: var(--border);
}
.rd-approval-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ---- Approval modal ---- */
.rd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.rd-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  width: 480px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.rd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.rd-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.rd-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ============================================================
   Assignee picker — shared popover for assign / reviewer editing
   ============================================================ */
.ap-popover {
  position: fixed;
  z-index: 10000;
  width: 360px;
  max-height: 400px;
  background: var(--bg-1, #fff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  color: var(--text, #111827);
}
.ap-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-2, #f9fafb);
}
.ap-popover-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #111827);
}
.ap-popover-role {
  color: var(--text-3, #6b7280);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.ap-popover-close {
  background: transparent;
  border: 0;
  color: var(--text-3, #6b7280);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.ap-popover-close:hover { color: var(--text, #111827); }
.ap-popover-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.ap-popover-search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-1, #fff);
  color: var(--text, #111827);
  box-sizing: border-box;
}
.ap-popover-search input:focus {
  outline: 2px solid var(--accent, #4f46e5);
  outline-offset: -1px;
  border-color: var(--accent, #4f46e5);
}
.ap-popover-list {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
}
.ap-popover-loading,
.ap-popover-empty,
.ap-popover-error {
  padding: 16px 12px;
  color: var(--text-3, #6b7280);
  text-align: center;
  font-size: 12px;
}
.ap-popover-error { color: var(--danger, #dc2626); }
.ap-popover-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  text-align: center;
  background: var(--bg-1, #f9fafb);
}
.ap-popover-show-all {
  font-size: 12px;
  color: var(--primary, #2563eb);
  text-decoration: none;
}
.ap-popover-show-all:hover { text-decoration: underline; }

/* P5 — multi-select reviewer picker */
.ap-popover-footer--multi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.ap-popover-count {
  font-size: 11px;
  color: var(--text-3, #6b7280);
  font-weight: 500;
  margin-left: 8px;
}
.ap-popover-actions {
  display: flex;
  gap: 6px;
}
.ap-popover-btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-0, #fff);
  cursor: pointer;
}
.ap-popover-btn--save {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}
.ap-popover-btn--save:hover { opacity: 0.9; }
.ap-popover-btn--cancel:hover { background: var(--bg-1, #f9fafb); }
.ap-popover-row--multi {
  cursor: pointer;
}
.ap-popover-row--multi input[type="checkbox"] {
  margin: 0 8px 0 0;
  cursor: pointer;
}
.ap-popover-row--selected {
  background: var(--primary-bg, rgba(37, 99, 235, 0.08));
}

/* Per-role slot badges on reviewer pills (work-detail header) */
.wd-slot-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.wd-slot-badge--required {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary, #2563eb);
}
.wd-slot-badge--optional {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-3, #6b7280);
}
/* Tiny leading dot on compact pills — colour-codes req vs opt at a glance */
.wd-slot-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.wd-slot-dot--required { background: var(--primary, #2563eb); }
.wd-slot-dot--optional { background: var(--text-4, #9ca3af); }
.ap-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-2, #f3f4f6);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
}
.ap-popover-row:hover { background: var(--bg-2, #f9fafb); }
.ap-popover-row--current { background: var(--bg-accent-soft, #eef2ff); }
.ap-popover-row--current:hover { background: var(--bg-accent-soft, #e0e7ff); }
.ap-popover-row--clear { border-bottom: 2px solid var(--border, #e5e7eb); }
.ap-popover-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #4f46e5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ap-popover-avatar--empty {
  background: var(--bg-3, #e5e7eb);
  color: var(--text-3, #6b7280);
}
.ap-popover-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ap-popover-name {
  font-weight: 500;
  color: var(--text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-popover-sub {
  font-size: 11px;
  color: var(--text-3, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-popover-check {
  color: var(--accent, #4f46e5);
  font-weight: 700;
}

/* Inline chip used by kanban cards + work-detail header + reviews cards */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  border-radius: 999px;
  background: var(--bg-2, #f3f4f6);
  border: 1px solid var(--border-2, #e5e7eb);
  font-size: 12px;
  color: var(--text-2, #374151);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  max-width: 100%;
}
.ap-chip:hover {
  background: var(--bg-accent-soft, #eef2ff);
  border-color: var(--accent, #4f46e5);
}
.ap-chip--empty {
  color: var(--text-4, #9ca3af);
  font-style: italic;
}
.ap-chip--empty:hover {
  color: var(--accent, #4f46e5);
  font-style: normal;
}
.ap-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #4f46e5);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-chip-avatar--empty {
  background: var(--bg-3, #e5e7eb);
  color: var(--text-4, #9ca3af);
}
.ap-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.ap-chip--sm {
  font-size: 11px;
  padding: 1px 6px 1px 1px;
}
.ap-chip--sm .ap-chip-avatar {
  width: 18px;
  height: 18px;
  font-size: 9px;
}
.ap-chip--readonly {
  cursor: default;
}
.ap-chip--readonly:hover {
  background: var(--bg-2, #f3f4f6);
  border-color: var(--border-2, #e5e7eb);
}

/* Reviewer slot — used in work-detail gate panels + reviews screen */
.ap-reviewer-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3, #6b7280);
}
.ap-reviewer-slot-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
}
.ap-pool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--bg-2, #f3f4f6);
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 4px;
  color: var(--text-3, #6b7280);
  cursor: pointer;
}
.ap-pool-badge:hover {
  border-style: solid;
  border-color: var(--accent, #4f46e5);
  color: var(--accent, #4f46e5);
}

/* Reviewer pills cluster (header) */
.wd-reviewers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2, #f3f4f6);
}
.wd-reviewers--compact {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 4px;
}
.wd-reviewer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-2, #f9fafb);
  border: 1px solid var(--border-2, #e5e7eb);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wd-reviewer-pill:hover {
  border-color: var(--accent, #4f46e5);
  background: var(--bg-1, #fff);
}
.wd-reviewer-pill--compact {
  padding: 2px 6px;
}
.wd-reviewer-pill-gate {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3, #6b7280);
  font-weight: 600;
}

/* Activity timeline */
.wd-activity {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
}
.wd-activity-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-3, #6b7280);
  font-size: 13px;
}
.wd-activity-event {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2, #f3f4f6);
  align-items: flex-start;
}
.wd-activity-event:last-child { border-bottom: 0; }
.wd-activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Translucent fill keyed off the icon color — works in both themes
   * because alpha-blends against whatever the page background is. The
   * earlier solid pastels (e.g. #eef2ff) glowed against the dark canvas
   * and produced a near-white circle with no readable icon glyph. */
  background: rgba(127, 138, 153, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3, #6b7280);
  font-size: 14px;
  flex-shrink: 0;
}
.wd-activity-icon--assign { background: rgba(79, 70, 229, 0.16); color: #818cf8; }
.wd-activity-icon--reviewer { background: rgba(5, 150, 105, 0.18); color: #34d399; }
.wd-activity-icon--gate { background: rgba(180, 83, 9, 0.18); color: #fbbf24; }
.wd-activity-icon--artifact { background: rgba(124, 58, 237, 0.18); color: #c4b5fd; }
.wd-activity-icon--comment { background: rgba(3, 105, 161, 0.18); color: #38bdf8; }
.wd-activity-icon--stage { background: rgba(180, 83, 9, 0.18); color: #fbbf24; }
[data-theme="light"] .wd-activity-icon--assign { color: #4f46e5; }
[data-theme="light"] .wd-activity-icon--reviewer { color: #059669; }
[data-theme="light"] .wd-activity-icon--gate { color: #b45309; }
[data-theme="light"] .wd-activity-icon--artifact { color: #7c3aed; }
[data-theme="light"] .wd-activity-icon--comment { color: #0369a1; }
[data-theme="light"] .wd-activity-icon--stage { color: #b45309; }
.wd-activity-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wd-activity-summary {
  color: var(--text, #111827);
  font-size: 13px;
  line-height: 1.4;
}
.wd-activity-actor {
  color: var(--text-3, #6b7280);
  font-size: 11px;
}
.wd-activity-ts {
  color: var(--text-4, #9ca3af);
  font-size: 11px;
  white-space: nowrap;
}


/* ============================================================
 * FileTabs — VS Code-style tab strip used by every 3-pane
 * artifact-style viewer (knowledge browser, review detail,
 * work-item artifacts). Rendered above content column.
 * Component: shared/file-tabs.js
 * ============================================================ */
.ft-strip {
  display: flex;
  align-items: stretch;
  height: 34px;
  min-height: 34px;
  /* Solid chrome row. `--bg-3` is theme-aware: #E9EBF0 (light) / #1A1D22
   * (dark) — visibly distinct from the content's `--bg`, so the strip
   * reads as opaque chrome in both themes. Do NOT use `--surface-*`
   * tokens here — they aren't defined in this theme and fall back to
   * transparent, which is the bug we just fixed. */
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.ft-strip::-webkit-scrollbar { height: 6px; }
.ft-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.ft-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
  height: 100%;
  font-size: 12.5px;
  line-height: 1;
  color: var(--text-3);
  background: transparent;           /* inherits the solid strip colour */
  border-right: 1px solid var(--border);
  border-top: 2px solid transparent; /* reserves space for active accent */
  cursor: pointer;
  user-select: none;
  max-width: 220px;
  min-width: 0;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.ft-tab:hover:not(.is-active) {
  background: var(--bg-hover);
  color: var(--text-2);
}
.ft-tab.is-active {
  /* Active tab "lifts out" of the strip: content-colour bg, accent
   * top bar, stronger weight. Reads as a real VS Code tab sitting on
   * top of the content pane. */
  background: var(--bg);
  color: var(--text);
  border-top-color: var(--accent);
  font-weight: 500;
}
.ft-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 170px;
}
.ft-tab-close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-4);
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}
.ft-tab-close:hover {
  background: var(--border);
  color: var(--text);
}
.ft-tab.is-active .ft-tab-close { color: var(--text-3); }