:root {
  --bg:           #f5f4ef;
  --bg-elevated: #ffffff;
  --bg-subtle:   #ece9e1;
  --border:      #d9d4c7;
  --border-soft: #e6e2d6;
  --fg:          #1a1a1a;
  --fg-muted:    #6b6657;
  --fg-faint:    #94907f;
  --accent:        #cc785c;
  --accent-soft:   #e8a48f;
  --accent-tinted: rgba(204, 120, 92, 0.10);
  --status-done:        #4a7c59;
  --status-in-progress: #c89b3c;
  --status-planned:     #9b9484;
  --bucket-light:  #7a9bb8;
  --bucket-medium: #c89b3c;
  --bucket-heavy:  #b85c4a;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #1f1d1a;
    --bg-elevated: #2a2823;
    --bg-subtle:   #181714;
    --border:      #3d3a33;
    --border-soft: #2d2b26;
    --fg:          #ede9df;
    --fg-muted:    #a8a39a;
    --fg-faint:    #6b6657;
    --accent:        #d99477;
    --accent-soft:   #b87055;
    --accent-tinted: rgba(217, 148, 119, 0.16);
  }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--fg); }

.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 1rem; margin: 0; font-weight: 600; }
.tabs { display: flex; gap: 0.25rem; margin-left: auto; }
.tab { padding: 0.4rem 0.8rem; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.875rem; }
.tab[aria-selected="true"] { background: var(--accent); color: white; border-color: var(--accent); }
.tab[disabled] { opacity: 0.4; cursor: not-allowed; }

main { height: calc(100vh - 50px); overflow: hidden; }
.view { display: none; height: 100%; }
.view:not([hidden]) { display: grid; }

.view-atlas { grid-template-columns: 260px 1fr; grid-template-rows: 1fr auto; }
.flow-rail { grid-row: 1 / 3; border-right: 1px solid var(--border); padding: 0.75rem; overflow-y: auto; }
.flow-search { width: 100%; padding: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); }
.flow-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.graph-canvas { background: var(--bg); position: relative; }
.flow-detail { grid-column: 2; border-top: 1px solid var(--border); padding: 0.75rem 1rem; max-height: 40%; overflow-y: auto; background: var(--bg); }
.flow-detail header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.flow-detail-title { font-weight: 600; }
.flow-detail-clear { margin-left: auto; border: none; background: transparent; cursor: pointer; font-size: 1.25rem; color: var(--fg-muted); }

.view-sprints { padding: 1rem; overflow-y: auto; }
.sprint-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sprint-summary { font-weight: 600; }
.sprint-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

.flow-group + .flow-group { margin-top: 0.75rem; }
.flow-group-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 0.25rem; }
.flow-item { padding: 0.4rem 0.5rem; cursor: pointer; border-radius: var(--radius-sm); font-size: 0.875rem; }
.flow-item:hover { background: var(--accent-tinted); }
.flow-item.selected { background: var(--accent); color: white; }

.flow-step { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); margin-bottom: 0.25rem; cursor: default; }
.flow-step:hover { background: var(--accent-tinted); }
.flow-step-head { font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 0.2rem; }
.flow-step-label { font-weight: 600; font-size: 0.95rem; }
.flow-step-detail { font-size: 0.85rem; color: var(--fg-muted); margin-top: 0.2rem; }
.status { display: inline-block; padding: 0 0.4rem; font-size: 0.7rem; border-radius: var(--radius-sm); margin-left: 0.4rem; vertical-align: middle; }
.status-done        { background: var(--status-done); color: white; }
.status-in-progress { background: var(--status-in-progress); color: white; }
.status-planned     { background: var(--status-planned); color: white; }

.flow-step.panel-hover { background: var(--accent-tinted); }

