:root {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-elevated: #161923;
  --border: #262b38;
  --text: #e6e8ee;
  --text-muted: #8b90a0;
  --accent: #5b8cff;
  --ok: #3ecf8e;
  --warn: #e8b64c;
  --bad: #ef5b5b;
  /* Status-pill palette: info doubles as --accent (blue = actively
     running) and attention is the single "needs the operator" color,
     covering both an expired/missing login and a paused-for-approval
     session rather than inventing a seventh hue. */
  --info: var(--accent);
  --attention: #e08a3c;
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 200px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar .brand {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text);
}

.sidebar a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
}

.sidebar a:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: var(--text);
}

.sidebar a.active {
  background: rgba(91, 140, 255, 0.15);
  color: var(--accent);
}

.sidebar-more summary {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.sidebar-more summary::-webkit-details-marker {
  display: none;
}

.sidebar-more summary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.sidebar-more[open] summary {
  color: var(--text);
}

.sidebar-more a,
.sidebar-more .nav-disabled {
  margin-left: 10px;
  font-size: 14px;
}

.nav-disabled {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  opacity: 0.55;
  cursor: default;
}

.nav-soon {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sidebar-account {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-account-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account #sidebar-logout {
  font-size: 12px;
  padding: 4px 10px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.sidebar-footer-version {
  font-weight: 600;
}

.sidebar-footer-commit {
  font-size: 11px;
}

.about-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  max-width: 480px;
}

.about-info dt {
  color: var(--text-muted);
}

.about-info dd {
  margin: 0;
}

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 18px;
}

.nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* row-highlight briefly marks the table row a deep link (e.g. a
   recovery's own "View Recovery" action, see schedules.js
   highlightFromHash) landed on, so the operator can find the exact
   record among a longer list. */
.row-highlight {
  outline: 2px solid var(--warn);
  outline-offset: -2px;
  transition: outline-color 0.5s ease-out;
}

.interaction-card {
  background: var(--bg-elevated);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}

/* is-targeted marks the exact interaction a deep link (?interaction=<id>,
   see static/interactions.js) opened this page for. The border/shadow
   color shift is paired with a literal "Opened from Workflow" badge in
   the card itself, never a color-only cue. */
.interaction-card.is-targeted {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.interaction-card .interaction-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.interaction-card .interaction-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.interaction-card .interaction-message {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.interaction-card .choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.interaction-card .choices button {
  min-height: 40px;
  padding: 8px 16px;
}

.interaction-card .dangerous-notice {
  color: var(--bad);
  font-size: 13px;
  margin-bottom: 10px;
}

.interaction-card .interaction-details {
  margin-bottom: 10px;
}

.interaction-card .interaction-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
}

.interaction-card .interaction-raw-prompt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 8px;
}

.task-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.task-card .task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.task-card .task-card-title {
  font-weight: 600;
  font-size: 14px;
}

.task-card .task-card-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.task-card .task-card-instruction {
  font-size: 13px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 8px;
}

.task-card .task-card-output,
.task-card .task-card-result {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 8px 0;
  max-height: 320px;
  overflow-y: auto;
}

.task-card .task-card-error {
  color: var(--bad);
  font-size: 13px;
  margin-bottom: 8px;
}

.todo-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}

.workflow-current-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.workflow-current-milestone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin: 0 0 4px;
}

.workflow-current-more {
  margin-top: 10px;
}

.workflow-current-more summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.workflow-current-more[open] summary {
  color: var(--text);
  margin-bottom: 8px;
}

.workflow-stage-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.workflow-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

.workflow-stage-label {
  min-width: 160px;
  font-weight: 600;
}

.workflow-stage-reason {
  color: var(--text-muted);
  font-size: 12px;
}

