/* ============================================
   ADAIRO Dashboard — Shared Styles
   ============================================ */

/* --- Design Tokens --- */
:root {
  --bg: #0f0f1a;
  --card: #1a1a2e;
  --card-hover: #1f1f36;
  --border: #2a2a4a;
  --border-hover: #3a3a5a;
  --text: #e0e0e0;
  --dim: #888;
  --accent: #e94560;
  --green: #4ade80;
  --yellow: #fbbf24;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --orange: #fb923c;
  --cyan: #22d3ee;
  --white: #fff;
  --black: #000;
  --red: #dc2626;
  --gray: #6b7280;

  /* RGB variants for rgba() patterns */
  --accent-rgb: 233, 69, 96;
  --green-rgb: 74, 222, 128;
  --yellow-rgb: 251, 191, 36;
  --blue-rgb: 96, 165, 250;
  --purple-rgb: 167, 139, 250;
  --orange-rgb: 251, 146, 60;
  --cyan-rgb: 34, 211, 238;
  --red-rgb: 220, 38, 38;
  --gray-rgb: 107, 114, 128;

  /* Typography scale */
  --text-xs: 0.7rem;
  --text-sm: 0.8rem;
  --text-base: 0.9rem;
  --text-lg: 1.1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2.2rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Sidebar */
  --sidebar-width: 250px;

  /* Transitions */
  --ease: 0.2s ease;

  /* Sticky-chrome z-index ladder (S488, Decision 0dbc5f7a).
     Document the tier so adopters don't sibling-collide.
     50  = per-page sticky filter bars (bookmarks, content, journey)
     60  = global sticky header inside #main (renderStickyHeader)
     500 = chat panel
     1000 = body-level classifier-health-banner
     10000 = Ask Max dialog
     10050 = bell panel (clears Ask Max)                              */
  --z-page-filter: 50;
  --z-sticky-header: 60;
  --z-chat-panel: 500;
  --z-classifier-banner: 1000;
  --z-ask-max-dialog: 10000;
  --z-notif-panel: 10050;
}

/* --- Reset & Base --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: var(--text-base);
  overflow: hidden;
  height: 100vh;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --- App Layout --- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: var(--sp-6) 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-6);
}

.sidebar-brand .nav-toggle {
  position: static;
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-brand .nav-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-brand h1 {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.05;
  white-space: nowrap;
}

.sidebar-brand .brand-sub {
  color: var(--dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sidebar-brand .brand-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sidebar-brand .brand-link:hover h1 {
  color: var(--text);
}
.sidebar-brand .brand-link:hover .brand-logo {
  filter: brightness(1.15);
}

.sidebar-brand .brand-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.sidebar-brand .brand-logo {
  width: 51px;
  height: 51px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.sidebar.collapsed .sidebar-brand .brand-logo {
  display: none;
}

.sidebar-nav {
  list-style: none;
  flex: 1;
}

.nav-group {
  border-bottom: 1px solid var(--border);
}
.nav-group:last-child {
  border-bottom: none;
}

.nav-item {
  display: block;
  /* Right padding reserves two right-side columns: chevron (~22px) + gap (~10px) + plus (~22px) + edge (~8px) */
  padding: 2px calc(var(--sp-3) + 3.4rem) 2px var(--sp-4);
  color: var(--dim);
  font-size: var(--text-base);
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all var(--ease);
  text-decoration: none;
  position: relative;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}

.nav-item.active {
  color: var(--text);
  border-left-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.nav-item .nav-icon {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  margin-right: var(--sp-2);
  font-size: var(--text-lg);
}

.nav-label {
  display: none;
}

/* Stuck-captures badge — surfaces count of unclassified captures >2min.
   Item 7f5c6d56. Hidden when count is 0 via [hidden] attr. */
.nav-item .nav-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: var(--sp-2);
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.nav-item .nav-badge[hidden] {
  display: none;
}

/* --- Per-link quick-create button --- */
.nav-item .nav-quickcreate {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--dim);
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity var(--ease),
    color var(--ease),
    background var(--ease),
    border-color var(--ease);
  padding: 0;
}
.nav-item:hover .nav-quickcreate,
.nav-quickcreate:focus {
  opacity: 1;
}
.nav-quickcreate:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.sidebar.collapsed .nav-quickcreate {
  display: none;
}

/* --- Gated nav items (preview, page not yet built) --- */
.nav-item.nav-gated {
  opacity: 0.55;
  font-style: italic;
}
.nav-item.nav-gated:hover {
  opacity: 0.85;
}
.nav-item .nav-soon {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: var(--dim);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: var(--sp-2);
  line-height: 1.3;
}

/* --- Nav sub-items (expandable children) --- */
.nav-group .nav-item {
  position: relative;
}
/* Chevron always sits in its dedicated column to the LEFT of the +.
 * The right padding on .nav-item reserves both column slots whether or
 * not an item has a chevron / +, so the columns stay vertically aligned
 * across all rows. */
.nav-chevron {
  position: absolute;
  right: calc(var(--sp-3) + 1.8rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all var(--ease);
  line-height: 1;
}
.nav-chevron:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.nav-group.expanded .nav-chevron {
  transform: translateY(-50%) rotate(90deg);
}
.nav-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.15s ease;
}
.nav-group.expanded .nav-children {
  max-height: 480px;
}
.nav-child {
  display: block;
  padding: var(--sp-1) var(--sp-4) var(--sp-1)
    calc(var(--sp-4) + 1.5em + var(--sp-6));
  color: var(--dim);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  transition: all var(--ease);
  border-left: 3px solid transparent;
}
.nav-child::before {
  content: "\2022";
  margin-right: var(--sp-2);
  color: var(--dim);
}
.nav-child:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}
.nav-child.active {
  color: var(--accent);
}

.nav-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-1);
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-family: inherit;
  transition: background var(--ease);
}
.nav-section:hover {
  background: rgba(255, 255, 255, 0.08);
}
.nav-section:first-child {
  margin-top: 0;
  border-top: none;
}
.nav-section-label {
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.85;
}
.nav-section-chevron {
  position: absolute;
  right: var(--sp-3);
  font-size: 1rem;
  color: var(--dim);
  opacity: 0.65;
  transition: transform var(--ease);
}
.nav-section-icon {
  position: absolute;
  left: var(--sp-3);
  font-size: 0.95rem;
  color: var(--accent);
  opacity: 0.75;
  line-height: 1;
}
.sidebar.collapsed .nav-section-icon {
  position: static;
  font-size: 1.1rem;
}
.nav-section.expanded .nav-section-chevron {
  transform: rotate(90deg);
}
.nav-section-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.nav-section-items.expanded {
  max-height: 2000px;
}

/* v1.4: compact — one row (Focus · health · status), minimal padding. */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--dim);
}
.sidebar-footer #sidebar-status {
  margin-left: auto;
  white-space: nowrap;
}

.health-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-ok .health-dot {
  background: var(--green, #4ade80);
}
.health-down .health-dot {
  background: var(--red, #f87171);
  animation: health-pulse 2s infinite;
}
.health-local {
  opacity: 0.5;
}
.health-down {
  color: var(--red, #f87171);
  font-weight: 500;
}
.health-detail {
  font-size: var(--text-xs);
  opacity: 0.7;
  margin-top: 2px;
  width: 100%;
  flex-basis: 100%;
}
.health-retry {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  padding: 2px 6px;
  color: inherit;
  font-size: var(--text-sm);
}
.health-retry:hover {
  opacity: 1;
}
.health-down .health-retry {
  opacity: 1;
}
@keyframes health-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: var(--sp-6);
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  transition: margin-left 0.2s ease;
}

/* --- App Frame (S562, Decision-1 962ae4b7) -----------------------------------
   Opt-in via pageShell(page, tier, { frame: true }). ADDITIVE: does not touch
   .app-layout / .main-content, so non-frame pages are unaffected. Fixed header
   (top) + fixed footer (bottom); .app-shell holds the nav + a single scrolling
   #main between them. Chat stays an overlay for frame-now (the .main-content
   margin-shift in ask-max.js no-ops here); width-reflow is a later flagged pass.
   Containment: .app-header/.app-footer are body-level fixed; audited clean —
   no transformed ancestor (the 51 transform/filter hits are descendants). */
:root {
  --app-header-h: 52px;
  --app-footer-h: 44px;
  --z-app-chrome: 60;
}
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-header-h);
  z-index: var(--z-app-chrome);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Left column: brand (☰ menu + stacked title + logo), moved out of the sidebar
   top. Replicates .sidebar-brand styling, scoped to the header and sized for
   the 52px bar. 3 columns mirror the footer (1fr 1fr 1fr). */
.app-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  justify-content: flex-start;
}
.app-header-left .nav-toggle {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.app-header-left .brand-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  min-width: 0;
}
.app-header-left .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.app-header-left .brand-text h1 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--user-accent, var(--accent));
  white-space: nowrap;
}
.app-header-left .brand-sub {
  font-size: 0.6rem;
  color: var(--dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.app-header-left .brand-link:hover h1 {
  color: var(--accent);
}
.app-header-left .brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.app-header-left .brand-link:hover .brand-logo {
  opacity: 0.85;
}
.app-header-titles {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  min-width: 0;
}
.app-header-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-subtitle {
  font-size: var(--text-xs);
  color: var(--dim);
  white-space: nowrap;
}
.app-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: flex-end;
}
.app-shell {
  position: fixed;
  top: var(--app-header-h);
  left: 0;
  right: 0;
  bottom: var(--app-footer-h);
  display: flex;
}
/* Frame-scoped override: the nav sits inside the shell as a flex child, not the
   global position:fixed sidebar. Specificity (0,2,0) beats the global .sidebar
   (0,1,0), so non-frame pages keep the fixed sidebar. */
.app-shell > .sidebar {
  position: static;
  top: auto;
  bottom: auto;
  height: 100%;
  flex-shrink: 0;
}
.app-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: var(--sp-6);
}
.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--app-footer-h);
  z-index: var(--z-app-chrome);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--card);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}