.tag-filters { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.5rem 0; }
.tag-chip { font-size: 0.7rem; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
.tag-chip.selected { background: var(--accent); color: white; border-color: var(--accent); }

.sprint-card { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.sprint-card.sprint-in-progress { border-color: var(--accent); animation: pulse-border 2s ease-in-out infinite; }
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(204, 120, 92, 0.0); } 50% { box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.15); } }
.sprint-card header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.sprint-range { font-size: 0.85rem; color: var(--fg-muted); }
.sprint-pill { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--accent); color: white; }
.sprint-title { font-weight: 600; margin-bottom: 0.25rem; }
.sprint-summary-body { font-size: 0.875rem; color: var(--fg-muted); margin-bottom: 0.5rem; }
.sprint-tokens { font-size: 0.75rem; color: var(--fg-muted); margin-bottom: 0.5rem; font-family: ui-monospace, monospace; }
.sprint-tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.sprint-task { display: grid; grid-template-columns: 240px 80px 1fr; align-items: center; gap: 0.5rem; }
.sprint-task .bar { height: 12px; border-radius: 3px; }
.sprint-task .bar-light  { background: var(--bucket-light); }
.sprint-task .bar-medium { background: var(--bucket-medium); }
.sprint-task .bar-heavy  { background: var(--bucket-heavy); }
.sprint-task .bucket { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; }
.sprint-task .task-label { font-size: 0.875rem; }
.sprint-flowref { color: var(--accent); font-size: 0.8rem; }
.sprint-empty { color: var(--fg-muted); padding: 2rem; text-align: center; }

.bucket-chip { font-size: 0.75rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
.bucket-chip.selected { background: var(--accent); color: white; border-color: var(--accent); }

.view-forecast { padding: 1rem 1.5rem; overflow-y: auto; display: block; }
.forecast-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.forecast-header label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.forecast-header select { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--fg); font-family: var(--font-sans); }
.forecast-target { color: var(--fg-muted); font-size: 0.85rem; }
.forecast-burndown { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; min-height: 320px; }
.forecast-burndown canvas { max-height: 360px; }
.forecast-spend { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem; }
.forecast-spend h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; }
.forecast-spend-body > div { font-size: 0.875rem; line-height: 1.6; }
.forecast-empty { color: var(--fg-muted); padding: 2rem; text-align: center; }

/* MEMORY chips in flow detail */
.flow-memories { margin-bottom: 0.5rem; }
.flow-memories-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 0.25rem; }
.memory-chip { font-size: 0.75rem; padding: 0.2rem 0.5rem; margin: 0 0.25rem 0.25rem 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--fg); cursor: pointer; font-family: var(--font-sans); }
.memory-chip:hover { background: var(--accent-tinted); border-color: var(--accent-soft); }

dialog.memory-detail { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--fg); padding: 1rem; max-width: 560px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
dialog.memory-detail::backdrop { background: rgba(0,0,0,0.3); }
dialog.memory-detail header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.memory-detail-close { background: transparent; border: none; font-size: 1.25rem; cursor: pointer; color: var(--fg-muted); }
.memory-detail-desc { font-size: 0.9rem; color: var(--fg-muted); margin-bottom: 0.5rem; }
.memory-detail-body { font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; max-height: 320px; overflow-y: auto; }

/* CLAUDE.md hover popover on graph nodes */
.node-popover { position: absolute; z-index: 50; max-width: 320px; padding: 0.75rem 0.9rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,0.12); font-size: 0.8rem; pointer-events: none; }
.node-popover-heading { font-weight: 600; margin-bottom: 0.25rem; color: var(--fg); }
.node-popover-body { color: var(--fg-muted); white-space: pre-wrap; max-height: 240px; overflow: hidden; }

/* Web-mode-only help banner */
.web-help { max-width: 720px; margin: 4rem auto; padding: 2rem; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.web-help h2 { margin-top: 0; }
.web-help h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--fg); }
.web-help code { background: var(--bg-subtle); padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.85rem; }
.web-help .examples { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.web-help .examples li { padding: 0.75rem 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); transition: background 0.12s, border-color 0.12s; }
.web-help .examples li:hover { background: var(--accent-tinted); border-color: var(--accent-soft); }
.web-help .examples a { color: var(--accent); font-weight: 600; text-decoration: none; }
.web-help .examples a:hover { text-decoration: underline; }
.web-help .examples .desc { color: var(--fg-muted); font-size: 0.85rem; margin-top: 0.2rem; }
.web-help .grammar { color: var(--fg-muted); font-size: 0.85rem; margin-top: 1.5rem; }

/* When help banner is shown, hide everything else regardless of explicit display rules */
[hidden] { display: none !important; }