/* workflow-timeline-* is the Overview tab's own stage timeline row
   (Part D of the Workflow UX redesign) — a distinct two-column
   glyph+body layout, kept separate from .workflow-stage-row/-label/
   -reason above (which workflow-panel.js's compact inline stage list,
   the Activity tab's event rows, and the fan-out graph nodes all still
   use for their own flat single-line rows) so restyling one never
   silently reshapes the other three. */
.workflow-timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

.workflow-timeline-glyph {
  flex: none;
  width: 1.4em;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.workflow-timeline-row-completed .workflow-timeline-glyph { color: var(--ok); }
.workflow-timeline-row-running .workflow-timeline-glyph,
.workflow-timeline-row-waitingForInput .workflow-timeline-glyph,
.workflow-timeline-row-retryScheduled .workflow-timeline-glyph { color: var(--accent); }
.workflow-timeline-row-failed .workflow-timeline-glyph,
.workflow-timeline-row-cancelled .workflow-timeline-glyph { color: var(--bad); }

.workflow-timeline-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workflow-timeline-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.workflow-timeline-body .workflow-stage-label {
  min-width: 0;
}

.workflow-timeline-body .workflow-stage-reason:empty {
  display: none;
}

.workflow-timeline-body .actions {
  margin-top: 4px;
}

.workflow-graph-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.workflow-graph-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

/* Shared list-page design system: summary counts bar, filter tabs, and
   a compact row-list layout — used by the Workflows and Tasks pages
   instead of the six-column Kanban / empty status columns they used to
   render. See PART A/I/J of the Workflow + Tasks UX redesign. */

.summary-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-stat-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.summary-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filter-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 14px;
  font-weight: 600;
  font-size: 13px;
}

.filter-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.filter-tab.active {
  background: rgba(91, 140, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.empty-state {
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}

.empty-state p {
  margin: 0 0 6px;
}

.empty-state p:last-child {
  margin-bottom: 0;
}

/* Compact row list (Workflows page). A "quiet" row (completed/cancelled)
   drops the border and reduces opacity, per PART A: "Completed Workflow
   cards should be visually quieter." */
.workflow-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.workflow-row-quiet {
  border-color: transparent;
  background: transparent;
  opacity: 0.72;
  padding: 8px 16px;
}

.workflow-row-quiet:hover {
  opacity: 1;
}

.workflow-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workflow-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: block;
  overflow-wrap: anywhere;
}

.workflow-row-scope {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.workflow-row-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.workflow-row-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.workflow-row-recovery {
  margin-top: 6px;
  font-size: 13px;
  color: var(--attention);
}

.workflow-row-command {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Compact row list (Tasks page). */
.task-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.task-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.task-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.task-row-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.task-row-source-link {
  font-size: 12px;
}

@media (max-width: 640px) {
  .workflow-row-header,
  .task-row-header {
    flex-direction: column;
  }

  .actions {
    flex-wrap: wrap;
  }

  .summary-bar {
    gap: 18px;
  }
}

/* Workflow detail: header row (title/scope + actions/More menu),
   tab strip, Logs toolbar, and Recovery panel — see PART A-N of the
   Workflow observability/UX redesign. */

.workflow-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.workflow-detail-header h1 {
  margin-bottom: 4px;
}

#workflow-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.workflow-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.more-menu {
  position: relative;
}

.more-menu summary {
  list-style: none;
  cursor: pointer;
}

.more-menu summary::-webkit-details-marker {
  display: none;
}

.more-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.more-menu-panel button,
.more-menu-panel .button-link {
  width: 100%;
  text-align: left;
}

.tab-strip {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tab-button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  padding: 8px 4px;
  margin-right: 18px;
  font-weight: 600;
}

.tab-button:hover {
  background: transparent;
  color: var(--text);
}

.tab-button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.log-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.log-toolbar-spacer {
  flex: 1;
}

.log-toolbar-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#workflow-logs-output {
  min-height: 260px;
  max-height: 60vh;
}

#workflow-logs-output:empty::before {
  content: "";
}

.recovery-headline {
  margin-bottom: 8px;
}