/* 3 columns: left spacer · centered links · right "Chat with Max" (Ask Max btn) */
.footer-col {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.footer-col-center {
  justify-content: center;
}
.footer-col-right {
  justify-content: flex-end;
}
.footer-chat-label {
  color: var(--dim);
  font-size: var(--text-xs);
}
.footer-links {
  gap: var(--sp-4);
}
.footer-links a {
  color: var(--dim);
  font-size: var(--text-xs);
}
.footer-links a:hover {
  color: var(--text);
}
/* Frame pages host capture + chat in the chrome — retire the floating fabs. */
body.has-app-frame .askmax-fab,
body.has-app-frame .capture-fab {
  display: none;
}

/* --- Collapsed sidebar (focus mode) --- */
.sidebar.collapsed {
  width: 64px;
  padding: var(--sp-4) 0;
}
.sidebar.collapsed .sidebar-brand .brand-text,
.sidebar.collapsed .sidebar-footer {
  display: none;
}
.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 0;
  margin-bottom: var(--sp-4);
}
.sidebar.collapsed .nav-item {
  padding: var(--sp-1) var(--sp-1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-left: 3px solid transparent;
}
.sidebar.collapsed .nav-item .nav-text {
  display: none;
}
.sidebar.collapsed .nav-item .nav-label {
  display: block;
  font-size: 0.55rem;
  color: var(--dim);
  line-height: 1;
  letter-spacing: 0.02em;
}
.sidebar.collapsed .nav-item.active {
  border-left-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.sidebar.collapsed .nav-item.active .nav-label {
  color: var(--text);
}
.sidebar.collapsed .nav-item .nav-icon {
  font-size: 1.925rem;
  width: auto;
  margin-right: 0;
}
.sidebar.collapsed + .main-content {
  margin-left: 64px;
}
.sidebar.collapsed .nav-children,
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-section-chevron {
  display: none;
}
.sidebar.collapsed .nav-section {
  padding: var(--sp-1) 0;
  margin-top: var(--sp-1);
  justify-content: center;
}
.sidebar.collapsed .nav-section-items {
  max-height: 2000px;
}
/* --- Breadcrumbs --- */
.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--dim);
  margin-bottom: var(--sp-4);
}

.breadcrumbs a {
  color: var(--dim);
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs .separator {
  margin: 0 var(--sp-2);
  opacity: 0.5;
}

/* --- Page Header --- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
}

.page-header h1 {
  color: var(--accent);
  font-size: var(--text-xl);
}

.subtitle {
  color: var(--dim);
  font-size: var(--text-sm);
}

/* --- Card Grid --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-5);
  transition: border-color var(--ease);
}

.card:hover {
  border-color: var(--border-hover);
}

.card.wide {
  grid-column: 1 / -1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.card h2 {
  font-size: var(--text-sm);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card h2 a {
  color: var(--dim);
  transition: color var(--ease);
}

.card h2 a:hover {
  color: var(--accent);
  text-decoration: none;
}

.card-link {
  font-size: var(--text-xs);
  color: var(--dim);
}

.card-link:hover {
  color: var(--accent);
}

/* --- Stat Rows --- */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.stat-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Big Numbers --- */
.big-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  text-align: center;
}

.big-number {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.big-label {
  font-size: var(--text-sm);
  color: var(--dim);
}

/* --- Tier Badges --- */
.tier-badge {
  font-size: var(--text-sm);
  font-weight: 600;
}
.tier-badge span {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-right: 2px;
}

/* --- Type Badges --- */
.type-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.type-badge.action {
  background: rgba(var(--blue-rgb), 0.15);
  color: var(--blue);
}
.type-badge.decision {
  background: rgba(var(--purple-rgb), 0.15);
  color: var(--purple);
}
.type-badge.assumption {
  background: rgba(var(--yellow-rgb), 0.15);
  color: var(--yellow);
}
.type-badge.issue {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.type-badge.risk {
  background: rgba(var(--orange-rgb), 0.15);
  color: var(--orange);
}
.type-badge.opportunity {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
}

/* Freshness badge — canonical "as of <date>" marker for static/frozen blocks
   with no live source (see freshnessBadge() in components.js). Muted-yellow so
   it reads as "not live" without alarming. */
.freshness-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(var(--yellow-rgb), 0.13);
  color: var(--yellow);
  border: 1px solid rgba(var(--yellow-rgb), 0.25);
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}

/* Type icons (standalone, no background) */
.type-icon {
  font-size: var(--text-lg);
  line-height: 1;
}
.type-icon.action {
  color: var(--blue);
}
.type-icon.decision {
  color: var(--purple);
}
.type-icon.assumption {
  color: var(--yellow);
}
.type-icon.issue {
  color: var(--accent);
}
.type-icon.risk {
  color: var(--orange);
}
.type-icon.opportunity {
  color: var(--green);
}

/* Confidence dots */
.confidence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.confidence-dot.confidence-high {
  background: var(--green);
}
.confidence-dot.confidence-med {
  background: var(--yellow);
}
.confidence-dot.confidence-low {
  background: var(--accent);
}

/* Tag pills */
.tag-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim);
  border: 1px solid var(--border);
}

/* Block-relationship badges (Blocker / Blocked symmetric pair) */
.block-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: default;
}
.block-badge-blocker {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.block-badge-blocked {
  background: rgba(var(--orange-rgb), 0.12);
  color: var(--orange);
  border: 1px solid var(--orange);
}

/* Entry type badges */
.entry-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 500;
}

.entry-badge.reasoning {
  background: rgba(var(--purple-rgb), 0.15);
  color: var(--purple);
}
.entry-badge.evidence {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
}
.entry-badge.progress_note {
  background: rgba(var(--blue-rgb), 0.15);
  color: var(--blue);
}
.entry-badge.context_capture {
  background: rgba(var(--yellow-rgb), 0.15);
  color: var(--yellow);
}
.entry-badge.reassessment {
  background: rgba(var(--orange-rgb), 0.15);
  color: var(--orange);
}
.entry-badge.lesson {
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
}
.entry-badge.user_input {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* --- Maturity Bar --- */
.maturity-bar {
  display: flex;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--sp-2);
}

.maturity-bar a,
.maturity-bar div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #000;
  min-width: 30px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--ease);
}
.maturity-bar a:hover {
  opacity: 0.75;
}

.stage-planted {
  background: #6b7280;
}
.stage-rooting {
  background: #fbbf24;
}
.stage-incubating {
  background: #a78bfa;
}
.stage-sprouting {
  background: #4ade80;
}
.stage-blooming {
  background: #e94560;
  color: #fff !important;
}

.maturity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  color: var(--text);
  transition: opacity var(--ease);
}
a.legend-item:hover {
  opacity: 0.7;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* --- Risk/Overdue Items --- */
.risk-item {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}

.risk-item:last-child {
  border-bottom: none;
}

.risk-status {
  font-size: var(--text-xs);
  color: var(--dim);
}

.overdue {
  color: var(--accent);
}

.overdue-badge {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: var(--sp-2);
}

/* --- Pulse Banner --- */
.pulse-banner {
  line-height: 1.6;
}

.pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-3);
}

.pulse-title {
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 2px;
}

.pulse-session {
  font-size: var(--text-xs);
  color: var(--dim);
}

.pulse-health {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.85;
  white-space: nowrap;
}

