/* =========================================================
   memtomem Web UI — Minimal, Dark-accent Design
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg:      #0f1117;
  --surface: #1a1d27;
  --border:  #2d3145;
  --accent:  #6c8fff;
  --danger:  #e05a5a;
  --text:    #e2e4ec;
  --muted:   #7b7f96;
  --green:   #4caf7d;
  --accent-rgb: 108, 143, 255;
  --danger-rgb: 224, 90, 90;
  --yellow: #f39c12;
  --red:     #e05a5a;
  --code-bg: #1d1f21;
  --radius:  6px;
  --font: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  /* Semantic bg/text aliases used by harness UI sections */
  --bg-primary:     var(--surface);
  --bg-secondary:   var(--bg);
  --bg-card:        var(--surface);
  --bg-hover:       rgba(108, 143, 255, 0.06);
  --text-primary:   var(--text);
  --text-secondary: var(--muted);
}

/* Korean typography adjustments */
[lang="ko"] { --font: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Inter', system-ui, sans-serif; }
[lang="ko"] body { word-break: keep-all; }

html { font-size: 14px; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--font); height: 100%; overflow: hidden; display: flex; flex-direction: column; }

/* A11Y-1.1 — the <main id="main"> wrapper sits between <body> (column flex,
   overflow hidden) and the .tab-panel children which rely on flex: 1 +
   min-height: 0 for a definite remaining-viewport height. Without this
   rule <main> is display: block and breaks the sizing chain — active
   tabs lose their bounded scroll region and overflow gets clipped by
   body's overflow: hidden. Mirror body's column flex behavior so <main>
   stays transparent to the layout. */
#main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* <main tabindex="-1"> is programmatically focusable so activating the
   skip-link actually moves keyboard focus (Chromium/Firefox don't move
   focus to a non-focusable target — they only scroll). Suppress the
   mouse-style focus ring; show a subtle one on :focus-visible so
   keyboard activation has a brief visual confirmation before the next
   Tab lands on the active panel's first focusable. */
#main:focus { outline: none; }
#main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A11Y-1.1 — skip-to-main link. Kept visually off-screen until focused so
   keyboard users can jump past the header chrome (~6 Tabs today) on the
   very first Tab from page load. On focus it pins to top-left at a high
   z-index so it sits over banners + nav. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Header ── */
/* Embedding mismatch banner */
.embedding-mismatch-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--yellow, #f39c12) 12%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--yellow, #f39c12) 40%, var(--border));
  flex-shrink: 0;
}
.emb-banner-icon { font-size: 1rem; flex-shrink: 0; }
.emb-banner-msg { font-size: 0.82rem; color: var(--text); flex: 1; min-width: 0; }
.emb-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-warning {
  background: color-mix(in srgb, var(--yellow, #f39c12) 80%, transparent);
  color: #000; border: none; border-radius: var(--radius);
  padding: 4px 10px; font-size: 0.78rem; cursor: pointer; font-weight: 600;
  transition: opacity 0.15s;
}
.btn-warning:hover { opacity: 0.85; }

.dev-mode-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--accent, #3498db) 10%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #3498db) 35%, var(--border));
  flex-shrink: 0;
  font-size: 0.82rem; color: var(--text);
}
.dev-mode-banner code {
  padding: 1px 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent, #3498db) 18%, transparent);
  font-size: 0.95em;
}
.dev-mode-banner-icon { font-size: 0.95rem; flex-shrink: 0; }
.dev-mode-banner-msg { flex: 1; min-width: 0; }

.model-readiness-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--accent, #3498db) 14%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #3498db) 40%, var(--border));
  flex-shrink: 0;
  font-size: 0.82rem; color: var(--text);
}
.model-readiness-icon { font-size: 0.95rem; flex-shrink: 0; }
.model-readiness-msg { flex: 1; min-width: 0; }

header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
header h1 { font-size: 1.2rem; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; flex-shrink: 0; }
.header-info-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 1; min-width: 0; }
.header-sys-info { font-size: 0.75rem; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-sys-info.clickable { cursor: pointer; }
.header-sys-info.clickable:hover,
.header-sys-info.clickable:focus-visible { color: var(--accent); outline: none; }
.header-sep { color: var(--border); font-size: 0.75rem; flex-shrink: 0; }
.header-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.stat-pill {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 99px; padding: 2px 10px;
  font-size: 0.72rem; color: var(--muted); font-family: var(--mono);
}
/* Visible across tabs while any indexing run is active so the user
   knows a long-running operation is still in flight after navigating
   away from the Index tab. Triggered from STATE.indexing in app.js. */
.indexing-pill {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  animation: indexing-pulse 1.6s ease-in-out infinite;
}
@keyframes indexing-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .indexing-pill { animation: none; }
}
.header-actions .btn-icon {
  background: none; border: none; padding: 4px;
  font-size: 1.1rem; cursor: pointer; color: var(--muted);
  border-radius: var(--radius); transition: color 0.15s;
}
.header-actions .btn-icon:hover { color: var(--text); }
#lang-toggle {
  min-width: 24px;
  padding: 2px 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 6px;
}