.recovery-chain {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.recovery-arrow {
  color: var(--text-muted);
}

.todo-column-header {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.todo-column-count {
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
}

.todo-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.todo-card .todo-card-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.todo-card .todo-card-title a {
  color: inherit;
}

.todo-card .todo-card-meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.todo-card .todo-card-description-details {
  margin-bottom: 8px;
}

.todo-card .todo-card-description-details summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.todo-card .todo-card-description {
  font-size: 12px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
  max-height: 80px;
  overflow-y: auto;
}

.todo-card .actions {
  gap: 6px;
}

.todo-card .actions button {
  padding: 6px 10px;
  min-height: 32px;
  font-size: 12px;
}

.approval-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.approval-card .approval-card-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.approval-card .approval-card-meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.approval-card .actions {
  gap: 6px;
}

.content {
  flex: 1;
  padding: 19px 22px 48px;
  max-width: 1100px;
}

h1 {
  font-size: 22px;
  margin: 0 0 16px;
}

h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.card .label {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.card .value {
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

.card .value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* diagnostics-advanced holds the Live Diagnostics panel's lower-level
   fields (retry count, raw process pid/liveness) behind a closed
   disclosure — see runtime-diagnostics.js's own doc on why these sit
   apart from the facts an operator actually scans for first. Spans
   every column of the parent .grid so its own nested .grid gets full
   width rather than being squeezed into one card-sized cell. */
.diagnostics-advanced {
  grid-column: 1 / -1;
}

.diagnostics-advanced summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.diagnostics-advanced[open] summary {
  color: var(--text);
  margin-bottom: 8px;
}

.diagnostics-advanced .grid {
  margin-bottom: 0;
}

/* Metric strip: the same .grid/.card the main dashboard already uses,
   with a larger numeric value befitting a KPI rather than a text fact —
   used for the Claude Accounts page's summary above its table. */
.metric-grid .card {
  padding: 12px 14px;
}

.metric-grid .value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.ok {
  background: rgba(62, 207, 142, 0.15);
  color: var(--ok);
}

.badge.warn {
  background: rgba(232, 182, 76, 0.15);
  color: var(--warn);
}

.badge.bad {
  background: rgba(239, 91, 91, 0.15);
  color: var(--bad);
}

.badge.info {
  background: rgba(91, 140, 255, 0.15);
  color: var(--info);
}

.badge.attention {
  background: rgba(224, 138, 60, 0.15);
  color: var(--attention);
}

.badge.neutral {
  background: rgba(139, 144, 160, 0.12);
  color: var(--text-muted);
}

/* Small colored dot used ahead of a status label wherever a full badge
   pill would be too heavy (picker trigger, dropdown rows). Reuses the
   same six-color vocabulary as .badge.*. */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}

.status-dot.ok { background: var(--ok); }
.status-dot.warn { background: var(--warn); }
.status-dot.bad { background: var(--bad); }
.status-dot.info { background: var(--info); }
.status-dot.attention { background: var(--attention); }
.status-dot.neutral { background: var(--text-muted); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tr:last-child td {
  border-bottom: none;
}

.empty {
  color: var(--text-muted);
  font-style: italic;
}

.section {
  margin-bottom: 20px;
}

/* Mission Detail (Phase 3 of the remaining autonomous mission roadmap)
   — a compact progress meter and plan checklist, reusing this
   stylesheet's existing badge palette (--ok/--warn/--bad/--text-muted)
   rather than introducing new colors. Widths are percentage-based and
   text wraps (overflow-wrap) so both remain usable at narrow viewports
   without their own media query. */
.mission-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}

.mission-progress-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.mission-progress-fill {
  height: 100%;
  background: var(--ok);
  border-radius: 999px;
}

.mission-progress-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.mission-plan-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mission-plan-checklist li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow-wrap: anywhere;
}

.mission-plan-checklist .mission-plan-marker {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.mission-plan-checklist .mission-plan-superseded {
  color: var(--text-muted);
  text-decoration: line-through;
}

#execution-log-list {
  overflow-x: auto;
}

.execution-log-command {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}

.execution-log-time {
  white-space: nowrap;
  color: var(--text-muted);
}

ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.plain li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

ul.plain li:last-child {
  border-bottom: none;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: rgba(91, 140, 255, 0.15);
  color: var(--accent);
  cursor: pointer;
}

button:hover {
  background: rgba(91, 140, 255, 0.25);
}

button.secondary {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

button.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

button.danger {
  border-color: var(--bad);
  background: rgba(239, 91, 91, 0.12);
  color: var(--bad);
}

button.danger:hover {
  background: rgba(239, 91, 91, 0.22);
}

.button-link {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}

.button-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* A .button-link that is a row's secondary action (e.g. the Mission row's
   "Open Workflow" link beside its primary "Open Supervisor Run" — see
   current-activity.js) reads as visually lower-priority than the primary
   link, never as an equally-weighted second choice. */
.button-link.secondary {
  opacity: 0.75;
  font-weight: 500;
}

.button-link.secondary:hover {
  opacity: 1;
}

textarea {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  resize: vertical;
}

#opencode-link {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

/* --- Project workspace (project detail page) --- */

.workspace {
  max-width: none;
}

.project-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.project-header h1 {
  margin: 0 0 8px;
}

.project-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.project-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Compact toolbar (project detail page): a single dense row instead of
   the old full-height header, so project identity, live agent status
   and the primary actions are all visible without scrolling. */
.project-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.project-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.project-toolbar h1 {
  font-size: 18px;
  margin: 0;
}

.project-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.project-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The needs-attention region below the hero is populated client-side
   (project-interactions.js); collapse it entirely when it has no
   content instead of leaving an empty gap. */
#project-interactions:empty {
  display: none;
}

/* Current Activity: compact link rows summarizing the live Mission,
   Workflow, agent and interaction state — see current-activity.js. Each
   row is a single flex line (label(s) + status badges) plus its own
   .actions primary link, never a duplicate of the full detail page. */
.current-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.current-activity-row .actions {
  margin-top: 0;
}

.current-activity-row-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.current-activity-label {
  font-weight: 600;
  font-size: 13px;
}

.project-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.project-details[open] summary {
  color: var(--text);
}

/* --- Project Detail page: hero status + activity-section polish ---
   Small page-scoped additions only. Reuse the existing spacing, radius,
   badge palette and typography tokens — no new breakpoints, no second
   design system. */

/* Hero: render the live Claude/OpenCode status indicators as filled pills
   using the same palette values as .badge.* (mirrored here the way
   .workspace-chip.* already mirrors them in this file), so project health
   reads at a glance instead of as low-contrast tinted text. Scoped to the
   hero row: the bare .status-pill elsewhere (account picker, Claude
   Developer card) is deliberately left flat. */
.project-toolbar-meta .status-pill {
  padding: 2px 9px;
  border-radius: 999px;
}

.project-toolbar-meta .status-pill.ok { background: rgba(62, 207, 142, 0.15); }
.project-toolbar-meta .status-pill.warn { background: rgba(232, 182, 76, 0.15); }
.project-toolbar-meta .status-pill.bad { background: rgba(239, 91, 91, 0.15); }
.project-toolbar-meta .status-pill.info { background: rgba(91, 140, 255, 0.15); }
.project-toolbar-meta .status-pill.attention { background: rgba(224, 138, 60, 0.15); }
.project-toolbar-meta .status-pill.neutral { background: rgba(139, 144, 160, 0.12); }

/* Current / Recent Activity: a consistent vertical rhythm between the
   heading, the one-line description and the rows, plus an overflow guard
   so a long unbroken mono string (commit hash, branch, path) wraps inside
   its row instead of forcing the section to scroll sideways. */
.current-activity > h2,
.recent-activity > h2 {
  margin-bottom: 6px;
}

.current-activity > p.empty,
.recent-activity > p.empty {
  margin: 0 0 8px;
}

.current-activity .mono,
.recent-activity .mono,
.recent-activity .commit-hash,
.recent-activity #recent-activity-commits ul.plain li {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Agent tabs: Claude and OpenCode are never shown as equal-sized blocks
   side by side — only one panel is expanded at a time, since Claude is
   the primary agent the user watches and OpenCode is secondary. */
.agent-tabs {
  margin-bottom: 16px;
}

.agent-tabs-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.agent-tab-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.agent-tab-btn:hover {
  color: var(--text);
  background: transparent;
}

.agent-tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.agent-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* An explicit [hidden] display:none is required here: the class rules
   above set their own `display`, which (being author-origin, same as
   the browser's [hidden] default) would otherwise win by source order
   and leave the "inactive" tab panel visible despite the hidden
   attribute agent-tabs.js/bottom-drawer.js toggle. */
.agent-panel[hidden],
.output-composer-grid[hidden],
.drawer-tab-panel[hidden] {
  display: none;
}

/* Same [hidden] vs. author-origin-class tie as above, for the Claude
   Developer action row's own state-aware Start/Terminal/Stop toggling
   (see agents.js/workspace-agents.js updateClaudeActionRow): button.danger
   and .button-link each set their own `display`, which would otherwise
   win over the bare [hidden] default at equal specificity. */
#claude-start[hidden],
#claude-terminal-link[hidden],
#claude-stop[hidden] {
  display: none;
}

.agent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-panel-title {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
}

.agent-panel-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 20px;
}