.pulse-metrics {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.pulse-metric {
  text-align: center;
  min-width: 4rem;
}

.pulse-metric-value {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
}

.pulse-metric-label {
  font-size: var(--text-xs);
  color: var(--dim);
  white-space: nowrap;
}

a.pulse-metric {
  text-decoration: none;
  color: inherit;
  transition: opacity var(--ease);
}
a.pulse-metric:hover .pulse-metric-value {
  opacity: 0.7;
}
a.pulse-metric:hover .pulse-metric-label {
  color: var(--text);
}

.pulse-narrative {
  font-size: var(--text-sm);
  color: var(--dim);
}

.pulse-narrative strong {
  color: var(--accent);
}

/* --- Pulse + Sessions Split Row --- */
.pulse-sessions-row {
  display: flex;
  gap: var(--sp-4);
  grid-column: 1 / -1;
}
.pulse-sessions-row .pulse-col {
  flex: 35;
  min-width: 0;
}
.pulse-sessions-row .sessions-col {
  flex: 65;
  min-width: 0;
}
@media (max-width: 768px) {
  .pulse-sessions-row {
    flex-direction: column;
  }
}

/* --- Horizontal Cards (sessions, threads) --- */
.hcard-row {
  display: flex;
  gap: var(--sp-3);
}
.hcard-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.hcard {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--ease);
}
.hcard:hover {
  border-color: var(--border-hover);
}
a.hcard {
  text-decoration: none;
  color: inherit;
  display: block;
}
.hcard-number {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--blue);
}
.hcard-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hcard-meta {
  font-size: var(--text-xs);
  color: var(--dim);
  margin-bottom: var(--sp-1);
}
.hcard-summary {
  font-size: var(--text-xs);
  color: var(--dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hcard-type {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
}
.hcard-type.workstream {
  background: rgba(var(--blue-rgb), 0.15);
  color: var(--blue);
}
.hcard-type.exploration {
  background: rgba(var(--purple-rgb), 0.15);
  color: var(--purple);
}
.hcard-type.convention {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
}
.hcard-context {
  font-size: var(--text-xs);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.hcard-sessions {
  font-size: var(--text-xs);
  color: var(--dim);
  margin-bottom: var(--sp-1);
}
.hcard-sessions strong {
  color: var(--text);
}
.hcard-next {
  font-size: var(--text-xs);
  color: var(--dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hcard-next::before {
  content: "Next: ";
  color: var(--yellow);
  font-weight: 600;
}
@media (max-width: 768px) {
  .hcard-row {
    flex-direction: column;
  }
}

/* --- Growth Micro-Narratives --- */
.growth-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.growth-item:last-child {
  border-bottom: none;
}

.growth-title {
  font-weight: 600;
  font-size: var(--text-base);
}

.growth-detail {
  font-size: var(--text-sm);
  color: var(--dim);
  margin-top: var(--sp-1);
}

.growth-stage {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}

/* --- Timeline --- */
.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}

.timeline-entry {
  position: relative;
  padding-bottom: var(--sp-5);
}

.timeline-entry:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
}

.timeline-dot.growth {
  border-color: var(--green);
  background: var(--green);
}

.timeline-dot.journal {
  border-color: var(--purple);
  background: var(--purple);
}

.timeline-time {
  font-size: var(--text-xs);
  color: var(--dim);
}

.timeline-content {
  margin-top: var(--sp-1);
  font-size: var(--text-base);
}

/* --- Project Health Tiles --- */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
}

.health-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-3);
  transition: border-color var(--ease);
}

.health-tile:hover {
  border-color: var(--border-hover);
}

.health-tile a {
  color: var(--text);
  text-decoration: none;
}

.health-tile a:hover {
  color: var(--accent);
}

.health-name {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-1);
}

.health-meta {
  font-size: var(--text-xs);
  color: var(--dim);
}

.health-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--sp-1);
}

.health-indicator.good {
  background: var(--green);
}
.health-indicator.warn {
  background: var(--yellow);
}
.health-indicator.alert {
  background: var(--accent);
}

/* --- Classifier health top-bar banner --- */
.classifier-health-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 8px 16px;
  font-size: var(--text-sm);
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.classifier-health-banner[hidden] {
  display: none;
}
.classifier-health-banner.classifier-health-warning {
  background: var(--yellow, #facc15);
  color: #1a1a1a;
}
.classifier-health-banner.classifier-health-outage {
  background: var(--accent, #dc2626);
  color: #fff;
}
.classifier-health-banner a {
  color: inherit;
  text-decoration: underline;
  margin-left: 6px;
}

/* --- Session Cards --- */
.session-compact {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.session-compact:last-child {
  border-bottom: none;
}

.session-number {
  font-weight: 600;
  color: var(--dim);
  font-size: var(--text-xs);
}

.session-title {
  font-weight: 600;
  font-size: var(--text-base);
}

.session-meta {
  font-size: var(--text-xs);
  color: var(--dim);
  margin-top: var(--sp-1);
}

.energy-arrow {
  font-weight: 600;
}

.energy-arrow.up {
  color: var(--green);
}
.energy-arrow.down {
  color: var(--accent);
}
.energy-arrow.flat {
  color: var(--dim);
}

/* --- Activity Feed --- */
.feed-entry {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.feed-entry:last-child {
  border-bottom: none;
}

.feed-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.feed-time {
  font-size: var(--text-xs);
  color: var(--dim);
}

.feed-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
}

.feed-content {
  font-size: var(--text-sm);
  color: var(--dim);
  margin-top: var(--sp-1);
  line-height: 1.5;
}

/* --- Buttons --- */
.btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color var(--ease);
}

.btn:hover {
  border-color: var(--accent);
}

/* --- Filter Bar --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.filter-bar select,
.filter-bar input {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  font-size: var(--text-sm);
}

.filter-btn {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: var(--text-xs);
}
.filter-btn:hover {
  border-color: var(--text);
  color: var(--text);
}
.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.sort-select {
  padding: var(--sp-1) var(--sp-3);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--text-xs);
  margin-left: auto;
}

/* --- Empty/Loading States --- */
.empty {
  color: var(--dim);
  font-style: italic;
  padding: var(--sp-4) 0;
}

.loading {
  color: var(--dim);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* --- Expandable --- */
.expandable-trigger {
  cursor: pointer;
  user-select: none;
}

.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expandable-content.open {
  max-height: 2000px;
}

/* --- Mobile-only hamburger (outside sidebar) --- */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 200;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--dim);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--text-lg);
}

/* --- Table Scroll (mobile) --- */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--ease);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    padding: var(--sp-4);
    padding-top: 3.5rem;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .sidebar.collapsed + .main-content {
    margin-left: 0;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .big-number {
    font-size: var(--text-2xl);
  }

  .big-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .health-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* --- Touch Targets (44px min) --- */
  .btn {
    min-height: 44px;
    padding: var(--sp-3) var(--sp-4);
  }

  .nav-item {
    padding: var(--sp-3) var(--sp-4);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .mobile-nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
  }

  .rate-up-btn,
  .rate-down-btn {
    width: 44px;
    height: 44px;
  }

  .askmax-btn,
  .capture-btn {
    width: 44px;
    height: 44px;
  }

  .filter-bar select,
  .filter-bar input {
    min-height: 44px;
    width: 100%;
  }

  .page-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* --- Polish --- */
  .filter-bar {
    gap: var(--sp-3);
  }

  .askmax-dialog {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .toast {
    left: var(--sp-4);
    right: var(--sp-4);
  }

  .askmax-fab {
    bottom: var(--sp-8);
  }
}

/* --- Ask Max Modal --- */
.askmax-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.askmax-dialog {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 900px;
  max-width: 94vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.askmax-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.askmax-title {
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--accent);
}

.askmax-context {
  font-size: var(--text-xs);
  color: var(--dim);
  margin-top: var(--sp-1);
}

.askmax-detail {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.askmax-detail-title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.4;
  margin-bottom: var(--sp-1);
}

.askmax-detail-meta {
  font-size: var(--text-xs);
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.askmax-detail-badge {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  text-transform: capitalize;
}

.askmax-detail-desc {
  font-size: var(--text-sm);
  color: var(--dim);
  line-height: 1.6;
  margin-top: var(--sp-2);
}

.askmax-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.askmax-close:hover {
  color: var(--text);
}

.askmax-body {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.askmax-thread {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.askmax-msg {
  padding: var(--sp-3);
  border-radius: 8px;
  font-size: var(--text-sm);
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
}

.askmax-msg-user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  max-width: 85%;
  border-bottom-right-radius: 4px;
}

.askmax-msg-assistant {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--dim);
  align-self: flex-start;
  max-width: 95%;
  border-bottom-left-radius: 4px;
}

.askmax-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-3);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

.askmax-input:focus {
  outline: none;
  border-color: var(--accent);
}

.askmax-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.askmax-send {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
}

.askmax-send:disabled {
  opacity: 0.5;
}

.askmax-status {
  font-size: var(--text-xs);
  color: var(--yellow);
  animation: pulse 1.5s ease-in-out infinite;
}

/* .askmax-response removed — replaced by .askmax-thread + .askmax-msg */

/* Small action button for embedding in cards/rows.
   Style mirrors the floating FAB (.askmax-fab): accent bg, white icon, soft red
   glow, +1px hover lift. Sized 32×32 / 20px for icon-only clarity.
   Mobile @media bumps to 44×44 (iOS tap target). */
.askmax-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
}

.askmax-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}

.capture-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
}

.capture-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}