/* Landing-page link sections (Install / Use it in / Project) */
.web-help { max-width: 1080px; padding: 2.5rem 3rem; }
.web-help h2 { margin-top: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.web-help h2 .version { font-size: 0.8rem; font-weight: 400; color: var(--fg-muted); padding: 0.1rem 0.4rem; border: 1px solid var(--border); border-radius: 999px; }
.web-help .tagline { color: var(--fg-muted); font-size: 0.95rem; }
.web-help .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 900px) { .web-help .cols { grid-template-columns: 1fr; } }
.web-help .col h3 { margin-top: 0; margin-bottom: 0.75rem; }
.web-help .link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.web-help .link-list li { padding: 0.55rem 0.7rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); }
.web-help .link-list strong { display: block; margin-bottom: 0.15rem; font-size: 0.9rem; }
.web-help .link-list a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.web-help .link-list a:hover { text-decoration: underline; }
.web-help .link-list .desc { color: var(--fg-muted); font-size: 0.8rem; margin-top: 0.2rem; }
.web-help .link-list pre { margin: 0.35rem 0 0; padding: 0.45rem 0.55rem; background: var(--bg-subtle); border-radius: var(--radius-sm); font-size: 0.75rem; overflow-x: auto; }
.web-help .link-list pre code { background: transparent; padding: 0; font-size: inherit; }
.web-help .badge { display: inline-block; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--accent); color: white; vertical-align: middle; margin-left: 0.25rem; }
.web-help .badge.muted { background: var(--bg-subtle); color: var(--fg-muted); border: 1px solid var(--border); }
.web-help .grammar { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); color: var(--fg-muted); font-size: 0.85rem; }

/* Tracker cards (Backlog + Kanban share these) */
.tracker-card { list-style: none; padding: 0.6rem 0.75rem; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-elevated); cursor: pointer; display: grid; gap: 0.35rem; transition: border-color 0.12s, transform 0.12s; }
.tracker-card:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.tracker-card .card-head { display: flex; align-items: center; gap: 0.4rem; min-height: 1.1rem; }
.tracker-card .card-label { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.tracker-card .card-foot { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--fg-muted); }
.tracker-card .card-flow { font-style: italic; }
.card-spend { display: inline-block; height: 6px; width: 32px; border-radius: 3px; }
.card-spend-heavy  { background: var(--bucket-heavy); }
.card-spend-medium { background: var(--bucket-medium); }
.card-spend-light  { background: var(--bucket-light); width: 14px; }
.card-milestone { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--accent-tinted); color: var(--accent); font-family: var(--font-mono); }
.tracker-empty { color: var(--fg-muted); padding: 2rem; text-align: center; }

/* Backlog view */
.view-backlog { padding: 1rem 1.5rem; overflow-y: auto; display: block; }
.backlog-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.backlog-summary { font-weight: 600; }
.backlog-search { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font-family: var(--font-sans); min-width: 220px; }
.backlog-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }

/* Kanban view */
.view-kanban { padding: 1rem 1.5rem; overflow-y: auto; display: block; }
.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kanban-col { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0.75rem; }
.kanban-col > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-soft); }
.kanban-col-label { font-weight: 600; }
.kanban-col-meta { font-size: 0.75rem; color: var(--fg-muted); }
.kanban-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 0.5rem 0 0.25rem; }
.kanban-list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.5rem; }
.kanban-divider { border: none; border-top: 1px solid var(--border-soft); margin: 0.75rem 0; }
.kanban-empty { padding: 1.5rem; text-align: center; color: var(--fg-faint); }

.backlog-list { align-items: start; }

/* Atlas toolbar (activity heat-map controls) */
.atlas-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border-soft); background: var(--bg-elevated); font-size: 0.85rem; }
.atlas-toggle, .atlas-since { display: flex; align-items: center; gap: 0.4rem; }
.atlas-toggle input { margin: 0; cursor: pointer; }
.since-select { padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 0.8rem; }
.activity-legend { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; color: var(--fg-muted); font-size: 0.75rem; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.15rem; }
.legend-hot  { background: #cc785c; }
.legend-warm { background: #d99477; }
.legend-cool { background: #c9bfac; }

/* Re-grid view-atlas to include the toolbar row */
.view-atlas { grid-template-rows: auto 1fr auto; }
.flow-rail { grid-row: 2 / 4; }
.atlas-toolbar { grid-row: 1; }
#cy { grid-row: 2; grid-column: 2; }
.flow-detail { grid-row: 3; grid-column: 2; }

/* Node popover commits section */
.node-popover-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 0.5rem 0 0.25rem; }
.commit-line { font-size: 0.75rem; color: var(--fg-muted); line-height: 1.4; }
.commit-line code { background: var(--bg-subtle); padding: 0 0.2rem; border-radius: 3px; font-family: var(--font-mono); font-size: 0.7rem; }

/* Sprint log session-commit blocks */
.sprint-commits { font-size: 0.75rem; margin-bottom: 0.5rem; padding: 0.5rem 0.6rem; background: var(--bg-subtle); border-radius: var(--radius-sm); }
.sprint-commits-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 0.25rem; }
.session-commit-group { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed var(--border-soft); }
.session-commit-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.session-commit-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-muted); margin-bottom: 0.15rem; }