.agent-session {
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Claude Account card + popup-button picker ------------------------ */

.claude-account-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claude-account-card-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.account-picker {
  position: relative;
}

.account-picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.account-picker-trigger:hover {
  background: rgba(255, 255, 255, 0.04);
}

.account-picker-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.account-picker-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.account-picker-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-picker-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.account-picker-chevron {
  color: var(--text-muted);
  font-size: 12px;
  flex: none;
}

.account-picker-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: 320px;
  overflow-y: auto;
}

.account-picker-menu[hidden] {
  display: none;
}

.account-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: calc(var(--radius) - 3px);
  cursor: pointer;
}

.account-picker-option:hover,
.account-picker-option.active {
  background: rgba(91, 140, 255, 0.12);
}

.account-picker-option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.account-picker-check {
  width: 16px;
  flex: none;
  color: var(--accent);
  font-weight: 700;
}

.account-picker-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.account-picker-option-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-picker-option-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-picker-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 2px;
}

.claude-account-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}

.claude-account-using {
  color: var(--text-muted);
}

.claude-account-using strong {
  color: var(--text);
  font-weight: 600;
}

.claude-account-meta summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  list-style: none;
}

.claude-account-meta summary::-webkit-details-marker {
  display: none;
}

.claude-account-meta summary:hover {
  color: var(--text);
}

