/* ================================================================
   ML4YOU UI — styles.css
   ================================================================ */

/* Design tokens live in tokens.css (#1034 Phase 1). @import must precede
   every style rule, so it sits at the very top — before the reset below. */
@import url("tokens.css");

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--fg); display: flex; flex-direction: column; }
button { font-family: inherit; cursor: pointer; border: none; }
input, textarea { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }

/* ---- Login screen ---- */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh; padding: 20px;
}
.login-box {
  background: var(--bg2); border-radius: 12px; padding: 40px;
  width: 100%; max-width: 360px; text-align: center;
}
.login-box h1 { font-size: 1.5em; margin-bottom: 8px; }
.login-box p { color: var(--fg2); margin-bottom: 24px; font-size: 0.9em; }
.login-box input {
  width: 100%; padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--bg3); background: var(--bg); color: var(--fg);
  font-size: 1em; margin-bottom: 12px; outline: none;
}
.login-box input:focus { border-color: var(--accent); }
.login-box button {
  width: 100%; padding: 12px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 1em; font-weight: 600;
}
.login-box button:hover { background: var(--accent2); }
.login-box button:disabled { background: var(--bg3); color: var(--fg2); cursor: not-allowed; }
.login-error { color: var(--red); font-size: 0.85em; margin-top: 8px; min-height: 20px; }
/* Unreachable-brain banner (#964) — deliberately loud and structurally distinct
   from .login-error, so "off the tailnet" can never be mistaken for "wrong
   password". */
.login-offline {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border: 1px solid var(--yellow); border-left-width: 4px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  color: var(--fg); padding: 12px 14px; margin-bottom: 16px; font-size: 0.85em;
}
.login-offline[hidden] { display: none; }
.login-offline strong { font-size: 0.95em; line-height: 1.35; }
.login-offline span { color: var(--fg2); line-height: 1.35; }

/* ---- App shell ---- */
#app { display: none; height: 100vh; /* fallback */ height: 100dvh; overflow: hidden; }
#app.active { display: flex; }
/* Mobile keyboard avoidance (#838): 100dvh + interactive-widget=resizes-content
   handles Chrome/Android. iOS Safari doesn't shrink the layout viewport for the
   keyboard, so app.js sets --kb-inset from VisualViewport and we constrain the
   shell to the truly-visible region — the flex composer then re-anchors just
   above the keyboard instead of the page being scrolled up. */
body.kb-open #app { height: calc(100dvh - var(--kb-inset)); }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w); background: var(--bg2); display: flex; flex-direction: column;
  border-right: 1px solid var(--bg3); flex-shrink: 0;
}
.sidebar-header {
  padding: 16px 20px; border-bottom: 1px solid var(--bg3);
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-header h1 { font-size: 1.05em; font-weight: 700; font-family: var(--mono); letter-spacing: 0.01em; }
.sidebar-header-actions { display: flex; align-items: center; gap: 2px; }
.btn-theme, .btn-icon {
  background: none; color: var(--fg3); padding: 6px;
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
}
.btn-theme:hover, .btn-icon:hover { background: var(--bg3); color: var(--fg); }
/* In dark mode show sun, hide moon. In light mode show moon, hide sun. */
.btn-theme .icon-moon { display: none; }
[data-theme="light"] .btn-theme .icon-sun { display: none; }
[data-theme="light"] .btn-theme .icon-moon { display: block; }
.sidebar-section { padding: 8px; }
.sidebar-section-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 12px 8px; font-size: 0.72em; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg3); font-weight: 600;
}
/* Nav fills the space between header and footer and scrolls if the grouped list
   overflows — the footer then pins to the bottom (margin-top:auto) instead of a
   stretched empty gap sitting where the conversation list used to live (#1181). */
.sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius); color: var(--fg2); font-size: 0.9em;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--bg3); color: var(--fg); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Grouped-nav section labels — mono uppercase eyebrow, echoing the site's
   .section__title / .eyebrow treatment (#1181). */
.nav-group { margin-bottom: 4px; }
.nav-group + .nav-group { margin-top: 8px; }
.nav-group-title {
  font-family: var(--mono); font-size: 0.66em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg3); padding: 8px 12px 4px;
}

/* Conversation list */
.conv-section {
  flex: 1; overflow-y: auto; border-top: 1px solid var(--bg3);
  display: flex; flex-direction: column; min-height: 0;
}
.conv-search {
  margin: 6px 8px 0; padding: 6px 10px; font-size: 0.82em;
  border: 1px solid var(--bg3); border-radius: var(--radius);
  background: var(--bg2); color: var(--fg); outline: none;
}
.conv-search::placeholder { color: var(--fg3); }
.conv-search:focus { border-color: var(--accent); }
#conv-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
.conv-empty { padding: 12px; font-size: 0.82em; color: var(--fg3); text-align: center; }
.conv-item {
  display: flex; flex-direction: column; padding: 8px 12px;
  border-radius: var(--radius); cursor: pointer; font-size: 0.85em;
  transition: background 0.15s;
}
.conv-item:hover { background: var(--bg3); }
.conv-item.active { background: var(--bg3); border-left: 2px solid var(--accent); }
.conv-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg); font-weight: 500;
}
.conv-meta { font-size: 0.8em; color: var(--fg3); margin-top: 2px; }
.conv-pinned { border-left: 2px solid var(--accent); }
.conv-pinned .conv-title::before { content: "\26A1 "; }
/* Conversation with an in-flight reply (multi-session streaming) */
.conv-busy .conv-title::after {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-left: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite; vertical-align: middle;
}

.btn-new-chat {
  margin: 8px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 0.85em;
  font-weight: 600; text-align: center;
}
.btn-new-chat:hover { background: var(--accent2); }

.sidebar-footer {
  margin-top: auto; flex-shrink: 0;
  padding: 12px 16px; border-top: 1px solid var(--bg3);
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-footer .status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.sidebar-footer span { font-size: 0.8em; color: var(--fg3); }
/* Deployed commit SHA (#1188): monospace, quiet; accent when the running tab
   is behind the deployed build ("abc1234 → def5678"). */
.sidebar-footer .commit-sha { font-family: var(--mono); font-size: 0.7em; letter-spacing: 0.02em; white-space: nowrap; }
.sidebar-footer .commit-sha.behind { color: var(--accent); }
.btn-logout {
  background: none; color: var(--fg3); font-size: 0.8em; padding: 4px 8px;
  border-radius: 4px;
}
.btn-logout:hover { color: var(--fg); background: var(--bg3); }

/* ---- Collapsed sidebar (desktop) ----
   `html[data-sidebar="collapsed"]` is set pre-paint from localStorage
   (index.html) and toggled by sidebar.js (#sidebar-collapse, Cmd/Ctrl+B).
   The sidebar shrinks to an icon rail: nav items keep their SVG (label text is
   hidden and moved to `title`), group eyebrows and the wordmark go, the header
   actions stack vertically, the footer keeps only the status dot. Scoped to
   desktop — on mobile the sidebar is the slide-in drawer and must keep its
   full width regardless of the stored desktop preference. */
.sidebar { transition: width 0.18s ease; }
@media (min-width: 769px) {
  html[data-sidebar="collapsed"] { --sidebar-w: 56px; }
  html[data-sidebar="collapsed"] .sidebar-header {
    padding: 10px 0; flex-direction: column; justify-content: center; gap: 4px;
  }
  html[data-sidebar="collapsed"] .sidebar-header h1 { display: none; }
  html[data-sidebar="collapsed"] .sidebar-header-actions { flex-direction: column; gap: 4px; }
  html[data-sidebar="collapsed"] .sidebar-nav { padding: 8px 6px; overflow-x: hidden; }
  html[data-sidebar="collapsed"] .nav-group-title { display: none; }
  html[data-sidebar="collapsed"] .nav-group + .nav-group {
    margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bg3);
  }
  html[data-sidebar="collapsed"] .nav-item {
    justify-content: center; padding: 10px 0; gap: 0;
    /* Hide the text node next to the SVG without touching the markup. */
    font-size: 0; line-height: 0;
  }
  html[data-sidebar="collapsed"] .nav-item svg { width: 20px; height: 20px; }
  html[data-sidebar="collapsed"] .sidebar-footer {
    padding: 12px 0; justify-content: center;
  }
  html[data-sidebar="collapsed"] .sidebar-footer #wa-label,
  html[data-sidebar="collapsed"] .sidebar-footer .commit-sha,
  html[data-sidebar="collapsed"] .sidebar-footer .btn-logout { display: none; }
  /* Toggle icon flips to "expand" when collapsed. */
  html[data-sidebar="collapsed"] #sidebar-collapse svg { transform: scaleX(-1); }
}
/* The drawer has its own dismissal (overlay tap); the collapse toggle is a
   desktop-only affordance. */
@media (max-width: 768px) { #sidebar-collapse { display: none; } }

/* ---- Context menu ---- */
.ctx-menu {
  position: fixed; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); padding: 4px; z-index: 300;
  min-width: 120px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ctx-menu-item {
  padding: 8px 12px; border-radius: 4px; font-size: 0.85em;
  cursor: pointer; color: var(--fg2);
}
.ctx-menu-item:hover { background: var(--bg3); color: var(--fg); }
.ctx-menu-danger { color: var(--red); }
.ctx-menu-danger:hover { background: rgba(248,113,113,0.1); }

/* ---- Main content ---- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; }

/* ---- View visibility (keeps DOM alive across tab switches) ---- */
[id^="view-"]:not(.active) { visibility: hidden; position: absolute; inset: 0; pointer-events: none; overflow: hidden !important; }
[id^="view-"].active { visibility: visible; position: relative; pointer-events: auto; }

/* ---- Chat view ---- */
#view-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.chat-welcome {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; color: var(--fg3); gap: 14px; padding: 32px;
}
.chat-welcome h2 { color: var(--fg2); font-size: 1.4em; font-weight: 500; }
.chat-welcome .welcome-sub { color: var(--fg3); font-size: 0.95em; }
.chat-welcome .welcome-cursor {
  display: inline-block; width: 2px; height: 0.95em; background: var(--accent);
  vertical-align: text-bottom; margin-left: 4px;
  animation: cursor-blink 0.8s steps(2) infinite;
}
.chat-welcome .welcome-hint {
  font-size: 0.78em; color: var(--fg3); opacity: 0.7; margin-top: 4px;
}
.chat-welcome .welcome-hint kbd {
  background: var(--bg3); padding: 1px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.9em;
}

/* Starter prompt cards on the welcome screen */
.starter-prompts {
  display: grid; grid-template-columns: repeat(2, minmax(180px, 240px));
  gap: 10px; margin-top: 10px; width: 100%; max-width: 520px;
}
.starter-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); cursor: pointer; text-align: left;
  color: var(--fg); transition: border-color 0.15s, transform 0.05s;
}
.starter-card:hover { border-color: var(--accent); }
.starter-card:active { transform: translateY(1px); }
.starter-card .starter-title { font-weight: 500; font-size: 0.92em; }
.starter-card .starter-sub { font-size: 0.78em; color: var(--fg3); }
@media (max-width: 600px) {
  .starter-prompts { grid-template-columns: 1fr; max-width: 320px; }
}
.msg { max-width: 720px; width: 100%; margin: 0 auto; display: flex; gap: 12px; position: relative; flex-direction: column; }
.msg-user { align-items: flex-end; }
.msg-assistant { align-items: flex-start; }
.msg-user .msg-bubble {
  background: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px;
  padding: 10px 16px; max-width: 70%; white-space: pre-wrap; word-break: break-word;
  font-size: 0.95em; line-height: 1.5;
}
.msg-assistant .msg-bubble {
  background: var(--bg2); border-radius: 16px 16px 16px 4px;
  padding: 12px 16px; max-width: 85%; word-break: break-word;
  font-size: 0.95em; line-height: 1.6;
}

/* Bubble action row (edit / regenerate) */
.msg-actions {
  display: flex; gap: 4px; margin-top: 4px; opacity: 0;
  transition: opacity 0.15s;
}
.msg:hover .msg-actions, .msg-actions-assistant { opacity: 1; }
.msg-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid transparent;
  color: var(--fg3); cursor: pointer; padding: 3px 8px;
  border-radius: 6px; font-size: 0.78em;
}
.msg-action-btn:hover { background: var(--bg2); border-color: var(--bg3); color: var(--fg); }
.msg-actions-user { align-self: flex-end; }
.msg-actions-assistant { align-self: flex-start; }

/* Image thumbnails embedded in user bubbles */
.msg-thumbs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.msg-thumb {
  max-width: 160px; max-height: 160px; border-radius: 8px;
  object-fit: cover; cursor: zoom-in; background: var(--bg3);
}
.msg-text { display: block; }

/* Long-message collapse */
.msg-bubble.msg-collapsible:not(.expanded) {
  max-height: 360px; overflow: hidden; position: relative;
}
.msg-bubble.msg-collapsible:not(.expanded)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 32px; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
}
.msg-bubble.msg-collapsible.expanded { max-height: none; }
.msg-expander {
  display: block; margin: 8px auto 0; background: var(--bg3);
  color: var(--fg2); border: 1px solid var(--bg3); cursor: pointer;
  padding: 4px 12px; border-radius: 6px; font-size: 0.78em;
}
.msg-expander:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Image lightbox */
.image-lightbox {
  position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.image-lightbox img {
  max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}

/* Keyboard shortcut help table */
.shortcut-help table { width: 100%; border-collapse: collapse; }
.shortcut-help td { padding: 6px 8px; font-size: 0.9em; }
.shortcut-help td:first-child { width: 40%; white-space: nowrap; }
.shortcut-help kbd {
  background: var(--bg3); padding: 2px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.85em; color: var(--fg);
}
.msg-thinking {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 8px 0;
}
.thinking-dots {
  display: flex; gap: 4px;
}
.thinking-dots span {
  width: 8px; height: 8px; background: var(--fg3); border-radius: 50%;
  animation: blink 1.2s infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
.thinking-status {
  font-size: 0.75rem; color: var(--text-secondary, #888); font-style: italic;
}
.thinking-elapsed {
  font-style: normal; opacity: 0.7;
}
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ---------------------------------------------------------------------------
 * Stream activity panel — thinking + tool_use/tool_result + usage footer.
 * Surfaces what Claude Code is doing inline above/below the assistant bubble.
 * (#364 Phase 2)
 * --------------------------------------------------------------------------- */
.msg-activity {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 6px 0; max-width: 85%;
  font-size: 0.82em; color: var(--fg3);
}
.msg-tool-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px; background: var(--bg2);
  border: 1px solid var(--bg3);
  font-family: var(--mono, ui-monospace, monospace); line-height: 1.4;
  word-break: break-word;
}
.msg-tool-row.running { opacity: 0.85; }
.msg-tool-row.ok { border-color: rgba(46, 160, 67, 0.35); }
.msg-tool-row.err { border-color: rgba(208, 65, 65, 0.45); color: var(--fg2); }
.msg-tool-icon { font-size: 0.95em; flex-shrink: 0; }
.msg-tool-name { color: var(--fg2); font-weight: 500; }
.msg-tool-arg {
  color: var(--fg3); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}
.msg-tool-status {
  margin-left: auto; flex-shrink: 0; font-size: 0.9em;
  color: var(--fg3);
}
.msg-tool-row.running .msg-tool-status {
  animation: blink 1.4s infinite;
}
.msg-tool-row.ok .msg-tool-status { color: #2ea043; }
.msg-tool-row.err .msg-tool-status { color: #d04141; }

.msg-thinking-block {
  background: var(--bg2); border: 1px dashed var(--bg3);
  border-radius: 8px; padding: 4px 10px;
}
.msg-thinking-block > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg3); font-style: italic;
}
.msg-thinking-block > summary::-webkit-details-marker { display: none; }
.msg-thinking-block .msg-activity-icon { font-style: normal; }
.msg-thinking-text {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bg3);
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg2); opacity: 0.85;
  max-height: 280px; overflow-y: auto;
}

/* Forwarded subagent output in the main chat (#1023) — the thinking block's
   geometry with a solid accent edge, so a fan-out's workers read as a distinct
   voice from the parent's own reasoning. */
.msg-subagent-block {
  background: var(--bg2); border: 1px solid var(--bg3);
  border-left: 2px solid var(--accent);
  border-radius: 8px; padding: 4px 10px;
}
.msg-subagent-block > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 6px; color: var(--fg3);
}
.msg-subagent-block > summary::-webkit-details-marker { display: none; }
.msg-subagent-text {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bg3);
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg2); opacity: 0.9;
  max-height: 280px; overflow-y: auto;
}

.msg-meta {
  font-size: 0.72em; color: var(--fg3); opacity: 0.7;
  margin-top: 6px; max-width: 85%;
  font-family: var(--mono, ui-monospace, monospace);
}

/* Reader chat — same affordances, scoped to the reader pane. */
.reader-chat-activity {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 8px 0; font-size: 0.82em;
}
.reader-chat-tool {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 6px; background: var(--bg2);
  border: 1px solid var(--bg3); font-family: var(--mono, ui-monospace, monospace);
  word-break: break-word; line-height: 1.4;
}
.reader-chat-tool.running { opacity: 0.85; }
.reader-chat-tool.ok { border-color: rgba(46, 160, 67, 0.35); }
.reader-chat-tool.err { border-color: rgba(208, 65, 65, 0.45); }
.reader-chat-tool-name { color: var(--fg2); font-weight: 500; }
.reader-chat-tool-arg {
  color: var(--fg3); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 280px;
}
.reader-chat-tool-status { margin-left: auto; flex-shrink: 0; }
.reader-chat-tool.running .reader-chat-tool-status { animation: blink 1.4s infinite; }
.reader-chat-tool.ok .reader-chat-tool-status { color: #2ea043; }
.reader-chat-tool.err .reader-chat-tool-status { color: #d04141; }
.reader-chat-thinking {
  background: var(--bg2); border: 1px dashed var(--bg3);
  border-radius: 6px; padding: 3px 8px;
}
.reader-chat-thinking > summary {
  cursor: pointer; list-style: none; color: var(--fg3); font-style: italic;
}
.reader-chat-thinking > summary::-webkit-details-marker { display: none; }
.reader-chat-thinking-text {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bg3);
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg2); opacity: 0.85; max-height: 220px; overflow-y: auto;
}
/* Forwarded subagent output (#1023) — same collapsible geometry as the
   thinking panel, marked with a solid accent edge so a fan-out's workers read
   as a distinct voice from the parent's own reasoning. */
.reader-chat-subagent {
  background: var(--bg2); border: 1px solid var(--bg3);
  border-left: 2px solid var(--accent);
  border-radius: 6px; padding: 3px 8px;
}
.reader-chat-subagent > summary {
  cursor: pointer; list-style: none; color: var(--fg3);
}
.reader-chat-subagent > summary::-webkit-details-marker { display: none; }
.reader-chat-subagent-text {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bg3);
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg2); opacity: 0.9; max-height: 220px; overflow-y: auto;
}
.reader-chat-meta {
  font-size: 0.72em; color: var(--fg3); opacity: 0.7; margin-top: 6px;
  font-family: var(--mono, ui-monospace, monospace);
}

/* Streaming cursor */
.cursor-blink {
  display: inline-block; width: 2px; height: 1em; background: var(--accent);
  animation: cursor-blink 0.8s steps(2) infinite; vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes cursor-blink { 0% { opacity: 1; } 100% { opacity: 0; } }

.chat-input-area {
  padding: 16px 24px; border-top: 1px solid var(--bg3); background: var(--bg);
  flex-shrink: 0;
}
.chat-input-wrap {
  max-width: 720px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end;
}
.chat-input-wrap textarea {
  flex: 1; resize: none; border: 1px solid var(--bg3); border-radius: var(--radius);
  background: var(--bg2); color: var(--fg); padding: 12px 16px; font-size: 0.95em;
  min-height: 44px; max-height: 160px; outline: none; line-height: 1.4;
}
.chat-input-wrap textarea:focus { border-color: var(--accent); }
.chat-input-wrap button {
  padding: 10px 20px; border-radius: var(--radius); background: var(--accent);
  color: #fff; font-weight: 600; font-size: 0.9em; white-space: nowrap;
  height: 44px;
}
.chat-input-wrap button:hover { background: var(--accent2); }
.chat-input-wrap button:disabled { opacity: 0.5; cursor: not-allowed; }
#chat-send.cancel-mode { background: #e53935; }
#chat-send.cancel-mode:hover { background: #c62828; }

/* Voice mic button */
#chat-mic {
  padding: 0; width: 44px; flex-shrink: 0;
  background: var(--bg3); color: var(--fg2);
  display: flex; align-items: center; justify-content: center;
}
#chat-mic:hover { background: var(--accent); color: #fff; }
#chat-mic.recording {
  background: #e53935; color: #fff;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
}

/* Voice mode (hands-free) toggle button */
#chat-voice-mode {
  padding: 0; width: 44px; flex-shrink: 0;
  background: var(--bg3); color: var(--fg2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#chat-voice-mode:hover { background: var(--accent); color: #fff; }
#chat-voice-mode.active {
  background: var(--accent); color: #fff;
}
#chat-voice-mode.listening::after {
  content: ""; position: absolute; inset: -3px;
  border: 2px solid #4caf50; border-radius: 10px;
  animation: chat-voice-mode-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
#chat-voice-mode.speaking::after {
  content: ""; position: absolute; inset: -3px;
  border: 2px solid #ffb300; border-radius: 10px;
  animation: chat-voice-mode-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chat-voice-mode-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Voice mode live transcript badge */
.chat-voice-transcript {
  max-width: 720px; margin: 0 auto 6px auto;
  font-size: 0.82em; color: var(--fg3);
  padding: 6px 10px; background: var(--bg3); border-radius: 8px;
  display: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-voice-transcript.visible { display: block; }
.chat-voice-transcript .tx-label {
  color: var(--fg2); font-weight: 500; margin-right: 6px;
}

/* Attach button */
#chat-attach {
  padding: 0; width: 44px; flex-shrink: 0;
  background: var(--bg3); color: var(--fg2);
  display: flex; align-items: center; justify-content: center;
}
#chat-attach:hover { background: var(--accent); color: #fff; }

/* Attachment chips bar */
.chat-attachments {
  max-width: 720px; margin: 0 auto;
  display: none; flex-wrap: wrap; gap: 6px; padding-bottom: 8px;
}
.chat-attachments.has-items { display: flex; }
.attachment-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border-radius: 8px; padding: 4px 10px;
  font-size: 0.82em; color: var(--fg2); max-width: 220px;
}
.attachment-icon { font-size: 1em; flex-shrink: 0; }
.attachment-thumb {
  width: 22px; height: 22px; border-radius: 4px; object-fit: cover;
  flex-shrink: 0; background: var(--bg);
}
.attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-remove {
  background: none; border: none; color: var(--fg3); cursor: pointer;
  font-size: 1.1em; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.attachment-remove:hover { color: var(--fg); }

/* Drag-and-drop overlay */
.chat-drop-overlay {
  display: none; position: absolute; inset: 0; z-index: 50;
  background: rgba(99, 102, 241, 0.12); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
  border: 2px dashed var(--accent); border-radius: var(--radius);
  pointer-events: none;
}
.chat-drop-overlay.active { display: flex; }
.chat-drop-label {
  font-size: 1.1em; font-weight: 600; color: var(--accent);
  background: var(--bg); padding: 12px 28px; border-radius: var(--radius);
}
#view-chat.active { position: relative; }

/* ---- Markdown rendering ---- */
.msg-assistant .msg-bubble h1,
.msg-assistant .msg-bubble h2,
.msg-assistant .msg-bubble h3,
.msg-assistant .msg-bubble h4 {
  margin: 12px 0 6px; font-size: 1em; color: var(--fg);
}
.msg-assistant .msg-bubble h1 { font-size: 1.2em; }
.msg-assistant .msg-bubble h2 { font-size: 1.1em; }
.msg-assistant .msg-bubble p { margin: 6px 0; }
.msg-assistant .msg-bubble ul,
.msg-assistant .msg-bubble ol {
  padding-left: 20px; margin: 6px 0;
}
.msg-assistant .msg-bubble li { margin: 4px 0; }
.msg-assistant .msg-bubble blockquote {
  border-left: 3px solid var(--bg3); padding-left: 12px;
  color: var(--fg2); margin: 8px 0;
}
.msg-assistant .msg-bubble table {
  border-collapse: collapse; margin: 8px 0; width: 100%;
}
.msg-assistant .msg-bubble th,
.msg-assistant .msg-bubble td {
  border: 1px solid var(--bg3); padding: 6px 10px; font-size: 0.9em;
}
.msg-assistant .msg-bubble th {
  background: var(--bg3); font-weight: 600;
}
.msg-assistant .msg-bubble code {
  background: var(--bg3); padding: 2px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.88em;
}
.msg-assistant .msg-bubble pre {
  margin: 0;
}
.msg-assistant .msg-bubble pre code {
  background: none; padding: 0;
}

/* Code blocks */
.code-block {
  position: relative; background: var(--bg3); padding: 12px;
  border-radius: var(--radius); overflow-x: auto; margin: 8px 0;
  font-family: var(--mono); font-size: 0.85em; line-height: 1.5;
}
.copy-btn {
  position: absolute; top: 6px; right: 6px;
  background: var(--bg2); color: var(--fg3); border: 1px solid var(--bg);
  padding: 3px 8px; border-radius: 4px; font-size: 0.75em;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.code-block:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--fg); background: var(--accent); border-color: var(--accent); }

/* ---- Files view ---- */
#view-files { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.files-header {
  padding: 16px 24px; border-bottom: 1px solid var(--bg3);
  display: flex; align-items: center; gap: 12px;
}
.files-breadcrumb {
  display: flex; gap: 4px; align-items: center; font-size: 0.9em;
}
.files-breadcrumb span { color: var(--fg3); }
.files-breadcrumb .crumb { cursor: pointer; color: var(--accent); }
.files-breadcrumb .crumb:hover { text-decoration: underline; }
.files-list {
  flex: 1; overflow-y: auto; padding: 8px 24px; min-height: 0;
}
.file-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius); cursor: pointer; font-size: 0.9em;
}
.file-item:hover, .file-item.selected { background: var(--bg2); }
.file-item .icon { color: var(--fg3); font-size: 1.1em; width: 20px; text-align: center; flex-shrink: 0; }
.file-item .name { flex: 1; min-width: 0; }
.file-item .name .sub {
  display: block; font-size: 0.82em; color: var(--fg3); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-item .name .snippet {
  display: block; font-size: 0.82em; color: var(--fg2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-item .name .snippet mark { background: var(--accent); color: var(--bg); padding: 0 2px; border-radius: 2px; }
.file-item .meta { color: var(--fg3); font-size: 0.78em; white-space: nowrap; flex-shrink: 0; }
.files-section-label {
  padding: 12px 12px 4px; font-size: 0.72em; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--fg3); font-weight: 600;
}
.files-content-search { color: var(--accent); border-top: 1px solid var(--bg3); margin-top: 6px; }

/* Quick-open search box in the files header */
.files-search-wrap { margin-left: auto; position: relative; display: flex; align-items: center; }
.files-search {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  color: var(--fg); font-size: 0.85em; padding: 6px 26px 6px 10px;
  width: 220px; outline: none; transition: width 0.15s ease, border-color 0.15s ease;
}
.files-search:focus { border-color: var(--accent); width: 300px; }
.files-search-clear {
  position: absolute; right: 4px; background: none; border: none; color: var(--fg3);
  font-size: 1em; cursor: pointer; padding: 0 6px;
}
.files-search-clear:hover { color: var(--fg); }

/* In-file find bar */
.file-find-wrap { display: flex; align-items: center; gap: 4px; }
.file-find {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px;
  color: var(--fg); font-size: 0.8em; padding: 4px 8px; width: 140px; outline: none;
}
.file-find:focus { border-color: var(--accent); }
.file-find-count { font-size: 0.75em; color: var(--fg3); min-width: 34px; text-align: center; }
.btn-find-nav {
  background: none; border: none; color: var(--fg2); cursor: pointer;
  font-size: 0.85em; padding: 2px 6px; border-radius: 4px;
}
.btn-find-nav:hover { background: var(--bg3); color: var(--fg); }

/* Find highlights inside the viewer */
.file-viewer-content mark.find-hit { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.file-viewer-content mark.find-hit.current { background: var(--accent); color: var(--bg); }
.file-viewer-content .heading-flash { animation: heading-flash 1.5s ease-out; }
@keyframes heading-flash {
  0% { background: color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { background: transparent; }
}
.file-viewer-header .filename { cursor: pointer; }
.file-viewer-header .filename:hover { color: var(--accent); }
.file-image { max-width: 100%; height: auto; border-radius: var(--radius); }
.file-viewer {
  flex: 1; display: none; flex-direction: column; min-height: 0;
}
.file-viewer.active { display: flex; }
.file-viewer-header {
  padding: 12px 24px; border-bottom: 1px solid var(--bg3);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.file-viewer-header .filename { font-family: var(--mono); font-size: 0.9em; }
.file-viewer-actions { display: flex; gap: 6px; }
.file-viewer-content {
  flex: 1; overflow: auto; padding: 16px 24px; min-height: 0;
  font-family: var(--mono); font-size: 0.85em; line-height: 1.6;
  word-break: break-word; color: var(--fg2);
}
/* Rendered markdown in file viewer */
.file-viewer-content h1,
.file-viewer-content h2,
.file-viewer-content h3 { margin: 16px 0 8px; color: var(--fg); font-family: var(--font); }
.file-viewer-content h1 { font-size: 1.4em; }
.file-viewer-content h2 { font-size: 1.2em; }
.file-viewer-content p { margin: 8px 0; }
.file-viewer-content ul, .file-viewer-content ol { padding-left: 20px; margin: 8px 0; }
.file-viewer-content code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; }
.file-viewer-content pre { background: var(--bg3); padding: 12px; border-radius: var(--radius); overflow-x: auto; }

#file-editor {
  flex: 1; display: none; resize: none; border: none; min-height: 0;
  background: var(--bg); color: var(--fg); padding: 16px 24px;
  font-family: var(--mono); font-size: 0.85em; line-height: 1.6;
  outline: none;
}
.btn-back, .btn-edit, .btn-save {
  background: none; color: var(--fg2); font-size: 0.85em; padding: 4px 8px;
  border-radius: 4px;
}
.btn-back:hover, .btn-edit:hover { background: var(--bg3); color: var(--fg); }
.btn-save { background: var(--accent); color: #fff; }
.btn-save:hover { background: var(--accent2); }
.btn-save.has-changes { box-shadow: 0 0 0 2px var(--yellow); }

/* ---- Tasks view ---- */
#view-tasks { flex: 1; display: block; overflow-y: auto; padding: 24px; }
#view-threads { flex: 1; display: block; overflow-y: auto; }
.tasks-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 900px; margin-bottom: 16px;
}
.tasks-header h2 { font-size: 1.1em; }
.tasks-workers { font-size: 0.85em; color: var(--fg3); }
.btn-new-task {
  background: var(--accent); color: #fff; padding: 8px 16px;
  border-radius: var(--radius); font-size: 0.85em; font-weight: 600;
}
.btn-new-task:hover { background: var(--accent2); }
.tasks-list { max-width: 900px; }
.tasks-empty { color: var(--fg3); padding: 40px 0; text-align: center; }

/* Shared card-panel surface (#1034 Phase 2): byte-identical bg2/radius/padding
   hoisted here; per-view deltas (max-width, hover) stay on the selectors below. */
.task-card, .job-card, .skill-card {
  background: var(--bg2); border-radius: var(--radius); padding: 16px 20px;
  margin-bottom: 10px;
}
.task-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.task-card-id { font-family: var(--mono); font-size: 0.8em; color: var(--fg3); }
.task-card-status {
  font-size: 0.82em; font-weight: 600; margin-left: 8px;
}
.task-card-status.running { color: var(--yellow); }
.task-card-status.done { color: var(--green); }
.task-card-status.failed { color: var(--red); }
.task-card-status.pending { color: var(--fg3); }
.task-card-status.cancelled { color: var(--fg3); }
.task-card-status.partial { color: var(--yellow); }
.task-card-time { font-size: 0.8em; color: var(--fg3); }
.task-card-prompt {
  font-size: 0.9em; color: var(--fg); margin-bottom: 6px;
  white-space: pre-wrap; word-break: break-word;
}
.task-card-result {
  font-size: 0.85em; color: var(--green); margin-bottom: 4px;
  white-space: pre-wrap; word-break: break-word;
}
.task-card-error {
  font-size: 0.85em; color: var(--red); margin-bottom: 4px;
}
.task-card-footer {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  font-size: 0.8em; color: var(--fg3); flex-wrap: wrap;
}
.task-card-duration { color: var(--fg3); }
.task-card-source { color: var(--fg3); }
.task-card-actions { margin-left: auto; display: flex; gap: 6px; }
.btn-cancel-task {
  background: var(--red); color: #fff; padding: 4px 10px;
  border-radius: 4px; font-size: 0.82em;
}
.btn-cancel-task:hover { opacity: 0.85; }
.btn-retry-task {
  background: var(--accent); color: #fff; padding: 4px 10px;
  border-radius: 4px; font-size: 0.82em;
}
.btn-retry-task:hover { opacity: 0.85; }
.btn-followup-task, .btn-detail-followup {
  background: var(--green, #98c379); color: #fff; padding: 4px 10px;
  border-radius: 4px; font-size: 0.82em; cursor: pointer; border: none;
}
.btn-followup-task:hover, .btn-detail-followup:hover { opacity: 0.85; }
.task-card-parent {
  font-size: 0.8em; color: var(--fg3); margin-left: 4px;
  cursor: help;
}
.parent-task-link { color: var(--accent); text-decoration: none; }
.parent-task-link:hover { text-decoration: underline; }
.btn-view-task {
  background: var(--bg3); color: var(--fg2); padding: 4px 10px;
  border-radius: 4px; font-size: 0.82em;
}
.btn-view-task:hover { color: var(--fg); }

/* Task detail modal */
.task-detail { max-height: 60vh; overflow-y: auto; }
.task-detail-row { padding: 4px 0; font-size: 0.9em; }
.task-detail-row strong { color: var(--fg2); margin-right: 8px; }
.task-detail-section { margin-top: 12px; }
.task-detail-section strong { display: block; margin-bottom: 4px; color: var(--fg2); font-size: 0.9em; }
.task-detail-section pre {
  background: var(--bg3); padding: 12px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.85em; white-space: pre-wrap;
  word-break: break-word; max-height: 200px; overflow-y: auto;
}
.task-detail-section pre.error { color: var(--red); }
.task-worklog {
  background: var(--bg); padding: 16px; border-radius: var(--radius);
  max-height: 400px; overflow-y: auto; font-size: 0.9em;
}

/* Card preview — markdown-rendered first lines of the work log (Phase 1, #552).
   Replaces the 200-char escaped raw string that .task-card-result used. */
.task-card-preview {
  background: var(--bg); border: 1px solid var(--bg3); border-radius: var(--radius);
  padding: 10px 14px; margin: 6px 0 4px; font-size: 0.88em; color: var(--fg2);
  max-height: 140px; overflow: hidden; position: relative; cursor: pointer;
  line-height: 1.45;
}
.task-card-preview:hover { border-color: var(--accent); }
.task-card-preview::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.task-card-preview > *:first-child { margin-top: 0; }
.task-card-preview > *:last-child { margin-bottom: 0; }
.task-card-preview p,
.task-card-preview ul,
.task-card-preview ol { margin: 4px 0; }
.task-card-preview h1,
.task-card-preview h2,
.task-card-preview h3,
.task-card-preview h4 { font-size: 1em; margin: 6px 0 2px; color: var(--fg); }
.task-card-preview code {
  background: var(--bg2); padding: 1px 4px; border-radius: 3px;
  font-size: 0.92em;
}

/* Reading pane — the deliverable IS the document (Phase 1, #552).
   Full-width markdown, metadata in a compact header strip, no cramped overlay. */
.modal-overlay.task-reading-overlay .modal-box-wide { padding: 16px 24px; }
.task-reading { display: flex; flex-direction: column; gap: 12px; }
.task-reading-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--bg3);
  font-size: 0.82em; color: var(--fg3);
}
.task-reading-status {
  font-weight: 600; padding: 2px 8px; border-radius: 4px;
  background: var(--bg3); color: var(--fg2); text-transform: lowercase;
}
.task-reading-status.done { background: rgba(40, 160, 80, 0.18); color: var(--green); }
.task-reading-status.failed { background: rgba(200, 60, 60, 0.18); color: var(--red); }
.task-reading-status.running { background: rgba(200, 160, 40, 0.18); color: var(--yellow); }
.task-reading-status.partial { background: rgba(200, 160, 40, 0.18); color: var(--yellow); }
.task-reading-source { font-family: var(--mono); }
.task-reading-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.btn-task-copy,
.btn-task-save {
  background: var(--bg3); color: var(--fg2); padding: 4px 10px;
  border-radius: 4px; font-size: 0.82em; border: none; cursor: pointer;
}
.btn-task-copy:hover,
.btn-task-save:hover { color: var(--fg); background: var(--bg2); }
.btn-task-save[disabled] { opacity: 0.6; cursor: progress; }
.task-reading-prompt {
  font-size: 0.85em; color: var(--fg3);
  background: var(--bg); padding: 8px 12px; border-radius: var(--radius);
}
.task-reading-prompt summary { cursor: pointer; color: var(--fg2); }
.task-reading-prompt pre {
  margin-top: 8px; font-family: var(--mono); font-size: 0.92em;
  white-space: pre-wrap; word-break: break-word; color: var(--fg2);
}
.task-reading-error {
  background: rgba(200, 60, 60, 0.1); border: 1px solid rgba(200, 60, 60, 0.3);
  border-radius: var(--radius); padding: 10px 14px; font-size: 0.88em;
}
.task-reading-error pre {
  margin-top: 6px; white-space: pre-wrap; word-break: break-word;
  color: var(--red); font-family: var(--mono); font-size: 0.92em;
}
.task-reading-doc {
  font-size: 0.95em; line-height: 1.6; color: var(--fg);
  max-height: 70vh; overflow-y: auto; padding-right: 8px;
}
.task-reading-doc h1 { font-size: 1.3em; margin: 16px 0 10px; }
.task-reading-doc h2 { font-size: 1.15em; margin: 14px 0 8px; }
.task-reading-doc h3 { font-size: 1.02em; margin: 12px 0 6px; }
.task-reading-doc p,
.task-reading-doc ul,
.task-reading-doc ol { margin: 8px 0; }
.task-reading-doc code {
  background: var(--bg3); padding: 1px 5px; border-radius: 3px;
  font-size: 0.92em;
}
.task-reading-doc pre {
  background: var(--bg); border: 1px solid var(--bg3);
  padding: 12px; border-radius: var(--radius); overflow-x: auto;
}
.task-reading-empty { color: var(--fg3); padding: 24px; text-align: center; }

/* Reading-pane title bar — inline-editable title (Phase 3, #555).
   Lives above the meta strip so the deliverable is named by the owner,
   not just by the 12-char id tail. */
.task-reading-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 6px;
}
.task-reading-title-input {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid transparent;
  color: var(--fg); font-size: 1.15em; font-weight: 600;
  padding: 4px 8px; border-radius: 4px;
}
.task-reading-title-input:hover { border-color: var(--bg3); }
.task-reading-title-input:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
}
.task-reading-title-status { font-size: 0.78em; color: var(--fg3); }
.btn-task-continue-chat {
  background: var(--bg3); color: var(--fg2); padding: 4px 10px;
  border-radius: 4px; font-size: 0.82em; border: none; cursor: pointer;
}
.btn-task-continue-chat:hover { color: var(--fg); }

/* ---- Tasks dashboard sections (Phase 3, #555) ----
   Three-section split: Active (running/pending, compact rows),
   Awaiting attention (terminal, fresh, full cards),
   Archive (terminal, older, one-liners). Each is a <details> that
   collapses so the page stays scannable as the archive grows. */
.tasks-section {
  margin: 16px 0; border-top: 1px solid var(--bg3); padding-top: 8px;
}
.tasks-section:first-of-type { border-top: none; padding-top: 0; }
.tasks-section > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 6px 0; user-select: none;
  list-style: none;
}
.tasks-section > summary::-webkit-details-marker { display: none; }
.tasks-section > summary::before {
  content: "▸"; color: var(--fg3); font-size: 0.85em;
  transition: transform 0.15s ease;
}
.tasks-section[open] > summary::before { transform: rotate(90deg); }
.tasks-section-title {
  font-weight: 600; color: var(--fg); font-size: 0.95em;
}
.tasks-section-count {
  background: var(--bg3); color: var(--fg2);
  padding: 1px 8px; border-radius: 10px; font-size: 0.78em;
}
.tasks-section-subtitle { color: var(--fg3); font-size: 0.82em; }

/* Compact "active" cards skip the result/preview area since there's
   nothing to read yet. Archive cards collapse to a single line. */
.task-card-active { padding: 10px 14px; }
.task-card-archive {
  padding: 6px 12px; background: var(--bg);
  border: 1px solid var(--bg3); border-radius: var(--radius);
  margin-bottom: 4px;
}
.task-card-archive:hover { background: var(--bg2); }
.task-card-archive .task-card-title {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Card title + faint id — title is the human-readable lead, id is the
   debugging breadcrumb (Phase 3, #555). */
.task-card-title {
  font-weight: 600; color: var(--fg); font-size: 0.95em;
}
.task-card-id-faint {
  font-family: var(--mono); font-size: 0.75em; color: var(--fg3);
}
a.task-permalink { text-decoration: none; }
a.task-permalink:hover { text-decoration: underline; color: var(--fg2); }
a.btn-task-slack { text-decoration: none; display: inline-block; }

/* Threads view (#1698) — one row per conversation lane, newest first. */
.threads-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: var(--view-pad) var(--view-pad) 8px;
}
.threads-subtitle { font-size: 0.85em; color: var(--fg3); margin-top: 4px; }
.threads-filter {
  min-width: 240px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--bg3);
  background: var(--bg2); color: var(--fg); font-size: 0.9em;
}
.threads-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 var(--view-pad) 12px; }
.threads-chips .chip-count { opacity: 0.7; font-size: 0.85em; margin-left: 2px; }
.threads-list {
  padding: 0 var(--view-pad) calc(var(--view-pad) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px;
}
.threads-empty { padding: 24px; color: var(--fg3); text-align: center; }
.thread-row {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 4px;
}
.thread-row-live { border-left: 3px solid var(--green); }
.thread-row-target { outline: 2px solid var(--accent, var(--yellow)); }
.thread-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.thread-surface {
  font-family: var(--mono); font-size: 0.75em; padding: 2px 6px; border-radius: 4px;
  background: var(--bg3); color: var(--fg2); white-space: nowrap;
}
.thread-surface-whatsapp { color: var(--green); }
.thread-title { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.8em; color: var(--fg3);
}
.thread-live { color: var(--green); }
.thread-task { color: var(--fg2); text-decoration: none; font-family: var(--mono); }
.thread-task:hover { text-decoration: underline; }
.thread-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.thread-btn {
  background: var(--bg3); color: var(--fg2); padding: 3px 9px; border-radius: 4px;
  font-size: 0.95em; border: none; cursor: pointer; text-decoration: none; display: inline-block;
}
.thread-btn:hover { color: var(--fg); }

/* Follow-up indent marker — visible parent/child relationship in the list. */
.task-card-depth {
  color: var(--fg3); font-size: 0.95em; cursor: help;
}
.task-card[data-depth="1"] { margin-left: 24px; border-left: 2px solid var(--bg3); }
/* #1201: a follow-up the owner queued while the task was still running. */
.task-card-queued {
  font-size: 0.85em; color: var(--fg3); margin: 4px 0 6px;
  padding: 4px 8px; border-left: 2px dashed var(--bg3); border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card-queued em { font-style: normal; color: var(--fg2, var(--fg)); }

.task-card-prompt-compact {
  font-size: 0.85em; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 0;
}

/* ---- Issues view ---- */
#view-issues { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.issues-layout { display: flex; flex: 1; min-height: 0; }
.issues-sidebar {
  width: 340px; min-width: 280px; max-width: 400px;
  border-right: 1px solid var(--bg3); display: flex; flex-direction: column;
  flex-shrink: 0;
}
.issues-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--bg3); flex-shrink: 0;
}
.issues-header h2 { font-size: 1.1em; }
.issues-filters { padding: 12px 20px 0; flex-shrink: 0; }
.issues-search-wrap { padding: 8px 20px 12px; flex-shrink: 0; }
.issues-search {
  width: 100%; padding: 8px 12px; border-radius: var(--radius);
  border: 1px solid var(--bg3); background: var(--bg); color: var(--fg);
  font-size: 0.85em; outline: none;
}
.issues-search:focus { border-color: var(--accent); }
.issues-list { flex: 1; overflow-y: auto; padding: 0 12px 12px; }
.issues-empty, .issues-loading, .issues-error {
  color: var(--fg3); padding: 40px 0; text-align: center; font-size: 0.9em;
}
.issues-error { color: var(--red); }

.issue-item {
  padding: 12px 14px; border-radius: var(--radius); cursor: pointer;
  margin-bottom: 2px; transition: background 0.1s;
}
.issue-item:hover { background: var(--bg2); }
.issue-item.selected { background: var(--bg3); }
.issue-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.issue-item-number { font-family: var(--mono); font-size: 0.78em; color: var(--fg3); }
.issue-item-time { font-size: 0.75em; color: var(--fg3); }
.issue-item-title { font-size: 0.88em; color: var(--fg); line-height: 1.4; margin-bottom: 6px; }
.issue-item-labels { display: flex; flex-wrap: wrap; gap: 4px; }

.issue-label {
  font-size: 0.7em; padding: 1px 6px; border-radius: 10px;
  border: 1px solid; font-weight: 500; white-space: nowrap;
}

/* Issues detail panel */
.issues-detail { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.issues-detail-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--fg3); font-size: 0.9em;
}
.issue-detail-scroll { flex: 1; overflow-y: auto; padding: 24px; min-height: 0; }
.issue-detail-header h3 { font-size: 1.15em; margin-bottom: 12px; line-height: 1.4; }
.issue-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.issue-detail-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.issue-detail-date { font-size: 0.8em; color: var(--fg3); }

.issue-detail-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--bg3);
}
.btn-issue-approve {
  background: var(--green); color: #000; padding: 6px 16px;
  border-radius: var(--radius); font-size: 0.85em; font-weight: 600;
}
.btn-issue-approve:hover { opacity: 0.85; }
.btn-issue-implement {
  background: var(--accent); color: #fff; padding: 6px 16px;
  border-radius: var(--radius); font-size: 0.85em; font-weight: 600;
}
.btn-issue-implement:hover { background: var(--accent2); }
.btn-issue-block {
  background: var(--bg3); color: var(--red); padding: 6px 16px;
  border-radius: var(--radius); font-size: 0.85em; font-weight: 500;
}
.btn-issue-block:hover { background: var(--bg2); }
.btn-issue-reject {
  background: var(--bg3); color: var(--red); padding: 6px 16px;
  border-radius: var(--radius); font-size: 0.85em; font-weight: 500;
}
.btn-issue-reject:hover { background: var(--bg2); }

/* Bulk-action bar (Decisions filter) */
.issues-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 20px; flex-shrink: 0;
  border-bottom: 1px solid var(--bg3);
}
.bulk-select-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8em; color: var(--fg2); cursor: pointer;
}
.bulk-actions { display: inline-flex; gap: 6px; }
.btn-bulk-approve {
  background: var(--green); color: #000; padding: 4px 12px;
  border-radius: var(--radius); font-size: 0.8em; font-weight: 600;
}
.btn-bulk-approve:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-bulk-reject {
  background: var(--bg3); color: var(--red); padding: 4px 12px;
  border-radius: var(--radius); font-size: 0.8em; font-weight: 500;
}
.btn-bulk-reject:disabled { opacity: 0.4; cursor: not-allowed; }

/* Issue items in bulk-select mode */
.issue-item.has-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
}
.issue-item.has-checkbox .issue-item-body { flex: 1; min-width: 0; }
.issue-checkbox { margin-top: 4px; flex-shrink: 0; cursor: pointer; }
.btn-issue-github {
  background: var(--bg3); color: var(--fg2); padding: 6px 16px;
  border-radius: var(--radius); font-size: 0.85em; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-issue-github:hover { color: var(--fg); }

.issue-detail-body {
  font-size: 0.9em; line-height: 1.7; color: var(--fg2);
}
.issue-detail-body h1, .issue-detail-body h2, .issue-detail-body h3 {
  margin: 16px 0 8px; color: var(--fg);
}
.issue-detail-body h2 { font-size: 1.1em; }
.issue-detail-body h3 { font-size: 1em; }
.issue-detail-body p { margin: 8px 0; }
.issue-detail-body ul, .issue-detail-body ol { padding-left: 20px; margin: 8px 0; }
.issue-detail-body code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.issue-detail-body pre { background: var(--bg3); padding: 12px; border-radius: var(--radius); overflow-x: auto; margin: 8px 0; }
.issue-detail-body table { border-collapse: collapse; margin: 8px 0; }
.issue-detail-body th, .issue-detail-body td { border: 1px solid var(--bg3); padding: 6px 12px; font-size: 0.88em; }
.issue-detail-body th { background: var(--bg2); }

/* Issue comments */
.issue-comments-section { margin-top: 24px; }

/* Issues tab — Issues | Pull requests mode toggle + PR mode (merge from the app) */
.issues-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 0; flex-shrink: 0; }
.issues-mode-toggle { display: inline-flex; border: 1px solid var(--bg3); border-radius: 999px; overflow: hidden; }
.issues-mode-btn {
  font-family: inherit; font-size: 0.82em; color: var(--fg2); background: transparent;
  border: none; padding: 5px 14px; cursor: pointer;
}
.issues-mode-btn:hover { color: var(--fg); background: var(--bg2); }
.issues-mode-active, .issues-mode-active:hover { background: var(--accent); color: #fff; font-weight: 600; }
.prs-count { font-size: 0.78em; }
.pr-item-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-branch { font-family: var(--mono); font-size: 0.76em; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pr-diffstat { font-family: var(--mono); font-size: 0.76em; white-space: nowrap; }
.pr-add { color: var(--green); }
.pr-del { color: var(--red); }
.pr-health {
  font-size: 0.72em; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
  color: var(--fg3);
}
.pr-health-ready { color: var(--green); }
.pr-health-unstable, .pr-health-behind, .pr-health-checking { color: var(--yellow); }
.pr-health-conflict, .pr-health-blocked { color: var(--red); }
.pr-health-draft, .pr-health-closed { color: var(--fg3); }
.pr-chip { font-size: 0.74em; padding: 2px 8px; border-radius: 4px; background: var(--bg2); color: var(--fg2); white-space: nowrap; }
.pr-chip-ok { color: var(--green); }
.pr-chip-warn { color: var(--yellow); }
.pr-chip-bad { color: var(--red); }
.pr-chip-muted { color: var(--fg3); }
.pr-linked { font-size: 0.82em; color: var(--fg2); margin-top: 6px; }
.pr-linked a { color: var(--accent); }
.btn-pr-merge {
  background: var(--green); color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.85em;
}
.btn-pr-merge:hover { opacity: 0.85; }
.btn-pr-merge:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-pr-secondary {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85em;
}
.btn-pr-secondary:hover { background: var(--bg3); }
.pr-cannot { font-size: 0.85em; color: var(--red); margin-bottom: 12px; }
.pr-warnings { margin: 0 0 14px; padding-left: 18px; font-size: 0.85em; color: var(--yellow); }
.pr-warnings li { margin: 3px 0; }
.pr-warnings-modal { margin-top: 8px; }
.pr-files { margin-bottom: 16px; font-size: 0.85em; }
.pr-files summary { cursor: pointer; color: var(--fg2); display: flex; gap: 10px; align-items: center; }
.pr-file-list { list-style: none; padding: 6px 0 0 4px; margin: 0; }
.pr-file { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.pr-file-name { font-family: var(--mono); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-file-added .pr-file-name { color: var(--green); }
.pr-file-removed .pr-file-name { color: var(--red); text-decoration: line-through; }
.pr-file-gated .pr-file-name { color: var(--yellow); font-weight: 600; }
.pr-modal-title { font-weight: 600; margin: 0 0 4px; }
.pr-modal-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 0.9em; cursor: pointer; }

.issue-comments-section h4 { font-size: 0.95em; color: var(--fg2); margin-bottom: 12px; }
.issue-comment {
  background: var(--bg2); border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 8px;
}
.issue-comment-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.issue-comment-user { font-size: 0.85em; font-weight: 600; color: var(--accent); }
.issue-comment-time { font-size: 0.78em; color: var(--fg3); }
.issue-comment-body { font-size: 0.88em; line-height: 1.6; color: var(--fg2); }
.issue-comment-body p { margin: 4px 0; }
.issue-comment-body code { background: var(--bg3); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
.issue-comment-body pre { background: var(--bg3); padding: 10px; border-radius: var(--radius); overflow-x: auto; margin: 6px 0; }

/* Issues responsive */
@media (max-width: 768px) {
  .issues-layout { flex-direction: column; }
  .issues-sidebar { width: 100%; max-width: none; border-right: none; border-bottom: 1px solid var(--bg3); max-height: 45vh; }
  .issues-detail { min-height: 40vh; }
}

/* ---- Schedule view ---- */
#view-schedule { flex: 1; display: block; overflow-y: auto; padding: 24px; }
.schedule-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 900px; margin-bottom: 16px;
}
.schedule-header h2 { font-size: 1.1em; color: var(--fg); }
.btn-reload {
  background: var(--bg3); color: var(--fg2); padding: 6px 14px;
  border-radius: var(--radius); font-size: 0.8em;
}
.btn-reload:hover { background: var(--accent); color: #fff; }
.job-card { max-width: 900px; }
.job-card.disabled { opacity: 0.45; }
.job-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.job-name { font-weight: 600; font-size: 0.95em; display: flex; align-items: center; gap: 8px; }
.job-schedule { font-size: 0.88em; color: var(--fg2); margin-top: 4px; }
.job-cron { font-family: var(--mono); font-size: 0.75em; color: var(--fg3); background: var(--bg3); padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.job-mode { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; }
.job-mode.async { background: rgba(107,112,132,0.2); color: var(--yellow); }
.job-mode.sync { background: rgba(107,112,132,0.2); color: var(--green); }
.job-mode.builtin { background: rgba(107,112,132,0.2); color: var(--fg3); }
.job-next-run { font-size: 0.82em; color: var(--accent); margin-top: 6px; }
.job-family { font-size: 0.8em; color: var(--fg2); margin-top: 6px; }
.job-family-tag { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; background: rgba(107,112,132,0.2); color: var(--accent); margin-right: 4px; }
.job-controls select:disabled { opacity: 0.55; cursor: not-allowed; }
.job-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 0.82em; color: var(--fg3); }
.job-meta span { display: flex; align-items: center; gap: 4px; }
.job-actions { display: flex; gap: 6px; margin-top: 10px; }
.job-actions button {
  padding: 5px 12px; border-radius: 4px; font-size: 0.78em; font-weight: 500;
}
.btn-trigger { background: var(--accent); color: #fff; }
.btn-trigger:hover { background: var(--accent2); }
.btn-trigger:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-toggle { background: var(--bg3); color: var(--fg2); }
.btn-toggle:hover { color: var(--fg); }
.btn-edit-cron { background: var(--bg3); color: var(--fg2); }
.btn-edit-cron:hover { color: var(--fg); }
.job-controls { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.job-controls label { display: flex; align-items: center; gap: 4px; font-size: 0.78em; color: var(--fg3); }
.job-controls select {
  padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
  background: var(--bg3); color: var(--fg2); border: 1px solid var(--bg3);
}
.job-controls select:focus { outline: 1px solid var(--accent); }
.job-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.job-status-dot.idle { background: var(--fg3); }
.job-status-dot.running { background: var(--yellow); animation: pulse 1s infinite; }
.job-status-dot.queued { background: var(--accent); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- Skills view ---- */
#view-skills { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.skills-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--bg3); flex-shrink: 0;
}
.skills-header h2 { font-size: 1.1em; }
.skills-header-actions { display: flex; gap: 8px; }
.btn-new-skill {
  background: var(--accent); color: #fff; padding: 6px 14px;
  border-radius: var(--radius); font-size: 0.82em; font-weight: 600;
}
.btn-new-skill:hover { background: var(--accent2); }
.skills-list { flex: 1; overflow-y: auto; padding: 16px 24px; min-height: 0; }
.skills-empty, .skills-loading, .skills-error {
  color: var(--fg3); padding: 40px 0; text-align: center;
}
.skills-error { color: var(--red); }

.skill-card {
  max-width: 900px; cursor: pointer; transition: border-color 0.15s;
  border: 1px solid transparent;
}
.skill-card:hover { border-color: var(--bg3); }
.skill-card-disabled { opacity: 0.5; }
.skill-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.skill-card-name { font-weight: 600; font-size: 0.95em; }
.skill-card-badges { display: flex; gap: 6px; }
.skill-badge {
  font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 4px; background: rgba(107,112,132,0.2); color: var(--fg3);
}
.skill-badge-cron { color: var(--accent); }
.skill-badge-manual { color: var(--fg3); }
.skill-badge-sync { color: var(--green); }
.skill-badge-async { color: var(--yellow); }
.skill-card-desc {
  font-size: 0.85em; color: var(--fg2); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skill-card-meta {
  display: flex; gap: 12px; margin-top: 8px; font-size: 0.78em; color: var(--fg3); flex-wrap: wrap;
}
.skill-card-cron {
  font-family: var(--mono); background: var(--bg3); padding: 1px 6px; border-radius: 4px;
}
.skill-card-disabled-label { color: var(--red); font-weight: 500; }

/* Skill detail */
.skill-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--bg3); flex-shrink: 0;
  gap: 8px; flex-wrap: wrap;
}
.skill-detail-nav { display: flex; align-items: center; gap: 12px; }
.skill-detail-name { font-weight: 600; font-size: 1em; }
.skill-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.skill-detail-actions button {
  padding: 5px 12px; border-radius: 4px; font-size: 0.82em;
}
.btn-skill-trigger { background: var(--accent); color: #fff; }
.btn-skill-trigger:hover { background: var(--accent2); }
.btn-skill-toggle { background: var(--bg3); color: var(--fg2); }
.btn-skill-toggle:hover { color: var(--fg); }
.btn-skill-delete { background: none; color: var(--red); font-size: 0.82em; }
.btn-skill-delete:hover { background: rgba(248,113,113,0.1); }
.skill-detail-meta {
  display: flex; gap: 12px; padding: 10px 24px; font-size: 0.82em; color: var(--fg3);
  border-bottom: 1px solid var(--bg3); flex-shrink: 0; align-items: center; flex-wrap: wrap;
}
.skill-detail-meta code {
  font-family: var(--mono); font-size: 0.9em; background: var(--bg3);
  padding: 1px 6px; border-radius: 4px;
}
.skill-detail-content {
  flex: 1; overflow-y: auto; padding: 20px 24px; min-height: 0;
  font-size: 0.9em; line-height: 1.6; color: var(--fg2); max-width: 900px;
}
.skill-detail-content h1, .skill-detail-content h2, .skill-detail-content h3 {
  margin: 16px 0 8px; color: var(--fg);
}
.skill-detail-content h1 { font-size: 1.3em; }
.skill-detail-content h2 { font-size: 1.15em; }
.skill-detail-content p { margin: 6px 0; }
.skill-detail-content ul, .skill-detail-content ol { padding-left: 20px; margin: 6px 0; }
.skill-detail-content li { margin: 4px 0; }
.skill-detail-content code {
  background: var(--bg3); padding: 2px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.88em;
}
.skill-detail-content pre {
  background: var(--bg3); padding: 12px; border-radius: var(--radius);
  overflow-x: auto; font-family: var(--mono); font-size: 0.85em;
}
#skill-editor {
  display: none; flex: 1; resize: none; border: none;
  background: var(--bg); color: var(--fg); padding: 20px 24px;
  font-family: var(--mono); font-size: 0.85em; line-height: 1.6;
  outline: none; min-height: 0;
}
.skill-form-label {
  display: block; font-size: 0.82em; color: var(--fg2); margin-bottom: 4px; margin-top: 12px;
}
.skill-form-label:first-of-type { margin-top: 0; }

/* ---- Status view ---- */
#view-status { flex: 1; display: block; overflow-y: auto; padding: 24px; }
.status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; max-width: 900px;
}
.status-card {
  background: var(--bg2); border-radius: var(--radius); padding: 20px;
}
.status-card h3 { font-size: 0.85em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.status-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9em; }
.status-row .label { color: var(--fg2); }
.status-row .value { color: var(--fg); font-family: var(--mono); font-size: 0.85em; }
.task-item {
  background: var(--bg3); border-radius: var(--radius); padding: 12px; margin-bottom: 8px;
}
.task-item .task-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.task-item .task-id { font-family: var(--mono); font-size: 0.8em; color: var(--fg3); }
.task-item .task-status { font-size: 0.8em; font-weight: 600; }
.task-item .task-status.running { color: var(--yellow); }
.task-item .task-status.done { color: var(--green); }
.task-item .task-status.failed { color: var(--red); }
.task-item .task-status.partial { color: var(--yellow); }
.task-item .task-prompt { font-size: 0.85em; color: var(--fg2); margin-top: 4px; }

/* ---- Terminal view ---- */
#view-terminal { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.terminal-iframe {
  flex: 1; width: 100%; border: none; background: #0f1117;
  display: none; min-height: 0;
}
.terminal-status {
  display: none; flex: 1; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.terminal-status-content { max-width: 400px; }
.terminal-status-content svg { color: var(--fg3); margin-bottom: 16px; }
.terminal-status-content h3 { margin-bottom: 8px; font-size: 1.1em; }
.terminal-status-content p { color: var(--fg2); font-size: 0.9em; margin-bottom: 12px; }
.terminal-status-content code {
  display: inline-block; background: var(--bg3); padding: 8px 16px;
  border-radius: var(--radius); font-family: var(--mono); font-size: 0.85em;
  color: var(--green);
}
.terminal-hint { font-size: 0.82em !important; color: var(--fg3) !important; margin-top: 16px !important; }
.terminal-spinner {
  width: 32px; height: 32px; border: 3px solid var(--bg3);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Activity view ---- */
#view-activity { flex: 1; display: block; overflow-y: auto; padding: 24px; }
.activity-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 900px; margin-bottom: 16px;
}
.activity-header h2 { font-size: 1.1em; }
.sse-indicator { font-size: 0.82em; color: var(--fg3); }
.activity-feed { max-width: 900px; }
.activity-empty { color: var(--fg3); padding: 40px 0; text-align: center; }
.activity-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--bg3); font-size: 0.88em;
}
.activity-row:hover { background: var(--bg2); }
.activity-time { font-family: var(--mono); font-size: 0.82em; color: var(--fg3); min-width: 70px; }
.activity-icon { font-size: 1em; min-width: 24px; text-align: center; }
.activity-source { font-size: 0.82em; font-weight: 600; min-width: 80px; }
.activity-desc { color: var(--fg2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Filter chips ---- */
.filter-chips {
  display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; max-width: 900px;
}
.chip {
  padding: 5px 14px; border-radius: 20px; font-size: 0.82em;
  background: var(--bg3); color: var(--fg2); text-transform: capitalize;
}
.chip:hover { color: var(--fg); }
.chip.active { background: var(--accent); color: #fff; }

/* ---- Modal ---- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 200; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--bg2); border-radius: 12px; padding: 24px; width: 100%;
  max-width: 500px; margin: 20px; max-height: 85vh; overflow-y: auto;
}
.modal-box-wide {
  max-width: min(900px, 80vw);
  max-height: 92vh;
  padding: 20px 28px;
}
.modal-box h3 { margin-bottom: 16px; font-size: 1em; }
.modal-box input {
  width: 100%; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--bg3); background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 0.95em; outline: none; margin-bottom: 12px;
}
.modal-box input:focus { border-color: var(--accent); }
.modal-box .hint { font-size: 0.78em; color: var(--fg3); margin-bottom: 16px; }
/* Footers can carry more than Cancel/Save (the Reader's capture modal adds
   "Save to papers/", a Model/Effort picker and "Full Capture"). Without
   wrapping, that row overflows a `justify-content: flex-end` line to the LEFT
   and clips the Cancel button off the modal edge; without `align-items:center`
   the buttons stretch to the height of the two-row picker. Wrap, centre, and
   keep each button at its natural width so labels never break mid-word. */
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  align-items: center; flex-wrap: wrap; margin-top: 16px;
}
.modal-actions button {
  padding: 8px 16px; border-radius: var(--radius); font-size: 0.85em;
  white-space: nowrap; flex: 0 0 auto;
}
.modal-actions .run-picker-wrap { display: inline-flex; flex: 0 0 auto; }
.btn-modal-cancel { background: var(--bg3); color: var(--fg2); }
.btn-modal-save { background: var(--accent); color: #fff; }
.btn-modal-save:hover { background: var(--accent2); }
.modal-textarea {
  width: 100%; resize: vertical; border: 1px solid var(--bg3); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); padding: 12px; font-size: 0.95em;
  outline: none; min-height: 80px; font-family: var(--font);
}
/* The Reader's capture preview (views/reader.js). Height lives here rather
   than inline so the phone breakpoint below can shorten it. */
.reader-capture-preview { min-height: 400px; max-height: 60vh; }
/* Phone widths (#1765). The capture modal's footer carries five controls —
   Cancel, Copy, Quick save, the Model/Effort picker, Full Capture. At 375px
   the wide box is min(900px, 80vw) = 300px with 28px side padding, i.e. a
   244px row: the picker alone is wider than that, and a `flex: 0 0 auto`
   item that cannot fit a `justify-content: flex-end` row overflows it to the
   LEFT and clips off the box. The 400px preview then pushed the whole footer
   below the fold of a 667px screen, and every control was 20–32px tall.
   Below 640px (the documented breakpoint set is 640 / 900): the box takes
   the screen, footer buttons share rows at touch height, the picker gets a
   full-width row with its two selects splitting it, and the preview shrinks
   so the footer is on screen without scrolling. */
@media (max-width: 640px) {
  /* dvh, not vh (review on #1767): the overlay is `fixed; inset: 0` — the
     VISIBLE area — while `vh` is the large viewport with iOS Safari's
     toolbars retracted, which never happens here because #app is
     `100dvh; overflow: hidden` and the page never scrolls. A `vh` cap makes
     the box ~80–110px taller than the overlay on an iPhone, centred, so the
     title and most of the footer are cut off and nothing can scroll them
     into view. Same dvh-first + vh-fallback convention as the file's top. */
  .modal-box, .modal-box-wide {
    max-width: none; margin: 12px; padding: 16px;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  }
  .modal-actions { justify-content: stretch; }
  /* `white-space: normal`: the 301px "Quick save to papers/ (no privacy
     review)" label wraps onto two lines instead of forcing the row wider
     than the box. */
  .modal-actions button { flex: 1 1 auto; min-height: var(--touch); padding: 8px 12px; white-space: normal; }
  .modal-actions .run-picker-wrap { flex: 1 1 100%; }
  .modal-actions .run-picker { display: flex; width: 100%; gap: 8px; flex-wrap: nowrap; }
  .modal-actions .run-picker-field { flex: 1 1 0; min-width: 0; }
  /* `.run-picker-compact .run-picker-select` (11px, 2px padding) is declared
     later in the file at (0,2,0); the extra `.run-picker` here makes this
     (0,3,0), so the phone size wins regardless of source order. */
  .modal-actions .run-picker .run-picker-select {
    flex: 1 1 0; min-width: 0; min-height: var(--touch); font-size: 14px; padding: 6px 8px;
  }
  .reader-capture-preview { min-height: 160px; max-height: 40vh; max-height: 40dvh; }
}
.modal-textarea:focus { border-color: var(--accent); }

/* ---- Search overlay ---- */
.search-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 300; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
}
.search-box {
  background: var(--bg2); border-radius: 12px; width: 100%;
  max-width: 560px; margin: 0 20px; box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  overflow: hidden;
}
.search-input {
  width: 100%; padding: 16px 20px; border: none; background: transparent;
  color: var(--fg); font-size: 1.05em; outline: none;
  border-bottom: 1px solid var(--bg3);
}
.search-results {
  max-height: 400px; overflow-y: auto;
}
.search-empty { padding: 24px; text-align: center; color: var(--fg3); font-size: 0.9em; }
.search-group { padding: 8px 0; }
.search-group-title {
  padding: 4px 20px; font-size: 0.75em; text-transform: uppercase;
  color: var(--fg3); letter-spacing: 0.04em; font-weight: 600;
}
.search-result {
  display: flex; flex-direction: column; padding: 8px 20px; cursor: pointer; gap: 2px;
}
.search-result:hover { background: var(--bg3); }
.search-result-header { display: flex; align-items: center; gap: 8px; }
.search-result-title { font-weight: 600; color: var(--fg); }
.search-result-type {
  font-size: 0.7em; padding: 1px 6px; border-radius: 4px;
  background: var(--bg3); color: var(--fg2); text-transform: uppercase; letter-spacing: 0.05em;
}
.search-result-path { font-size: 0.85em; color: var(--accent); }
.search-result-description { font-size: 0.82em; color: var(--fg2); }
.search-result-preview { font-size: 0.82em; color: var(--fg3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result mark { background: var(--accent); color: var(--bg); padding: 0 2px; border-radius: 2px; }
.search-hint {
  padding: 8px 20px; font-size: 0.75em; color: var(--fg3); text-align: right;
  border-top: 1px solid var(--bg3);
}
.search-filters {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 20px; border-bottom: 1px solid var(--bg3);
}
.search-filter-group { display: flex; flex-wrap: wrap; gap: 4px; }
.search-chip {
  font-size: 0.72em; padding: 3px 10px; border-radius: 999px;
  background: var(--bg3); color: var(--fg2); cursor: pointer;
  border: 1px solid transparent; line-height: 1.6; white-space: nowrap;
}
.search-chip:hover { color: var(--fg); }
.search-chip.active { background: var(--accent); color: var(--bg); font-weight: 600; }
.search-result-date { margin-left: auto; font-size: 0.72em; color: var(--fg3); white-space: nowrap; }

/* ---- Toast notifications ---- */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  padding: 12px 20px; border-radius: var(--radius);
  font-size: 0.9em; pointer-events: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-info { background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); }
.toast-success { background: #065f46; color: var(--green); border: 1px solid var(--green); }
.toast-error { background: #7f1d1d; color: var(--red); border: 1px solid var(--red); }
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action {
  background: rgba(255, 255, 255, 0.15); color: inherit;
  border: 1px solid currentColor; border-radius: 6px;
  padding: 4px 10px; font-size: 0.85em; font-weight: 600;
  cursor: pointer;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.25); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; --view-pad: 14px; }
  #app, #app.active { flex-direction: column; }
  .sidebar { display: none; }
  /* The drawer is now the long tail, not the only way to navigate — so it gets
     the whole screen height and real touch targets instead of a 35vh scroller
     with 28px rows (#1007). Slides in rather than appearing. */
  .sidebar.open {
    display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw);
    z-index: 100; padding-top: env(safe-area-inset-top);
    animation: drawer-in 0.18s ease-out;
  }
  .sidebar-nav { max-height: none; flex-shrink: 1; overflow-y: auto; }
  /* Was `padding: 7px 12px; font-size: 0.85em` — i.e. mobile SHRANK the most
     tapped control on the device to ~28px. Now the largest it has ever been. */
  .sidebar-nav .nav-item { padding: 11px 12px; font-size: 0.95em; min-height: var(--touch); }
  .sidebar-nav .nav-item svg { width: 19px; height: 19px; }
  .main { min-height: 0; }
  .mobile-header {
    display: flex !important; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--bg3); align-items: center; gap: 12px; flex-shrink: 0;
  }
  .mobile-header button { background: none; color: var(--fg); font-size: 1.3em; padding: 8px;
    min-width: var(--touch); min-height: var(--touch); }
  .mobile-overlay { display: none; }
  .mobile-overlay.active { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
  .chat-input-area { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-messages { padding: 16px; }
}
.mobile-header { display: none; }
.mobile-overlay { display: none; }

/* ---- Voice view ---- */
#view-voice { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.voice-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.voice-unsupported { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--fg3); text-align: center; padding: 32px; }

.voice-response {
  flex: 1; overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.voice-welcome { text-align: center; color: var(--fg3); margin: auto; }
.voice-welcome h2 { margin: 0 0 8px; color: var(--fg); }
.voice-welcome p { margin: 0; }

.voice-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 12px;
  line-height: 1.5; word-break: break-word;
}
.voice-bubble p { margin: 0; }
.voice-bubble p + p { margin-top: 8px; }
.voice-user { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 12px 12px 4px 12px; }
.voice-assistant { align-self: flex-start; background: var(--bg3); color: var(--fg); border-radius: 12px 12px 12px 4px; }
.voice-assistant.streaming { opacity: 0.85; }

.voice-controls {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 24px 24px; border-top: 1px solid var(--bg3);
}
.voice-status {
  font-size: 0.85em; color: var(--fg3); min-height: 1.2em;
}
.voice-engine {
  font-size: 0.7em; color: var(--fg3); opacity: 0.7;
  letter-spacing: 0.04em; text-transform: uppercase;
  min-height: 0.9em;
}
.voice-engine[data-engine="browser-speech"] { color: #f59e0b; opacity: 0.9; }
.voice-engine[data-engine="blocked"] { color: #e53935; opacity: 1; cursor: pointer; }

/* Prominent fallback banner — surfaces silent /tts fallback (issue #356).
   Amber pill, sits directly above the mic so it can't be missed. */
.voice-fallback-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 999px;
  background: #78350f; color: #fde68a;
  border: 1px solid #f59e0b;
  font-size: 0.85em; font-weight: 500;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.voice-fallback-banner[hidden] { display: none; }
.voice-fallback-banner-text { flex: 1; }
.voice-fallback-retry {
  background: #f59e0b; color: #1c1917; border: none;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.85em; font-weight: 600; cursor: pointer;
}
.voice-fallback-retry:hover { background: #fbbf24; }
[data-theme="light"] .voice-fallback-banner {
  background: #fef3c7; color: #78350f; border-color: #f59e0b;
}
.voice-transcript {
  font-size: 1em; color: var(--fg2); min-height: 1.4em;
  text-align: center; max-width: 80%; word-break: break-word;
}

.voice-mic-btn {
  --amplitude: 0;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, box-shadow 80ms ease-out, transform 80ms ease-out;
  position: relative;
}
/* Amplitude-driven activity orb — a soft glow whose radius and intensity
   track the mic input level. Layered behind the listening/speaking pulse
   so both signals coexist: pulse = "I'm in this state", glow = "I hear you
   right now at this level". */
.voice-mic-btn.listening,
.voice-mic-btn.speaking {
  box-shadow:
    0 0 calc(8px + var(--amplitude) * 28px) calc(var(--amplitude) * 6px) rgba(108, 138, 255, calc(0.25 + var(--amplitude) * 0.55));
  transform: scale(calc(1 + var(--amplitude) * 0.08));
}
@media (prefers-reduced-motion: reduce) {
  .voice-mic-btn { transition: none; transform: none !important; }
}
.voice-mic-btn:hover { background: var(--accent-hover, var(--accent)); filter: brightness(1.15); }
.voice-mic-btn.listening {
  background: #e53935;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
.voice-mic-btn.waiting {
  background: var(--fg3); cursor: default;
  animation: voice-spin 1.5s linear infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.5); }
  50% { box-shadow: 0 0 0 16px rgba(229, 57, 53, 0); }
}
@keyframes voice-spin {
  0% { box-shadow: 0 0 0 0 rgba(150,150,150,0.3); }
  50% { box-shadow: 0 0 0 10px rgba(150,150,150,0); }
  100% { box-shadow: 0 0 0 0 rgba(150,150,150,0.3); }
}

.voice-toggles {
  display: flex; gap: 16px; align-items: center;
}
.voice-toggle-label {
  font-size: 0.8em; color: var(--fg3); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  user-select: none;
}
.voice-toggle-label input { cursor: pointer; }
.voice-toggle-icon { flex-shrink: 0; }
.voice-welcome-hint { font-size: 0.85em; margin-top: 8px; opacity: 0.7; }

.voice-silence-slider {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; font-size: 0.8em; color: var(--fg3);
  width: 100%; max-width: 280px;
}
.voice-silence-slider label { cursor: default; }
.voice-silence-slider input[type="range"] { width: 100%; }
.voice-mic-btn.active { outline: 3px solid rgba(76, 175, 80, 0.5); outline-offset: 2px; }

.voice-mic-btn.speaking {
  background: var(--accent);
  animation: voice-speak 1s ease-in-out infinite;
}
@keyframes voice-speak {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}

/* Voice conversation header — shows which conversation voice is targeting
   so user can verify scope before speaking (issue #361). */
.voice-conv-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--bg3);
  font-size: 0.85em; color: var(--fg2);
}
.voice-conv-prefix { color: var(--fg3); font-weight: 500; }
.voice-conv-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg);
}
.voice-conv-new {
  background: transparent; color: var(--fg2); border: 1px solid var(--bg3);
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-size: 0.85em;
}
.voice-conv-new:hover { background: var(--bg3); color: var(--fg); }

/* Voice model + effort dropdowns mirror chat's selectors. */
.voice-model-row { display: flex; gap: 8px; align-items: center; }
.voice-select {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: 6px; padding: 4px 8px; font-size: 0.85em;
  cursor: pointer;
}
.voice-select:hover { border-color: var(--accent); }

/* ---- Soul view ---- */
#view-soul { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.soul-header {
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  border-bottom: 1px solid var(--bg3); flex-shrink: 0;
}
.soul-header h2 { margin: 0; font-size: 1.2em; }
.soul-subtitle { margin: 0; color: var(--fg3); font-size: 0.85em; }
.soul-actions { margin-left: auto; display: flex; gap: 6px; }
.btn-cancel { background: none; color: var(--fg2); font-size: 0.85em; padding: 4px 8px; border-radius: 4px; }
.btn-cancel:hover { background: var(--bg3); color: var(--fg); }
.soul-content {
  flex: 1; overflow-y: auto; padding: 24px;
  font-size: 0.9em; line-height: 1.7; color: var(--fg2);
}
.soul-content h1, .soul-content h2, .soul-content h3 { margin: 16px 0 8px; color: var(--fg); font-family: var(--font); }
.soul-content h1 { font-size: 1.4em; }
.soul-content h2 { font-size: 1.2em; }
.soul-content p { margin: 8px 0; }
.soul-content ul, .soul-content ol { padding-left: 20px; margin: 8px 0; }
.soul-content code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; }
.soul-content pre { background: var(--bg3); padding: 12px; border-radius: var(--radius); overflow-x: auto; }
#soul-editor {
  flex: 1; display: none; resize: none; border: none; min-height: 0;
  background: var(--bg); color: var(--fg); padding: 16px 24px;
  font-family: var(--mono); font-size: 0.85em; line-height: 1.6;
  outline: none;
}
.soul-notice {
  padding: 8px 24px; background: var(--bg2); color: var(--yellow);
  font-size: 0.8em; border-top: 1px solid var(--bg3);
}

/* ---- Config view ---- */
#view-config { flex: 1; display: block; overflow-y: auto; padding: 24px; }
.config-container { max-width: 900px; }
.config-header { margin-bottom: 20px; }
.config-header h2 { margin: 0; font-size: 1.2em; }
.config-subtitle { color: var(--fg3); font-size: 0.85em; margin: 4px 0 12px; }
.config-actions { display: flex; gap: 8px; }
.config-actions .btn-save {
  padding: 6px 20px; border: none; border-radius: 6px;
  background: var(--bg3); color: var(--fg3); cursor: not-allowed;
  font-size: 0.85em; font-weight: 600; transition: all 0.15s;
}
.config-actions .btn-save.has-changes {
  background: var(--accent); color: #000; cursor: pointer;
}
.config-actions .btn-save:disabled { opacity: 0.5; }
.config-actions .btn-reset {
  padding: 6px 16px; border: 1px solid var(--bg3); border-radius: 6px;
  background: transparent; color: var(--fg2); cursor: pointer; font-size: 0.85em;
}
.config-actions .btn-reset:hover { border-color: var(--fg3); color: var(--fg); }
.config-group-desc { color: var(--fg3); font-size: 0.8em; margin: -4px 0 12px; }
.config-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--bg3);
}
.config-row:last-child { border-bottom: none; }
.config-label { color: var(--fg2); font-size: 0.9em; }
.config-input-wrap { display: flex; align-items: center; gap: 6px; }
.config-select, .config-number {
  background: var(--bg); border: 1px solid var(--bg3); border-radius: 6px;
  color: var(--fg); padding: 4px 8px; font-size: 0.85em; font-family: var(--mono);
}
.config-select { min-width: 100px; }
.config-number { width: 80px; text-align: right; }
.config-select:focus, .config-number:focus { border-color: var(--accent); outline: none; }
.config-unit { color: var(--fg3); font-size: 0.8em; min-width: 24px; }
.config-modified { color: var(--yellow); font-weight: bold; font-size: 0.9em; }

/* ---- Channels view ---- */
#view-agents { flex: 1; display: block; overflow-y: auto; padding: 24px; }
.channels-container { max-width: 1100px; }
.channels-header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;
}
.channels-header h2 { margin: 0; font-size: 1.2em; }
.btn-new-channel {
  padding: 6px 16px; border: 1px solid var(--accent); border-radius: 6px;
  background: transparent; color: var(--accent); cursor: pointer; font-size: 0.85em; font-weight: 600;
  white-space: nowrap;
}
.btn-new-channel:hover { background: var(--accent); color: #000; }

.channels-layout { display: flex; gap: 20px; min-height: 400px; }

/* Channel list (left panel) */
.channels-list {
  width: 200px; flex-shrink: 0;
  background: var(--bg2); border-radius: 8px; padding: 8px;
}
.channel-item {
  padding: 10px 12px; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.1s;
}
.channel-item:hover { background: var(--bg3); }
.channel-item.active { background: var(--bg3); }
.channel-name { font-weight: 600; font-size: 0.9em; }
.channel-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.channel-badge {
  font-size: 0.7em; padding: 1px 6px; border-radius: 4px;
  background: var(--bg); color: var(--fg3);
}
.badge-model { color: var(--accent); border: 1px solid var(--accent); background: transparent; }
.badge-effort { color: var(--yellow); border: 1px solid var(--yellow); background: transparent; }
.channel-empty { padding: 16px; color: var(--fg3); font-size: 0.85em; text-align: center; }

/* Channel detail (right panel) */
.channels-detail {
  flex: 1; background: var(--bg2); border-radius: 8px; padding: 20px;
  overflow-y: auto;
}
.channel-empty-detail { color: var(--fg3); font-size: 0.9em; padding: 40px 20px; text-align: center; }
.channel-detail-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--bg3);
}
.channel-detail-header h3 { margin: 0; font-size: 1.1em; }
.channel-detail-actions { display: flex; gap: 8px; }
.channel-detail-actions .btn-edit,
.channel-detail-actions .btn-save,
.channel-detail-actions .btn-cancel,
.channel-detail-actions .btn-delete {
  padding: 5px 14px; border-radius: 6px; font-size: 0.8em; cursor: pointer; border: none;
}
.channel-detail-actions .btn-edit { background: var(--accent); color: #fff; }
.channel-detail-actions .btn-save { background: var(--green); color: #fff; }
.channel-detail-actions .btn-cancel { background: var(--bg3); color: var(--fg2); }
.channel-detail-actions .btn-delete { background: transparent; color: var(--red); border: 1px solid var(--red); }
.channel-detail-actions .btn-delete:hover { background: var(--red); color: #fff; }

.channel-section { margin-bottom: 20px; }
.channel-section h4 { margin: 0 0 8px; font-size: 0.85em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.5px; }
.channel-config-grid { display: flex; flex-direction: column; }
.channel-value { color: var(--fg); font-family: var(--mono); font-size: 0.85em; }
.channel-muted { color: var(--fg3); font-size: 0.85em; margin: 4px 0; }

/* Match rules */
.channel-matches { display: flex; flex-direction: column; gap: 4px; }
.channel-match-rule code {
  display: block; padding: 6px 10px; background: var(--bg); border-radius: 4px;
  font-size: 0.8em; color: var(--fg2); word-break: break-all;
}

/* Prompt preview */
.channel-prompt-preview {
  background: var(--bg); border-radius: 6px; padding: 16px;
  font-size: 0.85em; line-height: 1.6; overflow-y: auto; max-height: 500px;
}
.channel-prompt-preview h1, .channel-prompt-preview h2, .channel-prompt-preview h3 {
  margin-top: 12px; margin-bottom: 6px;
}
.channel-prompt-preview h1:first-child, .channel-prompt-preview h2:first-child { margin-top: 0; }

/* Edit form */
.channel-match-editor, .channel-prompt-editor {
  width: 100%; box-sizing: border-box; border: 1px solid var(--bg3); border-radius: 6px;
  background: var(--bg); color: var(--fg); padding: 12px; font-family: var(--mono); font-size: 0.85em;
  resize: vertical;
}
.channel-match-editor { min-height: 80px; }
.channel-prompt-editor { min-height: 300px; line-height: 1.5; }
.channel-match-editor:focus, .channel-prompt-editor:focus { border-color: var(--accent); outline: none; }
.channel-notice {
  margin-top: 12px; padding: 8px 12px; border-radius: 6px;
  background: var(--bg); color: var(--fg3); font-size: 0.8em;
  border-left: 3px solid var(--accent);
}

/* Sync button */
.channel-detail-actions .btn-sync {
  padding: 5px 14px; border-radius: 6px; font-size: 0.8em; cursor: pointer;
  border: 1px solid var(--fg3); background: transparent; color: var(--fg2);
}
.channel-detail-actions .btn-sync:hover { background: var(--bg3); }
.channel-detail-actions .btn-sync:disabled { opacity: 0.5; cursor: wait; }

/* Memory reference health indicators */
.channel-ref-status { display: flex; flex-direction: column; gap: 4px; }
.channel-ref {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 4px; font-size: 0.85em;
}
.channel-ref code { font-size: 0.85em; color: var(--fg2); }
.ref-icon { font-size: 0.9em; width: 16px; text-align: center; flex-shrink: 0; }
.ref-ok .ref-icon { color: var(--green); }
.ref-broken .ref-icon { color: var(--red); }
.ref-broken code { color: var(--red); }

/* Loading overlay */
.channels-loading { opacity: 0.6; pointer-events: none; }

/* Header actions (e.g. + New Agent) */
.channels-header-actions { display: flex; gap: 8px; align-items: center; }

/* Inline AGENT.md editor (full file edit) */
#ag-editor {
  width: 100%; box-sizing: border-box; border: 1px solid var(--bg3); border-radius: 6px;
  background: var(--bg); color: var(--fg); padding: 12px;
  font-family: var(--mono); font-size: 0.85em; line-height: 1.5;
  min-height: 360px; resize: vertical;
}
#ag-editor:focus { border-color: var(--accent); outline: none; }

/* Responsive */
@media (max-width: 768px) {
  .channels-layout { flex-direction: column; }
  .channels-list { width: 100%; }
}

/* ---- Chat input controls (model/effort selectors) ---- */
.chat-input-controls {
  max-width: 720px; margin: 0 auto 6px; display: flex; gap: 8px;
}
.chat-select {
  background: var(--bg2); color: var(--fg3); border: 1px solid var(--bg3);
  padding: 4px 8px; border-radius: var(--radius); font-size: 0.75em;
  outline: none; cursor: pointer;
}
.chat-select:focus { border-color: var(--accent); }
.chat-select:hover { color: var(--fg2); }
.chat-model-lock {
  font-size: 0.72em; color: var(--fg3); align-self: center;
  padding: 2px 6px; border-radius: var(--radius); background: transparent;
  white-space: nowrap;
}
.chat-model-lock:empty { display: none; }
/* "Switches live" hint on Main — a quiet accent dot signals the dropdown is hot. */
.chat-model-lock.live { color: var(--accent); }
.chat-model-lock.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 5px; border-radius: 50%; background: var(--accent);
  vertical-align: middle;
}
.chat-fork-btn {
  font-size: 0.72em; padding: 4px 10px; border-radius: var(--radius);
  background: transparent; color: var(--fg2); border: 1px solid var(--bg3);
  cursor: pointer; align-self: center; white-space: nowrap;
}
.chat-fork-btn:hover { color: var(--fg); border-color: var(--accent); }
.chat-select:disabled { opacity: 0.55; cursor: not-allowed; }


/* ================================================================
   Light theme
   ================================================================ */
[data-theme="light"] {
  /* Light palette — ported verbatim from ahermann.org (#1181, "A2 Site-true").
     --border tracks --bg3 from :root, so it follows this theme automatically. */
  --bg: #fbfbfa; --bg2: #ffffff; --bg3: #e6e6e2;
  --fg: #1a1d24; --fg2: #5d6470; --fg3: #8a909c;
  --accent: #0d9488; --accent2: #0f766e;
  --accent-ink: #ffffff;
  --accent-dim: rgba(13, 148, 136, 0.10);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --green: #059669; --yellow: #d97706; --red: #dc2626;
}
[data-theme="light"] .toast-info { background: var(--bg2); color: var(--fg); border-color: var(--bg3); }
[data-theme="light"] .toast-success { background: #ecfdf5; color: var(--green); border-color: var(--green); }
[data-theme="light"] .toast-error { background: #fef2f2; color: var(--red); border-color: var(--red); }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .search-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .search-box { box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
[data-theme="light"] .ctx-menu { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
[data-theme="light"] .toast { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .config-actions .btn-save.has-changes { color: #fff; }
[data-theme="light"] .btn-issue-approve { color: #fff; }
[data-theme="light"] .terminal-iframe { background: #1a1d27; }

/* ================================================================
   Reader View
   ================================================================ */

#view-reader.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* ---- Library ---- */
.reader-library {
  flex: 1;
  min-height: 0;
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  position: relative;
}
.reader-library-header {
  margin-bottom: 20px;
}
.reader-library-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.reader-library-header h2 {
  font-size: 1.3em;
  font-weight: 700;
}
.reader-library-help {
  color: var(--fg3);
  font-size: 0.85em;
  line-height: 1.5;
  max-width: 800px;
}
.reader-library-help strong { color: var(--fg2); }
.reader-library-help .reader-paper-notes,
.reader-library-help .reader-paper-annotations {
  font-size: 0.62em;
  padding: 1px 6px;
  vertical-align: middle;
}
.reader-upload-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.reader-upload-btn:hover { background: var(--accent2); }

/* URL ingestion row (#484) — paste a URL to capture HTML/arXiv abs/PDF link */
.reader-url-row {
  display: flex; gap: 8px; align-items: center;
  margin: 12px 0 8px;
}
.reader-url-row input[type="url"],
.reader-url-row input[type="text"] {
  flex: 1; padding: 8px 12px;
  background: var(--bg2); color: var(--fg);
  border: 1px solid var(--bg3); border-radius: var(--radius);
  font-size: 0.9em;
}
.reader-url-row input[type="url"]:focus,
.reader-url-row input[type="text"]:focus {
  outline: none; border-color: var(--accent);
}
.reader-url-row button { white-space: nowrap; }

/* Smart-add resolver strip — candidates for a free-text request */
.reader-resolve-strip {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  font-size: 0.88em;
}
.reader-resolve-pending { display: flex; align-items: center; gap: 10px; color: var(--fg2); }
.reader-resolve-spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid var(--bg3); border-top-color: var(--accent);
  border-radius: 50%;
  animation: reader-resolve-spin 0.8s linear infinite;
}
@keyframes reader-resolve-spin { to { transform: rotate(360deg); } }
.reader-resolve-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  color: var(--fg2); margin-bottom: 6px;
}
.reader-resolve-dismiss {
  background: none; border: none; color: var(--fg2); cursor: pointer;
  font-size: 1.2em; line-height: 1; padding: 0 4px;
}
.reader-resolve-dismiss:hover { color: var(--fg); }
.reader-resolve-cand {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--bg3);
}
.reader-resolve-main { flex: 1; min-width: 0; }
.reader-resolve-title { font-weight: 600; color: var(--fg); }
.reader-resolve-url {
  display: inline-block; color: var(--accent); text-decoration: none;
  font-size: 0.9em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reader-resolve-url:hover { text-decoration: underline; }
.reader-resolve-why { color: var(--fg2); font-size: 0.92em; margin-top: 2px; }
.reader-resolve-note { color: var(--fg2); margin-top: 6px; font-style: italic; }
.reader-resolve-conf {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; font-size: 0.72em; font-weight: 600; text-transform: uppercase;
  background: var(--bg3); color: var(--fg2); vertical-align: middle;
}
.reader-resolve-conf.conf-high { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.reader-resolve-conf.conf-medium { background: color-mix(in srgb, #d9a441 25%, transparent); color: #b8862b; }

/* URL-typed entry viewer — rendered markdown in place of the PDF canvas */
.reader-url-article {
  max-width: 760px; margin: 0 auto; padding: 32px 40px;
  background: var(--bg); color: var(--fg);
  font-size: 1em; line-height: 1.7;
}
.reader-url-source {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bg3);
  font-size: 0.85em;
}
.reader-url-source a { color: var(--accent); text-decoration: none; }
.reader-url-source a:hover { text-decoration: underline; }
.reader-url-body h1, .reader-url-body h2, .reader-url-body h3 {
  margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3;
}
.reader-url-body p { margin: 0.9em 0; }
.reader-url-body pre {
  background: var(--bg2); padding: 12px;
  border-radius: 6px; overflow-x: auto;
}
.reader-url-body code {
  background: var(--bg2); padding: 1px 5px; border-radius: 3px;
  font-size: 0.92em;
}
.reader-url-body blockquote {
  border-left: 3px solid var(--accent);
  margin-left: 0; padding-left: 16px; color: var(--fg2);
}
/* Ingested figures (#1407). Source images are routinely wider than the 760px
   reading column (the AI Safety Atlas ships 952px webp), so they scale down
   instead of forcing the article to scroll sideways. A broken remote image
   still leaves the caption line readable underneath. */
.reader-url-body img {
  display: block; max-width: 100%; height: auto;
  margin: 1.4em auto 0.6em; border-radius: 6px;
}
.reader-url-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reader-url-hint { color: var(--fg3); font-size: 0.9em; margin-left: auto; }
.reader-edit-desk { font-size: 0.85em; }
/* Markdown highlights (#1406 follow-up): inline <mark> wraps around the
   anchored text, since rendered markdown has no page overlay layer. The
   annotated variant carries a dashed underline like the PDF marks. */
.reader-url-body mark.reader-md-highlight {
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  cursor: pointer;
  background-color: #fbbf24;
  color: #111; /* the mark is always yellow, whatever the page theme */
  opacity: 0.85;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: opacity 0.15s;
}
.reader-url-body mark.reader-md-highlight:hover { opacity: 1; }
.reader-url-body mark.reader-md-highlight--annotated {
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.55);
}
.reader-url-loading, .reader-url-error {
  text-align: center; padding: 40px; color: var(--fg2);
}
.reader-url-error { color: var(--red); }

/* List of papers — one row per paper */
.reader-library-list {
  display: flex;
  flex-direction: column;
  background: var(--bg3);
  border-radius: var(--radius);
  overflow: hidden;
  gap: 1px;
}
.reader-paper-row {
  background: var(--bg);
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: background 0.1s;
}
.reader-paper-row:hover { background: var(--bg2); }
.reader-paper-row-main { flex: 1; min-width: 0; }
.reader-paper-row-title {
  font-weight: 600;
  font-size: 1em;
  line-height: 1.35;
  color: var(--fg);
}
.reader-paper-row-subline {
  color: var(--fg2);
  font-size: 0.83em;
  margin-top: 4px;
  line-height: 1.3;
}
.reader-paper-row-meta {
  color: var(--fg3);
  font-size: 0.76em;
  margin-top: 4px;
}
/* Bookmark ("Lesezeichen", 2026-09-01): thin progress bar under a row that is
   mid-read, plus the one-tap "Continue reading" strip above the list. */
.reader-paper-progress {
  height: 3px; margin-top: 6px; max-width: 320px;
  background: var(--bg3); border-radius: 2px; overflow: hidden;
}
.reader-paper-progress span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.reader-continue {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--bg2); color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.reader-continue:hover { background: var(--bg3); }
.reader-continue-label { color: var(--accent); font-weight: 600; white-space: nowrap; font-size: 0.9em; }
.reader-continue-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-continue-pct { font-family: var(--mono); font-size: 0.8em; color: var(--fg3); }
.reader-paper-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

.reader-paper-delete {
  background: none;
  color: var(--fg3);
  font-size: 1.2em;
  padding: 2px 8px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.reader-paper-delete:hover { color: var(--red); background: var(--bg2); }

/* Reading lifecycle status — dropdown per row + filter chips (mirrors the
   Upskill programs status pattern) */
.reader-status-select {
  background: var(--bg); color: var(--fg2); border: 1px solid var(--bg3);
  border-radius: 6px; padding: 3px 6px; font-size: 0.8em; cursor: pointer;
}
.reader-status-select:hover { border-color: var(--accent); }
.reader-status-reading { border-color: var(--accent); color: var(--accent); }
.reader-status-read { border-color: var(--green, #16a34a); color: var(--green, #16a34a); font-weight: 600; }
.reader-status-archived { border-color: var(--fg3); color: var(--fg3); }
.reader-paper-done { opacity: 0.6; }
.reader-paper-done:hover { opacity: 1; }

/* Hierarchy — sub-documents render indented under their parent row */
.reader-paper-child { padding-left: calc(18px + 26px * var(--reader-depth, 1)); }
.reader-paper-child .reader-paper-row-title { font-weight: 500; font-size: 0.95em; }
.reader-paper-child-marker { color: var(--fg3); margin-right: 6px; }

/* Hierarchy nav inside the viewer (parent link + sibling/child pills) */
.reader-family-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 10px;
  background: var(--bg2); border-radius: var(--radius);
  font-size: 0.85em;
}
.reader-family-label { color: var(--fg3); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; }
.reader-family-sep { color: var(--fg3); }
.reader-family-pill {
  background: var(--bg); color: var(--fg2); border: 1px solid var(--bg3);
  border-radius: 12px; padding: 2px 10px; font-size: 0.95em;
}
.reader-family-link { cursor: pointer; }
.reader-family-link:hover { border-color: var(--accent); color: var(--fg); }
.reader-family-current { background: var(--accent); border-color: var(--accent); color: #fff; }

.reader-lib-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.reader-lib-filter {
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--bg3);
  border-radius: 14px; padding: 3px 10px; font-size: 0.82em; cursor: pointer;
}
.reader-lib-filter:hover { border-color: var(--accent); color: var(--fg); }
.reader-lib-filter-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.reader-lib-filter-count { font-size: 0.85em; opacity: 0.7; font-variant-numeric: tabular-nums; }
.reader-lib-filter-empty { color: var(--fg3); font-size: 0.9em; padding: 8px 0; }

/* Topical tag facets (#1787 Phase 1) — the "what is this reading for" axis,
   rendered under the status row. Same chip geometry as .reader-lib-filter so
   the two rows read as one control; a dashed border distinguishes the topical
   axis from the lifecycle one at a glance. */
.reader-lib-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
.reader-lib-tag {
  background: var(--bg2); color: var(--fg2); border: 1px dashed var(--bg3);
  border-radius: 14px; padding: 3px 10px; font-size: 0.82em; cursor: pointer;
}
.reader-lib-tag:hover { border-color: var(--accent); color: var(--fg); }
.reader-lib-tag-active {
  background: var(--accent); border-color: var(--accent); border-style: solid; color: #fff;
}
.reader-lib-tag-clear { border-style: solid; opacity: 0.75; }
/* Group-by-tag toggle (#1804 Phase 2). Same chip geometry as its neighbours —
   it belongs to the tag axis — but solid-bordered and pushed to the end of the
   row, because it changes what the tags DO rather than adding another one. */
.reader-lib-tag-group { border-style: solid; margin-left: auto; }

/* Section header for the grouped library (#1804). Reads as a divider rather
   than a row so it can never be mistaken for an entry: no hover, no pointer.
   The rule is --fg3, NOT --bg3: .reader-library-list is itself --bg3, so a
   --bg3 border draws nothing in either theme (review defect 5). It carries its
   own count class rather than reusing .reader-lib-filter-count, because the two
   count different populations — the facet chip counts every paper carrying the
   tag, this counts the rows the section actually draws (review defect 3). */
.reader-lib-group {
  display: flex; align-items: baseline; gap: 8px;
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--fg3);
  font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg3);
}
.reader-lib-group-name { font-weight: 600; }
.reader-lib-group-count { font-size: 0.9em; opacity: 0.7; font-variant-numeric: tabular-nums; }
/* A real tag can literally be named "untagged", so the no-tags section must be
   distinguishable from it by more than its word (review defect 4). */
.reader-lib-group-untagged .reader-lib-group-name { font-weight: 400; font-style: italic; opacity: 0.85; }

/* Suggested tag clusters (#1805 Phase 3) — a standing offer, not an alert.
   Muted panel, collapsed to one line by default, sitting between the facet row
   it feeds and the list it is about. Deliberately NOT the accent colour: this
   is a proposal the owner may ignore forever, and an accented banner over a
   reading list reads as something needing attention. */
.reader-suggest-strip {
  margin: -4px 0 12px; padding: 8px 10px;
  background: var(--bg2); border: 1px dashed var(--bg3); border-radius: var(--radius);
  font-size: 0.85em;
}
.reader-suggest-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.reader-suggest-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--fg); font-weight: 600; font-size: 1em;
}
.reader-suggest-toggle:hover { color: var(--accent); }
.reader-suggest-note { color: var(--fg3); font-size: 0.9em; }
.reader-suggest-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--bg3);
}
.reader-suggest-row:first-of-type { margin-top: 6px; }
.reader-suggest-title {
  flex: 1; min-width: 180px; color: var(--fg2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reader-suggest-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.reader-suggest-tag {
  background: var(--bg); color: var(--fg2); border: 1px dashed var(--bg3);
  border-radius: 14px; padding: 2px 10px; font-size: 0.95em; cursor: pointer;
}
.reader-suggest-tag:hover { border-color: var(--accent); border-style: solid; color: var(--fg); }
.reader-suggest-tag:disabled { opacity: 0.5; cursor: default; }
.reader-suggest-no {
  background: none; border: none; color: var(--fg3); cursor: pointer;
  font-size: 1.1em; line-height: 1; padding: 0 6px 0 0;
}
.reader-suggest-no:hover { color: var(--fg); }

/* Goals ⇄ Library linkage (#1806 Phase 4). A tag claimed by a standing
   priority gets a link back to that priority's card, either as one line under
   the facet row (filtered view) or on the section header (grouped view). Solid
   border and accent text so it reads as a LINK OUT of the Library, not as
   another tag chip to click — the two sit in adjacent rows. */
.reader-lib-goals { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: -6px 0 12px; }
.reader-lib-goals-label {
  font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3);
}
.reader-lib-goal {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 14px;
  padding: 2px 10px; font-size: 0.82em; text-decoration: none;
}
.reader-lib-goal:hover { background: var(--accent); color: #fff; }
.reader-lib-goal-status { font-size: 0.85em; opacity: 0.75; text-transform: lowercase; }
/* On a section header the type is uppercase small-caps; the link must not
   inherit that or a priority title becomes unreadable. */
.reader-lib-group .reader-lib-goal {
  text-transform: none; letter-spacing: normal; font-size: 1em; padding: 0 8px; margin-left: auto;
}

.reader-paper-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.reader-paper-tag {
  background: var(--bg2); color: var(--fg3); border: 1px solid var(--bg3);
  border-radius: 10px; padding: 1px 7px; font-size: 0.72em; line-height: 1.5;
}
.reader-paper-tag-edit {
  background: none; border: none; color: var(--fg3);
  font-size: 0.85em; cursor: pointer; padding: 0 2px; opacity: 0.55;
}
.reader-paper-tag-edit:hover { opacity: 1; color: var(--accent); }

.reader-paper-notes {
  background: var(--accent);
  color: var(--bg);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.reader-paper-notes:hover { filter: brightness(1.15); }

/* Annotation footprint on a library row (#1625) — how much of YOUR writing
   this document carries. Clicking it opens the notes page instead of the
   document, which is the whole point: re-reading your own thinking should not
   require re-opening the PDF. */
.reader-paper-annotations {
  background: var(--bg3);
  color: var(--fg2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.95em;
  font-family: var(--mono);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.reader-paper-annotations:hover { border-color: var(--accent); color: var(--fg); }

/* --- Notes page: the reader's third surface (#1625) --------------------- */
.reader-notes-page { overflow-y: auto; height: 100%; }
.reader-notes-page-inner { max-width: 860px; margin: 0 auto; padding: 20px 24px 64px; }
.reader-notes-page-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--bg3);
}
.reader-notes-page-titles { flex: 1; min-width: 220px; }
.reader-notes-page-titles h2 { margin: 0; font-size: 1.25em; line-height: 1.3; }
.reader-notes-page-subline { color: var(--fg2); font-size: 0.85em; margin-top: 4px; }
.reader-notes-page-counts { color: var(--fg3); font-size: 0.8em; margin-top: 6px; }
.reader-notes-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reader-notes-page-empty { color: var(--fg3); font-size: 0.9em; margin: 8px 0 0; }

.reader-note-section { margin-top: 28px; }
.reader-note-section > h3 {
  margin: 0 0 12px; font-size: 0.78em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg3);
  display: flex; align-items: center; gap: 8px;
}
.reader-note-count {
  font-family: var(--mono); font-size: 0.95em; letter-spacing: 0;
  background: var(--bg3); color: var(--fg2); border-radius: 8px; padding: 0 7px;
}
.reader-note-prose { font-size: 0.95em; line-height: 1.6; }
.reader-note-prose > :first-child { margin-top: 0; }
.reader-note-prose > :last-child { margin-bottom: 0; }
.reader-note-page-label {
  margin: 18px 0 8px; font-size: 0.75em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3);
}
.reader-note-page-label:first-child { margin-top: 0; }

.reader-note-hl {
  border-left: 3px solid var(--hl-color, #fbbf24);
  background: var(--bg2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px; margin-bottom: 10px; cursor: pointer;
  transition: background 0.12s;
}
.reader-note-hl:hover { background: var(--bg3); }
.reader-note-hl-text {
  margin: 0; padding: 0; border: none;
  font-size: 0.92em; line-height: 1.5; color: var(--fg);
  white-space: pre-wrap;
}
.reader-note-hl-comment {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--bg3);
  font-size: 0.88em; line-height: 1.5; color: var(--fg2);
}
.reader-note-hl-meta { margin-top: 6px; font-size: 0.75em; color: var(--fg3); font-family: var(--mono); }

.reader-note-session {
  background: var(--bg2); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.reader-note-session > summary {
  cursor: pointer; padding: 10px 14px; user-select: none;
  display: flex; flex-direction: column; gap: 3px;
}
.reader-note-session > summary:hover { background: var(--bg3); }
.reader-note-session-title { font-size: 0.92em; font-weight: 500; color: var(--fg); }
.reader-note-session-meta { font-size: 0.75em; color: var(--fg3); font-family: var(--mono); }
.reader-note-session-body { padding: 4px 14px 14px; border-top: 1px solid var(--bg3); }
.reader-note-msg { margin-top: 14px; }
.reader-note-msg-role {
  font-size: 0.7em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg3); margin-bottom: 4px;
}
.reader-note-msg-user .reader-note-msg-role { color: var(--accent); }
.reader-note-msg-body { font-size: 0.9em; line-height: 1.6; }
.reader-note-msg-body > :first-child { margin-top: 0; }
.reader-note-msg-body > :last-child { margin-bottom: 0; }
.reader-note-quote {
  border-left: 2px solid var(--fg3); padding: 2px 0 2px 10px;
  margin-bottom: 6px; color: var(--fg3); font-size: 0.85em; font-style: italic;
}

/* Jump target flash — the markdown highlight the notes page sent you to. */
.reader-md-highlight--flash { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) {
  .reader-notes-page-inner { padding: 14px 14px 48px; }
  .reader-notes-page-head { gap: 10px; }
}

.reader-paper-source {
  color: var(--fg3);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg3);
}
.reader-paper-source:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.reader-paper-abstract {
  margin-top: 10px;
  font-size: 0.83em;
  border-top: 1px solid var(--bg3);
  padding-top: 6px;
}
.reader-paper-abstract summary {
  cursor: pointer;
  color: var(--fg3);
  user-select: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.92em;
}
.reader-paper-abstract summary:hover { color: var(--accent); }
.reader-paper-abstract[open] summary { color: var(--accent); margin-bottom: 6px; }
.reader-paper-abstract-body {
  color: var(--fg2);
  line-height: 1.5;
  max-height: 280px;
  overflow-y: auto;
}

.reader-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--fg3);
  background: var(--bg2);
  border-radius: var(--radius);
  line-height: 1.6;
}

/* ---- Viewer ---- */
.reader-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ---- Toolbar ---- */
.reader-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bg3);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.reader-title {
  font-weight: 600;
  font-size: 0.85em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.reader-est-time { color: var(--fg3); font-size: 0.8em; white-space: nowrap; }
.reader-est-time:empty { display: none; }
.reader-nav, .reader-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}
.reader-page-info, .reader-zoom-level {
  font-size: 0.8em;
  color: var(--fg2);
  min-width: 50px;
  text-align: center;
}
.reader-btn {
  padding: 6px 10px;
  background: var(--bg3);
  color: var(--fg);
  border-radius: var(--radius);
  font-size: 0.8em;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.reader-btn:hover { background: var(--fg3); }
.reader-btn:disabled { opacity: 0.4; cursor: default; }
.reader-btn-accent {
  background: var(--accent);
  color: #fff;
}
.reader-btn-accent:hover { background: var(--accent2); }

/* ---- Content area ---- */
.reader-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ---- PDF container (continuous scroll) ---- */
.reader-pdf-container {
  flex: 1;
  overflow: auto;
  padding: 16px;
  position: relative;
}
.reader-pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.reader-page {
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  border-radius: 2px;
  background: #fff;
}
.reader-page canvas {
  display: block;
  border-radius: 2px;
}
.reader-page-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg3);
  font-size: 0.9em;
}
.reader-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  line-height: 1;
  opacity: 0.3;
  pointer-events: all;
  z-index: 2;
}
.reader-text-layer span {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.reader-text-layer span::selection {
  background: rgba(108, 138, 255, 0.3);
  color: transparent;
}

/* ---- Selection bar ---- */
.reader-selection-bar {
  position: absolute;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 50;
}

/* ---- Inline ask bubble (Ask ML4YOU at the selection) ---- */
.reader-ask-popover {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 300px;
  padding: 8px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 51;
}
.reader-ask-popover-quote {
  font-size: 0.75rem;
  color: var(--fg2);
  font-style: italic;
  max-height: 3.6em;
  overflow: hidden;
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}
.reader-ask-popover textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 0.85rem;
  font-family: inherit;
}
.reader-ask-popover textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.reader-ask-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* ---- Sidebar resize handle ---- */
.reader-resizer {
  flex: 0 0 6px;
  cursor: col-resize;
  background: var(--bg3);
  position: relative;
  transition: background 0.15s;
  touch-action: none;
}
.reader-resizer::before {
  /* Widen the grab target without widening the visible bar. */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -4px;
}
.reader-resizer:hover,
.reader-resizer:focus-visible,
.reader-resizer.dragging { background: var(--accent); outline: none; }
/* While dragging, kill text selection and iframe/canvas pointer capture. */
body.reader-resizing { user-select: none; cursor: col-resize; }
body.reader-resizing .reader-pdf-container { pointer-events: none; }

/* ---- Sidebar (Chat + Notes) ---- */
.reader-sidebar {
  width: 380px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-left: 1px solid var(--bg3);
}
.reader-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--bg3);
}
.reader-sidebar-tab {
  flex: 1;
  padding: 10px 16px;
  background: none;
  color: var(--fg3);
  font-size: 0.85em;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.reader-sidebar-tab:hover { color: var(--fg); }
.reader-sidebar-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.reader-tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.reader-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.9em;
  border-bottom: 1px solid var(--bg3);
}
.reader-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reader-chat-welcome {
  text-align: center;
  color: var(--fg3);
  font-size: 0.85em;
  padding: 40px 20px;
}
.reader-chat-msg {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.85em;
  line-height: 1.5;
  max-width: 95%;
  word-wrap: break-word;
}
.reader-chat-user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  white-space: pre-wrap;
}
.reader-chat-assistant {
  background: var(--bg3);
  color: var(--fg);
  align-self: flex-start;
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
}
.reader-chat-assistant p { margin: 0 0 8px; }
.reader-chat-assistant p:last-child { margin-bottom: 0; }
.reader-chat-assistant code {
  background: var(--bg);
  padding: 2px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.9em;
}
.reader-chat-assistant pre {
  background: var(--bg);
  padding: 10px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 8px 0;
}
.reader-chat-assistant pre code {
  background: none;
  padding: 0;
}
.reader-chat-assistant.streaming {
  min-height: 24px;
}

/* ---- Failed chat turn (#1355) ----
   A turn that returned no text used to render nothing at all — the question
   just sat there unanswered. A failed turn is now an explicit, retryable
   bubble, so it can never be mistaken for "still thinking". */
.reader-chat-failed {
  border: 1px solid var(--red);
  background: color-mix(in srgb, var(--red) 12%, var(--bg3));
  color: var(--fg2);
}
.reader-chat-retry {
  display: block;
  margin-top: 8px;
}

/* ---- Context-loss surfacing (#1379) ----
   The Reader chat backend is stateless per turn: only the last 10 history
   entries travel with a question, and a stopped or connection-cut reply is
   never committed. Both used to be invisible — text on screen the model had
   no memory of. A note marks where context ended; a chip marks a bubble that
   is visible but not in context. */
.reader-chat-context-note {
  align-self: center;
  text-align: center;
  color: var(--fg3);
  font-size: 0.78em;
  padding: 6px 10px;
  border-top: 1px dashed var(--bg3);
  border-bottom: 1px dashed var(--bg3);
  width: 100%;
}
.reader-chat-uncommitted {
  border: 1px dashed var(--fg3);
}
.reader-chat-ctx-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72em;
  color: var(--fg2);
  background: var(--bg);
  border: 1px solid var(--fg3);
  cursor: help;
}

/* Run picker — shared Model/Effort control (components/run-picker.js) */
.run-picker { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--fg3); }
.run-picker-field { display: inline-flex; align-items: center; gap: 4px; }
.run-picker-select {
  padding: 3px 6px; border-radius: 6px; border: 1px solid var(--bg3);
  background: var(--bg2); color: var(--fg); font-size: 12px;
}
.run-picker-select:focus { border-color: var(--accent); outline: none; }
.run-picker-compact { gap: 6px; }
.run-picker-compact .run-picker-select { padding: 2px 4px; font-size: 11px; }
.reader-chat-run { display: flex; justify-content: flex-end; padding: 2px 8px 0; }

.reader-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--bg3);
  align-items: flex-end;
}
#reader-chat-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  font-size: 0.85em;
  resize: none;
  outline: none;
  max-height: 120px;
}
#reader-chat-input:focus { border-color: var(--accent); }

/* ---- Notes panel ---- */
.reader-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.9em;
  border-bottom: 1px solid var(--bg3);
}
.reader-notes-status {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--fg3);
}
.reader-notes-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
#reader-notes-editor {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg);
  color: var(--fg);
  border: none;
  font-size: 0.85em;
  line-height: 1.6;
  resize: none;
  outline: none;
  font-family: var(--mono);
}
/* Rich (WYSIWYG) notes (2026-09-05): the vendored editor fills the pane the
   textarea used to; toolbar and content scaled to sidebar size. */
.reader-notes-header-right { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.reader-notes-status[data-kind="error"] { color: var(--red); }
.reader-notes-status[data-kind="ok"] { color: var(--green, var(--fg3)); }
.reader-notes-mode { display: inline-flex; border: 1px solid var(--bg3); border-radius: 12px; overflow: hidden; }
.reader-notes-mode-btn {
  background: none; border: none; color: var(--fg3); cursor: pointer;
  font-size: 0.7em; font-weight: 600; padding: 3px 8px; line-height: 1.4;
}
.reader-notes-mode-btn:hover { color: var(--fg); }
.reader-notes-mode-btn.active { background: var(--bg3); color: var(--fg); }
.reader-notes-rich { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.reader-notes-rich .toastui-editor-defaultUI { flex: 1; min-height: 0; border: none; border-radius: 0; }
.reader-notes-rich .toastui-editor-defaultUI .toastui-editor-toolbar { border-radius: 0; }
.reader-notes-rich .toastui-editor-defaultUI-toolbar { padding: 0 4px; }
.reader-notes-rich .toastui-editor-toolbar-group { margin-right: 0; }
.reader-notes-rich .toastui-editor-toolbar-icons { margin: 7px 2px; }
.reader-notes-rich .toastui-editor-toolbar-divider { margin: 14px 5px; }
.reader-notes-rich .toastui-editor-main { flex: 1; min-height: 0; }
.reader-notes-rich .toastui-editor-ww-container { height: 100%; }
.reader-notes-rich .toastui-editor-contents { font-size: 0.9em; line-height: 1.6; padding: 4px 2px; }
.reader-notes-rich .toastui-editor-contents h1 { font-size: 1.35em; }
.reader-notes-rich .toastui-editor-contents h2 { font-size: 1.2em; }
.reader-notes-rich .toastui-editor-contents h3 { font-size: 1.05em; }
.reader-notes-rich .toastui-editor-contents blockquote { border-left: 3px solid var(--bg3); color: var(--fg2); }
.reader-note-section-action { margin-left: 8px; vertical-align: middle; font-weight: 400; }
.reader-notes-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--bg3);
  display: flex;
  gap: 8px;
}

/* ---- Chat "Add to Notes" button ---- */
.reader-chat-add-note {
  display: block;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.reader-chat-msg:hover .reader-chat-add-note {
  opacity: 1;
}

/* ---- Responsive: portrait / mobile ---- */
@media (max-width: 768px) {
  .reader-library { padding: 16px; }
  .reader-paper-row { padding: 12px 14px; gap: 12px; }
  .reader-paper-row-title { font-size: 0.95em; }
  .reader-toolbar { gap: 8px; padding: 6px 12px; }
  .reader-title, .reader-est-time { display: none; }
  .reader-content { flex-direction: column; }
  /* Stacked layout: the sidebar spans full width, so horizontal dragging
     is meaningless — hide the handle and override the persisted inline width. */
  .reader-resizer { display: none !important; }
  .reader-sidebar {
    width: 100% !important;
    min-width: 0;
    /* A fixed half of the screen, not "whatever the document leaves over":
       the rich Notes editor's toolbar + action row (~100px) otherwise ate the
       whole pane and the editing area collapsed to 0px (2026-09-05). */
    height: 50vh;
    max-height: 50vh;
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--bg3);
  }
  .reader-pdf-container { padding: 8px; }
}

/* ---- Highlight overlay layer ---- */
.reader-highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.reader-highlight-mark {
  position: absolute;
  opacity: 0.3;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.15s;
}
.reader-highlight-mark:hover {
  opacity: 0.5;
}
/* Annotated highlight: subtle dashed underline marker to distinguish
   highlights that carry a comment. Uses box-shadow so it doesn't affect layout. */
.reader-highlight-mark--annotated {
  box-shadow: inset 0 -2px 0 0 rgba(30, 30, 30, 0.55);
}
[data-theme="light"] .reader-highlight-mark--annotated {
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.45);
}

/* ---- Highlight context menu ---- */
.reader-hl-context-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  min-width: 220px;
  max-width: 320px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.reader-hl-context-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.reader-hl-comment-display {
  font-size: 0.82em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 6px 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 160px;
  overflow-y: auto;
  line-height: 1.4;
}
.reader-hl-comment-input {
  width: 100%;
  min-height: 60px;
  max-height: 200px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.85em;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 6px 8px;
  box-sizing: border-box;
}
.reader-hl-comment-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- TOC dropdown ---- */
.reader-toc-wrapper {
  position: relative;
}
.reader-toc-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  max-height: 400px;
  overflow-y: auto;
  min-width: 260px;
  max-width: 400px;
  z-index: 100;
}
.reader-toc-entry {
  padding: 8px 12px;
  font-size: 0.82em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}
.reader-toc-entry:hover {
  background: var(--bg3);
}

/* ---- Session history dropdown ---- */
.reader-sessions-dropdown {
  background: var(--bg);
  border-bottom: 1px solid var(--bg3);
  max-height: 280px;
  overflow-y: auto;
}
.reader-session-entry {
  padding: 8px 16px;
  font-size: 0.8em;
  cursor: pointer;
  color: var(--fg2);
  transition: background 0.1s;
}
.reader-session-entry:hover {
  background: var(--bg2);
  color: var(--fg);
}
.reader-session-title {
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-session-meta {
  font-size: 0.9em;
  color: var(--fg3);
  margin-top: 2px;
}
.reader-sessions-empty {
  padding: 12px 16px;
  font-size: 0.8em;
  color: var(--fg3);
  text-align: center;
}
.reader-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.reader-btn-small {
  padding: 4px 8px;
  font-size: 0.75em;
}

/* ---- Page jump input ---- */
.reader-page-jump-input {
  width: 50px;
  padding: 2px 6px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.8em;
  text-align: center;
  outline: none;
}
.reader-page-info {
  cursor: pointer;
}
.reader-page-info:hover {
  color: var(--accent);
}

/* ---- Drag-and-drop overlay ---- */
.reader-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(108, 138, 255, 0.1);
  border: 3px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}
.reader-drop-message {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--accent);
  padding: 20px 40px;
  background: var(--bg2);
  border-radius: var(--radius);
}

/* ---- Light theme overrides ---- */
[data-theme="light"] .reader-library-list { background: var(--bg3); }
[data-theme="light"] .reader-paper-row { background: var(--bg); }
[data-theme="light"] .reader-paper-row:hover { background: var(--bg2); }
[data-theme="light"] .reader-page { box-shadow: 0 2px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .reader-selection-bar { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .reader-ask-popover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .reader-toc-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
[data-theme="light"] .reader-hl-context-menu { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .reader-drop-overlay { background: rgba(108, 138, 255, 0.05); }

/* ================================================================
   Challenges view
   ================================================================ */

/* Container */
#view-challenges { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Layout — challenge content + sidebar */
.ch-layout {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.ch-main {
  flex: 1; overflow-y: auto; padding: 24px 32px;
  max-width: 820px;
}
.ch-sidebar {
  width: 260px; border-left: 1px solid var(--bg3);
  overflow-y: auto; flex-shrink: 0;
}
.ch-sidebar-inner { padding: 16px; }

/* Header — streak + meta */
.ch-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
}
.ch-streak {
  font-size: 1.6em; font-weight: 700; color: var(--accent);
  white-space: nowrap;
}
.ch-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ch-date { color: var(--fg3); font-size: 0.85em; }

/* Badges */
.ch-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 0.78em; font-weight: 600; text-transform: capitalize;
  background: var(--bg3); color: var(--fg2);
}
.ch-badge.small { font-size: 0.7em; padding: 1px 7px; }
.ch-badge-coding { background: var(--tint-accent); color: var(--accent); }
.ch-badge-math { background: var(--tint-yellow); color: var(--yellow); }
.ch-badge-conceptual-coding { background: var(--tint-green); color: var(--green); }
.ch-badge-diff { background: var(--bg3); color: var(--fg3); }

/* Yesterday's solution */
.ch-yesterday {
  margin-bottom: 20px; border: 1px solid var(--bg3);
  border-radius: var(--radius); overflow: hidden;
}
.ch-yesterday summary {
  padding: 10px 14px; cursor: pointer; font-weight: 600;
  color: var(--fg2); font-size: 0.9em;
  background: var(--bg2);
}
.ch-yesterday summary:hover { color: var(--fg); }
.ch-yesterday-body {
  padding: 14px; font-size: 0.9em; line-height: 1.6;
}
.ch-yesterday-body pre { margin: 8px 0; }

/* Challenge content */
.ch-challenge { margin-bottom: 20px; }
.ch-title {
  font-size: 1.3em; font-weight: 700; margin-bottom: 8px;
}
.ch-relevance {
  color: var(--fg2); font-size: 0.9em; font-style: italic;
  margin-bottom: 12px;
}
.ch-problem {
  line-height: 1.7; font-size: 0.95em;
}
.ch-problem pre {
  background: var(--bg2); border-radius: var(--radius);
  padding: 12px 16px; overflow-x: auto; margin: 12px 0;
}
.ch-problem code { font-family: var(--mono); font-size: 0.9em; }

/* Starter code */
.ch-starter { margin-top: 16px; }
.ch-starter-label {
  font-size: 0.8em; font-weight: 600; color: var(--fg3);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ch-starter-code {
  background: var(--bg2); border-radius: var(--radius);
  padding: 12px 16px; overflow-x: auto; margin: 0;
}
.ch-starter-code code { font-family: var(--mono); font-size: 0.88em; }

/* Hints */
.ch-hints { margin-bottom: 16px; }
.ch-hint {
  background: rgba(251, 191, 36, 0.08); border-left: 3px solid var(--yellow);
  padding: 8px 12px; margin-bottom: 8px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9em;
}
.ch-hint-label { font-weight: 600; color: var(--yellow); }
.ch-hints-exhausted { color: var(--fg3); font-size: 0.85em; font-style: italic; }

/* Code editor */
.ch-editor-section {
  border-top: 1px solid var(--bg3); padding-top: 16px;
}
.ch-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ch-editor-label { font-weight: 600; font-size: 0.95em; }
.ch-submitted-badge {
  font-size: 0.8em; color: var(--green); font-weight: 500;
}
.ch-editor {
  width: 100%; min-height: 200px; max-height: 600px;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: var(--radius); padding: 12px 16px;
  font-family: var(--mono); font-size: 0.88em; line-height: 1.5;
  resize: vertical; outline: none; tab-size: 4;
}
.ch-editor:focus { border-color: var(--accent); }

/* Action buttons */
.ch-actions {
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
}
.ch-btn {
  padding: 8px 18px; border-radius: var(--radius);
  font-size: 0.88em; font-weight: 600; cursor: pointer; border: none;
}
.ch-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ch-btn-primary { background: var(--accent); color: #fff; }
.ch-btn-primary:hover:not(:disabled) { background: var(--accent2); }
.ch-btn-secondary { background: var(--bg3); color: var(--fg); }
.ch-btn-secondary:hover:not(:disabled) { background: var(--bg2); }

/* Reference solution */
.ch-ref-solution {
  margin-top: 20px; border: 1px solid var(--bg3);
  border-radius: var(--radius); overflow: hidden;
}
.ch-ref-solution summary {
  padding: 10px 14px; cursor: pointer; font-weight: 600;
  color: var(--green); font-size: 0.9em; background: var(--bg2);
}
.ch-ref-solution-body {
  padding: 14px; font-size: 0.9em; line-height: 1.6;
}

/* Empty / loading states */
.ch-loading { padding: 40px; text-align: center; color: var(--fg3); }
.ch-error { padding: 40px; text-align: center; color: var(--red); }
.ch-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; text-align: center;
}
.ch-empty-icon { font-size: 3em; margin-bottom: 16px; }
.ch-empty h2 { margin-bottom: 8px; }
.ch-empty p { color: var(--fg2); max-width: 400px; }

/* Sidebar — stats */
.ch-sidebar-title {
  font-size: 0.85em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--fg3); margin-bottom: 10px;
}
.ch-sidebar-empty { color: var(--fg3); font-size: 0.85em; }
.ch-stats {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.ch-stat {
  flex: 1; text-align: center; background: var(--bg2);
  border-radius: var(--radius); padding: 10px 6px;
}
.ch-stat-value { font-size: 1.4em; font-weight: 700; color: var(--accent); }
.ch-stat-label { font-size: 0.72em; color: var(--fg3); margin-top: 2px; }

/* Sidebar — history list */
.ch-history-list { display: flex; flex-direction: column; gap: 4px; }
.ch-history-item {
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
  transition: background 0.15s;
}
.ch-history-item:hover { background: var(--bg2); }
.ch-history-item.active { background: var(--bg3); }
.ch-history-top {
  display: flex; justify-content: space-between; align-items: center;
}
.ch-history-date { font-size: 0.78em; color: var(--fg3); }
.ch-history-check { color: var(--green); font-size: 0.9em; }
.ch-history-title {
  font-size: 0.85em; font-weight: 500; margin: 2px 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Starter code collapsible (repo mode) */
.ch-starter-details { margin-top: 16px; border: 1px solid var(--bg3); border-radius: var(--radius); overflow: hidden; }
.ch-starter-details summary { padding: 8px 14px; cursor: pointer; font-weight: 600; color: var(--fg3); font-size: 0.85em; background: var(--bg2); text-transform: uppercase; letter-spacing: 0.5px; }
.ch-starter-details summary:hover { color: var(--fg); }

/* Repo workflow section */
.ch-repo-section {
  border-top: 1px solid var(--bg3); padding-top: 20px; margin-top: 8px;
}
.ch-repo-title {
  font-size: 1.05em; font-weight: 700; margin-bottom: 14px;
}
.ch-repo-steps {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px;
}
.ch-repo-step {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9em; line-height: 1.4;
}
.ch-repo-step code {
  background: var(--bg2); padding: 4px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.9em;
}
.ch-repo-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.75em; font-weight: 700; flex-shrink: 0;
}
.ch-repo-link {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; text-align: center;
}
.ch-repo-sidebar-link { margin: 12px 0; text-align: center; }
.ch-btn-sm { font-size: 0.82em; padding: 6px 14px; }

/* Responsive — stack sidebar below on narrow screens */
@media (max-width: 768px) {
  .ch-layout { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .ch-main { max-width: none; padding: 16px; flex-shrink: 0; overflow-y: visible; }
  .ch-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--bg3); flex-shrink: 0; overflow-y: visible; }
}

/* Light theme */
[data-theme="light"] .ch-editor { background: #fff; border-color: #d1d5db; }
[data-theme="light"] .ch-starter-code { background: #f8f9fa; }
[data-theme="light"] .ch-hint { background: rgba(251, 191, 36, 0.05); }

/* =========================================================================
   Insights view — happiness & habits dashboard
   ========================================================================= */
#view-insights { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 20px 24px 60px; }
.insights-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.insights-header h2 { margin: 0; font-size: 1.2em; }
.insights-sub { margin: 4px 0 0; color: var(--fg3); font-size: 0.82em; }
.insights-coverage-note {
  margin: 0 0 16px; padding: 8px 12px;
  background: var(--bg2); border-left: 3px solid var(--accent); border-radius: 4px;
  color: var(--fg2); font-size: 0.8em; line-height: 1.45;
}
.insights-loading, .insights-empty {
  padding: 40px 24px; color: var(--fg3); text-align: center;
}
.insights-empty h2 { color: var(--fg); margin-bottom: 12px; }
.insights-empty button { margin-top: 12px; }

.insights-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.insights-stats .stat-card {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  padding: 12px 14px;
}
.insights-stats .stat-label { font-size: 0.72em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.05em; }
.insights-stats .stat-value { font-size: 1.1em; font-weight: 600; margin-top: 4px; }

.insights-section {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 16px;
}
.insights-section h3 { margin: 0 0 12px; font-size: 0.95em; color: var(--fg); font-weight: 600; }
.insights-chart-card .chart-wrap {
  position: relative; height: 320px;
}
.insights-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.insights-row-2 .insights-section { margin-bottom: 0; }
.insights-note { font-size: 0.78em; color: var(--fg3); margin: 8px 0 0; }

.correlation-table { overflow-x: auto; }
.correlation-table table {
  width: 100%; border-collapse: collapse; font-size: 0.88em;
}
.correlation-table th {
  text-align: left; padding: 6px 10px; color: var(--fg3); font-weight: 600;
  font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--bg3);
}
.correlation-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--bg3);
}
.correlation-table th.num, .correlation-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.correlation-table td.pos { color: #4ade80; font-weight: 600; }
.correlation-table td.neg { color: #ef4444; font-weight: 600; }
.correlation-table th.bar-col, .correlation-table td.bar-col { width: 140px; text-align: left; }
.delta-bar-track {
  display: inline-block; width: 100%; height: 8px; background: var(--bg3);
  border-radius: 4px; overflow: hidden;
}
.delta-bar { display: block; height: 100%; border-radius: 4px; }
.delta-bar.pos { background: #4ade80; }
.delta-bar.neg { background: #ef4444; }
.correlation-table .warn { color: #fbbf24; cursor: help; }

.btn-secondary {
  background: var(--bg3); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: 8px; padding: 6px 12px; font-size: 0.85em; cursor: pointer;
}
.btn-secondary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.insights-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Habits & Discipline panel (#679) */
.discipline-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.discipline-head h3 { margin: 0; }
.discipline-sub { color: var(--fg3); font-size: 0.8em; }
.discipline-log-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px;
}
.discipline-log-form select, .discipline-log-form input {
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: 8px; padding: 6px 10px; font-size: 0.85em;
}
.discipline-log-form .discipline-value { width: 100px; }
.discipline-rules { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.discipline-rule {
  background: var(--bg); border: 1px solid var(--bg3); border-radius: 10px; padding: 10px 12px;
}
.discipline-rule-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.discipline-rule-label { font-weight: 600; font-size: 0.9em; }
.discipline-rule-detail { color: var(--fg3); font-size: 0.78em; margin-top: 4px; }
.discipline-rule-detail code {
  background: var(--bg2); padding: 1px 5px; border-radius: 4px; font-size: 0.95em;
}
.discipline-tag {
  font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.discipline-tag.armed { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.discipline-tag.pending { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.discipline-tag.off { background: var(--bg3); color: var(--fg3); }
.discipline-state { font-size: 0.72em; margin-left: auto; }
.discipline-state.ok { color: #4ade80; }
.discipline-state.warn { color: #fbbf24; }
.discipline-state.bad { color: #ef4444; font-weight: 600; }
.discipline-log-list { margin-top: 12px; }
.discipline-log-title {
  font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg3); margin-bottom: 6px;
}
.discipline-log-row {
  display: flex; gap: 12px; font-size: 0.82em; padding: 4px 0;
  border-bottom: 1px solid var(--bg3);
}
.discipline-log-date { color: var(--fg3); font-variant-numeric: tabular-nums; min-width: 88px; }

/* Timeline editor */
.timeline-editor-head { margin-bottom: 10px; }
.timeline-hint {
  color: var(--fg3); font-size: 0.82em; margin: 4px 0 0; line-height: 1.4;
}
.timeline-legend {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px;
}
.timeline-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid; font-size: 0.78em; font-weight: 500;
  background: transparent;
}
.timeline-legend-empty { color: var(--fg3); font-size: 0.82em; }
.timeline-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.timeline-editor-table-wrap { overflow-x: auto; }
.timeline-editor-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.timeline-editor-table th {
  text-align: left; padding: 6px 8px; color: var(--fg3); font-weight: 600;
  font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--bg3);
}
.timeline-editor-table td {
  padding: 4px 8px; border-bottom: 1px solid var(--bg3); vertical-align: middle;
}
.timeline-editor-table td.timeline-del { width: 32px; text-align: center; }
.timeline-empty { color: var(--fg3); text-align: center; padding: 20px; }
.timeline-input {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg3); border-left: 3px solid var(--bg3);
  border-radius: 6px; padding: 4px 8px; font-size: 0.85em;
  font-family: inherit; width: 100%; min-width: 110px;
}
.timeline-input:focus { outline: none; border-color: var(--accent); }
.timeline-editor-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
}
.timeline-editor-actions .timeline-dirty {
  color: #fbbf24; font-size: 0.82em; flex: 1;
}
.btn-icon {
  background: transparent; color: var(--fg3); border: none;
  font-size: 1em; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.btn-icon:hover { background: var(--bg3); color: #ef4444; }

.suggested-events {
  border-left: 3px solid var(--accent, #3b82f6);
  background: var(--bg2);
}
.suggested-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.7em;
  background: var(--accent, #3b82f6);
  color: white;
  border-radius: 10px;
  vertical-align: middle;
}
.suggested-events .btn-icon {
  font-weight: bold;
  padding: 4px 8px;
}

.events-editor select.timeline-input {
  background: var(--bg); color: var(--fg);
  appearance: none; -webkit-appearance: none;
  padding-right: 20px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg3) 50%), linear-gradient(135deg, var(--fg3) 50%, transparent 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 6px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  .insights-stats { grid-template-columns: repeat(2, 1fr); }
  .insights-row-2 { grid-template-columns: 1fr; }
  .timeline-editor-table { font-size: 0.8em; }
  .timeline-input { min-width: 90px; }
}

/* ----------------------------------------------------------------------------
   Upskill view — 9-month plan tracker
   ---------------------------------------------------------------------------- */
#view-upskill { flex: 1; overflow: auto; padding: 24px; }
#view-upskill:not(.active) { display: none; }

.up-wrap { max-width: 1100px; margin: 0 auto; }
.up-loading, .up-error { padding: 40px; text-align: center; color: var(--fg2); }
.up-error { color: var(--red); }
.up-muted { color: var(--fg3); font-size: 0.9em; }
.up-muted-small { color: var(--fg3); font-size: 0.8em; font-weight: normal; margin-left: 8px; }

.up-header h2 { margin: 0 0 4px; }
.up-subtitle { color: var(--fg2); margin: 0 0 16px; font-size: 0.92em; }
.up-stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.up-stat {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  padding: 12px 18px; min-width: 110px;
}
.up-stat-val { font-size: 1.6em; font-weight: 700; color: var(--fg); line-height: 1; }
.up-stat-label { font-size: 0.75em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

.up-section { margin-bottom: 32px; }
.up-section h3 {
  margin: 0 0 12px; font-size: 1.05em; font-weight: 600;
  border-bottom: 1px solid var(--bg3); padding-bottom: 6px;
}
.up-section-hint { color: var(--fg3); font-size: 0.75em; font-weight: normal; margin-left: 8px; }
/* Replan / adjust affordance on the Plan progress section (#1453) */
.up-replan-btn { float: right; font-size: 0.8em; font-weight: normal; }
.up-plan-drift {
  margin: 0 0 12px; padding: 8px 12px; font-size: 0.85em; color: var(--fg2);
  background: color-mix(in srgb, var(--warn, #d9822b) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d9822b) 35%, transparent);
  border-radius: 8px;
}

/* Today cards */
.up-today { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.up-card {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  padding: 14px 16px;
}
.up-card-label {
  font-size: 0.72em; color: var(--fg3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px;
}
.up-challenge-title { font-size: 1.05em; font-weight: 600; margin-bottom: 8px; }
.up-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.up-pill {
  font-size: 0.75em; padding: 2px 8px; border-radius: 10px;
  background: var(--bg3); color: var(--fg2);
}
.up-pill-coding { background: var(--tint-accent); color: var(--accent); }
.up-pill-math { background: var(--tint-yellow); color: var(--yellow); }
.up-pill-diff { background: var(--bg3); color: var(--fg3); }
.up-badge-ok {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  background: var(--tint-green); color: var(--green); font-size: 0.75em;
}
.up-badge-notes {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  background: var(--tint-accent); color: var(--accent); font-size: 0.75em;
}

/* Daily learning — sister card to the challenge */
.up-pill-learning { background: var(--tint-green); color: var(--green); }
.up-learning-summary { font-size: 0.9em; color: var(--fg2); margin: 0 0 8px; }
.up-learning-takeaway { font-size: 0.86em; color: var(--fg2); margin: 0; }
.up-learning-takeaway .up-card-label { display: inline; margin: 0 4px 0 0; }
.up-learning-entry .up-meta-row { margin-bottom: 8px; }
.up-learning-entry .up-log-body p:last-child { margin-bottom: 0; }
.up-learning-sum-title {
  color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Learning archive rows carry a category pill in the summary so the collapsed
   list stays scannable — widen the grid to date · title · pill. */
.up-learning-entry summary {
  grid-template-columns: 110px 1fr auto; align-items: center;
}
.up-learning-entry .up-meta-row:empty { display: none; }
[data-theme="light"] .up-pill-learning { background: rgba(16, 163, 74, 0.16); }

.up-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.up-btn {
  background: var(--accent); color: #fff; border: none; padding: 7px 14px;
  border-radius: 7px; cursor: pointer; font-size: 0.88em; font-weight: 600;
  text-decoration: none; display: inline-block;
}
.up-btn:hover { background: var(--accent2); }
.up-btn-secondary { background: var(--bg3); color: var(--fg); }
.up-btn-secondary:hover { background: var(--bg); }

.up-phase-line { margin: 0 0 8px; font-weight: 600; }
.up-week-focus { border-left: 2px solid var(--accent); padding-left: 10px; }
.up-week-week { font-size: 0.85em; color: var(--fg3); margin-bottom: 4px; }
.up-week-focus-text { font-size: 0.92em; margin-bottom: 6px; }
.up-week-focus-text p { margin: 0; }
.up-week-deliverable { font-size: 0.85em; color: var(--fg2); }
.up-week-deliverable p { margin: 2px 0 0; display: inline; }

.up-today-urgent { grid-column: 1 / -1; }
.up-urgent-list { list-style: none; padding: 0; margin: 0; }
.up-urgent-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--bg3); font-size: 0.88em;
}
.up-urgent-list li:last-child { border-bottom: none; }
.up-urgent-days { color: var(--red); font-weight: 600; white-space: nowrap; }
.up-urgent-desc { color: var(--fg2); line-height: 1.4; }

/* Plan progress */
.up-phase { margin-bottom: 20px; }
.up-phase-title { margin: 0 0 10px; font-size: 0.95em; font-weight: 600; color: var(--fg); }
.up-week-list { display: flex; flex-direction: column; gap: 2px; }
.up-week-row {
  display: grid;
  grid-template-columns: 24px 50px 110px 1fr 1fr;
  gap: 10px; align-items: center; padding: 8px 10px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px;
  cursor: pointer; font-size: 0.88em;
}
.up-week-row:hover { background: var(--bg3); }
.up-week-current { border-left: 3px solid var(--accent); }
.up-week-done .up-week-focus-inline,
.up-week-done .up-week-deliverable-inline { opacity: 0.55; text-decoration: line-through; }
.up-week-check { cursor: pointer; }
.up-week-num { font-weight: 600; color: var(--accent); font-size: 0.85em; }
.up-week-dates { color: var(--fg3); font-size: 0.82em; }
.up-week-focus-inline p,
.up-week-deliverable-inline p { margin: 0; display: inline; }
.up-week-deliverable-inline { color: var(--fg2); font-size: 0.85em; }

/* Daily log */
.up-log-new { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.up-log-new textarea {
  width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: 7px; padding: 10px; font-family: inherit; font-size: 0.9em;
  resize: vertical; margin-bottom: 8px; box-sizing: border-box;
}
.up-log-new textarea:focus { outline: none; border-color: var(--accent); }
.up-log-list { display: flex; flex-direction: column; gap: 4px; }
.up-log-entry { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px; }
.up-log-entry summary {
  padding: 8px 12px; cursor: pointer; display: grid;
  grid-template-columns: 110px 1fr; gap: 10px; font-size: 0.88em;
}
.up-log-entry summary:hover { background: var(--bg3); }
.up-log-date { color: var(--accent); font-family: monospace; }
.up-log-preview { color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-log-body { padding: 12px 14px; border-top: 1px solid var(--bg3); font-size: 0.9em; }
.up-log-body p:first-child { margin-top: 0; }

/* Deadlines */
.up-deadlines { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.up-deadlines th, .up-deadlines td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bg3);
}
.up-deadlines th { color: var(--fg3); font-weight: 600; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }
.up-deadlines .up-due { font-family: monospace; color: var(--accent); white-space: nowrap; }
.up-deadlines .up-days { white-space: nowrap; font-weight: 600; }
.up-deadlines .up-id { font-family: monospace; color: var(--fg3); }
.up-deadlines .up-status { color: var(--fg3); font-size: 0.82em; }
.up-deadlines .up-overdue .up-days,
.up-deadlines .up-overdue .up-due { color: var(--red); }
.up-deadlines .up-soon .up-days { color: var(--yellow); }
.up-deadline-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bg3);
  background: var(--bg); color: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78em; font-weight: 700; transition: all 0.15s;
}
.up-deadline-check:hover { border-color: var(--green, #16a34a); color: var(--green, #16a34a); }
.up-deadline-check:active { background: var(--green, #16a34a); color: #fff; }

/* Topic filter chips (daily-learning archive) */
.up-topics { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.up-topic {
  padding: 4px 11px; border-radius: 14px; border: 1px solid var(--bg3);
  background: var(--bg2); color: var(--fg2); font-size: 0.82em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s;
}
.up-topic:hover { border-color: var(--accent); color: var(--fg); }
.up-topic-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.up-topic-count { font-size: 0.82em; opacity: 0.7; font-variant-numeric: tabular-nums; }
.up-topic-active .up-topic-count { opacity: 0.85; }

/* "Show more" pagination control for the daily-learning archive */
.up-learning-more {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.up-learning-more .up-muted-small { margin-left: auto; }

/* Read state for daily-learning entries/cards */
.up-learning-read { opacity: 0.62; }
.up-learning-read:hover { opacity: 0.85; }
.up-learning-entry.up-learning-read .up-learning-sum-title { text-decoration: line-through; text-decoration-color: var(--fg3); }

/* Programs & deadlines table */
.up-programs .up-prog-cadence { color: var(--fg3); font-size: 0.85em; font-style: italic; }
.up-programs .up-prog-name a { color: var(--accent); text-decoration: none; }
.up-programs .up-prog-name a:hover { text-decoration: underline; }
.up-prog-tracker {
  font-size: 0.7em; padding: 1px 7px; border-radius: 10px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; background: var(--bg3); color: var(--fg3);
  white-space: nowrap;
}
.up-prog-tracker-urgent { background: rgba(248, 113, 113, 0.18); color: var(--red); }
.up-prog-tracker-watching { background: var(--bg3); color: var(--fg3); }
.up-prog-tracker-withdrawn { opacity: 0.6; text-decoration: line-through; }
.up-prog-inactive { opacity: 0.45; }
.up-prog-inactive .up-prog-name { text-decoration: line-through; }
.up-prog-accepted .up-prog-name { color: var(--green); font-weight: 600; }
.up-prog-passed { color: var(--fg3); font-size: 0.85em; font-style: italic; white-space: nowrap; }
.up-prog-passed-days { color: var(--fg3); font-size: 0.85em; }
.up-prog-actions { white-space: nowrap; }
.up-prog-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.up-prog-select {
  background: var(--bg); color: var(--fg2); border: 1px solid var(--bg3);
  border-radius: 6px; padding: 3px 6px; font-size: 0.82em; cursor: pointer;
}
.up-prog-select:hover { border-color: var(--accent); }
.up-prog-select-interested { border-color: var(--yellow, #fbbf24); color: var(--yellow, #fbbf24); }
.up-prog-select-applied { border-color: var(--accent); color: var(--accent); }
.up-prog-select-accepted { border-color: var(--green, #16a34a); color: var(--green, #16a34a); font-weight: 600; }
.up-prog-select-rejected { border-color: var(--red, #f87171); color: var(--red, #f87171); }
.up-prog-select-passed, .up-prog-select-dismissed { border-color: var(--fg3); color: var(--fg3); }

/* Event prep — per-event pre-work trackers (memory/upskill-events/) */
.up-ev-card {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  margin-bottom: 12px; overflow: hidden;
}
.up-ev-card-past { opacity: 0.65; }
.up-ev-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--fg); cursor: pointer;
  padding: 12px 16px; font: inherit; text-align: left;
}
.up-ev-head:hover { background: var(--bg3); }
.up-ev-chevron { color: var(--fg3); font-size: 0.85em; width: 14px; }
.up-ev-title { font-weight: 600; font-size: 1em; }
.up-ev-when {
  font-size: 0.75em; padding: 2px 8px; border-radius: 10px;
  background: var(--bg3); color: var(--fg2); white-space: nowrap;
}
.up-ev-soon { background: var(--tint-yellow); color: var(--yellow); }
.up-ev-active { background: var(--tint-green); color: var(--green); }
.up-ev-past { background: var(--bg3); color: var(--fg3); }
.up-ev-head-meta { color: var(--fg3); font-size: 0.8em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-ev-progress-label { color: var(--fg2); font-size: 0.8em; white-space: nowrap; }
.up-ev-bar { height: 3px; background: var(--bg3); }
.up-ev-bar-fill { height: 100%; background: var(--green, #16a34a); transition: width 0.2s; }
.up-ev-body { padding: 14px 16px 16px; border-top: 1px solid var(--bg3); }
.up-ev-desc { font-size: 0.9em; color: var(--fg2); margin-bottom: 10px; }
.up-ev-desc p { margin: 0 0 6px; }
.up-ev-links { margin-bottom: 14px; }
.up-ev-section { margin-bottom: 18px; }
.up-ev-section-title {
  margin: 0 0 6px; font-size: 0.92em; font-weight: 600;
  display: flex; align-items: baseline; gap: 10px;
}
.up-ev-optional {
  font-size: 0.75em; font-weight: normal; color: var(--fg3);
  border: 1px dashed var(--bg3); border-radius: 10px; padding: 1px 8px;
}
.up-ev-section-count { margin-left: auto; color: var(--fg3); font-size: 0.8em; font-weight: normal; }
.up-ev-section-intro { font-size: 0.85em; color: var(--fg3); margin: 0 0 8px; }
.up-ev-section-intro p { margin: 0; }
.up-ev-items { display: flex; flex-direction: column; gap: 4px; }
.up-ev-item {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--bg3); border-radius: 6px;
  background: var(--bg); font-size: 0.88em; align-items: start;
}
.up-ev-item-done { opacity: 0.6; }
.up-ev-item-done .up-ev-item-title { text-decoration: line-through; }
.up-ev-item-check { display: flex; align-items: center; padding-top: 2px; }
.up-ev-item-title { line-height: 1.4; }
.up-ev-item-title a { color: var(--fg); }
.up-ev-item-title a:hover { color: var(--accent); }
.up-pill-est { background: var(--tint-accent); color: var(--accent); }
.up-ev-item-tip { color: var(--fg3); font-size: 0.92em; margin-top: 3px; }
.up-ev-item-tip p { margin: 0; }
.up-ev-usernote {
  margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--accent);
  background: var(--bg2); border-radius: 0 6px 6px 0; font-size: 0.92em; color: var(--fg2);
}
.up-ev-usernote p { margin: 0; }
.up-ev-item-actions { display: flex; gap: 6px; align-items: start; flex-wrap: wrap; justify-content: flex-end; }
.up-ev-mini { padding: 3px 9px; font-size: 0.8em; }
.up-ev-notewrap { margin-top: 6px; }
.up-ev-noteinput, .up-ev-notes-input {
  width: 100%; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--bg3); border-radius: 6px; padding: 8px 10px;
  font: inherit; font-size: 0.92em; resize: vertical; box-sizing: border-box;
}
.up-ev-notes { margin-top: 6px; border-top: 1px dashed var(--bg3); padding-top: 10px; }
.up-ev-notes summary { cursor: pointer; font-weight: 600; font-size: 0.92em; color: var(--fg2); }
.up-ev-notes-body { margin-top: 10px; }
@media (max-width: 700px) {
  .up-ev-head { flex-wrap: wrap; }
  .up-ev-head-meta { flex-basis: 100%; order: 5; }
  .up-ev-item { grid-template-columns: 24px 1fr; }
  .up-ev-item-actions { grid-column: 2; justify-content: flex-start; }
}

/* Artifacts */
.up-links { display: flex; gap: 10px; flex-wrap: wrap; }
.up-link {
  padding: 8px 14px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: 7px; color: var(--accent); font-size: 0.9em;
  display: inline-flex; align-items: center; gap: 8px;
}
.up-link:hover { background: var(--bg3); }
.up-link-planned {
  color: var(--fg3); cursor: default; font-style: italic;
}
.up-link-planned:hover { background: var(--bg2); }
.up-link-unknown { color: var(--yellow, #fbbf24); }
.up-link-tag {
  font-size: 0.72em; padding: 1px 7px; border-radius: 10px;
  background: var(--bg3); color: var(--fg3); font-style: normal; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .up-week-row {
    grid-template-columns: 24px 50px 1fr;
    grid-template-rows: auto auto;
  }
  .up-week-dates { grid-column: 3 / -1; }
  .up-week-focus-inline { grid-column: 2 / -1; }
  .up-week-deliverable-inline { grid-column: 2 / -1; font-size: 0.82em; }
  .up-deadlines .up-desc { display: none; }
  .up-deadlines .up-status { display: none; }
  .up-programs th:nth-child(4), .up-programs td:nth-child(4) { display: none; } /* hide Tracker col */
}

/* Light-theme tweaks */
[data-theme="light"] .up-pill-coding { background: rgba(108, 138, 255, 0.18); }
[data-theme="light"] .up-pill-math { background: rgba(251, 191, 36, 0.22); }

/* ========================================================================= */
/* Follow-ups view                                                            */
/* ========================================================================= */
#view-follow-ups { flex: 1; overflow-y: auto; padding: 24px; }
.fu-wrap { max-width: 1100px; margin: 0 auto; }
.fu-loading, .fu-error, .fu-empty {
  padding: 24px; color: var(--fg2); text-align: center;
}
.fu-error { color: var(--red); }

.fu-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.fu-header h2 { font-size: 1.4em; margin: 0 0 4px; }
.fu-subtitle { color: var(--fg2); font-size: 0.88em; margin: 0; }
.fu-header-actions { display: flex; gap: 8px; }

.fu-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
  background: var(--bg2); padding: 10px; border-radius: 8px; border: 1px solid var(--bg3);
}
.fu-search {
  flex: 1; min-width: 220px; padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--bg3); background: var(--bg); color: var(--fg);
  font-size: 0.9em;
}
.fu-search:focus { border-color: var(--accent); outline: none; }
.fu-select {
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--bg3);
  background: var(--bg); color: var(--fg); font-size: 0.9em;
}

.fu-list { display: flex; flex-direction: column; gap: 8px; }

.fu-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 12px 14px; align-items: start; transition: border-color 0.15s;
}
.fu-row:hover { border-color: var(--accent); }

.fu-row-left { display: flex; align-items: center; justify-content: center; padding-top: 2px; }

.fu-row-main { min-width: 0; }
.fu-row-top {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 0.78em; margin-bottom: 6px;
}
.fu-id { font-family: monospace; color: var(--fg3); font-weight: 600; }
.fu-type, .fu-source {
  background: var(--bg3); color: var(--fg2); padding: 2px 7px; border-radius: 10px;
  font-size: 0.85em;
}
.fu-status { padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.fu-status-pending { background: rgba(148, 163, 184, 0.18); color: var(--fg2); }
.fu-status-progress { background: rgba(59, 130, 246, 0.18); color: var(--accent); }
.fu-status-urgent { background: rgba(239, 68, 68, 0.18); color: var(--red); }
.fu-status-done { background: rgba(34, 197, 94, 0.18); color: var(--green, #16a34a); }
.fu-status-other { background: var(--bg3); color: var(--fg2); }
.fu-due { font-family: monospace; color: var(--accent); margin-left: auto; }
.fu-due-rel { color: var(--fg3); font-family: var(--font); margin-left: 6px; }
.fu-due-rel.fu-overdue { color: var(--red); font-weight: 600; }
.fu-due-rel.fu-soon { color: var(--yellow); font-weight: 600; }
.fu-muted { color: var(--fg3); }

.fu-desc { font-size: 0.92em; line-height: 1.4; color: var(--fg); word-wrap: break-word; }
.fu-desc a { word-break: break-all; }

.fu-row-actions { display: flex; flex-direction: column; gap: 6px; }
.fu-btn {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--bg3);
  background: var(--bg); color: var(--fg); font-size: 0.85em; cursor: pointer;
  transition: all 0.15s;
}
.fu-btn:hover { border-color: var(--accent); color: var(--accent); }
.fu-btn-mini { padding: 4px 10px; font-size: 0.78em; }
.fu-btn-ghost { background: transparent; }

.fu-completed { margin-top: 32px; }
.fu-completed h3 { font-size: 1em; color: var(--fg2); margin-bottom: 10px; font-weight: 600; }
.fu-completed-table {
  width: 100%; border-collapse: collapse; font-size: 0.86em;
  background: var(--bg2); border-radius: 8px; overflow: hidden;
}
.fu-completed-table th {
  text-align: left; padding: 8px 12px; background: var(--bg3); color: var(--fg3);
  font-weight: 600; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em;
}
.fu-completed-table td { padding: 8px 12px; border-bottom: 1px solid var(--bg3); vertical-align: top; }
.fu-completed-table tr:last-child td { border-bottom: none; }

/* Modal pieces */
.fu-modal-desc {
  background: var(--bg); border: 1px solid var(--bg3); border-radius: 6px;
  padding: 8px 12px; font-size: 0.88em; color: var(--fg2); margin-bottom: 12px;
}
.fu-textarea, .fu-input {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--bg3);
  background: var(--bg); color: var(--fg); font-family: inherit; font-size: 0.9em;
  box-sizing: border-box;
}
.fu-textarea:focus, .fu-input:focus { border-color: var(--accent); outline: none; }
.fu-label {
  display: block; font-size: 0.78em; color: var(--fg3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0 4px;
}
/* .fu-select is sized for the inline filter bar; inside a modal (the reply
   answer-vs-action picker, #1199) it should fill the row like the textarea. */
.modal-content .fu-select { width: 100%; box-sizing: border-box; }
.fu-hint { font-size: 0.8em; color: var(--fg3); margin: 6px 0 0; }
.fu-edit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;
}

/* Dated-commitment framing + grouping (multi-select / reply-to-resolve) */
.fu-note { color: var(--fg3); font-size: 0.82em; margin: 4px 0 0; font-style: italic; }

.fu-bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg2); border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 14px; position: sticky; top: 8px; z-index: 5;
}
.fu-bulkbar[hidden] { display: none; }
.fu-bulk-count { font-weight: 600; color: var(--fg); font-size: 0.9em; }
.fu-btn-bulk {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
.fu-btn-bulk:hover { filter: brightness(1.08); color: #fff; }

.fu-groups { display: flex; flex-direction: column; gap: 22px; }
.fu-group { display: flex; flex-direction: column; gap: 8px; }
.fu-group-head {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 0.9em; font-weight: 700; color: var(--fg2);
  padding-bottom: 4px; border-bottom: 1px solid var(--bg3);
}
.fu-group-count {
  background: var(--bg3); color: var(--fg2); border-radius: 10px;
  padding: 1px 9px; font-size: 0.82em; font-weight: 600;
}
.fu-group-toggle {
  margin-left: auto; background: transparent; border: 1px solid var(--bg3);
  color: var(--fg2); border-radius: 6px; padding: 3px 10px; font-size: 0.78em; cursor: pointer;
}
.fu-group-toggle:hover { border-color: var(--accent); color: var(--accent); }
.fu-grp-overdue .fu-group-head { color: var(--red); border-bottom-color: rgba(239, 68, 68, 0.4); }
.fu-grp-week .fu-group-head { color: var(--yellow); }
.fu-grp-undated .fu-group-head { color: var(--fg3); }

.fu-select-box {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent);
}
.fu-row-selected { border-color: var(--accent); background: rgba(59, 130, 246, 0.06); }

.fu-row-actions-mini { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fu-btn-reply {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; padding: 6px 14px;
}
.fu-btn-reply:hover { filter: brightness(1.08); color: #fff; }

/* The first track holds the row checkbox. Below 768px that control is a 44px
   touch target (see the #1213 block near the end of this file), so the track is
   sized from --touch rather than a literal — a narrower track would clip it. */
@media (max-width: 640px) {
  .fu-row { grid-template-columns: var(--touch) 1fr; }
  .fu-row-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .fu-row-actions-mini { justify-content: flex-start; }
}

@media (max-width: 700px) {
  #view-follow-ups { padding: 14px; }
  .fu-row { grid-template-columns: var(--touch) 1fr; }
  /* Indent the actions row to line up under .fu-row-main: track + the 10px .fu-row gap. */
  .fu-row-actions { grid-column: 1 / -1; flex-direction: row; padding-left: calc(var(--touch) + 10px); }
  .fu-due { margin-left: 0; }
  .fu-edit-grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* Writing tab — list, editor, new                              */
/* ============================================================ */
#view-writing { flex: 1; overflow: auto; padding: 24px; }
#view-writing.active { display: block; }
.writing-wrap { max-width: 1100px; margin: 0 auto; }
.writing-editor-wrap { max-width: 1200px; }

.writing-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.writing-header h2 { margin: 0 0 4px; }
.writing-subtitle { color: var(--fg2); font-size: 0.9em; margin: 0; }
.writing-subtitle code { background: var(--bg2); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; }
.writing-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.writing-btn {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.9em;
}
.writing-btn:hover { background: var(--bg3); }
.writing-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.writing-btn-primary:hover { filter: brightness(1.1); background: var(--accent); }
.writing-btn-back { background: none; border: none; color: var(--fg2); padding: 4px 0; margin-bottom: 8px; }
.writing-btn-back:hover { color: var(--fg); background: none; }

.writing-filters { margin-bottom: 18px; }
.writing-search {
  width: 100%; max-width: 480px; padding: 8px 12px;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: 6px; font-size: 0.95em; margin-bottom: 12px;
}
.writing-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.writing-chip {
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--bg3);
  padding: 4px 10px; border-radius: 14px; cursor: pointer; font-size: 0.82em;
}
.writing-chip:hover { background: var(--bg3); color: var(--fg); }
.writing-chip-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.writing-list { display: flex; flex-direction: column; gap: 8px; }
.writing-empty { color: var(--fg3); padding: 24px; text-align: center; }
.writing-row {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 12px 16px; cursor: pointer; transition: background 0.1s;
}
.writing-row:hover { background: var(--bg3); border-color: var(--accent); }
.writing-row-title { font-weight: 600; margin-bottom: 4px; }
.writing-row-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.82em; color: var(--fg2); }
.writing-row-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.writing-tag {
  background: var(--bg3); color: var(--fg2); padding: 1px 7px;
  border-radius: 10px; font-size: 0.75em;
}

.writing-type {
  padding: 1px 8px; border-radius: 10px; font-size: 0.72em;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.writing-type-paper { background: rgba(99,102,241,0.18); color: #818cf8; }
.writing-type-post { background: rgba(34,197,94,0.18); color: #4ade80; }
.writing-type-upskill { background: rgba(234,179,8,0.18); color: #facc15; }
.writing-type-research { background: rgba(236,72,153,0.18); color: #f472b6; }
.writing-type-topic { background: rgba(14,165,233,0.18); color: #38bdf8; }

.writing-state {
  padding: 1px 8px; border-radius: 10px; font-size: 0.72em;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.writing-state-draft { background: rgba(234,179,8,0.18); color: #facc15; }
.writing-state-pub { background: rgba(34,197,94,0.18); color: #4ade80; }
.writing-state-orphan { background: rgba(239,68,68,0.18); color: #fca5a5; }
.writing-date { font-variant-numeric: tabular-nums; }
.writing-path { color: var(--fg3); font-family: monospace; font-size: 0.85em; }
.writing-links { color: var(--fg3); font-variant-numeric: tabular-nums; font-size: 0.85em; }
.writing-live-link, .writing-reader-link {
  color: var(--accent); text-decoration: none; font-size: 0.82em;
}
.writing-live-link:hover, .writing-reader-link:hover { text-decoration: underline; }
/* #1427 — future-URL slug shown on publishable drafts; hover explains permanence. */
.writing-slug-hint {
  color: var(--fg3); font-family: monospace; font-size: 0.82em; margin-left: 4px; cursor: help;
  border-bottom: 1px dotted var(--fg3);
}
.writing-topic-chip {
  background: rgba(14,165,233,0.12); color: #38bdf8; padding: 1px 7px;
  border-radius: 10px; font-size: 0.72em;
}

/* Folder tabs — public papers/ vs private lit-reviews/ (#485) */
.writing-folder-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  border-bottom: 1px solid var(--bg3);
}
.writing-folder-tab {
  background: transparent; color: var(--fg2);
  border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 0.88em; font-weight: 500;
  cursor: pointer; margin-bottom: -1px;
}
.writing-folder-tab:hover { color: var(--fg); background: var(--bg2); }
.writing-folder-tab-active {
  color: var(--accent); border-bottom-color: var(--accent);
}

/* ML4YOU-private badge for non-publishable folders */
.writing-folder-badge {
  background: rgba(168, 85, 247, 0.16); color: #c084fc;
  padding: 1px 7px; border-radius: 10px;
  font-size: 0.72em; font-weight: 600;
  letter-spacing: 0.02em;
}

/* Workflow primer — Reader → Writing → Live */
.writing-primer {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: 8px; padding: 8px 14px; margin-bottom: 14px;
  font-size: 0.85em; color: var(--fg2);
}
.writing-primer strong { color: var(--fg); }
.writing-primer a { color: var(--accent); text-decoration: none; }
.writing-primer a:hover { text-decoration: underline; }
.writing-primer-arrow { color: var(--fg3); }

/* Content-model explainer — collapsible "How Writing works" */
.writing-explainer {
  background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: 8px; margin-bottom: 14px; font-size: 0.85em;
}
.writing-explainer > summary {
  cursor: pointer; padding: 9px 14px; color: var(--fg2);
  font-weight: 600; list-style: none; user-select: none;
}
.writing-explainer > summary::-webkit-details-marker { display: none; }
.writing-explainer > summary::before { content: "▸ "; color: var(--fg3); }
.writing-explainer[open] > summary::before { content: "▾ "; }
.writing-explainer > summary:hover { color: var(--fg); }
.writing-explainer-body {
  padding: 2px 16px 12px; color: var(--fg2); line-height: 1.5;
  border-top: 1px solid var(--bg3);
}
.writing-explainer-body p { margin: 10px 0; }
.writing-explainer-body ul { margin: 8px 0; padding-left: 20px; }
.writing-explainer-body li { margin: 3px 0; }
.writing-explainer-body strong { color: var(--fg); }
.writing-explainer-body code {
  background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 0.92em;
}

/* New-form per-type description — updates live as Type changes */
.writing-type-desc {
  margin: -6px 0 2px; font-size: 0.85em; color: var(--fg3); line-height: 1.45;
}
.writing-type-desc code {
  background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; color: var(--fg2);
}
.writing-field-muted { opacity: 0.55; }

/* Site navigation cards — index.md and topics/index.md */
.writing-nav-section { margin-bottom: 18px; }
.writing-nav-heading {
  font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg3); margin-bottom: 8px; font-weight: 600;
}
.writing-nav-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.writing-nav-card {
  background: var(--bg2); border: 1px dashed var(--bg3); border-radius: 8px;
  padding: 10px 14px; cursor: pointer; transition: background 0.1s;
}
.writing-nav-card:hover { background: var(--bg3); border-color: var(--accent); border-style: solid; }
.writing-nav-role {
  font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); font-weight: 600; margin-bottom: 2px;
}
.writing-nav-title { font-weight: 600; margin-bottom: 4px; }
.writing-nav-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 0.78em; color: var(--fg3);
}
.writing-nav-meta code { background: var(--bg); padding: 1px 6px; border-radius: 3px; }

/* Filter row spacer + orphan summary + topic-view toggle */
.writing-chip-spacer { flex: 1; }
.writing-orphan-summary {
  font-size: 0.78em; color: var(--fg3); padding: 4px 10px;
}
.writing-group-toggle { font-weight: 500; }

/* Topic-grouped view */
.writing-topic-group {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 10px;
}
.writing-topic-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--bg3);
  font-size: 0.95em;
}
.writing-topic-count {
  background: var(--bg3); color: var(--fg2); padding: 1px 7px;
  border-radius: 10px; font-size: 0.72em;
}
.writing-topic-edit { color: var(--fg3); font-size: 0.78em; margin-left: auto; text-decoration: none; }
.writing-topic-edit:hover { color: var(--accent); text-decoration: underline; }
.writing-topic-members { display: flex; flex-direction: column; gap: 6px; }
.writing-topic-members .writing-row { background: var(--bg); }

.writing-loading, .writing-error { padding: 24px; color: var(--fg2); }
.writing-error { color: #f87171; }

/* Editor */
.writing-editor-title { margin: 4px 0; font-size: 1.4em; }
.writing-editor-wrap.writing-editor-view-split { max-width: none; }

/* View-mode toggle — Write / Split / Preview (segmented button group) */
.writing-view-toggle {
  display: inline-flex; border: 1px solid var(--bg3);
  border-radius: 6px; overflow: hidden; margin-right: 6px;
}
.writing-view-btn {
  background: var(--bg2); color: var(--fg2);
  border: none; padding: 6px 12px; font-size: 0.85em; cursor: pointer;
  border-right: 1px solid var(--bg3);
}
.writing-view-btn:last-child { border-right: none; }
.writing-view-btn:hover { background: var(--bg3); color: var(--fg); }
.writing-view-btn-active {
  background: var(--accent); color: white;
}
.writing-view-btn-active:hover { background: var(--accent); color: white; }

/* Editor/preview pane layout — flex container; child visibility driven by
   the .writing-editor-view-{write,split,preview} modifier on the wrap. */
.writing-editor-panes {
  display: flex; gap: 12px; min-height: 60vh;
  align-items: stretch;
}
.writing-editor-view-write .writing-editor-panes .writing-preview { display: none; }
.writing-editor-view-write .writing-editor-panes .writing-editor { flex: 1 1 100%; }
.writing-editor-view-preview .writing-editor-panes .writing-editor { display: none; }
.writing-editor-view-preview .writing-editor-panes .writing-preview { flex: 1 1 100%; }
.writing-editor-view-split .writing-editor-panes .writing-editor { flex: 1 1 50%; }
.writing-editor-view-split .writing-editor-panes .writing-preview { flex: 1 1 50%; }

.writing-editor {
  width: 100%; padding: 16px;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; line-height: 1.55; resize: vertical;
}
.writing-editor:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Live markdown preview pane (#writing-preview) */
.writing-preview {
  padding: 16px 20px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg3); border-radius: 8px;
  overflow-y: auto; max-height: 80vh;
  font-size: 0.95em; line-height: 1.65;
}
.writing-preview h1 { font-size: 1.5em; margin: 0.5em 0 0.3em; line-height: 1.25; }
.writing-preview h2 { font-size: 1.25em; margin: 1.2em 0 0.3em; line-height: 1.3; }
.writing-preview h3 { font-size: 1.1em; margin: 1em 0 0.3em; }
.writing-preview p { margin: 0.7em 0; }
.writing-preview pre { background: var(--bg2); padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 0.9em; }
.writing-preview code { background: var(--bg2); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.writing-preview pre code { background: none; padding: 0; }
.writing-preview blockquote {
  border-left: 3px solid var(--accent); margin-left: 0;
  padding-left: 14px; color: var(--fg2);
}
.writing-preview table { border-collapse: collapse; margin: 0.7em 0; }
.writing-preview th, .writing-preview td {
  border: 1px solid var(--bg3); padding: 4px 10px; font-size: 0.9em;
}
.writing-preview th { background: var(--bg2); }
.writing-preview a { color: var(--accent); }
.writing-preview-error { color: #f87171; font-size: 0.85em; }

/* On narrow screens, stack split mode vertically */
@media (max-width: 900px) {
  .writing-editor-view-split .writing-editor-panes { flex-direction: column; }
  .writing-editor-view-split .writing-editor-panes .writing-editor,
  .writing-editor-view-split .writing-editor-panes .writing-preview {
    flex: 1 1 auto; min-height: 40vh;
  }
}
.writing-editor-status {
  padding: 6px 12px; border-radius: 6px; margin-bottom: 12px;
  font-size: 0.85em; min-height: 1.2em;
}
.writing-editor-status:empty { display: none; }
.writing-editor-status-info { background: var(--bg2); color: var(--fg2); }
.writing-editor-status-ok { background: rgba(34,197,94,0.15); color: #4ade80; }
.writing-editor-status-warn { background: rgba(234,179,8,0.15); color: #facc15; }
.writing-editor-status-error { background: rgba(239,68,68,0.15); color: #f87171; }

/* Editor-pass actions log (#492) — dismissable panel under the status bar. */
.writing-process-log {
  margin-bottom: 12px; padding: 8px 12px; border-radius: 6px;
  background: var(--bg2); border: 1px solid var(--bg3); font-size: 0.85em;
}
.writing-process-log[hidden] { display: none; }
.writing-process-log summary { cursor: pointer; color: var(--fg2); font-weight: 600; }
.writing-process-log ul { margin: 8px 0 2px; padding-left: 20px; color: var(--fg2); }
.writing-process-log li { margin: 3px 0; }
.writing-btn:disabled { opacity: 0.55; cursor: default; }

/* Tags chip-list (#495 Phase 3) — inline editable `tags:` frontmatter array. */
.writing-tags-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px;
}
.writing-tags-label {
  font-size: 0.78em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg2); margin-right: 2px;
}
.writing-tags-help {
  display: inline-block; width: 14px; height: 14px; line-height: 14px;
  text-align: center; border-radius: 50%; background: var(--bg3);
  color: var(--fg2); font-size: 0.85em; cursor: help; text-transform: none;
}
.writing-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); color: var(--fg); padding: 2px 4px 2px 9px;
  border-radius: 11px; font-size: 0.8em;
}
.writing-tag-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--fg2); font-size: 1.05em;
  line-height: 1; cursor: pointer;
}
.writing-tag-remove:hover { background: var(--accent); color: #fff; }
.writing-tag-input {
  flex: 1; min-width: 90px; border: none; background: transparent;
  color: var(--fg); font-size: 0.82em; padding: 3px 2px;
}
.writing-tag-input:focus { outline: none; }
.writing-tag-input::placeholder { color: var(--fg3); }

/* Connections chip-list (#523 Phase 4) — symmetric wikilink array with
   back-reference sync. Distinct accent (border + chip background) so the
   two bars don't visually fuse when both are populated. */
.writing-connections-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px;
  border-left: 3px solid var(--accent);
}
.writing-connections-label {
  font-size: 0.78em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg2); margin-right: 2px;
}
.writing-connections-help {
  display: inline-block; width: 14px; height: 14px; line-height: 14px;
  text-align: center; border-radius: 50%; background: var(--bg3);
  color: var(--fg2); font-size: 0.85em; cursor: help; text-transform: none;
}
.writing-connection-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); color: var(--fg); padding: 2px 4px 2px 9px;
  border-radius: 11px; font-size: 0.8em;
  font-family: var(--font-mono, monospace);
}
.writing-connection-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--fg2); font-size: 1.05em;
  line-height: 1; cursor: pointer;
}
.writing-connection-remove:hover { background: var(--accent); color: #fff; }
.writing-connection-input {
  flex: 1; min-width: 110px; border: none; background: transparent;
  color: var(--fg); font-size: 0.82em; padding: 3px 2px;
  font-family: var(--font-mono, monospace);
}
.writing-connection-input:focus { outline: none; }
.writing-connection-input::placeholder { color: var(--fg3); }

/* Topic / project membership bars (#560 Phase 5) — cross-file frontmatter.
   Mirrors the tags/connections bars; the left-border colour distinguishes the
   two kinds (and from connections) so stacked bars stay legible. */
.writing-membership-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px;
  border-left: 3px solid var(--fg3);
}
.writing-membership-topic { border-left-color: #5b8def; }
.writing-membership-project { border-left-color: #c08457; }
.writing-membership-label {
  font-size: 0.78em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg2); margin-right: 2px;
}
.writing-membership-help {
  display: inline-block; width: 14px; height: 14px; line-height: 14px;
  text-align: center; border-radius: 50%; background: var(--bg3);
  color: var(--fg2); font-size: 0.85em; cursor: help; text-transform: none;
}
.writing-member-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); color: var(--fg); padding: 2px 4px 2px 9px;
  border-radius: 11px; font-size: 0.8em;
}
.writing-member-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--fg2); font-size: 1.05em;
  line-height: 1; cursor: pointer;
}
.writing-member-remove:hover { background: var(--accent); color: #fff; }
.writing-membership-input {
  flex: 1; min-width: 110px; border: none; background: transparent;
  color: var(--fg); font-size: 0.82em; padding: 3px 2px;
}
.writing-membership-input:focus { outline: none; }
.writing-membership-input::placeholder { color: var(--fg3); }

/* New form */
.writing-new-form {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 560px; padding: 18px; background: var(--bg2);
  border: 1px solid var(--bg3); border-radius: 8px;
}
.writing-new-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--fg2); }
.writing-new-form label em { color: var(--fg3); font-style: normal; font-size: 0.85em; }
.writing-new-form input, .writing-new-form select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg3);
  padding: 8px 10px; border-radius: 6px; font-size: 0.95em;
}
.writing-new-form input:focus, .writing-new-form select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.writing-form-actions { display: flex; gap: 8px; }

/* Papers inventory triage list (#462) — rendered above the editor textarea */
.papers-triage {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
}
.papers-triage-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--bg3);
}
.papers-triage-count { color: var(--fg3); font-size: 0.8em; }
.papers-triage-list { display: flex; flex-direction: column; gap: 8px; }
.paper-row {
  display: flex; gap: 12px; justify-content: space-between; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--bg3); border-radius: 6px;
  padding: 10px 12px;
}
.paper-row-main { min-width: 0; flex: 1; }
.paper-row-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.paper-row-name { overflow-wrap: anywhere; }
.paper-row-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 5px; font-size: 0.8em; color: var(--fg2);
}
.paper-row-meta code {
  background: var(--bg2); padding: 1px 6px; border-radius: 3px; font-size: 0.95em;
}
.paper-tier, .paper-theme {
  background: var(--bg3); color: var(--fg2); padding: 1px 7px; border-radius: 10px;
  font-size: 0.92em;
}
.paper-cite { color: var(--fg3); }
.paper-abstract { margin-top: 6px; font-size: 0.85em; }
.paper-abstract summary { cursor: pointer; color: var(--fg2); }
.paper-abstract p { margin: 6px 0 0; color: var(--fg2); line-height: 1.5; }
.paper-status {
  font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 4px; font-weight: 700; white-space: nowrap;
}
.paper-status-triage { background: rgba(234,179,8,0.18); color: #facc15; }
.paper-status-deep-read { background: rgba(59,130,246,0.18); color: #60a5fa; }
.paper-status-done { background: rgba(34,197,94,0.18); color: #4ade80; }
.paper-status-skip { background: var(--bg3); color: var(--fg3); }
.paper-status-interesting { background: rgba(168,85,247,0.18); color: #c084fc; }
.paper-row-actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  flex-shrink: 0; max-width: 45%;
}
.paper-act {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  padding: 4px 10px; border-radius: 5px; font-size: 0.8em; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.paper-act:hover { background: var(--bg3); border-color: var(--accent); }
.paper-act-link { color: var(--accent); }
.paper-act-busy { opacity: 0.5; }

@media (max-width: 768px) {
  #view-writing { padding: 16px; }
  .writing-header { flex-direction: column; }
  .writing-row-meta { font-size: 0.78em; }
  .paper-row { flex-direction: column; }
  .paper-row-actions { max-width: 100%; justify-content: flex-start; }
}

/* ===== Memory graph (#95) ===== */
#view-memory-graph { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 18px 20px; overflow: hidden; }
#view-memory-graph:not(.active) { display: none; }
.mg-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; }
.mg-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mg-header h2 { font-size: 1.4em; margin: 0 0 4px; }
.mg-subtitle { color: var(--fg2); font-size: 0.85em; margin: 0; }
.mg-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mg-search, .mg-select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg3);
  padding: 6px 10px; border-radius: 6px; font-size: 0.9em;
}
.mg-search { min-width: 200px; }
.mg-search:focus, .mg-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.mg-btn {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3);
  padding: 6px 12px; border-radius: 6px; font-size: 0.9em; cursor: pointer;
}
.mg-btn:hover { background: var(--bg3); }
.mg-btn-mini { padding: 3px 8px; font-size: 0.78em; }

.mg-body {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 12px; flex: 1; min-height: 0;
}
.mg-canvas-wrap {
  position: relative; background: var(--bg2);
  border: 1px solid var(--bg3); border-radius: 8px; overflow: hidden;
}
.mg-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.mg-canvas:active { cursor: grabbing; }
.mg-legend {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--bg); border: 1px solid var(--bg3);
  border-radius: 6px; padding: 6px 10px;
  display: flex; gap: 12px; font-size: 0.75em;
  flex-wrap: wrap; max-width: calc(100% - 20px);
}
.mg-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.mg-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mg-node-label { paint-order: stroke; stroke: var(--bg2); stroke-width: 3px; }

.mg-detail {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 14px; overflow-y: auto; min-height: 0;
}
.mg-detail-empty, .mg-detail-loading {
  color: var(--fg3); text-align: center; padding: 20px; font-size: 0.85em;
}
.mg-detail-error { color: #f87171; padding: 14px; font-size: 0.85em; }
.mg-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.mg-detail-title { font-weight: 600; font-size: 1.05em; }
.mg-detail-meta {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 10px; font-size: 0.78em; color: var(--fg2);
}
.mg-pill {
  padding: 1px 8px; border-radius: 10px; color: #fff;
  font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em;
}
.mg-detail-section { color: var(--fg3); }
.mg-detail-refs {
  font-size: 0.8em; color: var(--fg2);
  margin-bottom: 6px; line-height: 1.5;
}
.mg-detail-refs a { color: var(--accent); margin-right: 4px; }
.mg-detail-refs a:hover { text-decoration: underline; }
.mg-detail-body {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--bg3);
  font-size: 0.88em;
}

@media (max-width: 900px) {
  .mg-body { grid-template-columns: 1fr; }
  .mg-detail { max-height: 320px; }
}
@media (max-width: 768px) {
  #view-memory-graph { padding: 14px; }
}

/* Roadmap board view — idea cards in phase columns + anchor strip (#1336).
   Replaced the D3 force-graph canvas: same header/toolbar/detail shell, but
   the middle is deterministic HTML in the site card idiom (cf. Journey). */
#view-roadmap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 18px 20px; overflow: hidden; }
#view-roadmap:not(.active) { display: none; }
.rg-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--sp-3); }
.rg-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.rg-header h2 { font-size: var(--text-xl); margin: 0 0 4px; }
.rg-subtitle { color: var(--fg2); font-size: var(--text-sm); margin: 0; }
.rg-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.rg-search, .rg-select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px; font-size: 0.9em;
}
.rg-search { min-width: 200px; }
.rg-search:focus, .rg-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rg-btn {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 8px; font-size: 0.9em; cursor: pointer;
}
.rg-btn:hover { background: var(--bg3); }
.rg-btn-mini { padding: 3px 8px; font-size: var(--text-xs); }

/* Momentum strip under the title — status tally (raw → shipped). */
.rg-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: var(--text-xs); color: var(--fg2); }
.rg-stats:empty { display: none; }
.rg-stat { display: inline-flex; align-items: center; gap: 4px; }
.rg-stat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.rg-body {
  display: grid; grid-template-columns: 1fr 360px;
  gap: var(--sp-3); flex: 1; min-height: 0;
}
.rg-board-wrap {
  display: flex; flex-direction: column; gap: var(--sp-4);
  overflow-y: auto; min-height: 0; padding-right: 2px;
}

/* Phase columns */
.rg-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-3); align-items: start;
}
.rg-col {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3); min-width: 0;
}
.rg-col-head { margin-bottom: var(--sp-3); }
.rg-col-title {
  font-family: var(--mono); font-size: 0.78em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg2);
  display: flex; align-items: center; gap: 6px;
}
.rg-col-count {
  background: var(--bg3); color: var(--fg2); border-radius: 8px;
  padding: 0 7px; font-size: 0.9em; font-family: var(--font);
}
.rg-col-blurb { color: var(--fg3); font-size: var(--text-xs); margin-top: 3px; line-height: 1.4; }
.rg-col-cards { display: flex; flex-direction: column; gap: var(--sp-2); }
.rg-col-empty { color: var(--fg3); font-size: var(--text-xs); padding: var(--sp-2) 0; font-style: italic; }

/* Idea cards — status color rides the left edge + the pill. */
.rg-card {
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--rg-status, var(--fg3));
  border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: border-color 0.12s, opacity 0.12s, transform 0.12s;
}
.rg-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.rg-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rg-card-title { font-weight: 600; font-size: 0.95em; line-height: 1.3; min-width: 0; }
.rg-card-id { font-family: var(--mono); font-size: 0.68em; color: var(--fg3); margin-top: 2px; }
.rg-card-sub {
  color: var(--fg2); font-size: var(--text-xs); line-height: 1.45; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rg-chip {
  background: var(--bg3); color: var(--fg2); border: none;
  border-radius: 8px; padding: 2px 8px; font-size: 0.7em; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rg-chip:hover { color: var(--fg); background: var(--bg3); outline: 1px solid var(--accent); }
.rg-chip-anchor { color: #a99df5; }
.rg-chip-dep { color: var(--yellow); }
.rg-chip-sup { color: var(--red); }

/* Anchor strip — the durable threads ideas attach to. */
.rg-anchors { border-top: 1px dashed var(--border); padding-top: var(--sp-3); }
.rg-anchors-label {
  font-family: var(--mono); font-size: 0.78em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg2);
  margin-bottom: var(--sp-2);
}
.rg-anchors-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg3); font-family: var(--font); }
.rg-anchors-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rg-anchor-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 10px; font-size: var(--text-xs); cursor: pointer;
  transition: border-color 0.12s, opacity 0.12s;
}
.rg-anchor-chip:hover { border-color: var(--accent); }
.rg-anchor-sq { width: 10px; height: 10px; border-radius: 3px; background: #7c6cf0; flex: none; }
.rg-anchor-count { color: var(--fg3); }

/* Filter + selection states. Selecting a card/anchor is the edge display:
   connected nodes stay lit, the rest of the board fades. */
.rg-hidden { display: none; }
.rg-faded { opacity: 0.35; }
.rg-selected { outline: 2px solid var(--accent); outline-offset: 0; }
.rg-related { border-color: var(--accent); }
.rg-unrelated { opacity: 0.3; }

/* Detail sidebar */
.rg-detail {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; overflow-y: auto; min-height: 0;
}
.rg-detail-empty, .rg-detail-loading {
  color: var(--fg3); text-align: center; padding: 20px; font-size: var(--text-sm);
}
.rg-detail-error { color: var(--red); padding: 14px; font-size: var(--text-sm); }
.rg-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: 6px;
}
.rg-detail-title { font-weight: 600; font-size: 1.05em; }
.rg-detail-meta {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; font-size: var(--text-xs); color: var(--fg2);
}
.rg-pill {
  padding: 1px 8px; border-radius: 10px; color: #10131c; font-weight: 600;
  font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; flex: none;
}
.rg-pill-anchor { background: #7c6cf0; color: #fff; }
.rg-detail-phase { color: var(--fg3); text-transform: capitalize; }
.rg-rank { color: var(--fg3); font-size: 0.95em; }
.rg-detail-refs {
  font-size: 0.8em; color: var(--fg2);
  margin-bottom: 6px; line-height: 1.5;
}
.rg-detail-refs a { color: var(--accent); margin-right: 4px; }
.rg-detail-refs a:hover { text-decoration: underline; }
.rg-detail-body {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.88em;
}

@media (max-width: 900px) {
  .rg-body { grid-template-columns: 1fr; }
  .rg-detail { max-height: 320px; }
}
@media (max-width: 768px) {
  #view-roadmap { padding: 14px; }
  .rg-board { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------------------
   Invest view — deployment-context panel
   ---------------------------------------------------------------------------- */
#view-invest { flex: 1; display: block; overflow-y: auto; padding: 24px; }
.invest-verdict {
  background: var(--bg2); border: 1px solid var(--bg3); border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px;
}
.invest-verdict.tier-yellow { border-left-color: var(--yellow); }
.invest-verdict.tier-orange { border-left-color: #fb923c; }
.invest-verdict.tier-red { border-left-color: var(--red); }
.invest-verdict-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.invest-tier {
  font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 999px; color: var(--bg);
}
.invest-tier.tier-green { background: var(--green); }
.invest-tier.tier-yellow { background: var(--yellow); }
.invest-tier.tier-orange { background: #fb923c; }
.invest-tier.tier-red { background: var(--red); }
.invest-tier-label { color: var(--fg3); font-size: 0.82em; }
.invest-headline { margin: 0 0 14px; font-size: 1.02em; line-height: 1.5; }
.invest-guidance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.invest-guidance > div { background: var(--bg3); border-radius: var(--radius); padding: 12px 14px; }
.invest-g-label {
  display: block; font-size: 0.7em; color: var(--fg3); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
.invest-guidance p { margin: 0; font-size: 0.86em; color: var(--fg2); line-height: 1.45; }
.invest-table-wrap { overflow-x: auto; }
.invest-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.invest-table th {
  text-align: left; color: var(--fg3); font-size: 0.78em; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 6px 10px; border-bottom: 1px solid var(--bg3);
}
.invest-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg3); }
.invest-table td.num { font-family: var(--mono); text-align: right; font-size: 0.92em; }
.invest-table td.num.pos { color: var(--green); }
.invest-table td.num.neg { color: var(--red); }
.invest-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.invest-pill {
  background: var(--bg3); border-radius: 999px; padding: 5px 12px; font-size: 0.8em; color: var(--fg2);
}
.invest-pill strong { color: var(--fg); }
.invest-strategy-verdict { margin: 0 0 10px; font-size: 0.9em; color: var(--fg2); line-height: 1.5; }
.invest-rules { margin: 0; padding-left: 20px; font-size: 0.88em; line-height: 1.7; }
.invest-honesty { margin-top: 18px; font-style: italic; }

/* ---- Invest tab — BTC two-bucket tracker + signal ---- */
.invest-wrap { max-width: 1100px; margin: 0 auto; overflow-x: clip; }
.inv-trade-title { font-weight: 600; font-size: 0.92em; margin-bottom: 10px; }
.invest-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.invest-top-bar h2 { margin: 0; }
.invest-top-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Presentation controls: hide-balances + focus mode -------------------
   Two owner-facing toggles in the Invest top bar. See js/views/invest/privacy.js
   for the state machine; here is only the visual half. */
.inv-toggle-btn { white-space: nowrap; }
.inv-toggle-btn.inv-toggle-on {
  background: var(--accent); color: var(--bg1); border-color: var(--accent);
}

/* Balance privacy — blur every currency amount so the tab is safe to show to a
   friend. CSS-only, keyed off `.inv-private` on the invest container, so it
   toggles instantly and touches nothing outside this view. Each selector is a
   glance-visible money figure across the cockpit, §1 Portfolio, §3 Plan,
   §4 Projection and §5 Theses. Amounts tucked inside title="" tooltips are a
   deliberate, documented residual (they require a hover to surface). */
#view-invest.inv-private .inv-pf-stat-num,
#view-invest.inv-private .inv-mx-pos-main,
#view-invest.inv-private .inv-dca-amt,
#view-invest.inv-private .inv-dca-piece-amt,
#view-invest.inv-private .inv-dca-budget-amt,
#view-invest.inv-private .inv-dca-foot strong,
#view-invest.inv-private .inv-pf-cluster-val,
#view-invest.inv-private .inv-pf-custody-chip,
#view-invest.inv-private .inv-an-trend-now,
#view-invest.inv-private .inv-proj-headline,
#view-invest.inv-private .inv-proj-bd,
#view-invest.inv-private .inv-proj-from,
#view-invest.inv-private .inv-proj-ms,
#view-invest.inv-private .inv-rev-ratio {
  filter: blur(7px);
  -webkit-user-select: none; user-select: none;
  pointer-events: none;      /* don't let a friend click through to reveal */
  transition: filter 0.12s ease;
}
/* SVG donut centre figure (gross exposure) blurs via the same class. */
#view-invest.inv-private .inv-donut-amt { filter: blur(5px); }

/* Focus mode — full-screen the Invest tab: drop the sidebar/chat/other-app
   chrome so only Invest is visible. `.main` is flex:1 and reclaims the width
   automatically once the sidebar is gone. */
body.invest-focus .sidebar,
body.invest-focus .mobile-header,
body.invest-focus .mobile-overlay { display: none !important; }

/* Floating exit affordance — the ONLY way back out once the sidebar is hidden
   (plus the Esc key). Fixed, high z-index, above everything the tab renders. */
.inv-focus-exit {
  position: fixed; top: 12px; right: 12px; z-index: 10000;
  background: var(--accent); color: var(--bg1); border: none;
  border-radius: 8px; padding: 8px 14px; font-size: 0.85em; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.inv-focus-exit:hover { opacity: 0.9; }
/* App-tier sub-navigation (#1025) — Invest owns its own section nav; each link
   is a deep-linkable #invest/<slug> route, not just an in-page anchor. */
/* Sticky (#1039). With exactly one section mounted, the sub-nav IS the app's
   navigation — if it scrolls away you cannot see where you are or move without
   scrolling back. That is what forced the old scrollIntoView compensation, which
   jumped 5,215px on every tap and took the nav off screen with it. Pinning the
   nav is the structural half of the fix; the scroll-to-top router is the other.
   Bleeds to the view edges so the pill row sits on an opaque bar rather than
   letting content slide visibly behind a transparent strip. */
.invest-subnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 16px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--bg3);
  padding: 10px var(--view-pad);
  margin-left: calc(-1 * var(--view-pad));
  margin-right: calc(-1 * var(--view-pad));
}
/* A sticky element pins to the scrollport's CONTENT edge, so the view's own
   padding-top leaves a --view-pad gap above the pinned nav — and content
   scrolling underneath is visible through it (measured: a readable line of
   thesis text sat above the pills). Paint that band opaque. */
.invest-subnav::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--view-pad)); height: var(--view-pad);
  background: var(--bg);
}
.invest-subnav-link {
  font-size: 0.82em; padding: 4px 10px; border-radius: 999px;
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--bg3);
  white-space: nowrap;
}
.invest-subnav-link:hover { background: var(--bg3); color: var(--accent); }
/* The sub-nav routes rather than scrolls (#1033) — exactly one section is
   mounted, so the selected link has to read as selected or the page appears to
   have lost its other sections. */
.invest-subnav-link.active {
  background: var(--accent); color: var(--bg1); border-color: var(--accent); font-weight: 600;
}
.invest-subnav-link.active:hover { background: var(--accent); color: var(--bg1); }
/* Touch: the pills must meet the 44px touch-target floor (WCAG 2.5.5 /
   Apple HIG) — they measured 26px tall across five consecutive ui-audits at a
   375px viewport (#1326). `pointer: coarse` catches touch devices wider than
   the phone breakpoint (portrait iPad Air is 820 CSS px). Mouse-driven
   desktop keeps the compact pills; a pointer doesn't need the slack and
   taller pills grow the sticky nav band. */
@media (max-width: 768px), (pointer: coarse) {
  .invest-subnav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* The subnav is sticky and opaque, and the invest view deep-links via
   scrollIntoView({ block: "start" }) — without compensation those targets
   land under the pinned band (pre-existing; the 44px pills make the band
   taller, PR #1420 review). The band's height varies with pill wrapping, so
   use the per-breakpoint worst case; overshoot just leaves a small gap above
   the target. */
#view-invest [id] { scroll-margin-top: 70px; }
@media (max-width: 768px), (pointer: coarse) {
  #view-invest [id] { scroll-margin-top: 150px; }
}
.invest-btn-sm { font-size: 0.82em; padding: 4px 10px; }
.invest-divider { border: none; border-top: 1px solid var(--bg3); margin: 22px 0 18px; }
.invest-section-title { font-size: 1em; font-weight: 600; margin: 0 0 12px; }
.invest-subsection-title { font-size: 0.9em; font-weight: 600; color: var(--fg2); margin: 18px 0 10px; }
.invest-section-hint { font-size: 0.82em; font-weight: 400; color: var(--fg3); margin-left: 8px; }
.inv-price-bar { margin-bottom: 10px; }
.inv-price-main { display: flex; align-items: baseline; gap: 10px; }
.inv-btc-price { font-size: 1.7em; font-weight: 700; font-family: var(--mono); }
.inv-price-changes { font-size: 0.88em; color: var(--fg2); }
.inv-price-meta { font-size: 0.8em; color: var(--fg3); margin-top: 2px; }
.inv-settings-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.88em; }
.inv-settings-summary { color: var(--fg2); }
.inv-currency-select { background: var(--bg3); border: 1px solid var(--bg3); color: var(--fg); border-radius: var(--radius); padding: 3px 6px; font-size: 0.82em; cursor: pointer; }
.inv-settings-form { background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.inv-form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.88em; }
.inv-form-row label { min-width: 160px; color: var(--fg2); }
.inv-input { background: var(--bg3); border: 1px solid var(--bg3); color: var(--fg); border-radius: var(--radius); padding: 5px 8px; width: 120px; font-size: 0.92em; }
.inv-input:focus { border-color: var(--accent); outline: none; }
.inv-range { flex: 1; max-width: 180px; accent-color: var(--accent); }
.inv-form-actions { display: flex; gap: 8px; }
.inv-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
@media (max-width: 600px) { .inv-buckets { grid-template-columns: 1fr; } }
.inv-bucket { background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.inv-bucket-saylor { border-left: 3px solid var(--accent); }
.inv-bucket-trade  { border-left: 3px solid var(--yellow); }
.inv-bucket-header { display: flex; justify-content: space-between; align-items: center; }
.inv-bucket-name { font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; color: var(--fg3); text-transform: uppercase; }
.inv-bucket-pct { font-size: 0.88em; font-weight: 600; color: var(--fg2); }
.inv-bucket-btc { font-size: 1.15em; font-weight: 700; font-family: var(--mono); }
.inv-bucket-val { font-size: 0.92em; color: var(--fg2); font-family: var(--mono); }
.inv-bucket-tag { display: inline-block; font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; margin-top: 2px; align-self: flex-start; }
.inv-never { background: rgba(108,138,255,0.15); color: var(--accent); border: 1px solid rgba(108,138,255,0.3); }
.inv-bucket-note { font-size: 0.8em; color: var(--fg3); line-height: 1.4; margin-top: 4px; }
.inv-quarters-row { display: flex; align-items: center; gap: 6px; font-size: 0.88em; }
.inv-qlabel { color: var(--fg3); }
.inv-qdots { letter-spacing: 4px; font-size: 1.1em; color: var(--fg2); }
.inv-q.sold { color: var(--yellow); }
.inv-qcount { color: var(--fg3); font-family: var(--mono); font-size: 0.82em; }
.inv-bucket-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.inv-btn-buy  { color: var(--green)  !important; border-color: var(--green)  !important; }
.inv-btn-sell { color: var(--yellow) !important; border-color: var(--yellow) !important; }
.inv-btn-buy:hover  { background: rgba(52,211,153,0.12) !important; }
.inv-btn-sell:hover { background: rgba(251,191,36,0.12) !important; }
.inv-actions-log { margin-top: 10px; font-size: 0.82em; color: var(--fg3); }
.inv-log-title { font-weight: 600; margin-bottom: 4px; color: var(--fg2); }
.inv-log-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid var(--bg3); }

/* ---- Signal stack (decision playbook panel) ---- */
.inv-stack { background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0 10px; }
.inv-stack-title { font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg3); margin-bottom: 6px; }
.inv-stack-row { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--bg3); }
.inv-stack-left { min-width: 150px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-stack-horizon { font-size: 0.68em; font-weight: 700; letter-spacing: 0.07em; color: var(--accent); }
.inv-stack-horizon.always { color: var(--green); }
.inv-stack-name { font-weight: 600; font-size: 0.9em; }
.inv-stack-cadence { font-size: 0.74em; color: var(--fg3); }
.inv-stack-body { flex: 1; min-width: 0; }
.inv-stack-state { font-size: 0.88em; margin-bottom: 3px; }
.inv-stack-asof { font-size: 0.85em; color: var(--fg3); }
.inv-stack-text { font-size: 0.8em; color: var(--fg2); line-height: 1.5; }
.inv-stack-dca .inv-stack-text { color: var(--fg3); }
.inv-stack-foot { font-size: 0.74em; color: var(--fg3); padding-top: 8px; border-top: 1px solid var(--bg3); }
@media (max-width: 600px) {
  .inv-stack-row { flex-direction: column; gap: 4px; }
  .inv-stack-left { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
}

/* ---- Theses & positions ---- */
.inv-thesis { background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }

/* BTC thesis layer — sits above the two-bucket tracker; reuses the thesis
   card's primitives (head/status/claim/foot/action-panel) with a faint
   gold edge to mark it as the conviction hold. */
.inv-btc-thesis { background: var(--bg2); border: 1px solid rgba(247,147,26,0.28); border-left: 3px solid rgba(247,147,26,0.7); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
/* The verdict banner's horizon tag ("· the thesis") — keeps the strategic call
   visually distinct from the tactical trade-pile strip below it. */
.inv-action-scope { font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; }
/* Trade-pile loop strip — tactical 30%-pile signal, subordinate to the verdict
   banner above it. Calm/muted unless F&G fires (green add / red trim). */
.inv-tp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.8em; padding: 6px 10px; margin: -2px 0 8px; border-radius: var(--radius); background: var(--bg3); border-left: 3px solid var(--bg3); }
.inv-tp-tag { font-size: 0.82em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg3); flex-shrink: 0; }
.inv-tp-action { font-weight: 700; color: var(--fg2); flex-shrink: 0; }
.inv-tp-line { color: var(--fg2); line-height: 1.4; }
.inv-tp.inv-tp-green { border-left-color: var(--green); background: rgba(52,211,153,0.06); }
.inv-tp.inv-tp-green .inv-tp-action { color: var(--green); }
.inv-tp.inv-tp-red { border-left-color: var(--red); background: rgba(248,113,113,0.07); }
.inv-tp.inv-tp-red .inv-tp-action { color: var(--red); }
.inv-tp.inv-tp-yellow { border-left-color: var(--yellow); }
.inv-tp.inv-tp-yellow .inv-tp-action { color: var(--yellow); }
.inv-tp.inv-tp-gray .inv-tp-action { color: var(--fg3); }
.inv-doubts { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.inv-doubt { padding: 8px 10px; border-radius: var(--radius); background: var(--bg3); border-left: 3px solid rgba(247,147,26,0.5); }
.inv-doubt-q { font-size: 0.82em; font-weight: 600; color: var(--fg); margin-bottom: 3px; }
.inv-doubt-a { font-size: 0.8em; color: var(--fg2); line-height: 1.45; }
.inv-thesis-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-thesis-status { font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; }
.inv-thesis-status.th-active { background: rgba(52,211,153,0.15); color: var(--green); border: 1px solid rgba(52,211,153,0.3); }
.inv-thesis-status.th-watching { background: rgba(108,138,255,0.12); color: var(--accent); border: 1px solid rgba(108,138,255,0.3); }
.inv-thesis-status.th-exited { background: var(--bg3); color: var(--fg3); border: 1px solid var(--bg3); }
.inv-thesis-name { font-weight: 600; font-size: 0.95em; }
.inv-thesis-reviewed { font-size: 0.74em; color: var(--fg3); margin-left: auto; }
.inv-thesis-reviewed.stale { color: var(--yellow); }
.inv-thesis-claim { margin: 6px 0 10px; font-size: 0.84em; color: var(--fg2); line-height: 1.45; }
.inv-pos-table { margin-bottom: 8px; }
.inv-pos-sym { font-size: 0.78em; color: var(--fg3); font-family: var(--mono); }
.inv-gates { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.inv-gate { display: flex; gap: 8px; align-items: baseline; font-size: 0.84em; padding: 6px 8px; border-radius: var(--radius); background: var(--bg3); border-left: 3px solid transparent; }
.inv-gate-ok { border-left-color: var(--bg3); }
.inv-gate-near { border-left-color: var(--yellow); }
.inv-gate-hit { border-left-color: var(--red); background: rgba(248,113,113,0.08); }
.inv-gate-done { opacity: 0.55; }
.inv-gate-idle { border-left-color: var(--bg3); }
.inv-gate-flag { flex-shrink: 0; }
.inv-gate-near .inv-gate-flag { color: var(--yellow); }
.inv-gate-hit .inv-gate-flag { color: var(--red); }
.inv-gate-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.inv-gate-label { font-weight: 600; }
.inv-gate-eval { font-size: 0.86em; font-family: var(--mono); color: var(--fg2); }
.inv-gate-hit .inv-gate-eval { color: var(--red); font-weight: 600; }
.inv-gate-note { font-size: 0.84em; color: var(--fg3); line-height: 1.4; }
.inv-gate-action { font-size: 0.84em; color: var(--fg2); }
.inv-thesis-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.76em; color: var(--fg3); }
.inv-thesis-cap { color: var(--fg2); }
.inv-thesis-cap-eur { color: var(--fg3); font-family: var(--mono); }
.inv-thesis-ref { font-family: var(--mono); margin-right: auto; }
.inv-theses-note { margin-top: 4px; }

/* ---- "What to buy" leg/action table (basket theses) ---- */
.inv-legs-wrap { margin: 8px 0 10px; }
.inv-legs-title { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg2); margin-bottom: 5px; }
.inv-legs-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg3); margin-left: 6px; }
.inv-legs-table { font-size: 0.86em; }
.inv-legs-table th { font-size: 0.82em; }
.inv-legs-table td { vertical-align: top; }
.inv-leg-row { border-left: 3px solid transparent; }
.inv-leg-row.inv-leg-green  td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.inv-leg-row.inv-leg-yellow td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.inv-leg-row.inv-leg-red    td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.inv-leg-row.inv-leg-gray   td:first-child { box-shadow: inset 3px 0 0 var(--bg3); }
.inv-leg-row.inv-leg-gray, .inv-leg-row.inv-leg-red { opacity: 0.82; }
.inv-leg-name { padding-left: 10px; }
.inv-leg-title { display: block; font-weight: 600; color: var(--fg); }
.inv-leg-role { display: block; font-size: 0.84em; color: var(--fg3); line-height: 1.35; margin-top: 1px; }
.inv-leg-note { display: block; font-size: 0.82em; color: var(--fg3); line-height: 1.4; margin-top: 3px; }
.inv-leg-buy { display: flex; flex-direction: column; gap: 6px; }
.inv-leg-tk { display: block; }
.inv-leg-symline { display: block; white-space: nowrap; }
.inv-leg-sym { font-family: var(--mono); font-size: 0.92em; font-weight: 600; color: var(--fg2); }
.inv-leg-tk-primary .inv-leg-sym { font-weight: 700; color: var(--fg); }
.inv-leg-fullname { display: block; font-size: 0.78em; color: var(--fg3); line-height: 1.3; white-space: normal; margin-top: 1px; }
.inv-leg-px { color: var(--fg3); margin-left: 5px; font-size: 0.9em; font-family: var(--mono); }
.inv-leg-venue { display: inline-block; font-family: var(--font); font-size: 0.74em; color: var(--fg3); white-space: normal; margin-left: 6px; }
.inv-leg-noticker { color: var(--fg3); font-style: italic; font-size: 0.9em; }
.inv-leg-size { font-family: var(--mono); white-space: nowrap; color: var(--fg2); }
.inv-leg-eur { display: block; font-size: 0.86em; color: var(--fg3); margin-top: 1px; }
.inv-leg-when { white-space: nowrap; }
.inv-leg-when-pill { display: inline-block; font-size: 0.74em; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.inv-leg-when-pill.tone-green  { background: rgba(52,211,153,0.14); color: var(--green);  border-color: rgba(52,211,153,0.32); }
.inv-leg-when-pill.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); border-color: rgba(251,191,36,0.32); }
.inv-leg-when-pill.tone-red    { background: rgba(248,113,113,0.16); color: var(--red);   border-color: rgba(248,113,113,0.36); }
.inv-leg-when-pill.tone-gray   { background: var(--bg3); color: var(--fg3); }
/* Cross-reference pointer: a leg sized under another thesis. The pill beside it
   carries that home's real call; this names the home and jumps there on tap. */
.inv-leg-xref, .inv-mxleg-xref {
  display: inline-block; margin-top: 3px; font-size: 0.74em; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.inv-leg-xref:hover, .inv-mxleg-xref:hover { text-decoration: underline; }
.inv-mxleg-xref { display: block; }
/* "N vehicles · one call" cue — the tickers in a leg are alternative ways to
   express ONE thematic call, not separate positions each needing a verdict. */
.inv-leg-vehicles {
  display: block; margin-top: 4px; font-size: 0.72em; font-weight: 600;
  color: var(--fg3); letter-spacing: 0.01em; cursor: help;
}

/* ---- Promoted size/budget line + collapsible claim ---- */
.inv-thesis-sizing { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 0.82em; margin: 2px 0 10px; padding: 6px 10px; background: var(--bg3); border-radius: var(--radius); }
.inv-sizing-icon { flex-shrink: 0; }
.inv-sizing-text { color: var(--fg2); line-height: 1.4; }
.inv-thesis-sizing .inv-thesis-cap-eur { color: var(--fg3); font-family: var(--mono); white-space: nowrap; }
.inv-claim-toggle { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--fg3); font-size: 0.8em; cursor: pointer; padding: 2px 0; margin: 2px 0; }
.inv-claim-toggle:hover { color: var(--fg2); }

/* ---- Collapsible thesis card (the §4 list is scannable; a card opens on demand) ---- */
.inv-thesis-collapsed { padding: 9px 14px; }
.inv-thesis-head-toggle { cursor: pointer; user-select: none; }
.inv-thesis-head-toggle:hover .inv-thesis-name { color: var(--accent); }
.inv-thesis-collapsed .inv-thesis-head { margin: 0; }
.inv-thesis-chev { color: var(--fg3); font-size: 0.8em; flex-shrink: 0; width: 0.9em; }
.inv-thesis-headcall {
  font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bg3); background: var(--bg2); color: var(--fg2);
}
.inv-thesis-headcall.tone-green  { background: rgba(52,211,153,0.14); color: var(--green);  border-color: rgba(52,211,153,0.32); }
.inv-thesis-headcall.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); border-color: rgba(251,191,36,0.32); }
.inv-thesis-headcall.tone-red    { background: rgba(248,113,113,0.16); color: var(--red);   border-color: rgba(248,113,113,0.36); }
.inv-thesis-headcall.tone-gray   { background: var(--bg2); color: var(--fg3); }
.inv-thesis-headline { font-size: 0.82em; color: var(--fg2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; }
.inv-thesis-buyhint { font-size: 0.74em; color: var(--fg3); font-family: var(--mono); white-space: nowrap; }
.inv-thesis-headpending { font-size: 0.74em; color: var(--yellow); white-space: nowrap; }

/* ---- Close-a-thesis-without-the-brain inline picker ---- */
.inv-close-menu { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid var(--bg3); border-radius: var(--radius); background: var(--bg3); }
.inv-close-menu-title { font-size: 0.82em; color: var(--fg2); margin-bottom: 6px; }
.inv-close-reason { width: 100%; min-height: 36px; margin-bottom: 8px; }
.inv-close-do { border-color: var(--red) !important; }

/* ---- Portfolio snapshot card (the size denominator) ---- */
.inv-pf-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--bg2); }
.inv-pf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.inv-pf-title { font-weight: 600; font-size: 0.92em; }
.inv-pf-asof { font-size: 0.74em; color: var(--fg3); margin-right: auto; }
.inv-pf-head .invest-btn-sm { margin-left: auto; }
.inv-pf-prompt { font-size: 0.8em; color: var(--fg2); margin: 4px 0 0; line-height: 1.45; }
.inv-pf-hint { color: var(--fg3); }
.inv-pf-stats { display: flex; gap: 22px; margin: 8px 0 10px; flex-wrap: wrap; }
.inv-pf-stat { display: flex; flex-direction: column; }
.inv-pf-stat-num { font-size: 1.18em; font-weight: 600; font-family: var(--mono); }
.inv-pf-stat-lbl { font-size: 0.7em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.04em; }
.inv-pf-clusters { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 4px; }
.inv-pf-cluster-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.76em; margin-bottom: 3px; }
.inv-pf-cluster-label { color: var(--fg2); }
.inv-pf-cluster-val { color: var(--fg3); font-family: var(--mono); white-space: nowrap; }
.inv-pf-bar { height: 6px; border-radius: 3px; background: var(--bg3, rgba(127,127,127,0.18)); overflow: hidden; }
.inv-pf-bar-fill { height: 100%; background: var(--accent, #6aa3ff); border-radius: 3px; }
.inv-pf-foot { font-size: 0.72em; color: var(--fg3); margin: 8px 0 0; line-height: 1.45; }
.inv-pf-ref { font-family: var(--mono); }
/* Holdings ↔ thesis coverage badges (portfolio-reconcile) */
.inv-pf-cov { display: inline-block; font-size: 0.72em; font-weight: 500; padding: 0 5px; border-radius: 4px; margin-left: 4px; color: var(--fg3); background: var(--bg3, rgba(127,127,127,0.14)); white-space: nowrap; vertical-align: middle; }
.inv-pf-cov-core { color: var(--fg3); opacity: 0.7; }
.inv-pf-cov-warn { color: #b8860b; background: rgba(212,160,23,0.14); }
.inv-pf-cov-orphan { color: #c0392b; background: rgba(192,57,43,0.13); }
.inv-pf-orphan-banner { font-size: 0.78em; color: #c0392b; background: rgba(192,57,43,0.09); border-left: 3px solid rgba(192,57,43,0.55); padding: 6px 9px; border-radius: 4px; margin: 4px 0 8px; line-height: 1.4; }
/* Consolidated-portfolio custody breakdown (Scalable + BitBox + Kraken) */
.inv-pf-custody { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.inv-pf-custody-chip { font-size: 0.74em; font-family: var(--mono); color: var(--fg2); background: var(--bg3, rgba(127,127,127,0.12)); border: 1px solid rgba(127,127,127,0.18); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.inv-pf-custody-lev { color: #b8860b; border-color: rgba(212,160,23,0.4); background: rgba(212,160,23,0.10); }
/* Per-source freshness on each custody chip; red when a host sync has lapsed */
.inv-pf-custody-age { opacity: 0.7; }
.inv-pf-custody-stale { color: #c0392b; opacity: 1; font-weight: 600; }
.inv-pf-stale-banner { font-size: 0.78em; color: #c0392b; background: rgba(192,57,43,0.09); border-left: 3px solid rgba(192,57,43,0.55); padding: 6px 9px; border-radius: 4px; margin: 4px 0 8px; line-height: 1.4; }
/* One-tap fix for the only self-fixable stale source: an expired Scalable session (#948). */
.inv-pf-relink { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #c0392b; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.inv-pf-relink:hover { background: #a93226; }
/* Always-present muted form (#1484): the tab must never be un-re-linkable, even
   when nothing is stale — a broker session can die on a fresh snapshot. */
.inv-pf-relink-quiet { background: transparent; color: var(--fg2); font-weight: 500; font-size: 0.74em; border: 1px solid rgba(127,127,127,0.28); padding: 1px 7px; margin-left: 0; opacity: 0.8; }
.inv-pf-relink-quiet:hover { background: rgba(127,127,127,0.12); color: var(--fg); opacity: 1; }
/* The custody strip with no chips to carry — only the re-link control. */
.inv-pf-custody-bare { margin-top: 0; }
/* Portfolio analytics card — donut + concentration + net-worth trend */
.inv-an-card { margin-top: 10px; }
.inv-an-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin: 8px 0 4px; }
@media (max-width: 760px) { .inv-an-grid { grid-template-columns: 1fr; } }
.inv-an-cell { min-width: 0; }
.inv-an-cell-title { font-size: 0.8em; font-weight: 600; color: var(--fg2); margin-bottom: 6px; }
.inv-an-cell-sub { font-weight: 400; opacity: 0.7; font-size: 0.92em; }
/* trend */
.inv-an-trend-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.inv-an-trend-now { font-size: 1.35em; font-weight: 700; }
.inv-an-trend-lbl { font-size: 0.62em; font-weight: 400; color: var(--fg2); }
.inv-an-delta { font-size: 0.76em; font-weight: 600; }
.inv-an-delta.up { color: #1e9e5a; } .inv-an-delta.down { color: #c0392b; }
.inv-an-trend-chart { width: 100%; height: 132px; display: block; margin-top: 4px; }
.inv-an-trend-area { stroke: none; opacity: 0.13; }
.inv-an-trend-area.up { fill: #1e9e5a; } .inv-an-trend-area.down { fill: #c0392b; }
.inv-an-trend-line { fill: none; stroke-width: 2; }
.inv-an-trend-line.up { stroke: #1e9e5a; } .inv-an-trend-line.down { stroke: #c0392b; }
.inv-an-trend-axis { display: flex; justify-content: space-between; font-size: 0.68em; color: var(--fg2); margin-top: 2px; }
.inv-an-trend-empty { display: flex; flex-direction: column; gap: 6px; justify-content: center; height: 100%; }
.inv-an-empty-note { font-size: 0.76em; color: var(--fg2); line-height: 1.4; margin: 0; }
/* donut */
.inv-an-donut-wrap { display: flex; align-items: center; gap: 10px; }
.inv-donut { width: 96px; height: 96px; flex: none; }
.inv-donut circle { transition: stroke-dasharray 0.3s ease; }
.inv-donut-center { font-size: 13px; fill: var(--fg); font-weight: 600; }
.inv-donut-amt { font-size: 13px; }
.inv-an-legend { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inv-an-leg { display: flex; align-items: center; gap: 6px; font-size: 0.76em; }
.inv-an-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.inv-an-leg-lbl { color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-an-leg-pct { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
/* concentration */
.inv-an-conc-row { display: flex; align-items: center; gap: 6px; font-size: 0.76em; margin: 3px 0; }
.inv-an-conc-name { width: 52px; flex: none; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-an-conc-track { flex: 1; height: 7px; background: rgba(127,127,127,0.14); border-radius: 999px; overflow: hidden; }
.inv-an-conc-fill { height: 100%; background: linear-gradient(90deg, #4c8bf5, #6aa6ff); border-radius: 999px; }
.inv-an-conc-pct { width: 30px; text-align: right; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
/* BTC two-bucket position panel, embedded in its §4 registry card */
.inv-btc-panel { margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(127,127,127,0.22); }

/* §4 Projection — the "ETF Rechner" */
.inv-proj-card { background: var(--bg2, rgba(127,127,127,0.05)); border: 1px solid rgba(127,127,127,0.16); border-radius: 8px; padding: 12px 14px; }
.inv-proj-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inv-proj-from { font-size: 0.86em; color: var(--fg2); }
.inv-proj-assume { margin: 8px 0; padding: 8px 10px; background: rgba(127,127,127,0.06); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.inv-proj-num { width: 78px; font-family: var(--mono); }
.inv-proj-presets { display: inline-flex; gap: 4px; margin-left: 6px; }
.inv-proj-preset { font-size: 0.74em; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(127,127,127,0.25); background: transparent; color: var(--fg2); cursor: pointer; }
.inv-proj-preset.on { background: var(--accent, #2d7); color: #fff; border-color: transparent; }
.inv-proj-modes { display: inline-flex; gap: 0; margin: 10px 0 8px; border: 1px solid rgba(127,127,127,0.25); border-radius: 999px; overflow: hidden; }
.inv-proj-mode { font-size: 0.8em; padding: 4px 14px; background: transparent; border: 0; color: var(--fg2); cursor: pointer; }
.inv-proj-mode.on { background: var(--accent, #2d7); color: #fff; }
.inv-proj-control { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-size: 0.84em; color: var(--fg2); }
.inv-proj-control label { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.inv-proj-range { flex: 1; }
.inv-proj-headline { margin: 8px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inv-proj-big { font-size: 1.9em; font-weight: 700; font-family: var(--mono); color: var(--fg); line-height: 1.05; }
.inv-proj-sub { font-size: 0.84em; color: var(--fg2); }
.inv-proj-realtag { font-size: 0.72em; color: var(--fg3); border: 1px solid rgba(127,127,127,0.3); border-radius: 4px; padding: 0 4px; }
.inv-proj-breakdown { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 0.8em; font-family: var(--mono); }
.inv-proj-bd em { font-style: normal; color: var(--fg3); font-size: 0.86em; }
.inv-proj-bd-start { color: var(--fg2); }
.inv-proj-bd-con { color: #3a78c2; }
.inv-proj-bd-gain { color: #2a9d5a; }
.inv-proj-chart { width: 100%; height: auto; display: block; margin: 6px 0; }
.inv-proj-area-val { fill: rgba(42,157,90,0.16); stroke: none; }
.inv-proj-area-con { fill: rgba(58,120,194,0.22); stroke: none; }
.inv-proj-line-val { fill: none; stroke: #2a9d5a; stroke-width: 1.6; }
.inv-proj-tick { fill: var(--fg3); font-size: 9px; text-anchor: middle; font-family: var(--mono); }
.inv-proj-ms-head { font-size: 0.8em; color: var(--fg2); margin: 6px 0 4px; }
.inv-proj-milestones { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-proj-ms { font-size: 0.78em; font-family: var(--mono); padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(127,127,127,0.22); background: rgba(127,127,127,0.06); color: var(--fg); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.inv-proj-ms:hover { border-color: var(--accent, #2d7); }
.inv-proj-ms-eta { font-size: 0.82em; color: var(--fg3); }
.inv-dca-ceiling { display: block; font-size: 0.74em; color: #b8860b; margin-top: 2px; white-space: normal; }
.inv-pf-edit-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.inv-pf-c-label { flex: 1; }
.inv-pf-c-val { width: 110px; }
.inv-pf-edit-clusters-title { font-size: 0.8em; font-weight: 600; margin: 10px 0 6px; }

/* ---- Theses: stance banner, gate groups, editor, trade form ---- */
.inv-theses-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inv-theses-count { font-size: 0.78em; color: var(--fg3); }
.inv-stance { margin: 8px 0 6px; padding: 10px 12px; }
.inv-stance .inv-action-label { font-size: 0.85em; }
.inv-stance .inv-action-text { font-size: 0.84em; }
.inv-gates { gap: 0; }
.inv-gate-group { margin-bottom: 6px; }
.inv-gate-group .inv-gate { margin-bottom: 6px; }
.inv-gate-group-title { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg3); margin: 6px 0 4px; }
.inv-gates-howto {
  font-size: 0.78em; line-height: 1.6; color: var(--fg2);
  background: var(--bg2); border-radius: var(--radius); border-left: 3px solid var(--bg3);
  padding: 8px 12px; margin: 2px 0 10px;
}
.inv-gates-howto strong { color: var(--fg); }
.inv-gates-howto .inv-gate-badge,
.inv-gates-howto .inv-gate-latency { vertical-align: middle; margin: 0 1px; }
.inv-gate-group-dim { opacity: 0.55; }
.inv-thesis-editor { border-color: var(--accent); }
.inv-editor-sub { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg3); margin: 12px 0 6px; }
.inv-editor-row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
.inv-editor-row .inv-input { flex: 1; min-width: 90px; width: auto; }
.inv-editor-gate { background: var(--bg3); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; }
.inv-editor-gate .inv-editor-row { margin-bottom: 4px; }
.inv-input-wide { width: 100%; max-width: 420px; }
.inv-textarea { width: 100%; max-width: 420px; min-height: 54px; resize: vertical; font-family: inherit; }
.inv-th-ask { margin-top: 10px; }
.inv-ask-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.inv-ask-textarea { max-width: 100%; min-height: 60px; }
.inv-pending { font-size: 0.78em; color: var(--yellow); margin: 2px 0 8px; line-height: 1.4; }
.inv-theses-btns { display: flex; gap: 6px; flex-shrink: 0; }
.inv-closed-toggle {
  display: block; width: 100%; text-align: left; background: var(--bg2);
  border: 1px dashed var(--bg3); border-radius: var(--radius); color: var(--fg3);
  padding: 8px 12px; margin: 4px 0 10px; cursor: pointer; font-size: 0.85em;
}
.inv-closed-toggle:hover { color: var(--fg2); border-color: var(--fg3); }

/* ---- Cockpit strip (#636): monitor tiles + gate roll-up + legend ---- */
.inv-cock-verdict {
  display: flex; gap: 10px; align-items: flex-start; background: var(--bg2);
  border: 1px solid var(--bg3); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 10px; font-size: 0.9em; line-height: 1.45;
}
.inv-cock-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 10px; }
@media (max-width: 560px) { .inv-cock-tiles { grid-template-columns: repeat(2, 1fr); } }
.inv-cock-tile {
  background: var(--bg2); border: 1px solid var(--bg3); border-left: 4px solid var(--bg3);
  border-radius: var(--radius); padding: 10px 12px; min-width: 0;
}
.inv-cock-clickable { cursor: pointer; }
.inv-cock-clickable:hover { border-color: var(--fg3); }
.inv-cock-tile.tone-green  { border-left-color: var(--green); }
.inv-cock-tile.tone-yellow { border-left-color: var(--yellow); }
.inv-cock-tile.tone-orange { border-left-color: #fb923c; }
.inv-cock-tile.tone-red    { border-left-color: var(--red); background: rgba(248,113,113,0.06); }
.inv-cock-label { font-size: 0.66em; font-weight: 700; letter-spacing: 0.07em; color: var(--fg3); }
.inv-cock-value { font-size: 1.05em; font-weight: 700; margin: 2px 0; }
.tone-green  .inv-cock-value { color: var(--green); }
.tone-yellow .inv-cock-value { color: var(--yellow); }
.tone-orange .inv-cock-value { color: #fb923c; }
.tone-red    .inv-cock-value { color: var(--red); }
.inv-cock-sub { font-size: 0.74em; color: var(--fg3); line-height: 1.35; }
.inv-cock-attn { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.inv-cock-attn-row {
  display: flex; gap: 8px; align-items: baseline; text-align: left; width: 100%;
  background: var(--bg2); border: 1px solid var(--bg3); border-left: 3px solid var(--yellow);
  border-radius: var(--radius); padding: 8px 10px; cursor: pointer; font-size: 0.85em; color: var(--fg);
}
.inv-cock-attn-row.inv-attn-hit { border-left-color: var(--red); background: rgba(248,113,113,0.08); }
.inv-cock-attn-row.inv-attn-go { border-left-color: var(--green); background: rgba(52,211,153,0.08); }
.inv-cock-attn-row:hover { border-color: var(--fg3); }
.inv-attn-badge { font-size: 0.72em; font-weight: 700; letter-spacing: 0.05em; flex-shrink: 0; color: var(--yellow); }
.inv-attn-hit .inv-attn-badge { color: var(--red); }
.inv-attn-go .inv-attn-badge { color: var(--green); }
.inv-attn-text { min-width: 0; }
.inv-cock-attn-none { font-size: 0.82em; color: var(--fg3); padding: 4px 2px 6px; }
/* Standing calls (#848) — quieter than the event rows: dashed edge, muted text,
   no tinted background. These are discretionary advice, not alarms. */
.inv-cock-standing { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.inv-cock-standing-head { font-size: 0.74em; color: var(--fg3); letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 2px 0; cursor: help; }
.inv-cock-standing-row {
  display: flex; gap: 8px; align-items: baseline; text-align: left; width: 100%;
  background: transparent; border: 1px dashed var(--bg3); border-left: 3px dashed var(--fg3);
  border-radius: var(--radius); padding: 6px 10px; cursor: pointer; font-size: 0.82em; color: var(--fg2);
}
.inv-cock-standing-row:hover { border-color: var(--fg3); color: var(--fg); }
.inv-cock-standing-row.inv-standing-buy { border-left-color: var(--green); }
.inv-cock-standing-row.inv-standing-trim { border-left-color: var(--red); }
.inv-standing-badge-buy { color: var(--green); }
.inv-standing-badge-trim { color: var(--red); }
.inv-legend { font-size: 0.78em; color: var(--fg3); margin-bottom: 4px; }
.inv-legend summary { cursor: pointer; }
.inv-legend-body { display: flex; flex-direction: column; gap: 4px; padding: 8px 2px 2px; line-height: 1.55; }
.inv-legend .mono { font-family: var(--mono); color: var(--fg2); }

/* Portfolio review panel — the quarterly verdict, a periodic checkpoint under
   the cockpit. Left border tinted by posture; collapsible (native details). */
/* ---- Disappearing Edge doctrine anchor (#845) — top of the Today section ---- */
.inv-doctrine { background: var(--bg2); border: 1px solid var(--bg3); border-left: 3px solid var(--accent); border-radius: var(--radius); margin: 0 0 10px; }
.inv-doctrine-head { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; list-style: none; }
.inv-doctrine-head::-webkit-details-marker { display: none; }
.inv-doctrine-title { font-weight: 700; font-size: 0.9em; }
.inv-doctrine-sub { font-size: 0.76em; color: var(--fg3); }
.inv-doc-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.inv-doc-chip { font-family: var(--mono); font-size: 0.7em; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--bg3); color: var(--fg3); background: var(--bg); cursor: help; }
.inv-doc-chip.held { color: var(--green); border-color: rgba(52,211,153,0.32); background: rgba(52,211,153,0.10); }
.inv-doc-chip.gap { color: var(--yellow); border-color: rgba(251,191,36,0.32); background: rgba(251,191,36,0.10); }
.inv-doctrine-meta { font-size: 0.74em; color: var(--fg3); margin-left: auto; white-space: nowrap; }
.inv-doctrine-body { padding: 2px 12px 11px; display: flex; flex-direction: column; gap: 8px; }
.inv-doctrine-job { font-size: 0.88em; color: var(--fg2); line-height: 1.45; font-style: italic; }
.inv-doc-rows { display: flex; flex-direction: column; gap: 3px; }
.inv-doc-row { display: grid; grid-template-columns: 2.4em 9em minmax(10em, 1fr) minmax(12em, 2fr); gap: 8px; align-items: baseline; font-size: 0.8em; line-height: 1.4; padding: 4px 6px; background: var(--bg); border-radius: var(--radius); }
.inv-doc-row.gap { border-left: 2px solid var(--yellow); }
.inv-doc-id { font-family: var(--mono); font-weight: 700; color: var(--fg2); }
.inv-doc-name { font-weight: 600; color: var(--fg); }
.inv-doc-state { color: var(--fg3); }
.inv-doc-row.gap .inv-doc-state { color: var(--yellow); }
.inv-doc-why { color: var(--fg3); min-width: 0; }
.inv-doctrine-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.72em; color: var(--fg3); opacity: 0.85; }
.inv-doc-ref { font-family: var(--mono); margin-left: auto; }
@media (max-width: 720px) {
  .inv-doc-row { grid-template-columns: 2.4em 1fr; }
  .inv-doc-why { display: none; }
  .inv-doc-state { grid-column: 2; }
  .inv-doctrine-meta { margin-left: 0; white-space: normal; }
}
.inv-review { background: var(--bg2); border: 1px solid var(--bg3); border-left: 3px solid var(--bg3); border-radius: var(--radius); margin: 10px 0 2px; }
.inv-review.tone-yellow { border-left-color: var(--yellow); }
.inv-review.tone-red { border-left-color: var(--red); }
.inv-review.tone-green { border-left-color: var(--green); }
.inv-review-head { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; list-style: none; }
.inv-review-head::-webkit-details-marker { display: none; }
.inv-review-title { font-weight: 700; font-size: 0.9em; }
.inv-review-period { font-size: 0.8em; color: var(--fg3); }
.inv-review-posture { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; }
.inv-review-posture.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); border-color: rgba(251,191,36,0.32); }
.inv-review-posture.tone-red { background: rgba(248,113,113,0.16); color: var(--red); border-color: rgba(248,113,113,0.36); }
.inv-review-posture.tone-green { background: rgba(52,211,153,0.14); color: var(--green); border-color: rgba(52,211,153,0.32); }
.inv-review-posture.tone-gray { background: var(--bg3); color: var(--fg3); }
.inv-rev-due { font-size: 0.76em; color: var(--fg3); margin-left: auto; }
.inv-rev-due.overdue { color: var(--red); font-weight: 600; }
.inv-review-body { padding: 2px 12px 11px; display: flex; flex-direction: column; gap: 8px; }
.inv-review-headline { font-size: 0.86em; color: var(--fg2); line-height: 1.45; }
.inv-rev-ratios { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.78em; color: var(--fg3); }
.inv-rev-ratio b { color: var(--fg2); font-family: var(--mono); }
.inv-rev-actions { display: flex; flex-direction: column; gap: 4px; }
.inv-rev-action { display: flex; align-items: baseline; gap: 7px; font-size: 0.83em; line-height: 1.4; padding: 4px 6px; background: var(--bg); border-radius: var(--radius); }
.inv-rev-kind { font-size: 0.82em; font-weight: 600; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.inv-rev-text { color: var(--fg2); min-width: 0; flex: 1; }
.inv-rev-dl { font-family: var(--mono); font-size: 0.86em; color: var(--yellow); white-space: nowrap; flex-shrink: 0; }
.inv-review-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.72em; color: var(--fg3); opacity: 0.85; }
.inv-rev-ref { font-family: var(--mono); margin-left: auto; }
.lg-green { color: var(--green); } .lg-yellow { color: var(--yellow); }
.lg-orange { color: #fb923c; } .lg-red { color: var(--red); }
@keyframes invGateFlash { 0% { background: rgba(248,113,113,0.35); } 100% { background: rgba(248,113,113,0.08); } }
.inv-gate-flash { animation: invGateFlash 1.6s ease-out 2; }

/* ---- Cockpit "Today" verdict banner (cross-domain at-a-glance) ---- */
.inv-cock-today {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--bg3); border-left: 4px solid var(--bg3);
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 8px;
}
.inv-cock-today.tone-green  { border-left-color: var(--green);  background: rgba(52,211,153,0.07); }
.inv-cock-today.tone-yellow { border-left-color: var(--yellow); background: rgba(251,191,36,0.07); }
.inv-cock-today.tone-orange { border-left-color: #fb923c;       background: rgba(251,146,60,0.07); }
.inv-cock-today.tone-red    { border-left-color: var(--red);    background: rgba(248,113,113,0.09); }
.inv-cock-today-badge {
  font-size: 0.68em; font-weight: 800; letter-spacing: 0.07em; padding: 3px 9px;
  border-radius: 999px; flex-shrink: 0; text-transform: uppercase; color: var(--bg);
}
.tone-green  > .inv-cock-today-badge { background: var(--green);  }
.tone-yellow > .inv-cock-today-badge { background: var(--yellow); }
.tone-orange > .inv-cock-today-badge { background: #fb923c;       }
.tone-red    > .inv-cock-today-badge { background: var(--red);    }
.inv-cock-today-text { font-size: 0.92em; font-weight: 600; line-height: 1.4; min-width: 0; }
.inv-cock-posture { font-size: 0.82em; color: var(--fg2); line-height: 1.45; margin-bottom: 10px; }
.inv-cock-posture-label {
  font-size: 0.82em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg3); margin-right: 4px;
}

/* ---- Gate pills: plain-word labels instead of bare glyphs ---- */
.inv-gate-badge {
  flex-shrink: 0; font-size: 0.64em; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; align-self: center;
  background: var(--bg2); color: var(--fg3); border: 1px solid var(--bg3);
}
.inv-badge-hit  { background: var(--red);    color: var(--bg); border-color: var(--red); }
.inv-badge-buy  { background: var(--green);  color: var(--bg); border-color: var(--green); }
.inv-badge-near { background: var(--yellow); color: var(--bg); border-color: var(--yellow); }
.inv-badge-ok   { background: var(--bg2);    color: var(--fg3); }
.inv-badge-idle { background: rgba(108,138,255,0.14); color: var(--accent); border-color: rgba(108,138,255,0.3); }
.inv-badge-done { background: var(--bg3);    color: var(--fg3); }

/* ---- Gate latency pill: lead/lag character (EARLY/LATE/STOP), #656 ---- */
.inv-gate-latency {
  flex-shrink: 0; font-size: 0.56em; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px; align-self: center;
  border: 1px solid transparent; cursor: help; white-space: nowrap;
}
.inv-latency-contrarian   { background: rgba(108,138,255,0.16); color: var(--accent); border-color: rgba(108,138,255,0.34); }
.inv-latency-confirmation { background: rgba(251,191,36,0.16);  color: var(--yellow); border-color: rgba(251,191,36,0.34); }
.inv-latency-mechanical   { background: var(--bg2);             color: var(--fg3);    border-color: var(--bg3); }

/* ---- Thesis matrix: every bet on one line (aggregated roster) ---- */
.inv-mx-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.inv-mx-title { font-size: 0.92em; font-weight: 700; letter-spacing: 0.02em; }
.inv-mx-table { font-size: 0.86em; }
.inv-mx-table th { white-space: nowrap; }
.inv-mx-table td { vertical-align: middle; }
.inv-mx-row { cursor: pointer; }
.inv-mx-row:hover td { background: var(--bg2); }
.inv-mx-bet { white-space: nowrap; }
.inv-mx-name { font-weight: 700; margin-right: 6px; }
.inv-mx-stance {
  display: inline-block; font-size: 0.82em; font-weight: 700; line-height: 1.2;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--bg3); background: var(--bg2); color: var(--fg2);
}
.inv-mx-stance.tone-green  { background: rgba(52,211,153,0.14); color: var(--green);  border-color: rgba(52,211,153,0.32); }
.inv-mx-stance.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); border-color: rgba(251,191,36,0.32); }
.inv-mx-stance.tone-red    { background: rgba(248,113,113,0.16); color: var(--red);   border-color: rgba(248,113,113,0.36); }
.inv-mx-stance.tone-gray   { background: var(--bg2); color: var(--fg3); }
.inv-mx-stance-sub { display: block; font-size: 0.74em; color: var(--fg3); margin-top: 2px; }
.inv-mx-pos { white-space: nowrap; }
.inv-mx-pos-main { font-weight: 600; font-family: var(--mono); font-size: 0.94em; }
.inv-mx-pos-sub { display: block; font-size: 0.84em; font-family: var(--mono); color: var(--fg3); margin-top: 1px; }
.inv-mx-pos-sub .pos { color: var(--green); } .inv-mx-pos-sub .neg { color: var(--red); }
.inv-mx-dim { color: var(--fg3); font-weight: 500; }
.inv-mx-trig { min-width: 150px; }
.inv-mx-trig .inv-gate-badge { vertical-align: middle; margin-right: 6px; }
.inv-mx-decision { min-width: 130px; }
.inv-mx-decision-label { display: block; font-size: 0.88em; font-weight: 600; color: var(--fg2); line-height: 1.3; }
.inv-mx-decision-text { display: block; font-size: 0.78em; color: var(--fg3); margin-top: 2px; line-height: 1.35; }
.inv-mx-decision-more { display: inline-block; font-size: 0.74em; color: var(--fg3); margin-left: 5px; }

/* ---- Basket legs expanded inline in the overview matrix (what to buy) ---- */
.inv-mx-legtoggle {
  display: inline-block; background: none; border: 1px solid var(--bg3); border-radius: 999px;
  color: var(--fg3); font-size: 0.72em; cursor: pointer; padding: 1px 8px; margin-left: 2px; white-space: nowrap;
}
.inv-mx-legtoggle:hover { color: var(--fg2); border-color: var(--fg3); }
.inv-mx-legrow > td { background: var(--bg); border-top: none; padding-top: 5px; padding-bottom: 5px; font-size: 0.95em; }
.inv-mx-legrow .inv-mxleg-name-cell { padding-left: 18px; }
.inv-mx-legrow td:first-child { box-shadow: inset 3px 0 0 var(--bg3); }
.inv-mx-legrow.inv-leg-green  td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.inv-mx-legrow.inv-leg-yellow td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.inv-mx-legrow.inv-leg-red    td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.inv-mx-legrow.inv-leg-gray, .inv-mx-legrow.inv-leg-red { opacity: 0.85; }
.inv-mxleg-title { font-weight: 600; font-size: 0.92em; }
.inv-mxleg-role { display: block; font-size: 0.82em; color: var(--fg3); line-height: 1.3; }
.inv-mxleg-buy { white-space: normal; }
.inv-mxleg-tk { display: inline-block; margin-right: 10px; }
.inv-mxleg-sym { font-family: var(--mono); font-size: 0.9em; font-weight: 600; color: var(--fg2); }
.inv-mxleg-tk-primary .inv-mxleg-sym { font-weight: 700; color: var(--fg); }
.inv-mxleg-name { display: block; font-size: 0.76em; color: var(--fg3); line-height: 1.25; }
.inv-mxleg-when { display: block; font-size: 0.74em; color: var(--fg3); margin-top: 2px; line-height: 1.25; }
.inv-mxleg-size { font-family: var(--mono); font-size: 0.9em; color: var(--fg2); white-space: nowrap; }
.inv-mx-trig-body { display: inline-block; vertical-align: middle; min-width: 0; }
.inv-mx-trig-label { font-size: 0.9em; }
.inv-mx-trig-text { display: block; font-size: 0.8em; color: var(--fg3); margin-top: 1px; }

/* ---- Per-thesis "show the rules" toggle (kept for back-compat; button no longer rendered in cards) ---- */
.inv-gates-toggle {
  display: inline-block; background: none; border: none; color: var(--fg3);
  padding: 6px 0 2px; cursor: pointer; font-size: 0.8em; font-weight: 600;
}
.inv-gates-toggle:hover { color: var(--fg2); }
.inv-gates-toggle.has-attn { color: var(--yellow); }

/* ---- Gate-derived headline (replaces action banner) ---- */
.inv-gate-headline { margin: 6px 0 8px; padding: 10px 14px; border-radius: var(--radius); border-left: 4px solid transparent; }
.inv-gate-headline.wait   { background: var(--bg2); border-left-color: var(--bg3); }
.inv-gate-headline.hold   { background: var(--bg2); border-left-color: var(--fg3); }
.inv-gate-headline.buy    { background: rgba(52,211,153,0.08);  border-left-color: var(--green); }
.inv-gate-headline.sell   { background: rgba(248,113,113,0.08); border-left-color: var(--red); }
.inv-gate-headline.review { background: rgba(251,191,36,0.08);  border-left-color: var(--yellow); }
/* Unmapped verdict call (#787): visible neutral, distinct from the muted WAIT/HOLD
   so an unknown word never masquerades as a styled non-action. Full-strength fg +
   dashed accent reads as "something needs mapping" rather than a real verdict. */
.inv-gate-headline.unknown { background: var(--bg2); border-left-style: dashed; border-left-color: var(--fg); }
.inv-ghl-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inv-ghl-call { font-weight: 700; font-size: 0.92em; }
.inv-ghl-call.wait   { color: var(--fg2); }
.inv-ghl-call.hold   { color: var(--fg2); }
.inv-ghl-call.buy    { color: var(--green); }
.inv-ghl-call.sell   { color: var(--red); }
.inv-ghl-call.review { color: var(--yellow); }
.inv-ghl-call.unknown { color: var(--fg); }
.inv-ghl-text { font-size: 0.84em; color: var(--fg2); flex: 1; min-width: 0; }
/* Stage-1 merit pill beside the Stage-2 call (#740) */
.inv-ghl-merit { flex-shrink: 0; align-self: center; font-size: 0.64em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: var(--bg2); color: var(--fg3); border: 1px solid var(--bg3); cursor: help; }
.inv-ghl-merit.tone-buy { color: var(--green); border-color: rgba(52,211,153,0.32); background: rgba(52,211,153,0.10); }
.inv-ghl-merit.tone-sell { color: var(--red); border-color: rgba(248,113,113,0.36); background: rgba(248,113,113,0.10); }
.inv-ghl-merit.tone-neutral { color: var(--fg2); }
/* Freshness chip (#1105/#1438): verdict-written date · last-checked · next
   sweep. Three segments, so it may wrap on narrow cards — right-aligned. */
.inv-ghl-asof { font-size: 0.78em; color: var(--fg3); white-space: normal; text-align: right; margin-left: auto; }
/* Verdict older than the 30-day review cooldown (#1083) — the prose's figures are
   dated; the chip turns amber so a month-old call can't pass as today's. */
.inv-ghl-asof-stale { color: var(--yellow); }
.inv-ghl-oneliner { font-size: 0.84em; color: var(--fg3); line-height: 1.4; margin-top: 4px; }
/* Full-reasoning disclosure (#1438): the verdict's evidence paragraph lives
   behind this, so the headline stays a headline. */
.inv-ghl-detail { margin-top: 3px; }
.inv-ghl-detail summary { font-size: 0.76em; color: var(--fg3); opacity: 0.85; cursor: pointer; user-select: none; }
.inv-ghl-detail summary:hover { color: var(--fg2); }
.inv-ghl-detail-body { font-size: 0.82em; color: var(--fg3); line-height: 1.5; margin-top: 4px;
  padding: 6px 8px; border-radius: 6px; background: var(--bg2); border-left: 2px solid var(--bg3); white-space: pre-line; }
/* Reconciliation line (#994): shown only when a fired gate produces a call in a
   different action family than the authored verdict. It names the superseded
   call and the gate that superseded it, so the card explains itself instead of
   leaving the owner to reconcile a HOLD headline against an ADD gate row. */
.inv-ghl-reconcile { font-size: 0.8em; color: var(--fg2); line-height: 1.45; margin-top: 5px;
  padding: 5px 8px; border-radius: 6px; background: var(--bg2); border-left: 2px solid var(--fg3); }
.inv-ghl-reconcile b { color: var(--fg); font-weight: 650; }
/* The authored one-liner under an overriding headline is history, not today's
   instruction — the tag says so out loud. */
.inv-ghl-oneliner-standing { opacity: 0.82; }
.inv-ghl-standing-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--bg3); color: var(--fg3); font-size: 0.88em; white-space: nowrap; }
.inv-verdict-history { font-size: 0.74em; color: var(--fg3); opacity: 0.8; line-height: 1.4; margin-top: 4px; letter-spacing: 0.02em; }
.inv-verdict-history .inv-vh-when { opacity: 0.65; }
/* Fused meta line under the headline: ownership · what just resolved · next
   checkpoint. The three axes the owner kept reading as rival verdicts, said as
   one quiet sentence so the call (above) is never mistaken for them. */
.inv-ghl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.78em; color: var(--fg3); line-height: 1.4; margin-top: 5px; }
.inv-ghl-meta-part { position: relative; }
.inv-ghl-meta-part:not(:last-child)::after { content: "·"; position: absolute; right: -6px; color: var(--fg3); opacity: 0.5; }
.inv-attach-row { margin-top: 6px; gap: 8px; align-items: center; }
.inv-attach-row label { font-size: 0.82em; color: var(--fg2); white-space: nowrap; }

/* ---- Flat gate list (per-card design: dormant / fired / catalyst, typed by left-border colour) ---- */
.inv-gate-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.inv-gl-row { display: flex; align-items: baseline; gap: 6px; font-size: 0.84em; padding: 5px 8px; border-radius: var(--radius); }
.inv-gl-dormant { background: var(--bg2); border-left: 3px solid var(--bg3); }
.inv-gl-fired-entry  { background: rgba(52,211,153,0.08);  border-left: 3px solid var(--green); }
.inv-gl-fired-exit   { background: rgba(248,113,113,0.08); border-left: 3px solid var(--red); }
.inv-gl-fired-review { background: rgba(251,191,36,0.08);  border-left: 3px solid var(--yellow); }
.inv-gl-cond { font-family: var(--mono); font-size: 0.9em; color: var(--fg3); white-space: nowrap; flex-shrink: 0; }
.inv-gl-arrow { color: var(--fg3); flex-shrink: 0; }
.inv-gl-wouldact { color: var(--fg2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Catalyst row — a dated event checkpoint that re-underwrites the thesis. Two
   lines: the catalyst + countdown on top, the branching decision it settles
   below (verbatim, no "would" prefix — these are decisions, not imperatives). */
.inv-gl-catalyst { background: var(--bg2); border-left: 3px solid var(--yellow); align-items: flex-start; }
.inv-gl-cat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inv-gl-cat-head { display: flex; align-items: baseline; gap: 8px; }
.inv-gl-cat-label { font-weight: 600; color: var(--fg2); min-width: 0; }
.inv-gl-cat-head .inv-gl-priceinfo { margin-left: auto; }
.inv-gl-cat-decides { font-size: 0.92em; color: var(--fg3); line-height: 1.4; }
/* Date provenance (#759): estimate vs confirmed, + when last verified. Keeps a
   creation-time guess from masquerading as a live schedule on the countdown. */
.inv-gl-cat-prov { font-size: 0.78em; color: var(--fg3); line-height: 1.35; opacity: 0.85; margin-top: 1px; }
.inv-gl-cat-prov.est::before { content: "◇ "; }
.inv-gl-cat-prov.confirmed { color: var(--green, var(--fg3)); }
.inv-gl-cat-prov.confirmed::before { content: "✓ "; }
.inv-gl-now.review { color: var(--yellow); }
/* Entry corridor — two opposite entry triggers drawn as one band (#redesign2).
   Both edges are buy zones (green); the dim middle is the do-nothing zone, so a
   price marker resting in the middle reads as WAIT, not as two competing orders. */
.inv-corridor { background: var(--bg2); border-radius: var(--radius); padding: 10px 12px 8px; margin: 2px 0 8px; border-left: 3px solid var(--bg3); }
.inv-corridor.inv-cor-buy { border-left-color: var(--green); background: rgba(52,211,153,0.06); }
.inv-cor-status { font-size: 0.84em; color: var(--fg2); margin-bottom: 6px; }
.inv-cor-buy .inv-cor-status { color: var(--green); font-weight: 600; }
.inv-cor-track { display: flex; align-items: center; gap: 10px; }
.inv-cor-edge { flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; min-width: 70px; }
.inv-cor-edge.high { text-align: right; }
.inv-cor-elabel { font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg3); }
.inv-cor-eprice { font-family: var(--mono); font-size: 0.84em; font-weight: 700; color: var(--fg2); }
.inv-cor-edge.fired .inv-cor-eprice { color: var(--green); }
.inv-cor-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; margin: 22px 0 18px;
  background: linear-gradient(90deg, var(--green), var(--bg3) 34%, var(--bg3) 66%, var(--green)); }
.inv-cor-now { position: absolute; top: 50%; }
.inv-cor-dot { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--fg); border: 2px solid var(--bg); box-shadow: 0 0 0 1.5px var(--fg2); }
.inv-cor-now.edge-low .inv-cor-dot, .inv-cor-now.edge-high .inv-cor-dot { background: var(--green); box-shadow: 0 0 0 1.5px var(--green); }
.inv-cor-nowlbl { position: absolute; top: 9px; left: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 0.74em; color: var(--fg2); white-space: nowrap; }
.inv-cor-actions { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.inv-cor-act { font-size: 0.8em; color: var(--fg3); line-height: 1.4; }
.inv-cor-actdir { font-family: var(--mono); font-weight: 700; color: var(--fg2); margin-right: 4px; }
.inv-gl-priceinfo { font-family: var(--mono); font-size: 0.82em; color: var(--fg3); margin-left: auto; white-space: nowrap; flex-shrink: 0; padding-left: 6px; }
/* Scale-in ladder (#678) — sibling rungs of one logical entry/exit grouped
   under a header; each rung row is a normal gate row with a step tag. */
.inv-ladder { background: var(--bg2); border-radius: var(--radius); border-left: 3px solid var(--bg3); padding: 8px 10px 6px; margin: 2px 0 8px; }
.inv-ladder-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.inv-ladder-title { font-size: 0.74em; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--fg2); }
.inv-ladder-state { font-size: 0.78em; color: var(--fg3); margin-left: auto; white-space: nowrap; }
.inv-ladder-rung { display: flex; align-items: baseline; gap: 6px; }
.inv-ladder-rung > .inv-gl-row { flex: 1; }
.inv-rung-tag { font-family: var(--mono); font-size: 0.74em; font-weight: 700; color: var(--fg3); white-space: nowrap; flex-shrink: 0; min-width: 3.2em; }
.inv-gl-now { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.inv-gl-now.entry { color: var(--green); }
.inv-gl-now.exit  { color: var(--red); }
.inv-gl-fired-action { font-weight: 600; min-width: 0; }
/* Resolved-gate "wake" — a fired/dismissed gate kept visible for ~2 weeks so a
   trigger that resolves the same day it's read doesn't vanish without a trace.
   Muted by design: it's history, not an action. ✓ = fired, — = no longer in play. */
/* Held trigger (#1053): condition met but the gate's status is not "armed"
   (needs-diagnosis corporate-action hold etc.) — visibly paused, never act-now. */
.inv-gl-held { background: rgba(251,191,36,0.06); border-left: 3px solid var(--yellow); opacity: 0.9; }
.inv-gl-held-mark { font-weight: 700; color: var(--yellow); flex-shrink: 0; }
.inv-gl-held-label { color: var(--fg2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-gl-held-why { color: var(--fg3); font-size: 0.85em; min-width: 0; }
.inv-gl-resolved { background: var(--bg2); border-left: 3px solid var(--bg3); opacity: 0.72; }
.inv-gl-resolved.resolved-done { border-left-color: var(--green); }
.inv-gl-resolved-mark { font-weight: 700; flex-shrink: 0; color: var(--fg3); }
.resolved-done .inv-gl-resolved-mark { color: var(--green); }
.inv-gl-resolved-label { color: var(--fg2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-gl-resolved-state { font-size: 0.86em; color: var(--fg3); margin-left: auto; white-space: nowrap; flex-shrink: 0; padding-left: 6px; }
.inv-gl-fired-detail { font-family: var(--mono); font-size: 0.82em; color: var(--fg3); margin-left: auto; white-space: nowrap; flex-shrink: 0; padding-left: 6px; }
/* Deteriorated entry window (#819): a FIRED entry gate whose price has run
   >DETERIORATION_PCT past the trigger. The green "act now" edge shifts amber and a
   "may be late" flag appears, so a fired gate the owner never acted on stops reading
   as a fresh buy the longer it drifts. Answers "am I too late?" at a glance. */
.inv-gl-fired-entry.inv-gl-fired-aging { background: rgba(251,191,36,0.09); border-left-color: var(--yellow); }
.inv-gl-fired-aging .inv-gl-now.entry { color: var(--yellow); }
.inv-gl-fired-late { font-size: 0.74em; font-weight: 600; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; flex-shrink: 0; }

/* Narrow-width gate rows (#1041). The trailing monospace column on a gate row
   — .inv-gl-fired-detail on a fired row, .inv-gl-priceinfo on a dormant row (the
   "000660.KS < $2000000" gate string) — is white-space:nowrap + flex-shrink:0, so
   on a phone it holds its full intrinsic width and starves the flexible middle
   column (.inv-gl-fired-action, which has no ellipsis) until the action text wraps
   one word per line. Below 640px let the row wrap and force that trailing column
   onto its own full-width line beneath the action, so the action gets the whole
   row width back. Scoped with `>` so the catalyst row's nested
   .inv-gl-cat-head .inv-gl-priceinfo (a grandchild) is untouched. */
@media (max-width: 640px) {
  .inv-gl-row { flex-wrap: wrap; }
  .inv-gl-row > .inv-gl-fired-detail,
  .inv-gl-row > .inv-gl-priceinfo {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 0;
    white-space: normal;
  }
}

/* ---- Judgment-style gates, split by owner (#721) ----
   The old single "Also watch" / JUDGMENT block told the owner nothing about WHAT
   the condition was or whether they had to act. Two blocks now: "Your call"
   (decisions only the owner can make — styled to ask for attention) and "Brain is
   watching" (facts ML4YOU checks — muted, with a last-checked status). */
.inv-gl-block-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg3); }

/* Your call — owner decisions. Accent edge so it reads as "this one needs you". */
.inv-gl-yourcall { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.inv-gl-yourcall-title { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 6px; }
.inv-gl-decision { padding: 5px 0; border-top: 1px solid var(--bg3); }
.inv-gl-decision:first-of-type { border-top: none; }
.inv-gl-decision-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.inv-gl-decision-badge { font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.inv-gl-decision-q { font-size: 0.9em; font-weight: 600; color: var(--fg2); }
.inv-gl-decision-conseq { font-size: 0.82em; color: var(--fg3); margin-top: 3px; padding-left: 2px; }
.inv-gl-decision.fired .inv-gl-decision-q { color: var(--yellow); }

/* ML4YOU is watching — researchable facts. Muted; the owner shouldn't have to read
   these unless one fires (and a fired one escalates the whole card via evalGate). */
.inv-gl-watching { margin: 8px 0; }
.inv-gl-watching-title { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg3); margin-bottom: 4px; }
.inv-gl-watch-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.82em; line-height: 1.5; padding: 3px 0 3px 10px; border-left: 2px solid var(--bg3); margin-bottom: 3px; }
.inv-gl-watch-main { min-width: 0; }
.inv-gl-watch-cond { color: var(--fg2); }
.inv-gl-watch-conseq { color: var(--fg3); margin-left: 4px; }
.inv-gl-watch-status { font-family: var(--mono); font-size: 0.92em; color: var(--fg3); white-space: nowrap; flex-shrink: 0; }
.inv-gl-watch-status.fired { color: var(--yellow); font-weight: 700; white-space: normal; }
.inv-gl-watch-row.fired { border-left-color: var(--yellow); }
.inv-gl-watch-row.fired .inv-gl-watch-cond { color: var(--yellow); font-weight: 600; }

.inv-signal-wrap { margin-bottom: 4px; }
.inv-fng-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.inv-fng-number { font-size: 2.2em; font-weight: 800; font-family: var(--mono); line-height: 1; }
.inv-fng-number.inv-fng-extreme-fear { color: var(--green); }
.inv-fng-number.inv-fng-fear { color: #4ade80; }
.inv-fng-number.inv-fng-neutral { color: var(--fg2); }
.inv-fng-number.inv-fng-greed { color: var(--yellow); }
.inv-fng-number.inv-fng-extreme-greed { color: var(--red); }
.inv-fng-class { font-size: 1em; font-weight: 600; color: var(--fg); }
.inv-fng-stale { font-size: 0.78em; color: var(--fg3); }
.inv-meter-wrap { margin-bottom: 14px; }
.inv-meter { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(to right, var(--green) 0%, #4ade80 20%, var(--yellow) 50%, #fb923c 75%, var(--red) 100%); margin-bottom: 4px; }
.inv-meter-needle { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--fg); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 4px rgba(0,0,0,0.5); }
.inv-meter-labels { display: flex; justify-content: space-between; font-size: 0.68em; color: var(--fg3); margin-top: 2px; }
.inv-fng-history { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; height: 60px; }
.inv-fng-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; flex: 1; }
.inv-fng-bar { width: 100%; border-radius: 2px 2px 0 0; }
.inv-fng-bar.inv-fng-extreme-fear { background: var(--green); }
.inv-fng-bar.inv-fng-fear { background: #4ade80; }
.inv-fng-bar.inv-fng-neutral { background: var(--fg3); }
.inv-fng-bar.inv-fng-greed { background: var(--yellow); }
.inv-fng-bar.inv-fng-extreme-greed { background: var(--red); }
.inv-fng-val { font-size: 0.7em; font-family: var(--mono); color: var(--fg2); }
.inv-fng-day { font-size: 0.65em; color: var(--fg3); }
.inv-action-panel { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; border-left: 4px solid transparent; }
.inv-action-buy        { background: rgba(52,211,153,0.1);  border-left-color: var(--green);  }
.inv-action-accumulate { background: rgba(74,222,128,0.08); border-left-color: #4ade80;        }
.inv-action-neutral    { background: var(--bg2);            border-left-color: var(--bg3);    }
.inv-action-watch      { background: rgba(251,191,36,0.08); border-left-color: var(--yellow); }
.inv-action-sell       { background: rgba(248,113,113,0.1); border-left-color: var(--red);    }
.inv-action-label { font-weight: 700; font-size: 0.92em; margin-bottom: 4px; }
.inv-action-text  { font-size: 0.88em; color: var(--fg2); line-height: 1.5; }
.inv-verdict-asof { font-size: 0.82em; opacity: 0.65; }
.inv-stance-secondary { font-size: 0.8em; color: var(--fg2); padding: 5px 12px; margin: -4px 0 8px; border-left: 3px solid var(--yellow); background: rgba(251,191,36,0.04); border-radius: 0 var(--radius) var(--radius) 0; }
.inv-rules { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.inv-rule { display: flex; align-items: flex-start; gap: 10px; background: var(--bg2); border-radius: var(--radius); padding: 10px 14px; font-size: 0.88em; line-height: 1.5; }
.inv-rule-buy  { border-left: 3px solid var(--green); }
.inv-rule-sell { border-left: 3px solid var(--red); }
.inv-rule-icon { flex-shrink: 0; }

/* ---- §4 DCA plan — ranked deployment overlay (investment-dca-plan.json) ---- */
/* Advisor-allocation header — the one editable number that drives the split */
.inv-dca-budget {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius);
  padding: 12px 14px; margin: 4px 0 14px;
}
.inv-dca-budget-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inv-dca-budget-label { font-size: 0.84em; color: var(--fg2); font-weight: 600; }
.inv-dca-budget-amt { font-family: var(--mono); font-size: 1.25em; font-weight: 700; color: var(--fg); }
.inv-dca-budget-unset .inv-dca-budget-amt { color: var(--fg3); font-weight: 500; }
.inv-dca-budget-pieces { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.inv-dca-budget-piece { display: flex; flex-direction: column; gap: 1px; }
.inv-dca-piece-amt { font-family: var(--mono); font-size: 0.98em; font-weight: 600; color: var(--fg); }
.inv-dca-piece-mech .inv-dca-piece-amt { color: var(--fg2); font-weight: 500; }
.inv-dca-piece-lbl { font-size: 0.74em; color: var(--fg3); }
.inv-dca-budget-note { font-size: 0.78em; color: var(--fg3); line-height: 1.45; margin: 9px 0 0; }
.inv-dca-etf-pool { font-family: var(--mono); font-size: 0.82em; font-weight: 600; color: var(--fg2); }
.inv-dca-constraint {
  display: flex; align-items: flex-start; gap: 9px; font-size: 0.84em; line-height: 1.45;
  background: rgba(248,113,113,0.08); border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 9px 12px; margin: 4px 0 12px; color: var(--fg2);
}
.inv-dca-constraint-icon { flex-shrink: 0; }
.inv-dca-axes { font-size: 0.86em; color: var(--fg2); line-height: 1.5; margin: 0 0 14px; }
/* Recommended-to-add (#854): a live buy verdict with no plan row. Green dashed
   callout — actionable but not an alarm; distinct from the solid now-tier table. */
.inv-dca-prop { border: 1px dashed var(--green); border-radius: var(--radius); background: rgba(52,211,153,0.05); padding: 10px 12px; margin: 0 0 18px; }
.inv-dca-prop-head { font-size: 0.86em; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.inv-dca-prop-hint { margin-bottom: 8px; }
.inv-dca-prop-row { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--bg3); flex-wrap: wrap; }
.inv-dca-prop-main { display: flex; gap: 8px; align-items: baseline; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.inv-dca-prop-main:hover { background: var(--bg2); }
.inv-dca-prop-actions { display: flex; gap: 6px; flex-shrink: 0; }
.inv-dca-prop-actions .invest-btn-sm { white-space: nowrap; }
.inv-dca-prop-badge { font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; color: var(--green); flex-shrink: 0; }
.inv-dca-prop-name { font-size: 0.85em; font-weight: 600; flex-shrink: 0; }
.inv-dca-prop-why { font-size: 0.8em; color: var(--fg2); min-width: 0; }
/* At-target sip pause + redirect (#856) */
.inv-dca-row-paused { opacity: 0.72; }
.inv-dca-paused-amt { color: var(--fg3); font-style: italic; }
.inv-dca-ceiling-done { color: var(--green) !important; border-color: var(--green) !important; }
.inv-dca-paused-note { font-size: 0.8em; color: var(--fg2); line-height: 1.4; margin-top: 8px; padding: 6px 9px; background: rgba(52,211,153,0.06); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; }
.inv-dca-unalloc-note { background: rgba(251,146,60,0.08); border-left-color: #fb923c; }
.inv-dca-group { margin-bottom: 18px; }
.inv-dca-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.inv-dca-tier {
  display: inline-block; font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
}
.inv-dca-tier.tone-green  { background: rgba(52,211,153,0.14); color: var(--green);  border-color: rgba(52,211,153,0.32); }
.inv-dca-tier.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); border-color: rgba(251,191,36,0.32); }
.inv-dca-tier.tone-gray   { background: var(--bg3); color: var(--fg3); }
.inv-dca-group-hint { font-size: 0.78em; color: var(--fg3); }
.inv-dca-table td { vertical-align: top; }
.inv-dca-row.inv-dca-clickable { cursor: pointer; }
.inv-dca-row.inv-dca-clickable:hover { background: var(--bg2); }
.inv-dca-namecell { min-width: 150px; }
.inv-dca-rank { font-family: var(--mono); font-size: 0.8em; color: var(--fg3); margin-right: 6px; }
.inv-dca-name { font-weight: 600; }
.inv-dca-sym { font-family: var(--mono); font-size: 0.78em; color: var(--fg3); margin-left: 6px; }
.inv-dca-px { font-family: var(--mono); font-size: 0.8em; color: var(--fg2); margin-left: 6px; }
.inv-dca-day { font-family: var(--mono); font-size: 0.76em; margin-left: 5px; }
.inv-dca-day.pos { color: var(--green); } .inv-dca-day.neg { color: var(--red); }
.inv-dca-leg { display: block; font-size: 0.76em; color: var(--fg3); margin-top: 2px; }
.inv-dca-call {
  display: inline-block; font-size: 0.74em; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.inv-dca-call.tone-green  { background: rgba(52,211,153,0.14); color: var(--green);  border-color: rgba(52,211,153,0.32); }
.inv-dca-call.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); border-color: rgba(251,191,36,0.32); }
.inv-dca-call.tone-red    { background: rgba(248,113,113,0.16); color: var(--red);   border-color: rgba(248,113,113,0.36); }
.inv-dca-call.tone-gray   { background: var(--bg2); color: var(--fg3); }
.inv-dca-call.inv-dca-nothesis { background: var(--bg2); color: var(--fg3); font-weight: 600; }
.inv-dca-amt { font-family: var(--mono); white-space: nowrap; }
.inv-dca-permo { font-size: 0.8em; color: var(--fg3); }
.inv-dca-amt-sub { display: block; font-size: 0.78em; color: var(--fg3); font-family: var(--mono); margin-top: 1px; }
.inv-dca-cond { font-size: 0.83em; color: var(--fg2); line-height: 1.45; min-width: 180px; }
.inv-dca-foot { font-size: 0.82em; color: var(--fg2); padding-top: 10px; }
.inv-dca-etf { margin: 6px 0 18px; }
.inv-dca-etf-head, .inv-dca-watch-head { font-size: 0.86em; font-weight: 600; margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inv-dca-etf-row {
  display: grid; grid-template-columns: minmax(150px, 1.2fr) auto 2fr; gap: 12px; align-items: baseline;
  padding: 8px 10px; border-bottom: 1px solid var(--bg3); font-size: 0.86em;
}
.inv-dca-etf-name { font-weight: 600; }
.inv-dca-etf-amt { font-family: var(--mono); font-size: 0.82em; font-weight: 600; color: var(--fg2); margin-left: 6px; white-space: nowrap; }
.inv-dca-etf-action { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.inv-etfact-up { color: var(--green); } .inv-etfact-keep { color: var(--accent); } .inv-etfact-hold { color: var(--fg3); }
.inv-dca-etf-note { font-size: 0.92em; color: var(--fg3); line-height: 1.4; }
.inv-dca-watch { margin: 6px 0 14px; }
.inv-dca-watch-rows { display: flex; flex-direction: column; gap: 6px; }
.inv-dca-watch-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 6px; padding: 7px 11px; font-size: 0.84em;
}
.inv-dca-watch-row.inv-dca-clickable { cursor: pointer; }
.inv-dca-watch-row.inv-dca-clickable:hover { border-color: var(--accent); }
.inv-dca-watch-name { font-weight: 600; }
.inv-dca-watch-cond { color: var(--fg3); }
.inv-dca-queued-tag {
  margin-left: 7px; padding: 1px 6px; border-radius: 4px; font-size: 0.82em; font-weight: 600; vertical-align: 1px;
  background: rgba(251,191,36,0.14); color: var(--yellow); border: 1px solid rgba(251,191,36,0.32);
}
.inv-dca-queued-nothesis {
  margin-left: 7px; padding: 1px 6px; border-radius: 4px; font-size: 0.82em; font-weight: 500; vertical-align: 1px;
  background: var(--bg3); color: var(--fg3); border: 1px solid var(--bg3);
}
/* Paused / held sips (#1003) — a demoted row is money ML4YOU STOPPED, so it
   reads louder than a plain on-deck name: left rule + tinted chip. `held` (an
   undiagnosed corporate action) outranks a plain pause and uses the alert red. */
.inv-dca-watch-row.inv-dca-watch-paused { border-left: 3px solid var(--yellow); }
.inv-dca-watch-row.inv-dca-watch-held { border-left: 3px solid var(--red); background: rgba(248,113,113,0.06); }
.inv-dca-queued-paused {
  margin-left: 7px; padding: 1px 6px; border-radius: 4px; font-size: 0.82em; font-weight: 600; vertical-align: 1px;
  background: rgba(251,191,36,0.14); color: var(--yellow); border: 1px solid rgba(251,191,36,0.32);
}
.inv-dca-queued-held {
  margin-left: 7px; padding: 1px 6px; border-radius: 4px; font-size: 0.82em; font-weight: 700; vertical-align: 1px;
  background: rgba(248,113,113,0.16); color: var(--red); border: 1px solid rgba(248,113,113,0.38);
}
.inv-dca-donot { margin: 4px 0 10px; font-size: 0.84em; }
.inv-dca-donot summary { cursor: pointer; color: var(--fg3); }
.inv-dca-donot ul { margin: 8px 0 0 18px; color: var(--fg3); line-height: 1.6; }
.inv-dca-editnote { margin-top: 10px; }

/* ------------------------------------------------------------------------- */
/* Home / Today — cross-feature deadline + commitment rollup (#650)          */
/* ------------------------------------------------------------------------- */
#view-home { flex: 1; overflow-y: auto; padding: 24px; }
.hm-wrap { max-width: 1000px; margin: 0 auto; }
.hm-loading, .hm-error, .hm-empty { padding: 32px; color: var(--fg2); text-align: center; }
.hm-error { color: var(--red); }
.hm-empty { font-size: 1.1em; }

.hm-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.hm-header h2 { font-size: 1.5em; margin: 0 0 4px; }
.hm-subtitle { color: var(--fg2); font-size: 0.88em; margin: 0 0 8px; }
.hm-btn {
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--bg3);
  background: var(--bg2); color: var(--fg); font-size: 0.9em; cursor: pointer;
}
.hm-btn:hover { border-color: var(--accent); }
/* Header action cluster: the loop crank handle + refresh (2026-08-31).
   One row for the buttons (shared centreline), caption below the row —
   stacking the caption under the loop button alone pushed it above a
   bottom-aligned Refresh and the pair looked lopsided (2026-09-01). */
.hm-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hm-actions-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hm-btn-primary {
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.hm-btn-primary:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.hm-btn-primary:disabled { opacity: 0.6; cursor: progress; }
.hm-loop-sub { font-size: 0.72em; color: var(--fg3); font-family: var(--mono); white-space: nowrap; }

.hm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-chip {
  font-size: 0.78em; padding: 3px 10px; border-radius: 999px;
  background: var(--bg3); color: var(--fg2); border: 1px solid transparent;
}
.hm-chip-overdue { background: rgba(220,38,38,0.15); color: var(--red); }
.hm-chip-week { background: rgba(234,88,12,0.15); color: #ea580c; }
.hm-chip-link { cursor: pointer; }
.hm-chip-link:hover { border-color: var(--accent); color: var(--accent); }

/* Pulse strip — glanceable cross-feature state cards */
.hm-pulse {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.hm-pulse-card {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.hm-pulse-card:hover { border-color: var(--accent); background: var(--bg3); }
.hm-pulse-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-pulse-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.hm-pulse-icon { font-size: 1em; }
.hm-pulse-label {
  font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg3); font-weight: 600;
}
.hm-pulse-head { font-size: 0.92em; color: var(--fg); line-height: 1.3; }
.hm-pulse-sub {
  font-size: 0.76em; color: var(--fg2); margin-top: 4px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Inline check-off box for completable deadline rows */
.hm-check {
  width: 20px; height: 20px; margin: 0 auto; padding: 0; display: block;
  border: 2px solid var(--fg3); border-radius: 5px; background: transparent;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.hm-check:hover { border-color: var(--accent); }
.hm-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-check-done, .hm-check:disabled {
  background: var(--accent); border-color: var(--accent); cursor: default;
}
.hm-row-task:hover .hm-check { border-color: var(--accent); }

.hm-group { margin-bottom: 22px; }
.hm-group-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.95em; margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--bg3);
}
.hm-group-count {
  font-size: 0.78em; color: var(--fg3); background: var(--bg3);
  border-radius: 999px; padding: 1px 9px;
}
.hm-grp-overdue .hm-group-head { color: var(--red); }
.hm-grp-week .hm-group-head { color: #ea580c; }

.hm-list { display: flex; flex-direction: column; gap: 8px; }
.hm-row {
  display: grid; grid-template-columns: 28px 1fr auto max-content; gap: 12px;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 11px 14px; align-items: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
/* Trailing "clear it away" control for derived rows (programs / jobs). Faint by
   default (discoverable on touch, where there is no hover), red on hover. */
.hm-dismiss {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  color: var(--fg3); font-size: 0.85em; line-height: 1; cursor: pointer;
  border-radius: 5px; opacity: 0.5;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.hm-row:hover .hm-dismiss, .hm-row:focus-within .hm-dismiss { opacity: 1; }
.hm-dismiss:hover { color: var(--red); background: var(--bg3); }
.hm-dismiss:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-dismiss:disabled { opacity: 0.35; cursor: default; }
.hm-row:hover { border-color: var(--accent); background: var(--bg3); }
.hm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-row-icon { font-size: 1.05em; text-align: center; }
.hm-row-main { min-width: 0; }
.hm-row-title {
  font-size: 0.92em; line-height: 1.35; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hm-link { color: var(--accent); text-decoration: none; }
.hm-row-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 0.74em; color: var(--fg3); margin-top: 3px;
}
.hm-kind { font-weight: 600; color: var(--fg2); }
.hm-status { color: var(--fg3); }
.hm-id { font-family: monospace; color: var(--fg3); }

.hm-row-due { text-align: right; white-space: nowrap; }
.hm-due-date { display: block; font-size: 0.82em; color: var(--fg2); }
.hm-due-rel { display: block; font-size: 0.72em; color: var(--fg3); }
.hm-due-rel.hm-overdue { color: var(--red); font-weight: 600; }
.hm-due-rel.hm-soon { color: #ea580c; font-weight: 600; }
.hm-due-rel.hm-tbd { color: var(--fg3); font-style: italic; }
.hm-due-tbd { display: block; font-size: 0.8em; color: var(--fg2); max-width: 180px; white-space: normal; }
.hm-fuzzy { color: #ea580c; font-weight: 700; cursor: help; }

.hm-foot { color: var(--fg3); font-size: 0.76em; text-align: center; margin-top: 24px; }

@media (max-width: 640px) {
  #view-home { padding: 14px; }
  .hm-row { grid-template-columns: 22px 1fr auto max-content; gap: 8px; padding: 10px; }
  .hm-pulse { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Home: job chip ---- */
.hm-chip-job { background: rgba(108, 138, 255, 0.16); color: var(--accent); }

/* ================================================================
   Upskill — Job openings section (job-board-scan)
   ================================================================ */
.up-jobs-section .up-section-hint { color: var(--fg3); }
.up-jobs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.up-jobs-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.up-jobfilter {
  background: var(--bg3); color: var(--fg2); border: 1px solid transparent;
  border-radius: 14px; padding: 4px 11px; font-size: 0.8em; font-weight: 600;
}
.up-jobfilter:hover { color: var(--fg); }
.up-jobfilter-on { background: rgba(108, 138, 255, 0.18); color: var(--accent); border-color: var(--accent); }
.up-jobs-controls { display: flex; align-items: center; gap: 10px; }
.up-jobs-refresh { font-size: 0.8em; padding: 4px 10px; }

.up-jobs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-top: 10px;
}
.up-job-card {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 7px;
  transition: border-color 0.15s;
}
.up-job-card:hover { border-color: var(--accent); }
.up-job-applied { border-left: 3px solid var(--green); }
.up-job-dismissed { opacity: 0.5; }
.up-job-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.up-job-title { font-weight: 600; font-size: 0.95em; line-height: 1.3; color: var(--fg); }
.up-job-title:hover { color: var(--accent); }
.up-job-badges { display: flex; gap: 4px; flex-shrink: 0; }
.up-job-badge {
  font-size: 0.66em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 6px; border-radius: 5px;
}
.up-job-strong { background: rgba(52, 211, 153, 0.18); color: var(--green); }
.up-job-consider { background: var(--bg3); color: var(--fg3); }
.up-job-new { background: rgba(108, 138, 255, 0.2); color: var(--accent); }
.up-job-org { font-size: 0.84em; color: var(--fg2); }
.up-job-loc { color: var(--fg3); }
.up-job-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.up-job-pill {
  font-size: 0.72em; background: var(--bg3); color: var(--fg2);
  padding: 2px 7px; border-radius: 10px;
}
.up-job-remote { background: rgba(108, 138, 255, 0.14); color: var(--accent); }
.up-job-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px; border-top: 1px solid var(--bg3); padding-top: 7px;
}
.up-job-closes { font-size: 0.78em; color: var(--fg3); }
.up-job-closes-soon { color: var(--yellow); font-weight: 600; }
.up-job-rolling { color: var(--fg3); font-style: italic; }
.up-job-actions { display: flex; gap: 4px; }
.up-job-btn {
  background: var(--bg3); color: var(--fg3); border-radius: 6px;
  width: 26px; height: 24px; font-size: 0.85em; line-height: 1;
}
.up-job-btn:hover { color: var(--fg); }
.up-job-btn-on.up-job-btn-interested { background: rgba(251, 191, 36, 0.2); color: var(--yellow); }
.up-job-btn-on.up-job-btn-applied { background: rgba(52, 211, 153, 0.2); color: var(--green); }
.up-job-btn-on.up-job-btn-dismissed { background: rgba(248, 113, 113, 0.18); color: var(--red); }

[data-theme="light"] .up-job-card { background: #fff; border-color: #e2e5ec; }
[data-theme="light"] .up-job-strong { background: rgba(16, 163, 74, 0.14); }

@media (max-width: 640px) {
  .up-jobs-grid { grid-template-columns: 1fr; }
}

/* --- Savings-plan reconciliation board (#1003) ---------------------------- */
/* The money board: what the owner's savings plans are actually doing vs. what
   his theses say. Sits directly under the cockpit because a plan buying an
   abandoned name outranks every piece of analysis below it. Mobile-first —
   the row collapses to a 2-line stack under 700px so the action word and the
   euro amount stay readable on a phone without horizontal scroll. */
.inv-sp { border: 1px solid var(--bg3); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0 4px; background: var(--bg2); }
.inv-sp-dirty { border-left: 3px solid var(--yellow); }
.inv-sp-clean { border-left: 3px solid var(--green); }
.inv-sp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inv-sp-title { font-weight: 650; font-size: 1.02em; }
.inv-sp-verdict { font-size: 0.85em; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.inv-sp-verdict.ok { background: rgba(52,211,153,0.14); color: var(--green); }
.inv-sp-verdict.act { background: rgba(251,191,36,0.16); color: var(--yellow); }
.inv-sp-against { font-size: 0.82em; color: var(--red); font-weight: 600; }
.inv-sp-hint { font-size: 0.82em; color: var(--fg3); margin: 6px 0 12px; line-height: 1.5; }
/* #1390: caption qualifying the board's count so it does not read as contradicting the ledger's. Wraps to its own line via inv-sp-head's flex-wrap. */
.inv-sp-bridge { flex-basis: 100%; font-size: 0.82em; color: var(--fg3); font-weight: 400; }

.inv-sp-row { display: grid; grid-template-columns: 92px minmax(120px, 1.1fr) 92px auto minmax(0, 2.4fr) auto;
  align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; min-height: 44px; }
.inv-sp-promote { white-space: nowrap; justify-self: end; }
.inv-sp-row + .inv-sp-row { border-top: 1px solid var(--bg3); }
.inv-sp-row[role="button"] { cursor: pointer; }
.inv-sp-row[role="button"]:hover, .inv-sp-row[role="button"]:focus-visible { background: var(--bg3); outline: none; }
.inv-sp-cancel { background: rgba(248,113,113,0.07); }
.inv-sp-act { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 8px; border-radius: 5px; text-align: center; white-space: nowrap; }
.inv-sp-act.tone-green  { background: rgba(52,211,153,0.14); color: var(--green); }
.inv-sp-act.tone-yellow { background: rgba(251,191,36,0.16); color: var(--yellow); }
.inv-sp-act.tone-red    { background: rgba(248,113,113,0.16); color: var(--red); }
.inv-sp-act.tone-blue   { background: rgba(108,138,255,0.16); color: var(--accent); }
.inv-sp-name { font-weight: 600; font-size: 0.9em; }
.inv-sp-new { font-size: 0.68em; font-weight: 700; text-transform: uppercase; margin-left: 6px;
  padding: 1px 5px; border-radius: 4px; background: rgba(108,138,255,0.18); color: var(--accent); }
.inv-sp-amt { font-variant-numeric: tabular-nums; font-size: 0.88em; font-weight: 600; white-space: nowrap; }
.inv-sp-amt-drift { color: var(--yellow); }
.inv-sp-per { color: var(--fg3); font-weight: 400; font-size: 0.85em; }
.inv-sp-call { font-size: 0.74em; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.inv-sp-call.tone-green  { background: rgba(52,211,153,0.14); color: var(--green); }
.inv-sp-call.tone-yellow { background: rgba(251,191,36,0.14); color: var(--yellow); }
.inv-sp-call.tone-red    { background: rgba(248,113,113,0.16); color: var(--red); }
.inv-sp-call.tone-gray   { background: var(--bg3); color: var(--fg3); }
.inv-sp-why { font-size: 0.8em; color: var(--fg2); line-height: 1.45; }

.inv-sp-missing { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bg3); }
.inv-sp-missing-head { font-size: 0.82em; font-weight: 600; color: var(--fg2); margin-bottom: 4px; }
.inv-sp-foot { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--bg3);
  font-size: 0.76em; color: var(--fg3); line-height: 1.5; }
.inv-sp-stale { color: var(--yellow); }

/* Phone: the 5-column grid becomes a 2-row stack. The action word + amount stay
   on one line (the scannable pair), the reason wraps full-width beneath. */
@media (max-width: 700px) {
  .inv-sp { padding: 12px; }
  .inv-sp-row { grid-template-columns: auto 1fr auto; grid-template-areas: "act name amt" "why why why" "promote promote promote"; gap: 8px 9px; padding: 10px 8px; }
  .inv-sp-act { grid-area: act; }
  .inv-sp-name { grid-area: name; }
  .inv-sp-amt { grid-area: amt; }
  .inv-sp-call { display: none; }
  .inv-sp-why { grid-area: why; }
  .inv-sp-promote { grid-area: promote; justify-self: start; }
}

/* --- §3 Plan vs. Scalable — plan-vs-actual ledger (#1078) ------------------ */
.inv-cmp { border: 1px solid var(--bg3); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0 4px; background: var(--bg2); }
.inv-cmp-dirty { border-color: rgba(251,191,36,0.35); }
.inv-cmp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.inv-cmp-title { font-weight: 700; font-size: 0.98em; }
.inv-cmp-verdict { font-size: 0.85em; font-weight: 600; }
.inv-cmp-verdict.ok { color: var(--green); }
.inv-cmp-verdict.off { color: var(--yellow); }
.inv-cmp-hint { font-size: 0.8em; color: var(--text2); margin-bottom: 8px; }
/* #1390: reciprocal caption on the ledger head. */
.inv-cmp-bridge { flex-basis: 100%; font-size: 0.8em; color: var(--text2); font-weight: 400; }
.inv-cmp-row { display: grid; grid-template-columns: 118px minmax(110px, 1.1fr) 76px 76px 76px minmax(0, 2fr);
  align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; }
.inv-cmp-row + .inv-cmp-row { border-top: 1px solid var(--bg3); }
.inv-cmp-header { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); padding-bottom: 2px; }
.inv-cmp-rowoff { background: rgba(251,191,36,0.05); }
.inv-cmp-st { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: 5px; text-align: center; }
.inv-cmp-st.tone-green  { background: rgba(52,211,153,0.14); color: var(--green); }
.inv-cmp-st.tone-yellow { background: rgba(251,191,36,0.16); color: var(--yellow); }
.inv-cmp-st.tone-red    { background: rgba(248,113,113,0.16); color: var(--red); }
.inv-cmp-st.tone-gray   { background: var(--bg3); color: var(--text2); }
.inv-cmp-name { font-weight: 600; font-size: 0.88em; }
.inv-cmp-tier { font-size: 0.68em; font-weight: 500; color: var(--text2); background: var(--bg3);
  padding: 1px 5px; border-radius: 4px; margin-left: 2px; }
.inv-cmp-num { font-variant-numeric: tabular-nums; font-size: 0.9em; text-align: right; }
.inv-cmp-delta.pos { color: var(--accent); }
.inv-cmp-delta.neg { color: var(--yellow); }
.inv-cmp-delta.muted { color: var(--text2); }
.inv-cmp-note { font-size: 0.78em; color: var(--text2); }
.inv-cmp-since { font-weight: 700; color: var(--yellow); white-space: nowrap; }
.inv-cmp-totals { border-top: 2px solid var(--bg3) !important; margin-top: 2px; font-weight: 700; }
.inv-cmp-totals .inv-cmp-num { font-weight: 700; }
.inv-cmp-history { margin-top: 10px; font-size: 0.82em; }
.inv-cmp-history summary { cursor: pointer; color: var(--text2); }
.inv-cmp-hist-row { display: grid; grid-template-columns: 90px 130px 70px minmax(0, 1fr);
  gap: 10px; padding: 5px 8px; align-items: baseline; }
.inv-cmp-hist-row + .inv-cmp-hist-row { border-top: 1px solid var(--bg3); }
.inv-cmp-hist-date { color: var(--text2); font-variant-numeric: tabular-nums; }
.inv-cmp-hist-num { font-variant-numeric: tabular-nums; }
.inv-cmp-hist-off { color: var(--green); font-weight: 600; }
.inv-cmp-hist-off.bad { color: var(--yellow); }
.inv-cmp-hist-names { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-cmp-foot { margin-top: 10px; font-size: 0.75em; color: var(--text2); }
.inv-cmp-stale { color: var(--yellow); font-weight: 600; }
@media (max-width: 640px) {
  .inv-cmp { padding: 12px; }
  .inv-cmp-header { display: none; }
  /* One wrapping line per plan: badge · name · "proposed → actual Δ", note below.
     The → replaces the hidden column headers as the proposed/actual convention. */
  .inv-cmp-row { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 9px 6px; align-items: baseline; }
  .inv-cmp-name { flex: 1 1 auto; }
  .inv-cmp-num { text-align: left; }
  .inv-cmp-num[data-col="proposed"]::after { content: " →"; color: var(--text2); }
  .inv-cmp-note { flex-basis: 100%; }
  .inv-cmp-hist-names { display: none; }
  .inv-cmp-hist-row { grid-template-columns: 90px 1fr auto; }
}

/* --- Mobile bottom nav + ergonomics (#1007) -------------------------------- */
/* Why this exists: the beer app the owner prefers is the SAME vanilla stack —
   its advantage is that every view is one tap away. Here all 22 views sat
   behind a hamburger, so navigation cost tap → scroll → tap, every time.
   The daily drivers now live on a persistent bar; the drawer keeps the rest. */
.bottom-nav { display: none; }

@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

@media (max-width: 768px) {
  .bottom-nav {
    display: flex; flex-shrink: 0; align-items: stretch;
    border-top: 1px solid var(--border); background: var(--bg2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px; min-height: var(--touch);
    background: none; border: none; color: var(--fg3);
    font-size: 0.68em; font-weight: 600; font-family: inherit;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .bn-item svg { width: 21px; height: 21px; flex-shrink: 0; }
  .bn-item.active { color: var(--accent); }
  .bn-item:active { background: var(--bg3); }
  .bn-item span { line-height: 1; }

  /* The chat composer already reserves the safe-area inset; with the bar below
     it, doubling that inset leaves a dead gap. The bar owns it now. */
  .chat-input-area { padding-bottom: 12px; }
}

/* --- Fluid view padding + safe area (#1007) -------------------------------- */
/* #view-* each hardcoded `padding: 24px`, so a 390px phone spent 12% of its
   width on padding, and the last row of every view sat under the iPhone home
   indicator. --view-pad drops to 14px under 768px (see the shell block above). */
@media (max-width: 768px) {
  #view-home, #view-invest, #view-insights, #view-upskill, #view-growth,
  #view-issues, #view-tasks, #view-skills, #view-schedule, #view-follow-ups,
  #view-agents, #view-activity, #view-config, #view-status, #view-soul,
  #view-memory-graph, #view-roadmap, #view-files, #view-writing {
    padding: var(--view-pad);
    padding-bottom: calc(var(--view-pad) + env(safe-area-inset-bottom));
  }

  /* Settings rows: `label { min-width: 160px } + .inv-input { width: 120px }`
     inside a flex row needs 338px before padding — broken at 390px, and no
     breakpoint stacked it. */
  .inv-form-row { flex-wrap: wrap; }
  .inv-form-row label { min-width: 0; flex: 1 0 100%; }
  .inv-input, .inv-range { width: 100%; max-width: none; }

  /* A thesis headline ellipsed to ~12 characters hides the card's whole point.
     On a phone it wraps instead — vertical space is the cheap axis. */
  .inv-thesis-headline { white-space: normal; overflow: visible; flex: 1 1 100%; }
}

/* --- Horizontal-scroll affordance (#1007) --------------------------------- */
/* Wide tables DO scroll (.invest-table-wrap { overflow-x: auto }), but with no
   visual hint the columns past the fold read as missing rather than scrollable.
   A right-edge fade appears only while there is more to reach. */
.invest-table-wrap {
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.22), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.22), transparent) right / 12px 100% no-repeat scroll;
  -webkit-overflow-scrolling: touch;
}

/* --- Touch targets (#1007) ------------------------------------------------ */
/* Nothing in this file set a min-height on any interactive element. These are
   the controls small enough to miss on a phone (17-30px measured). */
@media (max-width: 768px) {
  .btn-theme, .btn-icon, .invest-btn-sm, .inv-currency-select,
  .btn-secondary, .inv-claim-toggle {
    min-height: 38px;
  }
  .nav-item, .bn-item, .tab, button[type="submit"] { min-height: var(--touch); }
}

/* Advisory amount drift — quiet by construction. It must never compete with a
   Cancel verdict for attention (see the PLAN_ACTIONS note in invest/plans.js). */
.inv-sp-drift { font-size: 0.72em; color: var(--fg3); white-space: nowrap; }

/* --- Inline glossary (#1024) ---------------------------------------------
   The owner had to ask, in chat, what "sip" meant. The word was in ~25 places
   of Invest copy and defined in none of them. These styles are the visible half
   of the fix: the first use of a coined term per section carries a dotted
   underline you can tap.

   Two constraints shaped this:
   - It must be discoverable but not shouty. A dotted underline in the normal
     text colour reads as "there's more here" without turning the tab into a
     field of links. Underlining every occurrence would train him to ignore it,
     which is why the annotator only marks the first per section.
   - `title` is desktop-only — iOS Safari never renders it, and this tab is read
     on a phone. So the popover below is the real surface and the tooltip is
     just the desktop shortcut. */
.gloss {
  text-decoration: none;
  border-bottom: 1px dotted var(--fg3);
  cursor: help;
  /* Keeps the tap area finger-sized without disturbing line height. */
  padding-bottom: 1px;
}
.gloss:hover, .gloss:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.gloss:focus-visible { border-radius: 2px; box-shadow: 0 0 0 2px var(--accent2); }

.gloss-pop {
  position: fixed;
  z-index: 1000;
  max-width: min(340px, calc(100vw - 24px));
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg);
}
.gloss-pop[hidden] { display: none; }
.gloss-pop-term {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-1);
  padding-right: var(--sp-5);   /* clears the close button */
}
.gloss-pop-short { color: var(--fg); margin-bottom: var(--sp-2); }
.gloss-pop-long { color: var(--fg2); font-size: var(--text-xs); }
.gloss-pop-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  color: var(--fg3);
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
}
.gloss-pop-close:hover { color: var(--fg); }

/* ---- Mobile touch targets (#1165) ----
   ui-audit (2026-08-05, 375×667) measured sub-44px interactive controls on the
   Home and Follow-ups views. Apple HIG / Material both put the minimum
   comfortable touch target at 44px (--touch). These deltas apply only at the
   phone breakpoint so the dense desktop layout is untouched. Controls that must
   keep their painted size (the two checkboxes) grow their *hit area*, not their
   glyph. `.hm-link` is deliberately excluded — it is an inline text link (WCAG
   2.5.8 exempts inline links, and it also wraps arbitrary in-text URLs, so a
   min-height would break line flow). */
@media (max-width: 768px) {
  /* Buttons + search input: grow the box to a 44px-tall target.
     #fu-source / #fu-status / #fu-select-all were missed by #1167 and measured
     36px tall in the 2026-08-09 audit — they are added here, not given a new
     rule, so the whole toolbar keeps one source of truth (#1213).
     #fu-toggle-completed already measures 44px, but only because it is a flex
     sibling of #fu-refresh in .fu-header-actions and stretches to match it.
     Listing it makes its own size explicit rather than inherited from a
     neighbour's rule. */
  #hm-refresh,
  #fu-refresh,
  #fu-toggle-undated,
  #fu-toggle-completed,
  #fu-search,
  #fu-source,
  #fu-status,
  #fu-select-all { min-height: var(--touch); }

  /* Icon-only ✕ dismiss is a square — needs width as well as height. */
  .hm-dismiss { min-width: var(--touch); min-height: var(--touch); }

  /* .hm-check is a bordered <button> styled as a checkbox: padding would
     enlarge the visible bordered box, so expand the tap area with a centred
     transparent overlay instead (pseudo-elements render reliably on buttons).
     The 20px painted box is unchanged; the full 44px is tappable, and
     e.target.closest(".hm-check") still resolves so the click routes correctly. */
  .hm-check { position: relative; }
  .hm-check::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--touch);
    height: var(--touch);
    transform: translate(-50%, -50%);
  }

  /* .fu-select-box is a native <input type=checkbox>.
     #1167 tried `box-sizing: content-box; padding: 13px` here. That silently did
     nothing: a checkbox is a *replaced* element, so UAs discard its padding —
     the 2026-08-09 audit read `paddingTop: 0px` and the control was still 18×18
     (#1213). Padding, pseudo-elements and a wrapping <label> all share the same
     defect for this purpose: the tap area they create is invisible to
     `getBoundingClientRect()`, so ui-audit cannot tell a working fix from a
     broken one — which is exactly how #1167 shipped unnoticed.
     So give the *input itself* a real 44×44 border box and paint the 18px
     control with backgrounds instead. `appearance: none` drops the UA-drawn
     control (and with it `accent-color`), so the two states are drawn here:
       unchecked — 14px --bg2 fill centred over an 18px --fg3 square = 2px border
       checked   — a tick centred over an 18px --accent square
     Backgrounds are used rather than ::before because pseudo-elements on form
     controls are not dependable across engines. Phone breakpoint only; the
     desktop control keeps its native rendering.

     The tick colour is spelled out twice because a data: URI cannot read a CSS
     variable. The two literals MUST track --accent-ink in tokens.css, which is
     exactly "readable text on an --accent fill" and is themed: #06231f on the
     dark accent (#2dd4bf), #ffffff on the light one (#0d9488). A single white
     tick — what the UA's accent-color used to derive automatically before
     `appearance: none` removed it — is 1.86:1 on the dark accent, under the 3:1
     WCAG 1.4.11 floor for a graphical control. */
  .fu-select-box {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: var(--touch);
    height: var(--touch);
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-image:
      linear-gradient(var(--bg2), var(--bg2)),
      linear-gradient(var(--fg3), var(--fg3));
    background-size: 14px 14px, 18px 18px;
  }
  .fu-select-box:checked {
    background-image:
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%2306231f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      linear-gradient(var(--accent), var(--accent));
    background-size: 12px 12px, 18px 18px;
  }
  [data-theme="light"] .fu-select-box:checked {
    background-image:
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      linear-gradient(var(--accent), var(--accent));
  }
  /* --fg, not --accent: at -13px the ring would sit flush against the outer edge
     of the 18px painted square, and on a *checked* box that square is already
     --accent — ring and fill would composite into one solid teal block with no
     visible focus cue. --fg contrasts with both states; -11px leaves a 2px gap. */
  .fu-select-box:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: -11px;
  }

  /* .fu-row-left is the grid cell around it — centre the 44px control in it. */
  .fu-row-left { min-width: var(--touch); min-height: var(--touch); padding-top: 0; }

  /* Per-row actions (Reply / Done / Note / Edit) measured 67×30, and the bulk
     bar's two buttons 165×30 / 60×30. None was ever reported, because ui-audit
     collapses findings by `TAG.firstClass` and every one of them shares
     `BUTTON.fu-btn` with #fu-select-all — the toolbar button masked the whole
     class until it was fixed above. The bulk bar is doubly hidden: it only
     renders once a row is selected, which is the very interaction the checkbox
     fix exists to make possible. Sized here rather than deferred: same view,
     same breakpoint, same defect. min-width covers the narrowest ("Note"). */
  .fu-row-actions .fu-btn,
  .fu-bulkbar .fu-btn { min-height: var(--touch); min-width: var(--touch); }
}

/* 701–768px keeps the three-column row (the 2-column phone layout starts at
   700px), so widen only its checkbox track. Written as a bounded range rather
   than added to the block above because that block sits *after* the ≤640/≤700
   rules and an unbounded `.fu-row` here would override the phone layout. */
@media (min-width: 701px) and (max-width: 768px) {
  .fu-row { grid-template-columns: var(--touch) 1fr auto; }
}

/* ================================================================
   Site-true redesign (#1181)
   ----------------------------------------------------------------
   The palette / radius / type revaluation in tokens.css re-skins every
   view. This block ports the site's remaining component MOTIFS — mono
   uppercase eyebrows, big mono titles, teal-bordered cards that lift on
   hover, pill actions — onto shared chrome and the two reference tabs
   (Today, Invest). Other tabs inherit the tokens; per-tab motif polish
   is deliberate follow-up, not this PR.
   ================================================================ */

/* ---- Reusable eyebrow (mono uppercase, teal) — mirrors site .eyebrow ---- */
.hm-eyebrow, .inv-eyebrow {
  font-family: var(--mono);
  font-size: 0.7em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 6px;
}

/* ---- Today: mono title + pill refresh, echoing the site page-title ---- */
.hm-header h2 {
  font-family: var(--mono);
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 1.7em; line-height: 1.1;
}
.hm-btn {
  border-radius: 999px; padding: 8px 16px;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.hm-btn:hover { color: var(--accent); transform: translateY(-1px); }

/* ---- Today: pulse cards adopt the site .card motif (14px, lift, teal border,
   soft shadow) instead of a flat swap-to-bg3 hover. ---- */
.hm-pulse-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.hm-pulse-card:hover {
  background: var(--bg2);
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* ---- Invest: eyebrow + mono title, matched to Today ---- */
.invest-title { display: flex; flex-direction: column; }
.invest-top-bar h2 {
  font-family: var(--mono);
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 1.7em; line-height: 1.1;
}
/* Pill the two reference tabs' small actions so the site's rounded-button
   language is visible where it's been fully polished, without disturbing the
   dense secondary buttons the other tabs still use. */
.invest-top-actions .btn-secondary,
.invest-top-actions .invest-btn-sm,
.invest-top-actions .inv-toggle-btn {
  border-radius: 999px;
}

/* ================================================================
   Calendar (#1297) — Home week strip + Follow-ups calendar view
   ================================================================ */

/* Type/kind colour tokens — dark hues here, light overrides below. */
:root {
  --cal-deadline: #f87171;
  --cal-owner-action: #fbbf24;
  --cal-decision: #c084fc;
  --cal-relationship: #f472b6;
  --cal-followup: #60a5fa;
  --cal-reminder: #2dd4bf;
  --cal-research: #a78bfa;
  --cal-program: #34d399;
  --cal-goal: #fb923c;
  --cal-gate: #38bdf8;
  --cal-job: #e879f9;
  --cal-other: #9aa3b5;
  --cal-event: #34d399;      /* iCloud Life events */
  --cal-event-ics: #60a5fa;  /* subscribed ICS feeds (Google) */
}
[data-theme="light"] {
  --cal-deadline: #dc2626;
  --cal-owner-action: #d97706;
  --cal-decision: #9333ea;
  --cal-relationship: #db2777;
  --cal-followup: #2563eb;
  --cal-reminder: #0d9488;
  --cal-research: #7c3aed;
  --cal-program: #059669;
  --cal-goal: #ea580c;
  --cal-gate: #0284c7;
  --cal-job: #c026d3;
  --cal-other: #5d6470;
  --cal-event: #059669;
  --cal-event-ics: #2563eb;
}

/* Colour classes — set a local --cal-c that dot/pill styles read. */
.cal-t-deadline     { --cal-c: var(--cal-deadline); }
.cal-t-owner-action { --cal-c: var(--cal-owner-action); }
.cal-t-decision     { --cal-c: var(--cal-decision); }
.cal-t-relationship { --cal-c: var(--cal-relationship); }
.cal-t-followup     { --cal-c: var(--cal-followup); }
.cal-t-reminder     { --cal-c: var(--cal-reminder); }
.cal-t-research     { --cal-c: var(--cal-research); }
.cal-t-program      { --cal-c: var(--cal-program); }
.cal-t-goal         { --cal-c: var(--cal-goal); }
.cal-t-gate         { --cal-c: var(--cal-gate); }
.cal-t-job          { --cal-c: var(--cal-job); }
.cal-t-other        { --cal-c: var(--cal-other); }
.cal-t-event        { --cal-c: var(--cal-event); }

.cal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cal-c, var(--cal-other));
  display: inline-block; flex: 0 0 auto;
}

/* ---- Pills (shared by strip + grid) ---- */
.cal-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); line-height: 1.25;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--cal-c, var(--cal-other)) 14%, transparent);
  color: var(--fg);
  max-width: 100%; overflow: hidden; text-align: left;
}
.cal-pill-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
button.cal-pill { cursor: pointer; font-family: inherit; }
button.cal-pill:hover { border-color: var(--cal-c, var(--cal-other)); }
.cal-pill-event {
  --cal-c: var(--cal-event);
  border-left: 3px solid var(--cal-c);
  border-radius: 6px;
}
.cal-pill-event.cal-src-ics { --cal-c: var(--cal-event-ics); }
.cal-ev-time { font-family: var(--mono); font-size: 0.92em; color: var(--fg2); flex: 0 0 auto; }
.cal-pill-overdue {
  --cal-c: var(--cal-deadline);
  background: color-mix(in srgb, var(--cal-deadline) 20%, transparent);
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
  font-family: inherit;
}
.cal-pill-overdue:hover { border-color: var(--cal-deadline); }
/* Carried pill (#1303): an overdue follow-up rendered on Today, ghost/dashed so
   it reads as "travelled here", prefixed with its original due date. */
.cal-pill-carried {
  border: 1px dashed var(--cal-c, var(--cal-other));
  background: color-mix(in srgb, var(--cal-c, var(--cal-other)) 7%, transparent);
}
button.cal-pill-carried:hover { border-style: solid; }
.cal-carried-from { font-family: var(--mono); font-size: 0.9em; color: var(--fg2); flex: 0 0 auto; white-space: nowrap; }
/* Grid-cell overflow control. Real button (#1310) — the inert span it replaced
   left the hidden items unreachable. */
.cal-more {
  font-family: inherit; font-size: var(--text-xs); color: var(--fg2);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; cursor: pointer;
  align-self: flex-start; text-align: left;
}
.cal-more:hover { border-color: var(--accent); color: var(--fg); }
.cal-fuzzy { font-family: var(--mono); color: var(--fg3); flex: 0 0 auto; }

/* ---- Home week strip ---- */
.hm-week { margin: var(--sp-5) 0; }
.hm-week-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.hm-week-head h3 { font-size: var(--text-md); }
.hm-week-meta { display: flex; align-items: center; gap: var(--sp-3); }
.hm-cal-note { font-size: var(--text-xs); color: var(--fg3); }
.hm-btn-sm { font-size: var(--text-sm); padding: 4px 10px; }
.hm-week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2);
}
.hm-day {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-2); min-height: 92px; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
}
.hm-day:hover { border-color: var(--accent); }
.hm-day-today { border-color: var(--accent); background: var(--accent-dim); }
.hm-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.hm-day-name { font-family: var(--mono); font-size: var(--text-xs); font-weight: 700; color: var(--fg2); }
.hm-day-today .hm-day-name { color: var(--accent); }
.hm-day-date { font-size: var(--text-xs); color: var(--fg3); }
.hm-day-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-day-free { color: var(--fg3); font-size: var(--text-xs); }
@media (max-width: 900px) {
  .hm-week-strip { grid-template-columns: repeat(2, 1fr); }
  .hm-day { min-height: 0; }
  .hm-day-free { display: none; }
  .hm-day:has(.hm-day-free) { display: none; } /* hide empty days on small screens */
}
@media (max-width: 640px) {
  .hm-week-strip { grid-template-columns: 1fr; }
}

/* ---- Follow-ups calendar view ---- */
.cal-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal-overdue-banner {
  border: 1px solid var(--cal-deadline); border-radius: var(--radius);
  background: color-mix(in srgb, var(--cal-deadline) 12%, transparent);
  color: var(--fg); padding: var(--sp-2) var(--sp-3);
  font-family: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.cal-nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cal-month-label { font-family: var(--mono); font-weight: 700; min-width: 130px; text-align: center; }
.cal-src-note { margin-left: auto; font-size: var(--text-xs); color: var(--fg3); }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1);
  font-family: var(--mono); font-size: var(--text-xs); color: var(--fg3);
  text-align: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.cal-cell {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  min-height: 84px; padding: 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell-out { opacity: 0.45; }
.cal-cell-today { border-color: var(--accent); background: var(--accent-dim); }
.cal-cell-selected { outline: 2px solid var(--accent); outline-offset: -1px; }
.cal-cell-num { font-family: var(--mono); font-size: var(--text-xs); color: var(--fg2); }
.cal-cell-today .cal-cell-num { color: var(--accent); font-weight: 700; }
.cal-cell-pills { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
/* An expanded cell shows every pill for that day. It grows its grid row rather
   than overlaying its neighbours — nothing gets occluded — and caps at a
   scrollable height so a pathologically busy day can't blow the grid apart. */
.cal-cell-expanded {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
}
.cal-cell-expanded .cal-cell-pills { overflow-y: auto; max-height: 320px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cal-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--fg2);
}
.cal-detail {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
}
.cal-detail-head { font-family: var(--mono); font-size: var(--text-sm); color: var(--fg2); }
.cal-detail-event {
  display: grid; grid-template-columns: 90px 1fr; gap: 2px var(--sp-3);
  border-left: 3px solid var(--cal-event); padding: 4px var(--sp-2);
  border-radius: 6px; background: color-mix(in srgb, var(--cal-event) 8%, transparent);
}
.cal-detail-event.cal-src-ics {
  border-left-color: var(--cal-event-ics);
  background: color-mix(in srgb, var(--cal-event-ics) 8%, transparent);
}
.cal-detail-time { font-family: var(--mono); font-size: var(--text-sm); color: var(--fg2); }
.cal-detail-title { font-size: var(--text-sm); font-weight: 600; }
/* External-page link on rollup detail items (job posting, application form — #1454) */
.cal-detail-ext { text-decoration: none; font-weight: 600; margin-left: 2px; }
.cal-detail-meta { grid-column: 2; font-size: var(--text-xs); color: var(--fg3); }
.cal-brain-badge { font-size: 0.9em; }
.cal-detail-fus { margin-top: var(--sp-2); }
/* Read-only rollup rows (fellowship / goal / invest gate / job closing) — the
   kinds the month grid gained in #1310. They deep-link instead of mutating. */
.cal-detail-item {
  display: grid; grid-template-columns: 130px 1fr; gap: 2px var(--sp-3);
  border-left: 3px solid var(--cal-c, var(--cal-other)); padding: 4px var(--sp-2);
  border-radius: 6px; background: color-mix(in srgb, var(--cal-c, var(--cal-other)) 8%, transparent);
}
.cal-detail-kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--fg2);
}
.cal-detail-item .cal-detail-meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
@media (max-width: 640px) {
  /* On phones the month grid keeps 7 columns but its pills collapse to dots
     (the Home strip is single-column there and keeps full pills). */
  .cal-cell { min-height: 52px; }
  .cal-cell-pills { flex-direction: row; flex-wrap: wrap; }
  .cal-grid .cal-pill .cal-pill-txt, .cal-grid .cal-pill .cal-ev-time, .cal-grid .cal-pill .cal-carried-from { display: none; }
  .cal-grid .cal-pill { padding: 0; border: none; background: none; }
  .cal-grid .cal-pill-event { border-left: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-c); }
  .cal-more { font-size: 0.6rem; padding: 0 5px; }
  .cal-detail-event { grid-template-columns: 70px 1fr; }
  .cal-detail-item { grid-template-columns: 1fr; }
  /* No in-place expansion on a phone: a 7-column grid gives each day ~48px,
     far too narrow to read a pill in. "+N more" opens the day panel instead
     (see isNarrowGrid() in views/follow-ups.js). */
}

/* ---- Follow-ups list/calendar mode toggle ---- */
.fu-mode-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden;
}
.fu-mode-btn {
  font-family: inherit; font-size: var(--text-sm); color: var(--fg2);
  background: transparent; border: none; padding: 5px 14px; cursor: pointer;
}
.fu-mode-btn:hover { color: var(--fg); }
.fu-mode-active {
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}

/* ================================================================
   Timebox week planner (#1313) — Follow-ups "Week" mode
   ================================================================ */

/* Block-type colour tokens — dark hues here, light overrides below. */
:root {
  --tb-code:  #60a5fa;
  --tb-read:  #a78bfa;
  --tb-write: #f472b6;
  --tb-chat:  #34d399;
  --tb-prep:  #fbbf24;
  --tb-admin: #9aa3b5;
  --tb-move:  #2dd4bf;
  --tb-alt1:  #fb923c;
  --tb-alt2:  #e879f9;
}
[data-theme="light"] {
  --tb-code:  #2563eb;
  --tb-read:  #7c3aed;
  --tb-write: #db2777;
  --tb-chat:  #059669;
  --tb-prep:  #d97706;
  --tb-admin: #5d6470;
  --tb-move:  #0d9488;
  --tb-alt1:  #ea580c;
  --tb-alt2:  #c026d3;
}
.tb-c-code  { --tb-c: var(--tb-code); }
.tb-c-read  { --tb-c: var(--tb-read); }
.tb-c-write { --tb-c: var(--tb-write); }
.tb-c-chat  { --tb-c: var(--tb-chat); }
.tb-c-prep  { --tb-c: var(--tb-prep); }
.tb-c-admin { --tb-c: var(--tb-admin); }
.tb-c-move  { --tb-c: var(--tb-move); }
.tb-c-alt1  { --tb-c: var(--tb-alt1); }
.tb-c-alt2  { --tb-c: var(--tb-alt2); }
.cal-dot.tb-c-code, .cal-dot.tb-c-read, .cal-dot.tb-c-write, .cal-dot.tb-c-chat,
.cal-dot.tb-c-prep, .cal-dot.tb-c-admin, .cal-dot.tb-c-move, .cal-dot.tb-c-alt1,
.cal-dot.tb-c-alt2 { background: var(--tb-c); }

.tbw-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.tbw-range-label { min-width: 210px; }
.tbw-grid {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  gap: 2px;
  overflow-x: auto;
}
.tbw-col, .tbw-axis { min-width: 0; display: flex; flex-direction: column; }
.tbw-col-head {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  padding: 4px 0; min-height: 26px;
}
.tbw-col-dow { font-family: var(--mono); font-size: var(--text-xs); font-weight: 700; color: var(--fg2); }
.tbw-col-date { font-size: var(--text-xs); color: var(--fg3); }
.tbw-col-today .tbw-col-dow { color: var(--accent); }
.tbw-allday { display: flex; flex-direction: column; gap: 2px; min-height: 18px; padding: 1px; }
.tbw-canvas {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: copy;
  /* faint hour ruling */
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 47px, var(--border) 47px, var(--border) 48px);
}
.tbw-col-today .tbw-canvas { border-color: var(--accent); }
.tbw-axis-canvas { position: relative; }
.tbw-hour {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-family: var(--mono); font-size: var(--text-xs); color: var(--fg3);
}
.tbw-item {
  position: absolute; left: 2px; right: 2px;
  border-radius: 6px; padding: 2px 6px;
  font-size: var(--text-xs); line-height: 1.25;
  overflow: hidden; display: flex; flex-direction: column;
  text-align: left; min-width: 0;
}
.tbw-item-time { font-family: var(--mono); font-size: 0.85em; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbw-item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbw-fixed {
  --tb-c: var(--cal-event);
  background: color-mix(in srgb, var(--tb-c) 14%, var(--bg2));
  border-left: 3px solid var(--tb-c);
}
.tbw-fixed.tbw-src-ics { --tb-c: var(--cal-event-ics); }
.tbw-block {
  background: color-mix(in srgb, var(--tb-c, var(--cal-other)) 22%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--tb-c, var(--cal-other)) 55%, transparent);
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
}
.tbw-block:hover { border-color: var(--tb-c); }
.tbw-pinned { border-style: dashed; }
.tbw-delete-btn { margin-top: var(--sp-2); color: var(--cal-deadline); }

/* Plan-week proposal modal */
.tbw-prop-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 50vh; overflow-y: auto; }
.tbw-prop-day {
  display: grid; grid-template-columns: 92px 1fr; gap: 2px var(--sp-3);
  border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2);
}
.tbw-prop-date { font-family: var(--mono); font-size: var(--text-xs); color: var(--fg2); }
.tbw-prop-blocks { display: flex; flex-wrap: wrap; gap: 4px; }
.tbw-prop-block {
  font-size: var(--text-xs); padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--tb-c, var(--cal-other)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tb-c, var(--cal-other)) 40%, transparent);
}
.tbw-prop-dropped { grid-column: 2; font-size: var(--text-xs); color: var(--cal-deadline); }

/* Template editor modal */
.tbw-tpl { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 55vh; overflow-y: auto; }
.tbw-tpl-day h4 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); margin-bottom: 4px; }
.tbw-tpl-rows { display: flex; flex-direction: column; gap: 4px; }
.tbw-tpl-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto auto auto; gap: 6px; align-items: center; }
.tbw-tpl-row .fu-input[type="time"] { width: 92px; }

@media (max-width: 900px) {
  /* Phones: the grid keeps all 7 days but scrolls horizontally. */
  .tbw-grid { grid-template-columns: 44px repeat(7, minmax(96px, 1fr)); }
  .tbw-item-title { font-size: 0.68rem; }
}

/* ================================================================
   Journey view — upskilling trajectory with clustered material
   (memory/upskill-journey.json · gateway/journey.js · views/journey.js)
   ================================================================ */
/* The view is the scroll container. `.main` is `overflow: hidden`, so a view
   that declares no `flex`/`overflow` contract sizes to its content and gets
   clipped at the viewport with no way to reach the rest — which is exactly what
   happened here: #view-journey shipped with no rule at all and the tab was
   unscrollable (#1316). Every #view-* needs this pair; test/view-scroll-contract
   .test.js now enforces it. */
#view-journey { flex: 1; overflow-y: auto; padding: 24px; }

.jy-wrap { max-width: 1100px; margin: 0 auto; }
.jy-loading, .jy-error { padding: 40px; text-align: center; color: var(--fg2); }
.jy-error { color: var(--red); }
.jy-muted { color: var(--fg3); font-size: var(--text-sm); }
.jy-muted-small { color: var(--fg3); font-size: var(--text-xs); margin-top: var(--sp-4); }

.jy-header h2 { margin: 0 0 4px; }
.jy-header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.jy-subtitle { color: var(--fg2); margin: 0 0 var(--sp-4); font-size: 0.92em; max-width: 72ch; }
.jy-stats { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.jy-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-3) var(--sp-4); min-width: 130px; }
.jy-stat-val { font-size: 1.6em; font-weight: 700; color: var(--fg); line-height: 1; }
.jy-stat-label { font-size: 0.72em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

.jy-section { margin-bottom: var(--sp-6); }
.jy-section h3 { margin: 0 0 var(--sp-3); font-size: 1.05em; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.jy-section-hint { color: var(--fg3); font-size: var(--text-xs); font-weight: normal; margin-left: var(--sp-2); }

.jy-btn {
  background: var(--accent); color: var(--accent-ink); border: none; padding: 7px 14px;
  border-radius: 7px; cursor: pointer; font-size: 0.88em; font-weight: 600;
}
.jy-btn:hover { background: var(--accent2); }
.jy-btn-secondary { background: var(--bg3); color: var(--fg); }
.jy-btn-secondary:hover { background: var(--bg); }
.jy-btn:disabled { opacity: 0.6; cursor: default; }

/* ---- Timeline band ---- */
.jy-timeline { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.jy-tl-track { position: relative; height: 34px; }
.jy-tl-phase {
  position: absolute; top: 0; height: 28px; border-radius: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; overflow: hidden;
}
.jy-tl-phase-active { background: var(--accent-dim); border-color: var(--accent); }
.jy-tl-phase-name {
  font-family: var(--mono); font-size: 0.68em; color: var(--fg2);
  padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jy-tl-phase-active .jy-tl-phase-name { color: var(--accent); }
.jy-tl-today {
  position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--yellow);
  z-index: 2; border-radius: 1px;
}
.jy-tl-today-label {
  position: absolute; top: -2px; left: 5px; font-family: var(--mono);
  font-size: 0.62em; color: var(--yellow); white-space: nowrap;
}
.jy-tl-lanes { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-2); }
.jy-tl-lane {
  position: relative; height: 20px; background: none; border: none; padding: 0;
  cursor: pointer; display: block; width: 100%; text-align: left;
}
.jy-tl-bar {
  position: absolute; top: 0; height: 20px; border-radius: 10px;
  background: var(--bg3); overflow: hidden; display: flex; align-items: center;
  min-width: 40px;
}
.jy-tl-bar-core { outline: 1px solid var(--accent); }
.jy-tl-bar-supporting { outline: 1px solid var(--fg3); }
.jy-tl-bar-later { opacity: 0.65; }
.jy-tl-bar-overdue { outline-color: var(--red); }
.jy-tl-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--tint-accent); }
.jy-tl-bar-label {
  position: relative; font-size: 0.68em; color: var(--fg2); padding: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.jy-tl-lane:hover .jy-tl-bar { background: var(--bg); }
.jy-tl-bar-count { color: var(--fg3); font-family: var(--mono); }
.jy-tl-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 0.66em; color: var(--fg3); }

/* ---- Commitment bands (confirmed events + live applications) ----
   Solid = confirmed, hatched = applied but undecided. The visual difference is
   load-bearing: an undecided application must never read as a booked block. */
.jy-tl-commits { position: relative; height: 18px; margin-top: 6px; }
.jy-tl-commit {
  position: absolute; top: 0; height: 18px; border-radius: 4px;
  display: flex; align-items: center; overflow: hidden;
}
.jy-tl-commit-confirmed { background: var(--yellow); }
.jy-tl-commit-confirmed .jy-tl-commit-label { color: var(--bg); }
.jy-tl-commit-applied {
  border: 1px dashed var(--yellow);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--yellow) 28%, transparent) 3px,
    color-mix(in srgb, var(--yellow) 28%, transparent) 6px);
}
.jy-tl-commit-applied .jy-tl-commit-label { color: var(--fg2); }
.jy-tl-commit-est { opacity: 0.7; }
.jy-tl-commit-narrow { min-width: 5px; }
.jy-tl-commit-label {
  font-family: var(--mono); font-size: 0.62em; padding: 0 6px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A short block (a 9-day bootcamp on a 9-month runway) is too narrow to hold
   its own name — the label sits beside it instead of clipping to one letter. */
.jy-tl-commit-aside {
  position: absolute; top: 0; height: 18px; display: flex; align-items: center;
  font-family: var(--mono); font-size: 0.6em; font-weight: 600;
  color: var(--yellow); white-space: nowrap; pointer-events: none;
  /* Chipped so it stays readable where it runs up against the next band. */
  background: var(--bg2); padding: 0 4px; border-radius: 3px; z-index: 1;
}

.jy-adv-more { margin-top: 6px; }
.jy-adv-more summary {
  cursor: pointer; color: var(--fg2); font-size: var(--text-sm);
  padding: 4px 0; min-height: var(--touch); display: flex; align-items: center;
  gap: 6px; list-style: none;
}
.jy-adv-more summary::-webkit-details-marker { display: none; }
.jy-adv-more summary::before { content: "▸"; color: var(--fg3); }
.jy-adv-more[open] summary::before { content: "▾"; }
.jy-adv-more summary:hover { color: var(--fg); }
.jy-adv-more .jy-adv-list { margin-top: 6px; }

/* ---- Timing advisories ---- */
.jy-adv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jy-adv {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--fg3); border-radius: 8px; padding: 9px var(--sp-3);
}
.jy-adv-warn { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 5%, var(--bg2)); }
.jy-adv-info { border-left-color: var(--yellow); }
.jy-adv-conditional { border-left-style: dashed; }
.jy-adv-icon { flex: none; font-size: 0.72em; padding-top: 3px; color: var(--fg3); }
.jy-adv-warn .jy-adv-icon { color: var(--red); }
.jy-adv-info .jy-adv-icon { color: var(--yellow); }
.jy-adv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jy-adv-title { font-size: 0.92em; font-weight: 600; }
.jy-adv-detail { font-size: var(--text-sm); color: var(--fg2); max-width: 88ch; }
.jy-adv-jump { flex: none; align-self: center; }

/* ---- Commitment rows ---- */
.jy-cm {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px var(--sp-3); margin-bottom: 6px;
}
.jy-cm-confirmed { border-left: 3px solid var(--yellow); }
.jy-cm-applied { border-left: 3px dashed var(--yellow); }
.jy-cm-prospective { border-left: 3px dotted var(--fg3); }
.jy-cm-name { font-weight: 600; font-size: 0.94em; }
.jy-cm-window { font-family: var(--mono); font-size: 0.74em; color: var(--fg2); }
.jy-cm-window + .jy-cm-window { border-left: 1px solid var(--border); padding-left: var(--sp-2); }
.jy-cm-window i { color: var(--fg3); font-style: normal; }
.jy-cm-loc { font-size: 0.75em; color: var(--fg3); }
.jy-pill-confirmed { background: var(--tint-yellow); color: var(--yellow); }
.jy-pill-applied { background: var(--bg3); color: var(--fg2); }
.jy-pill-prospective { background: var(--bg); color: var(--fg3); }

/* ---- Per-cluster capacity + advisory ---- */
.jy-capacity {
  font-size: var(--text-sm); color: var(--fg2); margin: 0 0 var(--sp-3);
  padding: 8px var(--sp-3); background: var(--bg3); border-radius: 8px; line-height: 1.5;
}
.jy-capacity-num { font-weight: 700; color: var(--fg); font-family: var(--mono); }
.jy-cluster-advisory {
  font-size: var(--text-sm); color: var(--fg2); margin: 0 0 var(--sp-3);
  padding: 8px var(--sp-3); border-left: 3px solid var(--yellow);
  background: var(--bg3); border-radius: 0 8px 8px 0; max-width: 88ch;
}
.jy-cluster-advisory-warn { border-left-color: var(--red); }
.jy-cluster-advisory strong { color: var(--fg); }

/* ---- Cluster cards ---- */
.jy-cluster { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: var(--sp-3); overflow: hidden; }
.jy-cluster-overdue { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.jy-cluster-head {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  background: none; border: none; color: var(--fg); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; font-size: 1em; min-height: var(--touch); flex-wrap: wrap;
}
.jy-cluster-head:hover { background: var(--bg3); }
.jy-cluster-chevron { color: var(--fg3); width: 12px; flex: none; }
.jy-cluster-title { font-weight: 600; }
.jy-cluster-window { color: var(--fg3); font-family: var(--mono); font-size: 0.72em; }
.jy-cluster-overdue .jy-cluster-window { color: var(--red); }
.jy-cluster-count { margin-left: auto; color: var(--fg3); font-family: var(--mono); font-size: 0.75em; white-space: nowrap; }
.jy-cluster-bar { height: 3px; background: var(--bg3); }
.jy-cluster-bar-fill { height: 100%; background: var(--accent); transition: width 0.25s; }
.jy-cluster-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.jy-cluster-relevance { color: var(--fg2); font-size: var(--text-sm); margin: 0 0 var(--sp-3); max-width: 80ch; }

.jy-pill { font-size: 0.72em; padding: 2px 8px; border-radius: 10px; background: var(--bg3); color: var(--fg2); white-space: nowrap; }
.jy-pill-core { background: var(--tint-accent); color: var(--accent); }
.jy-pill-supporting { background: var(--bg3); color: var(--fg2); }
.jy-pill-later, .jy-pill-off-path { background: var(--bg3); color: var(--fg3); }
.jy-pill-type { background: var(--bg); color: var(--fg3); }
.jy-pill-progress { background: var(--tint-yellow); color: var(--yellow); }
.jy-pill-dup { background: var(--tint-yellow); color: var(--yellow); }

/* ---- Item rows ---- */
.jy-items { display: flex; flex-direction: column; }
.jy-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 7px 0; border-bottom: 1px dashed var(--border);
}
.jy-item:last-child { border-bottom: none; }
.jy-item-check { flex: none; padding-top: 1px; }
.jy-item-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.jy-item-main { flex: 1; min-width: 0; }
.jy-item-title { font-size: 0.92em; line-height: 1.35; }
.jy-item-title a { color: var(--fg); text-decoration: none; }
.jy-item-title a:hover { color: var(--accent); text-decoration: underline; }
.jy-item-meta { display: inline-flex; gap: 6px; align-items: baseline; margin-left: 6px; flex-wrap: wrap; }
.jy-item-author { color: var(--fg3); font-size: 0.75em; }
.jy-item-done .jy-item-title, .jy-item-skipped .jy-item-title { color: var(--fg3); text-decoration: line-through; }
.jy-item-done .jy-item-title a, .jy-item-skipped .jy-item-title a { color: var(--fg3); }
.jy-item-active { background: color-mix(in srgb, var(--yellow) 5%, transparent); border-radius: 6px; }
.jy-item-actions { flex: none; display: flex; gap: 4px; align-items: center; opacity: 0.55; }
.jy-item:hover .jy-item-actions { opacity: 1; }
.jy-mini {
  background: var(--bg3); border: none; color: var(--fg2); border-radius: 6px;
  padding: 2px 7px; cursor: pointer; font-size: 0.78em;
}
.jy-mini:hover { background: var(--bg); color: var(--fg); }
.jy-move {
  background: var(--bg3); border: none; color: var(--fg3); border-radius: 6px;
  font-size: 0.72em; max-width: 92px; padding: 3px 4px; cursor: pointer;
}
.jy-move:hover { color: var(--fg); }

/* ---- Learning bits ---- */
.jy-bits { margin-top: var(--sp-3); }
.jy-bits summary { cursor: pointer; color: var(--fg2); font-size: var(--text-sm); font-weight: 600; }
.jy-bits-list { margin-top: var(--sp-2); display: flex; flex-direction: column; }
.jy-bit {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 0.85em;
}
.jy-bit:last-child { border-bottom: none; }
.jy-bit-check input { width: 14px; height: 14px; accent-color: var(--green); cursor: pointer; }
.jy-bit-date { color: var(--fg3); font-family: var(--mono); font-size: 0.8em; white-space: nowrap; }
.jy-bit-title { color: var(--fg2); text-decoration: none; }
a.jy-bit-title:hover { color: var(--accent); }
.jy-bit-read .jy-bit-title { color: var(--fg3); }

/* ---- Parked shelf ---- */
.jy-parked summary { cursor: pointer; list-style: none; }
.jy-parked summary::-webkit-details-marker { display: none; }
.jy-parked-title { display: inline-block; margin: 0 0 var(--sp-3); font-size: 1.05em; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.jy-parked[open] summary .jy-parked-title { color: var(--fg); }
.jy-parked summary .jy-parked-title { color: var(--fg2); }

/* The shared #view-* phone-padding group (search "--view-pad") sits earlier in
   this file, and #view-journey's base rule below it would win on source order
   at equal specificity — so Journey carries its own copy of that override. */
@media (max-width: 768px) {
  #view-journey {
    padding: var(--view-pad);
    padding-bottom: calc(var(--view-pad) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .jy-stats { gap: var(--sp-2); }
  .jy-stat { min-width: 100px; padding: var(--sp-2) var(--sp-3); }
  .jy-cluster-count { margin-left: 0; width: 100%; padding-left: 20px; }
  .jy-tl-bar-label { font-size: 0.62em; }
  .jy-tl-commit-label { font-size: 0.56em; padding: 0 3px; }
  .jy-adv { flex-wrap: wrap; }
  .jy-adv-jump { margin-left: auto; }
  .jy-cm-window + .jy-cm-window { border-left: none; padding-left: 0; }
  .jy-move { display: none; } /* re-clustering is a desktop affordance */
}

/* --- Math (KaTeX) --- */
/* Wide display equations scroll instead of breaking the layout. */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
}

/* ---- Browser view (embedded reference browser) ---- */
#view-browser { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.browser-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0;
}
.browser-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: transparent; color: var(--fg2); cursor: pointer; flex-shrink: 0;
}
.browser-nav-btn svg { width: 18px; height: 18px; }
.browser-nav-btn:hover:not(:disabled) { background: var(--bg3); color: var(--fg); }
.browser-nav-btn:disabled { opacity: 0.35; cursor: default; }
.browser-urlbar { flex: 1; min-width: 0; }
.browser-urlbar input {
  width: 100%; padding: 7px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--fg);
  font-size: 0.85em; font-family: var(--mono);
}
.browser-urlbar input:focus { outline: none; border-color: var(--accent); }
.browser-frame { flex: 1; width: 100%; border: none; background: #fff; min-height: 0; }
.browser-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.browser-empty-content { max-width: 380px; }
.browser-empty-content svg { color: var(--fg3); margin-bottom: 16px; }
.browser-empty-content h3 { margin-bottom: 8px; font-size: 1.1em; }
.browser-empty-content p { color: var(--fg2); font-size: 0.9em; line-height: 1.5; }

/* ================================================================
   Goals view — vision/priority registry
   (memory/standing-priorities.json · gateway/priorities.js · views/goals.js)
   ================================================================ */
/* Scroll contract: .main is overflow hidden, so every #view-* must declare
   the flex/overflow pair (see #view-journey note, #1316). */
#view-goals { flex: 1; display: block; overflow-y: auto; padding: 24px; }

.goals-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 900px; margin: 0 auto 8px; }
.goals-header h2 { margin: 0 0 4px; }
.goals-northstar { color: var(--fg2); font-size: 0.88em; max-width: 68ch; margin: 0 0 8px; line-height: 1.45; }
.goals-add-btn {
  padding: 7px 14px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer; font-size: 0.88em;
  white-space: nowrap;
}
.goals-add-btn:hover { background: var(--accent2); border-color: var(--accent2); }

.goals-warning {
  max-width: 900px; margin: 0 auto 12px; padding: 10px 14px;
  border: 1px solid var(--red); border-radius: 8px; color: var(--red);
  font-size: 0.85em; background: color-mix(in srgb, var(--red) 8%, transparent);
}

.goals-section { max-width: 900px; margin: 0 auto 20px; }
.goals-section-title {
  font-family: var(--mono); font-size: 0.72em; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg3); margin: 0 0 8px;
}
.goals-empty { color: var(--fg3); font-size: 0.9em; padding: 12px 0; }

.goals-card {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg2);
  padding: 12px 14px; margin-bottom: 10px;
}
.goals-card-paused { opacity: 0.7; }
.goals-card-archived { opacity: 0.6; }
.goals-card-proposed { border-color: var(--accent); border-style: dashed; }
.goals-card-okr { background: var(--bg); }
/* Deep-linked card (#1806) — the Library's goal chip lands here, so the card
   flashes once to say "this is the one you clicked". Removed after ~2.5s by
   goals.js; the transition is on the base rule so the fade-out is animated too. */
.goals-card { transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.goals-card-focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

.goals-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.goals-rank {
  font-family: var(--mono); font-size: 0.8em; color: var(--accent);
  font-weight: 700; min-width: 24px;
}
.goals-title { font-weight: 600; }
.goals-badge {
  font-family: var(--mono); font-size: 0.68em; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 7px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--fg2);
}
.goals-kind-experiment { border-color: var(--accent); color: var(--accent); }
.goals-status-paused, .goals-status-retired { color: var(--fg3); }
.goals-status-done { color: var(--green, #3a9); border-color: var(--green, #3a9); }
.goals-status-proposed, .goals-source-brain { color: var(--accent); border-color: var(--accent); }

.goals-label { color: var(--fg3); font-family: var(--mono); font-size: 0.85em; }
.goals-nextstep { font-size: 0.9em; line-height: 1.45; margin-bottom: 4px; }
.goals-notes { font-size: 0.85em; color: var(--fg2); line-height: 1.4; margin: 4px 0; }
.goals-links { font-size: 0.8em; margin: 4px 0; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; }
.goals-links a { color: var(--accent); text-decoration: none; }
.goals-links a:hover { text-decoration: underline; }
/* Project hub (2026-09-05): typed link chips + the artifacts (results) ledger. */
.goals-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.goals-linkkind, .goals-artkind { font-family: var(--mono); font-size: 0.75em; color: var(--fg3); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; line-height: 1.5; text-transform: lowercase; }
.goals-artkind-pr { color: var(--accent); border-color: var(--accent); }
.goals-artkind-deploy { color: var(--green, #3a9); border-color: var(--green, #3a9); }
.goals-artkind-chart { color: var(--orange, #d98a2b); border-color: var(--orange, #d98a2b); }
.goals-results { font-size: 0.8em; margin: 4px 0; }
.goals-artifacts { list-style: none; margin: 2px 0 0; padding: 0; }
.goals-artifact { display: flex; gap: 8px; align-items: baseline; line-height: 1.6; flex-wrap: wrap; }
.goals-artifact > a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
.goals-artifact > a:hover { text-decoration: underline; }
.goals-artifact a.goals-ref { color: var(--fg3); text-decoration: none; }
.goals-artifacts-more { margin-top: 2px; }
.goals-ref { font-family: var(--mono); font-size: 0.9em; color: var(--fg3); }
.goals-advanced { font-size: 0.8em; color: var(--fg3); margin-top: 4px; }
.goals-provenance { font-size: 0.8em; color: var(--fg3); margin-top: 4px; }
.goals-card-proposed .goals-provenance { color: var(--accent); }
.goals-krs { font-size: 0.85em; color: var(--fg2); margin: 4px 0 4px 20px; padding: 0; line-height: 1.5; }

.goals-serves { font-size: 0.8em; margin: 4px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.goals-chip { display: inline-block; font-size: 0.85em; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--fg2); background: var(--bg); white-space: nowrap; }
.goals-chip-skill { font-family: var(--mono); font-size: 0.8em; }
/* Tailnet preview-deploy chip on a priority card (#1653). */
.goals-preview { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.goals-preview:hover { background: var(--accent); color: var(--bg); }
.goals-preview-down { color: var(--fg3); border-style: dashed; }
.goals-chip-stale { border-color: var(--red, #c55); color: var(--red, #c55); text-decoration: line-through; }
.goals-unserved { color: var(--orange, #d98a2b); border-color: var(--orange, #d98a2b); }
.goals-life-vision { font-size: 0.85em; color: var(--fg2); line-height: 1.45; margin: 0 0 10px; }
.goals-life-group { margin: 0 0 10px; }
.goals-life-group-title { font-size: 0.8em; color: var(--fg3); font-family: var(--mono); margin: 0 0 4px; }
.goals-life-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.9em; }
.goals-life-row:last-child { border-bottom: none; }
.goals-life-done { opacity: 0.55; }
.goals-life-done .goals-life-text { text-decoration: line-through; }
.goals-life-check { font-family: var(--mono); color: var(--fg3); }
.goals-life-text { flex: 1 1 260px; }
.goals-life-served { display: flex; gap: 4px; flex-wrap: wrap; }
.goals-boundaries { font-size: 0.85em; margin: 4px 0; }
.goals-boundaries summary { cursor: pointer; color: var(--fg3); }
.goals-boundaries ul { margin: 4px 0 4px 18px; padding: 0; color: var(--fg2); line-height: 1.5; }

.goals-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.goals-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--fg2); cursor: pointer; font-size: 0.78em;
}
.goals-btn:hover:not(:disabled) { background: var(--bg3); color: var(--fg); }
.goals-btn:disabled { opacity: 0.35; cursor: default; }
.goals-btn-accept { border-color: var(--accent); color: var(--accent); }
.goals-btn-accept:hover { background: var(--accent); color: #fff; }

.goals-archive-toggle {
  background: none; border: none; color: var(--fg3); cursor: pointer;
  font-family: var(--mono); font-size: 0.78em; padding: 4px 0;
}
.goals-archive-toggle:hover { color: var(--fg); }

.goals-rules { max-width: 900px; margin: 0 auto 24px; font-size: 0.85em; color: var(--fg2); }
.goals-rules summary { cursor: pointer; color: var(--fg3); }
.goals-rules ul { margin: 6px 0 0 18px; line-height: 1.5; }

.goals-field { display: block; margin-bottom: 10px; font-size: 0.85em; color: var(--fg2); }
.goals-field input, .goals-field select, .goals-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--fg); font-size: 0.95em; font-family: inherit;
}
.goals-field input:focus, .goals-field select:focus, .goals-field textarea:focus {
  outline: none; border-color: var(--accent);
}

/* Steering (2026-09-03): the owner's queued input for a priority's next loop. */
.goals-steering { font-size: 0.85em; margin: 4px 0; }
.goals-steering-pending { list-style: none; margin: 4px 0; padding: 0; }
.goals-steering-pending li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 8px; margin: 2px 0; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 6px 6px 0; line-height: 1.4; }
.goals-steering-text { flex: 1 1 240px; color: var(--fg); }
.goals-steering-badge { font-family: var(--mono); font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 1px 6px; white-space: nowrap; }
.goals-steering-x { background: none; border: none; color: var(--fg3); cursor: pointer; font-size: 0.9em; padding: 0 4px; }
.goals-steering-x:hover { color: var(--red, #c55); }
.goals-steering-taken summary { color: var(--fg3); }
.goals-btn-steer { border-color: var(--accent); color: var(--accent); }
.goals-btn-steer:hover:not(:disabled) { background: var(--accent); color: #fff; }
.goals-steering-help { font-size: 0.85em; color: var(--fg2); line-height: 1.45; margin: 0 0 10px; }
.goals-steering-list { font-size: 0.85em; color: var(--fg2); margin: 8px 0; }
.goals-steering-list ul { margin: 4px 0 0 18px; padding: 0; line-height: 1.5; }
.goals-intake { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.goals-field-inline { display: flex; align-items: center; gap: 8px; }
.goals-field-inline input[type="checkbox"] { width: auto; margin: 0; display: inline-block; }

@media (max-width: 700px) {
  #view-goals { padding: 14px; }
}

/* Deep-linked follow-up row (#follow-ups/F###, what a Home deadline row opens):
   scrolled to centre and flashed once so the eye lands on it. scroll-margin
   keeps it clear of the sticky toolbar. */
.fu-row { scroll-margin-top: 96px; }
.fu-row-flash { animation: fu-row-flash 2.2s ease-out; }
@keyframes fu-row-flash {
  0%   { background: color-mix(in srgb, var(--accent) 40%, var(--bg2)); border-color: var(--accent); }
  60%  { background: color-mix(in srgb, var(--accent) 22%, var(--bg2)); border-color: var(--accent); }
  100% { background: var(--bg2); }
}

/* Desk rich (WYSIWYG) mode (2026-09-01) — #writing-rich hosts @toast-ui/editor,
   (vendored, lazy-loaded by views/writing.js). The textarea/preview panes
   are hidden in this view; the frontmatter panel shows read-only YAML. */
.writing-rich { display: none; flex: 1 1 100%; min-width: 0; }
.writing-editor-view-rich .writing-editor-panes .writing-editor,
.writing-editor-view-rich .writing-editor-panes .writing-preview { display: none; }
.writing-editor-view-rich .writing-editor-panes .writing-rich { display: block; }
.writing-rich-loading, .reader-notes-rich-loading { padding: 16px; color: var(--fg2); font-size: 0.9em; }
/* `.rich-editor-host` is shared by the Desk (#writing-rich) and the Reader
   Notes pane (#reader-notes-rich, 2026-09-05). */
.rich-editor-host .toastui-editor-defaultUI { border-color: var(--bg3); border-radius: 8px; font-family: inherit; }
.rich-editor-host .toastui-editor-defaultUI .toastui-editor-toolbar { border-radius: 8px 8px 0 0; }
.rich-editor-host .toastui-editor-ww-container { background: var(--bg); }
.rich-editor-host .toastui-editor-contents {
  font-family: inherit; font-size: 1em; line-height: 1.65; color: var(--fg);
}
.rich-editor-host .toastui-editor-contents a { color: var(--accent); }
.rich-editor-host .toastui-editor-contents pre,
.rich-editor-host .toastui-editor-contents code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.writing-fm { display: none; margin: 0 0 10px; font-size: 0.8em; color: var(--fg2); }
.writing-editor-view-rich .writing-fm:not([hidden]) { display: block; }
.writing-fm summary { cursor: pointer; }
.writing-fm pre {
  margin: 6px 0 0; padding: 8px 10px; background: var(--bg2); border-radius: 6px;
  font-size: 0.95em; overflow-x: auto; white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   Desk navigation facets + Nearby + Reading log (owner request 2026-09-01)
   --------------------------------------------------------------------------- */
.writing-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8em; color: var(--fg2); }
.writing-sort-select {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); border-radius: 14px;
  padding: 3px 8px; font-size: 0.95em; cursor: pointer;
}
.writing-facet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.writing-facet-label { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg3); margin-right: 2px; }
.writing-facet {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--bg3); border-radius: 12px;
  padding: 2px 9px; font-size: 0.78em; cursor: pointer; line-height: 1.5;
}
.writing-facet:hover { background: var(--bg3); color: var(--fg); }
.writing-facet-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.writing-facet-active:hover { background: var(--accent); color: #fff; }
.writing-facet-count { opacity: 0.7; font-variant-numeric: tabular-nums; }
.writing-facet-more, .writing-facet-reset { border-style: dashed; }
.writing-facet-topic { cursor: default; }
.writing-facet-clear {
  background: none; border: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 1.05em; line-height: 1;
}
.writing-tag-btn { cursor: pointer; border: 1px solid transparent; font: inherit; }
.writing-tag-btn:hover { border-color: var(--accent); color: var(--fg); }
.writing-tag-active { background: var(--accent); color: #fff; }
button.writing-topic-chip { cursor: pointer; font: inherit; border: 1px solid transparent; }
button.writing-topic-chip:hover { border-color: var(--accent); }
.writing-topic-chip-active { outline: 2px solid var(--accent); outline-offset: -1px; }

.writing-nearby {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px;
}
.writing-nearby-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.writing-nearby-group { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.writing-nearby-label { flex: 0 0 110px; font-size: 0.78em; color: var(--fg3); padding-top: 4px; }
.writing-nearby-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.writing-nearby-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 6px;
  padding: 3px 9px; font-size: 0.85em; cursor: pointer; text-align: left;
}
.writing-nearby-chip:hover { border-color: var(--accent); }
.writing-nearby-chip .writing-type { font-size: 0.75em; }
.writing-nearby-more, .writing-nearby-empty { font-size: 0.8em; color: var(--fg3); }
.writing-nearby-empty { padding: 4px 0; }

.writing-reading {
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
  padding: 8px 14px; margin-bottom: 12px;
}
.writing-reading > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; flex-wrap: wrap;
}
.writing-reading > summary::-webkit-details-marker { display: none; }
.writing-reading > summary::before { content: "▸"; color: var(--fg3); font-size: 0.85em; }
.writing-reading[open] > summary::before { content: "▾"; }
.writing-reading-count { font-size: 0.8em; color: var(--fg3); }
.writing-reading-actions { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; font-size: 0.85em; }
.writing-btn-small { padding: 2px 9px; font-size: 0.85em; }
.writing-reading-body { padding-top: 8px; border-top: 1px solid var(--bg3); margin-top: 8px; }
.writing-reading-section { margin-bottom: 14px; }
.writing-reading-section h4 { margin: 0 0 6px; font-size: 0.85em; color: var(--fg2); display: flex; align-items: center; gap: 6px; }
.writing-reading-n { background: var(--bg3); color: var(--fg2); border-radius: 10px; padding: 0 7px; font-size: 0.85em; font-weight: normal; }
.writing-reading-hl {
  margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #fbbf24;
  background: var(--bg); border-radius: 0 6px 6px 0; font-size: 0.9em; line-height: 1.5;
}
.writing-reading-page {
  display: inline-block; font-size: 0.72em; color: var(--fg3); background: var(--bg3);
  border-radius: 8px; padding: 0 6px; margin-right: 6px; vertical-align: middle; font-variant-numeric: tabular-nums;
}
.writing-reading-comment { margin-top: 4px; color: var(--fg2); font-style: italic; font-size: 0.95em; }
.writing-reading-notes, .writing-reading-answer { max-height: none; padding: 8px 12px; font-size: 0.9em; }
.writing-reading-ex { margin: 0 0 6px; background: var(--bg); border: 1px solid var(--bg3); border-radius: 6px; padding: 4px 10px; }
.writing-reading-ex > summary { cursor: pointer; font-size: 0.9em; line-height: 1.5; }
.writing-reading-ex[open] > summary { margin-bottom: 4px; }
.writing-reading-empty { font-size: 0.85em; color: var(--fg3); padding: 4px 0; }

/* --- Bookshelf: the Library tab's "Books" mode (2026-09-04) ---------------
   Goodreads-for-one: cover grid, shelves, stars, yearly goal. Books are read
   off-app (paper / Kindle / audio), so cards edit in place instead of opening
   a viewer. Module: public/js/views/books-shelf.js. */
.reader-mode-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--bg3); margin-left: 12px; }
.reader-mode-btn { background: transparent; color: var(--fg2); border: none; border-radius: 8px; padding: 4px 12px; font: inherit; font-size: 0.85em; cursor: pointer; }
.reader-mode-btn:hover { color: var(--fg); }
.reader-mode-btn-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.books-shelf { display: flex; flex-direction: column; gap: 14px; }
.books-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.books-stat { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.books-stat-goal { grid-column: span 2; }
.books-stat-years { grid-column: span 2; }
.books-stat-label { color: var(--fg3); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; }
.books-stat-value { font-size: 1.25em; font-weight: 600; margin-top: 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.books-goal-edit { background: none; border: 1px solid var(--bg3); color: var(--fg2); border-radius: 10px; font: inherit; font-size: 0.6em; padding: 1px 8px; cursor: pointer; }
.books-goal-edit:hover { border-color: var(--accent); color: var(--fg); }
.books-goal-bar { height: 4px; margin-top: 8px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.books-goal-bar span { display: block; height: 100%; background: var(--accent); }
.books-year-chip { font-size: 0.7em; font-weight: 400; color: var(--fg2); background: var(--bg3); border-radius: 10px; padding: 1px 8px; }
.books-year-chip b { color: var(--fg); }

.books-add { display: flex; gap: 8px; flex-wrap: wrap; }
.books-add input[type="text"] { flex: 1 1 180px; min-width: 0; background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); border-radius: 8px; padding: 8px 10px; font: inherit; }
.books-add select, .books-toolbar select, .books-toolbar input[type="search"] { background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.9em; }
.books-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.books-toolbar .reader-lib-filters { margin-bottom: 0; }
.books-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.books-toolbar input[type="search"] { min-width: 200px; }
#books-export { text-decoration: none; }

.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.books-card { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 4px 12px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; padding: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 0; }
.books-card:hover { border-color: var(--accent); }
.books-card-read { opacity: 0.92; }
.books-card-abandoned { opacity: 0.6; }
.books-cover { width: 64px; height: 96px; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow); grid-row: span 2; background: var(--bg3); }
.books-cover-ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 0.6em; line-height: 1.2; font-weight: 600; color: #fff; background: linear-gradient(160deg, hsl(var(--hue) 45% 38%), hsl(var(--hue) 40% 22%)); overflow: hidden; }
.books-card-body { min-width: 0; }
.books-card-title { font-weight: 600; line-height: 1.3; font-size: 0.95em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.books-card-subtitle { display: block; font-weight: 400; color: var(--fg2); font-size: 0.85em; }
.books-card-author { color: var(--fg2); font-size: 0.82em; margin-top: 2px; }
.books-card-meta, .books-card-when { color: var(--fg3); font-size: 0.74em; margin-top: 2px; }
.books-card-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.books-stars { display: inline-flex; gap: 1px; color: var(--fg3); font-size: 0.95em; line-height: 1; user-select: none; }
.books-stars-live .books-star { cursor: pointer; }
.books-stars-live .books-star:hover, .books-stars-live .books-star:hover ~ .books-star { color: var(--fg3); }
.books-star.on { color: var(--yellow); }
.books-badge { font-size: 0.66em; color: var(--fg2); background: var(--bg3); border-radius: 8px; padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.books-badge-fav { color: var(--red); background: transparent; font-size: 0.9em; padding: 0; }
.books-progress { height: 3px; margin-top: 6px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.books-progress span { display: block; height: 100%; background: var(--accent); }
.books-card-actions { grid-column: 2; align-self: end; }
.books-shelf-select { background: var(--bg); color: var(--fg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 0.78em; max-width: 100%; }
.books-shelf-reading { border-color: var(--accent); color: var(--accent); }
.books-shelf-read { color: var(--green); }

/* Detail modal */
.books-detail { display: grid; grid-template-columns: 120px 1fr; gap: 18px; }
.books-detail-cover .books-cover { width: 120px; height: 180px; }
.books-detail-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.books-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.78em; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.05em; min-width: 0; }
.books-field input, .books-field select, .books-field textarea { background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 1.15em; text-transform: none; letter-spacing: 0; }
.books-field textarea { resize: vertical; font-family: var(--font-serif); font-size: 1.25em; line-height: 1.45; }
.books-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.books-field-check { flex-direction: row; align-items: center; gap: 6px; justify-content: flex-start; padding-top: 18px; }
.books-field-check input { width: auto; }
.books-rating-edit { padding: 6px 0; font-size: 1.4em; }
.books-detail-links { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 0.85em; margin-top: 4px; }
.books-detail-links a, .books-linkbtn { color: var(--accent); background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.books-detail-links a:hover, .books-linkbtn:hover { text-decoration: underline; }
.books-detail-meta { color: var(--fg3); margin-left: auto; }
.books-detail-actions { display: flex; gap: 8px; margin-top: 6px; }
.books-danger { color: var(--red); border-color: var(--red); }
.books-hint { color: var(--fg3); font-size: 0.85em; margin: 6px 0 0; }
@media (max-width: 640px) {
  .books-detail { grid-template-columns: 1fr; }
  .books-detail-cover { display: none; }
  .books-stat-goal, .books-stat-years { grid-column: span 1; }
  .books-toolbar input[type="search"] { min-width: 140px; }
}