/* Usage tab */
.view-usage { padding: 1.25rem 1.5rem; overflow-y: auto; display: block; }
.usage-empty { color: var(--fg-muted); padding: 2rem; text-align: center; }

.usage-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.usage-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.usage-card-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); font-weight: 600; }
.usage-tip { font-size: 0.75rem; color: var(--fg-faint); margin-top: 0.5rem; line-height: 1.4; }

/* Current window */
.usage-window-meta { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.4rem; }
.usage-bar { height: 14px; background: var(--bg-subtle); border-radius: 7px; overflow: hidden; margin-bottom: 0.4rem; border: 1px solid var(--border-soft); }
.usage-bar-fill { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.usage-status-high .usage-bar-fill, .usage-status-high .usage-status-badge { background: var(--bucket-medium); }
.usage-status-over .usage-bar-fill, .usage-status-over .usage-status-badge { background: var(--bucket-heavy); color: white; }
.usage-window-numbers { font-size: 0.95rem; }
.usage-window-numbers strong { font-size: 1.4rem; font-weight: 700; color: var(--fg); }
.usage-window-tip { font-size: 0.75rem; color: var(--fg-muted); margin-left: 0.5rem; }
.usage-status-badge { display: inline-block; padding: 0.15rem 0.55rem; font-size: 0.7rem; font-weight: 600; border-radius: 999px; background: var(--status-done); color: white; }

/* Two-column grid for efficiency cards */
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 800px) { .usage-grid { grid-template-columns: 1fr; } }
.usage-grid > .usage-card { margin-bottom: 0; }
.usage-big { font-size: 1.8rem; font-weight: 700; color: var(--fg); margin: 0.25rem 0 0.5rem; }
.usage-big-tip { font-size: 0.7rem; font-weight: 400; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.5rem; }
.usage-row { font-size: 0.875rem; color: var(--fg-muted); display: flex; align-items: center; gap: 0.5rem; }
.usage-row strong { color: var(--fg); }
.delta-good { color: var(--status-done); font-family: var(--font-mono); font-size: 0.75rem; }
.delta-bad  { color: var(--bucket-heavy); font-family: var(--font-mono); font-size: 0.75rem; }

/* Savings card */
.usage-savings-rows { display: grid; gap: 0.4rem; font-size: 0.875rem; font-family: var(--font-mono); }
.usage-savings-rows > div { display: flex; justify-content: space-between; align-items: baseline; }
.usage-savings-rows > div > span { color: var(--fg-muted); }
.usage-savings-rows > div > strong { color: var(--fg); }
.usage-savings-net { padding-top: 0.4rem; border-top: 1px dashed var(--border-soft); margin-top: 0.2rem; }
.usage-savings-net strong { color: var(--accent); font-size: 1rem; }

/* Trend chart */
.usage-trend canvas { max-height: 280px; }

/* ── v0.6.0 Hand-off ─────────────────────────────────────────────── */

/* Kanban drag-drop */
.tracker-card.dragging { opacity: 0.45; transform: scale(0.98); }
.kanban-col.drop-target { background: var(--accent-tinted); }

/* Assignee chip */
.card-assignee { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px; font-family: var(--font-sans); margin-left: 0.25rem; }
.card-assignee-claude { background: var(--accent); color: white; }
.card-assignee-human  { background: var(--bg-subtle); color: var(--fg); border: 1px solid var(--border); }

/* Assignment dialog */
dialog.assignment-dialog,
dialog.claude-handoff-dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--fg); padding: 1.25rem; max-width: 480px; min-width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-family: var(--font-sans); }
dialog.assignment-dialog::backdrop,
dialog.claude-handoff-dialog::backdrop { background: rgba(0,0,0,0.35); }
dialog.assignment-dialog header,
dialog.claude-handoff-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.assignment-close, .claude-handoff-close { background: transparent; border: none; font-size: 1.25rem; cursor: pointer; color: var(--fg-muted); }