.claude-account-meta[open] summary {
  margin-bottom: 8px;
}

/* Account metrics: compact stat tiles (Projects/Sessions/Verified/Rate
   limit) instead of a two-column label:value table — a stronger value,
   a quieter label, tight spacing, so the card reads as a dashboard
   summary rather than a settings list. */
.claude-account-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.claude-account-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.claude-account-metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.claude-account-metric-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .claude-account-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

.status-pill.ok { color: var(--ok); }
.status-pill.warn { color: var(--warn); }
.status-pill.bad { color: var(--bad); }
.status-pill.info { color: var(--info); }
.status-pill.attention { color: var(--attention); }
.status-pill.neutral { color: var(--text-muted); }

/* Claude Developer card: a labeled field list (status/workspace/session/
   current task) instead of one raw mono blob, so the four concepts read
   as distinct facts rather than badge soup. Values outweigh labels — an
   inspector panel, not a form. */
.claude-developer-fields {
  margin: 0;
  gap: 7px 16px;
}

.claude-developer-fields dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.claude-developer-fields dd {
  font-weight: 600;
}

.claude-developer-fields dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}

/* Last Work: deliberately quieter than the field list above it — secondary
   information about the most recent managed work when nothing is
   currently active, never styled to look like a live status (see
   internal/managedactivity.LastWorkView's own doc: "never implying work
   is still running"). */