/* Post-response actions in popup (sticky footer) */
.askmax-post-actions {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* --- Slide-out Panel --- */
.askmax-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 500;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.askmax-panel.open {
  transform: translateX(0);
}

.askmax-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.askmax-capture-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.askmax-capture-toggle:hover {
  color: var(--accent);
}

.askmax-capture-row {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}

.askmax-capture-row.open {
  display: flex;
}

.askmax-capture-row input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
}

.askmax-capture-row input::placeholder {
  color: var(--dim);
}

.askmax-capture-row input:focus {
  border-color: var(--accent);
}

.askmax-capture-row button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.askmax-capture-row button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.askmax-panel-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Tool-detail chip + expand UX — canonical styles shared by chat surface
   and Ask Max panel. Server-side redactToolPayload strips secrets before
   the WS frame leaves; these styles are display-only. Single source per
   shared/tool-detail.js. */
.tool-turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 0;
}
.tool-chip-strip:empty {
  display: none;
}
.tool-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  background: rgba(var(--purple-rgb), 0.15);
  color: var(--purple);
  cursor: pointer;
  animation: pulse 1.5s ease-in-out infinite;
}
.tool-chip.done {
  animation: none;
  opacity: 0.5;
}
.tool-chip:hover {
  background: rgba(var(--purple-rgb), 0.3);
}
.tool-chip-detail {
  font-family: var(
    --mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace
  );
  font-size: 11px;
  line-height: 1.4;
  max-height: 240px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-chip-detail:not(.open) {
  display: none;
}

.askmax-panel-input-area {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
}

.askmax-panel-input-area textarea {
  flex: 1;
}

.askmax-panel-input-area .btn {
  height: 40px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .askmax-panel {
    width: 100%;
  }
}

/* Page-context toggle (Feature 1) — sits just below #panel-context in the
   header, dim by default, accent when hovered. Defaults checked; user
   choice persists for the page load. */
.askmax-context-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.askmax-context-toggle:hover {
  color: var(--text);
}
.askmax-context-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Sources strip (Feature 2) — sits between thread and input area. Hidden
   when empty; renders chips when sources are attached. Each chip shows a
   type badge + truncated title + × remove button. */
.askmax-panel-sources {
  display: none;
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--border);
  background: rgba(var(--purple-rgb), 0.04);
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.askmax-panel-sources.has-sources {
  display: flex;
}
.askmax-sources-label {
  font-size: var(--text-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--sp-1);
  flex-basis: 100%;
  margin-bottom: 2px;
}
.askmax-source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 6px 3px 8px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  max-width: 100%;
  overflow: hidden;
}
.askmax-source-badge {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 500;
  text-transform: capitalize;
  flex-shrink: 0;
  font-size: 10px;
}
.askmax-source-title {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.askmax-source-remove {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  margin-left: 2px;
}
.askmax-source-remove:hover {
  color: var(--accent);
}

/* Drop overlay (Feature 2b) — translucent absolute overlay over the entire
   chat panel, visible only when a card with application/x-max-source is
   dragged over the panel. */
.askmax-panel-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--accent-rgb), 0.12);
  border: 2px dashed var(--accent);
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 600;
}
.askmax-panel-drop-overlay.active {
  display: flex;
}
.askmax-panel-drop-msg {
  background: var(--card);
  color: var(--accent);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Card being dragged as a Source — subtle fade so the user knows which
   card is moving. */
.askmax-dragging {
  opacity: 0.5;
}

/* Filter action badge — shown in chat when Max applies page filters */
.filter-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  border-radius: 4px;
  margin-top: var(--sp-2);
}

/* Session-switcher button + dropdown (Feature 3) — ≡ icon in the panel
   header opens an inline dropdown listing recent sessions with search.
   Picking one loads its history into the panel thread. */
.askmax-history-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.askmax-history-toggle:hover {
  color: var(--accent);
}

.askmax-session-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 550;
  max-height: 60vh;
  overflow: hidden;
  flex-direction: column;
}
.askmax-session-dropdown.open {
  display: flex;
}
.askmax-panel-header {
  position: relative; /* so the dropdown can anchor below it */
}
.askmax-session-dropdown-search {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.askmax-session-dropdown-search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
}
.askmax-session-dropdown-search input:focus {
  border-color: var(--accent);
}
.askmax-session-dropdown-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-1) 0;
}
.askmax-session-dropdown-loading,
.askmax-session-empty {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  color: var(--dim);
  font-size: var(--text-sm);
}
.askmax-session-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid transparent;
  transition: background 0.1s ease;
}
.askmax-session-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: var(--accent);
}
.askmax-session-item.active {
  background: rgba(var(--accent-rgb), 0.08);
  border-left-color: var(--accent);
}
.askmax-session-item-title {
  font-size: var(--text-sm);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.askmax-session-item-meta {
  font-size: var(--text-xs);
  color: var(--dim);
}
.askmax-session-new {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}
.askmax-session-new .askmax-session-item-title {
  color: var(--accent);
  font-weight: 600;
}

/* User-mark buttons (pin / favorite / archive) — backed by v2_user_marks via
   shared/marks.js. Polymorphic across entity types; sit alongside the
   ✦/🧷/⬇ action cluster on any gallery card. Transparent style so they don't
   compete with the accent-bg action pair. */
.mark-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  opacity: 0.35;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: all var(--ease);
}
.mark-btn:hover {
  opacity: 0.7;
}
.mark-btn.active {
  opacity: 1;
}
.mark-pin:hover,
.mark-archive:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.mark-pin.active,
.mark-archive.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.mark-star:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(var(--yellow-rgb), 0.08);
}
.mark-star.active {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(var(--yellow-rgb), 0.12);
}

/* Add-as-Source button — sibling shape to .askmax-btn but transparent so the
   ✦/⬇ accent pair stays visually dominant. 32×32 / 20px to match the row. */
.add-source-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  padding: 0;
  flex-shrink: 0;
}
.add-source-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

/* Floating chat button for Overview/System pages */
.askmax-fab {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  background: var(--accent);
  color: #fff;
  border: none;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 24px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
  z-index: 400;
  transition: all var(--ease);
}

.askmax-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}

/* Quick Capture floating button — global, visible above other modals.
   Stacked above askmax-fab. z-index sits above askmax-dialog (1000) but
   below capture-overlay (10001) so it auto-hides when its own modal opens. */
.capture-fab {
  position: fixed;
  bottom: calc(var(--sp-6) + 56px);
  right: var(--sp-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
  z-index: 2000;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.capture-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}

/* When the chat panel is open (420px on the right), shift the capture FAB
   left so it hovers over the main content instead of overlapping the
   panel. The in-panel capture toggle was removed — this FAB is now the
   single capture entry point. */
body.chat-panel-open .capture-fab {
  right: calc(420px + var(--sp-6));
}
@media (max-width: 768px) {
  /* Mobile: chat panel takes full width — hide the FAB while panel is open
     since there's nowhere to shift to. Tap the panel's close X first. */
  body.chat-panel-open .capture-fab {
    display: none;
  }
}

/* Reference Library detail modal owns the screen — hide the floating Capture
   pill; the modal header carries inline Capture + Ask Max so the action
   surface never disappears. Mirrors the chat-panel pattern above but hides
   outright rather than shifting (modal is centered, no right-edge to free). */
body.reflib-detail-open .capture-fab {
  display: none;
}

/* Doc-peek overlay (z-index 1000) sits above the dashboard chrome, including
   the chat panel (z-index 500) and the Ask Max popup overlay (z-index 1000,
   same level but doc-peek creates a new stacking context via backdrop-filter
   so paint order is inconsistent). When the user invokes Ask Max FROM the
   detail modal, the invoked surface must layer above the host. Bump both
   above 1000 while the detail modal is open. */
body.reflib-detail-open .askmax-overlay,
body.reflib-detail-open .askmax-panel {
  z-index: 1100;
}

/* Rate-up button */
.rate-up-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  padding: 0;
  flex-shrink: 0;
}

.rate-up-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(var(--green-rgb), 0.08);
}

.rate-up-btn:disabled {
  cursor: default;
  opacity: 0.8;
  border-color: var(--green);
}

.rate-down-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  padding: 0;
  flex-shrink: 0;
}

.rate-down-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.rate-down-btn:disabled {
  cursor: default;
  opacity: 0.8;
  border-color: var(--accent);
}

/* --- Quick Capture: Toast --- */
.toast {
  position: fixed;
  top: var(--sp-6);
  right: var(--sp-6);
  background: var(--card);
  color: var(--text);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-sm);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.toast-show {
  opacity: 1;
  pointer-events: auto;
}
.toast-fade {
  opacity: 0;
}

/* --- Quick Capture: Inbox pinned capture bar ---
   Sticky-positioned input row that survives mode switches (Capture / Review /
   History / Feedback). Implements decision 893bb8be — pinned at top across
   tabs. Sits above feed (z=50) but well below modals (askmax z=1000+,
   capture-overlay z=10001) and the global capture FAB (z=2000). */