/* ── Tabs ── */
.tab-nav {
  display: flex; gap: 2px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 20px; flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 10px 16px; font-size: 0.875rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── ⚙ Settings tab button ── */
/* "More" tab — same style as other tabs */

/* ── Settings Hub: two-pane layout ── */
.settings-layout { display: flex; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
.settings-nav {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 8px 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
.settings-nav-btn {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 14px; background: none; border: none;
  color: var(--muted); cursor: pointer; font-size: 0.85rem;
  transition: background 0.1s, color 0.1s;
  border-left: 3px solid transparent;
}
.settings-nav-btn:hover { background: rgba(var(--accent-rgb),0.08); color: var(--text); }
.settings-nav-btn.active { color: var(--accent); background: rgba(var(--accent-rgb),0.12); border-left-color: var(--accent); }
.settings-nav-btn .nav-icon { font-size: 0.95rem; width: 18px; flex-shrink: 0; line-height: 1.3; text-align: center; }
.settings-nav-btn .nav-labels { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.settings-nav-btn .nav-label { font-size: 0.85rem; line-height: 1.25; }
.settings-nav-btn .nav-sub { font-size: 0.68rem; color: var(--muted); line-height: 1.2; }
.settings-nav-btn.active .nav-sub { color: var(--accent); opacity: 0.75; }
.settings-nav-btn.collapsed-member { display: none; }
.settings-nav-group {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  padding: 14px 14px 4px; background: none; border: none;
  font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer;
}
.settings-nav-group:hover { color: var(--text); }
.settings-nav-group .nav-group-caret { font-size: 0.7rem; width: 10px; display: inline-block; }
.settings-nav-group[aria-expanded="false"] .nav-group-caret { transform: none; }
.settings-nav-group--danger {
  margin-top: auto;
  border-top: 1px solid rgba(var(--danger-rgb), 0.25);
  color: var(--danger);
  cursor: default;
}
.settings-nav-group--danger:hover { color: var(--danger); }
.settings-nav-btn--danger { border-left-color: rgba(var(--danger-rgb), 0.5); }
.settings-nav-btn--danger .nav-icon { color: var(--danger); }
.settings-nav-btn--danger:hover { background: rgba(var(--danger-rgb), 0.08); color: var(--danger); }
.settings-nav-btn--danger.active { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); border-left-color: var(--danger); }
.settings-nav-btn--danger.active .nav-sub { color: var(--danger); opacity: 0.75; }
.settings-nav-btn--landing {
  width: auto;
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 6px;
  margin: 6px 8px;
  padding: 10px 14px;
}
.settings-nav-btn--landing .nav-label { font-weight: 600; }
.settings-nav-btn--landing.active { background: rgba(var(--accent-rgb), 0.14); }
.settings-content { flex: 1; padding: 16px 24px; overflow-y: auto; }
.settings-section { display: none; }
.settings-section.active { display: block; }
.settings-section-desc {
  font-size: 0.8rem; color: var(--muted);
  margin: 0 0 14px; line-height: 1.4;
  max-width: 720px;
}
.health-watchdog-block {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
  .settings-nav { width: 180px; }
  .settings-nav-btn { padding: 7px 10px; }
  .settings-nav-btn--landing { padding: 9px 10px; margin: 4px 6px; }
  .settings-content { padding: 12px 16px; }
  .settings-nav-btn .nav-sub { display: none; }
}

/* The mobile (<=520px) Settings/Gateway stacking overrides live at the END
   of this file (search "issue #1072"). They must come after the base
   Context Gateway rules below to win the cascade — equal-specificity
   selectors lose to whichever comes later in source order. */

/* ── Tab Panels ── */
.tab-panel { flex: 1; min-height: 0; overflow: hidden; display: none; flex-direction: column; }
.tab-panel.active { display: flex; }

/* ── Search Bar (row 1) ── */
.search-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.search-bar .search-input-wrap { flex: 1; }

/* ── Search Filters (row 2, collapsible) ── */
.search-filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 20px 10px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.search-filters input[type="text"] { flex: 1; max-width: 160px; }
#source-filter { max-width: 200px; }
#top-k { width: 90px; }

/* ── Hover Tooltip (below element, rendered only on hover) ── */
.has-tip { position: relative; }
.has-tip:hover::after {
  content: attr(title);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(260px, calc(100vw - 32px));
  white-space: normal; line-height: 1.4;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; font-size: 0.72rem; font-weight: 400;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 200;
}
/* Search bar right-edge buttons: anchor from right */
.search-bar .has-tip:last-child:hover::after,
.search-bar .has-tip:nth-last-child(2):hover::after { left: auto; right: 0; transform: none; }

/* Date range picker (Kibana-style) */
.date-range-picker { display: flex; align-items: center; gap: 6px; }
.date-range-custom { display: flex; align-items: center; gap: 4px; }
.date-range-custom input[type="date"] {
  width: 130px; font-size: 0.78rem; font-family: var(--mono);
  padding: 4px 6px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.date-range-sep { color: var(--muted); font-size: 0.78rem; }
#date-range-preset { min-width: 100px; }

/* Search input wrapper (positions history dropdown) */
.search-input-wrap { position: relative; flex: 1; }
.search-input-wrap input { width: 100%; }

/* ── Search History Dropdown (A) ── */
.search-history-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}
.history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; cursor: pointer; gap: 8px;
  transition: background 0.1s;
}
.history-item:hover { background: rgba(var(--accent-rgb),0.1); }
.history-text { font-size: 0.83rem; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-remove {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.65rem; padding: 2px 4px; line-height: 1; flex-shrink: 0;
}
.history-remove:hover { color: var(--danger); }
.history-clear-all {
  padding: 6px 12px; font-size: 0.72rem; color: var(--muted); cursor: pointer;
  border-top: 1px solid var(--border); text-align: right;
  transition: color 0.1s;
}
.history-clear-all:hover { color: var(--danger); }

/* ── Results Layout ── */
.results-layout {
  display: flex;
  flex: 1; min-height: 0; overflow: hidden;
}
.results-layout #results-panel { width: var(--results-width, 380px); flex-shrink: 0; }

/* Results list */
#results-panel {
  border-right: 1px solid var(--border);
  overflow-y: auto; background: var(--bg);
}
.result-item {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.result-item:hover   { background: var(--surface); }
.result-item.selected { background: rgba(var(--accent-rgb),0.1); border-left: 2px solid var(--accent); }
.result-item-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.result-type-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.result-filename { font-family: var(--mono); font-size: 0.8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; cursor: pointer; }
.result-filename:hover { color: var(--accent); text-decoration: underline; }
.result-item-meta {
  font-size: 0.68rem; color: var(--muted); font-family: var(--mono);
  margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-score-bar { height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 4px; overflow: hidden; }
.result-score-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.score-badge { font-size: 0.68rem; color: var(--green); font-weight: 600; flex-shrink: 0; }
.result-snippet { font-size: 0.8rem; color: var(--text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Active filters row */
.active-filters-row {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  padding: 4px 20px 6px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.active-filter-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.68rem; padding: 2px 6px 2px 8px;
  background: rgba(var(--accent-rgb),0.1); color: var(--accent);
  border-radius: 10px; border: 1px solid rgba(var(--accent-rgb),0.2);
}
.active-filter-remove {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.6rem; padding: 0 2px; line-height: 1; opacity: 0.6;
}
.active-filter-remove:hover { opacity: 1; color: var(--danger); }
.active-filters-clear {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 0.68rem; padding: 2px 6px; line-height: 1.2;
}
.active-filters-clear:hover { color: var(--danger); }

#filter-toggle { display: inline-flex; align-items: center; gap: 4px; }
.filter-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 0.62rem; font-weight: 600; line-height: 1;
  background: var(--accent); color: var(--bg);
  border-radius: 8px;
}

/* Pipeline funnel visualization */
.results-funnel { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; font-family: var(--mono); color: var(--muted); }
.funnel-stage { display: flex; align-items: center; gap: 3px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; }
.funnel-stage-label { opacity: 0.7; }
.funnel-stage-count { color: var(--text); font-weight: 600; }
.funnel-arrow { color: var(--border); font-size: 0.8rem; }

/* Resizable results panel divider */
.results-divider {
  width: 4px; cursor: col-resize; background: var(--border);
  transition: background 0.15s; flex-shrink: 0; position: relative;
}
.results-divider:hover, .results-divider.dragging { background: var(--accent); }
.results-divider::before,
.sources-divider::before {
  content: ''; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 24px; border-radius: 2px;
  background: var(--muted); opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s;
}
.results-divider:hover::before,
.sources-divider:hover::before,
.results-divider.dragging::before,
.sources-divider.dragging::before {
  background: var(--bg); opacity: 1;
}

/* Detail code view */
.detail-code-view {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.6;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: auto; max-height: 500px;
  padding: 12px 14px; white-space: pre-wrap; word-break: break-word;
}
.detail-code-view code { background: none; padding: 0; }
/* When showing rendered markdown, use prose font instead of mono */
.detail-code-view.md-preview {
  font-family: var(--font); white-space: normal;
  line-height: 1.65; font-size: 0.88rem;
}

/* Detail panel */
#detail-panel { overflow-y: auto; padding: 20px; background: var(--bg); flex: 1; min-width: 0; }

#detail-view { display: flex; flex-direction: column; gap: 14px; }
.detail-header { display: flex; flex-direction: column; gap: 6px; }
.detail-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.score-detail-row { display: flex; align-items: center; gap: 8px; position: relative; cursor: default; }
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.7rem; font-family: var(--mono);
  padding: 5px 10px; border-radius: 4px; white-space: normal; line-height: 1.4;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-tooltip]:hover::after { opacity: 1; }
.score-detail-rank { font-size: 0.72rem; font-family: var(--mono); color: var(--muted); min-width: 26px; }
.score-bar-wrap { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; cursor: default; }
.score-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.score-detail-pct { font-size: 0.68rem; color: var(--muted); min-width: 32px; text-align: right; }
.hierarchy-trail { font-size: 0.75rem; color: var(--muted); }
.hierarchy-title { font-size: 0.85rem; font-weight: 600; color: var(--text); padding: 6px 0 2px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.file-path { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); word-break: break-all; cursor: pointer; }
.file-path:hover { text-decoration: underline; }
.lines-info { font-size: 0.72rem; color: var(--muted); margin-left: 8px; }

.editor-section { display: flex; flex-direction: column; gap: 6px; }
.editor-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
textarea#d-editor {
  width: 100%; min-height: 300px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--mono); font-size: 0.82rem;
  padding: 12px; resize: vertical; line-height: 1.6; outline: none;
}
textarea#d-editor:focus { border-color: var(--accent); }

.detail-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* ── Tag editor (detail panel) ── */
.tag-editor-section { display: flex; flex-direction: column; gap: 8px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; padding: 2px 0; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(var(--accent-rgb),0.12); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 12px;
  font-size: 0.75rem; padding: 3px 10px; font-family: var(--mono);
  transition: background 0.15s, border-color 0.15s;
}
.tag-chip:hover { background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.5); }
.tag-chip-remove {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.68rem; padding: 0 0 0 2px; line-height: 1; opacity: 0.6;
}
.tag-chip-remove:hover { opacity: 1; color: var(--danger); }
.tag-input-row { display: flex; gap: 6px; align-items: center; }
.tag-input-row input {
  flex: 1; min-width: 0; padding: 6px 10px; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.tag-input-row input:focus { border-color: var(--accent); outline: none; }
.tag-input-row .btn-ghost { padding: 6px 12px; font-size: 0.82rem; flex-shrink: 0; }
.tag-input-row .btn-primary { padding: 6px 14px; font-size: 0.82rem; flex-shrink: 0; }

/* ── Search highlight ── */
mark {
  background: rgba(255, 213, 79, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Similar panel ── */
#similar-panel {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.similar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.similar-item {
  padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.similar-item:last-child { border-bottom: none; }
.similar-item:hover { background: rgba(var(--accent-rgb), 0.04); }
.similar-item-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.similar-item-snippet {
  font-size: 0.78rem; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.source-chunk-current { background: rgba(var(--accent-rgb), 0.08); border-left: 3px solid var(--accent); }
.score-badge {
  font-size: 0.65rem; font-family: var(--mono); color: var(--green);
  background: rgba(76,175,125,0.1); padding: 1px 5px; border-radius: 3px;
}
.related-loading { font-size: 0.78rem; color: var(--muted); padding: 12px 0; text-align: center; }
.related-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 0; user-select: none;
}
.related-toggle:hover .editor-label { color: var(--accent); }
.related-chevron {
  font-size: 0.7rem; color: var(--muted); transition: transform 0.15s;
  margin-left: auto;
}
.related-chevron.open { transform: rotate(90deg); }
.related-preview {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.related-preview-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 0.78rem; font-family: var(--mono);
}
.related-preview-content {
  font-size: 0.82rem; line-height: 1.55; color: var(--text);
  max-height: 200px; overflow-y: auto;
}
.related-preview-content.md-preview { font-family: var(--font); white-space: normal; }
.related-preview-actions {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.similar-item.active { background: rgba(var(--accent-rgb), 0.08); border-left: 3px solid var(--accent); }
.similar-card {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.similar-card:hover { border-color: var(--accent); }
.similar-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.similar-card-content { font-size: 0.78rem; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Sources Tab ── */
#tab-sources { overflow: hidden; }
.sources-layout { display: flex; height: 100%; }
.sources-layout .sources-sidebar { width: var(--sources-width, 420px); flex-shrink: 0; min-height: 0; }
.sources-sidebar {
  border-right: none;
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.sources-divider {
  width: 4px; cursor: col-resize; background: var(--border);
  transition: background 0.15s; flex-shrink: 0; position: relative;
}
.sources-divider:hover, .sources-divider.dragging { background: var(--accent); }
.sources-header { display: flex; align-items: center; justify-content: space-between; }
.sources-header h2 { font-size: 0.95rem; font-weight: 600; }
.sources-filter-row { display: flex; align-items: center; gap: 8px; }
.sources-filter-row input { flex: 1; }
.sources-ns-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; padding: 3px 8px; border-radius: 12px; white-space: nowrap;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.sources-ns-chip-clear {
  background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.72rem; padding: 0 2px; line-height: 1;
}
.sources-ns-chip-clear:hover { color: var(--text); }

/* ── Source tree view (D) ── */
/* ``.source-group-memory`` is a ``<details>`` element. The summary
   carries the dir label, status badge, and hover-revealed actions; the
   native disclosure marker is replaced by a ``::before`` triangle
   matching the vendor group's style for a consistent flip animation. */
.source-group { margin-bottom: 10px; }
.source-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; margin-bottom: 3px;
  cursor: pointer; user-select: none;
  list-style: none;
}
.source-group-header::-webkit-details-marker { display: none; }
.source-group-header::before {
  content: '▸';
  font-size: 0.62rem; color: var(--muted); width: 10px;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}
.source-group-memory[open] > .source-group-header::before { transform: rotate(90deg); }
.source-group-dir { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.source-group-count { font-size: 0.68rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; flex-shrink: 0; margin-left: 6px; }

/* Source item — 2-row layout */
.source-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 4px; cursor: pointer; transition: border-color 0.15s;
  margin-left: 8px;
}
.source-item:hover { border-color: var(--accent); }
.source-item.active { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.source-item-row1 { display: flex; align-items: center; gap: 6px; }
.source-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.source-name { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.source-ns-badge { font-size: 0.58rem; padding: 0 4px; line-height: 1.4; }
.source-item-row2 {
  font-size: 0.68rem; color: var(--muted); font-family: var(--mono);
  padding-left: 14px;
}

/* Heuristic preview block: title (first heading) + body (heuristic
 * excerpt OR AI summary). Three-tier visual hierarchy keeps the
 * filename (mono + bold, in row1) as the row anchor and clearly
 * subordinates the supplemental preview:
 *   - title: sans, single-line, muted — the "what is this" label
 *   - body (heuristic excerpt): smaller, faded — fallback preview
 *   - body (AI prose, [data-ai="true"]): smaller, slightly stronger
 *     muted, line-clamp 3 — semantically richer so it earns more rows.
 * Title weight stays at 400 (no italic — Korean fonts synthesise italic
 * poorly and many sources here are KO/EN mixed). */
.source-item-summary { padding-left: 14px; margin-top: 2px; }
.source-item-title {
  font-size: 0.72rem; color: var(--muted); font-weight: 400;
  line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
.source-item-excerpt {
  font-size: 0.68rem; color: var(--muted); opacity: 0.78;
  line-height: 1.35; margin-top: 1px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.source-item-excerpt[data-ai="true"] {
  /* AI-generated prose earns slightly more visual weight: full opacity,
   * accent-tinted ✨ marker, and 3-line clamp since 2-3 sentence prose
   * naturally runs longer than the 200-char heuristic excerpt. */
  opacity: 1;
  color: var(--text);
  -webkit-line-clamp: 3;
}
.source-item-ai-badge {
  display: inline-block;
  margin-right: 2px;
  color: var(--accent);
}

/* AI-summary language drift banner: yellow-tinted notice above the
 * source list when one or more cached summaries are in a language that
 * doesn't match ``IndexingConfig.summary_language``. Hidden by default
 * (``hidden`` attribute on the host element); the JS toggles it. */
.source-language-drift-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 4px 8px 6px;
  background: rgba(255, 200, 64, 0.08);
  border: 1px solid rgba(255, 200, 64, 0.3);
  border-radius: var(--radius);
  font-size: 0.74rem; color: var(--text);
}
.source-language-drift-msg { flex: 1; min-width: 0; }
.source-drift-regen-btn,
.source-drift-later-btn { flex-shrink: 0; }

/* Chunk count mini bar */
.source-chunk-bar { height: 2px; background: var(--border); border-radius: 1px; margin-top: 4px; overflow: hidden; }
.source-chunk-bar-fill { height: 100%; background: var(--accent); border-radius: 1px; opacity: 0.5; }

/* Source row actions — hidden by default, visible on hover/focus */
.source-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.source-item:hover .source-item-actions,
.source-item:focus-within .source-item-actions { opacity: 1; }
.source-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
  padding: 3px 7px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.source-action-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: rgba(var(--accent-rgb),0.08);
}
.source-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.source-del-btn:hover {
  color: var(--danger);
  border-color: rgba(224,90,90,0.45);
  background: rgba(224,90,90,0.1);
}

/* Sources stats bar */
.sources-stats {
  font-size: 0.7rem; color: var(--muted); font-family: var(--mono);
  padding: 6px 10px; background: rgba(var(--accent-rgb),0.05);
  border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center; margin-bottom: 8px;
}

/* Sources sort row */
.sources-sort-row { display: flex; gap: 2px; margin-bottom: 6px; }
.sources-sort-btn {
  flex: 1; background: none; border: 1px solid transparent;
  border-radius: var(--radius); padding: 3px 0;
  font-size: 0.68rem; color: var(--muted); cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sources-sort-btn:hover { color: var(--text); }
.sources-sort-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
#sources-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

/* Chunks browser */
.chunks-browser { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; }
.chunks-browser-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chunk-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px;
}
.chunk-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chunk-card-lines { font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
.chunk-card-content { font-size: 0.82rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: hidden; position: relative; transition: max-height 0.25s ease; padding-bottom: 8px; }
/* fade: 토글 필요한 카드(collapsible)에만, 펼쳐진 상태 제외 */
.chunk-card-content::after { display: none; }
.chunk-card-collapsible .chunk-card-content:not(.expanded)::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 28px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
.chunk-card-content.expanded { max-height: none; padding-bottom: 8px; }
.chunk-card-collapsible { cursor: pointer; }
.chunk-card-collapsible:hover { background: var(--surface-hover, rgba(255,255,255,0.04)); }
/* 확장 가능 힌트 바 — 접힌 상태에서만 표시 */
.chunk-card-collapsible:not(:has(.chunk-card-content.expanded))::after {
  content: '▾ Show more';
  display: block;
  text-align: center;
  font-size: 0.68rem;
  color: var(--accent);
  padding: 5px 0 1px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.chunk-card-collapsible:not(:has(.chunk-card-content.expanded)):hover::after { opacity: 1; }
/* 펼친 상태 힌트 */
.chunk-card-collapsible:has(.chunk-card-content.expanded)::after {
  content: '▴ Collapse';
  display: block;
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
  padding: 5px 0 1px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.chunk-card-collapsible:has(.chunk-card-content.expanded):hover::after { opacity: 0.9; }

/* ── Index Tab ── */
/* Mode toggle reads as a sub-tab strip (folder / upload / compose), subordinate
   to the main ``.tab-nav`` row above. Active state mirrors ``.sources-vendor-tab``
   (bottom-border) rather than the global ``.btn-ghost.btn-active`` outline, so
   the visual hierarchy between main tabs and mode toggle stays distinct. */
.index-mode-toggle {
  display: flex; gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.index-mode-toggle .btn-ghost {
  background: none; border: none;
  border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted);
  font-size: 0.82rem; padding: 4px 12px;
  transition: color 0.15s, border-color 0.15s;
}
.index-mode-toggle .btn-ghost:hover { color: var(--text); }
.index-mode-toggle .btn-ghost.btn-active {
  color: var(--accent); border-bottom-color: var(--accent);
}
.index-mode-guide {
  padding: 0 20px 10px;
  color: var(--muted);
  font-size: 0.82rem;
}
.index-layout { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 20px; overflow-y: auto; }
/* min-height keeps the panel container stable across mode switches; floor
   chosen so the folder panel's empty-on-first-visit area stays modest while
   compose still looks anchored. */
.index-panels { margin: 0 20px; min-height: 320px; }
.index-panel input[type="text"] { width: 100%; box-sizing: border-box; }

/* Upload */
.upload-drop {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 28px 16px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  max-width: 520px; margin: 0 auto;
}
.upload-drop:hover, .upload-drop.drag-over {
  border-color: var(--accent); background: rgba(var(--accent-rgb),0.06);
}
.upload-drop-icon { font-size: 2rem; margin-bottom: 8px; }
.upload-drop-hint { font-size: 0.85rem; color: var(--text); margin: 0 0 4px; }
.upload-browse-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.upload-drop-ext { font-size: 0.72rem; color: var(--muted); margin: 0; font-family: var(--mono); }
.upload-file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.upload-file-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.78rem; font-family: var(--mono);
}
.upload-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.upload-file-size { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; margin-left: 8px; }
.upload-file-remove { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 0.75rem; flex-shrink: 0; }
.upload-result { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.upload-result-row { font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.upload-result-ok { color: var(--green); }
.upload-result-err { color: var(--danger); }
#upload-usage { font-size: 0.75rem; color: var(--muted); margin-top: 8px; }
#upload-usage code { font-size: inherit; color: var(--muted); }
textarea#add-content {
  width: 100%; min-height: 240px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--mono); font-size: 0.82rem;
  padding: 10px 12px; resize: vertical; line-height: 1.6; outline: none; margin-top: 4px;
}
textarea#add-content:focus { border-color: var(--accent); }
.stats-cards { display: flex; flex-direction: row; gap: 12px; }
.field-label { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; margin-top: 12px; }
.checkbox-row { display: flex; gap: 20px; margin-top: 12px; margin-bottom: 16px; }
.checkbox-row label { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; cursor: pointer; }
.index-result { margin-top: 16px; }
.index-result table { border-collapse: collapse; width: 100%; }
.index-result td { padding: 5px 0; font-size: 0.85rem; }
.index-result td:first-child { color: var(--muted); padding-right: 20px; }
.index-result td:last-child { font-family: var(--mono); color: var(--green); font-weight: 600; }
.index-result td.index-result-errors { color: var(--red); white-space: pre-line; word-break: break-word; }

.stat-card { padding: 20px; text-align: center; flex: 1; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); font-family: var(--mono); }
.stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Shared Components ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

input[type="text"], input[type="number"], input[type="date"], input[type="search"], select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  padding: 7px 10px; font-size: 0.875rem; outline: none;
  font-family: var(--font);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus, select:focus { border-color: var(--accent); }

button { border: none; cursor: pointer; border-radius: var(--radius); font-size: 0.875rem; padding: 7px 14px; transition: opacity 0.15s; }
button:hover { opacity: 0.85; }
button:active { opacity: 0.7; }
.btn-primary { background: var(--accent); color: #fff; font-weight: 600; }
.btn-danger  { background: var(--danger); color: #fff; font-weight: 600; }
.btn-ghost   { background: transparent; color: var(--muted); border: 1px solid var(--border); }
/* Solid-bg .btn-danger needs higher contrast than the foreground-color
   --danger token: dark-theme #e05a5a behind white text measures 3.63:1
   (WCAG AA requires 4.5:1). Scope to button-only and exclude .btn-ghost
   so combined "btn-ghost btn-danger" stays transparent. */
:root:not([data-theme="light"]) .btn-danger:not(.btn-ghost) { background: #c43c3c; }
/* Global button:hover { opacity: 0.85 } composites solid-danger over the
   surface and drops contrast below AA (light ≈ 3.93, dark ≈ 4.64). Replace
   the opacity dim with a brightness-darken so the hover affordance survives
   without losing AA. Ghost+danger combo is unaffected (transparent bg). */
.btn-danger:not(.btn-ghost):hover { opacity: 1; filter: brightness(0.92); }

.badge { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.badge-blue   { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.badge-gray   { background: rgba(123, 127, 150, 0.15); color: var(--muted); }
.badge-yellow { background: rgba(243, 156, 18, 0.15); color: var(--yellow); }
.badge-success { background: rgba(76, 175, 125, 0.15); color: var(--green); }
.badge-warning { background: rgba(243, 156, 18, 0.15); color: var(--yellow); }
.badge-muted { background: rgba(123, 127, 150, 0.15); color: var(--muted); }
.badge-source { background: rgba(76, 175, 125, 0.15); color: var(--green); font-family: var(--mono); font-weight: 400; }
.badge-validity { background: rgba(108, 92, 231, 0.10); color: var(--muted); font-family: var(--mono); font-weight: 400; }
.badge-validity--expired { opacity: 0.55; text-decoration: line-through; }

.empty-state { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 0.875rem; }

.status-msg { font-size: 0.8rem; padding: 8px 12px; border-radius: var(--radius); margin-top: 6px; }
.status-msg.ok  { background: rgba(76, 175, 125, 0.12); color: var(--green); }
.status-msg.err { background: rgba(224, 90, 90, 0.12);  color: var(--danger); }

/* ── Dedup Tab ── */
#tab-dedup { overflow: hidden; }
.dedup-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dedup-params { display: flex; align-items: center; gap: 20px; }
.dedup-params label { display: flex; align-items: center; gap: 6px; font-size: 0.825rem; color: var(--muted); }
.dedup-params input[type="number"] {
  width: 70px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); padding: 5px 8px;
  font-size: 0.825rem; outline: none; font-family: var(--mono);
}
.dedup-params input[type="number"]:focus { border-color: var(--accent); }
.dedup-panel { flex: 1; overflow-y: auto; padding: 16px 20px; }
.dedup-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
  transition: opacity 0.3s;
}
.dedup-row-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dedup-index { font-size: 0.75rem; color: var(--muted); min-width: 24px; font-family: var(--mono); }
.dedup-actions { margin-left: auto; display: flex; gap: 6px; }
.dedup-chunks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dedup-chunk {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.dedup-chunk-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.dedup-chunk-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.dedup-chunk-content {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word; max-height: 100px; overflow: hidden;
  position: relative;
}
.dedup-chunk-content::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px;
  background: linear-gradient(transparent, var(--bg));
}
.dedup-row-msg { margin-top: 10px; }
.badge-danger { background: rgba(224, 90, 90, 0.15); color: var(--danger); }
.badge-warn   { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.dedup-summary { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }

/* Decay tab */
.decay-controls {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px; background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 16px;
}
.decay-params { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.decay-params label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted); }
.decay-params input { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.88rem; }
.decay-params input[type="text"] { width: 180px; }
.decay-actions { display: flex; gap: 8px; margin-left: auto; }
.decay-result {
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px;
}
.decay-result table td:first-child { color: var(--muted); font-size: 0.85rem; padding-right: 20px; }
.decay-result table td:last-child  { font-weight: 600; font-size: 0.95rem; }
.settings-preflight-note {
  margin: -6px 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* ── Tags Tab ── */
.tags-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.tags-left h2, .tags-right h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.tags-header-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.tags-header-row h2 { margin: 0; flex-shrink: 0; }
#tags-search {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 0.85rem;
  font-family: var(--mono);
}
#tags-search::placeholder { color: var(--muted); }
.tags-sort-row {
  display: flex; gap: 4px; margin-bottom: 10px;
}
.tags-sort-btn { font-size: 0.75rem; padding: 4px 10px; border-radius: var(--radius); }
.tags-stats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.78rem; color: var(--muted); font-family: var(--mono);
}
.tags-stats-label { font-weight: 600; color: var(--text); }
.tags-stats-sep { opacity: 0.4; }
.tag-row {
  display: grid; grid-template-columns: minmax(80px, auto) 1fr 44px auto;
  align-items: center; gap: 12px; padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 2px; transition: background 0.1s;
}
.tag-row:hover { background: rgba(var(--accent-rgb), 0.04); }
.tag-row:last-child { border-bottom: none; }
.tag-name {
  font-family: var(--mono); font-size: 0.82rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Let the auto grid track shrink below content so a long unbroken tag name
     truncates with an ellipsis instead of pushing the actions column to
     overflow the row (#688). */
  min-width: 0;
}
.tag-bar-wrap { background: var(--border); border-radius: 3px; height: 8px; overflow: hidden; }
.tag-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.tag-count { font-size: 0.8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Per-tag manage actions — hover/focus revealed (#688) */
.tag-actions {
  display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s;
}
.tag-row:hover .tag-actions, .tag-row:focus-within .tag-actions { opacity: 1; }
.tag-action-btn {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  font-size: 0.72rem; color: var(--muted); border-radius: 3px;
  font-family: inherit; white-space: nowrap;
}
.tag-action-btn:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.tag-action-btn.tag-action-danger:hover { background: rgba(var(--danger-rgb, 220, 60, 60), 0.12); color: var(--danger); }
/* Keep actions reachable by keyboard even before hover reveals them. */
.tag-action-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }

/* Tag-manage modal (#688) */
.tag-manage-input-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.tag-manage-input-row span { font-size: 0.8rem; color: var(--muted); }
.tag-manage-input-row input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 0.85rem; font-family: var(--mono);
  width: 100%; box-sizing: border-box;
}
.tag-manage-samples { max-height: 180px; overflow-y: auto; margin: 4px 0 0; }
.tag-manage-sample {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 0; border-top: 1px solid var(--border);
}
.tag-manage-sample-src { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); }
.tag-manage-sample-preview {
  font-size: 0.75rem; color: var(--muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-manage-error { color: var(--danger); font-size: 0.8rem; margin: 6px 0 0; }

/* Tag cloud view */
.tags-cloud {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  align-items: center; justify-content: center;
  padding: 28px 20px; min-height: 140px;
}
.tag-cloud-item {
  cursor: pointer; font-family: var(--mono);
  display: inline-block;
  transition: filter 0.15s, transform 0.15s;
  white-space: nowrap; line-height: 1.3;
}
.tag-cloud-item:hover { filter: brightness(1.3); transform: scale(1.15) rotate(0deg) !important; }
.tags-view-toggle { display: flex; gap: 2px; margin-left: auto; }

/* Auto-Tag form */
.tags-right { position: sticky; top: 20px; }
.tags-right .help-tip::after { max-width: 240px; }
.tags-form-desc { font-size: 0.8rem; color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.tags-form { display: flex; flex-direction: column; gap: 4px; }
.tags-form .field-label { margin-top: 10px; margin-bottom: 2px; }
.tags-form .field-label:first-child { margin-top: 0; }
.tags-form input[type="text"], .tags-form input[type="number"] {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 0.85rem;
}
.tags-form input[type="text"] { width: 100%; box-sizing: border-box; }
.tags-form input[type="number"] { width: 80px; }
.tags-form .checkbox-row { margin-top: 8px; margin-bottom: 4px; gap: 16px; }
.tags-form .checkbox-row label { font-size: 0.82rem; }
#autotag-btn { margin-top: 10px; width: 100%; padding: 9px 14px; font-size: 0.88rem; }
.autotag-result {
  margin-top: 14px; padding: 14px 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.autotag-result table { width: 100%; }
.autotag-result table td { padding: 3px 0; }
.autotag-result table td:first-child { color: var(--muted); font-size: 0.82rem; }
.autotag-result table td:last-child  { font-weight: 600; text-align: right; }

.autotag-samples { margin-top: 14px; }
.autotag-samples-title {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 6px;
}
.autotag-samples-count { font-weight: 400; }
.autotag-samples-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
}
.autotag-sample-card {
  padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.78rem;
}
.autotag-sample-header {
  display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px;
}
.autotag-sample-source {
  font-family: var(--mono); font-weight: 600; color: var(--text);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.autotag-sample-id { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.autotag-sample-preview {
  font-family: var(--mono); font-size: 0.7rem; color: var(--text);
  padding: 4px 6px; background: var(--bg); border-radius: 3px;
  margin-bottom: 6px; max-height: 50px; overflow: hidden; line-height: 1.35;
}
.autotag-sample-tag-row {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-bottom: 2px;
}
.autotag-sample-label { font-size: 0.7rem; color: var(--muted); margin-right: 4px; }
.autotag-tag {
  display: inline-flex; padding: 1px 6px; font-size: 0.68rem;
  border-radius: 8px; font-family: var(--mono);
}
.autotag-tag-current { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.autotag-tag-suggested {
  background: rgba(var(--accent-rgb), 0.15); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.autotag-no-tags { font-size: 0.7rem; color: var(--muted); font-style: italic; }

/* Index progress bar */
.index-progress { margin: 12px 0; }
.progress-bar-wrap { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.2s ease; }
.progress-label { font-size: 0.82rem; color: var(--muted); }
.progress-file { font-size: 0.78rem; color: var(--muted); font-family: var(--mono); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Config tab */
#tab-config { overflow-y: auto; }
.config-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.config-main { min-width: 0; }
#config-content { display: flex; flex-direction: column; gap: 16px; }
#config-content[hidden] { display: none !important; }
.config-reload-banner {
  margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius);
  font-size: 0.9rem; border: 1px solid var(--border);
}
.config-reload-banner[hidden] { display: none !important; }
.config-reload-banner.info { background: rgba(100, 150, 220, 0.1); color: var(--text); }
.config-reload-banner.err  { background: rgba(224, 90, 90, 0.12); color: var(--danger); }
.config-guide {
  position: sticky; top: 0; align-self: start;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.config-guide-inner {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; font-size: 0.82rem; line-height: 1.6;
}
.config-guide-title { margin: 0 0 10px; font-size: 0.88rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.config-guide-text { margin: 0 0 8px; color: var(--text); }
.config-guide-hint { margin: 6px 0; padding: 8px 10px; background: var(--bg); border-radius: 4px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); word-break: break-all; }
.config-guide-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.config-guide-section h5 { margin: 0 0 4px; font-size: 0.82rem; color: var(--text); }
.config-guide-section p { margin: 0 0 4px; color: var(--muted); font-size: 0.78rem; }
.config-guide-howto { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.config-guide-howto h5 { margin: 0 0 8px; font-size: 0.82rem; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.config-guide-badge {
  font-size: 0.68rem; padding: 1px 6px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.config-guide-badge.restart { background: #fee2e2; color: #b91c1c; }
.config-guide-badge.live { background: #dcfce7; color: #166534; }
.config-guide-steps { margin: 0 0 8px; padding-left: 20px; font-size: 0.78rem; color: var(--text); line-height: 1.7; }
.config-guide-steps li { margin-bottom: 2px; }
.config-guide-warn { margin: 6px 0 0; font-size: 0.74rem; color: #b45309; background: #fef3c7; padding: 6px 8px; border-radius: 4px; line-height: 1.4; }
.config-guide-env { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.config-guide-env h5 { margin: 0 0 6px; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.config-guide-pre {
  margin: 0; padding: 8px 10px; background: var(--bg); border-radius: 4px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  line-height: 1.6; white-space: pre-wrap; word-break: break-all; overflow-x: auto;
}
@media (max-width: 960px) {
  .config-layout { grid-template-columns: 1fr; }
  .config-guide { position: static; max-height: none; }
}
.config-card h3.config-section-title { margin: 0; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.config-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.config-readonly-badge {
  font-size: 11px; color: var(--muted); background: var(--bg);
  padding: 2px 8px; border-radius: 4px;
}
.config-readonly { opacity: 0.6; }
.config-table { width: 100%; border-collapse: collapse; }
.config-table td { padding: 5px 0; font-size: 0.84rem; vertical-align: middle; }
.config-key { color: var(--muted); width: 50%; padding-right: 10px; }
.config-val { color: var(--text); font-family: var(--mono); word-break: break-word; font-size: 0.82rem; }
.config-masked { color: var(--muted); font-style: italic; }
.config-table input[type="number"],
.config-table input[type="text"] {
  width: 100%; padding: 4px 6px; font-family: var(--mono);
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; font-size: 0.84rem; box-sizing: border-box;
}
.config-table select {
  width: 100%; padding: 4px 6px; font-family: var(--mono);
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; font-size: 0.84rem; box-sizing: border-box;
}
.config-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.config-reset { width: 28px; padding-left: 6px; text-align: center; }
.config-reset-btn {
  min-width: 24px; padding: 2px 6px; font-size: 0.9rem; line-height: 1;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  border-radius: 4px; cursor: pointer;
}
.config-reset-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--border); }
.config-reset-btn:disabled { opacity: 0.25; cursor: default; }
.config-select-hint { font-size: 0.72rem; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.rrf-weights-widget { display: flex; flex-direction: column; gap: 4px; }
.rrf-balance-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); }
.rrf-balance-slider { width: 100%; accent-color: var(--accent); cursor: pointer; }
.rrf-balance-display { text-align: center; font-size: 0.76rem; font-family: var(--mono); color: var(--text); }
.exclude-patterns-widget { display: flex; flex-direction: column; gap: 10px; }
.exclude-group-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 0.78rem; color: var(--muted); margin-bottom: 4px;
}
.exclude-group-hint { font-size: 0.7rem; font-style: italic; color: var(--muted); }
.exclude-builtin-list { display: flex; flex-direction: column; gap: 6px; }
.exclude-builtin-subgroup { display: flex; flex-direction: column; gap: 2px; }
.exclude-builtin-sublabel { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.exclude-builtin-row {
  padding: 3px 6px; background: var(--bg); border: 1px dashed var(--border);
  border-radius: 4px; opacity: 0.75; font-size: 0.8rem;
}
.exclude-builtin-row code { font-family: var(--mono); color: var(--muted); }
.exclude-user-list { display: flex; flex-direction: column; gap: 4px; }
.exclude-user-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
}
.exclude-user-row .exclude-row-err {
  grid-column: 1 / -1; font-size: 0.72rem; color: #b91c1c; min-height: 0;
}
.exclude-user-row .exclude-row-err:empty { display: none; }
.exclude-user-input { font-family: var(--mono); font-size: 0.84rem; }
.exclude-row-invalid { border-color: #b91c1c !important; }
.exclude-remove-btn { min-width: 28px; padding: 2px 8px; }
.exclude-add-btn { align-self: flex-start; font-size: 0.78rem; }

.supported-ext-widget { display: flex; flex-direction: column; gap: 8px; }
.supported-ext-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.supported-ext-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); font-family: var(--mono); font-size: 0.82rem;
}
.supported-ext-chip-label { color: var(--text); }
.supported-ext-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.supported-ext-chip-remove:hover:not(:disabled) { background: var(--border); color: var(--text); }
.supported-ext-chip-remove:disabled { opacity: 0.3; cursor: default; }
.supported-ext-add-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
}
.supported-ext-input { font-family: var(--mono); font-size: 0.84rem; }
.supported-ext-add-btn { font-size: 0.78rem; }
.supported-ext-err { font-size: 0.72rem; color: #b91c1c; min-height: 0; display: none; }
.supported-ext-err.supported-ext-err-visible { display: block; }

/* ============================================================
   Sources tab — Memory Dirs panel
   ============================================================ */
.memory-dirs-panel {
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  /* Sources tab is a flex column (``#tab-sources`` is the flex parent);
     its sibling ``.sources-layout`` demands ``height: 100%`` which,
     combined with the default ``flex-shrink: 1``, crushes this panel
     down to 2px at desktop viewports. Pin the shrink factor so the
     panel always claims its content height. */
  flex-shrink: 0;
}
.memory-dirs-panel:empty { display: none; }
.memory-dirs-widget { display: flex; flex-direction: column; }

.memory-dirs-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.memory-dirs-header-title {
  display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0;
}
.memory-dirs-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.memory-dirs-total {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--mono);
}
.memory-dirs-actions { display: flex; gap: 6px; }

.memory-dirs-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.memory-dirs-add-input {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 5px 10px;
}

.memory-dirs-group { border: none; border-radius: 0; background: transparent; }
.memory-dirs-group + .memory-dirs-group { border-top: 1px solid var(--border); }

.memory-dirs-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 0.84rem;
  user-select: none;
  list-style: none;
}
.memory-dirs-summary::-webkit-details-marker { display: none; }
.memory-dirs-summary::before {
  content: '▸';
  font-size: 0.65rem;
  color: var(--muted);
  width: 10px;
  transition: transform 0.12s ease;
}
.memory-dirs-group[open] > .memory-dirs-summary::before {
  transform: rotate(90deg);
}
.memory-dirs-summary:hover { background: var(--bg-hover); }
.memory-dirs-summary-label { color: var(--text); font-weight: 500; }
.memory-dirs-summary-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.memory-dirs-status-group {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--muted);
  font-family: var(--mono);
  white-space: nowrap;
}
.memory-dirs-status-group.empty { color: #b91c1c; }
.memory-dirs-group-reindex {
  font-size: 0.76rem;
  padding: 2px 10px;
}

.memory-dirs-list {
  list-style: none;
  margin: 0;
  padding: 2px 18px 10px 36px;
  display: flex; flex-direction: column;
}
.memory-dirs-list-scroll { max-height: 400px; overflow-y: auto; }

/* Vendor → product tree (RFC #304 Phase 2). Multi-leaf vendors wrap
   products in ``.memory-dirs-products``; each product is a section with
   a header row (label + count + badge + per-product reindex button) +
   the standard ``.memory-dirs-list``. Single-leaf vendors render flat —
   no ``.memory-dirs-vendor-group`` class, layout stays identical to the
   pre-Phase-2 one-level UI. */
.memory-dirs-products { display: flex; flex-direction: column; }
.memory-dirs-product + .memory-dirs-product { border-top: 1px dashed var(--border); }
.memory-dirs-product-header {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 36px;
  font-size: 0.82rem;
}
.memory-dirs-product-label { color: var(--text); font-weight: 500; }
.memory-dirs-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 4px;
}
.memory-dirs-item:hover { background: var(--bg-hover); }
.memory-dirs-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.memory-dirs-item-main > .memory-dirs-path {
  flex: 1 1 auto;
  min-width: 0;
}
.memory-dirs-path {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-dirs-item-empty .memory-dirs-path { color: var(--muted); }
.memory-dirs-item-missing .memory-dirs-path {
  color: var(--muted);
  text-decoration: line-through;
}
.memory-dirs-item-meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--mono);
  padding-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memory-dirs-item-meta.empty { color: #b91c1c; }
.memory-dirs-item-meta.missing { color: #b91c1c; font-style: italic; }
.memory-dirs-open-btn,
.memory-dirs-reindex-btn,
.memory-dirs-remove-btn {
  font-size: 0.74rem;
  padding: 2px 10px;
  color: var(--muted);
  transition: color 0.1s ease, background 0.1s ease;
}
.memory-dirs-item:hover .memory-dirs-open-btn,
.memory-dirs-item:hover .memory-dirs-reindex-btn,
.memory-dirs-item:hover .memory-dirs-remove-btn {
  color: var(--text);
}
.memory-dirs-open-btn:disabled,
.memory-dirs-remove-btn:disabled { opacity: 0.3; cursor: default; }
.memory-dirs-remove-btn:not(:disabled):hover { color: #b91c1c; }
.memory-dirs-group-reindex { color: var(--muted); }
.memory-dirs-summary:hover .memory-dirs-group-reindex { color: var(--text); }

.memory-dirs-sort {
  font-size: 0.74rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-family: inherit;
}
.memory-dirs-sort:hover { color: var(--text); border-color: var(--accent); }
.memory-dirs-sort:focus { outline: none; border-color: var(--accent); }

/* Sources vendor sub-tabs: User / Claude / OpenAI selector that scopes
   the sidebar tree to one vendor at a time. Mirrors ``.tab-nav`` /
   ``.tab-btn`` visually (underline-on-active) but tighter for the
   sidebar slot. Empty vendors keep their tab visible so the user knows
   the slot exists — rendered with reduced opacity so they read as
   "available but quiet". */
.sources-vendor-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  flex-shrink: 0;
}
.sources-vendor-tab {
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  padding: 8px 10px; font-size: 0.82rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.sources-vendor-tab:hover { color: var(--text); }
.sources-vendor-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sources-vendor-tab:focus-visible { outline-offset: -2px; }
.sources-vendor-tab.sources-vendor-tab-empty { opacity: 0.55; }
.sources-vendor-tab.sources-vendor-tab-empty.active { opacity: 0.85; }
.sources-vendor-tab-count {
  font-size: 0.68rem; color: var(--muted); font-family: var(--mono);
  padding: 1px 6px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.sources-vendor-tab.active .sources-vendor-tab-count {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb, 59, 130, 246), 0.35);
}
.sources-view { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; overflow: hidden; }

/* ── Memory mode source tree ──
   Vendor → category → memory_dir → file cards inside the unified Sources
   sidebar. The vendor sub-tab strip scopes the tree; every active vendor
   renders the same category-section structure so User / Claude / OpenAI
   keep the same navigation model. */
.sources-actions { display: flex; gap: 6px; flex-shrink: 0; }
.source-vendor-group {
  border: none; background: transparent;
  margin-bottom: 8px;
}
.source-vendor-group + .source-vendor-group { border-top: 1px solid var(--border); padding-top: 6px; }
.source-vendor-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px;
  cursor: pointer; user-select: none; list-style: none;
  font-size: 0.84rem;
}
.source-vendor-summary::-webkit-details-marker { display: none; }
.source-vendor-summary::before {
  content: '▸';
  font-size: 0.62rem; color: var(--muted); width: 10px;
  transition: transform 0.12s ease;
}
.source-vendor-group[open] > .source-vendor-summary::before { transform: rotate(90deg); }
.source-vendor-label { color: var(--text); font-weight: 500; }
.source-vendor-count {
  font-size: 0.7rem; color: var(--muted); font-family: var(--mono);
  padding: 1px 7px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.source-category-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 6px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}
.source-category-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
  max-width: 180px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
}
.source-category-nav-btn:hover,
.source-category-nav-btn:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  outline: none;
}
.source-category-nav-btn.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: rgba(var(--accent-rgb), 0.1);
}
.source-category-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-category-nav-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--muted);
  font-family: var(--mono);
}
.source-vendor-products { display: flex; flex-direction: column; gap: 4px; }
.source-vendor-product { padding: 4px 0; }
.source-vendor-product + .source-vendor-product { border-top: 1px dashed var(--border); }
.source-vendor-product-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 18px;
  background: var(--bg);
  font-size: 0.78rem;
}
.source-vendor-products-with-nav .source-vendor-product-header { top: 36px; }
.source-vendor-product-header:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
}
.source-vendor-product-label { color: var(--text); font-weight: 500; }
.source-category-more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 10px 18px;
}
.source-category-more-status {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--mono);
}
.source-dir-tree-node {
  margin-left: calc(var(--tree-depth, 0) * 12px);
}
.source-dir-tree-branch {
  margin: 2px 0 6px;
}
.source-dir-tree-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  color: var(--muted);
}
.source-dir-tree-summary::-webkit-details-marker { display: none; }
.source-dir-tree-summary::before {
  content: '▸';
  font-size: 0.62rem;
  color: var(--muted);
  width: 10px;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.source-dir-tree-branch[open] > .source-dir-tree-summary::before { transform: rotate(90deg); }
.source-dir-tree-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* Memory source-group: same chevron header as General, plus per-dir
   stats badge and three hover-revealed actions (Open / Reindex / Remove).
   ``.source-group-memory`` indents below the vendor / product so the
   hierarchy reads visually. */
.source-group-memory { margin-left: 12px; }
.source-vendor-product .source-group-memory { margin-left: 0; }
.source-group-stats {
  font-size: 0.68rem; color: var(--muted); font-family: var(--mono);
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  padding: 0 4px;
}
/* 3-state status (kind label not exposed; color carries the meaning):
   - default (no class)   indexed, chunks > 0
   - .pending             file_count > 0 && chunk_count === 0 (ready to index)
   - .missing             status.exists === false (path resolved but not on disk) */
.source-group-stats.pending { color: #d97706; }
.source-group-stats.missing { color: #b91c1c; font-style: italic; }
/* Default-memory pill: visual cue for the first entry in
   ``memory_dirs`` config (the conventional primary memory dir). */
.source-group-default-pill {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(var(--accent-rgb, 59, 130, 246), 0.12);
  color: var(--accent, #3b82f6);
  border: 1px solid rgba(var(--accent-rgb, 59, 130, 246), 0.25);
  margin-left: 4px;
}
/* Discovered sub-section: auto-detected memory dirs we haven't indexed
   yet. Rendered muted + collapsed under their vendor group so they read
   as "candidates", not the primary content. */
.source-vendor-discovered {
  margin-top: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  opacity: 0.85;
}
.source-vendor-discovered-summary {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  font-size: 0.74rem; color: var(--muted);
  padding: 2px 4px;
}
.source-vendor-discovered-label { font-weight: 500; }
/* Empty vendor: keep the slot visible but quiet so the user knows the
   track exists without it taking up screen space. */
.source-vendor-empty > summary { opacity: 0.6; }
.source-vendor-placeholder {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 0.78rem; color: var(--muted);
}
.source-vendor-add-cta { font-size: 0.7rem; }
.source-group-missing > .source-group-header .source-group-dir {
  text-decoration: line-through; color: var(--muted);
}
.source-group-actions {
  display: flex; gap: 2px; flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.source-group-header:hover .source-group-actions,
.source-group-header:focus-within .source-group-actions { opacity: 1; }
.source-group-actions .btn-xs { font-size: 0.7rem; padding: 2px 6px; }
.source-group-remove:not(:disabled):hover { color: #b91c1c; }

/* Path button — overrides the default ``<button>`` chrome so the row
   keeps the previous span's flat look while gaining keyboard / hover
   semantics. ``text-align:left`` so long paths read naturally rather
   than centred inside the button bounds. */
button.memory-dirs-path {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
}
button.memory-dirs-path:hover { color: var(--accent); }
button.memory-dirs-path:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}

/* Drill-in file list rendered inline below an expanded path. Indented
   to align with the path label (slightly past the row's padding) so
   the visual hierarchy matches the vendor → product → row → file tree
   shape elsewhere on the panel. */
.memory-dirs-files {
  margin: 4px 0 6px 18px;
  padding: 6px 10px;
  border-left: 2px solid var(--border);
  background: var(--bg);
  border-radius: 4px;
}
.memory-dirs-files-loading,
.memory-dirs-files-empty {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}
.memory-dirs-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.memory-dirs-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.78rem;
}
.memory-dirs-file:hover { background: var(--bg-hover); }
.memory-dirs-file:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
  background: var(--bg-hover);
}
.memory-dirs-file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-dirs-file-meta {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
}

/* Toast action button — paired with ``showToast(..., {action})``.
   Reuses the accent colour so the affordance is obvious without adding
   a new variant; flush-right beside the close button. */
.toast-action {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
}
.toast-action:hover { background: rgba(var(--accent-rgb), 0.12); }

/* Config tab → Sources tab breadcrumb (Indexing card footer) */
.config-breadcrumb {
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.config-breadcrumb-link { color: var(--accent); text-decoration: none; }
.config-breadcrumb-link:hover { text-decoration: underline; }

.config-reindex-warn {
  background: #fef3c7; border: 1px solid #f59e0b; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px;
}
.config-reindex-warn-text { font-size: 0.84rem; color: #92400e; line-height: 1.5; }
.config-reindex-warn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.config-save-btn { font-size: 12px; padding: 4px 12px; }
.config-save-btn:disabled { opacity: 0.4; cursor: default; }

/* Export/Import tab */
.export-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.export-card h2 { margin: 0 0 14px; font-size: 1rem; }
.export-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.export-filters input { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.88rem; width: 100%; box-sizing: border-box; }
.export-btn-row { display: flex; gap: 8px; margin-bottom: 10px; }
.export-preview { font-size: 0.88rem; color: var(--muted); padding: 8px 0; }
.export-preview span { font-weight: 600; color: var(--text); }
.export-hint { font-size: 0.83rem; color: var(--muted); margin-bottom: 12px; }
.import-result {
  margin-top: 12px; padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.import-result table td:first-child { color: var(--muted); font-size: 0.83rem; padding-right: 16px; }
.import-result table td:last-child  { font-weight: 600; }
input[type="file"] { font-size: 0.85rem; color: var(--muted); }
.custom-file-input { display: flex; align-items: center; gap: 8px; }
.custom-file-name { font-size: 0.82rem; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Keyboard Shortcuts Modal (B) ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }
.modal-inner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px 28px;
  /* ``min-width: 320px`` floored the modal wider than a ~356px phone, forcing a
   * zero-gutter full-bleed; ``min()`` lets it shrink to fit with a gutter. */
  min-width: min(320px, 100%);
  max-width: 460px; width: 90%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
@media (max-width: 520px) {
  .modal-inner { padding: 18px 16px; }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.modal-title { font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.shortcuts-table { width: 100%; border-collapse: collapse; }
.shortcuts-table td { padding: 6px 8px; font-size: 0.85rem; vertical-align: middle; }
.shortcuts-table td:first-child { width: 110px; }
.shortcuts-table tr + tr td { border-top: 1px solid var(--border); }
kbd {
  display: inline-block; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px; font-family: var(--mono);
  font-size: 0.78rem; color: var(--text);
}

/* ── Timeline ── */
.timeline-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.timeline-controls label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.timeline-list { flex: 1; overflow-y: auto; padding: 16px 20px; }
.timeline-date-group { margin-bottom: 24px; }
.timeline-date-heading {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.tl-date-stats { display: flex; gap: 8px; }
.tl-date-stat {
  font-size: 0.7rem; font-weight: 400; color: var(--muted);
  font-family: var(--mono); text-transform: none; letter-spacing: 0;
}

/* Timeline heatmap bar chart (horizontally scrollable) */
.tl-heatmap {
  overflow-x: auto; overflow-y: hidden;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0; padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.tl-heatmap-track {
  display: flex; align-items: flex-end; gap: 2px;
  padding: 8px 20px; height: 72px;
  min-width: min-content;
}
.tl-heatmap-col {
  flex: 0 0 28px; display: flex; flex-direction: column; align-items: center;
  height: 100%; cursor: pointer;
}
.tl-heatmap-col.active .tl-heatmap-bar { opacity: 1; background: var(--green); }
.tl-heatmap-bar {
  width: 18px; min-height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  opacity: 0.5; transition: opacity 0.15s, background 0.15s;
  margin-top: auto;
}
.tl-heatmap-col:hover .tl-heatmap-bar { opacity: 1; }
.tl-heatmap-label {
  font-size: 0.58rem; color: var(--muted); font-family: var(--mono);
  white-space: nowrap; margin-top: 3px;
}
.tl-heatmap-count {
  font-size: 0.54rem; color: var(--muted); font-family: var(--mono);
  opacity: 0; transition: opacity 0.15s; margin-bottom: 2px;
}
.tl-heatmap-col:hover .tl-heatmap-count { opacity: 1; }
.timeline-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.timeline-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 80%, var(--accent) 20%); }
.timeline-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.timeline-item-source {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.timeline-source-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--mono);
}
.timeline-source-dir {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-item-time { font-size: 0.72rem; color: var(--muted); }
.timeline-item-snippet { font-size: 0.83rem; color: var(--text); line-height: 1.45; }
.timeline-item-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.timeline-tag { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; font-size: 0.7rem; color: var(--muted); }

/* Timeline view toggle */
.tl-view-toggle {
  display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0;
}
.tl-view-btn {
  padding: 4px 12px; font-size: 0.78rem; background: none; border: none;
  color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.tl-view-btn:hover { background: var(--bg); color: var(--text); }
.tl-view-btn.tl-view-active { background: var(--accent); color: #fff; }

/* Timeline file view */
.timeline-file-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 6px; cursor: pointer; overflow: hidden;
  transition: border-color 0.15s;
}
.timeline-file-item:hover,
.timeline-file-item.tl-file-expanded { border-color: var(--accent); }
.timeline-file-header {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
}
.tl-file-chevron { font-size: 0.6rem; color: var(--muted); width: 10px; flex-shrink: 0; }
.timeline-file-name {
  font-size: 0.82rem; font-weight: 500; color: var(--text); font-family: var(--mono);
  white-space: nowrap; flex-shrink: 0;
}
.timeline-file-dir {
  font-size: 0.72rem; color: var(--muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-file-count {
  font-size: 0.68rem; font-weight: 600; color: var(--accent); font-family: var(--mono);
  background: color-mix(in srgb, transparent 80%, var(--accent) 20%);
  border-radius: 10px; padding: 1px 7px; flex-shrink: 0;
}
.tl-file-time { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); flex-shrink: 0; }
.tl-file-preview {
  font-size: 0.78rem; color: var(--muted); line-height: 1.4;
  padding: 0 14px 9px 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-file-chunk-list {
  border-top: 1px solid var(--border); padding: 6px 8px; background: var(--bg);
}
.tl-file-chunk-item {
  padding: 7px 10px; border-radius: calc(var(--radius) - 2px); margin-bottom: 4px; cursor: pointer;
  transition: background 0.15s;
}
.tl-file-chunk-item:last-child { margin-bottom: 0; }
.tl-file-chunk-item:hover { background: color-mix(in srgb, var(--bg) 70%, var(--accent) 30%); }
.tl-fci-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.tl-fci-type { font-size: 0.68rem; color: var(--accent); font-family: var(--mono); text-transform: uppercase; }
.tl-fci-time { font-size: 0.68rem; color: var(--muted); font-family: var(--mono); }
.tl-fci-snippet { font-size: 0.8rem; color: var(--text); line-height: 1.4; }

/* Timeline: Activity Summary Bar (A) */
.tl-stats {
  padding: 6px 20px; text-align: center;
  font-size: 0.75rem; font-family: var(--mono); color: var(--muted);
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Timeline: File Type Color Dots (B) */
.tl-type-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; vertical-align: middle; margin-right: 4px;
}

/* Timeline: Chunk Card Inline Expansion (C) */
.timeline-item-snippet {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.timeline-item.tl-item-expanded { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); }
.timeline-item.tl-item-expanded .timeline-item-snippet {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.timeline-item.tl-item-expanded .tl-expand-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.timeline-item.tl-item-expanded .tl-expand-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tl-expand-tags { display: none; }
.tl-expand-actions { display: none; }
.tl-expand-actions button {
  font-size: 0.72rem; padding: 3px 10px; background: none; border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.tl-expand-actions button:hover { border-color: var(--accent); color: var(--accent); }
.tl-expand-actions .tl-btn-open { border-color: var(--accent); color: var(--accent); }

/* Timeline: Heatmap Interaction Enhancement (D) */
.tl-heatmap-col { position: relative; }
.tl-heatmap-col[data-tooltip]::after {
  bottom: calc(100% + 4px);
}
.tl-heatmap-col.active .tl-heatmap-bar {
  opacity: 1; background: var(--green); width: 22px;
  transform: scaleY(1.05); transform-origin: bottom;
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent);
}
.tl-heatmap-col.active .tl-heatmap-count { opacity: 1; color: var(--green); }
.tl-heatmap-col.active .tl-heatmap-label { color: var(--green); }
@keyframes tl-flash {
  0%   { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
  100% { background: transparent; }
}
.tl-date-flash { animation: tl-flash 1.2s ease-out; }

/* Files-view header "Open in source" — sits next to .tl-file-time on the
   right edge. Click is stopPropagation()'d so it doesn't toggle the
   row's expand/collapse. Sized to match the .tl-expand-actions buttons
   in chunks-view so the two views feel consistent. */
.tl-file-open-source {
  font-size: 0.7rem; padding: 2px 8px; background: none;
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--radius); cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.tl-file-open-source:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Source-tab chunk card flash for Timeline → Source navigation. The
   target chunk is scrolled into view and pulsed once so the user can
   spot which card was the navigation target among the ~100-chunk list.
   Reuses the same accent-on-surface palette as .tl-date-flash. */
@keyframes tl-target-flash {
  0%   { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
  100% { background: transparent; }
}
.chunk-card.tl-target-flash { animation: tl-target-flash 1.4s ease-out; }

/* ── Graph ── */
.graph-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.graph-controls label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.graph-container { flex: 1; position: relative; overflow: hidden; }
.graph-container svg { width: 100%; height: 100%; display: block; }
.graph-stats {
  padding: 6px 20px; font-size: 0.75rem; color: var(--muted);
  background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0;
}
.graph-tooltip {
  position: absolute; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; font-size: 0.78rem; color: var(--text);
  pointer-events: none; max-width: 260px; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Data Table */
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.data-table th { text-align: left; font-size: 0.75rem; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 7px 8px; font-size: 0.83rem; border-bottom: 1px solid var(--border); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--surface) 80%, var(--accent) 20%); }

/* Disabled states */
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.45; cursor: not-allowed; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── D2: Focus Indicators ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

input[type="text"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25);
}

.tab-btn:focus-visible { outline-offset: -2px; }

.result-item:focus-visible,
.source-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* ── A4: Loading Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }

.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn-loading::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
.loading-panel {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; height: 100%; min-height: 80px; color: var(--muted);
}
.spinner-panel {
  width: 28px; height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

/* ── A5: Empty State ── */
.empty-state { flex-direction: column; gap: 6px; }
.empty-state-icon { font-size: 1.6rem; opacity: 0.5; }
.empty-state-hint { font-size: 0.78rem; color: var(--muted); opacity: 0.7; }
.empty-state-cta { font-size: 0.82rem; color: var(--accent); text-decoration: none; margin-top: 4px; }
.empty-state-cta:hover { text-decoration: underline; }

/* Recent search chips (empty state) */
.recent-chips {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 12px; max-width: 400px;
}
.recent-chips-label { font-size: 0.72rem; color: var(--muted); width: 100%; text-align: center; margin-bottom: 2px; }
.recent-chip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 3px 12px;
  font-size: 0.75rem; color: var(--text); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.recent-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ── A1: Toast Notifications ── */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  min-width: 220px; max-width: 360px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: all;
  animation: toast-in 0.2s ease;
}
.toast.toast-out { animation: toast-out 0.2s ease forwards; }
.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-info    { border-left: 3px solid var(--accent); }
.toast-msg { flex: 1; font-size: 0.83rem; line-height: 1.4; }
.toast-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.75rem; padding: 0; line-height: 1; flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(8px); } }

/* ── A3: Confirm Dialog ── */
.confirm-dialog { max-width: 400px; }
.confirm-message { color: var(--muted); line-height: 1.5; margin-bottom: 20px; font-size: 0.875rem; }
/* Optional warning line under the confirm message (showConfirm warningText)
   — e.g. "N runtime files will be overwritten" before a Sync (#1229 U4). */
.confirm-warning { color: var(--warning, #b58900); line-height: 1.5; margin: -12px 0 20px; font-size: 0.875rem; font-weight: 600; }
.confirm-extra {
  display: flex; align-items: center; gap: 8px;
  margin: -8px 0 16px 0;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.confirm-extra input[type="checkbox"] { cursor: pointer; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Context Gateway 409 conflict dialog (issue #763). Wider than a plain
   confirm so the two side-by-side previews are legible without forcing the
   user to scroll horizontally. */
.ctx-conflict-dialog { max-width: 720px; width: 92vw; }
#ctx-conflict-preview-row { display: flex; gap: 12px; margin-bottom: 16px; }
.ctx-conflict-col { flex: 1; min-width: 0; }
.ctx-conflict-col-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ctx-conflict-pre {
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.45;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  margin: 0;
}

/* ── Sprint 2: Copy / Markdown Preview / Syntax Highlight ── */
.editor-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.editor-section-actions { display: flex; gap: 4px; }
.btn-xs { font-size: 0.7rem; padding: 2px 8px; line-height: 1.4; }
.card-copy-btn { margin-left: auto; }

.md-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 400px;
  color: var(--text);
}
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 {
  color: var(--text); margin: 0.8em 0 0.3em; line-height: 1.3;
}
.md-preview p { margin: 0.4em 0; }
.md-preview code {
  background: var(--surface); padding: 1px 5px; border-radius: 3px;
  font-size: 0.82em; font-family: var(--mono);
}
.md-preview pre {
  background: var(--surface); padding: 10px 12px; border-radius: var(--radius);
  overflow-x: auto; margin: 0.6em 0;
}
.md-preview pre code { background: none; padding: 0; }
.md-preview ul, .md-preview ol { padding-left: 1.4em; margin: 0.4em 0; }
.md-preview li { margin: 0.2em 0; }
.md-preview a { color: var(--accent); text-decoration: none; }
.md-preview a:hover { text-decoration: underline; }
.md-preview blockquote {
  border-left: 3px solid var(--border); padding-left: 12px;
  color: var(--muted); margin: 0.5em 0;
}
.md-preview table { border-collapse: collapse; width: 100%; margin: 0.6em 0; }
.md-preview th, .md-preview td {
  border: 1px solid var(--border); padding: 4px 8px; text-align: left; font-size: 0.82rem;
}
.md-preview th { background: var(--surface); }
.md-preview hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }

/* Prism theme overrides */
.chunk-card pre[class*="language-"],
.md-preview pre[class*="language-"] {
  margin: 0;
  background: var(--code-bg) !important;
  font-size: 0.78rem;
}
.chunk-card-content pre[class*="language-"] {
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* ── Sprint 3: Light Theme ── */
:root[data-theme="light"] {
  --bg:      #f4f6fa;
  --surface: #ffffff;
  --border:  #d8dce8;
  --accent:  #3b63e8;
  --danger:  #d93025;
  --text:    #1a1d2e;
  --muted:   #64687a;
  --green:   #2e7d52;
  --accent-rgb: 59, 99, 232;
  --danger-rgb: 217, 48, 37;
  --yellow: #e67e22;
  --red:     #d93025;
  --code-bg: #f5f5f5;
  --bg-primary:     var(--surface);
  --bg-secondary:   var(--bg);
  --bg-card:        var(--surface);
  --bg-hover:       rgba(59, 99, 232, 0.06);
  --text-primary:   var(--text);
  --text-secondary: var(--muted);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:      #f4f6fa;
    --surface: #ffffff;
    --border:  #d8dce8;
    --accent:  #3b63e8;
    --danger:  #d93025;
    --text:    #1a1d2e;
    --muted:   #64687a;
    --green:   #2e7d52;
    --accent-rgb: 59, 99, 232;
    --danger-rgb: 217, 48, 37;
    --yellow: #e67e22;
    --red:     #d93025;
    --code-bg: #f5f5f5;
    --bg-primary:     var(--surface);
    --bg-secondary:   var(--bg);
    --bg-card:        var(--surface);
    --bg-hover:       rgba(59, 99, 232, 0.06);
    --text-primary:   var(--text);
    --text-secondary: var(--muted);
  }
}

/* ── Sprint 3: Theme Toggle Button ── */
#theme-toggle { font-size: 1rem; padding: 4px 8px; line-height: 1; flex-shrink: 0; }

/* ── Sprint 3: Tab Overflow Scroll ── */
.tab-btn { flex-shrink: 0; }

/* ── Sprint 3: Mobile Back Button ── */
.mobile-back-btn { display: none; }

/* ── Sprint 4: Bulk Select ── */
#results-panel { display: flex; flex-direction: column; overflow: hidden; }
#results-list  { flex: 1; overflow-y: auto; }
.results-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; position: sticky; top: 0; z-index: 10; }
.results-summary-total { font-size: 0.72rem; color: var(--muted); margin-right: 2px; }
.results-summary-pipeline { font-size: 0.68rem; color: var(--muted); font-family: var(--mono); margin-left: auto; opacity: 0.7; }
.result-debug-meta { display: none !important; }
.results-debug-details {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--muted);
}
.results-debug-details summary {
  cursor: pointer;
  list-style: none;
}
.results-debug-details summary::-webkit-details-marker { display: none; }
.results-debug-details summary:hover { color: var(--text); }
.results-debug-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.bulk-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bulk-select-all-wrap {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 0.82rem; color: var(--muted);
}
#bulk-count { font-size: 0.82rem; }
.result-item  { display: flex; align-items: flex-start; gap: 8px; }
.result-check-wrap { display: flex; align-items: flex-start; padding-top: 3px; flex-shrink: 0; cursor: pointer; }
.result-checkbox { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.result-body { flex: 1; min-width: 0; }

/* ── Sprint 4: Diff View ── */
.diff-view {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: auto; max-height: 400px;
  padding: 4px 0;
}
.diff-line { display: flex; gap: 0; white-space: pre; padding: 0 8px; }
.diff-prefix { width: 14px; flex-shrink: 0; user-select: none; opacity: 0.7; }
.diff-add { background: rgba(76, 175, 125, 0.15); color: var(--green); }
.diff-del { background: rgba(224, 90, 90, 0.15); color: var(--danger); }
.diff-eq  { color: var(--muted); }

/* ── Hooks Sync ── */
/* Header lays out the title + Sync Now button. flex-wrap + gap keep
 * the button on its own row on narrow widths instead of letting it
 * overflow the settings panel (issue #962). */
.hooks-sync-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
#hooks-sync-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* rank 11 superseded rank 22's in-section ``.hooks-controls`` row: the Hooks
   active-project + tier controls now live in the shared gateway header bar
   (#ctx-control-bar), so the section status row holds only the badge + target. */
.hooks-status-target { font-size: 0.78rem; color: var(--muted); max-width: 100%; }
/* ``overflow-wrap: anywhere`` lets long absolute paths break at any
 * character so the target span never pushes the Sync Now button or
 * the panel edge off-screen (issue #962). */
.hooks-status-target code {
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.hooks-sync-needs-confirmation {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--warning, #b58900);
  border-radius: var(--radius);
  background: rgba(181, 137, 0, 0.08);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hooks-sync-needs-confirmation-body {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* ADR-0010 §3 duplicate-tier banner: read-only warning that memtomem-managed
 * hook entries also live in a non-active tier (#1247 id 32). Same warning
 * tokens as .hooks-sync-needs-confirmation; hidden attr toggled by JS. */
.hooks-duplicate-banner {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--warning, #b58900);
  border-radius: var(--radius);
  background: rgba(181, 137, 0, 0.08);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hooks-duplicate-banner[hidden] { display: none; }
.hooks-duplicate-banner-row { overflow-wrap: anywhere; }
.hooks-duplicate-banner-row code {
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.hooks-sync-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-bottom: 12px; background: var(--surface);
}
.hooks-sync-conflict { border-color: var(--danger); }
.hooks-sync-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.hooks-sync-preview {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px; margin: 0;
  overflow: auto; max-height: 200px;
}
/* Per-rule detail panel — #962. Clickable rule rows surface the full
 * rule body in a shared panel below the lists. Conflict cards keep
 * their own diff view as the effective detail. */
.hooks-rule-row { cursor: pointer; }
.hooks-rule-row:hover { background: var(--bg); }
.hooks-rule-row--synced { padding: 0.25rem 0.5rem; border-radius: var(--radius); }
.hooks-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 1rem 0 0.5rem;
}
.hooks-section-header h3 { margin: 0; }
.hooks-rule-detail {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 18px 20px;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.hooks-rule-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.hooks-rule-detail-inner {
  min-height: 280px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.hooks-rule-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.22fr) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  margin: 8px 0;
  font-size: 0.86rem;
}
.hooks-rule-detail-label {
  color: var(--muted);
  font-weight: 600;
}
.hooks-rule-detail-value {
  color: var(--text);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.hooks-rule-detail-json {
  width: 100%;
  min-height: 170px;
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  margin: 0;
  overflow: auto;
  max-height: 200px;
  width: 100%;
}
.hooks-rule-detail-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.hooks-rule-edit-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

/* ── Sprint 4: Home Tab ── */
.home-layout { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow-y: auto; }

/* C. Quick Search */
.home-search-row { display: flex; justify-content: center; }
.home-search-wrap { display: flex; gap: 8px; width: 100%; max-width: 600px; }
.home-search-wrap { align-items: stretch; }
.home-search-wrap input { flex: 1; min-width: 0; }

/* A. Stats Row */
.home-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
body.dev-mode .home-stats-row { grid-template-columns: repeat(6, 1fr); }
.home-stats-row .stat-card { min-width: 0; }

.home-section-title {
  font-size: 0.75rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 12px; font-weight: 600;
}

/* B+D+G. Activity + Charts row */
.home-activity-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: stretch; }
.home-activity-row > .card { display: flex; flex-direction: column; }
.home-activity-row > .card > :last-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.home-activity { min-width: 0; grid-column: 1 / -1; order: 99; }
.home-activity-map { overflow-x: auto; padding: 4px 0; min-height: 36px; }

/* GitHub contribution graph */
.activity-summary {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px;
  font-size: 0.68rem; color: var(--muted);
}
.activity-summary span { white-space: nowrap; }
.activity-map-frame {
  display: grid;
  grid-template-columns: max-content minmax(688px, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 6px;
  min-width: 728px;
}
.activity-weekday-spacer { grid-column: 1; grid-row: 1; }
.activity-months {
  grid-column: 2; grid-row: 1;
  display: grid; gap: 2px; margin-bottom: 3px;
  font-size: 0.6rem; color: var(--muted); font-family: var(--mono);
}
.activity-months span { white-space: nowrap; }
.activity-weekdays {
  grid-column: 1; grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  font-size: 0.56rem;
  line-height: 1;
  color: var(--muted);
  font-family: var(--mono);
}
.activity-weekdays span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 9px;
}
.activity-grid {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 2px;
}
.activity-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  outline: 1px solid rgba(255,255,255,0.04);
}
.activity-cell[data-level="0"] { background: #2d3145; }
.activity-cell[data-level="1"] { background: #0e4429; }
.activity-cell[data-level="2"] { background: #006d32; }
.activity-cell[data-level="3"] { background: #26a641; }
.activity-cell[data-level="4"] { background: #39d353; }
.activity-empty { background: transparent; outline: none; }
:root[data-theme="light"] .activity-cell { outline-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .activity-cell[data-level="0"] { background: #ebedf0; }
:root[data-theme="light"] .activity-cell[data-level="1"] { background: #9be9a8; }
:root[data-theme="light"] .activity-cell[data-level="2"] { background: #40c463; }
:root[data-theme="light"] .activity-cell[data-level="3"] { background: #30a14e; }
:root[data-theme="light"] .activity-cell[data-level="4"] { background: #216e39; }
.activity-cell-link { cursor: pointer; transition: outline-color 120ms ease; }
.activity-cell-link:hover { outline: 1px solid var(--accent); outline-offset: 1px; }
.activity-cell-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.activity-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.62rem;
  color: var(--muted);
}
.activity-legend-cell {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.home-chart-card { min-width: 0; }
.home-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.home-bar-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.home-ns-row { align-items: flex-start; gap: 6px; }
.home-ns-open {
  appearance: none; border: 0; background: transparent; color: inherit;
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 2px; margin: -2px; border-radius: 4px; cursor: pointer;
  font: inherit; text-align: left;
}
.home-ns-open:hover .home-bar-label,
.home-ns-open:focus-visible .home-bar-label,
.ns-legend-action:hover .ns-legend-label,
.ns-legend-action:focus-visible .ns-legend-label { color: var(--accent); }
.home-ns-open:focus-visible,
.ns-legend-action:focus-visible,
.home-ns-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.home-bar-label {
  font-family: var(--mono); color: var(--text);
  width: min(120px, 36vw); max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
}
.home-bar-track { flex: 1; min-width: 0; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.home-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.home-bar-count {
  font-family: var(--mono); color: var(--muted); font-size: 0.68rem;
  min-width: 40px; max-width: 60px; text-align: right; flex-shrink: 0; white-space: nowrap;
}
.home-ns-action {
  color: var(--accent); font-size: 0.66rem; font-weight: 600; flex-shrink: 0;
}
.home-ns-detail {
  color: var(--muted); font-size: 0.66rem; line-height: 1.35; min-width: 34px;
}
.home-ns-detail summary {
  cursor: pointer; list-style: none; color: var(--muted); white-space: nowrap;
}
.home-ns-detail summary::-webkit-details-marker { display: none; }
.home-ns-detail[open] {
  flex-basis: 100%;
  margin-left: 2px;
  overflow-wrap: anywhere;
}
.home-ns-detail[open] summary {
  margin-bottom: 2px;
  color: var(--accent);
}
.home-ns-more {
  appearance: none; border: 0; background: transparent; color: var(--accent);
  align-self: flex-start; padding: 2px 0; font-size: 0.72rem; cursor: pointer;
}
.muted-sm { color: var(--muted); font-size: 0.72rem; }

/* E. Recent Sources (improved — 2-row with color dot) */
.home-recent-list { display: flex; flex-direction: column; gap: 3px; }
.home-source-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--bg);
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: border-color 0.15s;
}
.home-source-item:hover { border-color: var(--accent); background: var(--surface); }
.home-source-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.home-source-item.home-recent-item {
  flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 10px;
}
.home-source-row1 { display: flex; align-items: center; gap: 6px; }
.home-source-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.home-source-name {
  font-family: var(--mono); color: var(--text); font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.home-source-row2 {
  font-size: 0.68rem; color: var(--muted); font-family: var(--mono); padding-left: 14px;
}

/* F. Quick Actions + Pinned bottom row */
.home-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-quick-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.home-quick-actions .btn-ghost { font-size: 0.78rem; }

/* H. Storage Health */
.home-health-info { display: flex; gap: 12px; flex-wrap: wrap; }
.home-health-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); min-width: 120px; flex: 1;
}
.home-health-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.home-health-value { font-family: var(--mono); font-size: 0.82rem; color: var(--text); }

/* ── Utilities ── */
.w-60  { width: 60px; }
.w-70  { width: 70px; }
.w-80  { width: 80px; }
.flex-1 { flex: 1; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.scroll-y { overflow-y: auto; }

/* ── Sprint 3: Responsive Breakpoints ── */
@media (max-width: 960px) {
  .home-stats-row,
  body.dev-mode .home-stats-row { grid-template-columns: repeat(3, 1fr); }
  .home-activity-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Home tab responsive */
  .home-stats-row,
  body.dev-mode .home-stats-row { grid-template-columns: repeat(2, 1fr); }
  .home-activity-row { grid-template-columns: 1fr; }
  .home-bottom-row { grid-template-columns: 1fr; }

  /* Header */
  header { padding: 0 12px; gap: 8px; }
  .header-sys-info { display: none; }
  .header-sep { display: none; }
  .stat-pill { font-size: 0.7rem; }

  /* Search bar/filters: stack on small screens */
  .search-bar { flex-wrap: wrap; padding: 10px 12px; }
  .search-bar .search-input-wrap { flex: 1 1 100%; }
  .search-filters { padding: 8px 12px; }
  .search-filters input[type="text"] { max-width: none; }
  #source-filter, #tag-filter { flex: 1; max-width: none; }

  /* Results: show list OR detail, not both */
  .results-layout { flex-direction: column; }
  .results-layout #results-panel { width: 100% !important; }
  .results-divider { display: none; }
  #detail-panel { display: none; padding: 12px; }
  .results-layout.mobile-detail #results-panel { display: none; }
  .results-layout.mobile-detail #detail-panel { display: block; }

  /* Mobile back button */
  .mobile-back-btn { display: inline-flex; margin-bottom: 12px; }

  /* Sources: stack sidebar above chunks */
  .sources-layout { flex-direction: column; height: auto; overflow-y: auto; }
  .sources-layout .sources-sidebar {
    width: 100% !important;
    height: 280px;
    max-height: 280px;
    border-bottom: 1px solid var(--border);
  }
  .sources-divider { display: none; }

  /* Tags, Export: single column */
  .tags-layout { grid-template-columns: 1fr; }
  #tab-tags { overflow-y: auto; }
  .export-layout { grid-template-columns: 1fr; }
  #tab-export { overflow-y: auto; }

  /* Index: stack on mobile */
  .index-form-row { flex-direction: column; }
  .index-secondary { flex-direction: column; }

  /* Dedup: stack chunk comparison */
  .dedup-chunks { grid-template-columns: 1fr; }

  /* Tab panels need scroll */
  .tab-panel.active { overflow-y: auto; }
}

@media (max-width: 430px) {
  .home-layout { padding: 12px; gap: 12px; }

  .tab-nav {
    padding: 0 8px;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .tab-btn {
    padding: 10px 12px;
    font-size: 0.76rem;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .tab-nav::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .tab-nav::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
  }
  .tab-nav::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .home-search-wrap {
    flex-direction: column;
    gap: 6px;
  }
  .home-search-wrap button {
    width: 100%;
    min-width: 0;
  }
  .home-search-wrap,
  .home-search-wrap input {
    min-width: 0;
  }

  .home-stats-row {
    grid-template-columns: 1fr;
  }
  body.dev-mode .home-stats-row {
    grid-template-columns: 1fr;
  }
  .activity-map-frame {
    min-width: 0;
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .activity-weekdays span { min-height: 8px; }
  .activity-grid { gap: 1px; }

  .home-bar-label {
    width: 84px;
    max-width: 84px;
  }
  .home-bar-count {
    min-width: 32px;
    max-width: 52px;
    font-size: 0.64rem;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .tab-btn {
    padding: 10px 10px;
    font-size: 0.72rem;
  }

  .home-bar-label {
    width: 76px;
    max-width: 76px;
  }
}

/* ── Sprint 5: Chunk-type filter ── */
#chunk-type-filter { width: 110px; }

/* ── Sprint 5: Load More ── */
.load-more-row {
  display: flex; justify-content: center;
  padding: 10px 16px; flex-shrink: 0;
  border-top: 1px solid var(--border); background: var(--bg);
}
.load-more-row button { width: 100%; max-width: 200px; }

/* ── Sprint 5: Pin button ── */
.btn-pin-active {
  color: #ffc107 !important;
  border-color: rgba(255, 193, 7, 0.4) !important;
}

/* ── Sprint 5: Home pinned section ── */
.home-pinned-list { display: flex; flex-direction: column; gap: 4px; }
.home-pinned-item.home-pinned-stale {
  border-color: var(--yellow);
}
.home-pinned-open {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
  border-radius: var(--radius);
}
.home-pinned-open:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.home-pinned-snippet {
  font-size: 0.75rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0; margin: 0 6px;
}
.home-pinned-stale-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
}

/* ── Sprint 5: Settings modal ── */
.settings-form { display: flex; flex-direction: column; gap: 10px; }
.settings-label {
  font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.settings-form select { width: 100%; }
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ── Sprint 6: Advanced filters panel ── */
.search-advanced {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding: 10px 20px 12px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.adv-row { display: flex; flex-direction: column; gap: 5px; }
.adv-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
#source-filter[multiple] {
  min-width: 200px; max-width: 320px; font-size: 0.8rem;
  padding: 2px 6px; scrollbar-width: thin; height: 90px;
}

/* ── Sprint 6: Score threshold ── */
.score-wrap { display: flex; align-items: center; gap: 6px; }
#score-threshold { width: 120px; accent-color: var(--accent); cursor: pointer; }

/* ── Sprint 6: Advanced toggle active ── */
.btn-ghost.btn-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

/* ── Sprint 6: List view ── */
#results-list.list-view .result-item { padding: 5px 16px; }
#results-list.list-view .result-body { display: flex; align-items: baseline; gap: 10px; }
#results-list.list-view .result-item-row1 { flex-shrink: 0; margin-bottom: 0; }
#results-list.list-view .result-item-meta { display: none; }
#results-list.list-view .result-score-bar { display: none; }
#results-list.list-view .result-snippet { display: none; }

/* ── Sprint 6: Expand modal ── */
.expand-modal-inner {
  max-width: 900px; width: 90vw; max-height: 85vh;
  display: flex; flex-direction: column; gap: 12px;
}
.expand-content {
  flex: 1; overflow: auto; min-height: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin: 0;
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.6;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}

/* ── Source Preview modal ── */
.source-preview-inner {
  max-width: 960px; width: 92vw; max-height: 88vh;
  display: flex; flex-direction: column; gap: 0;
}
.source-preview-inner .modal-header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.source-preview-actions { display: flex; align-items: center; gap: 8px; }
.source-preview-info {
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
}
.source-preview-body {
  flex: 1; overflow: auto; min-height: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0; margin: 0;
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.65;
  color: var(--text);
}
.source-preview-body table {
  width: 100%; border-collapse: collapse;
}
.source-preview-body .line-no {
  width: 1px; white-space: nowrap; padding: 0 12px 0 10px;
  text-align: right; color: var(--muted); user-select: none;
  font-size: 0.72rem; vertical-align: top;
  border-right: 1px solid var(--border);
}
.source-preview-body .line-content {
  padding: 0 12px; white-space: pre-wrap; word-break: break-word;
}
.source-preview-body tr.highlight-chunk {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.source-preview-body tr.highlight-chunk .line-no {
  color: var(--accent); font-weight: 600;
}

/* ── Sprint 7: Sort select ── */
#sort-select { width: 100px; }

/* ── Sprint 7: Source nav (prev/next) ── */
.source-nav { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.source-pos { font-size: 0.7rem; color: var(--muted); min-width: 36px; text-align: center; }

/* ── Sprint 7: Word count bar ── */
.word-count-bar { font-size: 0.68rem; color: var(--muted); text-align: right; padding: 2px 2px; }

/* ── Sprint 7: Result timestamp ── */
.result-ts { float: right; font-size: 0.65rem; color: var(--muted); font-weight: 400; }

/* ── Sprint 7: Saved searches ── */
.saved-wrap { display: flex; gap: 4px; align-items: center; }
.saved-wrap select { flex: 1; font-size: 0.78rem; min-width: 140px; }

/* ── Sprint 8: Group by source (N1) ── */
.result-source-group { border-bottom: 1px solid var(--border); }
.result-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; user-select: none;
  background: var(--surface); font-size: 0.78rem; font-weight: 600;
}
.result-group-header:hover { background: rgba(var(--accent-rgb),0.06); }
.result-group-name { flex: 1; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-group-chevron { color: var(--muted); font-size: 0.7rem; width: 12px; flex-shrink: 0; }

/* ── Sprint 8: Search drop overlay (N2) ── */
#tab-search { position: relative; }
.search-drop-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(var(--accent-rgb),0.10); border: 3px dashed var(--accent);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; border-radius: var(--radius);
}
.search-drop-msg { font-size: 1.3rem; color: var(--accent); font-weight: 600; }

/* ── Sprint 8: Connections mini-graph (N3) ── */
.connections-body { display: flex; gap: 10px; align-items: flex-start; }
.connections-svg { flex: 1 1 0; min-width: 0; height: 200px; display: block; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); }
.connections-preview { flex: 2 1 0; min-width: 0; height: 200px; overflow-y: auto; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.78rem; box-sizing: border-box; }
.conn-preview-hint { color: var(--muted); font-size: 0.78rem; display: flex; align-items: center; justify-content: center; height: 100%; }
.conn-preview-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.conn-preview-file { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conn-preview-score { color: var(--accent); font-size: 0.72rem; flex-shrink: 0; }
.conn-preview-text { color: var(--muted); line-height: 1.45; word-break: break-word; white-space: pre-wrap; }

/* ── Sprint 8: Bulk export select ── */
.bulk-export-fmt-select { font-size: 0.78rem; height: 24px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 4px; }

/* ── Namespace badge ── */
.badge-ns { background: rgba(108, 92, 231, 0.15); color: #a29bfe; font-family: var(--mono); }
/* Retrieval source badges */
.badge-retrieval { font-family: var(--mono); font-size: 0.65rem; }
.badge-retrieval--fused   { background: rgba(0, 184, 148, 0.15); color: #00b894; }
.badge-retrieval--bm25    { background: rgba(253, 203, 110, 0.15); color: #e0a800; }
.badge-retrieval--dense   { background: rgba(116, 185, 255, 0.15); color: #5ba4f5; }
.badge-retrieval--reranked{ background: rgba(232, 67, 147, 0.15); color: #e84393; }

/* ── Canonical-residency tier badges (ADR-0016 §7) ──
 * Three literal tokens rendered as-is — no display aliases
 * (project memory "Tiered Context Gateway v2" pins this contract).
 * Colors track the trust axis: user (cool, low risk),
 * project_shared (warm, git-tracked), project_local (neutral, draft).
 */
.badge-tier { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.02em; }
.badge-tier--user           { background: rgba(116, 185, 255, 0.15); color: #5ba4f5; }
.badge-tier--project_shared { background: rgba(253, 203, 110, 0.18); color: #e0a800; }
.badge-tier--project_local  { background: rgba(123, 127, 150, 0.18); color: var(--muted); }
.tier-fanout-annotation { font-size: 0.65rem; color: var(--muted); margin-left: 4px; font-style: italic; }

/* ── Namespaces Tab ── */
.ns-layout { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow-y: auto; }
.ns-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ns-header h2 { font-size: 1rem; font-weight: 600; }
.ns-list { display: flex; flex-direction: column; gap: 8px; }
.ns-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s;
}
.ns-card:hover { border-color: var(--accent); }
.ns-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border); cursor: default; }
.ns-name { font-family: var(--mono); font-size: 0.88rem; font-weight: 600; color: var(--text); }
.ns-desc { font-size: 0.78rem; color: var(--muted); margin-left: 8px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ns-count { font-size: 0.78rem; color: var(--muted); flex-shrink: 0; }
.ns-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ns-actions button { font-size: 0.72rem; padding: 3px 8px; }
.ns-edit-form {
  width: 100%; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 0 2px; border-top: 1px solid var(--border);
  animation: fadeSlideDown 0.15s ease;
}
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ns-edit-row { display: flex; align-items: center; gap: 8px; }
.ns-edit-row label { font-size: 0.78rem; color: var(--muted); width: 80px; flex-shrink: 0; }
.ns-edit-row input[type="text"] { flex: 1; font-size: 0.82rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.ns-edit-row input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
.ns-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Namespace Groups (collapsible prefix groups) ── */
.ns-group { margin-bottom: 4px; }
.ns-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; cursor: pointer; user-select: none;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s;
}
.ns-group-header:hover { border-color: var(--accent); }
.ns-group-chevron {
  font-size: 0.6rem; color: var(--muted);
  transition: transform 0.15s; flex-shrink: 0;
}
.ns-group.collapsed .ns-group-chevron { transform: rotate(-90deg); }
.ns-group.collapsed .ns-group-items { display: none; }
.ns-group-name {
  font-family: var(--mono); font-size: 0.88rem;
  font-weight: 600; color: var(--text);
}
.ns-group-chunks {
  font-size: 0.78rem; color: var(--muted); margin-left: auto; flex-shrink: 0;
}
.ns-group-items {
  padding-left: 20px; display: flex;
  flex-direction: column; gap: 6px; margin-top: 6px;
}

/* ── Chunk Card Actions (Sources tab) ── */
.chunk-card-actions { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.chunk-card-actions button { font-size: 0.68rem; padding: 2px 7px; }
.chunk-card-edit-area { margin-top: 8px; }
.chunk-card-edit-area textarea {
  width: 100%; min-height: 120px; font-family: var(--mono); font-size: 0.82rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 8px; resize: vertical;
}
.chunk-card-edit-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Chunks browser header controls */
.chunks-browser-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.chunks-browser-info { font-size: 0.75rem; color: var(--muted); }
.chunks-load-all-btn { font-size: 0.72rem; padding: 2px 10px; }

/* ── Context Window (Search results) ── */
.context-window-row { display: flex; align-items: center; gap: 8px; padding: 0 20px 0 0; }
.context-window-row label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.context-window-row select { width: 70px; }

.context-block { margin: 4px 0; padding: 8px 12px; border-radius: var(--radius); font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.context-block-before { background: rgba(var(--accent-rgb),0.06); border-left: 2px solid rgba(var(--accent-rgb),0.3); color: var(--muted); }
.context-block-after { background: rgba(76,175,125,0.06); border-left: 2px solid rgba(76,175,125,0.3); color: var(--muted); }
.context-toggle-btn { font-size: 0.68rem; padding: 1px 6px; color: var(--accent); cursor: pointer; background: none; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 4px; }
.context-toggle-btn:hover { border-color: var(--accent); }
.context-wrapper { margin-top: 4px; }

/* Saved Searches bar */
.saved-searches-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 0; font-size: 0.78rem;
}
.saved-bar-label { color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.saved-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: 12px; padding: 3px 6px 3px 10px; font-family: var(--mono);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.saved-chip:hover { background: rgba(var(--accent-rgb),0.18); border-color: var(--accent); }
.saved-chip-name { color: var(--accent); font-size: 0.75rem; }
.saved-chip-remove {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.6rem; padding: 0 2px; line-height: 1; opacity: 0.5;
}
.saved-chip-remove:hover { opacity: 1; color: var(--danger); }

/* Task A: Context groups (document order) */
.context-group { margin: 2px 0; }
.context-pos { font-size: 0.68rem; color: var(--muted); display: block; margin-bottom: 2px; }

/* Task B: Document View in Sources */
.view-mode-toggle { display: flex; gap: 2px; background: var(--bg); border-radius: var(--radius); padding: 2px; border: 1px solid var(--border); margin-left: auto; }
.view-mode-btn { background: none; border: none; color: var(--muted); font-size: 0.72rem; padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.view-mode-btn:hover { color: var(--text); }
.view-mode-btn.active { background: var(--accent) !important; color: #fff !important; }
.document-view { position: relative; }
.document-copy-btn { position: absolute; top: 8px; right: 8px; z-index: 1; }
.document-content { max-height: 70vh; overflow-y: auto; padding: 8px; font-size: 0.82rem; line-height: 1.6; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.doc-chunk-block { position: relative; padding: 8px 10px; border-radius: 4px; word-break: break-word; font-size: 0.82rem; line-height: 1.6; font-family: var(--mono); transition: background 0.1s; }
.doc-chunk-block:not(:has(pre)) { white-space: pre-wrap; }
.doc-chunk-block pre { margin: 0; font-size: inherit; line-height: inherit; }
.doc-chunk-block:not(:last-child) { border-bottom: 1px dashed var(--border); margin-bottom: 2px; }
.doc-chunk-block:hover { background: var(--surface); }
.doc-chunk-edit-btn { position: absolute; bottom: 6px; right: 6px; opacity: 0; transition: opacity 0.15s; padding: 2px 7px; font-size: 0.7rem; }
.doc-chunk-block:hover .doc-chunk-edit-btn { opacity: 1; }
.doc-chunk-block .chunk-card-edit-area { margin-top: 8px; }

/* Result tag chips (inline on search results) */
.result-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.result-tag-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.72rem; padding: 2px 6px 2px 8px;
  background: rgba(var(--accent-rgb),0.08); color: var(--accent);
  border-radius: 10px; border: 1px solid rgba(var(--accent-rgb),0.2);
  font-family: var(--mono); transition: background 0.15s, border-color 0.15s;
}
.result-tag-chip:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.18); }
.result-tag-label { cursor: pointer; }
.result-tag-remove {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.62rem; padding: 0 0 0 2px; line-height: 1; opacity: 0.5;
}
.result-tag-remove:hover { opacity: 1; color: var(--danger); }

/* ── Pipeline Badges ── */
.pipeline-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.pipeline-badge {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; padding: 2px 8px;
  background: rgba(var(--accent-rgb),0.12); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 10px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pipeline-badge:hover { background: rgba(var(--accent-rgb),0.22); border-color: var(--accent); }

/* ── Config Hint / Status ── */
.config-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--muted); padding: 6px 10px;
  background: rgba(var(--accent-rgb),0.06); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 8px;
}
.config-hint .pipeline-badge { font-size: 0.7rem; padding: 1px 7px; }

/* Index-tab Extensions hint reads as data, not as a callout — strip the
   filled-card chrome the shared .config-hint base adds and prefix with an
   info glyph via ::before so the marker is single-source-of-truth in CSS
   regardless of which writer populates `textContent`. */
#index-config-hint {
  background: transparent; border: none; padding: 0; margin-bottom: 6px;
  border-radius: 0;
}
#index-config-hint::before { content: 'ⓘ\00a0'; color: var(--muted); }

/* Inline panel help text — muted small line above an action area, e.g. the
   one-shot vs persistent surfacing in the folder index panel. */
.panel-help-text {
  font-size: 0.78rem; color: var(--muted); margin: 4px 0 10px;
}
.link-inline {
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.link-inline:hover { color: var(--accent-hover, var(--accent)); }

.config-status {
  font-size: 0.78rem; padding: 6px 10px;
  border-radius: var(--radius); margin-bottom: 8px;
  border: 1px solid var(--border);
}
.config-status-on { color: var(--green); background: rgba(76,175,125,0.08); border-color: rgba(76,175,125,0.25); }
.config-status-off { color: var(--muted); background: rgba(var(--accent-rgb),0.06); }

/* Task F: Tag empty hint */
.tag-empty-hint { font-size: 0.78rem; color: var(--muted); font-style: italic; padding: 4px 0; }

/* ═══════════════════════════════════════════════════════════════
   Phase 4a: Command Palette (Cmd+K)
   ═══════════════════════════════════════════════════════════════ */
.cmd-palette-inner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: 90%; max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cmd-input {
  width: 100%; border: none; background: transparent;
  padding: 14px 18px; font-size: 1rem; color: var(--text);
  font-family: var(--font); outline: none;
  border-bottom: 1px solid var(--border);
}
.cmd-input::placeholder { color: var(--muted); }
.cmd-list { max-height: 320px; overflow-y: auto; padding: 6px 0; }
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; cursor: pointer; transition: background 0.08s;
  font-size: 0.88rem; color: var(--text);
}
.cmd-item:hover, .cmd-item.cmd-active { background: rgba(var(--accent-rgb),0.12); }
.cmd-item-icon { width: 20px; text-align: center; font-size: 0.9rem; flex-shrink: 0; }
.cmd-item-label { flex: 1; }
.cmd-item-hint { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }
.cmd-group-label {
  font-size: 0.68rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 8px 18px 4px;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 1a: Save Star Button
   ═══════════════════════════════════════════════════════════════ */
#save-star-btn { font-size: 1rem; padding: 4px; line-height: 1; }
#save-star-btn.starred { color: var(--yellow); }
.saved-section-label {
  font-size: 0.68rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 6px 12px 2px;
  border-top: 1px solid var(--border);
}
.saved-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; }
.saved-item:hover { background: rgba(var(--accent-rgb),0.1); }
.saved-star { color: var(--yellow); font-size: 0.9rem; flex-shrink: 0; }
.saved-text { font-size: 0.83rem; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   Phase 1b: Related Chunks
   ═══════════════════════════════════════════════════════════════ */
.related-loading { text-align: center; padding: 12px; color: var(--muted); font-size: 0.78rem; }

/* ═══════════════════════════════════════════════════════════════
   Phase 1c: Compare View
   ═══════════════════════════════════════════════════════════════ */
.compare-modal-inner { max-width: 90vw; width: 900px; max-height: 80vh; display: flex; flex-direction: column; }
.compare-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.compare-pane {
  flex: 1; overflow-y: auto; padding: 14px;
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.compare-pane-header {
  font-size: 0.75rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.compare-pane-meta { font-size: 0.72rem; color: var(--muted); margin-bottom: 8px; }
.compare-divider { width: 1px; background: var(--border); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   Phase 2a: Graph Improvements
   ═══════════════════════════════════════════════════════════════ */
.graph-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0; }
.graph-controls label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.graph-controls select, .graph-controls input { font-size: 0.82rem; }
.graph-container { position: relative; flex: 1; min-height: 400px; }
.graph-container svg { width: 100%; height: 100%; }
.graph-stats { font-size: 0.78rem; color: var(--muted); padding: 6px 0; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.graph-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--muted); }
.graph-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.cluster-hull { fill-opacity: 0.06; stroke-width: 1.5; stroke-dasharray: 4 2; }

/* ═══════════════════════════════════════════════════════════════
   Phase 2b: Dashboard D3 Charts
   ═══════════════════════════════════════════════════════════════ */
.home-ns-d3 { position: relative; }
.home-ns-d3 svg { width: 100%; display: block; }
.d3-donut-label {
  font-size: 0.7rem; font-family: var(--mono); fill: var(--text);
  pointer-events: none;
}
.d3-donut-center {
  font-size: 1rem; font-weight: 700; fill: var(--text);
  text-anchor: middle; dominant-baseline: central;
}
.ns-legend-row {
  display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 0 0;
  font-size: 0.72rem; color: var(--muted); font-family: var(--mono);
}
.ns-legend-item { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ns-legend-action {
  appearance: none; border: 0; background: transparent; color: inherit;
  display: flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px; margin: -2px; border-radius: 4px; cursor: pointer;
  font: inherit;
}
.ns-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ns-legend-label {
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 150px;
}
.ns-legend-count { color: var(--muted); flex-shrink: 0; }
.ns-legend-detail { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════
   Phase 3b: Server Health Indicator
   ═══════════════════════════════════════════════════════════════ */
.health-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.health-ok { background: var(--green); box-shadow: 0 0 4px var(--green); }
.health-slow { background: var(--yellow); box-shadow: 0 0 4px var(--yellow); }
.health-down { background: var(--danger); box-shadow: 0 0 4px var(--danger); }

/* ── Tab Help Bar (dismissible description per tab) ── */
.tab-help-bar {
  font-size: 0.78rem; color: var(--muted); padding: 6px 14px;
  background: rgba(var(--accent-rgb),0.06); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tab-help-bar-text { flex: 1; line-height: 1.4; }
.tab-help-bar-dismiss {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.72rem; padding: 2px 6px; border-radius: var(--radius);
  flex-shrink: 0; transition: color 0.15s;
}
.tab-help-bar-dismiss:hover { color: var(--text); }

/* ── Info Icon Popover (pure CSS, no JS) ── */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(var(--accent-rgb),0.15); color: var(--accent);
  font-size: 0.62rem; font-weight: 700; font-style: normal;
  cursor: help; position: relative; vertical-align: middle;
  margin-left: 4px; flex-shrink: 0; line-height: 1;
}
.help-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-tip::after {
  content: attr(data-help);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(280px, calc(100vw - 32px)); white-space: normal;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-size: 0.75rem; font-weight: 400; line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  pointer-events: none; z-index: 300;
  opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s;
}
.help-tip:hover::after,
.help-tip:focus-visible::after { opacity: 1; visibility: visible; }
/* Narrow container tooltips — anchor right to avoid grid column clip */
.help-tip--right::after { left: auto; right: -12px; transform: none; }

/* ── Global Help Toggle ── */
body.help-hidden .tab-help-bar,
body.help-hidden .help-tip { display: none !important; }
#help-toggle {
  background: none; border: 1px solid var(--border); color: var(--muted);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: 0.82rem; font-weight: 700; line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
#help-toggle:hover { color: var(--accent); border-color: var(--accent); }
body.help-hidden #help-toggle { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════
   Phase 4c: Mobile Touch Gestures
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .swipe-hint {
    font-size: 0.68rem; color: var(--muted); text-align: center; padding: 4px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Harness (Sessions, Working Memory, Procedures, Health)
   ═══════════════════════════════════════════════════════════════ */

.harness-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.harness-header h2 { margin: 0; font-size: 1.1rem; }

.harness-list { margin-top: 8px; }

.harness-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.harness-table th {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase;
}
.harness-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border-light, var(--border));
  vertical-align: top;
}
.harness-table tr:hover td { background: var(--hover-bg, rgba(128,128,128,0.05)); }

.harness-detail {
  margin-top: 16px; padding: 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card-bg, var(--bg-secondary, #f8f8f8));
}
.harness-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.harness-detail-header h3 { margin: 0; font-size: 0.95rem; }

.harness-event {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border-light, var(--border));
}
.harness-event:last-child { border-bottom: none; }
.harness-event-content { flex: 1; font-size: 0.82rem; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 0.7rem; font-weight: 500; white-space: nowrap;
}
.badge-active { background: #22c55e22; color: #16a34a; }
.badge-query { background: #3b82f622; color: #2563eb; }
.badge-add { background: #f59e0b22; color: #d97706; }
.badge-edit { background: #8b5cf622; color: #7c3aed; }
.badge-delete { background: #ef444422; color: #dc2626; }
.badge-tool_call { background: #6366f122; color: #4f46e5; }
.badge-subagent_start { background: #10b98122; color: #059669; }
.badge-subagent_stop { background: #6b728022; color: #4b5563; }
.badge-decision { background: #f59e0b22; color: #d97706; }
.badge-error { background: #ef444422; color: #dc2626; }
.badge-promoted { background: #22c55e22; color: #16a34a; }

.harness-event-meta {
  margin: 4px 0 2px 0; padding: 6px 8px; border-radius: 4px;
  background: var(--bg-secondary, #f3f4f6); font-size: 0.75rem;
  font-family: monospace; white-space: pre-wrap; word-break: break-all;
  color: var(--muted);
}

.harness-event-filter {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px;
}
.harness-event-filter button {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
  cursor: pointer; color: var(--text);
}
.harness-event-filter button.active {
  background: var(--accent, #3b82f6); color: #fff; border-color: transparent;
}

.scratch-add-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.scratch-add-row input { font-size: 0.82rem; }
.w-120 { width: 120px; }
.btn-danger-text { color: var(--danger, #ef4444) !important; }

.harness-procedure {
  padding: 12px; margin-bottom: 8px;
}
.harness-procedure-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.harness-procedure-content {
  font-size: 0.8rem; white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto; margin: 0;
  padding: 8px; background: var(--bg-secondary, #f5f5f5); border-radius: 4px;
}

/* Health Report */
.health-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.health-card { padding: 16px; }
.health-card-title {
  font-size: 0.75rem; text-transform: uppercase; color: var(--muted);
  font-weight: 500; margin-bottom: 8px;
}
.health-card-detail { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.health-card .stat-value { font-size: 1.8rem; font-weight: 600; }

.health-gauge {
  height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.health-gauge-bar {
  height: 100%; background: var(--accent, #3b82f6); border-radius: 4px;
  transition: width 0.3s ease;
}
.health-gauge-warn { background: #f59e0b; }

.health-section { margin-top: 16px; }
.health-section h3 { font-size: 0.95rem; margin-bottom: 8px; }

/* =====================================================================
   CONTEXT GATEWAY
   ===================================================================== */

.ctx-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 8px; }
.ctx-header div { display: flex; gap: 6px; }
/* ``.ctx-tier-switcher`` (the labeled storage-tier group) shares the
   project-switcher's layout so the two bar controls read as one family.
   It is a distinct class on purpose — the rank-11 hoist guard pins
   exactly one ``.ctx-project-switcher`` in the document. */
.ctx-project-switcher,
.ctx-tier-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
.ctx-project-switcher span,
.ctx-tier-switcher span {
  font-weight: 600;
  color: var(--text);
}
.ctx-project-switcher select {
  max-width: min(520px, 100%);
}
.ctx-tier-filter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.ctx-tier-filter button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 4px 8px;
  cursor: pointer;
}
.ctx-tier-filter button.active {
  background: var(--accent);
  color: white;
}

/* rank 11: persistent gateway header control bar. Hosts the active-project
   switcher + canonical-tier filter once, above the section panels, instead of
   re-emitting them into every section. Sticky so it stays put while the section
   content scrolls under it (.settings-content is the overflow-y:auto ancestor);
   opaque --bg (the inherited panel background) covers the scrolled rows. The
   descendant margin reset drops the controls' stacking margin-bottom — in this
   horizontal row the bar's gap owns the spacing. */
.ctx-control-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ctx-control-bar .ctx-project-switcher,
.ctx-control-bar .ctx-tier-switcher,
.ctx-control-bar .ctx-tier-filter {
  margin: 0;
}

/* Sync All per-phase progress + result summary (ADR-0021 §C). */
.ctx-sync-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ctx-sync-status-heading {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.ctx-sync-phase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ctx-sync-phase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
}
.ctx-sync-phase-label { color: var(--text); }
.ctx-sync-phase--pending .ctx-sync-phase-label,
.ctx-sync-phase--not_run .ctx-sync-phase-label { color: var(--muted); }
.ctx-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ctx-sync-state--done { color: var(--green); }
.ctx-sync-state--failed { color: var(--danger); }
.ctx-sync-state--attention { color: var(--yellow); }
.ctx-sync-state--muted { color: var(--muted); }
.ctx-sync-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

.ctx-overview-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 0.85rem; color: var(--muted); }
.ctx-overview-root, .ctx-overview-runtimes, .ctx-overview-last-sync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx-overview-root-label, .ctx-overview-runtimes-label, .ctx-overview-last-sync-label { font-weight: 600; color: var(--text); }
.ctx-overview-root-path { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.78rem; background: var(--surface); padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); word-break: break-all; }
.ctx-overview-last-sync-value { font-variant-numeric: tabular-nums; }

.ctx-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* PR #1088 review: tile is now a layout container holding a separate
   ``<button class="ctx-overview-stat-nav">`` (navigation target) plus the
   pointer buttons as siblings — avoids nesting interactive descendants
   inside a button-role element. The visual frame stays on the outer div
   so hover still highlights the whole tile. */
.ctx-overview-stat { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 0.15s; overflow: hidden; }
.ctx-overview-stat:hover { border-color: var(--accent); }
.ctx-overview-stat-nav { display: block; width: 100%; padding: 20px 16px; background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; text-align: center; }
.ctx-overview-count { font-size: 2rem; font-weight: 700; color: var(--accent); }
.ctx-overview-label { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.ctx-overview-badge { font-size: 0.72rem; margin-top: 8px; }
/* One-line whole-call failure detail under the error badge (error_kind +
   sanitized error_message from the overview envelope). Single line with
   ellipsis — the full text rides the title tooltip and the aria-label. */
.ctx-overview-error-detail { font-size: 0.72rem; color: var(--muted); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* U7 (#1229): per-runtime diagnostic block under a parse-error / invalid-name
   badge in the diff / runtime-only panes — sanitized reason + fix-it hint. */
.ctx-diagnostic-detail { margin-top: 4px; font-size: 0.78rem; }
.ctx-diagnostic-reason { color: var(--muted); font-family: var(--mono, monospace); word-break: break-word; }
.ctx-diagnostic-hint { color: var(--muted); margin-top: 2px; }
/* Pointer line sits BELOW the nav button (sibling, not child). Inset it
   horizontally to match the nav button's 16px padding so the visual gutter
   stays continuous, and pull it up against the nav button's bottom padding
   so the row reads as one tile rather than two stacked panels. */
.ctx-overview-pointers { margin: 0 0 12px; padding: 0 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.ctx-overview-pointer { background: transparent; border: 1px solid transparent; padding: 4px 6px; color: var(--muted); font: inherit; font-size: 0.72rem; text-align: left; cursor: pointer; border-radius: 4px; line-height: 1.35; }
.ctx-overview-pointer:hover { background: rgba(108, 143, 255, 0.08); color: var(--text); border-color: var(--border); }
.ctx-overview-pointer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ctx-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; background: var(--surface); cursor: pointer; transition: border-color 0.15s; }
.ctx-card:hover { border-color: var(--accent); }
.ctx-card.active { border-color: var(--accent); background: rgba(108, 143, 255, 0.06); }
.ctx-card--readonly { cursor: default; }
.ctx-card--readonly:hover { border-color: var(--border); }
.ctx-card-header { display: flex; align-items: center; justify-content: space-between; }
.ctx-card-name { font-weight: 600; font-size: 0.9rem; }
.ctx-card-path { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
/* ADR-0022 PR4: read-only label chips (production → v2) on a list card. Pill
   shape is derived from the detail panel's ``.ctx-version-label-chip`` (same
   accent pill), sized at 0.68rem to match the sibling ``.ctx-runtime-badge`` on
   the same card — the denser list card runs a notch under the detail panel's
   0.72rem chip. */
.ctx-card-labels { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.ctx-card-label-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 12px; background: rgba(90, 160, 224, 0.14); color: var(--accent); font-size: 0.68rem; font-weight: 600; }
.ctx-card-label-name { white-space: nowrap; }
.ctx-card-label-arrow { opacity: 0.65; }
.ctx-card-label-tag { font-family: var(--mono); }

/* PR2 multi-project: collapsible scope groups, mirroring memory-dirs-group. */
/* rank 15: wraps <details> + its sibling × so the remove button can be
   pinned over the summary row while staying OUT of the <summary> activation
   control (nested-interactive antipattern) and visible while collapsed. */
.ctx-scope-group-wrap { position: relative; margin-bottom: 8px; }
.ctx-scope-group-wrap + .ctx-scope-group-wrap { margin-top: 0; }
.ctx-scope-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ctx-scope-summary {
  display: flex; align-items: center; gap: 10px;
  /* right padding reserves room for the absolutely-positioned × so badges
     never slide under it. */
  padding: 10px 40px 10px 14px;
  cursor: pointer;
  font-size: 0.86rem;
  user-select: none;
  list-style: none;
}
.ctx-scope-summary::-webkit-details-marker { display: none; }
.ctx-scope-summary::before {
  content: '▸';
  font-size: 0.65rem;
  color: var(--muted);
  width: 10px;
  transition: transform 0.12s ease;
}
.ctx-scope-group[open] > .ctx-scope-summary::before { transform: rotate(90deg); }
.ctx-scope-summary:hover { background: var(--bg-hover); }
.ctx-scope-summary-label { color: var(--text); font-weight: 600; }
.ctx-scope-summary-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.ctx-scope-badge {
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--mono);
}
.ctx-scope-badge--experimental { background: rgba(243, 156, 18, 0.15); color: var(--yellow); }
.ctx-scope-badge--missing { background: rgba(224, 90, 90, 0.15); color: var(--danger); }
.ctx-scope-badge--stale { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
/* Sync paused (enrolled but enabled:false) — neutral/muted, not an error state. */
.ctx-scope-badge--paused { background: rgba(128, 128, 128, 0.15); color: var(--text-secondary); }

/* Context Portal (ADR-0021 PR4) — multi-project board */
.ctx-portal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ctx-portal-search {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.ctx-portal-sort { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.ctx-portal-sort select {
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.ctx-portal-rows { display: flex; flex-direction: column; gap: 8px; }
.ctx-portal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.ctx-portal-row--active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
/* Non-color cue in addition to the dimming + the "(missing)" text badge, so the
 * missing state isn't conveyed by opacity alone (WCAG 1.4.1). */
.ctx-portal-row--missing { opacity: 0.6; border-left: 3px dashed var(--danger); }
.ctx-portal-row-main { min-width: 0; flex: 1 1 auto; }
.ctx-portal-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx-portal-label { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ctx-portal-label-input {
  padding: 3px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font: inherit;
}
.ctx-portal-root {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctx-portal-counts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ctx-portal-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
/* Zero-suppressed inventory: a single muted pill in place of four 0-chips. */
.ctx-portal-count--empty { font-family: inherit; font-style: italic; opacity: 0.7; }
/* "Initialized only" toggle sits beside Sort in the toolbar. */
.ctx-portal-hide-uninit { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.85rem; cursor: pointer; }
.ctx-portal-hide-uninit input { cursor: pointer; }
/* rank 2c: "Show all projects" toggle in the artifact-list controls row. */
.ctx-list-show-all { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.85rem; cursor: pointer; }
.ctx-list-show-all input { cursor: pointer; }
/* "N uninitialized hidden" hint above the rows. */
.ctx-portal-hidden-hint { font-size: 0.8rem; margin: 0 0 8px; }
.ctx-portal-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ctx-portal-active-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-weight: 600;
}
.ctx-scope-remove {
  /* Pinned over the summary's right edge (rank 15) — a sibling of <details>,
     not a flex child of <summary>, so it stays visible when the group is
     collapsed and is a standalone keyboard-focusable button. */
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.ctx-scope-remove:hover { color: var(--danger); border-color: var(--border); background: var(--bg-hover); }
.ctx-scope-items { padding: 8px 14px 12px; }

.ctx-runtime-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.ctx-runtime-badge { font-size: 0.68rem; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.ctx-runtime-badge--sync { background: rgba(76, 175, 125, 0.15); color: var(--green); }
.ctx-runtime-badge--warn { background: rgba(243, 156, 18, 0.15); color: var(--yellow); }
.ctx-runtime-badge--missing { background: rgba(123, 127, 150, 0.12); color: var(--muted); }
.ctx-runtime-badge--pending {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(123, 127, 150, 0.35);
  padding: 1px 6px;
}
.ctx-runtime-badge--error { background: rgba(224, 90, 90, 0.15); color: var(--danger); }

/* Context Portal per-CLI runtime chips & filter (PR5) */
.ctx-portal-heading-chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ctx-portal-runtimes-row,
.ctx-portal-filter-row,
.ctx-portal-legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ctx-portal-heading-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  min-width: 80px;
}
.ctx-portal-runtimes-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ctx-runtime-chip {
  /* `border: 0` + `appearance: none` reset UA chrome so the not-installed
     chip, rendered as a real <button> for keyboard access, matches the
     <span> status chips; the --installed/--registered variants add a border. */
  font-size: 0.72rem;
  font-family: var(--mono);
  padding: 2px 8px;
  border: 0;
  border-radius: 12px;
  white-space: nowrap;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
}
.ctx-runtime-chip--greyed {
  background: rgba(123, 127, 150, 0.12);
  color: var(--muted);
}
button.ctx-runtime-chip--greyed {
  cursor: pointer;
}
button.ctx-runtime-chip--greyed:hover {
  background: rgba(123, 127, 150, 0.22);
}
button.ctx-runtime-chip--greyed:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ctx-runtime-chip--installed {
  background: rgba(243, 156, 18, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(243, 156, 18, 0.3);
  padding: 1px 7px;
}
.ctx-runtime-chip--registered {
  background: rgba(76, 175, 125, 0.15);
  color: var(--green);
  border: 1px solid rgba(76, 175, 125, 0.3);
  padding: 1px 7px;
}
.ctx-portal-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.ctx-portal-filter-group button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 4px 8px;
  cursor: pointer;
  font-weight: 500;
}
.ctx-portal-filter-group button.active {
  background: var(--accent);
  color: white;
}
.ctx-portal-filter-group button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ctx-portal-row-lights {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
}
.ctx-portal-row-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ctx-portal-row-light--uninstalled {
  background: var(--muted);
  opacity: 0.4;
}
.ctx-portal-row-light--installed {
  background: var(--yellow);
}
.ctx-portal-row-light--registered {
  background: var(--green);
}
.ctx-install-guide-body {
  margin: 15px 0;
  font-size: 0.9rem;
}
.ctx-install-guide-body .guide-text {
  margin-bottom: 12px;
  line-height: 1.4;
}
.ctx-install-guide-body .guide-text-sm {
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}
.ctx-install-guide-body .guide-section-sub {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 15px 0 6px 0;
  color: var(--text);
}
.ctx-install-guide-body .guide-code-block {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-hover);
}
.ctx-install-guide-body .guide-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}
.ctx-install-guide-body .guide-code {
  margin: 0;
  padding: 10px;
  font-size: 0.8rem;
  overflow-x: auto;
  background: transparent;
}
.ctx-install-guide-body .guide-code code {
  font-family: var(--mono);
}
.ctx-install-guide-body .guide-note {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Import-first state: when the cwd's canonical count is zero, demote the
   Sync button (no-op until canonicals exist) and promote Import to the
   primary affordance. The data attribute is wired by _ctxRefreshSectionState
   so a refresh-driven re-render can't leave the buttons in a stale state. */
.settings-section[data-canonical-count="0"] .ctx-sync-btn {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-section[data-canonical-count="0"] .ctx-import-btn {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}
#ctx-sync-all-btn[data-runtime-only="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Disabled/blocked primary buttons must not keep the saturated accent
   fill — at 0.45 opacity an accent-colored button still reads as
   clickable (2026-06-10 review, W5). Swap to the neutral pair; the
   opacity dim from ``button:disabled`` / the gate rules stacks on top.
   The load-bearing signal is losing the accent color. */
.btn-primary:disabled,
.btn-primary[aria-disabled="true"],
.btn-primary[data-write-blocked],
#ctx-sync-all-btn[data-runtime-only="true"],
/* The empty-section rule above promotes the (btn-ghost) Import button to
   an accent fill; when that promoted button is itself write-blocked it
   must drop the accent too — the promotion rule's (0,2,1) specificity
   would otherwise outrank the bare attribute selectors. */
.settings-section[data-canonical-count="0"] .ctx-import-btn[data-write-blocked],
.settings-section[data-canonical-count="0"] .ctx-import-btn[aria-disabled="true"],
.settings-section[data-canonical-count="0"] .ctx-import-btn:disabled {
  background: var(--border);
  color: var(--muted);
}

/* Tier-aware write-block gate (#943 / ADR-0011 §5 / ADR-0016 §7). When
   the canonical-tier filter is set to `user` or `project_local`, every
   write affordance carries ``data-write-blocked="<tier>"`` so the
   button is visually dimmed and clicks are intercepted at the document
   level (capture-phase listener in context-gateway.js) before they
   reach the per-button handler. Mirrors the #ctx-sync-all-btn
   data-runtime-only pattern — clicks still fire a toast so the user
   understands why the affordance is dim, rather than getting a
   generic 400 from the route's _reject_non_shared_write guard. */
[data-write-blocked] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Inline banner above the per-section list when the tier filter is
   set to a non-shared tier. Same shape as .ctx-runtime-only-banner
   but uses a muted accent (the state is informational, not
   actionable) so it doesn't visually compete with the runtime-only
   banner when both are present on a project_local section. */
.ctx-write-blocked-banner {
  margin: 0 0 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--muted);
  background: rgba(127, 127, 127, 0.08);
  font-size: 0.85rem;
  color: var(--text);
  border-radius: 2px;
}

/* Inline call-out above the scope groups when the cwd has runtime-only
   artifacts and nothing canonical yet — points the user at Import as the
   next step. Left-border accent matches other callout patterns in the UI. */
.ctx-runtime-only-banner {
  margin: 0 0 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  font-size: 0.85rem;
  color: var(--text);
  border-radius: 2px;
}
.ctx-missing-canonical-remediation {
  display: grid;
  gap: 6px;
}
.ctx-missing-canonical-title {
  font-weight: 700;
  font-size: 0.88rem;
}
.ctx-missing-canonical-body {
  line-height: 1.45;
}
.ctx-missing-canonical-commands {
  display: grid;
  gap: 4px;
}
.ctx-missing-canonical-commands code {
  display: block;
  padding: 5px 7px;
  overflow-x: auto;
  white-space: nowrap;
  border-radius: 3px;
  background: var(--code-bg);
  color: var(--text);
}

/* ADR-0009 §3 deep-link state. Banner sits above the scope groups when
   a ``?filter=`` or ``?artifact=`` query param has narrowed the visible
   list; the reset button restores the full list without a refetch. */
.ctx-deep-link-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  font-size: 0.85rem;
  color: var(--text);
  border-radius: 2px;
}
.ctx-deep-link-banner-reset {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.78rem;
  color: var(--accent);
  cursor: pointer;
}
.ctx-deep-link-banner-reset:hover {
  border-color: var(--accent);
}

/* ~2-second pulse on the deep-link target card. Two cycles of background
   warm-and-fade keeps the eye on the card without becoming a distracting
   strobe. ``ctx-card--highlight`` is added by ``_ctxApplyDeepLinkToContainer``
   and removed via ``setTimeout`` after 2s; the keyframes carry the
   actual visual. */
@keyframes ctx-card-deep-link-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.10); }
  50%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.00); background: rgba(var(--accent-rgb), 0.04); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.00); background: rgba(var(--accent-rgb), 0.10); }
}
.ctx-card--highlight {
  animation: ctx-card-deep-link-pulse 1s ease-in-out 2;
  border-color: var(--accent);
}

.ctx-detail { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 12px; background: var(--surface); }
.ctx-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* The artifact name is an <h2> (region label + focus target on open); reset
 * heading defaults so it keeps the inline-strong look it replaced. The
 * tabindex=-1 focus is programmatic-only, so suppress the outline unless the
 * user is keyboard-navigating. */
.ctx-detail-name { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.ctx-detail-name:focus { outline: none; }
.ctx-detail-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Detail meta header — #962. Renders the artifact's description / scope /
 * layout / mtime in a label-value grid above the Canonical|Diff tabs so
 * the user can identify the artifact without scanning raw frontmatter. */
.ctx-detail-meta {
  margin: 0 0 12px 0;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
}
.ctx-detail-meta-row {
  display: flex;
  gap: 8px;
  margin: 2px 0;
  align-items: baseline;
  overflow-wrap: anywhere;
}
.ctx-detail-meta-label {
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 110px;
}
.ctx-detail-meta-value {
  color: var(--text);
  word-break: break-word;
}
.ctx-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ctx-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.75rem;
}
.ctx-detail-chip-key {
  color: var(--muted);
  font-weight: 600;
}
.ctx-detail-chip-value {
  color: var(--text);
  font-family: var(--mono);
}

/* ADR-0022 version/label manager (detail panel). */
.ctx-detail-versions { margin: 10px 0 14px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ctx-detail-versions-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ctx-detail-versions-title { font-weight: 600; font-size: 0.82rem; }
.ctx-version-empty { font-size: 0.78rem; }
.ctx-version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctx-version-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.ctx-version-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ctx-version-tag { font-family: var(--mono); font-weight: 600; font-size: 0.8rem; color: var(--accent); }
.ctx-version-note { font-size: 0.75rem; color: var(--muted); }
.ctx-version-date { font-size: 0.72rem; }
.ctx-version-labels-inline { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ctx-version-label-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px 1px 8px; border-radius: 12px; background: rgba(90, 160, 224, 0.14); color: var(--accent); font-size: 0.72rem; font-weight: 600; }
.ctx-version-label-remove { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 2px; }
.ctx-version-label-remove:hover { color: var(--danger); }
.ctx-version-actions { display: flex; align-items: center; gap: 6px; }
.ctx-version-label-select { font-size: 0.75rem; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }

.ctx-detail-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
/* #1073: rendered as real <button role=tab> so screen readers announce
   "tab" and Enter/Space activate without a custom keydown shim. The
   button defaults (background, border, font) are reset so the visual
   matches the prior <div>-based tab. */
.ctx-detail-tab { padding: 8px 16px; cursor: pointer; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-family: inherit; font-size: 0.85rem; line-height: inherit; transition: color 0.15s; }
.ctx-detail-tab:hover { color: var(--text); }
.ctx-detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* ``overflow-x: auto`` so a wide field-map / diff table scrolls inside the pane
 * on narrow viewports instead of clipping (same fix as the project matrix). */
.ctx-detail-pane { display: none; overflow-x: auto; }
.ctx-detail-pane.active { display: block; }

.ctx-content-pre { font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow: auto; max-height: 400px; white-space: pre-wrap; word-break: break-word; }
.ctx-edit-area { width: 100%; min-height: 200px; font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: vertical; box-sizing: border-box; }
.ctx-edit-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }

.ctx-import-result { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ctx-import-priority { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; font-style: italic; }
.ctx-import-item { padding: 4px 0; font-size: 0.85rem; }
.ctx-import-item .badge { font-size: 0.68rem; margin-left: 6px; }

.ctx-field-map { width: 100%; min-width: max-content; font-size: 0.78rem; border-collapse: collapse; margin-top: 8px; }
.ctx-field-map th, .ctx-field-map td { padding: 4px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.ctx-field-map th { color: var(--muted); font-weight: 600; }
.ctx-field-map td:first-child { text-align: left; font-family: var(--mono); }

.ctx-create-form { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); }
/* "Destination: <project> · <tier>" — tells the user where the new artifact
 * lands before they submit. */
.ctx-create-destination { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ctx-create-form label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.ctx-create-form input { margin-bottom: 8px; }

/* =====================================================================
   TAB NAVIGATION
   ===================================================================== */

/* =====================================================================
   FOLDER PICKER (issue #582 4.12)
   ===================================================================== */

.path-input-row { display: flex; gap: 8px; align-items: center; }
.path-input-row > input { flex: 1; min-width: 0; }
.path-input-row > .btn-ghost { flex-shrink: 0; }

.path-picker-dialog {
  width: 560px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.path-picker-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 8px 0 12px 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  word-break: break-all;
}
.path-picker-breadcrumb .crumb {
  cursor: pointer;
  color: var(--accent);
  padding: 2px 4px;
  border-radius: 3px;
}
.path-picker-breadcrumb .crumb:hover { background: var(--surface); text-decoration: underline; }
.path-picker-breadcrumb .crumb.crumb-current { color: var(--text); cursor: default; }
.path-picker-breadcrumb .crumb.crumb-current:hover { background: transparent; text-decoration: none; }
.path-picker-breadcrumb .crumb-sep { color: var(--muted); }

.path-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  min-height: 200px;
}
.path-picker-list li {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
}
.path-picker-list li:last-child { border-bottom: none; }
.path-picker-list li:hover { background: var(--surface); }
.path-picker-list li:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.path-picker-list .picker-icon { color: var(--muted); flex-shrink: 0; }

.path-picker-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 24px 0;
}

.path-picker-error {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 24px 0;
}
.path-picker-error p { margin: 0 0 8px; }

/* ═══════════════════════════════════════════════════════════════
   Mobile (<=520px) Settings + Context Gateway stacking — issue #1072
   ───────────────────────────────────────────────────────────────
   Keep this block at the END of the file. The .ctx-* overrides have
   the same specificity as the base Context Gateway rules higher up,
   so source order is what makes them win in the 436–520px band
   (where auto-fill, minmax(200px, 1fr) would otherwise pick 2
   columns).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .settings-layout { flex-direction: column; }
  .settings-nav {
    width: 100%;
    max-height: 38vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  #tab-settings .settings-nav { max-height: 28vh; }
  .settings-content {
    width: 100%;
    min-width: 0;
    padding: 12px 12px;
  }
  .ctx-header {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
  }
  .ctx-header > div { flex-wrap: wrap; }
  .ctx-overview-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stack the conflict-modal "Your edits" / "Current on disk" panes so each
     diff stays readable on narrow screens during the destructive
     Reload-vs-Force choice (was two ~225px columns side by side). */
  #ctx-conflict-preview-row { flex-direction: column; }
}