.claude-last-work {
  margin: 4px 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.claude-last-work-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.claude-last-work-title {
  font-weight: 600;
}

.claude-last-work-meta {
  color: var(--text-muted);
}

/* Terminal button: always names the account it opens a shell for, per
   the "operator should always know which account" requirement — never a
   bare "Open Terminal". */
.terminal-button {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  padding: 6px 14px;
}

.terminal-button-title {
  font-weight: 600;
}

.terminal-button-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Friendly empty state for the live-output pane: shown only while the
   element genuinely has no content (fresh page, or after Clear), and
   automatically replaced the instant real output text arrives — no JS
   needed to toggle it. */
.log-output:empty::before {
  content: "Claude is not currently running. Start a session to send instructions.";
  color: var(--text-muted);
  font-style: italic;
}

.output-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.live-output {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}

/* The primary output panel (Claude's live session output) is the thing
   the user watches most, so it claims most of the vertical space instead
   of matching the composer's height 1:1. */
.output-composer-grid.primary-output .live-output {
  min-height: 70vh;
}

.output-composer-grid.primary-output .composer {
  min-height: 70vh;
}

.output-composer-grid.primary-output .log-output {
  min-height: 60vh;
  max-height: 72vh;
}

.live-output-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.live-output-title {
  font-weight: 600;
  font-size: 13px;
}

.live-output-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.live-output-controls button {
  padding: 6px 10px;
  font-size: 12px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.log-output {
  flex: 1;
  margin: 0;
  min-height: 360px;
  max-height: 620px;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.composer {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
}

.composer-header {
  font-weight: 600;
  font-size: 13px;
}

.composer textarea {
  flex: 1;
  min-height: 220px;
  margin-top: 0;
  font-size: 14px;
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.commit-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-muted);
  margin-right: 8px;
}

.workspace-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.workspace-chip {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

a.workspace-chip:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.workspace-chip.ok {
  border-color: rgba(62, 207, 142, 0.4);
}

.workspace-chip.warn {
  border-color: rgba(232, 182, 76, 0.4);
}

.workspace-chip.bad {
  border-color: rgba(239, 91, 91, 0.4);
}

.workspace-chip-foreign {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
}

.workspace-chip-plus {
  font-family: inherit;
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.1);
  padding: 5px 11px;
}

.workspace-chip-plus:hover {
  background: rgba(91, 140, 255, 0.2);
}

.workspace-create-form-wrap {
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Project Operations: workspaces, Git branch/status, and live sessions
   grouped as one visually-secondary zone below the composer sections
   (see project_detail.html) — a divider and a demoted heading size read
   as lower-priority than the primary sections above without hiding any
   of their content. */
.project-operations {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.project-operations > h2 {
  font-size: 13px;
  opacity: 0.85;
}

.project-operations-group {
  margin-top: 16px;
}

.project-operations-group h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.workspace-details {
  margin-top: 10px;
}

/* The workspace-details table's mono Branch/Path cells hold unbroken
   strings that must wrap rather than push the table wide — matters most
   once the table reflows into stacked data-label rows at 640px, where the
   cell is a flex item that would otherwise refuse to shrink. */
.workspace-details td.mono {
  overflow-wrap: anywhere;
}

.workspace-details summary,
.recent-activity-more summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
}

.recent-activity-more {
  margin-top: 6px;
}

.branch-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.branch-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.policy-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.policy-summary::-webkit-details-marker {
  display: none;
}

.policy-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.policy-panel[open] .policy-summary-label {
  color: var(--text);
}

.policy-summary-mode {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

.policy-summary-edit {
  font-size: 12px;
  color: var(--accent);
  margin-left: auto;
}

.policy-panel > p,
.policy-panel > .policy-modes,
.policy-panel > .policy-status,
.policy-panel > .policy-sections,
.policy-panel > #execution-policy-message {
  margin-top: 14px;
}

.policy-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.policy-mode-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
}

.policy-mode-option:has(input:checked) {
  border-color: var(--accent);
}

.policy-mode-recommended {
  border-color: rgba(62, 207, 142, 0.35);
}

.policy-mode-option input {
  grid-row: 1 / span 2;
  margin-top: 3px;
}

.policy-mode-title {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.policy-mode-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.policy-status {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12px;
}

.policy-status-label {
  color: var(--text-muted);
}

.policy-status-value {
  font-weight: 600;
  color: var(--text);
}

.policy-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.policy-options {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.policy-options summary {
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 4px;
}

.policy-section-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.policy-options .checkbox-label {
  display: flex;
  padding: 4px 0;
  font-size: 13px;
}

@media (max-width: 900px) {
  .policy-modes {
    grid-template-columns: 1fr;
  }
}

.branch-form-field label {
  font-size: 12px;
  color: var(--text-muted);
}

.branch-form input[type="text"] {
  padding: 7px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  min-width: 220px;
}

/* --- Bottom drawer (project detail page) ---
   VSCode/Cursor-style docked panel: collapsed to a tab bar by default,
   expands upward without navigating away, and remembers its open state,
   active tab and height (via localStorage, see bottom-drawer.js). */

.bottom-drawer {
  position: fixed;
  left: 200px;
  right: 0;
  bottom: 0;
  z-index: 12;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.bottom-drawer-resize-handle {
  height: 6px;
  margin-top: -3px;
  cursor: ns-resize;
  touch-action: none;
}

.bottom-drawer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid transparent;
}

.bottom-drawer-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.drawer-tab-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.drawer-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.drawer-tab-btn.active {
  color: var(--text);
  background: rgba(91, 140, 255, 0.15);
}

.bottom-drawer-body {
  height: 280px;
  overflow-y: auto;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border);
}

.drawer-tab-panel h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

.drawer-tab-panel h3:first-child {
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .bottom-drawer {
    left: 0;
  }
}

/* Tablet: sidebar becomes an off-canvas drawer toggled by the hamburger
   button; the output/composer pair stacks instead of sitting side by
   side, since 1024px isn't wide enough to keep both comfortably
   readable. */
@media (max-width: 1024px) {
  .sidebar-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 15;
    width: 240px;
    flex: none;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4);
  }

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

  .content {
    padding-top: 68px;
  }

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

  .composer {
    min-height: 320px;
  }

  .output-composer-grid.primary-output .live-output,
  .output-composer-grid.primary-output .composer {
    min-height: 320px;
  }

  .output-composer-grid.primary-output .log-output {
    min-height: 280px;
    max-height: 420px;
  }

  .bottom-drawer {
    left: 0;
  }

  .bottom-drawer-body {
    max-height: 60vh;
  }
}

/* Mobile: single column throughout, larger touch targets, no horizontal
   scrolling anywhere (tables reflow into stacked label/value rows). */
@media (max-width: 640px) {
  .content {
    padding: 68px 14px 40px;
  }

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

  .project-header,
  .project-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  button {
    min-height: 40px;
  }

  /* The trigger's dot/name/status-pill/chevron row is too tight at phone
     widths for the status pill to sit inline; wrap it onto its own line
     under the name instead of truncating or overlapping. */
  .account-picker-trigger {
    flex-wrap: wrap;
  }

  .status-pill#claude-account-status-pill {
    order: 3;
    margin-left: 26px;
  }

  .claude-account-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  #agent-claude .actions {
    flex-wrap: wrap;
  }

  .interaction-card .choices {
    flex-direction: column;
  }

  .interaction-card .choices button {
    width: 100%;
    min-height: 46px;
  }

  .live-output-controls {
    width: 100%;
    justify-content: flex-start;
  }

  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  table {
    border: none;
    background: none;
  }

  tr {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 6px 0;
  }

  td {
    border-bottom: none;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}