.inbox-pinned-capture {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: 640px;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.capture-row {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.inbox-capture-input {
  flex: 1;
  padding: var(--sp-6) var(--sp-4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  transition: border-color var(--ease);
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  min-height: 84px;
}
.capture-send-btn {
  flex-shrink: 0;
  width: 42px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--sp-1);
}
.capture-send-btn:hover {
  background: #d63a52;
}
.inbox-capture-input::placeholder {
  color: var(--dim);
}
.inbox-capture-input:focus {
  border-color: var(--accent);
}
.capture-voice-btn {
  flex-shrink: 0;
  width: 42px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--sp-1);
}
.capture-voice-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.capture-voice-btn.voice-btn-recording {
  color: #ef4444;
  border-color: #ef4444;
  animation: pulse 1.2s infinite;
}
.capture-add-btn {
  margin-top: var(--sp-2);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: var(--text-lg);
  font-weight: 600;
  width: 100%;
  padding: var(--sp-2) 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.capture-add-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
}

/* --- Unified Detail Popup --- */
.unified-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
}
.unified-popup {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 92%;
  max-width: 960px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.unified-popup-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.unified-popup-header .type-icon {
  font-size: var(--text-2xl);
}
.unified-popup-title {
  flex: 1;
  min-width: 0;
}
.unified-popup-title h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.unified-popup-title .unified-popup-subtitle {
  font-size: var(--text-xs);
  color: var(--dim);
  margin-top: 2px;
}
.unified-popup-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.unified-popup-status.status-classifying {
  background: rgba(var(--yellow-rgb), 0.15);
  color: var(--yellow);
}
.unified-popup-status.status-classified {
  background: rgba(var(--blue-rgb), 0.15);
  color: var(--blue);
}
.unified-popup-status.status-approved {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
}
.unified-popup-status.status-denied {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.unified-popup-status.status-pending,
.unified-popup-status.status-unclassified {
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim);
}
.unified-popup-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--text-xl);
  cursor: pointer;
  flex-shrink: 0;
  padding: var(--sp-1);
}
.unified-popup-close:hover {
  color: var(--text);
}
.unified-popup-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.unified-popup-confidence {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.unified-popup-content {
  white-space: pre-wrap;
  line-height: 1.6;
  word-break: break-word;
  background: var(--card);
  padding: var(--sp-4);
  border-radius: 6px;
  border: 1px solid var(--border);
  max-height: 60vh;
  overflow-y: auto;
}
.unified-popup-source {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--dim);
  word-break: break-all;
}
.unified-popup-source a {
  color: var(--dim);
  text-decoration: none;
}
.unified-popup-source a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.unified-popup-source .source-path {
  opacity: 0.6;
  margin-left: 2px;
}
.unified-popup-meta {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--dim);
  flex-wrap: wrap;
}
.unified-popup-classification {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.unified-popup-dest {
  font-weight: 600;
  font-size: var(--text-sm);
}
.unified-popup-rationale {
  font-size: var(--text-sm);
  color: var(--dim);
  font-style: italic;
  line-height: 1.4;
}
.unified-popup-tags {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.unified-popup-alts {
  font-size: var(--text-xs);
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.unified-popup-alts-label {
  font-weight: 600;
}
.unified-popup-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.unified-popup-feedback {
  flex: 1;
  min-width: 120px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--text-xs);
}
.unified-popup-feedback:focus {
  border-color: var(--accent);
  outline: none;
}
.unified-popup-edit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.unified-popup-thought {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.unified-popup-thought input {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--text-sm);
}
.unified-popup-thought input:focus {
  border-color: var(--accent);
  outline: none;
}
.unified-popup-error {
  display: none;
  color: var(--accent);
  font-size: var(--text-xs);
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}
.unified-popup-spinner {
  color: var(--dim);
  font-size: var(--text-sm);
  font-style: italic;
}

/* --- Quick Capture: Recent Captures Feed --- */
.inbox-feed {
  max-width: 640px;
  margin: var(--sp-6) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.inbox-feed-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.inbox-feed-item.feed-status-classified {
  border-left-color: var(--blue);
}
.inbox-feed-item.feed-status-routed {
  border-left-color: var(--green);
}
.inbox-feed-item.feed-status-resolved {
  border-left-color: var(--purple);
  opacity: 0.7;
}
.inbox-feed-item.feed-status-approved {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--card));
}

/* Feedback mode — surfaces v2_routing_feedback */
.fb-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-2) 0;
}
.fb-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb-section-count {
  font-size: var(--text-xs);
  color: var(--dim);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.fb-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  transition:
    background 0.12s,
    border-color 0.12s;
}
.fb-row[data-fb-capture-id]:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border-color: var(--border-hover);
}
.fb-row-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.fb-row-route {
  font-family: monospace;
  font-size: var(--text-xs);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
}
.fb-row-arrow {
  color: var(--accent);
  font-weight: 600;
  margin: 0 4px;
}
.fb-row-deny {
  font-size: var(--text-xs);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
}
.fb-row-time {
  margin-left: auto;
  color: var(--dim);
  font-size: var(--text-xs);
}
.fb-row-capture {
  color: var(--text);
  line-height: 1.5;
  margin-bottom: var(--sp-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-row-capture-missing {
  color: var(--dim);
  font-style: italic;
}
.fb-row-text {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-3);
  color: var(--text);
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.02);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-empty {
  color: var(--dim);
  font-style: italic;
  font-size: var(--text-sm);
  padding: var(--sp-3);
  text-align: center;
}
.inbox-feed-item.feed-status-denied {
  border-left-color: var(--dim);
  opacity: 0.5;
}
.inbox-feed-item.feed-status-denied .inbox-feed-content,
.inbox-feed-item.feed-status-denied .inbox-feed-content * {
  text-decoration: line-through;
  text-decoration-color: var(--dim);
  text-decoration-thickness: 1px;
}
.inbox-feed-item.feed-status-denied .feed-item-tags,
.inbox-feed-item.feed-status-denied .capture-type-icon {
  opacity: 0.6;
}
.feed-item-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 0;
}
.inbox-feed-content {
  color: var(--text);
  font-size: var(--text-sm);
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0 var(--sp-4);
}
.feed-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.feed-item-tags {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.capture-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
  opacity: 0.8;
  cursor: help;
}
.capture-type-icon:hover {
  opacity: 1;
}
.inbox-feed-time {
  color: var(--dim);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* --- Feed Legend --- */
.feed-legend {
  margin-bottom: var(--sp-4);
  text-align: left;
}
.feed-legend-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: var(--sp-1) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.feed-legend-toggle:hover {
  color: var(--text);
}
.feed-legend-chevron {
  font-size: var(--text-xs);
  transition: transform 0.15s ease;
  display: inline-block;
}
.feed-legend-body {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.feed-legend-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--dim);
}
.feed-legend-section strong {
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: var(--sp-1);
}
.legend-swatch.legend-classified {
  background: var(--blue);
}
.legend-swatch.legend-routed {
  background: var(--green);
}
.legend-swatch.legend-resolved {
  background: var(--purple);
}

/* --- Glossary Layer (shared/glossary.js) --- */
/* Collapsible per-page quick-reference for bespoke taxonomy. Mirrors the
   feed-legend toggle/chevron; body is a term → definition list. */
.glossary-panel {
  margin: var(--sp-4) 0;
  text-align: left;
}
.glossary-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: var(--sp-1) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.glossary-toggle:hover {
  color: var(--text);
}
.glossary-chevron {
  font-size: var(--text-xs);
  transition: transform 0.15s ease;
  display: inline-block;
}
.glossary-body {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.glossary-row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
}
.glossary-body dt,
.glossary-body dd {
  margin: 0;
}
.glossary-term {
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-xs);
}
.glossary-def {
  color: var(--dim);
  font-size: var(--text-xs);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .glossary-row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}

/* --- Quick Capture: Empty State --- */
.inbox-empty-state {
  color: var(--dim);
  font-size: var(--text-base);
  text-align: center;
  margin-top: var(--sp-8);
}

/* --- Mode Toggle --- */
.mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.mode-toggle-btn {
  padding: var(--sp-2) var(--sp-4);
  border: none;
  background: transparent;
  color: var(--dim);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease);
}
.mode-toggle-btn.active {
  background: var(--accent);
  color: var(--text);
}
.mode-toggle-btn:hover:not(.active) {
  color: var(--text);
}