.assignment-step { padding: 0.6rem 0.75rem; background: var(--bg-subtle); border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.assignment-step-label { font-weight: 600; }
.assignment-step-detail { font-size: 0.85rem; color: var(--fg-muted); margin-top: 0.2rem; }
.assignment-step-flow { font-size: 0.75rem; color: var(--accent); margin-top: 0.3rem; font-family: var(--font-mono); }

.assignment-options { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin: 0; display: grid; gap: 0.4rem; }
.assignment-options legend { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); padding: 0 0.4rem; }
.assignment-options label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.assignment-other-name { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font-family: var(--font-sans); margin-left: 1.5rem; }
dialog footer { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.assignment-cancel, .handoff-cancel { padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); cursor: pointer; }
.assignment-confirm, .handoff-mark-started { padding: 0.4rem 0.8rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: white; cursor: pointer; font-weight: 600; }

/* Claude handoff dialog */
.handoff-step-label { font-weight: 600; margin-bottom: 0.2rem; }
.handoff-step-flow { font-size: 0.85rem; color: var(--fg-muted); font-weight: 400; }
.handoff-step-detail { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.75rem; }
.handoff-section { margin-top: 0.75rem; }
.handoff-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 0.3rem; }
.handoff-command { background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; margin: 0; overflow-x: auto; }
.handoff-copy { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--fg); cursor: pointer; font-size: 0.8rem; margin-top: 0.4rem; }
.handoff-deeplink { display: inline-block; color: var(--accent); text-decoration: none; font-weight: 600; }
.handoff-deeplink:hover { text-decoration: underline; }
.handoff-tip { font-size: 0.75rem; color: var(--fg-faint); margin-top: 0.3rem; }

/* Pending-changes banner */
.pending-changes-banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 1rem; background: var(--accent); color: white; border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 200; font-size: 0.85rem; }
.pending-changes-banner button { padding: 0.3rem 0.7rem; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: white; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; }
.pending-changes-banner button:hover { background: rgba(255,255,255,0.15); }

/* What's-new mini changelog (landing page) */
.web-help .changelog-mini { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.web-help .changelog-mini li { padding: 0.55rem 0.75rem; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.85rem; line-height: 1.5; }
.web-help .changelog-mini strong { color: var(--accent); }

/* Per-flow token cost chip */
.flow-tokens-spent { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; background: var(--bg-subtle); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.flow-tokens-spent strong { color: var(--fg); font-weight: 600; }

/* Stale-node detector legend dot */
.legend-stale { background: transparent; border: 2px dashed #9b9484; }

/* PR diff overlay banner */
.diff-banner { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); padding: 0.6rem 1rem; background: var(--accent); color: white; border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 150; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; }
.diff-banner .diff-clear { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: white; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); cursor: pointer; }
.diff-banner .diff-clear:hover { background: rgba(255,255,255,0.15); }

/* Sprint commentary */
.sprint-commentary { margin-top: 0.6rem; padding: 0.5rem 0.6rem; background: var(--bg-subtle); border-radius: var(--radius-sm); border-left: 3px solid var(--bucket-light); }
.sprint-commentary-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 0.4rem; }
.sprint-commentary-entry { padding: 0.35rem 0; border-bottom: 1px dashed var(--border-soft); }
.sprint-commentary-entry:last-child { border-bottom: none; }
.sprint-commentary-entry header { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--fg-muted); margin-bottom: 0.15rem; }
.commentary-author { font-weight: 600; }
.commentary-claude .commentary-author { color: var(--accent); }
.commentary-human  .commentary-author { color: var(--status-done); }
.commentary-text { font-size: 0.85rem; line-height: 1.45; }
.commentary-time { font-family: var(--font-mono); font-size: 0.7rem; }

/* Pending sessions banner */
.pending-sessions-banner { position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 1rem; background: var(--status-done); color: white; border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 200; font-size: 0.85rem; }
.pending-sessions-banner button { padding: 0.3rem 0.7rem; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: white; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; }
.pending-sessions-banner button:hover { background: rgba(255,255,255,0.15); }
.pending-sessions-banner code { background: rgba(255,255,255,0.18); padding: 0.05rem 0.3rem; border-radius: 3px; font-family: var(--font-mono); font-size: 0.75rem; }

/* History scrubber */
.history-scrubber { display: flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; }
.scrubber-slider { width: 140px; cursor: pointer; accent-color: var(--accent); }
.scrubber-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); min-width: 70px; }
.scrubber-reset { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); cursor: pointer; padding: 0.1rem 0.4rem; font-size: 0.75rem; }
.scrubber-reset:hover { background: var(--accent-tinted); }