/* --- Terminal page --- */

.terminal-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.terminal-container {
  flex: 1;
  min-height: 0;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  overflow: hidden;
}

.terminal-container .xterm {
  height: 100%;
}

.terminal-accessory-row {
  display: none;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 0;
}

.terminal-accessory-row button {
  min-width: 56px;
  min-height: 44px;
  flex: 0 0 auto;
  font-size: 14px;
}

@media (max-width: 900px) {
  .terminal-page {
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
  }

  .terminal-accessory-row {
    display: flex;
  }
}

/* The terminal page's own scroll area (the xterm viewport) must never
   let the outer page scroll horizontally on a narrow/mobile viewport. */
body:has(#terminal-page) {
  overflow-x: hidden;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
}

.login-form label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

.login-form input {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

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

.login-error {
  color: var(--bad);
  font-size: 13px;
  margin-top: 4px;
}

/* --- Administration (Users/Roles) --- */

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.admin-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 160px;
}

.admin-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.admin-table th[data-sort]:hover {
  color: var(--text);
}

.admin-table th[aria-sort="ascending"]::after {
  content: " \25B2";
}

.admin-table th[aria-sort="descending"]::after {
  content: " \25BC";
}

.admin-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Claude Accounts table: the profile name is the thing an operator scans
   for, the id/enabled flag are confirming detail — same "stronger value,
   quieter metadata" hierarchy as the account card and developer panel.
   overflow-wrap/min-width guard against a long, unbroken display name or
   profile id (no spaces to wrap on) overflowing its cell — same problem
   .log-output and .claude-developer-fields dd.mono already guard
   against, and min-width:0 is required for it to take effect at all on
   the mobile stacked-row layout, where each td becomes a flex container
   and a flex item's default min-width:auto would otherwise refuse to
   shrink below the unbroken string's own intrinsic width. */