/* --- Review Mode --- */
.review-filters {
  margin-bottom: var(--sp-4);
}
.review-filter-select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  cursor: pointer;
}
.review-filter-select:focus {
  outline: none;
  border-color: var(--accent);
}
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--ease);
  border-left: 3px solid transparent;
}
.review-card.review-status-classified {
  border-left-color: var(--blue);
}
.review-card.review-status-approved {
  border-left-color: var(--green);
}
.review-card.review-status-classifying {
  border-left-color: var(--yellow);
}
.review-card:hover {
  border-color: var(--border-hover);
}
.review-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.review-card-header-text {
  flex: 1;
  min-width: 0;
  padding: 0 var(--sp-3);
}
.review-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.review-card-content {
  color: var(--dim);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: break-word;
}
.review-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.review-card-meta-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.review-card-tags {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.review-card-time {
  color: var(--dim);
  font-size: var(--text-xs);
}
.review-card-source {
  color: var(--dim);
  font-size: var(--text-xs);
}
.status-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.status-pending,
.status-classifying,
.status-classified,
.status-unclassified {
  background: color-mix(in srgb, var(--dim) 25%, transparent);
  color: var(--dim);
}
.review-card-skeleton {
  height: 80px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: var(--sp-3);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
.review-empty-state {
  color: var(--dim);
  font-size: var(--text-base);
  text-align: center;
  margin-top: var(--sp-8);
}

/* --- Review Card: Action Buttons --- */
.review-card-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.review-action-btn {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  font-size: var(--text-xs);
  cursor: pointer;
  transition:
    border-color var(--ease),
    color var(--ease);
}
.review-action-btn:hover {
  border-color: var(--text);
}
.review-action-approve {
  color: var(--green);
}
.review-action-approve:hover {
  border-color: var(--green);
}
.review-action-edit {
  color: var(--text);
}
.review-action-deny {
  color: var(--accent);
}
.review-action-deny:hover {
  border-color: var(--accent);
}

/* --- Review Card: Edit View --- */
.review-card-edit {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.review-edit-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.review-edit-field label {
  font-size: var(--text-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.review-edit-field select,
.review-edit-field input,
.review-edit-field textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--ease);
}
.review-edit-field select:focus,
.review-edit-field input:focus,
.review-edit-field textarea:focus {
  border-color: var(--accent);
}
.review-edit-field textarea {
  resize: vertical;
  min-height: 60px;
}

/* --- Review Card: Error State --- */
.review-card.review-card-error {
  border-color: var(--accent);
}
.review-error-msg {
  color: var(--accent);
  font-size: var(--text-xs);
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.review-retry-btn {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--ease);
}
.review-retry-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* --- Confidence Badge & Expanded Card --- */
.confidence-badge {
  display: inline-block;
  padding: 0.15rem var(--sp-2);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
}
.confidence-high {
  background: color-mix(in srgb, var(--green) 25%, transparent);
  color: var(--green);
}
.confidence-medium {
  background: color-mix(in srgb, var(--yellow) 25%, transparent);
  color: var(--yellow);
}
.confidence-low {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
}
.confidence-none {
  background: color-mix(in srgb, var(--dim) 25%, transparent);
  color: var(--dim);
}
.confidence-classifying {
  color: var(--dim);
  font-size: var(--text-sm);
}
.confidence-pending-extraction {
  background: color-mix(in srgb, var(--yellow) 25%, transparent);
  color: var(--yellow);
}

/* Popup attachments — surface file links from v2_capture_files */
.unified-popup-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--card);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.popup-attachments-label {
  font-size: var(--text-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.popup-attachments-loading,
.popup-attachments-empty {
  font-size: var(--text-sm);
  color: var(--dim);
  font-style: italic;
}
.popup-attachment-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.popup-attachment-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  flex: 1 1 auto;
  min-width: 0;
}
.popup-attachment-link:hover {
  text-decoration: underline;
}
.popup-attachment-link.disabled {
  color: var(--dim);
  font-style: italic;
}
.popup-attachment-adapter {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  font-size: var(--text-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.popup-attachment-status {
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: 3px;
}
.popup-attachment-status.status-pending_extraction {
  background: color-mix(in srgb, var(--yellow) 25%, transparent);
  color: var(--yellow);
}
.popup-attachment-status.status-failed {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
}
.popup-attachment-size {
  color: var(--dim);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.review-card-content {
  cursor: pointer;
}
.review-rationale {
  color: var(--dim);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.review-alternatives {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.review-alt-label {
  color: var(--dim);
  font-size: var(--text-sm);
}
.review-feedback-input {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--ease);
}
.review-feedback-input:focus {
  border-color: var(--accent);
}

/* --- Review Card: Removing Animation --- */
.review-card.removing {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* --- Quick Capture: Capture Modal --- */
.capture-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.capture-dialog {
  max-width: 600px;
  width: 90%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-4);
}

/* Tray mode (S562, Decision-2 Scope D) — header Capture chip only. Slides down
   from under the app-header at the top-right of the page area; no screen dim.
   Scoped to frame pages + the .capture-tray flag so card-triggered capture and
   non-frame pages keep the centered overlay. Overlay stays click-to-close. */
body.has-app-frame .capture-overlay.capture-tray {
  background: transparent;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--app-header-h) var(--sp-5) 0 0;
}
body.has-app-frame .capture-overlay.capture-tray .capture-dialog {
  width: 380px;
  max-width: calc(100vw - var(--sp-6));
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  animation: capture-tray-down 0.18s ease;
}
@keyframes capture-tray-down {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.capture-modal-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  transition: border-color var(--ease);
  box-sizing: border-box;
}
.capture-modal-input::placeholder {
  color: var(--dim);
}
.capture-modal-input:focus {
  border-color: var(--accent);
}

.capture-context-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--dim);
  font-size: var(--text-sm);
  margin-top: var(--sp-3);
  cursor: pointer;
  user-select: none;
}
.capture-context-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- Smart Input: textarea-as-input overrides --- */
textarea.capture-modal-input,
textarea.unified-thought-input {
  resize: none;
  overflow: hidden;
  min-height: 38px;
  line-height: 1.5;
}

/* --- Markdown Rendered Output --- */
.md-rendered {
  line-height: 1.6;
}
/* Reset pre-wrap inherited from containers like .unified-popup-content —
   marked.js outputs proper HTML so text-node whitespace shouldn't be preserved. */
.md-rendered,
.md-rendered * {
  white-space: normal;
}
.md-rendered pre,
.md-rendered code {
  white-space: pre-wrap;
}
.md-rendered p {
  margin: 0 0 var(--sp-2);
}
.md-rendered p:last-child {
  margin-bottom: 0;
}
.md-rendered ul,
.md-rendered ol {
  margin: var(--sp-2) 0;
  padding-left: var(--sp-6);
}
.md-rendered li {
  margin-bottom: 2px;
}
.md-rendered code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.85em;
}
.md-rendered pre {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--sp-3);
  border-radius: 6px;
  overflow-x: auto;
  margin: var(--sp-2) 0;
}
.md-rendered pre code {
  background: none;
  padding: 0;
}
.md-rendered blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-3);
  color: var(--dim);
  margin: var(--sp-2) 0;
}
.md-rendered a {
  color: var(--blue);
}
.md-rendered h1,
.md-rendered h2,
.md-rendered h3 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-weight: 600;
}
.md-rendered h1 {
  font-size: var(--text-lg);
}
.md-rendered h2 {
  font-size: var(--text-base);
}
.md-rendered h3 {
  font-size: var(--text-sm);
}
.md-rendered table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--sp-2) 0;
  font-size: var(--text-sm);
}
.md-rendered th,
.md-rendered td {
  border: 1px solid var(--border);
  padding: var(--sp-1) var(--sp-2);
  text-align: left;
}
.md-rendered th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
}

/* --- Read-only role mutation gates (viewer + partner) ---
   Pages tag mutation buttons / forms with `.viewer-hide` (or attribute
   data-viewer-hide). When body.dataset.role is anything other than "owner"
   (set in pageShell), those surfaces are hidden entirely. Handler-side
   early-returns are the defense-in-depth layer; this is the UX layer.
   Class name kept as `.viewer-hide` for backwards-compat; semantically
   it now means "hide from non-owner roles". */
body:not([data-role="owner"]) .viewer-hide,
body:not([data-role="owner"]) [data-viewer-hide] {
  display: none !important;
}

/* Workouts: set inputs render as inline read-only text values for non-owners.
   No edit chrome, no hover cursor, no half-faded look (was misleading). */
body:not([data-role="owner"]) [data-set-input] {
  pointer-events: none;
  border-color: transparent;
  background: transparent;
  cursor: default;
}
body:not([data-role="owner"]) [data-set-done] {
  pointer-events: none;
  cursor: default;
}

/* --- Per-user accent color override ---
   When a user has accent_color set (e.g. Willow's lilac), the bootstrap
   in components.js writes --user-accent on :root. These selectors only
   fire when --user-accent is defined; otherwise rules above (which use
   var(--accent) directly) apply Max's default red. */
.askmax-fab {
  background: var(--user-accent, var(--accent));
  box-shadow: 0 4px 16px
    color-mix(in srgb, var(--user-accent, var(--accent)) 40%, transparent);
}
.askmax-fab:hover {
  box-shadow: 0 6px 20px
    color-mix(in srgb, var(--user-accent, var(--accent)) 50%, transparent);
}
.askmax-send,
#askmax-capture-send,
#ms-capture-submit,
.capture-send-btn {
  background: var(--user-accent, var(--accent)) !important;
  border-color: var(--user-accent, var(--accent)) !important;
}
.askmax-title {
  color: var(--user-accent, var(--accent));
}
.brand-text h1 {
  color: var(--user-accent, var(--accent));
}

/* --- Sticky Header (S488, Decision 0dbc5f7a) ---
   Sits inside #main at top. Coexists with body-level classifier-health-banner
   (z-index 1000). Bleed-to-edge inside #main via negative margins.
   Adopters: call renderStickyHeader({title, subtitle, actions?}) and emit it
   as the first child of #main. */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* D-1 Phase 0 (962ae4b7): negative margin matches .main-content padding
     (--sp-6) so the header bleeds to the actual container edges. Was --sp-5
     which left a 4px gap that scrolled content slid into. */
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
}
.sticky-header-titles {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}
.sticky-header-title {
  font-size: var(--text-lg);
  color: var(--user-accent, var(--accent));
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-header-subtitle {
  color: var(--dim);
  font-size: var(--text-sm);
}
.sticky-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* --- Header Capture Chip (S488 Stream B, decision 0b9e0f70) ---
   Pill-shaped button in the sticky-header actions slot. Opens the
   shared quick-capture modal. Replaces the .capture-fab. */
/* Header capture: "Capture" label + the round card .capture-btn beside it
   (S562, Joe S562 request). The chip is the clickable element (delegated
   bindCaptureChip); the inner .capture-btn is a visual-only span reusing the
   card button look — bindCaptureButtons skips it (closest .capture-chip). */
.capture-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: inherit;
}
.capture-chip:hover .capture-btn {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}
.capture-chip-icon {
  font-size: 1em;
  line-height: 1;
}
.capture-chip-label {
  font-size: var(--text-sm);
  color: var(--dim);
}
@media (max-width: 540px) {
  .capture-chip-label {
    display: none;
  }
}

/* --- Notification Bell + Badge --- */
.notif-bell {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--text-base);
  transition:
    border-color var(--ease),
    background var(--ease);
}
.notif-bell:hover {
  border-color: var(--border-hover);
  background: var(--card-hover);
}
.notif-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.notif-bell-badge[hidden] {
  display: none;
}

/* --- Notification Panel --- */
.notif-panel {
  position: fixed;
  top: 56px;
  right: var(--sp-4);
  width: min(380px, calc(100vw - 2 * var(--sp-4)));
  max-height: 70vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: var(--z-notif-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-panel[hidden] {
  display: none;
}
.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.notif-panel-header h3 {
  font-size: var(--text-sm);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.notif-panel-actions {
  display: flex;
  gap: var(--sp-3);
}
.notif-panel-actions button {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
}
.notif-panel-actions button:hover {
  color: var(--text);
}
.notif-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--ease);
}
.notif-item:hover {
  background: var(--card-hover);
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-item.unread {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.notif-severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.notif-severity-info {
  background: var(--blue);
}
.notif-severity-success {
  background: var(--green);
}
.notif-severity-warning {
  background: var(--yellow);
}
.notif-severity-error {
  background: var(--accent);
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title {
  color: var(--text);
  font-size: var(--text-sm);
  margin-bottom: 2px;
  word-wrap: break-word;
}
.notif-item-meta {
  color: var(--dim);
  font-size: var(--text-xs);
}
.notif-item-dismiss {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--text-base);
  cursor: pointer;
  padding: 0 var(--sp-1);
  flex-shrink: 0;
}
.notif-item-dismiss:hover {
  color: var(--accent);
}
.notif-panel-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--dim);
  font-size: var(--text-sm);
}
.notif-panel-footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  text-align: center;
}
.notif-panel-footer a {
  color: var(--user-accent, var(--accent));
  font-size: var(--text-sm);
  text-decoration: none;
}
.notif-panel-footer a:hover {
  text-decoration: underline;
}

/* ============================================
   Command Palette (Cmd+K)
   ============================================ */

.palette-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10100;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}
.palette-overlay.open {
  display: flex;
}

.palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.palette-panel {
  position: relative;
  width: min(560px, 90vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}

.palette-input {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--text-lg);
  font-family: inherit;
  outline: none;
}
.palette-input::placeholder {
  color: var(--dim);
}

.palette-results {
  overflow-y: auto;
  flex: 1;
  padding: var(--sp-2) 0;
}

.palette-group-label {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.palette-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  cursor: pointer;
  transition: background var(--ease);
}
.palette-result:hover,
.palette-result--active {
  background: rgba(255, 255, 255, 0.05);
}
.palette-result--active {
  background: rgba(var(--accent-rgb), 0.12);
}

.palette-result-icon {
  font-size: var(--text-lg);
  width: 1.5em;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.palette-result-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  color: var(--text);
}

.palette-result-subtitle {
  font-size: var(--text-sm);
  color: var(--dim);
  white-space: nowrap;
}

.palette-empty {
  padding: var(--sp-6) var(--sp-5);
  color: var(--dim);
  text-align: center;
  font-size: var(--text-sm);
}

.palette-footer {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--dim);
}
.palette-footer kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* ============================================
   Phase 2 — Visual Hierarchy Refresh
   Opacity-based chrome recession (Linear pattern)
   ============================================ */

/* Sidebar recedes when not interacted with */
.sidebar {
  opacity: 0.75;
  transition: opacity var(--ease);
}
.sidebar:hover,
.sidebar:focus-within {
  opacity: 1;
}

/* Card metadata dims until row hovered */
.card .type-badge,
.card .tag-pill,
.card .status-badge,
.card .confidence-dot,
.card .block-badge,
.card .card-link,
.card .card-meta {
  opacity: 0.5;
  transition: opacity var(--ease);
}
.card:hover .type-badge,
.card:hover .tag-pill,
.card:hover .status-badge,
.card:hover .confidence-dot,
.card:hover .block-badge,
.card:hover .card-link,
.card:hover .card-meta {
  opacity: 1;
}

/* Stat-row metadata fades in on hover */
.stat-row .type-badge,
.stat-row .tag-pill,
.stat-row .status-badge {
  opacity: 0.5;
  transition: opacity var(--ease);
}
.stat-row:hover .type-badge,
.stat-row:hover .tag-pill,
.stat-row:hover .status-badge {
  opacity: 1;
}

/* ============================================
   Skeleton Loading (replaces .loading pulse)
   ============================================ */

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--card) 25%,
    var(--card-hover) 50%,
    var(--card) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-line {
  height: 14px;
  margin-bottom: var(--sp-2);
  border-radius: 4px;
}
.skeleton-line:last-child {
  margin-bottom: 0;
}
.skeleton-line.short {
  width: 40%;
}
.skeleton-line.medium {
  width: 70%;
}
.skeleton-line.long {
  width: 90%;
}

.skeleton-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-5);
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-row:last-child {
  border-bottom: none;
}

.skeleton-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-badge {
  width: 60px;
  height: 18px;
  border-radius: 3px;
}

/* ============================================
   Type-to-Filter Bar
   ============================================ */

.type-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--user-accent, var(--accent));
  border-radius: 6px;
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
}
.type-filter-label {
  color: var(--dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
}
.type-filter-query {
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
  flex: 1;
}
.type-filter-clear {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: 0 var(--sp-1);
  line-height: 1;
}
.type-filter-clear:hover {
  color: var(--accent);
}

/* ============================================
   Keyboard Shortcuts Overlay (?)
   ============================================ */

.shortcuts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10100;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.shortcuts-overlay.open {
  display: flex;
}
.shortcuts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.shortcuts-panel {
  position: relative;
  width: min(480px, 90vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.shortcuts-header h2 {
  font-size: var(--text-lg);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.shortcuts-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.shortcuts-close:hover {
  color: var(--text);
}
.shortcuts-body {
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
}
.shortcuts-group {
  margin-bottom: var(--sp-4);
}
.shortcuts-group:last-child {
  margin-bottom: 0;
}
.shortcuts-group-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}
.shortcuts-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
}
.shortcuts-row kbd {
  display: inline-block;
  min-width: 28px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
  font-size: var(--text-xs);
  text-align: center;
  color: var(--text);
}
.shortcuts-row span {
  color: var(--dim);
  font-size: var(--text-sm);
}

/* ============================================
   Phase 4 — Sidebar Focus Mode
   Hides low-frequency nav sections when active.
   Toggle via .sidebar.focus-mode class.
   ============================================ */

.sidebar.focus-mode .nav-section-items:not(.expanded) {
  display: none;
}
.sidebar.focus-mode .nav-section:not(.expanded) .nav-section-chevron {
  opacity: 0.3;
}
.sidebar.focus-mode .nav-item:not(.active) {
  opacity: 0.5;
  font-size: var(--text-sm);
  padding-top: 1px;
  padding-bottom: 1px;
}
.sidebar.focus-mode .nav-item.active {
  opacity: 1;
}
.sidebar.focus-mode .nav-children {
  display: none;
}
.sidebar.focus-mode .nav-group.expanded .nav-children {
  display: block;
}

/* Focus mode toggle button in sidebar footer */
.focus-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  padding: 1px var(--sp-2);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: inherit;
  transition: all var(--ease);
  margin: 0; /* v1.4: footer row owns spacing now */
  flex-shrink: 0;
}
.focus-mode-toggle:hover {
  color: var(--text);
  border-color: var(--border-hover);
}
.focus-mode-toggle.active {
  color: var(--user-accent, var(--accent));
  border-color: var(--user-accent, var(--accent));
  background: rgba(var(--accent-rgb), 0.08);
}
.focus-mode-toggle .focus-icon {
  font-size: var(--text-sm);
}

/* ============================================
   Phase 4 — Page Crossfade Transition
   ============================================ */

.main-content {
  transition: opacity 0.12s ease;
}
.main-content.page-transition {
  opacity: 0.3;
}

/* ============================================
   Capture → spawned-record link chips
   (capture-family pages: review / archive)
   ============================================ */

/* Chip linking a resolved capture to the 2nd-brain record it created. */
.spawn-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent);
}
a.spawn-chip:hover {
  border-color: var(--accent);
  background: var(--card-hover);
}
.spawn-chip--created {
  color: var(--dim);
  cursor: default;
}
.spawn-chip--partial {
  color: var(--accent);
  border-style: dashed;
}
.spawn-chip--failed {
  color: var(--dim);
  border-style: dashed;
  opacity: 0.8;
  cursor: help;
}