.claude-profile-name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
  min-width: 0;
}

.text-quiet {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  min-width: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.field label {
  font-size: 13px;
  color: var(--text-muted);
}

.field .hint {
  font-size: 12px;
  color: var(--text-muted);
}

.field .field-error {
  font-size: 12px;
  color: var(--bad);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
select {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

select[multiple] {
  min-height: 110px;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 40;
  overflow-y: auto;
}

.dialog {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 440px;
}

.dialog h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.dialog-error {
  color: var(--bad);
  font-size: 13px;
  margin-bottom: 10px;
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 16px;
}

.detail-list dt {
  color: var(--text-muted);
  font-size: 13px;
}

.detail-list dd {
  margin: 0;
}

.detail-list .badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}

.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.toast.ok {
  border-color: var(--ok);
  color: var(--ok);
}

.toast.error {
  border-color: var(--bad);
  color: var(--bad);
}

.onboarding {
  max-width: 420px;
}

/* --- OpenCode model picker (opencode-models.js) --- */

#opencode-model-picker {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.opencode-model-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
}

.opencode-model-current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
}

.opencode-model-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.opencode-model-search {
  flex: 1;
  min-width: 160px;
}

.opencode-model-list {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 6px;
}

.opencode-model-group {
  margin-bottom: 6px;
}

.opencode-model-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}

.opencode-model-group-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.opencode-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 6px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.opencode-model-row:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
}

.opencode-model-row.selected {
  border-color: var(--ok);
  background: var(--bg-elevated);
}

.opencode-model-row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.opencode-model-name {
  font-size: 13px;
  font-weight: 500;
}

.opencode-model-id {
  font-size: 11px;
  color: var(--text-muted);
}

.opencode-model-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}