/* Post-approve confirmation row injected into the review popup action slot. */
.spawn-confirm {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.spawn-confirm-label {
  color: var(--dim);
  font-size: var(--text-sm);
}

/* --- Workbench Preset Picker (decision 46cdf3a9; v1.4 custom dropdown —
   options carry a description line a native <select> can't render) ---
   Active preset stages its pages as the first-order section; other sections
   collapse to dimmed drawers. */
.preset-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2) var(--sp-2);
  margin: 0 0 var(--sp-1);
  border-bottom: 1px solid var(--border);
}
.preset-select-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  transition: border-color var(--ease);
}
.preset-select-btn:hover,
.preset-select-btn:focus {
  border-color: var(--user-accent, var(--accent));
  outline: none;
}
.preset-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-caret {
  color: var(--dim);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.preset-menu {
  position: absolute;
  top: 100%;
  left: var(--sp-2);
  right: var(--sp-2);
  z-index: 200;
  background: var(--card);
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: var(--sp-1);
  max-height: 60vh;
  overflow-y: auto;
}
.preset-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 4px;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  transition: background var(--ease);
}
.preset-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
.preset-option.active {
  background: rgba(var(--accent-rgb), 0.12);
}
.preset-option-desc {
  color: var(--dim);
  font-size: var(--text-xs);
  line-height: 1.3;
}
/* v1.3: visible outline + bigger hit area (Joe request). */
.preset-tool-btn {
  background: none;
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  color: var(--dim);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.2;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: all var(--ease);
}
.preset-tool-btn:hover {
  color: var(--text);
  border-color: var(--user-accent, var(--accent));
  background: rgba(var(--accent-rgb), 0.08);
}
.sidebar.collapsed .preset-picker {
  justify-content: center;
}
/* v1.3: the sidebar's own --sp-6 top padding left a big gap above the picker
   on frame pages (brand suppressed, picker is first child). Pull it up. */
.sidebar > .preset-picker:first-child {
  margin-top: calc(-1 * var(--sp-4));
}

/* Staged section header — different in KIND from true nav sections (v1.3):
   normal case + white + heavy weight (vs uppercase accent), thick accent bar
   on the left edge, PRESET chip on the right. Tint stays from v1.1. */
.nav-section-staged {
  background: rgba(var(--accent-rgb), 0.16);
  border-top-color: rgba(var(--accent-rgb), 0.35);
  border-bottom-color: rgba(var(--accent-rgb), 0.35);
  border-left: 4px solid var(--user-accent, var(--accent));
  cursor: default;
}
.nav-section-staged:hover {
  background: rgba(var(--accent-rgb), 0.16);
}
.nav-section-staged .nav-section-label.staged-name {
  opacity: 1;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--text-lg);
  font-weight: 700;
}
/* v1.4: bottom divider closes the staged block — the pegboard is bounded
   above (tinted header) and below (accent rule); drawers live underneath.
   Only renders while a preset is active (the block doesn't exist on All). */
.nav-section-items-staged {
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.45);
  margin-bottom: var(--sp-2);
}

/* Preset-staged drawer dimming — focus-mode's VISUAL language scoped to the
   drawers while a preset is active. Staged items keep full weight. Does not
   touch .focus-mode state; Joe's manual Focus toggle stacks independently. */
.sidebar.preset-staged .sidebar-nav .nav-item:not(.active) {
  opacity: 0.5;
  font-size: var(--text-sm);
  padding-top: 1px;
  padding-bottom: 1px;
}
.sidebar.preset-staged .sidebar-nav .nav-section-items-staged .nav-item {
  opacity: 1;
  font-size: var(--text-base);
  padding-top: 2px;
  padding-bottom: 2px;
}

/* --- Workbench Preset Editor modal --- */
.preset-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.preset-editor-dialog {
  width: 520px;
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-4);
}
.preset-editor-title {
  font-size: var(--text-lg);
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.preset-editor-fields {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.preset-editor-fields label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  color: var(--dim);
  font-size: var(--text-xs);
}
.preset-editor-fields input,
.preset-editor-fields select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
}
.preset-editor-fields input:focus,
.preset-editor-fields select:focus {
  border-color: var(--accent);
  outline: none;
}
.preset-editor-fields label:first-child {
  flex: 1;
}
#preset-ed-icon {
  width: 3rem;
  text-align: center;
}
.preset-editor-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.preset-editor-group-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.85;
  margin: var(--sp-2) 0 var(--sp-1);
}
/* v1.2 transfer-list: catalog rows are buttons — click moves the row up into
   the staged list. The "↑ stage" hint appears on hover. */
.preset-editor-page {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 2px var(--sp-1);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  color: var(--dim);
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--ease);
}
.preset-editor-page:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.catalog-add {
  margin-left: auto;
  color: var(--user-accent, var(--accent));
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity var(--ease);
}
.preset-editor-page:hover .catalog-add {
  opacity: 0.9;
}
.preset-editor-footer {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.preset-editor-spacer {
  flex: 1;
}
.preset-editor-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: all var(--ease);
}
.preset-editor-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
}
.preset-editor-save {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
}
.preset-editor-archive:hover {
  color: var(--red);
  border-color: var(--red);
}

/* --- Recents strip (shared frequency store, 7-day decay) --- */
/* v1.4: lives at the bottom of the sidebar, between the nav and the footer
   (the bench top sits by your knees, not over the pegboard). */
.recents-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* v1.5: "Recent:" text label (was a ↺ glyph) + bigger outlined chips. */
.recents-strip-label {
  color: var(--dim);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-right: var(--sp-1);
  cursor: default;
  flex-shrink: 0;
}
.recent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  color: var(--dim);
  font-size: var(--text-lg);
  text-decoration: none;
  transition: all var(--ease);
}
.recent-chip:hover {
  color: var(--text);
  border-color: var(--user-accent, var(--accent));
  background: rgba(var(--accent-rgb), 0.08);
  text-decoration: none;
}
.sidebar.collapsed .recents-strip {
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Preset Editor: ordered staging list (v1.1; v1.2 grows to fit) ---
   No fixed height — the staged pane grows as rows transfer in and the
   catalog below shrinks by the same rows (constant total). flex-shrink: 0
   keeps it un-squeezed; the catalog is the scrolling pane. The 45vh cap is
   a safety rail for pathological all-pages presets. */
.preset-editor-staged {
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.06);
  padding: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-shrink: 0;
  max-height: 45vh;
  overflow-y: auto;
}
.preset-editor-staged-empty {
  color: var(--dim);
  font-size: var(--text-xs);
  padding: var(--sp-1);
}
.preset-editor-staged-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-1);
  color: var(--text);
  font-size: var(--text-sm);
  border-radius: 4px;
}
.preset-editor-staged-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.staged-rank {
  width: 1.2rem;
  text-align: right;
  color: var(--dim);
  font-size: var(--text-xs);
}
.staged-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staged-lands {
  color: var(--user-accent, var(--accent));
  font-size: var(--text-xs);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 3px;
  padding: 0 var(--sp-1);
}
.staged-move {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--dim);
  font-size: var(--text-xs);
  padding: 0 var(--sp-1);
  cursor: pointer;
  transition: all var(--ease);
}
.staged-move:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-hover);
}
.staged-move:disabled {
  opacity: 0.25;
  cursor: default;
}
.staged-remove:hover {
  color: var(--red);
  border-color: var(--red);
}

/* v1.4: description field spans the full modal width on its own line. */
.preset-ed-desc-label {
  flex-basis: 100%;
}
.preset-ed-desc-label input {
  width: 100%;
}