/* /static/css/core/fonts.css */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/build/font-jetbrainsmono-300.62bbab00e0b0.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/build/font-jetbrainsmono-400.44ce4a84f20d.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/build/font-jetbrainsmono-700.a1d92abc6b02.ttf') format('truetype');
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/build/font-syne-700.668763da807c.ttf') format('truetype');
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/build/font-syne-800.f37df4c4dbb0.ttf') format('truetype');
}


/* /static/css/core/base.css */
/* darklab_shell CSS module: base
   Theme tokens, reset, base layout, header, input, and dropdown foundations. */

/* ── CSS variables & theme tokens ── */
:root {
  --bg: #0d0d0d;
  --surface: #141414;
  --border: #1f1f1f;
  --border-bright: #2e2e2e;
  --green: #39ff14;
  --green-dim: #1a7a08;
  --green-glow: var(--green-glow);
  --amber: #ffb800;
  --red: #ff3c3c;
  --muted: #7a7a7a;
  --blue: #6ab0f5;
  --text: #e0e0e0;
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Syne', sans-serif;
  --terminal-font-size: 14px;
  --terminal-line-height: 1.65;
  --mobile-keyboard-offset: 0px;
  --theme-prompt-line-text: #e8e8e8;
  --theme-panel-bg: #141414;
  --theme-panel-border: #2e2e2e;
  --theme-panel-shadow: rgba(0,0,0,0.7);
  --theme-border-soft: rgba(255,255,255,0.08);
  --theme-terminal-bar-bg: #0d0d0d;
  --theme-chrome-bg: #0c0c0c;
  --theme-chrome-header-bg: #0c0c0c;
  --theme-chrome-row-bg: #0c0c0c;
  --theme-chrome-row-hover-bg: rgba(57,255,20,0.12);
  --theme-chrome-control-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --theme-chrome-control-border: var(--border-bright);
  --theme-chrome-divider-color: #2a2a2a;
  --theme-chrome-shadow: rgba(0,0,0,0.6);
  --theme-scrollbar-track: color-mix(in srgb, var(--surface) 72%, transparent);
  --theme-scrollbar-thumb: color-mix(in srgb, var(--muted) 44%, var(--border-bright));
  --theme-scrollbar-thumb-hover: color-mix(in srgb, var(--text) 38%, var(--border-bright));
  --theme-toolbar-button-bg: transparent;
  --theme-toolbar-button-border: #2e2e2e;
  --theme-toolbar-button-text: #7a7a7a;
  --theme-toolbar-button-hover-bg: transparent;
  --theme-toolbar-button-hover-border: #1a7a08;
  --theme-toolbar-button-hover-text: #39ff14;
  --theme-toolbar-button-active-bg: rgba(57,255,20,0.06);
  --theme-toolbar-button-active-border: #1a7a08;
  --theme-toolbar-button-active-text: #39ff14;
  --theme-button-secondary-bg: color-mix(in srgb, var(--surface) 66%, transparent);
  --theme-button-secondary-border: color-mix(in srgb, var(--border-bright) 88%, transparent);
  --theme-button-secondary-text: color-mix(in srgb, var(--muted) 86%, var(--text));
  --theme-button-secondary-hover-bg: color-mix(in srgb, var(--_tone) 7%, transparent);
  --theme-button-secondary-hover-border: color-mix(in srgb, var(--_tone-dim) 72%, var(--border-bright));
  --theme-button-ghost-border: color-mix(in srgb, var(--border-bright) 58%, transparent);
  --theme-button-ghost-text: color-mix(in srgb, var(--muted) 86%, var(--text));
  --theme-button-ghost-hover-bg: color-mix(in srgb, var(--_tone) 10%, transparent);
  --theme-button-ghost-hover-border: color-mix(in srgb, var(--_tone-dim) 62%, var(--border-bright));
  --theme-button-destructive-bg: color-mix(in srgb, var(--_tone) 8%, transparent);
  --theme-button-destructive-text: color-mix(in srgb, var(--muted) 86%, var(--text));
  --theme-button-destructive-hover-bg: color-mix(in srgb, var(--_tone) 16%, transparent);
  --theme-tab-text: #7a7a7a;
  --theme-tab-hover-text: #e0e0e0;
  --theme-tab-active-bg: rgba(57,255,20,0.04);
  --theme-tab-close-bg: rgba(255,255,255,0.02);
  --theme-tab-close-border: rgba(255,255,255,0.06);
  --theme-tab-close-hover-bg: color-mix(in srgb, var(--red) 18%, transparent);
  --theme-tab-close-hover-border: color-mix(in srgb, var(--red) 30%, transparent);
  --theme-tab-close-hover-text: inherit;
  --theme-tab-touch-drag-text-shadow: 0 0 10px color-mix(in srgb, var(--green) 14%, transparent);
  --theme-tab-drop-shadow: 0 0 10px color-mix(in srgb, var(--green) 45%, transparent);
  --theme-history-load-overlay-bg: rgba(0,0,0,0.76);
  --theme-modal-bg: #141414;
  --theme-dropdown-bg: color-mix(in srgb, var(--surface) 96%, transparent);
  --theme-dropdown-border: color-mix(in srgb, var(--green) 18%, transparent);
  --theme-dropdown-border-soft: color-mix(in srgb, var(--green) 14%, transparent);
  --theme-dropdown-shadow: rgba(0,0,0,0.35);
  --theme-dropdown-shadow-ring: color-mix(in srgb, var(--theme-dropdown-shadow) 24%, transparent);
  --theme-dropdown-shadow-ring-strong: color-mix(in srgb, var(--theme-dropdown-shadow) 36%, transparent);
  --theme-dropdown-item-text: #7a7a7a;
  --theme-overlay-backdrop-bg: rgba(0,0,0,0.75);
  --theme-search-highlight-bg: color-mix(in srgb, var(--amber) 35%, transparent);
  --theme-search-highlight-current-bg: color-mix(in srgb, var(--amber) 70%, transparent);
  --theme-search-signal-bg: color-mix(in srgb, var(--amber) 8%, transparent);
  --theme-search-signal-accent: color-mix(in srgb, var(--amber) 55%, transparent);
  --theme-search-signal-current-bg: color-mix(in srgb, var(--amber) 16%, transparent);
  --theme-search-signal-current-accent: color-mix(in srgb, var(--amber) 88%, transparent);
  --theme-inline-surface-bg: #141414;
  --theme-toast-bg: #141414;
  --theme-toast-text: #39ff14;
  --theme-toast-border: #1a7a08;
  --theme-toast-error-bg: color-mix(in srgb, var(--red) 8%, var(--bg));
  --theme-toast-error-text: #ff3c3c;
  --theme-toast-error-border: color-mix(in srgb, var(--red) 45%, transparent);
  --theme-toast-shadow: 0 12px 28px color-mix(in srgb, var(--theme-panel-shadow) 74%, transparent);
  --theme-welcome-ascii-color: var(--green);
  --theme-welcome-command-hover-bg: color-mix(in srgb, var(--green) 6%, transparent);
  --theme-welcome-command-hover-shadow: 0 0 0 1px var(--green-glow);
  --theme-welcome-ascii-text-shadow: 0 0 10px color-mix(in srgb, var(--green) 14%, transparent), 0 0 4px color-mix(in srgb, var(--green) 18%, transparent), 0 1px 0 rgba(8,16,12,0.4);
  --theme-welcome-ascii-filter: saturate(1.12) contrast(1.08) brightness(1.08);
  --theme-on-accent-text: #000;
  --theme-selection-text: #f7fff2;
  --theme-selection-line-text: #eef7ee;
  --theme-modal-danger-btn-text: #fff;
  --theme-modal-warning-btn-text: #000;
}

/* ── Base reset & page layout ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 24px;
  gap: 20px;
  overscroll-behavior: none;
}


/* ── Header ── */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

header h1 {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  font-size: 22px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 1.5px;
  text-shadow: 0 0 20px var(--green-glow);
}

header .version {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  opacity: 0.62;
}

.shell-input-row {
  position: fixed;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.prompt-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 0 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.prompt-wrap:focus-within {
  border-color: var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}
.u-hidden {
  display: none;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.shell-prompt-wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 46px;
  cursor: text;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 0;
}

.shell-prompt-wrap.u-hidden {
  display: none;
}

.shell-prompt-line {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: var(--terminal-font-size);
  line-height: var(--terminal-line-height);
  color: color-mix(in srgb, var(--theme-prompt-line-text) 88%, var(--text));
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  padding: 0;
}

.shell-prompt-text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.shell-prompt-caret {
  display: inline-block;
  width: 8px;
  height: 1.15em;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  opacity: 1;
  flex-shrink: 0;
  align-self: flex-start;
  transform: translateY(2px);
  font-size: inherit;
  line-height: inherit;
  animation: caret-blink 1s steps(1, end) infinite;
}

.shell-prompt-focused .shell-prompt-caret {
  opacity: 1;
}

.shell-prompt-has-value .shell-prompt-caret {
  display: none;
}

body.modal-overlay-active .shell-prompt-caret,
body.modal-overlay-active .wlc-cursor {
  animation: none;
  opacity: 1;
}

.shell-prompt-wrap:focus-within {
  border-color: transparent;
  box-shadow: none;
  background: color-mix(in srgb, var(--green) 3%, transparent);
}

.shell-inline-caret {
  display: inline-block;
  width: 8px;
  height: 1.15em;
  margin-left: 0;
  margin-right: 0;
  border-radius: 1px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  vertical-align: baseline;
  transform: translateY(2px);
  font-size: inherit;
  line-height: inherit;
}

@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.shell-caret-char {
  display: inline-block;
  border-radius: 1px;
  background: var(--green);
  color: var(--theme-on-accent-text);
  box-shadow: 0 0 8px var(--green-glow);
}

.shell-prompt-selection {
  position: relative;
  background: color-mix(in srgb, var(--green) 34%, transparent);
  color: var(--theme-selection-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 42%, transparent), 0 0 10px color-mix(in srgb, var(--green) 14%, transparent);
  border-radius: 2px;
  text-shadow: none;
}

.shell-prompt-selection::before,
.shell-prompt-selection::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: color-mix(in srgb, var(--green) 78%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 30%, transparent);
}

.shell-prompt-selection::before { left: -1px; }
.shell-prompt-selection::after { right: -1px; }

.shell-prompt-has-selection .shell-prompt-line {
  color: var(--theme-selection-line-text);
  overflow: visible;
  text-overflow: clip;
}

.shell-prompt-has-selection .shell-prompt-text {
  overflow: visible;
  text-overflow: clip;
}

/* ── Dropdown/menu primitives ── */
.dropdown-surface {
  background: var(--theme-dropdown-bg);
  border: 1px solid var(--theme-dropdown-border);
  box-shadow:
    0 0 0 1px var(--theme-dropdown-shadow-ring),
    0 10px 24px var(--theme-dropdown-shadow);
  color: var(--theme-dropdown-item-text);
  font-family: var(--font-mono);
  overflow: hidden;
}

.dropdown-surface.dropdown-up {
  box-shadow:
    0 0 0 1px var(--theme-dropdown-shadow-ring),
    0 -10px 24px var(--theme-dropdown-shadow);
}

.dropdown-item {
  background: transparent;
  border: none;
  color: var(--theme-dropdown-item-text);
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
  text-align: left;
}

.dropdown-item:hover,
.dropdown-item:focus-visible,
.dropdown-item.dropdown-item-active,
.dropdown-item[aria-selected="true"] {
  background: var(--theme-dropdown-hover-bg, var(--bg3));
  color: var(--green);
  outline: none;
}

.dropdown-item-compact {
  font-size: 10px;
  padding: 6px 12px;
}

.dropdown-item-dense {
  font-size: 12px;
  padding: 2px 0;
}

.dropdown-item-touch {
  font-size: 11px;
  padding: 9px 14px;
}

/* ── Autocomplete dropdown ── */
.ac-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  border-radius: 0;
  z-index: 150;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0;
}

.ac-dropdown.ac-mobile {
  position: absolute;
  z-index: 65;
  max-width: none;
  border-radius: 6px 6px 0 0;
  padding: 3px 0;
}

.ac-dropdown.ac-mobile .ac-item {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2;
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ac-dropdown.ac-mobile .ac-item-main {
  line-height: 1.2;
}

.ac-dropdown.ac-mobile .ac-item::before {
  display: none;
}

.ac-dropdown.ac-mobile .ac-item-desc {
  margin-left: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-dropdown.ac-up {
  border-color: var(--theme-dropdown-border);
}

body.mobile-terminal-mode.mobile-keyboard-open .ac-dropdown {
  border-color: var(--theme-dropdown-border-soft);
  box-shadow:
    0 0 0 1px var(--theme-dropdown-shadow-ring-strong),
    0 -12px 26px var(--theme-dropdown-shadow);
}

.ac-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.1s;
}

.ac-item-main,
.ac-item-desc {
  display: inline-block;
  vertical-align: top;
}

.ac-item-main {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-item-desc {
  margin-left: 10px;
  color: var(--muted);
  opacity: 0.9;
}

.ac-item::before {
  content: '  ';
  white-space: pre;
}

.ac-item:hover,
.ac-item.ac-active {
  color: var(--green);
}

.ac-item.ac-active {
  background: var(--theme-dropdown-hover-bg, var(--bg3));
}

.ac-item.ac-active::before {
  content: '> ';
  color: var(--green);
}

.ac-item .ac-match {
  color: var(--green);
  font-weight: 700;
}

.ac-item:hover .ac-item-desc,
.ac-item.ac-active .ac-item-desc {
  color: var(--text);
}

.ac-item.ac-example .ac-item-desc::before {
  content: '# ';
}

.ac-item.ac-hint-only {
  color: var(--muted);
  cursor: default;
  font-style: italic;
  opacity: 0.82;
}

.ac-item.ac-hint-only:hover,
.ac-item.ac-hint-only.ac-active {
  background: transparent;
  color: var(--muted);
}

.ac-item.ac-hint-only .ac-item-desc,
.ac-item.ac-hint-only:hover .ac-item-desc,
.ac-item.ac-hint-only.ac-active .ac-item-desc {
  color: var(--muted);
}

.ac-item.ac-hint-only::before,
.ac-item.ac-hint-only.ac-active::before {
  content: '  ';
  color: var(--muted);
}

.ac-item.ac-hint-separated {
  border-top: 1px solid var(--theme-dropdown-border-soft);
  margin-top: 2px;
  padding-top: 4px;
}

/* ── Ctrl+R history search dropdown ── */
.hist-search-dropdown {
  position: fixed;
  z-index: 60;
  min-width: 200px;
  max-width: 640px;
  border-radius: 3px;
  font-size: 13px;
  overflow: hidden;
}

.hist-search-header {
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.hist-search-label { color: var(--muted); }
.hist-search-query { color: var(--fg); }

.hist-search-item {
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 10px;
}

.hist-search-item:hover,
.hist-search-item.active {
  color: var(--green);
}

.hist-search-item.active {
  border-left: 2px solid var(--green);
  padding-left: 8px;
}

.hist-search-match {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

.hist-search-empty {
  padding: 5px 10px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.prompt-prefix {
  color: var(--blue);
  margin-right: 10px;
  font-weight: 700;
  font-size: var(--terminal-font-size);
  text-shadow: 0 0 6px color-mix(in srgb, var(--blue) 12%, transparent);
  white-space: nowrap;
  flex: 0 0 auto;
}

#cmd {
  position: static;
  width: 1px;
  height: 1px;
  background: transparent;
  border: none;
  outline: none;
  color: transparent;
  font-family: var(--font-mono);
  font-size: var(--terminal-font-size);
  padding: 0;
  opacity: 0;
  caret-color: transparent;
  pointer-events: none;
}

#cmd::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }

#run-btn {
  display: none;
  background: var(--green);
  color: var(--theme-on-accent-text);
  border: none;
  border-radius: 4px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

#run-btn:hover:not(:disabled) { opacity: 0.85; }
#run-btn:active:not(:disabled) { transform: scale(0.97); }
#run-btn:disabled { opacity: 0.3; cursor: not-allowed; }


/* /static/css/shell.css */
/* darklab_shell CSS module: shell
   Terminal frame, transcript surfaces, history row, utility buttons, and modals. */

/* ── Terminal ── */
.terminal-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  background: var(--theme-panel-bg);
  border: 1px solid var(--theme-panel-border);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent),
    4px 0 8px -3px var(--theme-panel-shadow),
    0 6px 10px -3px var(--theme-panel-shadow),
    12px 14px 22px -10px color-mix(in srgb, var(--theme-panel-shadow) 88%, transparent);
  border-radius: 4px;
  overflow: hidden;
  min-height: 300px;
}

.terminal-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1px;
  right: 1px;
  height: 1px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

.terminal-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border-bright) 36%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--theme-panel-shadow) 28%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--theme-panel-shadow) 34%, transparent),
    0 0 0 1px color-mix(in srgb, var(--bg) 18%, transparent);
  z-index: 1;
}

#mobile-shell {
  display: none;
}

#mobile-shell-chrome {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

#mobile-shell-transcript {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#mobile-shell-composer {
  display: block;
  flex-shrink: 0;
}

#mobile-shell-overlays {
  display: block;
  flex-shrink: 0;
  position: relative;
}

#mobile-composer-host {
  display: none;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}

body.mobile-terminal-mode #mobile-composer-host {
  display: block;
  position: relative;
  z-index: 40;
  background: var(--surface);
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
}

body.mobile-terminal-mode.mobile-keyboard-open #mobile-composer-host {
  margin-top: 0;
}

body.mobile-terminal-mode { padding: 0; gap: 0; }

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 0;
  background: var(--theme-terminal-bar-bg);
  border-bottom: 1px solid var(--theme-terminal-bar-bg);
  flex-shrink: 0;
}

.status-pill {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
  transition: all 0.3s;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 2%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.status-pill.idle {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 72%, transparent);
  background: color-mix(in srgb, var(--muted) 7%, var(--surface));
}
.status-pill.running {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 76%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  animation: pulse 1s infinite;
}
.status-pill.ok {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 72%, transparent);
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}
.status-pill.fail,
.status-pill.killed {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 72%, transparent);
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
}

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

/* ── Tab panels ── */
#tab-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.output {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  line-height: var(--terminal-line-height);
  font-size: var(--terminal-font-size);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  scroll-behavior: auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  cursor: text;
}

.nice-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

.nice-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.nice-scroll::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

.nice-scroll::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--theme-scrollbar-track);
}

.nice-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

.output .shell-prompt-wrap {
  margin-top: 0;
  min-height: 0;
}

.output .shell-prompt-line {
  min-height: 0;
  padding: 0;
}

.output:empty::before {
  content: 'No output yet. Run a command above.';
  color: var(--muted);
  font-style: italic;
}

.line {
  display: block;
  position: relative;
  animation: fade-in 0.05s ease;
  content-visibility: auto;
  contain-intrinsic-size: 1.45em;
}

@keyframes fade-in { from { opacity:0; } to { opacity:1; } }

body.ln-on .output .line::before,
body.ln-on .output .shell-prompt-wrap::before,
body.ts-elapsed .output .line::before,
body.ts-clock .output .line::before,
body.ts-elapsed .output .shell-prompt-wrap::before,
body.ts-clock .output .shell-prompt-wrap::before {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--output-prefix-width, 0ch);
  padding-right: 1ch;
  text-align: right;
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  user-select: none;
  white-space: pre;
  pointer-events: none;
}

body.ln-on:not(.ts-elapsed):not(.ts-clock) .output .line::before,
body.ln-on:not(.ts-elapsed):not(.ts-clock) .output .shell-prompt-wrap::before {
  content: attr(data-line-number);
}

body:not(.ln-on).ts-elapsed .output .line::before,
body:not(.ln-on).ts-clock .output .line::before,
body:not(.ln-on).ts-elapsed .output .shell-prompt-wrap::before,
body:not(.ln-on).ts-clock .output .shell-prompt-wrap::before {
  content: attr(data-prefix);
}

body.ln-on.ts-elapsed .output .line::before,
body.ln-on.ts-clock .output .line::before,
body.ln-on.ts-elapsed .output .shell-prompt-wrap::before,
body.ln-on.ts-clock .output .shell-prompt-wrap::before {
  content: attr(data-line-number) ' ' attr(data-prefix);
}

.output .line-content,
.output .shell-prompt-line {
  display: block;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: normal;
}

.output .line.is-blank .line-content::before {
  content: ' ';
}

.output .line.progress,
.output .line.status-line {
  animation: none;
}

.output .line.progress .line-content,
.output .line.status-line .line-content {
  overflow: hidden;
  white-space: pre;
}

.pty-screen {
  display: block;
  min-height: 22rem;
  height: clamp(22rem, 52vh, 36rem);
  margin: 0;
  padding: 10px;
  overflow: hidden;
  color: var(--fg);
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--terminal-font-size);
  line-height: var(--terminal-line-height);
  word-break: normal;
  overflow-wrap: normal;
  tab-size: 8;
}

.pty-screen:focus {
  outline: 1px solid var(--green-dim);
  outline-offset: -2px;
}

.pty-screen .xterm {
  height: 100%;
}

.pty-screen .xterm-viewport,
.pty-screen .xterm-screen {
  background: transparent !important;
}

.pty-screen .xterm-rows {
  font-family: var(--font-mono);
}

#pty-modal,
.pty-modal {
  display: grid;
  grid-template-rows: auto 1fr;
  height: min(760px, 86vh);
  width: min(1080px, 94vw);
  background: var(--bg);
  color: var(--fg);
}

.modal-card.pty-modal,
.mobile-sheet-surface.pty-modal {
  background: var(--bg);
  color: var(--fg);
}

.tab-panel > .pty-tab-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: color-mix(in srgb, var(--theme-overlay-backdrop-bg) 82%, transparent);
  border-radius: inherit;
}

.tab-panel > .pty-tab-overlay.open {
  display: flex;
}

.tab-panel > .pty-tab-overlay #pty-modal,
.tab-panel > .pty-tab-overlay .pty-modal {
  width: min(1080px, calc(100% - 32px));
  height: min(760px, calc(100% - 32px));
  max-height: calc(100% - 32px);
}

.pty-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}

.pty-modal-title-wrap {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pty-modal-command {
  overflow: hidden;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pty-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.pty-modal-status {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  gap: 8px;
  line-height: 1;
  min-height: 26px;
  padding: 0 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pty-modal-status[data-tone="running"] {
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 42%, var(--theme-border));
  color: var(--green);
}

.pty-modal-status[data-tone="ok"] {
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 42%, var(--theme-border));
  color: var(--green);
}

.pty-modal-status[data-tone="fail"] {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 42%, var(--theme-border));
  color: var(--danger);
}

.pty-modal-status-label {
  font-weight: 700;
}

.pty-modal-elapsed {
  color: inherit;
  min-width: 4.6ch;
  text-align: right;
}

.pty-modal-screen {
  height: auto;
  min-height: 0;
  padding: 10px;
}

.output .shell-prompt-line {
  display: flex;
}

body.ln-on .output .line,
body.ts-elapsed .output .line,
body.ts-clock .output .line,
body.ln-on .output .shell-prompt-wrap,
body.ts-elapsed .output .shell-prompt-wrap,
body.ts-clock .output .shell-prompt-wrap {
  padding-left: calc(var(--output-prefix-width, 0ch) + 1ch);
}

.output .line[class*="welcome-"]::before,
.output .line[class*="wlc-"]::before,
.output .line.builtin-signal-summary-header::before,
.output .line.builtin-signal-summary-section::before,
.output .line.builtin-signal-summary-row::before,
.output .line.builtin-signal-summary-note::before,
.output .line.builtin-signal-summary-sep::before,
.output .line.command-outcome-summary::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.welcome-hint,
.welcome-output {
  word-break: normal;
  overflow-wrap: break-word;
}

.line.stderr    { color: var(--red); }
.line.exit-ok   { color: var(--green); font-weight: 700; margin-top: 8px; }
.line.exit-fail { color: var(--red);   font-weight: 700; margin-top: 8px; }
.line.exit-neutral { color: var(--muted); font-weight: 700; margin-top: 8px; }

.terminal-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 22%, transparent));
  justify-content: flex-end;
  flex-shrink: 0;
  cursor: default;
}

.terminal-body {
  position: relative;
  cursor: text;
}

.output-follow-btn {
  position: absolute;
  left: 50%;
  bottom: 66px;
  z-index: 15;
  border-radius: 999px;
  border-color: var(--green-dim);
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  color: var(--green);
  text-transform: lowercase;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--theme-panel-shadow) 58%, transparent);
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s, color 0.2s, background 0.2s;
  transform: translateX(-50%);
}

.output-follow-btn[hidden] {
  display: none !important;
}

.output-follow-btn:hover {
  border-color: var(--green);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.output-follow-btn.is-live {
  color: var(--amber);
  border-color: var(--amber);
  animation: pulse 1s infinite;
}

body.modal-overlay-active .status-pill.running,
body.modal-overlay-active .output-follow-btn.is-live {
  animation: none;
  opacity: 1;
}

.output-follow-btn.is-live:hover {
  color: var(--amber);
  border-color: var(--amber);
}

.output-follow-btn.is-bottom {
  color: var(--green);
}

body.mobile-terminal-mode .output-follow-btn {
  left: 50%;
  bottom: 70px;
}

/* ── Save menu dropdown ── */
.save-menu-wrap {
  position: relative;
  display: inline-flex;
}

.save-menu {
  display: none;
  position: absolute;
  bottom: calc(100% - 1px);
  right: 0;
  border-radius: 4px 4px 0 0;
  z-index: 200;
  min-width: 160px;
}

.save-menu-wrap.open .save-menu {
  display: block;
}

.save-menu .dropdown-item {
  display: block;
  width: 100%;
  white-space: nowrap;
}

/* Dropdown indicator arrow on the save trigger button (direct child of the
   wrap — class-agnostic so it survives primitive migrations). Base state is
   an up-pointing triangle (▴) because the default menu opens upward; the
   `.save-menu-down` variant (permalink) rotates it so the chevron points
   down (▾) to match its downward-opening menu. Adding `.open` flips each
   by 180° so the chevron always points away from the currently-visible menu. */
.save-menu-wrap > button::after,
.hud-save-wrap > button::after {
  content: '';
  flex: none;
  align-self: center;
  margin-left: 4px;
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 3px solid currentColor;
  transition: transform 0.15s ease;
}

.save-menu-wrap.save-menu-down > button::after {
  transform: rotate(180deg);
}

.save-menu-wrap.open > button::after,
.hud-save-wrap.open > button::after {
  transform: rotate(180deg);
}

.save-menu-wrap.save-menu-down.open > button::after {
  transform: rotate(0deg);
}

/* Downward-opening variant — used when the trigger is near the top of the page (e.g. permalink header) */
.save-menu-wrap.save-menu-down .save-menu {
  bottom: auto;
  top: calc(100% - 1px);
  border-radius: 0 0 4px 4px;
}

.terminal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── History row (inline, within terminal bar) ── */
.history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--border) 44%, transparent);
  flex-shrink: 0;
  margin-bottom: -8px;
  /* Clip to one row so wrapped chips never flash while JS measures and removes them. */
  overflow: hidden;
}

.history-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  align-self: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 76%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  transform: translateY(0);
  opacity: 0.88;
}

.run-timer {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-left: 6px;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  align-self: center;
}

.hist-chip {
  font-size: 11px;
  padding: 3px 11px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(0);
}

.hist-chip:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) {
  .hist-chip:hover {
    transform: translateY(0) translateX(1px);
  }
}
.hist-chip-overflow { color: var(--green); }

/* ── Modals ── */
.modal-overlay,
.mobile-sheet-overlay,
#shortcuts-overlay,
#theme-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--theme-overlay-backdrop-bg);
  z-index: 320;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mobile-sheet-overlay.open,
#shortcuts-overlay.open,
#theme-overlay.open { display: flex; }

.modal-card,
.mobile-sheet-surface,
#shortcuts-modal,
#theme-modal {
  background: var(--theme-panel-bg);
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px var(--theme-panel-shadow);
}

.modal-card:focus,
.modal-card:focus-visible,
.mobile-sheet-surface:focus,
.mobile-sheet-surface:focus-visible {
  outline: none;
}

#faq-modal {
  width: min(960px, 92vw);
  height: 85vh;
}

#command-registry-modal {
  width: min(1040px, 94vw);
  height: min(760px, 86vh);
}

#command-catalog-modal {
  width: min(820px, 92vw);
  max-height: min(760px, 86vh);
}

#options-modal {
  width: min(720px, 94vw);
}

#provider-status-modal {
  width: min(960px, 94vw);
  height: min(760px, 86vh);
}

#team-scope-modal {
  width: min(420px, 92vw);
}

#workspace-modal {
  width: min(900px, 94vw);
  height: min(760px, 86vh);
}

#workspace-viewer-overlay {
  align-items: center;
  justify-content: center;
}

#workspace-viewer-overlay.workspace-viewer-overlay-elevated {
  z-index: 350;
}

#workspace-viewer {
  background: var(--theme-panel-bg);
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  box-shadow: 0 24px 60px var(--theme-panel-shadow);
  max-height: min(900px, 92vh);
  width: min(1180px, 94vw);
}

#workspace-editor {
  background: var(--theme-panel-bg);
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  box-shadow: 0 24px 60px var(--theme-panel-shadow);
  max-height: min(900px, calc(100dvh - 32px));
  overflow-y: auto;
  width: min(980px, 94vw);
}

#theme-modal {
  width: min(1080px, 96vw);
}

.modal-card-danger,
.modal-card-warning {
  border-color: var(--theme-panel-border);
}

.modal-card-compact {
  width: min(520px, 92vw);
  padding: 18px 20px;
}

.modal-confirm-content:empty {
  display: none;
}

.modal-copy {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 16px;
}

.modal-copy-note {
  color: var(--muted);
  font-size: 11px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-actions-wrap {
  flex-wrap: nowrap;
}

@media (max-width: 480px) {
  .modal-actions-wrap {
    gap: 6px;
  }
}

.modal-actions.modal-actions-stacked {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.modal-actions.modal-actions-stacked .btn {
  width: 100%;
}

.modal-inline-field {
  margin-bottom: 14px;
}

@media (max-width: 480px) {
  .modal-card-compact { padding: 14px 16px; }
  .modal-copy { margin-bottom: 12px; }
  .modal-inline-field { margin-bottom: 10px; }
}

.faq-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.faq-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 2px;
  text-shadow: 0 0 16px var(--green-glow);
}

.faq-body {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.options-body {
  gap: 18px;
}

.theme-body {
  gap: 20px;
}

#theme-modal {
  width: min(620px, 48vw);
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: -10px 0 34px color-mix(in srgb, var(--theme-panel-shadow) 82%, transparent);
}

#theme-modal .faq-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--theme-modal-bg);
  border-bottom-color: var(--theme-panel-border);
}

.theme-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 24px;
}

.theme-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.theme-picker-empty {
  padding: 20px;
  border: 1px dashed var(--border-bright);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.theme-picker-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-picker-group-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-picker-group-grid {
  display: grid;
  grid-template-columns: repeat(var(--theme-picker-columns, 1), minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: 260px;
}

/* :hover and :focus-visible defer to the selected-card primitive so the
   selected visual is not overridden when the user mouses or tabs onto an
   already-selected card. See .is-selected-card in components.css. */
.theme-card:hover:not(.is-selected-card) {
  transform: translateY(-1px);
  border-color: var(--green-dim);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-panel-shadow) 72%, transparent);
}

.theme-card:focus-visible:not(.is-selected-card) {
  outline: 1px solid var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.theme-card-preview {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0;
  aspect-ratio: 1.15 / 1;
  border-radius: 10px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}

.theme-card-preview-rail {
  display: grid;
  grid-template-rows: 36% 40% 24%;
  padding: 0;
  background: var(--theme-chrome-bg);
  border-right: 1px solid var(--theme-chrome-divider-color);
}

.theme-card-preview-rail-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 7px 5px 5px;
  border-top: 1px solid var(--theme-chrome-divider-color);
}

.theme-card-preview-rail-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.theme-card-preview-rail-header {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.8;
}

.theme-card-preview-rail-line {
  display: block;
  width: 78%;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  opacity: 0.45;
}

.theme-card-preview-rail-line:last-child {
  width: 58%;
}

.theme-card-preview-shell {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

.theme-card-preview-tabbar {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 22px;
  padding: 7px 7px 0;
  background: var(--theme-chrome-bg);
  border-bottom: 1px solid var(--theme-chrome-divider-color);
}

.theme-card-preview-tab {
  display: block;
  width: 22%;
  height: 9px;
  border-radius: 4px 4px 0 0;
  background: var(--theme-chrome-row-bg);
  border: 1px solid var(--theme-chrome-control-border);
  border-bottom: 0;
  opacity: 0.78;
}

.theme-card-preview-tab-active {
  width: 32%;
  background: var(--theme-tab-active-bg);
  border-color: var(--green-dim);
  opacity: 1;
}

.theme-card-preview-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 10px;
  background: var(--bg);
}

.theme-card-preview-prompt {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-card-preview-line {
  display: block;
  width: var(--theme-preview-line-width, 82%);
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  opacity: 0.72;
}

.theme-card-preview-modal {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(74%, 128px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  background: var(--theme-modal-bg);
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  box-shadow: 0 8px 18px -12px var(--theme-panel-shadow);
}

.theme-card-preview-modal-header,
.theme-card-preview-modal-body {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--text);
  opacity: 0.5;
}

.theme-card-preview-modal-body {
  width: 70%;
  opacity: 0.3;
}

.theme-card-preview-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.theme-card-preview-modal-button {
  display: block;
  width: 22px;
  height: 8px;
  border-radius: 3px;
  background: var(--theme-button-secondary-bg);
  border: 1px solid var(--theme-button-secondary-border);
}

.theme-card-preview-modal-button:last-child {
  border-color: var(--green-dim);
}

.theme-card-preview-hud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 22px;
  background: var(--theme-chrome-bg);
  border-top: 1px solid var(--theme-chrome-divider-color);
}

.theme-card-preview-hud-cell {
  display: block;
  flex: 1 1 0;
  height: 100%;
  border-radius: 0;
  background: var(--theme-chrome-row-bg);
  border-left: 1px solid var(--theme-chrome-divider-color);
}

.theme-card-preview-hud-cell:first-child {
  border-left: 0;
  background: color-mix(in srgb, var(--green) 8%, var(--theme-chrome-row-bg));
}

.theme-card-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}

.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  cursor: pointer;
}

.form-check:hover {
  color: var(--text);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  accent-color: var(--green);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.form-check input[type="checkbox"]:focus-visible,
.form-check input[type="radio"]:focus-visible {
  outline: 1px solid var(--green-dim);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--green-glow);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  width: min(240px, 100%);
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 8px 28px 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

.form-select:hover {
  border-color: var(--green-dim);
}

.form-select:focus-visible {
  outline: 1px solid var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.app-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-select {
  position: relative;
  width: min(240px, 100%);
  font-family: var(--font-mono);
  font-size: 12px;
}

.app-select-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.app-select-trigger:hover {
  border-color: var(--green-dim);
}

.app-select-trigger:focus-visible {
  outline: 1px solid var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.app-select.disabled .app-select-trigger,
.app-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-select-caret {
  color: var(--muted);
  flex: 0 0 auto;
  transition: transform 120ms ease, color 120ms ease;
}

.app-select.open .app-select-caret {
  color: var(--green);
  transform: rotate(180deg);
}

.app-select-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 360;
  border-radius: 6px;
  max-height: min(320px, 58dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-select-menu.dropdown-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.app-select.open .app-select-menu {
  display: flex;
  flex-direction: column;
}

.app-select-menu button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
}

.app-select-menu button:hover,
.app-select-menu button:focus-visible,
.app-select-menu button.active,
.app-select-menu button[aria-selected="true"] {
  color: var(--green);
}

.options-session-token-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}

.options-session-token-status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.options-session-token-status.is-active {
  color: var(--green);
}

/* Confirmation primitive must sit above modal-level surfaces, including Run
   Details and project pickers, so nested confirmations stay reachable. */
#confirm-host {
  z-index: 2400;
}

.modal-token-input {
  margin: 2px 0 6px;
}

.options-tabs-wrap {
  margin: 0 16px;
}

.options-tabs {
  --tab-strip-padding: 8px 0 0;
  --tab-strip-bg: var(--theme-panel-bg);
  --tab-strip-active-bg: var(--theme-tab-active-bg);
}

.options-body {
  padding-top: 12px;
}

.options-tab-panel[hidden] {
  display: none;
}

#options-panel-preferences .faq-item + .faq-item {
  margin-top: 16px;
}

.options-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin: 16px 0 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.options-section-heading:first-child {
  margin-top: 0;
}

.options-section-heading::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.options-session-token-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.options-session-token-status-row .options-session-token-status {
  margin-bottom: 0;
}

.options-session-token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.options-secrets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.options-team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.options-secret-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--surface);
}

.options-secret-row-body {
  min-width: 0;
}

.options-secret-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.options-secret-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.options-secret-chip {
  max-width: 100%;
  min-height: 20px;
  padding: 2px 6px;
  font-size: 11px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.options-secret-chip.is-muted,
.options-secret-meta,
.options-secret-empty,
.options-secret-field-label {
  color: var(--muted);
}

.options-secret-meta,
.options-secret-empty {
  font-size: 12px;
  line-height: 1.45;
}

.options-secret-empty-state {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.options-secret-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.options-team-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
}

.options-team-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.options-team-name {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.options-team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.options-team-chip {
  max-width: 100%;
  min-height: 20px;
  padding: 2px 6px;
  font-size: 11px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.options-team-chip.is-muted,
.options-team-meta,
.options-team-empty,
.options-team-field-label {
  color: var(--muted);
}

.options-team-meta,
.options-team-empty {
  font-size: 12px;
  line-height: 1.45;
}

.options-team-empty-state {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.options-team-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
}

.options-field-heading .btn-ghost.btn-icon-only.btn-compact {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.options-field-heading .btn-ghost.btn-icon-only.btn-compact:hover,
.options-field-heading .btn-ghost.btn-icon-only.btn-compact:focus-visible {
  border-color: transparent;
  background: var(--theme-button-ghost-hover-bg);
  color: var(--green);
}

#options-panel-notifications .options-secret-row {
  align-items: center;
  flex-wrap: wrap;
}

#options-panel-notifications .options-secret-row-body {
  flex: 1 1 auto;
}

#options-panel-notifications .options-secret-actions {
  flex: 0 0 420px;
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 8px;
}

#options-panel-notifications .options-secret-actions .btn {
  width: 100%;
}

.options-team-form,
.options-team-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.options-team-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--surface);
}

.options-team-panel-title,
.options-team-section-title {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.options-team-section-title {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.options-team-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.options-team-field-full {
  grid-column: 1 / -1;
}

.options-team-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 8px;
  background: var(--theme-panel-bg);
}

.options-team-code code {
  min-width: 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.options-team-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.options-team-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options-team-activity-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.options-team-detail-tabs {
  --tab-strip-gap: 6px;
  --tab-strip-min-height: 0;
  --tab-strip-padding: 0;
  --tab-strip-bg: transparent;
  --tab-strip-active-bg: var(--theme-panel-bg);
  --tab-strip-border-color: var(--theme-panel-border);
  --tab-strip-item-radius: 6px 6px 0 0;
}

.options-team-activity-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.options-team-activity-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.options-team-activity-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-mono);
  font-size: 12px;
}

.options-team-activity-table th,
.options-team-activity-table td {
  overflow: hidden;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.options-team-activity-table th {
  color: var(--muted);
  font-weight: 700;
  text-transform: lowercase;
}

.options-team-activity-table th:nth-child(1),
.options-team-activity-table td:nth-child(1) {
  width: 120px;
}

.options-team-activity-table th:nth-child(2),
.options-team-activity-table td:nth-child(2) {
  width: 140px;
}

.options-team-activity-table th:nth-child(3),
.options-team-activity-table td:nth-child(3) {
  width: 150px;
}

.options-team-activity-table th:nth-child(4),
.options-team-activity-table td:nth-child(4) {
  width: 160px;
}

.options-team-activity-table th:nth-child(6),
.options-team-activity-table td:nth-child(6) {
  width: 96px;
}

.options-team-activity-table tr:last-child td {
  border-bottom: 0;
}

.options-team-activity-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}

.options-team-activity-details-toggle .disclosure-chev {
  font-size: 16px;
}

.options-team-activity-detail-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  max-width: min(520px, 70vw);
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-panel-bg);
  color: var(--text);
}

.options-team-activity-detail-list dt,
.options-team-activity-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 12px;
}

.options-team-activity-detail-list dt {
  color: var(--muted);
}

.options-team-activity-detail-list dd {
  color: var(--text);
}

.options-team-recent-activity-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.options-team-recent-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.45fr) minmax(120px, 0.45fr);
  align-items: start;
  gap: 8px;
  padding: 8px;
  min-width: 0;
}

.options-team-member-row,
.options-team-invite-row,
.options-team-recovery-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 160px) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: transparent;
}

.options-team-member-row.is-removed,
.options-team-invite-row.is-revoked,
.options-team-recovery-row.is-inactive {
  opacity: 0.7;
}

.options-team-row-main {
  min-width: 0;
}

.options-team-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.options-team-member-form {
  display: contents;
}

.team-scope-modal {
  gap: 12px;
}

.team-scope-header {
  padding-bottom: 0;
}

.team-scope-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.team-scope-status.is-error {
  color: var(--red);
}

.team-scope-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.team-scope-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-scope-option {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: inset 3px 0 0 transparent;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 52px;
  padding: 10px 12px;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    color 0.12s ease;
  width: 100%;
}

.team-scope-option:hover,
.team-scope-option:focus-visible {
  border-color: var(--green);
}

.team-scope-option.is-active {
  border-color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}

.team-scope-option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.team-scope-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-scope-option-meta,
.team-scope-option-marker {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.team-scope-option-marker {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: right;
}

.team-scope-option:hover .team-scope-option-marker,
.team-scope-option:focus-visible .team-scope-option-marker {
  color: var(--green);
}

.team-scope-option.is-active .team-scope-option-marker {
  color: var(--green);
}

@media (max-width: 760px) {
  #options-panel-teams .options-team-row {
    flex-direction: column;
  }

  #options-panel-teams .options-team-actions {
    justify-content: flex-start;
  }

  #options-panel-notifications .options-secret-row {
    align-items: stretch;
    flex-direction: column;
  }

  #options-panel-notifications .options-secret-actions {
    flex: 0 0 auto;
    width: min(100%, 176px);
    grid-template-columns: repeat(2, minmax(76px, 1fr));
  }

  .options-team-fields,
  .options-team-member-row,
  .options-team-invite-row,
  .options-team-recovery-row {
    grid-template-columns: 1fr;
  }

  .options-team-member-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .options-team-row-actions {
    justify-content: flex-start;
  }
}

.options-notification-deliveries {
  flex: 1 0 100%;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.options-notification-deliveries-header,
.options-notification-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.options-notification-deliveries-header {
  margin-bottom: 8px;
}

.options-notification-deliveries-title,
.options-notification-event-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

.options-notification-event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options-notification-event-row {
  align-items: flex-start;
  justify-content: flex-start;
}

.options-notification-event-main {
  min-width: 0;
}

.options-notification-event-error,
.options-secret-meta.is-error {
  color: var(--danger);
}

.options-notification-event-error {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.provider-status-subtitle,
.provider-status-intro {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.provider-status-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: auto;
}

.options-provider-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.options-provider-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--surface);
}

.options-provider-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.options-provider-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.options-provider-status {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.options-provider-status.is-usable {
  background: var(--theme-button-ghost-hover-bg);
}

.options-provider-status.is-needed {
  background: var(--theme-button-secondary-bg);
}

.options-provider-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.options-secret-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.options-secret-link:focus-visible {
  outline: 1px solid var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

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

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

.options-secret-field-label,
.options-team-field-label {
  font-size: 12px;
}

.options-token-input {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  box-sizing: border-box;
}

.options-token-input:focus-visible {
  outline: 1px solid var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.options-session-token-msg {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.options-session-token-msg.is-error {
  color: var(--red);
}

.line.denied { color: var(--amber); font-weight: 700; margin-top: 4px; }
.line.notice { color: var(--blue); font-style: italic; margin-bottom: 4px; }
.line.builtin-section {
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 6px;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.line.builtin-kv .line-content {
  white-space: pre-wrap;
}
.line.builtin-kv .line-content,
.line.builtin-shortcut .line-content {
  color: var(--text);
  white-space: pre-wrap;
}
.line.builtin-help-row,
.line.builtin-catalog-item,
.line.builtin-table-header,
.line.builtin-table-row,
.line.builtin-plain,
.line.builtin-ps-row,
.line.builtin-history-row,
.line.builtin-last-row {
  color: var(--text);
  white-space: pre-wrap;
}
.line.builtin-help-row {
  margin: 1px 0;
}
.line.builtin-table-header .line-content,
.line.builtin-table-row .line-content {
  white-space: pre-wrap;
}
.line.builtin-table-header .line-content {
  color: var(--muted);
}
.line.builtin-help-row .line-content,
.line.builtin-catalog-item .line-content {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch 1.25ch;
}
.builtin-help-command {
  color: var(--green);
  font-weight: 700;
}
.builtin-help-label {
  color: var(--text);
  font-weight: inherit;
}
.builtin-help-description {
  color: var(--muted);
}
.builtin-inline-code {
  color: var(--text);
  font-weight: 700;
}
.line.builtin-signal-summary-header {
  color: var(--blue);
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 2px;
}
.line.builtin-signal-summary-section {
  color: var(--text);
  font-weight: 700;
  margin-top: 6px;
}
.line.builtin-signal-summary-row,
.line.builtin-signal-summary-note {
  white-space: pre-wrap;
}
.line.builtin-signal-summary-row {
  color: var(--text);
}
.line.builtin-signal-summary-note {
  color: var(--muted);
  font-style: italic;
  margin-bottom: 2px;
}
.line.builtin-signal-summary-sep {
  color: var(--border-bright);
  letter-spacing: 0.04em;
  margin: 6px 0;
}
.line.command-outcome-summary-title {
  color: var(--blue);
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 2px;
}
.line.command-outcome-summary-row,
.line.command-outcome-summary-note {
  white-space: pre-wrap;
}
.line.command-outcome-summary-row {
  color: var(--text);
}
.line.command-outcome-summary-note {
  color: var(--muted);
  font-style: italic;
}
.line.builtin-catalog-item {
  color: color-mix(in srgb, var(--text) 94%, var(--blue));
}
.line.builtin-identity {
  color: var(--green);
  font-weight: 700;
  margin-top: 1px;
}
.line.builtin-ps-header {
  color: var(--blue);
  font-weight: 700;
  white-space: pre-wrap;
}
.line.builtin-ps-row {
  color: var(--text);
}
.line.builtin-history-row {
  color: color-mix(in srgb, var(--text) 96%, var(--blue));
}
.line.builtin-last-row {
  color: var(--text);
}
.line.builtin-last-ok {
  color: color-mix(in srgb, var(--text) 88%, var(--green));
}
.line.builtin-last-fail {
  color: color-mix(in srgb, var(--text) 88%, var(--red));
}
.line.builtin-shortcut {
  margin: 1px 0;
}
.line.builtin-note {
  color: var(--blue);
  font-style: italic;
  margin-top: 4px;
}
.line.builtin-faq-q {
  color: var(--blue);
  font-weight: 700;
  margin-top: 8px;
}
.line.builtin-faq-a {
  color: var(--text);
  margin: 1px 0 4px;
  white-space: pre-wrap;
}
.line.builtin-faq-q .line-content,
.line.builtin-faq-a .line-content {
  align-items: baseline;
  display: grid;
  gap: 1ch;
  grid-template-columns: 2ch minmax(0, 1fr);
}
.builtin-row-marker {
  color: var(--green);
  font-weight: 700;
  text-align: right;
}
.builtin-faq-answer-text {
  color: var(--text);
  font-weight: 400;
}
.line.builtin-spacer {
  min-height: 0.45rem;
}

/* ── Theme overrides
   Body-scoped selectors apply --theme-* variables with higher specificity
   than the base :root defaults, so selected themes override individual
   component colours without needing !important on every property. ── */
body #output { color: var(--text); }
body #theme-modal,
body #faq-modal,
body #options-modal,
body #shortcuts-modal,
body #workspace-modal {
  background: var(--theme-modal-bg);
}
body .faq-a {
  color: var(--text);
}
body .prompt-prefix,
body .wlc-prompt,
body .mobile-prompt-label {
  color: var(--blue);
}
body .welcome-command-badge {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}
body .modal-card-compact {
  background: var(--theme-modal-bg) !important;
  border-color: var(--theme-panel-border) !important;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--theme-panel-shadow) 88%, transparent) !important;
}
body .faq-a code { background: var(--theme-inline-surface-bg); }
body .allowed-chip { background: var(--theme-inline-surface-bg); }
body .form-select { background-color: var(--theme-chrome-control-bg); }
body .tab .tab-status.ok { background: var(--green); }


/* /static/css/primitives/components.css */
/* darklab_shell CSS module: components
   Reusable shell components: tabs, search, toast, permalink/history surfaces, and menus. */

/* ── Tabs ── */
.tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 8px 0;
  background: var(--theme-terminal-bar-bg);
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.tabs-bar.tabs-bar-touch-sorting {
  cursor: grabbing;
}
.tabs-bar.tabs-bar-desktop-sorting {
  cursor: grabbing;
}
.tabs-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }

.tabs-scroll-btn {
  background: var(--theme-toolbar-button-bg);
  border: 1px solid transparent;
  color: var(--theme-toolbar-button-text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
#tabs-scroll-left {
  border-right-color: transparent;
}
#tabs-scroll-right {
  border-left-color: transparent;
}
.tabs-scroll-btn:hover:not(:disabled) {
  color: var(--theme-toolbar-button-hover-text);
  border-color: transparent;
  background: var(--theme-toolbar-button-hover-bg);
}
.tabs-scroll-btn:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
  border-color: transparent;
}

.tabs-scroll-btn.u-hidden {
  display: none;
}
.tabs-scroll-btn.btn {
  border-color: transparent;
}
.tabs-scroll-btn.btn:hover:not(:disabled) {
  border-color: transparent;
}

.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-bright);
  border-top: 2px solid var(--border-bright);
  border-bottom: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: grab;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  flex-shrink: 0;
  touch-action: pan-y;
  margin-bottom: -1px;
}
.tab:active { cursor: grabbing; }
.tab.tab-dragging {
  opacity: 0.32;
  transform: translateY(-1px);
}
.tab.tab-pointer-dragging {
  opacity: 0.96;
  color: var(--text);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-tab-drop-shadow) 55%, transparent);
  z-index: 2;
}
.tab.tab-touch-dragging {
  opacity: 0.96;
  color: var(--text);
  transform: translateY(-3px) scale(1.03);
  text-shadow: var(--theme-tab-touch-drag-text-shadow);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-tab-drop-shadow) 55%, transparent);
  z-index: 2;
}
.tab.tab-touch-dragging .tab-status {
  box-shadow: 0 0 10px currentColor;
}
.tab.tab-touch-dragging.tab-drop-before::before,
.tab.tab-touch-dragging.tab-drop-after::after {
  display: none;
}
.tab.tab-drop-before,
.tab.tab-drop-after {
  position: relative;
}
.tabs-bar.tabs-bar-desktop-sorting .tab:not(.tab-pointer-dragging),
.tabs-bar.tabs-bar-touch-sorting .tab:not(.tab-touch-dragging) {
  transition: transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
  opacity: 0.42;
  transform: scale(0.985);
}
.tabs-bar.tabs-bar-desktop-sorting .tab.active:not(.tab-pointer-dragging),
.tabs-bar.tabs-bar-touch-sorting .tab.active:not(.tab-touch-dragging) {
  opacity: 0.58;
  transform: scale(0.992);
}
.tabs-bar.tabs-bar-touch-sorting .tab.tab-drop-before,
.tabs-bar.tabs-bar-touch-sorting .tab.tab-drop-after {
  transform: none;
}
.tabs-bar.tabs-bar-touch-sorting .tab.tab-drop-before::before,
.tabs-bar.tabs-bar-touch-sorting .tab.tab-drop-after::after {
  display: none;
}
.tab.tab-drop-before::before,
.tab.tab-drop-after::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--green);
  box-shadow: var(--theme-tab-drop-shadow);
  border-radius: 999px;
}
.tab.tab-drop-before::before { left: -5px; }
.tab.tab-drop-after::after { right: -5px; }
.tab:hover:not(.active) { color: var(--green); opacity: 0.96; }
.tab:focus,
.tab:focus-visible {
  outline: none;
  box-shadow: none;
}
.tab.active {
  color: var(--green);
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-top: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
  border-bottom-color: var(--surface);
  box-shadow: none;
}
.tab.active:has(.tab-status.running) {
  border-top-color: color-mix(in srgb, var(--amber) 60%, transparent);
}
body .tab:not(.active) { opacity: 0.82; }
body .hist-chip {
  background: var(--theme-toolbar-button-bg);
  border-color: var(--theme-toolbar-button-border);
  color: var(--theme-toolbar-button-text);
}
@media (hover: hover) {
  body .hist-chip:hover {
    background: var(--theme-toolbar-button-hover-bg);
    border-color: var(--theme-toolbar-button-hover-border);
    color: var(--theme-toolbar-button-hover-text);
  }
}

/* ── Tab rename input ── */
.tab-rename-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--green);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  width: 80px;
  padding: 0;
  caret-color: var(--green);
}

body .hist-chip-overflow { color: var(--theme-toolbar-button-hover-text); }
body #search-toggle-btn,
body #search-summary-btn,
body #ts-btn,
body #ln-btn {
  background: var(--theme-toolbar-button-bg);
  border-color: var(--theme-toolbar-button-border);
  color: var(--theme-toolbar-button-text);
}
body #hamburger-btn {
  background: transparent;
  border-color: transparent;
  color: var(--theme-toolbar-button-text);
}
body #search-toggle-btn:hover,
body #search-summary-btn:hover,
body #ts-btn:hover,
body #ln-btn:hover {
  background: var(--theme-toolbar-button-hover-bg);
  border-color: var(--theme-toolbar-button-hover-border);
  color: var(--theme-toolbar-button-hover-text);
}
body #hamburger-btn:active {
  background: transparent;
  border-color: transparent;
  color: var(--theme-toolbar-button-hover-text);
}
@media (hover: hover) {
  body #hamburger-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--theme-toolbar-button-hover-text);
  }
}
.tab .tab-close {
  opacity: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  border-radius: 999px;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background: var(--theme-tab-close-bg);
  border: 1px solid var(--theme-tab-close-border);
  color: inherit;
  cursor: pointer;
}
.tab .tab-close:focus,
.tab .tab-close:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--theme-tab-close-bg);
  color: inherit;
  opacity: 0;
}
.tab:hover .tab-close { opacity: 1; }
.tab.active .tab-close { opacity: 1; }
.tab .tab-close:hover { opacity: 1; background: var(--theme-tab-close-hover-bg); border-color: var(--theme-tab-close-hover-border); color: var(--theme-tab-close-hover-text); }
.tab .tab-grip {
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 4px 0 -2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.3;
  box-shadow:
    3px 0 0 currentColor,
    0 3px 0 currentColor,
    3px 3px 0 currentColor,
    0 6px 0 currentColor,
    3px 6px 0 currentColor;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(-2px);
  transition: opacity 0.12s ease;
}
.tab:hover .tab-grip { opacity: 0.6; }
.tab.active .tab-grip { opacity: 0.55; }
.tab .tab-status { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tab .tab-status.running {
  background: var(--amber);
  animation: pulse 1s infinite;
  box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 55%, transparent);
}
.tab .tab-status.ok     { background: var(--green); }
.tab .tab-status.fail   { background: var(--red); }
.tab .tab-status.killed { background: var(--red); }
.tab .tab-status.idle { background: var(--muted); }

#new-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  min-height: 32px;
  min-width: 32px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  color: var(--theme-tab-text);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
  flex-shrink: 0;
  line-height: 1;
  margin-bottom: -1px;
  box-shadow: none;
}
#new-tab-btn:hover {
  color: var(--theme-tab-hover-text);
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
#new-tab-btn:active:not(:disabled) {
  transform: translateY(1px);
}
#new-tab-btn:disabled { opacity: 0.25; cursor: not-allowed; }
#new-tab-btn:disabled:hover { color: var(--theme-tab-text); }

.tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; position: relative; }
.tab-panel.active { display: flex; }

/* ── Output search ── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.search-scopes {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.search-scopes .search-scope-btn {
  min-width: max-content;
}
.search-scope-btn.active {
  color: var(--text);
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
body #search-toggle-btn.search-discover-pulse {
  border-color: color-mix(in srgb, var(--amber) 78%, var(--border-bright));
  color: var(--text);
  animation: search-discover-pulse 1.4s ease-in-out 5;
}
@keyframes search-discover-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 0%, transparent);
    background: transparent;
  }
  45% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 20%, transparent);
    background: color-mix(in srgb, var(--amber) 10%, transparent);
  }
}

/* ── Row primitives ───────────────────────────────────────────────────────── */
.chrome-row {
  background: var(--theme-chrome-row-bg);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s;
}

.chrome-row-clickable {
  cursor: pointer;
}

.chrome-row-clickable:hover,
.chrome-row-clickable:focus-visible {
  background: var(--theme-chrome-row-hover-bg);
  outline: none;
}

.row-accent-green {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--green) 72%, transparent);
}

.row-accent-amber {
  border-left: 2px solid var(--amber);
}

.panel-row {
  border: 1px solid var(--border);
  border-radius: 6px;
}

.panel-row-clickable {
  cursor: pointer;
}

.panel-row-clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--muted) 75%, white);
  outline-offset: 2px;
}

/* ── Chip and badge primitives ───────────────────────────────────────────── */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: var(--font-mono);
}

.chip {
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--green-dim) 54%, var(--border-bright));
  background: color-mix(in srgb, var(--green) 8%, transparent);
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.chip-action {
  background: color-mix(in srgb, var(--theme-toolbar-button-bg) 74%, color-mix(in srgb, var(--surface) 88%, transparent));
  border-color: var(--border-bright);
  color: var(--muted);
}

.chip-removable {
  color: var(--green);
}

.chip:hover,
.chip:focus-visible {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  border-color: color-mix(in srgb, var(--green) 60%, transparent);
  color: var(--text);
}

.chip:focus-visible {
  outline: 1px solid var(--green-dim);
  outline-offset: 1px;
}

.chip:active {
  border-color: var(--green-dim);
  color: var(--text);
  opacity: 0.7;
}
.chip[data-pressable-clearing="1"],
.chip[data-pressable-clearing="1"]:hover,
.chip[data-pressable-clearing="1"]:active {
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-color: color-mix(in srgb, var(--green-dim) 54%, var(--border-bright));
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
  opacity: 1;
  transform: none;
}

.badge {
  justify-content: center;
  min-height: 16px;
  padding: 0 6px;
  border: 1px solid var(--border-bright);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.badge-tone-green {
  color: var(--green);
  border-color: var(--green-dim);
}

.badge-tone-amber {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 42%, var(--border));
}

.badge-tone-red {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 48%, var(--border));
}

.badge-tone-muted {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

.badge-tone-cyan {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--border));
}

/* ── Form/control primitives ─────────────────────────────────────────────── */
.form-control,
.control-row {
  box-sizing: border-box;
  background: var(--theme-chrome-control-bg);
  border: 1px solid var(--theme-chrome-control-border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  outline: none;
}

.form-control {
  font-size: 13px;
  padding: 10px 12px;
}

.form-control-compact {
  font-size: 11px;
  padding: 7px 9px;
  border-radius: 4px;
}

.form-control-quiet {
  background: transparent;
  border-color: var(--border-bright);
  border-radius: 3px;
}

.form-control:focus,
.form-control:focus-visible,
.control-row:focus-visible {
  border-color: var(--green-dim);
}

.form-control[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--red) 72%, var(--border-bright));
}

.form-error {
  color: var(--red);
  font-size: 12px;
  line-height: 1.4;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-row-touch {
  min-height: 40px;
  padding: 9px 12px;
  font-size: 12px;
}

/* ── Drawer and sheet primitives ─────────────────────────────────────────── */
.chrome-drawer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--theme-chrome-bg);
  font-family: var(--font-mono);
}

.surface-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--theme-chrome-header-bg);
}

.surface-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.bottom-sheet {
  display: flex;
  flex-direction: column;
  background: var(--theme-chrome-bg);
  border-top: 1px solid var(--border-bright);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -20px 50px var(--theme-panel-shadow, rgba(0,0,0,0.55));
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 10px;
}

.bottom-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.bottom-sheet-footer {
  border-top: 1px solid var(--border);
}

.action-sheet-overlay {
  z-index: 380;
}

.action-sheet {
  gap: 0;
  height: auto;
  min-height: 0;
  max-height: 88svh;
  padding-bottom: 0;
  isolation: isolate;
}

.action-sheet-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-panel-border);
}

.action-sheet-title {
  margin: 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
}

.action-sheet-items {
  display: grid;
  flex: 0 1 auto;
  gap: 8px;
  align-content: start;
  grid-auto-rows: max-content;
  max-height: calc(88svh - 48px);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.action-sheet-item {
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  font-size: 13px;
}

.action-sheet-item.is-danger {
  border-color: var(--red);
  color: var(--red);
}

.action-sheet-item-icon {
  flex: 0 0 auto;
}

.action-sheet-field {
  display: grid;
  gap: 8px;
  min-height: 48px;
  padding: 8px 0;
}

.action-sheet-divider {
  height: 1px;
  margin: 2px 0;
  background: var(--theme-panel-border);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 8px;
  transition: border-color 0.2s;
}
.search-bar input:focus { border-color: var(--green-dim); }
.search-bar input::placeholder { color: var(--muted); }
.search-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.search-nav {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.search-nav .btn {
  min-height: 22px;
  padding: 3px 8px;
  background: transparent;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}
.search-nav .btn:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 40%, transparent);
}
.search-close-btn {
  display: none;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.search-close-btn:hover {
  color: var(--text);
  border-color: var(--text);
}
.search-toggles { display: flex; gap: 4px; }
mark.search-hl { background: var(--theme-search-highlight-bg); color: inherit; border-radius: 2px; }
mark.search-hl.current { background: var(--theme-search-highlight-current-bg); }
.line.search-signal-hl {
  background: var(--theme-search-signal-bg);
  box-shadow: inset 2px 0 0 var(--theme-search-signal-accent);
}
.line.search-signal-hl.current {
  background: var(--theme-search-signal-current-bg);
  box-shadow: inset 3px 0 0 var(--theme-search-signal-current-accent);
}

/* ── Permalink toast ── */
#permalink-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--surface);
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 18px;
  border-radius: 4px;
  z-index: 400;
  transition: transform 0.3s ease;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
#permalink-toast.toast-has-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast-action-btn {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.85;
}
.toast-action-btn:hover,
.toast-action-btn:active {
  opacity: 1;
}
#permalink-toast.toast-success {
  background: var(--surface);
  border-color: var(--green-dim);
  color: var(--green);
}
#permalink-toast.toast-error {
  background: color-mix(in srgb, var(--red) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: var(--red);
}
#permalink-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
body #permalink-toast {
  background: var(--theme-toast-bg);
  border-color: var(--theme-toast-border);
  color: var(--theme-toast-text);
  box-shadow: var(--theme-toast-shadow);
}
body #permalink-toast.toast-success {
  background: var(--theme-toast-bg);
  border-color: var(--theme-toast-border);
  color: var(--theme-toast-text);
}
body #permalink-toast.toast-error {
  background: var(--theme-toast-error-bg);
  border-color: var(--theme-toast-error-border);
  color: var(--theme-toast-error-text);
}

/* ── Permalink pages ── */
/* Shared header/output/line chrome lives in terminal_export.css, which is
 * linked after styles.css on all permalink/diag pages and inlined into HTML
 * exports by buildTerminalExportStyles. Only permalink-specific overrides live
 * here. */
body.permalink-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
body.permalink-page::before {
  display: none;
}
body.permalink-page .permalink-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}
body.permalink-page .permalink-expiry {
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.permalink-page .output:empty::before {
  content: none;
}
body.permalink-page .permalink-error-heading {
  color: var(--red);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2px;
}
body.permalink-page .permalink-error-detail {
  color: var(--muted);
  max-width: 960px;
  line-height: 1.6;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
body.permalink-page .permalink-error-state {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 8px;
  white-space: normal;
}

/* ── Hamburger / mobile menu ── */
#hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-left: auto;
  /* Opt out of the 300ms double-tap-to-zoom gesture on this control. Without
     it, a double tap on the hamburger (or the empty space immediately around
     it) triggers the browser's double-tap zoom instead of a second click. */
  touch-action: manipulation;
}
/* Press-only glow. Hover-capable pointers (desktop) get the same cue on real
   hover; touch devices show the glow only while the finger is down so the
   button does not stay green after release until focus moves elsewhere. */
#hamburger-btn:active { color: var(--green); border-color: var(--green-dim); }
@media (hover: hover) {
  #hamburger-btn:hover { color: var(--green); border-color: var(--green-dim); }
}

/* ── Selected-card primitive ─────────────────────────────────────────────
   Shared visual for "this card is the current selection from a set."
   Apply by toggling .is-selected-card on the surface element (e.g. theme
   picker cards). The treatment uses the bright --green token, an outer
   glow ring, and a soft halo to stay visibly distinct from :hover (which
   uses --green-dim) and :focus-visible (which uses an outline). Surfaces
   that have a :hover or :focus-visible rule on the same element should
   add :not(.is-selected-card) to those rules so the selected visual is
   not overridden when the user hovers or tabs onto the selected card. */
.is-selected-card {
  border-color: var(--green);
  box-shadow:
    0 0 0 2px var(--green-glow),
    0 0 14px color-mix(in srgb, var(--green) 22%, transparent),
    0 12px 26px color-mix(in srgb, var(--theme-panel-shadow) 72%, transparent);
}

/* ── Chev primitives ─────────────────────────────────────────────────────
   Two shared glyph classes for the app's navigation vocabulary:

   .disclosure-chev — rotating ▸ glyph for a button that expands an inline
     section (block disclosure). Rotation activates when any ancestor's
     aria-expanded="true" matches, turning the right-pointing ▸ visually
     into ▾.

   .drill-chev — static › glyph for rows that navigate to another surface
     (sheet, modal, panel). Non-rotating by design.

   Both inherit color via currentColor so each surface keeps its theming.
   Dropdown carets use a separate 180° rotating ▾ convention and are not
   part of this primitive set. */
.disclosure-chev {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  transition: transform 160ms ease;
  opacity: 1;
  flex: 0 0 auto;
}
[aria-expanded="true"] .disclosure-chev {
  transform: rotate(90deg);
}
.drill-chev {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  opacity: 0.75;
  flex: 0 0 auto;
}

/* ── Button primitives ─────────────────────────────────────────────────────
   Closed primitive set every clickable control in the app must map to.
   No surface-scoped button classes for button-like actions; one-offs are
   defects unless documented in the allowlist fixture.

   Primitives:
     .btn        — role × tone × size × state composable CTA
     .nav-item   — sidebar rail and mobile menu rows (navigation)
     .tab-strip-item — modal and panel tab in a .tab-strip
     .close-btn  — icon-only X button
     .toggle-btn — aria-pressed mode toggle
     .kb-key     — mobile on-screen keyboard key (see mobile-chrome.css)
     .dropdown-item — app-owned menu/listbox option
     .control-row   — row-shaped filter/select trigger
     .hud-action-cell — clickable HUD summary cell
     .gesture-handle — mobile bottom-sheet drag/tap handle

   Composition rules for .btn:
     role  — pick exactly one: btn-primary | btn-secondary | btn-ghost | btn-destructive
     tone  — pick zero-or-one: btn-warning | btn-danger  (accent is default;
             btn-destructive defaults its tone to danger)
     size  — default unless marked btn-compact
     state — aria-disabled="true" (all roles) or aria-busy="true"
             (primary + destructive only)
     icon-only — btn-icon-only permitted on ghost role only (plus close-btn)

   Role chrome:
     primary     — filled, high-emphasis CTA
     secondary   — outlined, neutral/mid emphasis
     ghost       — transparent, low emphasis; only role allowed icon-only on btn
     destructive — outlined-tint chrome reserved for destructive action weight

   Tone colors flow through the local --_tone custom property so role rules
   can compose with tone overrides without long :is() selectors. */

.btn {
  --_tone: var(--green);
  --_tone-dim: var(--green-dim);
  --_tone-bg: var(--green);
  --_tone-fg: var(--theme-on-accent-text);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 28px;
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  background: transparent;
  color: var(--text);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

/* Inside a confirm modal, always render the focus indicator on :focus — not
   just :focus-visible. When the user opens a confirm via a mouse click (e.g.
   the history-row trash icon), the browser's :focus-visible heuristic
   suppresses the keyboard-cue outline on the programmatically-focused cancel
   button, leaving keyboard users without a visible focus target. Inside a
   modal dialog that auto-focuses a button, the focus location matters for
   keyboard users regardless of how the modal was opened. */
#confirm-host .btn:focus {
  outline: 1px solid color-mix(in srgb, var(--green-dim) 82%, var(--text) 18%);
  outline-offset: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--green-dim) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--green) 10%, transparent);
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* u-hidden escape hatch: the primitive's display:inline-flex is a single-class
   rule that out-ranks the .u-hidden utility by load order. Re-assert hide
   when both classes are present. */
.btn.u-hidden,
.nav-item.u-hidden,
.tab-strip-item.u-hidden,
.close-btn.u-hidden,
.toggle-btn.u-hidden {
  display: none;
}

.btn[aria-busy="true"] {
  cursor: progress;
  color: transparent !important;
  position: relative;
}
.btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--_tone);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Tone overrides — applied to any role */
.btn.btn-warning {
  --_tone: var(--amber);
  --_tone-dim: color-mix(in srgb, var(--amber) 58%, transparent);
  --_tone-bg: color-mix(in srgb, var(--amber) 86%, var(--theme-panel-bg));
  --_tone-fg: var(--theme-modal-warning-btn-text);
}
.btn.btn-danger,
.btn.btn-destructive {
  --_tone: var(--red);
  --_tone-dim: color-mix(in srgb, var(--red) 54%, transparent);
  --_tone-bg: var(--red);
  --_tone-fg: var(--theme-modal-danger-btn-text);
}

/* Role: primary — filled */
.btn-primary {
  background: var(--_tone-bg);
  border: 1px solid var(--_tone-dim);
  color: var(--_tone-fg);
}
.btn-primary:hover:not([aria-disabled="true"]):not(:disabled) {
  background: color-mix(in srgb, var(--_tone-bg) 92%, var(--text));
  transform: translateY(-1px);
}
.btn-primary[data-pressable-clearing="1"],
.btn-primary[data-pressable-clearing="1"]:hover:not([aria-disabled="true"]):not(:disabled) {
  background: var(--_tone-bg);
  border-color: var(--_tone-dim);
  color: var(--_tone-fg);
  transform: none;
}

/* Role: secondary — outlined with neutral default; tone pulls the outline
   and hover wash toward the tone color while keeping the resting state
   restrained. */
.btn-secondary {
  background: var(--theme-button-secondary-bg);
  border: 1px solid var(--theme-button-secondary-border);
  color: var(--theme-button-secondary-text);
}
.btn-secondary:hover:not([aria-disabled="true"]):not(:disabled) {
  border-color: var(--theme-button-secondary-hover-border);
  color: var(--text);
  background: var(--theme-button-secondary-hover-bg);
  transform: translateY(-1px);
}
.btn-secondary[data-pressable-clearing="1"],
.btn-secondary[data-pressable-clearing="1"]:hover:not([aria-disabled="true"]):not(:disabled) {
  background: var(--theme-button-secondary-bg);
  border-color: var(--theme-button-secondary-border);
  color: var(--theme-button-secondary-text);
  transform: none;
}
.btn-secondary.btn-warning:hover:not([aria-disabled="true"]):not(:disabled),
.btn-secondary.btn-danger:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--_tone);
  border-color: color-mix(in srgb, var(--_tone) 52%, transparent);
  background: color-mix(in srgb, var(--_tone) 6%, transparent);
}

/* Role: ghost — transparent, low emphasis; icon-only permitted */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--theme-button-ghost-border);
  color: var(--theme-button-ghost-text);
}
.btn-ghost.btn-warning,
.btn-ghost.btn-danger,
.btn-ghost.btn-destructive {
  color: var(--_tone);
}
.btn-ghost:hover:not([aria-disabled="true"]):not(:disabled) {
  background: var(--theme-button-ghost-hover-bg);
  border-color: var(--theme-button-ghost-hover-border);
  color: var(--text);
}
.btn-ghost[data-pressable-clearing="1"],
.btn-ghost[data-pressable-clearing="1"]:hover:not([aria-disabled="true"]):not(:disabled) {
  background: transparent;
  border-color: var(--theme-button-ghost-border);
  color: var(--theme-button-ghost-text);
  transform: none;
}
.btn-ghost.btn-warning:hover:not([aria-disabled="true"]):not(:disabled),
.btn-ghost.btn-danger:hover:not([aria-disabled="true"]):not(:disabled),
.btn-ghost.btn-destructive:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--_tone);
  background: color-mix(in srgb, var(--_tone) 12%, transparent);
}

/* Role: destructive — outlined chrome with tone-tinted background.
   Default tone is danger (irreversible); btn-warning on destructive renders
   the reversible-destructive treatment (caution yellow). Accepts labels
   only — never icon-only, to prevent unlabeled destructive controls. */
.btn-destructive {
  background: var(--theme-button-destructive-bg);
  border: 1px solid var(--_tone-dim);
  color: var(--theme-button-destructive-text);
}
.btn-destructive:hover:not([aria-disabled="true"]):not(:disabled) {
  background: var(--theme-button-destructive-hover-bg);
  color: var(--text);
  transform: translateY(-1px);
}
.btn-destructive[data-pressable-clearing="1"],
.btn-destructive[data-pressable-clearing="1"]:hover:not([aria-disabled="true"]):not(:disabled) {
  background: var(--theme-button-destructive-bg);
  border-color: var(--_tone-dim);
  color: var(--theme-button-destructive-text);
  transform: none;
}

@media (hover: none) {
  .btn-primary:hover:not([aria-disabled="true"]):not(:disabled) {
    background: var(--_tone-bg);
    transform: none;
  }
  .btn-secondary:hover:not([aria-disabled="true"]):not(:disabled) {
    background: var(--theme-button-secondary-bg);
    border-color: var(--theme-button-secondary-border);
    color: var(--theme-button-secondary-text);
    transform: none;
  }
  .btn-ghost:hover:not([aria-disabled="true"]):not(:disabled) {
    background: transparent;
    border-color: var(--theme-button-ghost-border);
    color: var(--theme-button-ghost-text);
  }
  .btn-destructive:hover:not([aria-disabled="true"]):not(:disabled) {
    background: var(--theme-button-destructive-bg);
    color: var(--theme-button-destructive-text);
    transform: none;
  }
  .chip:hover {
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-color: color-mix(in srgb, var(--green-dim) 54%, var(--border-bright));
    color: color-mix(in srgb, var(--text) 90%, var(--muted));
  }
}

/* Size — compact */
.btn-compact {
  min-height: 22px;
  padding: 3px 9px;
  font-size: 10px;
  gap: 4px;
}

/* Icon-only — ghost only */
.btn-icon-only {
  padding: 4px 6px;
  min-width: 26px;
  min-height: 26px;
  gap: 0;
}
.btn-icon-only.btn-compact {
  padding: 2px 4px;
  min-width: 22px;
  min-height: 22px;
}


/* ── Nav-item primitive ─────────────────────────────────────────────────────
   Row-shaped navigation / menu control. Covers sidebar rail items, rail
   section headers, mobile hamburger menu rows, submenu rows, recents-row
   action chips, FAQ question toggles. Distinct from .btn because these are
   *rows in a list* — wider, left-aligned, and visually subordinate to the
   CTAs in their surface. Compose with .disclosure-chev or .drill-chev from
   the chev primitives to signal behavior. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:hover:not([aria-disabled="true"]):not(:disabled) {
  background: color-mix(in srgb, var(--green) 6%, transparent);
  color: var(--green);
}
.nav-item[data-pressable-clearing="1"],
.nav-item[data-pressable-clearing="1"]:hover:not([aria-disabled="true"]):not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}
.nav-item:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}
.nav-item[aria-disabled="true"],
.nav-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.nav-item.is-active,
.nav-item[aria-current="page"] {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}
@media (hover: none) {
  .nav-item:hover:not([aria-disabled="true"]):not(:disabled) {
    background: transparent;
    color: var(--text);
  }
}

/* ── Close-btn primitive ────────────────────────────────────────────────────
   The single icon-close control. Composes with faq-close, workflows-close,
   shortcuts-close, theme-close, options-close, history-panel-close,
   search-close-btn, sheet-close. Surface classes remain as JS hooks and
   for surface-local overrides (e.g. sheet-close mobile touch padding).

   Documented exception: .tab .tab-close retains its own surface-specific
   chrome (circular shape, per-theme bg/border tokens, parent-hover opacity
   reveal) because the primitive's shape-and-state model doesn't fit. */
.close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 2px 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.close-btn:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--text);
}
.close-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.close-btn[aria-disabled="true"],
.close-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Toggle-btn primitive ───────────────────────────────────────────────────
   aria-pressed mode toggles: case-sensitive / regex in search, starred
   filter, and mobile recents filter-checks. The "is the mode on?" state is
   always carried by aria-pressed; the
   CSS only reacts to that attribute. */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: 22px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.toggle-btn:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 40%, transparent);
}
.toggle-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.toggle-btn[aria-pressed="true"] {
  color: var(--green);
  border-color: var(--green-dim);
  background: color-mix(in srgb, var(--green) 6%, transparent);
}
.toggle-btn[aria-disabled="true"],
.toggle-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Tab-strip primitive ───────────────────────────────────────────────────
   Horizontal modal/panel tab rows. Terminal tabs keep their dedicated .tab
   contract because they are draggable document tabs; these strips are simple
   role=tab controls with one active item and optional count chips. */
.tab-strip {
  --tab-strip-gap: 4px;
  --tab-strip-min-height: 42px;
  --tab-strip-padding: 6px 20px 0;
  --tab-strip-bg: var(--theme-terminal-bar-bg);
  --tab-strip-border-color: var(--border-bright);
  --tab-strip-active-bg: var(--surface);
  --tab-strip-item-min-height: 34px;
  --tab-strip-item-max-width: none;
  --tab-strip-item-padding: 8px 12px;
  --tab-strip-item-radius: 6px 6px 0 0;
  --tab-strip-item-gap: 6px;
  --tab-strip-item-font-size: 11px;

  display: flex;
  align-items: flex-end;
  gap: var(--tab-strip-gap);
  min-height: var(--tab-strip-min-height);
  padding: var(--tab-strip-padding);
  border-bottom: 1px solid var(--tab-strip-border-color);
  background: var(--tab-strip-bg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tab-strip::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tab-strip-item {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--tab-strip-item-gap);
  width: auto;
  max-width: var(--tab-strip-item-max-width);
  box-sizing: border-box;
  min-height: var(--tab-strip-item-min-height);
  margin-bottom: -1px;
  padding: var(--tab-strip-item-padding);
  border: 1px solid var(--border-bright);
  border-top: 2px solid var(--border-bright);
  border-bottom: 1px solid transparent;
  border-radius: var(--tab-strip-item-radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--tab-strip-item-font-size);
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tab-strip-item:hover:not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([aria-disabled="true"]):not(:disabled),
.tab-strip-item:focus-visible:not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]) {
  border-color: var(--border-bright);
  border-top-color: var(--border-bright);
  border-bottom-color: transparent;
  background: transparent;
  color: var(--green);
  opacity: 0.96;
}

.tab-strip-item:focus,
.tab-strip-item:focus-visible {
  outline: none;
  box-shadow: none;
}

.tab-strip-item.is-active,
.tab-strip-item[aria-selected="true"],
.tab-strip-item[aria-pressed="true"] {
  border-color: var(--border-bright);
  border-top-color: color-mix(in srgb, var(--green) 55%, transparent);
  border-bottom-color: var(--tab-strip-active-bg);
  background: var(--tab-strip-active-bg);
  color: var(--green);
  opacity: 1;
}

.tab-strip-item.is-active:hover:not([aria-disabled="true"]):not(:disabled),
.tab-strip-item.is-active:active:not([aria-disabled="true"]):not(:disabled),
.tab-strip-item[aria-selected="true"]:hover:not([aria-disabled="true"]):not(:disabled),
.tab-strip-item[aria-pressed="true"]:hover:not([aria-disabled="true"]):not(:disabled) {
  border-color: var(--border-bright);
  border-top-color: color-mix(in srgb, var(--green) 55%, transparent);
  border-bottom-color: var(--tab-strip-active-bg);
  background: var(--tab-strip-active-bg);
  color: var(--green);
  opacity: 1;
}

.tab-strip-item[data-pressable-clearing="1"],
.tab-strip-item[data-pressable-clearing="1"]:hover:not([aria-disabled="true"]):not(:disabled) {
  border-color: var(--border-bright);
  border-top-color: var(--border-bright);
  border-bottom-color: transparent;
  background: transparent;
  color: var(--muted);
}

.tab-strip-item.is-active[data-pressable-clearing="1"],
.tab-strip-item[aria-selected="true"][data-pressable-clearing="1"],
.tab-strip-item[aria-pressed="true"][data-pressable-clearing="1"] {
  border-color: var(--border-bright);
  border-top-color: color-mix(in srgb, var(--green) 55%, transparent);
  border-bottom-color: var(--tab-strip-active-bg);
  background: var(--tab-strip-active-bg);
  color: var(--green);
}


/* /static/css/welcome.css */
/* darklab_shell CSS module: welcome
   Welcome animation, operator notice, and onboarding-specific presentation. */

/* ── Welcome typeout cursor ── */
.welcome-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  margin: 0 0 4px;
  padding: 0;
}
.welcome-banner > * {
  opacity: 0;
  transform: translateY(-1px);
}
.welcome-banner-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}
.welcome-operator-notice {
  align-self: center;
  width: min(100%, 72ch);
  margin: 0 0 8px;
  padding: 8px 14px 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, color-mix(in srgb, var(--blue) 8%, transparent));
  text-align: center;
  animation: welcome-operator-pulse 2.2s ease-in-out infinite;
}
.welcome-operator-label {
  color: color-mix(in srgb, var(--blue) 86%, var(--text));
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 4px;
}
.welcome-operator-body {
  color: color-mix(in srgb, var(--text) 94%, var(--blue));
  font-size: 13px;
  line-height: 1.45;
}
.welcome-operator-body a {
  color: var(--blue);
}
.welcome-operator-body code {
  font-family: var(--font-mono);
  color: var(--green);
}
.welcome-operator-body strong {
  color: var(--text);
}
.welcome-ascii-art {
  color: var(--theme-welcome-ascii-color, var(--green));
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.72vw + 3px, 12px);
  line-height: 1.04;
  letter-spacing: -0.12px;
  white-space: pre;
  text-shadow: var(--theme-welcome-ascii-text-shadow);
  margin: 2px 0 4px;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
  filter: var(--theme-welcome-ascii-filter);
}
.welcome-banner-settled .welcome-ascii-art {
  transform: translateY(-1px);
}
.welcome-banner-settled {
  margin-bottom: 8px;
}
.welcome-status-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  align-self: stretch;
}
.welcome-status-line {
  color: var(--blue);
  white-space: pre;
  line-height: 1.08;
  display: grid;
  grid-template-columns: 18ch auto;
  column-gap: 1.5ch;
  justify-content: start;
  width: fit-content;
  text-align: left;
  opacity: 0;
  transform: translateY(-1px);
  position: relative;
}
.welcome-status-label {
  color: var(--blue);
  text-transform: uppercase;
  min-width: 18ch;
  letter-spacing: 0.08em;
}
.welcome-status-label::before {
  content: '[';
  color: color-mix(in srgb, var(--blue) 55%, transparent);
  margin-right: 0.2ch;
}
.welcome-status-label::after {
  content: ']';
  color: color-mix(in srgb, var(--blue) 55%, transparent);
  margin-left: 0.2ch;
}
.welcome-status-loading {
  color: var(--muted);
  font-weight: 400;
  animation: welcome-soft-wait 1.35s ease-in-out infinite;
}
.welcome-status-loaded {
  color: color-mix(in srgb, var(--green) 82%, var(--text));
  font-weight: 700;
  animation: welcome-soft-pulse 1.8s ease-in-out infinite;
  text-shadow: 0 0 8px color-mix(in srgb, var(--green) 14%, transparent);
}
body .welcome-status-label {
  color: var(--blue);
}
body .welcome-status-label::before,
body .welcome-status-label::after {
  color: color-mix(in srgb, var(--blue) 45%, transparent);
}
body .welcome-status-loading {
  color: var(--muted);
}
body .welcome-status-loaded {
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  text-shadow: 0 0 8px color-mix(in srgb, var(--green) 10%, transparent);
}
.welcome-status-line-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}
.wlc-prompt {
  color: var(--blue);
  font-weight: 700;
  margin-right: 8px;
  font-size: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.welcome-command {
  margin-top: 1px;
  display: flex;
  align-items: baseline;
  white-space: pre;
  color: var(--text);
  font-size: 14px;
}
.welcome-command-loadable {
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 2px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.welcome-command-loadable:hover,
.welcome-command-loadable:focus-visible {
  background: var(--theme-welcome-command-hover-bg);
  box-shadow: var(--theme-welcome-command-hover-shadow);
  outline: none;
}
.welcome-command-static .welcome-command-text {
  cursor: default;
}
.welcome-command-text,
.wlc-command-text {
  color: var(--green);
  white-space: pre;
}
.welcome-output {
  color: var(--muted);
  margin-top: 1px;
}
.welcome-comment {
  color: var(--muted);
  white-space: pre-wrap;
  margin-top: 1px;
}
.welcome-command-comment {
  color: var(--muted);
  white-space: pre;
  margin-left: 10px;
}
.welcome-command-badge {
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
  flex: 0 0 auto;
}
.welcome-tour-cta {
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 8px;
  font-size: 14px;
}
.welcome-tour-cta-emphasis {
  color: color-mix(in srgb, var(--green) 84%, var(--text));
  text-shadow: 0 0 10px color-mix(in srgb, var(--green) 10%, transparent);
}
.welcome-tour-cta-demoted {
  color: var(--muted);
  opacity: 0.8;
}
.welcome-tour-cta-command {
  color: var(--green);
  font-weight: 700;
}
.welcome-tour-cta-visual {
  color: var(--green);
  font-weight: 700;
}

.tour-overlay.open {
  display: flex;
}

.tour-modal {
  width: min(920px, 94vw);
  height: min(620px, 86vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tour-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--theme-panel-border);
}

.tour-modal-eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tour-modal-title {
  color: var(--green);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 8px;
}

.tour-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1fr);
  gap: 26px;
  padding: 24px;
  overflow: auto;
}

.tour-modal-visual {
  min-width: 0;
}

.tour-visual-card {
  min-height: 260px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-panel-bg) 92%, var(--theme-bg));
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.tour-mini-line {
  display: block;
  color: var(--text);
  background: var(--theme-inline-surface-bg);
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  padding: 9px 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-mini-line.is-command,
.tour-mini-pill.is-green {
  color: var(--green);
}

.tour-mini-line.is-output {
  color: var(--text);
}

.tour-mini-line.is-exit-ok {
  color: var(--green);
  font-weight: 700;
}

.tour-mini-line.is-muted {
  color: var(--muted);
  background: transparent;
}

.tour-mini-line.is-added {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 46%, transparent);
}

.tour-mini-input-row,
.tour-mini-chip-row,
.tour-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tour-mini-row {
  justify-content: space-between;
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-inline-surface-bg);
  padding: 9px 11px;
}

.tour-mini-row .tour-mini-line {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.tour-history-entry {
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-inline-surface-bg);
  padding: 10px 12px;
  overflow: hidden;
}

.tour-history-entry.is-starred {
  border-left: 3px solid var(--amber);
  padding-left: 10px;
}

.tour-history-header,
.tour-history-meta,
.tour-history-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tour-history-header {
  gap: 8px;
  margin-bottom: 5px;
}

.tour-history-star {
  color: var(--muted);
  font-size: 25px;
  line-height: 1;
  transform: translateY(-2px);
}

.tour-history-star.is-starred {
  color: var(--amber);
}

.tour-history-command {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-history-meta {
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.tour-history-kind {
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
}

.tour-history-exit {
  color: var(--green);
  font-weight: 700;
}

.tour-history-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.tour-history-action {
  color: var(--text);
  border: 1px solid var(--theme-button-secondary-border);
  border-radius: 6px;
  background: var(--theme-button-secondary-bg);
  font-size: 12px;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.tour-mini-pill {
  flex: 0 0 auto;
  color: var(--muted);
  border: 1px solid var(--theme-button-secondary-border);
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1;
  white-space: nowrap;
}

.tour-mini-pill.is-root {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
}

.tour-atlas-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.tour-atlas-tab {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px 6px 0 0;
  background: var(--theme-inline-surface-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-atlas-tab.is-active {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, var(--theme-panel-border));
  border-top-width: 2px;
  background: color-mix(in srgb, var(--green) 10%, var(--theme-inline-surface-bg));
}

.tour-atlas-entity-card,
.tour-atlas-intel-card {
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-inline-surface-bg);
  min-width: 0;
}

.tour-atlas-entity-card {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.tour-atlas-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-atlas-meta {
  color: var(--muted);
  font-size: 13px;
}

.tour-atlas-intel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tour-atlas-intel-card {
  padding: 10px;
}

.tour-mini-menu {
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: var(--theme-dropdown-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.tour-mini-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tour-compare-run-grid,
.tour-compare-metrics,
.tour-compare-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tour-compare-run-card,
.tour-compare-metric,
.tour-compare-pane,
.tour-compare-findings {
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-inline-surface-bg);
  min-width: 0;
  overflow: hidden;
}

.tour-compare-run-card,
.tour-compare-metric,
.tour-compare-findings {
  padding: 9px 10px;
}

.tour-compare-label,
.tour-compare-meta,
.tour-compare-pane-title,
.tour-compare-findings-title {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.tour-compare-command,
.tour-compare-metric-value {
  display: block;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-compare-command {
  margin-top: 4px;
}

.tour-compare-meta {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.tour-compare-metric-value {
  margin-top: 4px;
}

.tour-compare-pane-title {
  border-bottom: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
  padding: 7px 9px;
}

.tour-compare-row,
.tour-compare-finding-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-panel-border) 64%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  padding: 5px 8px;
}

.tour-compare-row:last-child,
.tour-compare-finding-row:last-child {
  border-bottom: 0;
}

.tour-compare-row code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-compare-row.is-replace {
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}

.tour-compare-row.is-added,
.tour-compare-finding-row {
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.tour-compare-mark.is-added,
.tour-compare-row.is-added .tour-compare-mark,
.tour-compare-finding-row .tour-compare-mark {
  color: var(--green);
  font-weight: 700;
}

.tour-compare-findings {
  display: grid;
  gap: 0;
}

.tour-compare-findings-title {
  padding-bottom: 6px;
}

.tour-compare-finding-row {
  grid-template-columns: 18px minmax(0, 1fr);
  border-radius: 0;
  padding-left: 0;
}

.tour-compare-finding-row span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-modal-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tour-modal-summary {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.tour-modal-summary p {
  margin: 0 0 12px;
}

.tour-sample-host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tour-sample-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tour-sample-chip {
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
}

.tour-modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--theme-panel-border);
}

.tour-step-list,
.tour-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-step-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--theme-button-secondary-border);
  background: var(--theme-button-secondary-bg);
}

.tour-step-dot[aria-current="step"] {
  width: 26px;
  border-color: color-mix(in srgb, var(--green) 56%, transparent);
  background: color-mix(in srgb, var(--green) 22%, var(--theme-button-secondary-bg));
}

@media (max-width: 760px) {
  .tour-overlay {
    display: none !important;
  }
}
.line.wlc-live {
  opacity: 1;
}
.line.welcome-section-header {
  color: color-mix(in srgb, var(--green) 74%, var(--muted));
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.78;
}
.line.welcome-hint {
  color: var(--muted);
  font-style: italic;
  margin-top: 7px;
  margin-bottom: 9px;
  opacity: 0.92;
}
.line.welcome-hint + .shell-prompt-wrap {
  margin-top: 9px;
}
.welcome-hint-feed {
  opacity: 0;
  transition: opacity 220ms ease;
}
.welcome-hint-feed.welcome-hint-visible {
  opacity: 1;
}
.wlc-cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--green);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: wlc-blink 0.65s step-end infinite;
}

body.modal-overlay-active .welcome-operator-notice,
body.modal-overlay-active .welcome-status-loading,
body.modal-overlay-active .welcome-status-loaded,
body.modal-overlay-active .wlc-cursor {
  animation: none;
}

body.modal-overlay-active .welcome-status-loaded,
body.modal-overlay-active .wlc-cursor {
  opacity: 1;
}

@keyframes wlc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes welcome-soft-pulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
@keyframes welcome-operator-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 0%, transparent);
    border-color: color-mix(in srgb, var(--blue) 26%, var(--border));
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent),
      0 0 18px color-mix(in srgb, var(--blue) 10%, transparent);
    border-color: color-mix(in srgb, var(--blue) 36%, var(--border));
  }
}
@keyframes welcome-soft-wait {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 0.82; }
}
@media (max-width: 900px) {
  .welcome-banner {
    gap: 1px;
  }
  .welcome-operator-notice {
    width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px 9px;
  }
  .welcome-operator-label {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .welcome-operator-body {
    font-size: 12px;
    line-height: 1.4;
  }
  .welcome-ascii-art {
    font-size: clamp(7px, 1.6vw + 2px, 9px);
    margin-bottom: 4px;
  }
  .welcome-command {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .welcome-command-text,
  .wlc-command-text {
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .welcome-command-comment {
    display: block;
    margin-left: 0;
    flex: 1 0 100%;
    white-space: normal;
  }
  .welcome-command-badge {
    margin-left: 8px;
    align-self: flex-start;
  }
}


/* /static/css/shell-chrome.css */
/* darklab_shell CSS module: shell-chrome
   Desktop shell: left rail, tabbar, and bottom HUD.
   Mobile uses the stacked layout in mobile.css. */

@property --pulse-load-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lime;
}

@property --pulse-load-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.1;
}

@property --pulse-load-border-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.28;
}

@property --pulse-load-shadow-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.08;
}

/* ============================================================
   Shared helpers
   ============================================================ */

.tab-scroll::-webkit-scrollbar,
.tabbar-scroll::-webkit-scrollbar { height: 4px; }
.tab-scroll::-webkit-scrollbar-track,
.tabbar-scroll::-webkit-scrollbar-track { background: transparent; }
.tab-scroll::-webkit-scrollbar-thumb,
.tabbar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 120ms;
}
.tab-scroll:hover::-webkit-scrollbar-thumb,
.tabbar-scroll:hover::-webkit-scrollbar-thumb { background: var(--border-bright); }

/* Chrome buttons (search / ln / ts) — inline text w/ hover */
.chrome-btn {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 3px;
  color: var(--theme-toolbar-button-text, var(--muted));
  background: transparent;
  border: none;
  font-family: inherit;
  transition: background 120ms, color 120ms;
  user-select: none;
}
.chrome-btn:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--theme-toolbar-button-hover-text, var(--text));
}
.chrome-btn:active {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

/* ============================================================
   Desktop layout.  All rules scoped behind min-width: 601px so the
   mobile path in mobile.css is untouched.
   ============================================================ */

@media (min-width: 601px) {

  :root {
    --shell-top-chrome-height: 56px;
  }

  /* Body reset: the shell owns the full viewport. */
  body:not(.mobile-terminal-mode) {
    padding: 0;
    gap: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }

  /* The top header and recent-command chip row are owned by the rail on
     desktop. Scope to the main shell so the permalink and diag pages keep
     their own <header>. */
  body:not(.mobile-terminal-mode):not(.permalink-page):not(.diag-page) > header { display: none; }
  body:not(.mobile-terminal-mode):not(.permalink-page):not(.diag-page) > #history-row { display: none !important; }

  /* The per-tab footer is owned by the HUD on desktop. The footer stays in
     the DOM for the mobile path, which re-parents the tab panels into the
     mobile shell. */
  body:not(.mobile-terminal-mode) .terminal-actions { display: none !important; }

  /* Shell root — rail sits flush to the top edge; the main column owns the
     small top gutter above the tabbar. */
  .shell-root {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100vh;
    background: var(--bg);
  }

  /* ------------------------------------------------------------
     Left rail
     ------------------------------------------------------------ */

  .rail {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: var(--rail-w, 214px);
    min-height: 0;
    background: var(--theme-chrome-bg);
    border-right: 1px solid var(--border);
    transition: width 160ms ease;
    font-family: var(--font-mono);
  }
  .rail.rail-dragging { transition: none; }
  .rail.rail-collapsed { width: 44px; }

  .rail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 14px;
    height: var(--shell-top-chrome-height);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  .rail.rail-collapsed .rail-header {
    padding: 14px 0;
    justify-content: center;
  }

  .rail-wordmark {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .rail.rail-collapsed .rail-wordmark { display: none; }

  .rail-wordmark-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--green);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 0 8px color-mix(in srgb, var(--green) 18%, transparent);
  }
  .rail.rail-narrow-brand .rail-wordmark-title {
    font-size: 14px;
    letter-spacing: 0.25px;
  }
  .rail-wordmark-sub {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
  }

  .rail-collapse-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
  }
  .rail-collapse-btn:hover { color: var(--green); }

  /* Split area: Recent on top, optional splitter, optional spacer, Workflows on bottom. */
  .rail-split-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .rail.rail-collapsed .rail-split-area { display: none; }

  .rail-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Recent defaults to filling the area. */
  .rail-section-recent { flex: 1 1 auto; }

  /* When both sections are open, Recent is a user-sized fixed height
     (set via --recent-h on .rail-split-area by the JS controller). */
  .rail-split-area.both-open .rail-section-recent {
    flex: 0 0 auto;
    height: var(--recent-h, 50%);
  }

  /* When the user collapses the section header, the body collapses. */
  .rail-section.closed { flex: 0 0 auto; }
  .rail-section.closed .rail-section-body { display: none; }

  .rail-splitter {
    height: 6px;
    cursor: ns-resize;
    background: var(--border);
    border-top: 1px solid var(--theme-chrome-bg);
    border-bottom: 1px solid var(--theme-chrome-bg);
    position: relative;
    flex: 0 0 auto;
  }
  .rail-splitter[hidden] { display: none; }
  .rail-splitter::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 24px; height: 1px;
    background: var(--border-bright);
  }

  .rail-section-workflows { flex: 0 0 auto; }
  .rail-split-area.workflows-closed .rail-section-workflows {
    border-top: 1px solid var(--border);
  }
  .rail-split-area:not(.workflows-closed):not(.recent-fixed) .rail-section-workflows {
    flex: 1 1 auto;
  }
  .rail-split-area.recent-fixed .rail-section-workflows {
    flex: 1 1 auto;
  }

  /* Section header */
  .rail-section-header-row {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 16px;
  }
  .rail-section-header {
    padding: 10px 16px 4px;
    color: var(--muted);
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
  }
  .rail-section-header-row .rail-section-header {
    width: auto;
    flex: 1 1 auto;
    padding-right: 6px;
  }
  .rail-section-header-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    color: var(--muted);
    font-size: 10.5px;
    opacity: 0.6;
  }
  .rail-section-header-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  /* Rail section headers reuse the shared .disclosure-chev primitive with a
     tighter size so the rail's information density stays intact. Rotation
     is driven by the primitive's [aria-expanded="true"] selector, which
     bindDisclosure writes on the header button. A small translateY pulls
     the glyph onto the visual centerline of the uppercase label (the ▸
     codepoint renders in the upper half of its em-box); the expanded-state
     rule composes the nudge with the primitive's 90° rotation so both
     states share the same vertical offset. */
  .rail-section-header .disclosure-chev {
    font-size: 18px;
    width: 14px;
    opacity: 0.9;
    transform: translateY(2px);
  }
  .rail-section-header[aria-expanded="true"] .disclosure-chev {
    transform: translateY(2px) rotate(90deg);
  }
  .rail-section-count { font-size: 10.5px; opacity: 0.6; }
  .rail-section-header-meta .rail-section-count { opacity: 1; }
  .rail-section-header-action {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
  }
  .rail-section-header-action:hover,
  .rail-section-header-action:focus-visible {
    color: var(--text);
    outline: none;
  }

  .rail-section-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 6px;
    min-height: 0;
  }

  .rail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 18px 5px 16px;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    font-family: inherit;
    width: 100%;
    text-align: left;
  }
  .rail-item.starred { border-left-color: var(--amber); }
  .rail-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .rail-section-workflows .rail-item {
    align-items: center;
    white-space: nowrap;
  }
  .rail-section-workflows .rail-item .drill-chev {
    flex: 0 0 auto;
  }
  .rail-section-empty {
    padding: 5px 18px;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    opacity: 0.7;
  }

  /* Nav menu — always pinned at the bottom. */
  .rail-nav {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    background: var(--theme-chrome-bg);
    position: relative;
  }
  .rail.rail-collapsed .rail-nav { padding: 8px 0; }

  .rail-nav-item {
    padding: 6px 6px;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: transparent;
    border: none;
    font-family: inherit;
    text-decoration: none;
    text-align: left;
  }
  .rail.rail-collapsed .rail-nav-item {
    padding: 9px 0;
    justify-content: center;
  }
  .rail-nav-glyph {
    color: var(--border-bright);
    width: 14px;
    text-align: center;
    flex: 0 0 auto;
  }
  .rail-nav-item.has-project-target-discovery .rail-nav-glyph,
  .menu-item.has-project-target-discovery .menu-item-icon {
    color: var(--green);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--green) 55%, transparent));
  }
  .rail.rail-collapsed .rail-nav-item { color: var(--text); }
  .rail.rail-collapsed .rail-nav-item:hover .rail-nav-glyph { color: var(--green); }
  .rail.rail-collapsed .rail-nav-glyph {
    width: 22px;
    font-size: 20px;
    line-height: 1;
    color: var(--text);
  }
  .rail.rail-collapsed .rail-nav-label { display: none; }

  .rail-more-trigger[aria-expanded="true"] {
    color: var(--text);
    background: var(--theme-button-ghost-hover-bg);
  }
  .rail-more-trigger[aria-expanded="true"] .rail-nav-glyph {
    color: var(--green);
  }

  .rail-more-menu {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 62px;
    width: 220px;
    min-width: 0;
    padding: 7px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: visible;
    border-color: var(--border);
    border-radius: 4px;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--theme-panel-border) 50%, transparent),
      0 18px 42px var(--theme-panel-shadow);
  }
  .rail-more-menu::before {
    content: "";
    position: absolute;
    left: -5px;
    top: var(--rail-more-arrow-y, calc(100% - 32px));
    width: 8px;
    height: 8px;
    background: var(--theme-dropdown-bg);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
  }
  .rail-more-menu.u-hidden {
    display: none;
  }
  .rail-more-separator {
    display: block;
    height: 1px;
    margin: 5px 4px;
    background: color-mix(in srgb, var(--border) 82%, transparent);
  }
  .rail-more-menu .rail-nav-item {
    width: 100%;
    min-height: 32px;
    padding: 7px 10px;
    justify-content: flex-start;
    color: var(--muted);
    border-left: 2px solid transparent;
    border-radius: 3px;
    gap: 12px;
  }
  .rail-more-menu .rail-nav-item:hover,
  .rail-more-menu .rail-nav-item:focus-visible {
    color: var(--green);
    background: var(--theme-button-ghost-hover-bg);
    border-left-color: var(--green);
    outline: none;
  }
  .rail-more-menu .rail-nav-label {
    display: inline;
    color: inherit;
  }
  .rail-more-menu .rail-nav-glyph,
  .rail.rail-collapsed .rail-more-menu .rail-nav-glyph {
    width: 18px;
    font-size: 14px;
    color: color-mix(in srgb, var(--text) 54%, transparent);
  }
  .rail-more-menu .rail-nav-item:hover .rail-nav-glyph,
  .rail-more-menu .rail-nav-item:focus-visible .rail-nav-glyph {
    color: var(--green);
  }
  .rail.rail-collapsed .rail-more-menu {
    left: calc(100% + 8px);
    bottom: 58px;
  }
  .rail.rail-collapsed .rail-more-menu .rail-nav-item {
    padding: 7px 10px;
    justify-content: flex-start;
    color: var(--muted);
  }
  .rail.rail-collapsed .rail-more-menu .rail-nav-label {
    display: inline;
  }

  .rail-nav-version {
    margin-top: 6px;
    padding-top: 8px;
    padding-left: 6px;
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: 0.3px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
  }
  .rail.rail-collapsed .rail-nav-version { display: none; }

  .rail-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 2;
  }
  .rail.rail-collapsed .rail-resize-handle { display: none; }

  /* ------------------------------------------------------------
     Main column
     ------------------------------------------------------------ */

  .main-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  /* ---- Tab bar (reskinned .terminal-bar) ---- */
  .terminal-bar.tabbar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    height: var(--shell-top-chrome-height);
    background: var(--theme-chrome-bg);
    border-bottom: 1px solid var(--border);
    min-width: 0;
    flex: 0 0 auto;
  }

  .tabbar-scroll {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .terminal-bar.tabbar .tabs-scroll-btn {
    position: relative;
    align-self: stretch;
    min-width: 34px;
    min-height: 0;
    padding: 0 8px;
    border-radius: 0;
    background: var(--theme-chrome-bg);
    z-index: 1;
  }

  .terminal-bar.tabbar .tabs-scroll-btn:hover:not(:disabled) {
    background: var(--theme-chrome-bg);
    border-color: transparent;
  }

  .terminal-bar.tabbar .tabs-scroll-btn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
    opacity: 0.96;
  }

  .terminal-bar.tabbar #tabs-scroll-left::before {
    right: -18px;
    background: linear-gradient(to right, var(--theme-chrome-bg), transparent);
  }

  .terminal-bar.tabbar #tabs-scroll-right::before {
    left: -18px;
    background: linear-gradient(to left, var(--theme-chrome-bg), transparent);
  }

  .terminal-bar.tabbar .tabs-bar {
    padding: 4px 0 0;
    flex: 1 1 auto;
    background: transparent;
  }

  .tabbar-chrome {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    flex: 0 0 auto;
    border-left: 1px solid var(--border);
  }

  .tabbar-chrome .chrome-btn {
    font-size: 11px;
  }

  .tabbar-chrome-divider {
    align-self: stretch;
    width: 0;
    margin: 0 4px 0 8px;
    border-left: 1px solid var(--border);
    flex: 0 0 auto;
  }

  /* Collapsed chrome: hide the controls, keep the findings badge + toggle so the
     tab strip reclaims the width. The badge (#search-signal-summary) is not a
     .chrome-collapsible, so it stays visible when there are signals.
     !important is required because the controls (#search-toggle-btn, #ln-btn, …)
     set display via ID selectors, which a class-only rule cannot override. */
  .terminal-bar.tabbar.chrome-collapsed .chrome-collapsible {
    display: none !important;
  }

  /* Collapsed: keep the search button as a magnifier-only opener (drop its
     label, keep the ⌕ glyph from ::before) and strip its button border so it
     reads as a bare icon. Specificity (id + classes + pseudo) outranks the base
     #search-toggle-btn rules. */
  .terminal-bar.tabbar.chrome-collapsed #search-toggle-btn::after {
    display: none;
  }

  .terminal-bar.tabbar.chrome-collapsed #search-toggle-btn,
  .terminal-bar.tabbar.chrome-collapsed #search-toggle-btn:hover {
    border-color: transparent;
    background: transparent;
  }

  #tabbar-chrome-toggle {
    flex: 0 0 auto;
    min-width: 22px;
    margin-right: 2px;
    font-size: 13px;
    line-height: 1;
    color: var(--muted);
  }

  #tabbar-chrome-toggle:hover:not(:disabled) {
    color: var(--text);
  }

  /* ---- Terminal body container — strip the outer frame ---- */
  .main-col > .terminal-wrap {
    background: var(--bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .main-col > .terminal-wrap::before,
  .main-col > .terminal-wrap::after { display: none; }

  /* ------------------------------------------------------------
     HUD
     ------------------------------------------------------------ */

  .hud {
    display: flex;
    align-items: stretch;
    color: var(--muted);
    border-top: 1px solid var(--theme-chrome-divider-color);
    background: var(--theme-chrome-bg);
    flex: 0 0 auto;
    min-width: 0;
    font-family: var(--font-mono);
  }

  .hud-pills {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hud-pills::-webkit-scrollbar { display: none; }

  .hud-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 16px;
    border-right: 1px solid var(--theme-border-soft);
    flex: 0 0 auto;
    white-space: nowrap;
    position: relative;
    top: 0;
  }
  .hud-cell.hud-status,
  .hud-cell.hud-action-cell {
    cursor: pointer;
  }
  .hud-cell.hud-action-cell:hover,
  .hud-cell.hud-action-cell:focus-visible {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    outline: none;
  }
  .hud-cell.hud-action-cell:focus-visible {
    box-shadow: inset 0 0 0 1px var(--border-bright);
  }
  .hud-label {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .hud-value {
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .hud-project-context {
    max-width: 200px;
  }

  .hud-project-context .hud-value {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hud-project-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 260px;
    max-width: min(360px, calc(100vw - 16px));
    padding: 6px;
    border-radius: 3px 3px 0 0;
    z-index: 460;
  }

  .hud-project-menu.u-hidden {
    display: none;
  }

  .hud-project-menu .dropdown-item {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hud-project-search {
    background: var(--theme-dropdown-bg);
    border: 1px solid var(--theme-dropdown-border);
    border-radius: 3px;
    color: var(--text);
    font: inherit;
    margin: 2px 2px 6px;
    min-height: 30px;
    padding: 6px 8px;
    width: calc(100% - 4px);
  }

  .hud-project-search:focus-visible {
    border-color: var(--border-bright);
    outline: none;
  }

  .hud-project-menu-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow: auto;
  }

  .hud-project-menu-divider {
    border-top: 1px solid var(--theme-dropdown-border);
    margin: 6px 2px;
  }

  .hud-project-menu-note {
    color: var(--text-muted);
    font-size: 10px;
    padding: 6px 10px;
  }

  .hud-project-menu .dropdown-item[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .hud-scope-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    justify-content: flex-start;
    max-width: 150px;
    min-height: 20px;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
  }

  .hud-scope-trigger:hover,
  .hud-scope-trigger:focus-visible {
    color: var(--green);
    outline: none;
  }

  .hud-scope-trigger.is-loading span {
    color: var(--muted);
    font-style: italic;
  }

  .hud-scope-trigger.is-error span {
    color: var(--red);
  }

  .hud-scope-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hud-value-green {
    color: var(--green);
    text-shadow: 0 0 8px color-mix(in srgb, var(--green) 22%, transparent);
  }
  .hud-value-amber {
    color: var(--amber);
    text-shadow: 0 0 8px color-mix(in srgb, var(--amber) 22%, transparent);
  }
  .hud-value-red {
    color: var(--red);
    text-shadow: 0 0 8px color-mix(in srgb, var(--red) 22%, transparent);
  }
  .hud-muted {
    color: var(--muted);
    opacity: 0.85;
  }
  .hud-value-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex: 0 0 6px;
  }
  .hud-muted.hud-value-dot::before { box-shadow: none; }

  /* Status pill living inside a HUD cell sheds its pill chrome. */
  .hud-cell .status-pill {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
    border-radius: 0;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: none !important;
    animation: none;
  }
  /* STATUS is a binary running-or-not pill in the HUD; any non-running class
     (idle/ok/fail/killed) renders identically as muted text so the outcome
     colour lives on the adjacent LAST EXIT pill, not here. */
  .hud-cell .status-pill.idle,
  .hud-cell .status-pill.ok,
  .hud-cell .status-pill.fail,
  .hud-cell .status-pill.killed {
    color: var(--muted);
    text-shadow: none;
    animation: none;
  }
  .hud-cell .status-pill.running {
    color: var(--amber);
    text-shadow: 0 0 8px color-mix(in srgb, var(--amber) 22%, transparent);
    animation: hud-status-pulse 1s ease-in-out infinite;
  }
  body.modal-overlay-active .hud-cell .status-pill.running {
    animation: none;
    opacity: 1;
  }
  @keyframes hud-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  /* Runtime counter rides alongside STATUS inside the same HUD cell: the
     wrapper keeps them on one line and the ::before injects " - " only when
     the timer has text (running state). */
  .hud-status-value-row {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
  }
  .hud-cell .run-timer {
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--amber);
    text-shadow: 0 0 8px color-mix(in srgb, var(--amber) 22%, transparent);
    background: transparent;
    border: none;
    padding: 0;
  }
  .hud-cell .run-timer:not(:empty)::before {
    content: " - ";
    white-space: pre;
    color: var(--amber);
  }

  .hud-spacer { flex: 1 1 auto; }

  .hud-actions {
    display: flex;
    padding: 10px 14px;
    border-left: 1px solid var(--theme-border-soft);
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
    position: relative;
  }

  /* HUD save menu — drops UP above the bottom bar. */
  .hud-save-wrap { position: relative; }
  .hud-save-wrap .save-menu {
    position: absolute;
    bottom: calc(100% - 1px);
    right: 0;
    display: none;
    flex-direction: column;
    border-radius: 3px 3px 0 0;
    padding: 4px;
    min-width: 160px;
    z-index: 20;
  }
  .hud-save-wrap.open .save-menu { display: flex; }
}


/* /static/css/mobile.css */
/* darklab_shell CSS module: mobile
   Mobile composer, mobile shell layout, bottom sheets, and viewport-specific overrides. */

/* ── Mobile composer (hidden on desktop; shown inside mobile mode/media rules) ── */
#mobile-composer {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
  background: var(--surface);
  border-top: none;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}

#mobile-composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.mobile-prompt-label {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 13px;
  flex-shrink: 0;
  user-select: none;
}

#mobile-cmd {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-bright);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--terminal-font-size);
  padding: 6px 0;
  outline: none;
  caret-color: var(--green);
}

#mobile-cmd::placeholder {
  color: color-mix(in srgb, var(--blue) 45%, transparent);
}

/* Suppress the search-clear (×) button Chrome adds to type="search" inputs */
#mobile-cmd::-webkit-search-cancel-button {
  display: none;
}

#mobile-run-btn {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green-dim);
  font-size: 12px;
  padding: 0 14px;
  flex-shrink: 0;
  min-height: 34px;
}

#mobile-run-btn:active {
  background: var(--green-dim);
}

#mobile-run-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#mobile-run-btn,
#mobile-kill-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  /* 100svh = small (stable) viewport height. 100vh on Chrome/Safari iOS equals
     the *large* viewport (address bar hidden), making the body taller than the
     visible area on first load and pushing #mobile-composer below the fold. */
  body { padding: 12px; gap: 12px; position: relative; min-height: 100vh; min-height: 100svh; }
  header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--theme-chrome-bg);
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: 0px;
    min-height: 60px;
  }
  header h1 {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1;
    min-height: 0;
    padding: 5px 12px;
  }
  .history-row {
    background: var(--surface);
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    margin-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .history-row::-webkit-scrollbar { display: none; }
  .history-label { flex: 0 0 auto; }
  #hamburger-btn { display: block; }
  #mobile-header-actions { display: none; }
  .hist-chip { max-width: 140px; flex: 0 0 auto; }
  .tabs-bar { padding: 0 8px; }
  .tab { padding: 6px 8px; font-size: 10px; }
  .search-bar { flex-wrap: wrap; }
  body.mobile-terminal-mode .terminal-wrap {
    display: none;
  }
  body.mobile-terminal-mode #mobile-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    position: relative;
  }
  body.mobile-terminal-mode #mobile-shell-chrome {
    flex: 0 0 auto;
    overflow: visible;
  }
  body.mobile-terminal-mode #mobile-shell-transcript {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }
  body.mobile-terminal-mode #mobile-shell-composer {
    position: relative;
    margin-top: auto;
    z-index: 40;
    padding: 8px 12px env(safe-area-inset-bottom);
    background: transparent;
  }
  body.mobile-terminal-mode #mobile-composer-host {
    padding: 0;
    background: transparent;
  }
  body.mobile-terminal-mode #mobile-composer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    position: relative;
  }
  body.mobile-terminal-mode #mobile-shell-composer #mobile-composer {
    display: flex;
    margin-bottom: 0;
    border: 1px solid var(--theme-panel-border);
    border-radius: 12px;
    background: var(--theme-panel-bg);
    box-shadow: 0 10px 30px var(--theme-panel-shadow);
  }
  /* Mobile session bar: hide desktop-only chrome and enlarge touch targets */
  body.mobile-terminal-mode .terminal-bar {
    padding: 6px 10px 0;
    align-items: flex-end;
    gap: 0;
    background: var(--theme-chrome-bg);
    border-bottom-color: var(--theme-chrome-divider-color);
  }
  body.mobile-terminal-mode .terminal-bar .tabs-scroll-btn {
    display: none;
  }
  body.mobile-terminal-mode .terminal-bar .tabs-bar {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* ── Mobile tab bar ──
     Rounded-top pill tabs with drag grip, active-only close, and inset green
     glow on active. */
  body.mobile-terminal-mode .tabs-bar {
    background: var(--theme-chrome-bg);
    border-bottom: 1px solid var(--theme-chrome-divider-color);
    gap: 6px;
    padding: 6px 10px 0;
  }
  /* Shared geometry for every mobile tab. isolation: isolate puts every tab
     on its own compositor layer to stop iOS Safari from smearing the active
     tab's bright green border-top across adjacent tabs at 3x DPR. */
  body.mobile-terminal-mode .terminal-bar .tab {
    min-height: 40px;
    padding: 9px 12px;
    gap: 6px;
    font-size: 11px;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
    isolation: isolate;
  }
  /* Inactive appearance — mirrors active's specificity via :not(.active) so
     the two rules don't race through the cascade (base components.css
     .tab.active provides active box-shadow/background that would otherwise
     bleed in unless explicitly reset here). The 2px transparent border-top
     keeps inactive and active tabs visually aligned (the active tab carries
     a 2px green border-top instead of an inset shadow to avoid Safari
     subpixel halos that bleed onto adjacent tabs at 3x DPR). */
  body.mobile-terminal-mode .terminal-bar .tab:not(.active) {
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border-bright);
    border-top: 2px solid var(--border-bright);
    border-bottom: 1px solid transparent;
    box-shadow: none !important;
  }
  body.mobile-terminal-mode .terminal-bar .tab:hover:not(.active) {
    color: var(--green);
  }
  body.mobile-terminal-mode .terminal-bar .tab.active {
    color: var(--green);
    background: var(--theme-tab-active-bg);
    border: 1px solid var(--border-bright);
    border-top: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
    border-bottom-color: var(--theme-tab-active-bg);
    box-shadow: none;
  }
  /* Inactive tabs collapse idle/ok/fail/killed to border-bright so only the
     one active tab carries semantic color. Running stays amber-pulse on every
     tab so a background run remains visible at a glance. */
  body.mobile-terminal-mode .tab .tab-status { width: 5px; height: 5px; }
  body.mobile-terminal-mode .tab:not(.active) .tab-status.idle,
  body.mobile-terminal-mode .tab:not(.active) .tab-status.ok,
  body.mobile-terminal-mode .tab:not(.active) .tab-status.fail,
  body.mobile-terminal-mode .tab:not(.active) .tab-status.killed {
    background: var(--border-bright);
  }
  body.mobile-terminal-mode .tab.active .tab-status.idle,
  body.mobile-terminal-mode .tab.active .tab-status.ok {
    background: var(--green);
  }
  /* Close renders on every tab for DOM symmetry but only reveals on active. */
  body.mobile-terminal-mode .tab .tab-close {
    width: 16px;
    height: 16px;
    font-size: 13px;
    line-height: 14px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--border-bright) 60%, transparent);
    opacity: 0;
    pointer-events: none;
  }
  body.mobile-terminal-mode .tab.active .tab-close {
    opacity: 0.55;
    pointer-events: auto;
  }
  body.mobile-terminal-mode .tab.active .tab-close:hover,
  body.mobile-terminal-mode .tab.active .tab-close:active {
    opacity: 1;
  }
  /* Flat glyph, not a bordered button. */
  body.mobile-terminal-mode .terminal-bar #new-tab-btn {
    min-height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--muted);
    background: transparent;
    border: none;
    align-self: stretch;
    margin-bottom: -1px;
  }
  body.mobile-terminal-mode .terminal-bar .status-pill {
    font-size: 9px;
    padding: 2px 6px;
  }
  body.mobile-terminal-mode header .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-left: 0;
    font-size: 11px;
    line-height: 1;
    padding: 3px 9px;
    min-height: 26px;
    letter-spacing: 0.9px;
    margin-right: 6px;
    transform: none;
    animation: none;
  }
  body.mobile-terminal-mode header {
    align-items: center;
    gap: 8px;
    z-index: 90;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--theme-chrome-bg);
  }
  body.mobile-terminal-mode #mobile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-left: auto;
    flex: 0 0 auto;
    /* Suppress double-tap-to-zoom on the hamburger wrapper. The button itself
       also sets this, but the wrapper has non-zero width past the button's
       negative margin — a double tap landing there would otherwise zoom. */
    touch-action: manipulation;
  }
  body.mobile-terminal-mode header h1 {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    margin-left: 0;
    min-height: 0;
    padding: 0;
    font-size: 18px;
    letter-spacing: 1.5px;
  }
  body.mobile-terminal-mode header h1 #header-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 0 10px;
    color: var(--green);
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: 0 0 20px var(--green-glow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.mobile-terminal-mode #run-timer {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px !important;
    line-height: 1;
    align-self: center;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 48px;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    text-align: center;
  }
  body.mobile-terminal-mode #hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    margin-left: 0;
    margin-right: -12px;
    margin-top: -6px;
    transform: scaleX(1.08);
  }
  body.mobile-terminal-mode .tabs-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-color: transparent transparent;
    border-bottom: none;
  }
  body.mobile-terminal-mode .tabs-bar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  body.mobile-terminal-mode .tab {
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* ── Running-state indicator ──
     The mobile status pill reflects only the active tab, so a long
     run on a backgrounded tab is otherwise invisible. Two signals
     cover this: a trailing chip that shows the count of running
     non-active tabs (tap cycles through them in tab-row order), plus
     left/right edge glows that pulse when one of those tabs is
     currently scrolled off-screen on that side.

     Color tracks --amber so both read as the same "running" signal as
     the .status-pill.running and .tab-status.running dots.

     Geometry: the chip is a normal flex child appended after .tabs-bar,
     so the flex layout naturally reserves its space. The edge glows
     are position:fixed overlays anchored via JS-computed coordinates
     from .tabs-bar.getBoundingClientRect() — never children of the
     scroll container or its flex parent, so they can't destabilise
     iOS Safari momentum scrolling (sticky inside a horizontal flex
     scroll and absolute children of a position:relative flex parent
     both regressed scroll in empirical testing on 2026-04-19). */
  body.mobile-terminal-mode .mobile-running-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    align-self: center;
    height: 22px;
    margin: 0 10px 6px 4px;
    padding: 0 9px 0 8px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--amber) 12%, var(--theme-chrome-bg));
    border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--theme-panel-shadow) 70%, transparent);
  }
  body.mobile-terminal-mode .mobile-running-chip.u-hidden {
    display: none;
  }
  body.mobile-terminal-mode .mobile-running-dot {
    font-size: 9px;
    line-height: 1;
    color: var(--amber);
    animation: shell-m-pulse 1.4s ease-in-out infinite;
  }
  body.mobile-terminal-mode .mobile-running-count {
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .tab-edge-glow {
    position: fixed;
    width: 22px;
    pointer-events: none;
    display: none;
    z-index: 5;
  }
  .tab-edge-glow.is-active {
    display: block;
    animation: shell-m-pulse 1.6s ease-in-out infinite;
  }
  .tab-edge-glow-left {
    background: linear-gradient(to right,
      color-mix(in srgb, var(--amber) 55%, transparent),
      transparent);
  }
  .tab-edge-glow-right {
    background: linear-gradient(to left,
      color-mix(in srgb, var(--amber) 55%, transparent),
      transparent);
  }
  body.mobile-terminal-mode .terminal-actions .btn:focus,
  body.mobile-terminal-mode .terminal-actions .btn:focus-visible {
    outline: none;
    box-shadow: none;
    color: var(--muted);
    border-color: var(--border-bright);
    background: transparent;
  }
  body.mobile-terminal-mode .terminal-actions .btn:hover,
  body.mobile-terminal-mode .terminal-actions .btn:active {
    color: var(--muted);
    border-color: var(--border-bright);
    background: transparent;
  }
  body.mobile-terminal-mode .terminal-actions {
    padding: 5px 10px;
    gap: 4px;
  }
  body.mobile-terminal-mode .history-entry {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  body.mobile-terminal-mode .history-entry-header {
    gap: 10px;
  }
  body.mobile-terminal-mode .history-entry-star {
    width: auto;
    height: auto;
    flex-basis: auto;
    font-size: 30px;
    padding-right: 2px;
  }
  body.mobile-terminal-mode .history-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }
  body.mobile-terminal-mode .history-action-menu-wrap {
    min-width: 0;
  }
  body.mobile-terminal-mode .history-action-btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Kill lives in the mobile composer (see #mobile-kill-btn) so the per-tab
     action-bar duplicate is redundant on mobile. */
  body.mobile-terminal-mode .terminal-actions .tab-kill-btn { display: none !important; }
  /* Clear moves into the hamburger menu on mobile (data-menu-action="clear")
     so the per-tab action row keeps its three high-frequency actions (share
     snapshot · copy · save ▾) fitting cleanly at narrow widths. Clear is a
     recovery action rather than an in-flow one; keeping it one extra tap away
     mirrors the kill-button move above. */
  body.mobile-terminal-mode .terminal-actions [data-action="clear"] { display: none !important; }

  /* Mobile sheet contract: overlay wrappers opt into bottom-sheet alignment
     via .mobile-sheet-overlay instead of per-surface ID selectors. */
  body.mobile-terminal-mode .mobile-sheet-overlay,
  body.mobile-terminal-mode .mobile-sheet-overlay.open,
  body.mobile-terminal-mode #theme-overlay {
    align-items: flex-end !important;
    justify-content: stretch !important;
  }
  body.mobile-terminal-mode .history-run-overlay {
    padding-block: 0 !important;
  }
  body.mobile-terminal-mode #theme-overlay {
    align-items: stretch;
    justify-content: stretch;
  }
  body.mobile-terminal-mode .mobile-sheet-surface,
  body.mobile-terminal-mode .modal-card-compact {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    max-height: 88svh !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.mobile-terminal-mode .mobile-sheet-surface:not(.modal-card-compact) {
    min-height: 56svh;
  }
  body.mobile-terminal-mode .action-sheet {
    height: auto !important;
    min-height: 0 !important;
    max-height: 88svh !important;
    padding-bottom: 0 !important;
  }
  body.mobile-terminal-mode .modal-card-compact {
    width: calc(100% - 24px);
    max-width: min(520px, calc(100% - 24px));
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-radius: 14px;
    margin: 0 auto 12px;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0));
  }
  body.mobile-terminal-mode .mobile-sheet-surface .close-btn {
    display: none !important;
  }
  body.mobile-terminal-mode .modal-token-input,
  body.mobile-terminal-mode .options-token-input {
    font-size: 16px;
    line-height: 1.35;
  }
  body.mobile-terminal-mode #workspace-path-input,
  body.mobile-terminal-mode #workspace-labels-input,
  body.mobile-terminal-mode #workspace-notes-input,
  body.mobile-terminal-mode #workspace-text-input,
  body.mobile-terminal-mode .workspace-folder-form .form-input {
    font-size: 16px;
    line-height: 1.35;
  }
  body.mobile-terminal-mode #workspace-viewer-overlay {
    box-sizing: border-box;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0));
  }
  body.mobile-terminal-mode #workspace-viewer {
    border-bottom: 1px solid var(--theme-panel-border) !important;
    box-sizing: border-box;
    height: min(88svh, calc(100dvh - 16px - env(safe-area-inset-bottom, 0)));
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0)) !important;
    min-height: 0 !important;
    overflow: hidden;
    padding-bottom: 12px;
  }
  body.mobile-terminal-mode #workspace-viewer .workspace-viewer-header,
  body.mobile-terminal-mode #workspace-viewer-controls {
    flex: 0 0 auto;
  }
  body.mobile-terminal-mode #workspace-viewer-text {
    box-sizing: border-box;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
  }
  body.mobile-terminal-mode #theme-modal {
    align-self: stretch;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  /* Modal bodies: flex: 1 + min-height: 0 lets the child shrink below content
     height so max-height on the modal actually constrains it; -webkit-overflow-
     scrolling enables inertia scroll on iOS Safari. */
  body.mobile-terminal-mode .faq-body,
body.mobile-terminal-mode .command-registry-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-terminal-mode .command-registry-toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  body.mobile-terminal-mode .command-registry-body {
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0));
  }
  body.mobile-terminal-mode .command-registry-row {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 11px 12px;
  }
  body.mobile-terminal-mode .command-registry-root {
    grid-column: 1;
  }
  body.mobile-terminal-mode .command-registry-text {
    grid-column: 1 / -1;
  }
  body.mobile-terminal-mode .command-registry-chev {
    grid-column: 2;
    grid-row: 1;
  }
  body.mobile-terminal-mode .mobile-sheet-surface::before,
  body.mobile-terminal-mode #theme-modal::before,
  body.mobile-terminal-mode .modal-card-compact::before {
    display: none;
  }
  body.mobile-terminal-mode #theme-modal::before {
    display: none;
  }
  body.mobile-terminal-mode #history-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88svh;
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -4px 32px var(--theme-chrome-shadow);
    z-index: 310;
  }
  body.mobile-terminal-mode #history-panel::before {
    display: none;
  }
  body.mobile-terminal-mode .history-run-modal {
    height: 82svh;
    max-height: 88svh;
  }
  body.mobile-terminal-mode .app-select-menu .dropdown-item,
body.mobile-terminal-mode .save-menu.dropdown-surface .dropdown-item,
body.mobile-terminal-mode .sheet-filter-menu.dropdown-surface .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }
  body.mobile-terminal-mode .history-panel-header {
    padding: 12px 16px;
  }
  body.mobile-terminal-mode .history-panel-body {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }
  body.mobile-terminal-mode .history-panel-filters {
    padding: 10px 14px;
    gap: 10px;
    align-items: stretch;
  }
  body.mobile-terminal-mode .history-mobile-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    font-size: 14px;
    flex: 1 1 100%;
  }
  body.mobile-terminal-mode #history-panel:not(.mobile-history-tools-open) #history-search-input,
  body.mobile-terminal-mode #history-panel:not(.mobile-history-tools-open) .history-bulk-toolbar {
    display: none;
  }
  body.mobile-terminal-mode .history-advanced-filters {
    display: none;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  body.mobile-terminal-mode #history-panel.mobile-history-tools-open .history-advanced-filters {
    display: flex;
  }
  body.mobile-terminal-mode .history-active-filters {
    padding: 10px 14px;
  }
  body.mobile-terminal-mode .history-bulk-toolbar {
    padding: 10px 14px;
  }
  body.mobile-terminal-mode .history-bulk-toggle {
    min-height: 40px;
    font-size: 16px;
  }
  body.mobile-terminal-mode .history-pagination {
    padding: 10px 14px;
    flex-direction: column;
    align-items: stretch;
  }
  body.mobile-terminal-mode .history-pagination-summary {
    white-space: normal;
    line-height: 1.35;
    font-size: 12px;
  }
  body.mobile-terminal-mode .history-pagination-controls {
    grid-template-columns: max-content minmax(96px, auto) max-content;
  }
  body.mobile-terminal-mode .history-pagination-status {
    font-size: 11px;
    min-width: 96px;
  }
  body.mobile-terminal-mode .history-panel-filters input,
  body.mobile-terminal-mode .history-panel-filters select,
  body.mobile-terminal-mode .history-panel-filters .app-select,
  body.mobile-terminal-mode .history-panel-filters .app-select-trigger,
  body.mobile-terminal-mode .history-filter-toggle,
  body.mobile-terminal-mode .history-filter-clear-btn {
    min-height: 40px;
    font-size: 16px;
  }
  body.mobile-terminal-mode #history-search-input,
  body.mobile-terminal-mode #history-mobile-filters-toggle,
  body.mobile-terminal-mode .history-root-autocomplete,
  body.mobile-terminal-mode #history-root-input,
  body.mobile-terminal-mode #history-entity-input,
  body.mobile-terminal-mode #history-exit-filter,
  body.mobile-terminal-mode #history-date-filter,
  body.mobile-terminal-mode .history-filter-toggle,
  body.mobile-terminal-mode .history-filter-clear-btn {
    flex: 1 1 100%;
  }
  body.mobile-terminal-mode .options-body .app-select,
  body.mobile-terminal-mode .options-body .app-select-trigger {
    width: 100%;
    font-size: 16px;
  }
  body.mobile-terminal-mode .options-body .app-select-trigger {
    min-height: 44px;
  }
  body.mobile-terminal-mode .history-root-dropdown {
    border-radius: 6px;
    max-height: 220px;
    z-index: 6;
  }
  body.mobile-terminal-mode .history-root-dropdown .ac-item {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  body.mobile-terminal-mode .history-filter-clear-btn {
    margin-left: 0;
  }
  body.mobile-terminal-mode .history-active-filter-chip {
    min-height: 34px;
    font-size: 12px;
  }
  body.mobile-terminal-mode #history-list {
    padding: 8px 0 0;
  }
  body.mobile-terminal-mode #theme-modal .faq-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--theme-modal-bg);
  }
  body.mobile-terminal-mode .form-check {
    min-height: 44px;
    padding: 8px 0;
  }
  body.mobile-terminal-mode .theme-picker-grid {
    gap: 12px;
  }
  body.mobile-terminal-mode .theme-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0));
  }
  body.mobile-terminal-mode .theme-picker-group-grid {
    grid-template-columns: repeat(var(--theme-picker-columns-mobile, 1), minmax(0, 1fr));
    gap: 10px;
  }
  body.mobile-terminal-mode .options-desktop-only {
    display: none;
  }
  body.mobile-terminal-mode .theme-card {
    min-height: 176px;
  }

  /* Mobile search bar: larger touch targets and font. The input takes its own
     row and the controls (toggles + counter + nav + close) cluster on a second
     row — `.close-btn` carries `margin-left: auto` from the close primitive so
     it sits at the right edge of that row, with toggles/counter/nav packed
     left. Matches the iOS Safari find-on-page layout. */
  body.mobile-terminal-mode .search-bar {
    padding: 8px 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  body.mobile-terminal-mode .search-bar input {
    font-size: 16px;
    padding: 6px 10px;
    min-height: 32px;
    flex: 1 1 100%;
  }
  body.mobile-terminal-mode .search-signal-summary {
    display: none;
  }
  body.mobile-terminal-mode .search-count {
    font-size: 13px;
    flex: 0 0 auto;
  }
  body.mobile-terminal-mode .search-scopes {
    flex-wrap: wrap;
    width: 100%;
  }
  body.mobile-terminal-mode .search-scopes .search-scope-btn {
    min-height: 28px;
    padding: 0 8px;
    font-size: 13px;
  }
  body.mobile-terminal-mode .search-nav button {
    min-height: 28px;
    padding: 0 10px;
    font-size: 16px;
  }
  body.mobile-terminal-mode .search-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    font-size: 16px;
    flex: 0 0 auto;
  }
  body.mobile-terminal-mode .search-toggles button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 13px;
  }

  /* Make terminal-wrap fill remaining viewport on mobile */
  .terminal-wrap {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Keep the desktop prompt hidden while the dedicated mobile shell is active. */
  .shell-prompt-wrap {
    display: none;
  }

  #mobile-cmd {
    font-size: 16px;
  }

}

/* ── Landscape orientation block ── */
/* Hidden by default; shown only on touch devices in landscape with short viewports
   (phones). Tablets and desktops are excluded by the max-height: 500px guard. */
#landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#landscape-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}
#landscape-icon {
  font-size: 48px;
  line-height: 1;
  animation: landscape-spin 2s ease-in-out infinite;
  display: inline-block;
}
#landscape-text {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.05em;
}
@keyframes landscape-spin {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-90deg); }
  60%  { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  #landscape-overlay { display: flex; }
}


/* /static/css/features/projects.css */
/* Projects modal, mobile project workspace, entity editors, compare picker, and package wizard. */

/* Extracted from shell.css */



#project-workspace-modal {
  width: min(1180px, 96vw);
  height: min(820px, 88vh);
}



.project-workspace-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0;
}



.project-workspace-create,
.project-notes-form,
.project-labels-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
}



.project-workspace-create {
  border-bottom: 1px solid var(--theme-panel-border);
}



.project-notes-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 0;
}



.project-labels-form {
  align-items: center;
  padding: 0;
}



.project-notes-form.u-hidden,
.project-labels-form.u-hidden {
  display: none;
}



.project-target-editor-overlay {
  z-index: 360;
}

.project-entity-editor-overlay {
  z-index: 380;
}



.project-target-editor-overlay.open,
.project-package-manifest-overlay.open,
.project-package-wizard-overlay.open,
.project-entity-editor-overlay.open {
  display: flex;
}



.project-target-editor-modal,
.project-entity-editor-modal {
  width: min(560px, calc(100vw - 32px));
}



.project-package-manifest-overlay {
  z-index: 360;
}



.project-package-wizard-overlay {
  z-index: 360;
}



.project-package-manifest-modal {
  width: min(720px, calc(100vw - 32px));
}



.project-package-wizard-modal {
  width: min(980px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 40px));
}



#project-package-wizard-body {
  min-height: 0;
  height: 100%;
}



.project-package-manifest-json {
  max-height: min(60vh, 520px);
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.project-package-manifest-summary {
  margin: 0 0 10px;
}

.project-provenance-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.project-provenance-summary h3 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-provenance-summary-rows {
  display: grid;
  gap: 6px;
}

.project-provenance-summary-row {
  display: grid;
  grid-template-columns: minmax(92px, max-content) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
}

.project-provenance-summary-row strong {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}



.project-target-editor-form {
  display: grid;
  gap: 12px;
}



.project-target-editor-form .form-control,
.project-target-editor-form .form-select {
  width: 100%;
}



.project-entity-editor-subtitle {
  max-width: 440px;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-entity-activity {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.project-entity-activity:empty {
  display: none;
}

.project-entity-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.project-entity-activity-header span {
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-entity-activity-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-entity-activity-row {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-entity-activity-main,
.project-entity-activity-meta,
.project-entity-activity-empty {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-entity-activity-main {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.project-entity-activity-main strong {
  flex: 0 0 auto;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
}

.project-entity-activity-main span,
.project-entity-activity-meta,
.project-entity-activity-empty {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
}

.project-entity-activity-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.project-notes-input {
  min-height: 76px;
  resize: vertical;
}



.project-workspace-message {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 16px 0;
  padding: 8px 10px;
  border: 1px solid var(--green-dim);
  border-radius: 6px;
  color: var(--green);
  background: var(--green-glow);
  font-family: var(--font-mono);
  font-size: 12px;
}



.project-workspace-message.u-hidden {
  display: none;
}



.project-workspace-message-text {
  min-width: 0;
  overflow-wrap: anywhere;
}



.project-workspace-message-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: -3px -5px -3px 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}



.project-workspace-message-dismiss:hover,
.project-workspace-message-dismiss:focus-visible {
  background: var(--theme-button-ghost-hover-bg);
}



.project-workspace-message-dismiss:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}



.project-workspace-message.is-error {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-glow);
}



.project-workspace-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}



.project-mobile-root {
  display: none;
}



.project-mobile-list-view,
.project-mobile-create-sheet,
.project-mobile-detail-view {
  flex: 1 1 auto;
  min-height: 0;
}



.project-mobile-list-view,
.project-mobile-detail-view {
  display: flex;
  flex-direction: column;
}



.project-mobile-create-sheet {
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}



.project-mobile-create-sheet:not(.u-hidden) {
  display: flex;
}



.project-mobile-header,
.project-mobile-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--theme-panel-border);
}



.project-mobile-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}



.project-mobile-kicker,
.project-mobile-section-heading {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}



.project-mobile-summary {
  color: var(--muted);
  font-size: 12px;
}



.project-mobile-body {
  display: grid;
  gap: 10px;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  align-content: start;
}



.project-mobile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--theme-panel-border);
}



.project-mobile-section-heading:first-child {
  border-top: 0;
  padding-top: 0;
}



.project-mobile-row {
  display: grid;
  grid-template-areas:
    "title affordances"
    "counts affordances";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  color: var(--text);
}



.project-mobile-row-main {
  display: flex;
  grid-area: title;
  align-items: baseline;
  gap: 10px;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}



.project-mobile-row:hover {
  border-color: var(--green-dim);
  background: var(--theme-chrome-row-hover-bg);
}



.project-mobile-row:focus-within,
.project-mobile-row.is-selected {
  border-color: var(--green);
}



.project-mobile-row.is-selected {
  box-shadow: inset 0 0 0 1px var(--green-dim);
}



.project-mobile-title-row {
  display: contents;
  min-width: 0;
}



.project-mobile-title-target {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  padding: 2px 8px;
  text-align: left;
  pointer-events: none;
}



.project-mobile-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 700;
}



.project-mobile-label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}



.project-mobile-counts {
  display: flex;
  grid-area: counts;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}



.project-mobile-count-chip {
  min-height: 26px;
  padding: 3px 7px;
  border-color: var(--border);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
}



.project-mobile-empty-hint {
  color: var(--muted);
  font-size: 12px;
}



.project-mobile-affordances {
  display: flex;
  grid-area: affordances;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  justify-content: flex-start;
}



.project-mobile-summary-menu-btn,
.project-mobile-menu-btn {
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}



.project-mobile-summary-menu-btn:hover:not([aria-disabled="true"]):not(:disabled),
.project-mobile-menu-btn:hover:not([aria-disabled="true"]):not(:disabled),
.project-mobile-row-menu-trigger:hover:not([aria-disabled="true"]):not(:disabled),
.project-mobile-summary-menu-btn:active:not([aria-disabled="true"]):not(:disabled),
.project-mobile-menu-btn:active:not([aria-disabled="true"]):not(:disabled),
.project-mobile-row-menu-trigger:active:not([aria-disabled="true"]):not(:disabled) {
  border-color: transparent;
  background: transparent;
}



.project-mobile-chevron {
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}



.project-mobile-create-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}



.project-mobile-create-actions {
  display: flex;
  justify-content: flex-end;
}



.project-mobile-detail-view {
  overflow: hidden;
}



.project-mobile-detail-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--theme-panel-border);
}



.project-mobile-detail-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
}



.project-mobile-back-btn {
  justify-self: start;
}



.project-mobile-detail-status-slot {
  display: flex;
  justify-self: end;
  min-width: 0;
}



.project-mobile-detail-title {
  min-width: 0;
  overflow: hidden;
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.project-mobile-tabs-wrap {
  position: relative;
  z-index: 5;
  min-height: 52px;
  background: var(--theme-chrome-bg);
  overflow: hidden;
}



.project-mobile-tabs-wrap::before,
.project-mobile-tabs-wrap::after {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 22px;
  pointer-events: none;
  content: '';
}



.project-mobile-tabs-wrap.has-left-overflow::before,
.project-mobile-tabs-wrap.has-right-overflow::after {
  display: block;
}



.project-mobile-tabs-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--theme-chrome-bg) 26%, transparent);
}



.project-mobile-tabs-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--theme-chrome-bg) 26%, transparent);
}



.project-mobile-tabs {
  --tab-strip-gap: 6px;
  --tab-strip-min-height: 52px;
  --tab-strip-padding: 8px 10px 0;
  --tab-strip-bg: var(--theme-chrome-bg);
  --tab-strip-border-color: var(--theme-panel-border);
  --tab-strip-active-bg: var(--theme-tab-active-bg);
  --tab-strip-item-gap: 6px;
  --tab-strip-item-min-height: 44px;
  --tab-strip-item-max-width: 148px;
  --tab-strip-item-padding: 9px 12px;
  --tab-strip-item-radius: 8px 8px 0 0;
  -webkit-overflow-scrolling: touch;
}

.project-mobile-tab {
  isolation: isolate;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}



.project-mobile-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}



.project-mobile-tab-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}



.project-mobile-detail-body {
  display: grid;
  gap: 12px;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  overflow-x: hidden;
}



.project-mobile-detail-panel {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-mobile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}



.project-mobile-detail-panel h3 {
  margin: 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 13px;
}



.project-mobile-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}



.project-mobile-summary-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}



.project-mobile-summary-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}



.project-mobile-note-preview,
.project-mobile-tab-summary {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}



.project-mobile-note-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}



.project-mobile-note-preview-text {
  min-width: 0;
}



.project-mobile-note-toggle {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 10px;
}



.project-mobile-tab-toolbar,
.project-mobile-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}



.project-mobile-content-list,
.project-mobile-group-body {
  display: grid;
  gap: 8px;
}



.project-findings-group .project-mobile-group-body,
.project-artifacts-group .project-mobile-group-body {
  margin-left: 16px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}



.project-mobile-content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-mobile-content-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  white-space: normal;
}



.project-mobile-content-row .project-mobile-content-main.control-row {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}



.project-mobile-content-main.control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  width: 100%;
  min-height: 0;
}



.project-mobile-content-row .project-mobile-content-main.control-row:hover,
.project-mobile-content-row .project-mobile-content-main.control-row:focus-visible {
  background: transparent;
}



.project-mobile-run-row {
  padding-block: 14px;
}



.project-mobile-run-row .project-mobile-content-main {
  gap: 8px;
}



.project-mobile-content-title {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: normal;
}



.project-mobile-content-meta,
.project-mobile-content-detail {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}



.project-mobile-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}



.project-mobile-row-badge {
  align-self: start;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
}



.project-mobile-row-badge.is-missing {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}



.project-mobile-row-badge.is-changed {
  border-color: color-mix(in srgb, var(--amber) 64%, var(--border));
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}



.project-mobile-row-badge.is-disabled {
  border-color: var(--border-strong);
  color: var(--muted);
  background: var(--panel);
}



.project-mobile-row-accessory {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: flex-end;
  align-content: start;
  justify-content: space-between;
  gap: 5px;
}



.project-mobile-row-menu {
  position: relative;
  align-self: start;
}



.project-mobile-row-menu-trigger {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  margin-top: -6px;
  margin-right: -6px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}



.project-mobile-row-menu-trigger::-webkit-details-marker {
  display: none;
}



.project-mobile-row-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 4;
  display: grid;
  gap: 6px;
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-panel-bg);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-panel-shadow) 72%, transparent);
}



.project-mobile-row-menu-item {
  justify-content: flex-start;
  width: 100%;
}



.project-mobile-action-sheet-overlay {
  z-index: 380;
}



.project-mobile-action-sheet {
  gap: 0;
}



.project-mobile-action-sheet-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-panel-border);
}



.project-mobile-action-sheet-header h2 {
  margin: 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
}



.project-mobile-action-sheet-items {
  display: grid;
  gap: 8px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
}



.project-mobile-action-sheet-item {
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  font-size: 13px;
}



.project-mobile-action-sheet-item.is-danger {
  border-color: var(--red);
  color: var(--red);
}



.project-mobile-action-sheet-field {
  display: grid;
  gap: 8px;
  min-height: 48px;
  padding: 8px 0;
}



.project-mobile-menu-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}



.project-mobile-menu-field .app-select {
  width: 100%;
  max-width: 100%;
}



.project-mobile-action-sheet .app-select-menu {
  position: static;
  max-height: min(220px, 38svh);
  margin-top: 6px;
  overflow-y: auto;
}



.project-mobile-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}



.project-mobile-group-toggle,
.project-mobile-group-toggle.toggle-btn {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
}



.project-mobile-group-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-weight: 700;
}



.project-mobile-group-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}



.project-mobile-group.is-collapsed .project-explorer-group-caret {
  transform: rotate(-90deg);
}



.project-mobile-group-body[hidden],
.project-mobile-group.is-collapsed .project-mobile-group-body {
  display: none;
}



.project-workspace-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--theme-panel-border);
  background: color-mix(in srgb, var(--theme-chrome-row-bg) 62%, transparent);
}



.project-explorer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}



.project-explorer-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}



.project-explorer-body-details {
  margin-bottom: 18px;
}



.project-workspace-body {
  display: grid;
  gap: 8px;
  padding: 8px 12px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}

.project-workspace-pagination {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
  font-family: var(--font-mono);
}

.project-workspace-pagination.u-hidden {
  display: none;
}

.project-workspace-pagination-summary {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.project-workspace-pagination-controls {
  display: grid;
  grid-template-columns: max-content minmax(86px, auto) max-content;
  align-items: center;
  gap: 6px;
}

.project-workspace-pagination-status {
  color: var(--text);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

.project-workspace-section-label {
  margin-top: 4px;
  padding: 8px 2px 2px;
  border-top: 1px solid var(--theme-panel-border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}



.project-workspace-section-label:first-child {
  margin-top: 0;
  border-top: 0;
}



.project-workspace-row {
  display: block;
  width: 100%;
  min-height: 86px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}



.project-workspace-row:hover,
.project-workspace-row:focus-visible,
.project-workspace-row.is-selected {
  border-color: var(--green);
  background: var(--theme-chrome-row-hover-bg);
}



.project-workspace-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}



.project-workspace-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}



.project-workspace-name {
  font-family: var(--font-mono);
  color: var(--green);
  font-weight: 700;
  overflow-wrap: anywhere;
}



.project-workspace-status {
  color: var(--muted);
  font-size: 12px;
}



.project-workspace-status.is-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--green-dim);
  border-radius: 999px;
  color: var(--green);
  background: var(--green-glow);
  line-height: 1.1;
  transform: translateY(-2px);
}



.project-workspace-status.is-active::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 45%, transparent);
}



.project-workspace-meta {
  color: var(--muted);
  font-size: 12px;
}



.project-workspace-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}



.project-workspace-count {
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
  font-family: var(--font-mono);
}



.project-workspace-label-chips,
.project-label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}



.project-workspace-label-chips {
  margin-top: 7px;
}



.project-target-list {
  display: grid;
  gap: 8px;
}



.project-target-browser {
  display: grid;
  gap: 10px;
}



.project-target-browser-toolbar {
  display: grid;
  gap: 9px;
}



.project-target-browser-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}



.project-target-type-tabs {
  --tab-strip-gap: 6px;
  --tab-strip-padding: 0;
  --tab-strip-bg: transparent;
  --tab-strip-border-color: var(--theme-panel-border);
  overflow-x: auto;
}



.project-target-type-tab-label,
.project-target-type-tab-count {
  display: inline-flex;
  align-items: center;
}



.project-target-type-tab-count {
  color: inherit;
  opacity: 0.78;
}



.project-target-search {
  width: min(360px, 100%);
}



.project-target-auto-toggle {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}



.project-target-auto-toggle input {
  margin: 0;
}



.project-target-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-target-main,
.project-target-edit-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}



.project-target-heading,
.project-target-actions,
.project-target-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}



.project-target-heading {
  min-width: 0;
}



.project-target-type {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}



.project-target-auto-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}



.project-target-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}



.project-target-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}



.project-target-actions,
.project-target-edit-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}



.project-target-edit-field span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}



.project-target-value-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}



.project-workspace-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}



.project-explorer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-panel-border);
}



.project-explorer-title-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
}



.project-explorer-title {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}



.project-explorer-meta,
.project-explorer-item-meta,
.project-explorer-item-detail {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}



.project-explorer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}



.project-explorer-active-pill,
.project-explorer-item-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--green-dim);
  border-radius: 999px;
  color: var(--green);
  background: var(--green-glow);
  font-family: var(--font-mono);
  font-size: 11px;
}



.project-explorer-tabs-wrap {
  --project-explorer-tabs-bg: color-mix(in srgb, var(--theme-terminal-bar-bg) 88%, transparent);

  display: flex;
  align-items: stretch;
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 42px;
  max-width: 100%;
  border-bottom: 1px solid var(--border-bright);
  background: var(--project-explorer-tabs-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: hidden;
}



.project-explorer-tabs-wrap::before,
.project-explorer-tabs-wrap::after {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 22px;
  pointer-events: none;
  content: '';
}



.project-explorer-tabs-wrap.has-left-overflow::before,
.project-explorer-tabs-wrap.has-right-overflow::after {
  display: block;
}



.project-explorer-tabs-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--project-explorer-tabs-bg) 26%, transparent);
}



.project-explorer-tabs-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--project-explorer-tabs-bg) 26%, transparent);
}



.project-explorer-tabs {
  --tab-strip-padding: 6px 16px 0;
  --tab-strip-bg: transparent;
  --tab-strip-border-color: transparent;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
}



.project-explorer-tabs-scroll-btn {
  position: relative;
  align-self: stretch;
  min-width: 34px;
  min-height: 0;
  padding: 0 8px;
  border-color: transparent;
  border-radius: 0;
  color: var(--theme-toolbar-button-text);
  background: transparent;
  z-index: 3;
}



.project-explorer-tabs-wrap .project-explorer-tabs-scroll-btn:hover:not(:disabled),
.project-explorer-tabs-wrap .project-explorer-tabs-scroll-btn:active:not(:disabled),
.project-explorer-tabs-wrap .project-explorer-tabs-scroll-btn:focus-visible:not(:disabled) {
  outline: none;
  border-color: transparent;
  color: var(--theme-toolbar-button-hover-text);
  background: color-mix(in srgb, var(--theme-toolbar-button-hover-bg) 72%, transparent);
  box-shadow: none;
}



.project-explorer-tabs-wrap .project-explorer-tabs-scroll-btn:disabled {
  opacity: 1;
  color: color-mix(in srgb, var(--theme-toolbar-button-text) 45%, transparent);
  background: transparent;
}



.project-explorer-tabs-scroll-btn::before {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  opacity: 0.96;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  content: '';
}



.project-explorer-tabs-wrap.has-left-overflow .project-explorer-tabs-scroll-btn[data-project-tabs-scroll="left"]::before,
.project-explorer-tabs-wrap.has-right-overflow .project-explorer-tabs-scroll-btn[data-project-tabs-scroll="right"]::before {
  display: block;
}



.project-explorer-tabs-scroll-btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  content: '';
  transform: translate(-50%, -50%);
}



.project-explorer-tabs-scroll-btn[data-project-tabs-scroll="left"]::before {
  right: -20px;
  background: linear-gradient(to right, var(--project-explorer-tabs-bg), transparent);
}



.project-explorer-tabs-scroll-btn[data-project-tabs-scroll="left"]::after {
  border-top: 5px solid transparent;
  border-right: 7px solid currentColor;
  border-bottom: 5px solid transparent;
}



.project-explorer-tabs-scroll-btn[data-project-tabs-scroll="right"]::before {
  left: -20px;
  background: linear-gradient(to left, var(--project-explorer-tabs-bg), transparent);
}



.project-explorer-tabs-scroll-btn[data-project-tabs-scroll="right"]::after {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}



.project-explorer-filter-panel {
  display: grid;
  gap: 8px;
  padding: 10px 0 2px;
}



.project-explorer-filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}



.project-finding-sort-control {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}



.project-finding-sort-control .form-select,
.project-finding-sort-control .app-select {
  width: auto;
  min-width: 148px;
  font-size: 11px;
}



.project-finding-sort-control .form-select {
  min-height: 28px;
  padding: 7px 24px 7px 9px;
}



.project-finding-sort-control .app-select-trigger {
  justify-content: space-between;
  min-height: 28px;
  padding: 7px 9px;
  font-size: 11px;
  gap: 4px;
}



.project-finding-source-order-control.has-sort-divider {
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.project-finding-view-tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: start;
  min-width: 0;
}

.project-finding-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.project-finding-view-button.toggle-btn {
  min-height: 26px;
  padding: 4px 9px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.1;
}

.project-finding-view-button.toggle-btn.is-active,
.project-finding-view-button.toggle-btn[aria-pressed="true"] {
  color: var(--green);
  background: var(--green-glow);
}



.project-explorer-filter-chips {
  flex: 0 1 auto;
}



.project-explorer-filter-empty,
.project-target-filter-empty {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}



.project-target-filter-empty {
  padding: 6px 8px;
}



.project-explorer-tab-panel {
  display: grid;
  gap: 14px;
  container: project-tab-panel / inline-size;
  min-height: 0;
}



.project-explorer-tab-panel-details {
  padding-bottom: 12px;
}



.project-explorer-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}



.project-explorer-meta-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--theme-chrome-row-bg);
}



.project-explorer-meta-row span:first-child {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}



.project-explorer-meta-row span:last-child {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}



.project-explorer-section,
.project-explorer-group {
  display: grid;
  gap: 9px;
}



.project-explorer-notes-section {
  margin-bottom: 18px;
}



.project-explorer-group-body {
  display: grid;
  gap: 9px;
}



.project-findings-group,
.project-artifacts-group {
  gap: 7px;
}



.project-findings-group .project-explorer-group-body,
.project-artifacts-group .project-explorer-group-body {
  margin-left: 16px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}



.project-explorer-group-body[hidden],
.project-explorer-group.is-collapsed .project-explorer-group-body {
  display: none;
}



.project-explorer-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}



.project-explorer-section-heading.project-labels-heading {
  justify-content: flex-start;
  gap: 8px;
}



.project-explorer-section h3,
.project-explorer-group h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}



.project-explorer-group-toggle,
.project-explorer-group-toggle.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}



.project-explorer-group-toggle:hover,
.project-explorer-group-toggle:focus-visible {
  color: var(--green);
}



.project-explorer-group-toggle:focus-visible {
  outline: 1px solid var(--green-dim);
  outline-offset: 3px;
}



.project-explorer-group-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.12s ease, color 0.12s ease;
}



.project-explorer-group-toggle:hover .project-explorer-group-caret,
.project-explorer-group-toggle:focus-visible .project-explorer-group-caret {
  color: var(--green);
  background: transparent;
}



.project-explorer-group.is-collapsed .project-explorer-group-caret {
  transform: rotate(-90deg);
}



.project-explorer-group-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}



.project-explorer-group-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  white-space: nowrap;
}



.project-target-filter-bar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}



.project-target-filter-menu {
  position: relative;
  flex: 0 0 auto;
}



.project-target-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 148px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}



.project-target-filter-trigger::after {
  content: '▾';
  display: inline-block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  transition: color 0.12s ease, transform 0.12s ease;
}



.project-target-filter-menu.is-open > .project-target-filter-trigger::after {
  transform: rotate(180deg);
}



.project-target-filter-trigger:hover::after,
.project-target-filter-trigger:focus-visible::after {
  color: var(--text);
}



.project-target-filter-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 100%;
  max-width: min(360px, calc(100vw - 48px));
  max-height: 260px;
  padding: 8px;
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
}



.project-target-filter-options[hidden] {
  display: none;
}



.project-target-filter-option {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}



.project-target-filter-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}



.project-target-filter-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: transparent;
  background: var(--theme-chrome-row-bg);
  font-size: 12px;
}



.project-target-filter-option input:checked + .project-target-filter-check {
  border-color: var(--green-dim);
  color: var(--green);
  background: var(--green-glow);
}



.project-target-filter-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 12px;
}



.project-target-filter-chips {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}



.project-target-filter-clear {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--theme-chrome-row-bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}



.project-target-filter-chip {
  padding: 4px 9px;
  min-height: 28px;
  font-size: 11px;
}



.project-target-filter-clear {
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
}



.project-target-filter-clear:hover,
.project-target-filter-clear:focus-visible {
  border-color: var(--green-dim);
  color: var(--green);
  background: var(--green-glow);
}



.project-run-row-actions {
  display: grid;
  justify-items: end;
  flex: 0 0 auto;
  gap: 6px;
  min-width: min(420px, 38%);
  max-width: 44%;
}



.project-run-row-counts,
.project-run-row-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}



.project-runs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}



.project-run-compare-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}



.project-run-compare-controls [data-project-compare-run="left"],
.project-run-compare-controls [data-project-compare-target] {
  flex: 1 1 180px;
  width: auto;
  min-width: 180px;
}



.project-run-compare-controls > .app-select {
  width: 100%;
  min-width: 180px;
}



.project-run-compare-mode-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}



.project-run-compare-mode-group[hidden] {
  display: none;
}



.project-run-compare-mode-button.toggle-btn {
  min-height: 32px;
  min-width: 52px;
  padding: 7px 10px;
  font-size: 11px;
}



.project-runs-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}



.project-runs-toolbar-divider {
  width: 1px;
  min-height: 32px;
  background: var(--border);
}



.project-run-count-chip[disabled] {
  cursor: default;
  opacity: 0.56;
}



.project-explorer-group-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  padding: 0;
  cursor: pointer;
}



.project-explorer-group-link:hover,
.project-explorer-group-link:focus-visible {
  color: var(--green);
}



.project-explorer-group-link:focus-visible {
  outline: 1px solid var(--green-dim);
  outline-offset: 3px;
}



.project-explorer-empty {
  padding: 18px 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}



.project-monitoring-root {
  display: grid;
  gap: 16px;
}



.project-monitoring-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}



.project-monitoring-filters {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}



.project-monitoring-filter {
  display: grid;
  gap: 4px;
  min-width: 132px;
  color: var(--muted);
  font-size: 12px;
}



.project-monitoring-filter .form-select {
  width: 100%;
}



.project-monitoring-count {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--theme-chrome-border);
  border-radius: 8px;
  background: var(--theme-chrome-row-bg);
}



.project-monitoring-count strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}



.project-monitoring-count span,
.project-monitoring-meta,
.project-monitoring-empty-line {
  color: var(--muted);
  font-size: 13px;
}



.project-monitoring-section,
.project-monitoring-timeline,
.project-monitoring-timeline-main {
  display: grid;
  gap: 10px;
}



.project-monitoring-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}



.project-monitoring-card-grid {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}



.project-monitoring-group {
  display: grid;
  gap: 8px;
}



.project-monitoring-group-heading {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}



.project-monitoring-card,
.project-monitoring-timeline-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--theme-chrome-border);
  border-radius: 8px;
  background: var(--theme-chrome-row-bg);
}

.project-monitoring-card {
  align-content: start;
}



.project-monitoring-card-head,
.project-monitoring-timeline-heading,
.project-monitoring-actions,
.project-monitoring-card-actions,
.project-monitoring-triage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}



.project-monitoring-card-head {
  justify-content: space-between;
}



.project-monitoring-pill,
.project-monitoring-fire-kind,
.project-monitoring-severity,
.project-monitoring-ack,
.project-monitoring-policy-chip,
.project-monitoring-rollup-note {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}



.project-monitoring-command {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}



.project-monitoring-rollup {
  display: grid;
  gap: 7px;
}



.project-monitoring-rollup > .badge,
.project-monitoring-rollup-counts {
  justify-self: start;
}



.project-monitoring-card-actions {
  gap: 6px;
}



.project-monitoring-policy {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}



.project-monitoring-triage {
  display: grid;
  gap: 8px;
}



.project-monitoring-note {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border: 1px solid var(--theme-chrome-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  padding: 8px;
}



.project-monitoring-rollup-counts {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
}



.project-monitoring-signals {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}



.project-monitoring-timeline-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}



.project-monitoring-root.is-mobile .project-monitoring-counts,
.project-monitoring-root.is-mobile .project-monitoring-grid,
.project-monitoring-timeline-row.is-mobile {
  grid-template-columns: 1fr;
}



@media (max-width: 1040px) {
  .project-monitoring-card-grid {
    grid-template-columns: 1fr;
  }
}



.project-explorer-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: var(--theme-chrome-row-bg);
}



button.project-explorer-item {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}



button.project-explorer-item:hover,
button.project-explorer-item:focus-visible,
.project-explorer-item:has(.project-explorer-item-click-target:hover),
.project-explorer-item:has(.project-explorer-item-click-target:focus-visible) {
  border-color: var(--green-dim);
  background: var(--theme-chrome-row-hover-bg);
}



.project-explorer-item-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}



.project-explorer-item-click-target {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}



.project-explorer-item .project-explorer-item-click-target.control-row {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}



.project-explorer-item .project-explorer-item-click-target.control-row:hover,
.project-explorer-item .project-explorer-item-click-target.control-row:focus-visible {
  background: transparent;
}



.project-explorer-item-title {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}



.project-explorer-item-badge {
  flex: 0 0 auto;
  border-color: var(--border);
  color: var(--muted);
  background: var(--surface);
}



.project-explorer-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  min-width: 0;
}



.project-explorer-metadata-chip.badge {
  flex: 0 1 auto;
  justify-content: flex-start;
  max-width: 180px;
  min-width: 0;
  min-height: 20px;
  overflow: hidden;
  padding: 2px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.project-artifact-badges {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}



.project-package-accessory {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}



.project-artifact-actions,
.project-package-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}



.project-artifact-action:disabled,
.project-package-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}



.project-package-action.is-preparing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.82;
}



.project-package-action.is-preparing::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: workspace-refresh-spin 0.8s linear infinite;
}



.project-artifact-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.1;
}



.project-artifact-status.is-available {
  border-color: var(--green-dim);
  color: var(--green);
  background: var(--green-glow);
}



.project-artifact-status.is-changed {
  border-color: color-mix(in srgb, var(--amber) 64%, var(--border));
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}



.project-artifact-status.is-missing {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}



.project-artifact-status.is-disabled {
  border-color: var(--border-strong);
  color: var(--muted);
  background: var(--panel);
}



.project-package-toolbar,
.project-package-wizard-header,
.project-package-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}



.project-report-root {
  min-width: 0;
  min-height: 0;
}



.project-activity-root {
  display: grid;
  gap: 12px;
  min-width: 0;
}



.project-activity-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}



.project-activity-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}



.project-activity-field .form-control,
.project-activity-field .form-select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}



.project-activity-filter-actions,
.project-activity-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}



.project-activity-filter-actions {
  align-self: end;
}



.project-activity-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}



.project-activity-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}



.project-activity-table th,
.project-activity-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}



.project-activity-table th {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}



.project-activity-table th:nth-child(1),
.project-activity-table td:nth-child(1) {
  width: 16%;
}



.project-activity-table th:nth-child(2),
.project-activity-table td:nth-child(2) {
  width: 14%;
}



.project-activity-table th:nth-child(3),
.project-activity-table td:nth-child(3) {
  width: 16%;
}



.project-activity-table th:nth-child(4),
.project-activity-table td:nth-child(4) {
  width: 22%;
}



.project-activity-table th:nth-child(6),
.project-activity-table td:nth-child(6) {
  width: 88px;
  text-align: right;
}



.project-activity-row:last-child td {
  border-bottom: 0;
}



/* In-workspace target jump links read as links, not ghost buttons, so they sit
   consistently beside the run/snapshot anchor targets in the same column. */
.project-activity-target-link.btn-ghost {
  display: inline;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-activity-root .project-activity-target-link.btn-ghost:hover,
.project-activity-root .project-activity-target-link.btn-ghost:focus-visible {
  background: none;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
}



.project-activity-summary,
.project-activity-retention-note {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
}



.project-activity-details {
  position: relative;
  display: inline-grid;
  justify-items: end;
  gap: 6px;
  max-width: 100%;
}



.project-activity-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}



.project-activity-details-toggle .disclosure-chev {
  font-size: 16px;
}



.project-activity-detail-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  width: min(520px, calc(100vw - 80px));
  max-height: 260px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
}

.project-activity-detail-list dt,
.project-activity-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 12px;
}

.project-activity-detail-list dt {
  color: var(--muted);
}

.project-activity-detail-list dd {
  color: var(--text);
}



.project-activity-pager {
  justify-content: flex-end;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}



.project-activity-mobile-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}



.project-activity-mobile-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}



.project-activity-mobile-heading,
.project-activity-mobile-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}



.project-activity-mobile-heading strong,
.project-activity-mobile-meta a,
.project-activity-mobile-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.project-activity-mobile-heading span,
.project-activity-mobile-meta {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
}



.project-report-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
}



.project-report-toolbar,
.project-report-preview-header,
.project-report-selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.project-report-selection-heading {
  position: sticky;
  top: -1px;
  z-index: 2;
  padding-block: 2px;
  background: var(--surface);
}



.project-report-toolbar,
.project-report-message {
  grid-column: 1 / -1;
}



.project-report-toolbar {
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-bottom: 2px;
}



.project-report-dirty-state,
.project-report-note {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.35;
}



.project-report-message {
  padding: 8px 10px;
  border: 1px solid var(--green-dim);
  border-radius: 6px;
  color: var(--green);
  background: var(--green-glow);
  font-family: var(--font-ui);
  font-size: 12px;
}



.project-report-message.is-error {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}



.project-report-editor,
.project-report-preview-wrap {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}



.project-report-editor {
  max-height: min(72vh, 760px);
  overflow: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-gutter: stable;
}



.project-report-panel,
.project-report-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}



.project-report-panel h3,
.project-report-preview h3,
.project-report-selection-group h4 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.project-report-selection-summary {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.35;
}

.project-report-selection-picked {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.project-report-selection-picked p,
.project-report-selection-picked ul {
  margin: 0;
}

.project-report-selection-picked-title {
  color: var(--text);
  font-weight: 700;
}

.project-report-selection-picked ul {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.project-report-selection-picked li {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.project-report-selection-picked strong,
.project-report-selection-picked small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-report-selection-picked strong {
  color: var(--text);
}

.project-report-selection-picked-more,
.project-report-selection-picked-unresolved {
  color: var(--muted);
}

.project-report-selection-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, max-content) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.project-report-selection-filters .form-control,
.project-report-selection-filters .form-select {
  width: 100%;
  min-width: 0;
}

.project-report-selection-filters.is-search-only {
  grid-template-columns: minmax(0, 1fr);
}

.project-report-selection-filters .project-report-filter-check {
  align-items: center;
  white-space: nowrap;
}



.project-report-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}



.project-report-field,
.project-report-templates label,
.project-report-export-prefs label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}



.project-report-field-wide {
  grid-column: 1 / -1;
}



.project-report-field .form-control,
.project-report-templates .form-select,
.project-report-export-prefs .form-select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}



.project-report-field textarea.form-control {
  min-height: 86px;
  resize: vertical;
}



.project-report-section-row,
.project-report-check-row,
.project-report-selection-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}



.project-report-section-row {
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-report-check-row {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.35;
  text-transform: none;
}



.project-report-check-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--green);
}



.project-report-section-controls,
.project-report-actions,
.project-report-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.project-report-selection-paging {
  display: flex;
  gap: 6px;
}



.project-report-section-controls .btn {
  min-width: 34px;
  padding-inline: 8px;
}



.project-report-selection {
  gap: 14px;
}



.project-report-selection-group {
  display: grid;
  gap: 7px;
  min-width: 0;
}



.project-report-selection-row {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-report-selection-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}



.project-report-selection-text strong,
.project-report-selection-text small {
  min-width: 0;
  overflow-wrap: anywhere;
}



.project-report-selection-text small {
  color: var(--muted);
  font-size: 12px;
}



.project-report-preview {
  min-height: 360px;
}



.project-report-preview-frame {
  width: 100%;
  min-height: min(68vh, 760px);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}



.project-package-wizard-footer {
  justify-content: flex-end;
}



.project-package-wizard-footer [data-project-action="package-wizard-back"] {
  margin-right: auto;
}



.project-package-wizard {
  display: grid;
  gap: 14px;
  min-height: 0;
  height: 100%;
  padding: 16px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}



.project-package-wizard-header h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
}



.project-package-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}



.project-package-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
}



.project-package-step-number {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}



.project-package-step-label {
  line-height: 1.1;
}



.project-package-step.is-active {
  border-color: var(--green-dim);
  color: var(--green);
  background: var(--green-glow);
}



.project-package-wizard-body,
.project-package-metadata-form {
  display: grid;
  gap: 12px;
  align-content: start;
}



.project-package-wizard-body {
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  max-width: 100%;
  padding-right: 6px;
  scrollbar-gutter: stable;
}



.project-package-wizard-message {
  margin: 0;
}



.project-package-preset-list {
  display: grid;
  gap: 8px;
}



.project-package-preset {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}



.project-package-preset input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--green);
}



.project-package-preset-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}



.project-package-preset small,
.project-package-selection-text small,
.project-package-wizard-note {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.35;
}



.project-package-wizard-note.is-warning {
  color: var(--amber);
}



.project-package-preview-skipped {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--warn);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-package-preview-skipped h3 {
  margin: 0;
  color: var(--warn);
  font-size: 13px;
}



.project-package-preview-skipped ul {
  margin: 0;
  padding-left: 18px;
}



.project-package-preset.is-active {
  border-color: var(--green-dim);
  color: var(--green);
  background: var(--green-glow);
}



.project-package-preset-metadata {
  display: grid;
  gap: 10px;
}



.project-package-preset-metadata label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}



.project-package-preset-metadata .form-control {
  width: min(480px, 100%);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}



.project-package-preset-metadata textarea.form-control {
  width: 100%;
  min-height: 78px;
  resize: vertical;
}



.project-package-selection-section {
  display: grid;
  gap: 7px;
}



.project-package-selection-section h3 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}



.project-package-selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 3px;
  overflow: visible;
}



.project-package-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  overflow: visible;
}



.project-package-bulk-menu {
  position: relative;
  overflow: visible;
}



.project-package-bulk-menu > summary {
  list-style: none;
}



.project-package-bulk-menu > summary::-webkit-details-marker {
  display: none;
}



.project-package-bulk-menu-trigger::after {
  content: ' ▾';
  color: var(--muted);
}



.project-package-bulk-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  display: none;
  min-width: 150px;
  padding: 4px;
}



.project-package-bulk-menu[open] .project-package-bulk-menu-list {
  display: grid;
  gap: 2px;
}



.project-package-run-selection {
  display: grid;
  gap: 7px;
  min-width: 0;
}



.project-package-run-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}



.project-package-run-header > .project-package-selection-row {
  min-width: 0;
}



.project-package-run-toggle,
.project-package-run-toggle.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}



.project-package-run-toggle:hover,
.project-package-run-toggle:focus-visible {
  color: var(--green);
  background: transparent;
}



.project-package-run-selection.is-collapsed .project-package-run-toggle {
  transform: rotate(-90deg);
}



.project-package-run-body {
  display: grid;
  gap: 6px;
  margin-left: 16px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}



.project-package-run-body[hidden],
.project-package-run-selection.is-collapsed .project-package-run-body {
  display: none;
}



.project-package-selection-row-run {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}



.project-package-run-child-group {
  display: grid;
  gap: 5px;
  min-width: 0;
}



.project-package-run-child-group h4 {
  margin: 5px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}



.project-package-selection-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  line-height: 1.35;
}



.project-package-selection-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 4px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}



.project-package-selection-row-suboption {
  padding: 3px 2px 5px;
  border-color: transparent;
  color: var(--muted);
}



.project-package-selection-row-nested {
  padding: 4px 2px;
  border-color: transparent;
}



.project-package-selection-row-suboption .project-package-selection-text strong {
  color: var(--muted);
  font-weight: 600;
}



.project-package-selection-row.is-disabled {
  opacity: 0.62;
}



.project-package-selection-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}



.project-package-selection-text strong {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}



.project-package-metadata-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}



.project-package-metadata-form .project-package-selection-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  text-transform: none;
}



.project-package-metadata-form .form-control,
.project-package-metadata-form .form-select,
.project-package-metadata-form .app-select {
  width: min(480px, 100%);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}



.project-package-metadata-form textarea.form-control {
  width: 100%;
  min-height: 116px;
  max-height: 180px;
}



.project-package-preview-json {
  max-height: min(46vh, 420px);
}



.project-finding-review {
  flex: 0 0 auto;
  width: 188px;
  max-width: 100%;
}



.project-finding-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  width: 188px;
  max-width: 100%;
}



.project-finding-row-button-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}



.project-finding-row-button-group .btn {
  width: 100%;
}



.project-finding-review + .app-select {
  flex: 0 0 auto;
  width: 188px;
  max-width: 100%;
}

.finding-triage-modal {
  width: min(760px, calc(100vw - 36px));
  max-height: min(820px, calc(100vh - 36px));
  overflow: hidden;
}

.finding-triage-form {
  overflow: auto;
  padding-right: 2px;
}

.finding-triage-section {
  display: grid;
  gap: 10px;
}

.finding-triage-section + .finding-triage-section {
  margin-top: 16px;
}

.finding-triage-form textarea.form-control {
  width: 100%;
  min-height: 94px;
  resize: vertical;
}

.finding-triage-message {
  margin: 0 0 10px;
}

.finding-triage-message.is-error {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
  color: var(--red);
}



.project-finding-review.review-reviewed {
  border-color: color-mix(in srgb, var(--green-dim) 70%, var(--border));
  color: var(--green);
}



.project-finding-review.review-important,
.project-finding-review.review-needs_followup {
  border-color: color-mix(in srgb, var(--amber) 64%, var(--border));
  color: var(--amber);
}



.project-finding-review.review-false_positive {
  border-color: var(--border);
  color: var(--muted);
  opacity: 0.78;
}

.project-finding-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  align-items: start;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.project-finding-board-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.project-finding-board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.project-finding-board-column-header h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-finding-board-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--theme-chrome-row-bg);
  font-family: var(--font-mono);
  font-size: 11px;
}

.project-finding-board-column-body {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.project-finding-board-card {
  display: grid;
  align-self: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--theme-chrome-row-bg);
}

.project-finding-board-card:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 2px;
}

.project-finding-board-card.review-important,
.project-finding-board-card.review-needs_followup {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--border));
}

.project-finding-board-card.review-reviewed {
  border-color: color-mix(in srgb, var(--green-dim) 60%, var(--border));
}

.project-finding-board-card.review-false_positive {
  opacity: 0.78;
}

.project-finding-board-card-header {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.project-finding-board-card-title {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-finding-board-card-badges,
.project-finding-board-card-chips,
.project-finding-board-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.project-finding-board-card-meta,
.project-finding-board-card-detail,
.project-finding-board-empty,
.project-finding-board-truncated {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-finding-board-card-detail {
  color: var(--text-muted, var(--muted));
}

.project-finding-board-card-actions .project-finding-review {
  width: min(100%, 150px);
}

.findings-board-modal {
  width: min(1180px, calc(100vw - 32px));
  max-width: min(1180px, calc(100vw - 32px));
  height: min(820px, calc(100svh - 44px));
  max-height: min(820px, calc(100svh - 44px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.findings-board-modal .faq-header {
  gap: 16px;
}

.findings-board-modal .faq-header > div:first-child {
  min-width: 0;
}

.findings-board-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.findings-board-subtitle,
.findings-board-message,
.findings-board-empty-state {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

.findings-board-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.findings-board-message {
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: var(--theme-chrome-row-bg);
}

.findings-board-message.is-error {
  border-color: color-mix(in srgb, var(--red) 58%, var(--theme-panel-border));
  color: var(--red);
}

.findings-board-body {
  min-height: 0;
  overflow: auto;
}

.findings-board-grid {
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  min-width: 1000px;
  align-items: stretch;
}

.findings-board-column {
  min-height: 100%;
}

.findings-board-column.is-drop-target {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.findings-board-card {
  cursor: grab;
}

.findings-board-card.is-dragging {
  opacity: 0.58;
}

.findings-board-review {
  width: min(100%, 160px);
}

.findings-board-empty-state {
  padding: 18px;
  border: 1px dashed var(--theme-panel-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

/* Extracted from mobile.css */

/* ── Mobile ── */
@media (max-width: 600px) {
  body.mobile-terminal-mode .project-auto-promote-panel {
    margin-bottom: 10px;
    padding: 8px;
  }

  body.mobile-terminal-mode .project-auto-promote-header,
  body.mobile-terminal-mode .project-auto-promote-row-actions {
    align-items: stretch;
    justify-content: flex-start;
  }

  body.mobile-terminal-mode .project-auto-promote-editor-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  body.mobile-terminal-mode .project-auto-promote-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobile-terminal-mode .project-target-editor-modal,
  body.mobile-terminal-mode .project-entity-editor-modal,
  body.mobile-terminal-mode .project-package-manifest-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56svh;
    max-height: 88svh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    isolation: isolate;
  }


  body.mobile-terminal-mode .project-mobile-action-sheet {
    height: auto !important;
    min-height: 0 !important;
    max-height: 88svh !important;
    padding-bottom: 0 !important;
    isolation: isolate;
  }


  body.mobile-terminal-mode .project-mobile-action-sheet-items {
    max-height: calc(88svh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }


  body.mobile-terminal-mode .project-target-editor-modal {
    height: min(740px, 88vh) !important;
    height: min(740px, 88svh) !important;
    min-height: min(680px, 72vh) !important;
    min-height: min(680px, 72svh) !important;
  }


  body.mobile-terminal-mode .project-target-editor-modal .project-target-editor-form,
body.mobile-terminal-mode .project-entity-editor-modal .project-entity-editor-form {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 14px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }


  body.mobile-terminal-mode .project-entity-editor-modal {
    height: min(620px, 88svh);
  }


  body.mobile-terminal-mode .project-entity-editor-modal .project-entity-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }


  body.mobile-terminal-mode .project-target-editor-modal .project-target-editor-form {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }


  body.mobile-terminal-mode .project-target-editor-modal .project-target-edit-field:nth-of-type(4) {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }


  body.mobile-terminal-mode .project-entity-editor-form .project-target-edit-field:nth-of-type(2) {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }


  body.mobile-terminal-mode #project-target-notes {
    flex: 1 1 auto;
    min-height: 108px;
    resize: none;
  }


  body.mobile-terminal-mode #project-entity-note {
    flex: 1 1 auto;
    min-height: 120px;
    resize: none;
  }


  body.mobile-terminal-mode .project-target-editor-modal .modal-actions,
body.mobile-terminal-mode .project-entity-editor-modal .modal-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -14px -14px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--theme-panel-border);
    background: var(--theme-panel-bg);
  }


  body.mobile-terminal-mode .project-entity-editor-modal .modal-actions {
    position: static;
    margin: 8px -14px 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
  }


  body.mobile-terminal-mode .project-target-editor-modal .modal-actions {
    position: static;
    margin: 8px -14px 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
  }


  body.mobile-terminal-mode .project-package-manifest-json {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 14px calc(14px + env(safe-area-inset-bottom, 0));
    overscroll-behavior: contain;
  }

  body.mobile-terminal-mode .project-package-manifest-summary {
    margin: 0 14px 10px;
  }

  body.mobile-terminal-mode .project-provenance-summary-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }


  body.mobile-terminal-mode .project-package-wizard-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--mobile-viewport-height, 100svh) !important;
    min-height: var(--mobile-viewport-height, 100svh);
    max-height: var(--mobile-viewport-height, 100svh) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    isolation: isolate;
  }


  body.mobile-terminal-mode .project-package-wizard {
    gap: 0;
    padding: 0;
  }


  body.mobile-terminal-mode .project-package-wizard-header,
body.mobile-terminal-mode .project-package-stepper,
body.mobile-terminal-mode .project-package-wizard-footer {
    padding: 12px 14px;
    border-bottom: 1px solid var(--theme-panel-border);
    background: var(--theme-panel-bg);
  }


  body.mobile-terminal-mode .project-package-wizard-footer {
    border-top: 1px solid var(--theme-panel-border);
    border-bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }


  body.mobile-terminal-mode .project-package-wizard-body {
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
    scrollbar-gutter: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }


  body.mobile-terminal-mode .project-report-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }


  body.mobile-terminal-mode .project-activity-filters {
    grid-template-columns: minmax(0, 1fr);
  }


  body.mobile-terminal-mode .project-activity-filter-actions,
body.mobile-terminal-mode .project-activity-pager {
    justify-content: flex-start;
  }


  body.mobile-terminal-mode .project-report-toolbar,
body.mobile-terminal-mode .project-report-preview-header,
body.mobile-terminal-mode .project-report-selection-heading {
    align-items: flex-start;
    flex-direction: column;
  }


  body.mobile-terminal-mode .project-report-selection-heading {
    top: 0;
    z-index: 4;
    background: var(--theme-chrome-row-bg);
    box-shadow: 0 -18px 0 18px var(--theme-chrome-row-bg);
  }


  body.mobile-terminal-mode .project-report-actions,
body.mobile-terminal-mode .project-report-selection-actions {
    justify-content: flex-start;
  }


  body.mobile-terminal-mode .project-report-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }


  body.mobile-terminal-mode .project-report-editor {
    max-height: none;
    padding-right: 0;
    overflow: visible;
  }


  body.mobile-terminal-mode .project-report-preview {
    min-height: 260px;
  }


  body.mobile-terminal-mode .project-report-preview-frame {
    min-height: 420px;
  }


  body.mobile-terminal-mode.mobile-keyboard-open .project-target-editor-modal,
body.mobile-terminal-mode.mobile-keyboard-open .project-entity-editor-modal {
    min-height: 0;
    max-height: calc(var(--mobile-viewport-height, 100svh) - 8px) !important;
  }


  body.mobile-terminal-mode.mobile-keyboard-open .project-entity-editor-modal {
    height: calc(var(--mobile-viewport-height, 100svh) - 8px);
  }


  body.mobile-terminal-mode .project-mobile-compare-sheet {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--mobile-viewport-height, 100svh) !important;
    min-height: var(--mobile-viewport-height, 100svh);
    max-height: var(--mobile-viewport-height, 100svh) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    isolation: isolate;
  }


  body.mobile-terminal-mode .project-mobile-compare-header,
body.mobile-terminal-mode .project-mobile-compare-footer {
    flex: 0 0 auto;
    padding: 12px 14px;
    border-bottom: 1px solid var(--theme-panel-border);
    background: var(--theme-panel-bg);
  }


  body.mobile-terminal-mode .project-mobile-compare-header h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0;
    text-transform: uppercase;
  }


  body.mobile-terminal-mode .project-mobile-compare-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }


  body.mobile-terminal-mode .project-mobile-compare-footer {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    border-top: 1px solid var(--theme-panel-border);
    border-bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }


  body.mobile-terminal-mode .project-mobile-compare-footer .btn {
    min-height: 44px;
    flex: 1 1 0;
  }


  body.mobile-terminal-mode .project-mobile-compare-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }


  body.mobile-terminal-mode .project-mobile-compare-step {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--theme-panel-border);
    border-radius: 8px;
    color: var(--theme-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    text-align: center;
  }


  body.mobile-terminal-mode .project-mobile-compare-step.is-active {
    border-color: var(--green);
    color: var(--green);
    background: var(--theme-button-ghost-hover-bg);
  }


  body.mobile-terminal-mode .project-mobile-compare-options {
    display: grid;
    gap: 10px;
  }


  body.mobile-terminal-mode .project-mobile-compare-options h3 {
    margin: 0;
    color: var(--theme-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
  }


  body.mobile-terminal-mode .project-mobile-compare-option {
    justify-content: flex-start;
    min-height: 48px;
    width: 100%;
    white-space: normal;
    text-align: left;
  }


  body.mobile-terminal-mode .project-mobile-compare-option.is-active,
body.mobile-terminal-mode .project-mobile-compare-option[aria-pressed="true"],
body.mobile-terminal-mode .project-mobile-compare-option.is-active:hover:not([aria-disabled="true"]):not(:disabled),
body.mobile-terminal-mode .project-mobile-compare-option[aria-pressed="true"]:hover:not([aria-disabled="true"]):not(:disabled),
body.mobile-terminal-mode .project-mobile-compare-option.is-active:active:not([aria-disabled="true"]):not(:disabled),
body.mobile-terminal-mode .project-mobile-compare-option[aria-pressed="true"]:active:not([aria-disabled="true"]):not(:disabled),
body.mobile-terminal-mode .project-mobile-compare-option.is-active[data-pressable-clearing="1"],
body.mobile-terminal-mode .project-mobile-compare-option[aria-pressed="true"][data-pressable-clearing="1"] {
    border-color: var(--green);
    color: var(--green);
    background: var(--theme-button-ghost-hover-bg);
  }


  body.mobile-terminal-mode .project-workspace-body,
body.mobile-terminal-mode .project-mobile-body,
body.mobile-terminal-mode .project-mobile-detail-body,
body.mobile-terminal-mode .project-explorer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }


  body.mobile-terminal-mode #project-workspace-modal {
    height: 88svh;
  }


  body.mobile-terminal-mode #project-workspace-modal .faq-header {
    flex: 0 0 auto;
  }


  body.mobile-terminal-mode .project-workspace-layout,
body.mobile-terminal-mode .project-notes-form,
body.mobile-terminal-mode .project-labels-form {
    display: none !important;
  }


  body.mobile-terminal-mode .project-mobile-root {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }


  body.mobile-terminal-mode .project-mobile-menu-btn.btn,
body.mobile-terminal-mode .project-mobile-summary-menu-btn.btn,
body.mobile-terminal-mode .project-mobile-row-menu-trigger.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted);
    line-height: 1;
  }


  body.mobile-terminal-mode .project-mobile-menu-btn.btn {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    margin-top: -15px;
    margin-right: -15px;
    font-size: 34px;
    font-weight: 700;
  }


  body.mobile-terminal-mode .project-mobile-summary-menu-btn.btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 30px;
    font-weight: 700;
  }


  body.mobile-terminal-mode .project-mobile-row-menu-trigger.btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-top: -9px;
    margin-right: -9px;
    font-size: 30px;
    font-weight: 700;
  }


  body.mobile-terminal-mode .project-mobile-chevron {
    margin-top: 2px;
  }


  body.mobile-terminal-mode .project-mobile-menu-btn.btn:hover,
body.mobile-terminal-mode .project-mobile-summary-menu-btn.btn:hover,
body.mobile-terminal-mode .project-mobile-row-menu-trigger.btn:hover,
body.mobile-terminal-mode .project-mobile-menu-btn.btn:active,
body.mobile-terminal-mode .project-mobile-summary-menu-btn.btn:active,
body.mobile-terminal-mode .project-mobile-row-menu-trigger.btn:active,
body.mobile-terminal-mode .project-mobile-menu-btn.btn:focus-visible,
body.mobile-terminal-mode .project-mobile-summary-menu-btn.btn:focus-visible,
body.mobile-terminal-mode .project-mobile-row-menu-trigger.btn:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--green);
  }


  body.mobile-terminal-mode .project-mobile-row-main.control-row {
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }


  body.mobile-terminal-mode .project-mobile-title-target {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid var(--theme-chrome-control-border);
    border-radius: 6px;
    background: var(--theme-chrome-control-bg);
  }


  body.mobile-terminal-mode .project-mobile-root.u-hidden,
body.mobile-terminal-mode .project-mobile-list-view.u-hidden,
body.mobile-terminal-mode .project-mobile-create-sheet.u-hidden,
body.mobile-terminal-mode .project-mobile-detail-view.u-hidden {
    display: none !important;
  }


  body.mobile-terminal-mode #project-mobile-name {
    font-size: 16px;
    line-height: 1.35;
  }


  body.mobile-terminal-mode .project-package-preset-metadata .form-control,
body.mobile-terminal-mode .project-package-metadata-form .form-control,
body.mobile-terminal-mode .project-package-metadata-form .form-select,
body.mobile-terminal-mode .project-package-metadata-form .app-select,
body.mobile-terminal-mode .project-mobile-menu-field .app-select,
body.mobile-terminal-mode .project-mobile-menu-field .app-select-trigger {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.35;
  }


  body.mobile-terminal-mode .project-entity-editor-form .form-control,
body.mobile-terminal-mode .project-target-editor-form .form-control,
body.mobile-terminal-mode .project-target-editor-form .form-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.35;
  }


  body.mobile-terminal-mode .project-target-filter-options.dropdown-surface .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }

}


/* Extracted project container queries from shell.css */



@container project-tab-panel (max-width: 760px) {
  .project-runs-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }



  .project-runs-toolbar-actions {
    justify-content: flex-start;
    margin-left: 0;
  }



  .project-runs-toolbar-divider {
    display: none;
  }

}



@container project-tab-panel (max-width: 620px) {
  .project-run-compare-controls {
    grid-template-columns: minmax(0, 1fr);
  }



  .project-run-compare-mode-group {
    justify-self: start;
  }



  .project-run-compare-controls [data-project-compare-run="left"],
.project-run-compare-controls [data-project-compare-target],
.project-run-compare-controls > .app-select {
    width: 100%;
    min-width: 0;
  }

}
/* Project-scoped Atlas entities */

.project-entity-toolbar,
.project-finding-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.project-entity-type-tabs {
  --tab-strip-gap: 6px;
  --tab-strip-padding: 0;
  --tab-strip-bg: transparent;
  --tab-strip-border-color: var(--theme-panel-border);
  margin-bottom: 12px;
  overflow-x: auto;
}

.project-entity-type-tab-label,
.project-entity-type-tab-count {
  display: inline-flex;
  align-items: center;
}

.project-entity-type-tab-count {
  color: inherit;
  opacity: 0.78;
}

.project-entity-toolbar {
  justify-content: space-between;
}

.project-entity-toolbar-actions,
.project-entity-select-actions,
.project-finding-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.project-auto-promote-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-panel-bg) 88%, transparent);
}

.project-auto-promote-rules-toggle::before {
  content: "▸";
}

.project-auto-promote-rules-toggle[aria-expanded="true"]::before {
  content: "▾";
}

.project-auto-promote-header,
.project-auto-promote-actions,
.project-auto-promote-row-actions,
.project-auto-promote-editor-actions,
.project-auto-promote-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.project-auto-promote-header {
  justify-content: space-between;
}

.project-auto-promote-title,
.project-auto-promote-editor-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--theme-text);
}

.project-auto-promote-list {
  display: grid;
  gap: 8px;
}

.project-auto-promote-row-actions {
  justify-content: flex-end;
}

.project-auto-promote-editor {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

.project-auto-promote-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-auto-promote-field-wrap {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 12px;
}

.project-auto-promote-field {
  width: 100%;
}

.project-auto-promote-check {
  margin: 0;
}

.project-auto-promote-filters {
  border-top: 1px solid var(--theme-panel-border);
  padding-top: 8px;
}

.project-auto-promote-filters-trigger {
  width: 100%;
  color: var(--theme-muted);
  font-size: 12px;
  gap: 8px;
}

.project-auto-promote-filters-trigger::before {
  content: "▸";
}

.project-auto-promote-filters-trigger[aria-expanded="true"]::before {
  content: "▾";
}

.project-auto-promote-filters-panel {
  margin-top: 10px;
}

.project-auto-promote-preview {
  min-height: 30px;
  padding: 8px 10px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.35;
}

.project-entity-row,
.project-finding-select-row {
  gap: 10px;
}

.project-entity-select-checkbox,
.project-finding-select-checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.project-run-entities-option {
  padding-top: 2px;
}

.project-run-entities-option .form-check {
  align-items: flex-start;
  gap: 12px;
  line-height: 1.35;
}

.project-run-entities-option .form-check input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.modal-confirm-content:has(.project-run-entities-option) {
  margin-top: 18px;
  margin-bottom: 22px;
}

#confirm-host .modal-card-compact:has(.project-run-entities-option) {
  width: min(640px, 94vw);
}

.project-entity-row-actions,
.project-finding-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.project-finding-row-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}

.project-entity-selection-count,
.project-finding-selection-count,
.project-entity-picker-count {
  color: var(--theme-muted);
  font-size: 12px;
}

.project-entity-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--theme-overlay-bg, rgba(0, 0, 0, 0.5));
}

.project-entity-picker-modal {
  display: grid;
  grid-template-rows: auto auto minmax(160px, 1fr) auto;
  width: min(720px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
  box-shadow: 0 24px 60px var(--theme-panel-shadow);
}

.project-entity-picker-header,
.project-entity-picker-filters,
.project-entity-picker-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.project-entity-picker-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--theme-border);
}

.project-entity-picker-header h3 {
  margin: 0;
  font-size: 16px;
}

.project-entity-picker-filters {
  border-bottom: 1px solid var(--theme-border);
}

.project-entity-picker-filters .form-control {
  flex: 1 1 240px;
}

.project-entity-picker-body {
  overflow: auto;
  padding: 8px 12px;
}

.project-entity-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-entity-picker-row-text {
  display: grid;
  gap: 2px;
}

.project-entity-picker-row-text span {
  color: var(--theme-muted);
  font-size: 12px;
}

.project-entity-picker-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--theme-border);
}


/* /static/css/features/atlas.css */
/* darklab_shell CSS module: Session Entity Atlas overlay, list tabs, and entity detail sheet. */

#atlas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 245;
  background: color-mix(in srgb, var(--theme-bg) 72%, transparent);
}

#atlas-overlay.open {
  display: flex;
}

.atlas-intel-refresh-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--theme-bg) 58%, transparent);
  backdrop-filter: blur(2px);
}

.atlas-intel-refresh-overlay.u-hidden {
  display: none;
}

.atlas-intel-refresh-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: min(360px, 100%);
  padding: 18px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: var(--theme-panel-bg);
  box-shadow: 0 16px 42px var(--theme-chrome-shadow);
}

.atlas-intel-refresh-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--blue) 24%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: atlas-intel-refresh-spin 0.9s linear infinite;
}

.atlas-intel-refresh-title {
  color: var(--theme-text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
}

.atlas-intel-refresh-body {
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.35;
}

@keyframes atlas-intel-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.atlas-surface {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 56px));
  height: min(760px, calc(100vh - 56px));
  margin: auto;
  border: 1px solid var(--theme-panel-border);
  border-radius: 8px;
  background: var(--theme-panel-bg);
  box-shadow: 0 18px 52px var(--theme-chrome-shadow);
  overflow: hidden;
}

.atlas-header {
  flex: 0 0 auto;
}

.atlas-title {
  font-family: var(--font-display);
  color: var(--green);
  font-size: 18px;
  font-weight: 800;
}

.atlas-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
}

.atlas-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.atlas-shell[data-atlas-mode="entity"] {
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
}

.atlas-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--theme-panel-border);
}

.atlas-toolbar {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
}

.atlas-tabs {
  flex: 0 0 auto;
  --tab-strip-padding: 6px 20px 0;
}

.atlas-tab {
  gap: 7px;
}

.atlas-tab-count {
  color: var(--muted);
  font-size: 11px;
}

.atlas-tab.active .atlas-tab-count,
.atlas-tab.is-active .atlas-tab-count {
  color: var(--green);
}

.atlas-search-row,
.atlas-toolbar-actions,
.atlas-bulk-selection-controls,
.atlas-bulk-mutation-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.atlas-search-row input {
  width: 100%;
  min-width: 0;
}

.atlas-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.atlas-filter-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-filter-controls > .form-control,
.atlas-filter-controls > .form-select,
.atlas-filter-controls > .app-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-filter-controls > .app-select .app-select-trigger {
  width: 100%;
  min-width: 0;
}

.atlas-run-filter-search {
  min-width: 0;
}

.atlas-run-filter-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-run-filter-select + .app-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-run-filter-select + .app-select .app-select-trigger {
  width: 100%;
}

.atlas-toolbar-actions {
  min-width: 0;
  justify-content: flex-start;
}

body.mobile-terminal-mode #atlas-findings-board-btn {
  display: none !important;
}

.atlas-run-filter-chip {
  display: flex;
  align-items: center;
  min-width: 0;
  grid-column: 1 / -1;
}

.atlas-run-filter-chip.u-hidden {
  display: none;
}

.atlas-run-filter-chip .chip {
  max-width: min(260px, 100%);
  min-height: 28px;
  padding: 4px 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-saved-view-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.atlas-saved-view-select-cell {
  flex: 1 1 220px;
  min-width: min(220px, 100%);
}

.atlas-saved-view-select,
.atlas-saved-view-select + .app-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-saved-view-select + .app-select .app-select-trigger {
  width: 100%;
}

.atlas-bulk-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, max-content);
  align-items: center;
  gap: 8px;
}

.atlas-bulk-selection-controls,
.atlas-bulk-mutation-controls {
  min-width: 0;
  justify-content: flex-start;
}

.atlas-bulk-mutation-controls {
  padding-left: 30px;
}

.atlas-bulk-action-row > .history-bulk-toggle,
.atlas-bulk-action-row > #atlas-finding-select-all,
.atlas-bulk-action-row > #atlas-finding-clear-selection,
.atlas-bulk-action-row > #atlas-finding-selection-summary {
  grid-row: 1;
}

.atlas-bulk-action-row > #atlas-finding-bulk-status,
.atlas-bulk-action-row > .app-select,
.atlas-bulk-action-row > #atlas-finding-bulk-apply,
.atlas-bulk-action-row > #atlas-bulk-suppression,
.atlas-bulk-action-row > #atlas-bulk-delete {
  grid-row: 2;
}

#atlas-finding-bulk-status,
#atlas-finding-bulk-status + .app-select {
  width: 132px;
  min-width: 132px;
}

#atlas-finding-bulk-status + .app-select .app-select-trigger {
  width: 132px;
  min-width: 132px;
}

.atlas-export-wrap {
  position: relative;
  display: inline-flex;
}

.atlas-export-menu {
  min-width: 120px;
  right: 0;
  left: auto;
}

.atlas-export-wrap.open .atlas-export-menu {
  display: block;
}

.atlas-export-menu button {
  display: block;
  width: 100%;
  text-align: left;
}

.atlas-import-overlay {
  z-index: 9;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--theme-bg) 54%, transparent);
}

.atlas-import-overlay:not(.u-hidden) {
  display: flex;
}

.atlas-import-modal {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 72px));
  max-height: min(720px, calc(100vh - 72px));
  overflow: hidden;
}

.atlas-import-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
}

.atlas-import-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

.atlas-import-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.atlas-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.atlas-import-grid .form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.atlas-import-grid .form-field > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.atlas-import-file-field {
  grid-column: 1 / -1;
}

.atlas-import-actions,
.atlas-import-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.atlas-import-footer {
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--theme-panel-border);
  background: var(--theme-panel-bg);
}

.atlas-import-count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.atlas-import-count {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}

.atlas-import-count-value {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
}

.atlas-import-count-label,
.atlas-import-sample-title,
.atlas-import-option-label {
  color: var(--theme-text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
}

.atlas-import-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.atlas-import-option {
  align-items: flex-start;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-panel-bg);
}

.atlas-import-option > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.atlas-import-option-note {
  display: block;
  font-size: 12px;
}

.atlas-import-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.atlas-import-sample {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.atlas-import-sample-list,
.atlas-import-warning-list {
  display: grid;
  gap: 6px;
  max-height: 168px;
  min-width: 0;
  overflow-y: auto;
}

.atlas-import-sample-row,
.atlas-import-warning-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

.atlas-import-result {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.atlas-orphan-filter {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-orphan-filter + .app-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-orphan-filter + .app-select .app-select-trigger {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-suppression-filter + .app-select,
.atlas-finding-status-filter + .app-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.atlas-suppression-filter + .app-select .app-select-trigger,
.atlas-finding-status-filter + .app-select .app-select-trigger {
  width: 100%;
  min-width: 0;
}

.atlas-saved-view-prompt {
  min-width: 0;
  max-width: 100%;
  margin-bottom: 14px;
}

.atlas-saved-view-prompt .form-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.atlas-saved-view-prompt .form-field span {
  min-width: 0;
}

.atlas-saved-view-prompt .form-control {
  width: 100%;
  min-width: 0;
}

.atlas-finding-bulk-row {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
}

.atlas-finding-bulk-row.u-hidden {
  display: none;
}

.atlas-bulk-selection-summary {
  font-size: 11px;
}

.atlas-list {
  display: grid;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  align-content: start;
}

.atlas-entity-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.atlas-finding-queue-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.atlas-entity-row.has-row-action,
.atlas-finding-queue-row.has-row-action {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.atlas-entity-row.is-selecting,
.atlas-finding-queue-row.is-selecting {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.atlas-entity-row.is-selecting.has-row-action,
.atlas-finding-queue-row.is-selecting.has-row-action {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.atlas-row-suppression-action {
  align-self: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 21px;
  line-height: 1;
}

.atlas-row-suppression-action:hover,
.atlas-row-suppression-action:focus-visible {
  border-color: transparent;
  background: var(--theme-button-ghost-hover-bg);
  color: var(--green);
}

.atlas-entity-row.is-selected {
  background: var(--green-glow);
  box-shadow: inset 3px 0 0 var(--green-dim);
}

.atlas-finding-queue-row.is-selected {
  background: var(--green-glow);
  box-shadow: inset 3px 0 0 var(--green-dim);
}

.atlas-entity-row.is-suppressed,
.atlas-finding-queue-row.is-suppressed {
  opacity: 0.68;
}

.atlas-row-select,
.atlas-finding-select {
  width: 18px;
  height: 18px;
}

.atlas-row-select-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
}

.atlas-entity-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.atlas-entity-value,
.atlas-detail-value,
.atlas-source-command,
.atlas-finding-title {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.atlas-entity-value {
  color: var(--text);
  font-weight: 700;
}

.atlas-entity-badges,
.atlas-label-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.atlas-muted {
  color: var(--muted);
  font-size: 12px;
}

.atlas-empty,
.atlas-empty-inline {
  color: var(--muted);
  padding: 18px 8px;
  text-align: center;
}

.atlas-empty-inline {
  padding: 10px 0;
  text-align: left;
}

.atlas-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
}

.atlas-pagination-summary {
  margin-right: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.atlas-detail {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  background: var(--theme-panel-bg);
}

.atlas-detail-identity {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-panel-border);
}

.atlas-detail-type,
.atlas-detail-section-title {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.atlas-detail-value {
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
}

.atlas-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
}

.atlas-detail-action-menu-list .is-destructive {
  color: var(--danger);
}

.atlas-detail-meta,
.atlas-detail-section {
  display: grid;
  gap: 8px;
}

.atlas-detail-meta {
  padding: 10px 0 4px;
}

.atlas-detail-meta-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.atlas-detail-meta-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.atlas-detail-meta-value {
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.atlas-detail-section {
  padding-top: 16px;
}

.atlas-project-links,
.atlas-intel-highlights,
.atlas-intel-list,
.atlas-source-list,
.atlas-finding-list,
.atlas-metadata-editor {
  display: grid;
  gap: 8px;
}

.atlas-detail-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.atlas-intel-highlight-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
}

.atlas-intel-highlight-provider {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}

.atlas-intel-highlight-provider-title {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.atlas-intel-highlight-items {
  display: grid;
  gap: 0;
}

.atlas-intel-highlight-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.atlas-intel-highlight-value {
  color: var(--text);
  overflow-wrap: anywhere;
}

.atlas-intel-highlight-value.is-warning {
  color: var(--cyan);
}

.atlas-project-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.atlas-project-link-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.atlas-metadata-editor .atlas-note-input {
  min-height: 82px;
  resize: vertical;
}

.atlas-intel-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}

.atlas-intel-card-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.atlas-intel-card-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--muted) 75%, white);
  outline-offset: 3px;
}

.atlas-intel-card-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-mono);
  transition: transform 120ms ease;
}

.atlas-intel-card.is-open .atlas-intel-card-caret {
  transform: rotate(90deg);
}

.atlas-intel-provider {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.atlas-intel-summary {
  color: var(--text);
  line-height: 1.35;
}

.atlas-intel-card-body {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.atlas-intel-card-body.u-hidden {
  display: none;
}

.atlas-intel-data,
.atlas-intel-data-object,
.atlas-intel-data-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.atlas-intel-data-object.is-nested,
.atlas-intel-data-list {
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.atlas-intel-data-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.32fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.atlas-intel-data-row.is-nested {
  grid-template-columns: minmax(82px, 0.3fr) minmax(0, 1fr);
}

.atlas-intel-data-label,
.atlas-intel-data-item-title {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.atlas-intel-data-value {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.atlas-intel-data-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.atlas-source-row,
.atlas-finding-row {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.atlas-finding-raw {
  display: block;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.atlas-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.atlas-source-action {
  justify-self: start;
}

.atlas-entity-token {
  display: inline;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: var(--green-glow);
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.chip.atlas-entity-token:hover,
.chip.atlas-entity-token:focus-visible {
  background: var(--theme-button-ghost-hover-bg);
  outline: 1px solid var(--green-dim);
  outline-offset: 1px;
}

.atlas-line-focus {
  background: var(--green-glow);
}

.atlas-output-entity-menu {
  position: fixed;
  z-index: 650;
  min-width: 150px;
}

.atlas-delete-cleanup-option {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.atlas-delete-cleanup-option .form-check {
  align-items: flex-start;
  gap: 12px;
  line-height: 1.35;
}

.atlas-delete-cleanup-option .form-check input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.modal-confirm-content:has(.atlas-delete-cleanup-option) {
  margin-top: 18px;
  margin-bottom: 22px;
}

#confirm-host .modal-card-compact:has(.atlas-delete-cleanup-option) {
  width: min(640px, 94vw);
}


/* /static/css/features/atlas-mobile.css */
/* Mobile Atlas — list/detail drill-in surface.
 *
 * Scoped to `body.mobile-terminal-mode` so the desktop layout in
 * `atlas.css` is the source of truth on every other viewport. The Atlas
 * overlay (#atlas-overlay) keeps the same open/close lifecycle in both
 * modes; only the inner shell changes.
 *
 * The structural contract:
 *   body.mobile-terminal-mode #atlas-overlay {
 *     .atlas-shell       -> hidden (the desktop two-pane layout)
 *     #atlas-mobile-root -> shown  (the list/detail drill-in)
 *   }
 *
 * The mobile surface owns its own tabs, tools, list/detail views, sticky
 * action bars, and action sheets so the desktop two-pane layout does not
 * have to collapse into a cramped small-screen fallback. */

#atlas-mobile-root.atlas-mobile-root {
  display: none;
}

/* The mode switch activates once `atlas_mobile.js` has initialized the
 * dedicated mobile surface. */
body.mobile-terminal-mode.atlas-mobile-ready #atlas-overlay .atlas-shell {
  display: none;
}

body.mobile-terminal-mode.atlas-mobile-ready #atlas-overlay #atlas-tabs {
  display: none;
}

body.mobile-terminal-mode.atlas-mobile-ready #atlas-mobile-root.atlas-mobile-root:not(.u-hidden) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: var(--theme-bg);
}

body.mobile-terminal-mode #atlas-surface > .sheet-grab.gesture-handle {
  position: relative;
  z-index: 2;
}

/* Each of the three views fills the same surface area; only one is
 * visible at a time. View toggling is owned by `atlas_mobile.js` via
 * the `u-hidden` class so the structural layout below applies once. */
.atlas-mobile-list-view,
.atlas-mobile-detail-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.atlas-mobile-list-view.u-hidden,
.atlas-mobile-detail-view.u-hidden {
  display: none;
}

/* List view skeleton. Tools, bulk bar, list, and pagination stack
 * vertically with the list scrolling independently. */
.atlas-mobile-tabs-wrap {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--theme-panel-border);
}

.atlas-mobile-tools,
.atlas-mobile-bulk-bar {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-bottom: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
}

.atlas-mobile-bulk-bar.u-hidden {
  display: none;
}

.atlas-mobile-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.atlas-mobile-pagination {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid var(--theme-panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.atlas-mobile-pagination.u-hidden {
  display: none;
}

/* Detail view skeleton. Topbar sits flush at the top, footer sticks to
 * the bottom with safe-area padding, body fills the middle and scrolls. */
.atlas-mobile-detail-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
}

.atlas-mobile-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 18px;
}

.atlas-mobile-detail-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--theme-panel-border);
  background: var(--theme-chrome-row-bg);
}

.atlas-mobile-detail-footer:empty {
  display: none;
}

/* Mobile tab strip — composes the .tab-strip primitive, adds horizontal
 * scrolling with edge gradient masks (toggled by ui_tab_strip_edges.js). */
.atlas-mobile-tabs-wrap {
  position: relative;
  overflow: hidden;
}

.atlas-mobile-tabs {
  display: flex;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 12px 4px;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.atlas-mobile-tabs::-webkit-scrollbar {
  display: none;
}

.atlas-mobile-tabs-wrap::before,
.atlas-mobile-tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 1;
}

.atlas-mobile-tabs-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--theme-bg), transparent);
}

.atlas-mobile-tabs-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--theme-bg), transparent);
}

.atlas-mobile-tabs-wrap.has-left-overflow::before,
.atlas-mobile-tabs-wrap.has-right-overflow::after {
  opacity: 1;
}

.atlas-mobile-tab.tab-strip-item {
  flex: 0 0 auto;
  white-space: nowrap;
  touch-action: pan-x;
}

/* Tools row — search input + refresh side by side. */
.atlas-mobile-tools-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.atlas-mobile-tools-row + .atlas-mobile-tools-row,
.atlas-mobile-tools-row + .atlas-mobile-orphan-chip-host {
  margin-top: 6px;
}

.atlas-mobile-search {
  flex: 1 1 auto;
  min-width: 0;
}

.atlas-mobile-refresh-btn,
.atlas-mobile-overflow-btn {
  flex: 0 0 auto;
}

.atlas-mobile-action-menu-trigger.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.atlas-mobile-action-menu-trigger.btn:hover,
.atlas-mobile-action-menu-trigger.btn:active,
.atlas-mobile-action-menu-trigger.btn:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--green);
}

.atlas-mobile-filter-row {
  align-items: flex-start;
  flex-direction: column;
}

.atlas-mobile-filters-toggle {
  width: auto;
}

.atlas-mobile-filters-panel {
  display: grid;
  gap: 8px;
  width: 100%;
  padding-top: 8px;
}

.atlas-mobile-filters-panel.is-hidden {
  display: none;
}

.atlas-mobile-filters-panel .app-select {
  width: 100%;
}

.atlas-mobile-saved-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  gap: 6px;
  align-items: center;
}

.atlas-mobile-saved-view-select {
  min-width: 0;
}

.atlas-mobile-orphan-chip-host {
  display: flex;
}

.atlas-mobile-orphan-chip-host.u-hidden {
  display: none;
}

.atlas-mobile-orphan-chip {
  border: 0;
}

.atlas-mobile-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

body.atlas-mobile-selecting .atlas-mobile-bulk-bar {
  box-shadow: 0 8px 18px var(--theme-panel-shadow);
}

.atlas-mobile-bulk-bar .app-select {
  flex: 1 1 150px;
  width: auto;
}

.atlas-mobile-bulk-summary {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.atlas-mobile-list.is-selecting .atlas-mobile-row-chev {
  display: none;
}

/* Pagination row — summary on the left, prev/next buttons on the right. */
.atlas-mobile-pagination-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
}

.atlas-mobile-pagination-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

/* List rows — extend the existing chrome-row primitive with a drill-in
 * chevron to read as a navigation row per the Disclosure Affordance
 * contract (`>` means "drill in"). */
.atlas-mobile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--theme-panel-border);
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.atlas-mobile-row-select {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.atlas-mobile-row-select input {
  width: 18px;
  height: 18px;
}

.atlas-mobile-row .atlas-entity-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.atlas-mobile-row .atlas-entity-value,
.atlas-mobile-row .atlas-finding-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-mobile-row .atlas-muted {
  font-size: 12px;
}

.atlas-mobile-row .atlas-entity-badges {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 38%;
  overflow: hidden;
}

.atlas-mobile-row-chev {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  margin-left: 2px;
}

.atlas-mobile-row.is-selected {
  background: var(--theme-chrome-row-bg);
}

/* Detail topbar — Back button on the left, title + type in the middle. */
.atlas-mobile-back-btn {
  flex: 0 0 auto;
}

.atlas-mobile-detail-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atlas-mobile-detail-title {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-mobile-detail-subtitle {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.atlas-mobile-orphan-badge {
  flex: 0 0 auto;
}

/* Detail body — give the existing renderer breathing room. */
.atlas-mobile-detail-body > * + * {
  margin-top: 14px;
}

/* Detail footer — primary actions only; secondary actions move into an
 * overflow sheet in Phase C. */
.atlas-mobile-detail-footer > .btn,
.atlas-mobile-detail-footer > .atlas-mobile-footer-select,
.atlas-mobile-detail-footer > .app-select {
  flex: 1 1 auto;
  min-width: 0;
}

/* The review-state picker is enhanced via enhanceAppSelects() into the
 * app-native dropdown family. The original <select> is hidden by the
 * shared `.app-select-native` rule; the visible control is its sibling
 * `.app-select` wrap. The width override below keeps the wrap from
 * snapping back to the primitive's `min(240px, 100%)` ceiling inside the
 * compact footer row. */
.atlas-mobile-detail-footer > .app-select {
  width: auto;
}


/* /static/css/features/command-registry.css */
/* darklab_shell CSS module: command-registry
   Command Registry modal, command catalog detail modal, and source-line highlighting. */

.command-registry-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0;
}

.command-registry-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--theme-panel-border);
}

.command-registry-categories {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
}

.command-registry-category {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
}

.command-registry-category:hover,
.command-registry-category:focus-visible {
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.command-registry-category.active {
  color: var(--green);
  background: var(--green-glow);
}

.command-registry-body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}

.command-registry-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.16fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  color: var(--text);
  cursor: pointer;
}

.command-registry-row:hover,
.command-registry-row:focus-visible {
  border-color: var(--green-dim);
  background: var(--green-glow);
  outline: none;
}

.command-registry-root {
  font-family: var(--font-mono);
  color: var(--green);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.command-registry-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.command-registry-description {
  color: var(--text);
  line-height: 1.35;
}

.command-registry-meta,
.command-registry-chev {
  color: var(--muted);
  font-size: 12px;
}

.command-registry-chev {
  font-size: 18px;
}

.command-registry-empty {
  color: var(--muted);
  padding: 22px 4px;
  text-align: center;
}

.line.history-source-highlight {
  outline: 1px solid var(--green-dim);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--green) 18%, transparent);
}

.command-catalog-body {
  gap: 18px;
}

.command-catalog-summary {
  display: grid;
  gap: 8px;
}

.command-catalog-root {
  font-family: var(--font-display);
  color: var(--green);
  font-size: 22px;
  font-weight: 800;
}

.command-catalog-description {
  color: var(--text);
  line-height: 1.45;
}

.command-catalog-meta {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.command-catalog-section {
  display: grid;
  gap: 8px;
}

.command-catalog-section-title {
  font-family: var(--font-mono);
  color: var(--blue);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.command-catalog-list {
  display: grid;
  gap: 6px;
}

.command-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.command-catalog-row:first-child {
  border-top: 0;
}

.command-catalog-example-row {
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: start;
}

.command-catalog-row .allowed-chip {
  justify-self: start;
  max-width: min(42vw, 460px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: inset 0 -1px 0 var(--border-bright);
}

.command-catalog-example-row .allowed-chip {
  max-width: 100%;
}

.command-catalog-row .allowed-chip:hover,
.command-catalog-row .allowed-chip:focus-visible {
  color: var(--green);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--green-dim), 0 5px 18px var(--green-glow);
  outline: none;
}

.command-catalog-token {
  font-family: var(--font-mono);
  color: var(--green);
  overflow-wrap: anywhere;
}

.command-catalog-note {
  color: var(--muted);
}

@media (max-width: 620px) {
  .command-catalog-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .command-catalog-row .allowed-chip {
    max-width: 100%;
  }
}


/* /static/css/features/faq-shortcuts.css */
/* darklab_shell CSS module: faq-shortcuts
   FAQ modal content, allowed-command chips, tour FAQ entry, and shortcuts overlay. */

.faq-q {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.options-field-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq-a {
  color: var(--muted);
  line-height: 1.7;
  font-size: 13px;
}

.faq-a ul {
  margin: 8px 0 0 4px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-a li {
  list-style: none;
  padding-left: 10px;
  position: relative;
}

.faq-a li::before {
  content: '—';
  position: absolute;
  left: -8px;
  color: var(--muted);
}

.faq-a code {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.faq-example {
  display: inline-block;
  margin-top: 6px;
}

.faq-a .faq-link {
  color: var(--green);
}

.faq-a .faq-kill-verb {
  color: var(--red);
}

.faq-limits-list {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.faq-limits-row {
  display: grid;
  gap: 6px 18px;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.faq-limits-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.faq-limits-label {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.faq-limits-value {
  color: var(--muted);
  line-height: 1.7;
  min-width: 0;
}

.faq-limits-value strong {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 720px) {
  .faq-limits-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.allowed-group {
  margin-top: 14px;
}

.allowed-group-header {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 7px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

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

.allowed-chip {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.allowed-chip:hover {
  color: var(--green);
  border-color: var(--green-dim);
  background: var(--green-glow);
}

.allowed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

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

.faq-tour-entry {
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--theme-panel-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 4%, transparent);
  padding: 14px;
}

.faq-tour-entry-title {
  margin-bottom: 8px;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.faq-tour-entry-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ── FAQ accordion ────────────────────────────────────────────────── */
#faq-modal .faq-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#faq-modal .faq-section-header {
  position: sticky;
  top: -20px;
  z-index: 2;
  padding: 9px 0 8px;
  background: var(--theme-modal-bg);
  border-bottom: 1px solid var(--theme-chrome-divider-color);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}
#faq-modal .faq-body .faq-item .faq-q {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 16px;
}
#faq-modal .faq-body .faq-item .faq-q::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--green-dim);
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s;
}
#faq-modal .faq-body .faq-item.faq-open .faq-q::after {
  content: '−';
  color: var(--green);
}
#faq-modal .faq-body .faq-item .faq-q:hover {
  color: var(--text);
}
#faq-modal .faq-body .faq-item .faq-q:hover::after {
  color: var(--green);
}
#faq-modal .faq-body .faq-item .faq-q[data-pressable-clearing="1"],
#faq-modal .faq-body .faq-item .faq-q[data-pressable-clearing="1"]:hover {
  color: var(--green);
}
#faq-modal .faq-body .faq-item .faq-q[data-pressable-clearing="1"]::after,
#faq-modal .faq-body .faq-item .faq-q[data-pressable-clearing="1"]:hover::after {
  color: var(--green-dim);
}
@media (hover: none) {
  #faq-modal .faq-body .faq-item .faq-q:hover {
    color: var(--green);
  }
  #faq-modal .faq-body .faq-item .faq-q:hover::after {
    color: var(--green-dim);
  }
}
#faq-modal .faq-body .faq-item .faq-a {
  display: none;
  margin-top: 10px;
}
#faq-modal .faq-body .faq-item.faq-open .faq-a {
  display: block;
}
@media (max-width: 720px) {
  #faq-modal .faq-section-header {
    position: static;
    padding-top: 4px;
  }
}

/* ── Keyboard shortcuts overlay (`?` trigger) ─────────────────────── */
#shortcuts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--theme-overlay-backdrop-bg);
  z-index: 330;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#shortcuts-overlay.open { display: flex; }
#shortcuts-modal {
  width: min(1150px, 92vw);
  max-height: 82vh;
}
#shortcuts-modal .faq-header {
  cursor: default;
}
.shortcuts-body {
  overflow-y: auto;
  padding: 10px 16px 14px;
}
.shortcuts-list {
  column-count: 2;
  column-gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.shortcuts-list .shortcuts-section {
  break-inside: avoid;
  margin-bottom: 14px;
}
.shortcuts-list .shortcuts-section:last-child {
  margin-bottom: 0;
}
.shortcuts-list .shortcut-section-title {
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 6px;
}
.shortcuts-list .shortcuts-pairs {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 6px 16px;
}
.shortcuts-list .shortcut-key {
  color: var(--green);
  white-space: nowrap;
}
.shortcuts-list .shortcut-desc {
  color: var(--text);
}
@media (max-width: 720px) {
  .shortcuts-list {
    column-count: 1;
  }
}
.shortcuts-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
}
.shortcuts-close:hover { color: var(--green); }


/* /static/css/features/history.css */
/* darklab_shell CSS module: history
   History drawer, History row cards, Run Details modal, and history actions. */

/* ── Run History panel ── */
#history-panel {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  max-height: none;
  border-left: 1px solid var(--border-bright);
  border-radius: 0;
  z-index: 250;
  box-shadow: -8px 0 32px var(--theme-chrome-shadow);
}
body #history-panel { background: var(--theme-chrome-bg); }
#history-panel.open { display: flex; }
.history-panel-body {
  overflow-y: auto;
}
.history-panel-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--theme-chrome-row-bg);
}
.history-mobile-filters-toggle.btn {
  display: none;
}
.history-advanced-filters {
  display: contents;
}
.history-panel-filters input,
.history-panel-filters select {
  min-width: 0;
}
.history-panel-filters .app-select {
  flex: 1 1 118px;
  min-width: 0;
  font-size: 11px;
}
.history-panel-filters .app-select-trigger {
  min-height: 32px;
  padding: 7px 9px;
}
.history-panel-filters .app-select-menu {
  z-index: 380;
}
.history-bulk-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--theme-chrome-row-bg);
  font-family: var(--font-mono);
}
.history-bulk-select-row,
.history-bulk-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.history-bulk-select-row {
  justify-content: space-between;
}
.history-bulk-action-row {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.history-bulk-action-row > .btn,
.history-bulk-action-row > .history-bulk-actions-wrap {
  flex: 0 0 auto;
}
.history-bulk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
}
.history-bulk-count {
  min-width: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.history-bulk-actions-wrap {
  position: relative;
  display: inline-flex;
}
.history-bulk-actions-menu {
  min-width: 210px;
  max-width: calc(100vw - 32px);
  right: 0;
  left: auto;
  z-index: 525;
}
.history-bulk-actions-wrap.open .history-bulk-actions-menu {
  display: block;
}
.history-bulk-actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
#history-search-input {
  flex: 1 1 100%;
}
.history-root-autocomplete {
  flex: 1 1 148px;
  position: relative;
}
#history-root-input {
  width: 100%;
}
.history-root-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 0;
  width: 100%;
  max-height: 180px;
  z-index: 4;
}
.history-root-dropdown .ac-item {
  padding: 6px 10px;
}
#history-exit-filter,
#history-date-filter,
#history-signal-filter,
#history-kind-filter,
#history-entity-type-filter {
  flex: 1 1 112px;
}
.history-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--theme-chrome-control-border);
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--theme-chrome-control-bg);
}
.history-filter-toggle input {
  margin: 0;
}
.history-filter-clear-btn {
  margin-left: auto;
}
.history-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--theme-chrome-row-bg);
}
.history-active-filters:empty {
  display: none;
}
.history-active-filter-chip {
  gap: 8px;
  min-height: 28px;
  padding: 0 8px 0 10px;
  font-size: 10px;
}
.history-active-filter-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.history-active-filter-remove:hover {
  color: var(--green);
}
.history-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--theme-chrome-row-bg);
  font-family: var(--font-mono);
}
.history-pagination-summary {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.history-pagination-controls {
  flex: 1 0 100%;
  display: inline-grid;
  grid-template-columns: max-content minmax(96px, auto) max-content;
  align-items: center;
  max-width: 100%;
  gap: 6px;
}
.history-pagination-controls > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.history-pagination-status {
  min-width: 96px;
  text-align: center;
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}
.history-pagination-controls > .btn:hover:not(:disabled) {
  color: var(--green);
  transform: none;
}
.history-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 1px;
}
.history-panel-close {
  margin-left: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: color 0.15s;
}
.history-panel-close:hover { color: var(--text); }
#history-list {
  padding: 8px 0;
}
#history-load-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--theme-history-load-overlay-bg);
  z-index: 5;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
#history-load-overlay.open { display: flex; }
.history-load-modal {
  min-width: min(240px, 76%);
  padding: 16px 18px;
  border: 1px solid var(--theme-panel-border);
  border-radius: 6px;
  background: var(--theme-modal-bg);
  box-shadow: 0 10px 28px var(--theme-panel-shadow);
}
.history-load-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--green);
  margin-bottom: 6px;
}
.history-load-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}

.history-empty-state {
  padding: 16px;
  color: var(--muted);
  font-size: 12px;
}
.history-empty-state-title {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 4px;
}
.history-empty-state-detail {
  color: var(--muted);
  font-size: 11px;
}
.history-entry {
  padding: 10px 16px;
}
.history-entry:hover .history-entry-cmd::after {
  content: ' ↗';
  font-size: 10px;
  color: var(--green);
  opacity: 0.7;
}
.history-entry-selecting:hover .history-entry-cmd::after {
  content: '';
}
.history-entry-select-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 auto;
}
.history-entry-select-row input {
  margin: 0;
}
.history-entry-select-disabled {
  opacity: 0.5;
}
.history-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.history-entry-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  padding: 0 2px 0 0;
  transform: translateY(-3px);
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s, transform 0.15s;
}
.history-entry-star:hover {
  color: var(--green);
  transform: translateY(-3px) scale(1.05);
}
.history-entry-star.starred {
  color: var(--amber);
}
.history-entry-star.starred:hover {
  color: var(--amber);
  transform: translateY(-3px) scale(1.05);
}
.history-entry-cmd {
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-entry-meta {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.history-entry-kind.chip-action {
  cursor: pointer;
}

.history-entry-kind.chip-action:hover,
.history-entry-kind.chip-action:focus-visible {
  border-color: var(--green);
  color: var(--green);
  outline: none;
}

.history-entry-date {
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}
.history-entry-label-badge,
.history-entry-note-badge {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-entry-artifacts {
  color: var(--cyan);
}
.history-entry-atlas {
  margin-top: 5px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
}
.history-entry-meta .exit-ok { color: var(--green); }
.history-entry-meta .exit-fail { color: var(--red); }
.history-entry-meta .exit-neutral { color: var(--muted); }
.history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.history-action-btn.btn:hover:not([aria-disabled="true"]):not(:disabled) {
  transform: none;
}
.history-action-menu-wrap {
  position: relative;
  display: inline-flex;
}
.history-action-menu-wrap .history-action-menu {
  min-width: 180px;
  z-index: 520;
}
.history-action-menu-wrap.open .history-action-menu {
  display: block;
}
.history-action-menu button {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.history-project-picker {
  display: grid;
  gap: 8px;
}
.history-project-picker-help {
  color: var(--muted);
  font-size: 12px;
}
.history-project-run-entities-option {
  padding-top: 2px;
}

.history-project-run-entities-option .form-check {
  align-items: flex-start;
  gap: 12px;
  line-height: 1.35;
}

.history-project-run-entities-option .form-check input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.history-project-run-entities-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 8px 0 0 28px;
}

.modal-confirm-content:has(.history-project-run-entities-option) {
  margin-top: 18px;
  margin-bottom: 22px;
}

#confirm-host .modal-card-compact:has(.history-project-run-entities-option) {
  width: min(640px, 94vw);
}

.history-run-overlay {
  --history-run-modal-top: clamp(24px, 7vh, 72px);
  --history-run-modal-bottom: 24px;
  --history-run-modal-height: min(820px, calc(100vh - var(--history-run-modal-top) - var(--history-run-modal-bottom)));
  align-items: flex-start;
  box-sizing: border-box;
  padding-block: var(--history-run-modal-top) var(--history-run-modal-bottom);
  z-index: 365;
}

.history-run-modal {
  width: min(900px, 94vw);
  height: var(--history-run-modal-height);
  max-height: var(--history-run-modal-height);
}

.history-run-header {
  gap: 12px;
}

.history-run-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.history-run-header-actions .close-btn {
  margin-left: 0;
}

.history-run-heading {
  min-width: 0;
}

.history-run-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--green);
}

.history-run-subtitle {
  margin-top: 2px;
  max-width: min(680px, 72vw);
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-run-tabs {
  --tab-strip-padding: 6px 20px 0;
}

.history-run-entity-tabs {
  --tab-strip-padding: 0;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.history-run-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 22px;
}

.history-run-body.history-run-body-entities {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.history-run-section,
.history-run-list-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  padding: 12px;
}

.history-run-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.history-run-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.history-run-meta-row {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  padding: 10px;
}

.history-run-meta-row span,
.history-run-section h3 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.history-run-meta-row strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.history-run-schedule-summary {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
}

.history-run-schedule-label {
  line-height: 1.3;
}

.history-run-schedule-link {
  width: fit-content;
}

.history-run-section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 116px;
}

.history-run-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.history-run-field-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.history-run-field {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.history-run-field-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
}

.history-run-ai-suggestion-field .history-run-field-label {
  padding-top: 11px;
}

.history-run-field-value {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.history-run-output-summary {
  display: grid;
  gap: 12px;
}

.history-run-output-summary .history-run-section {
  min-height: 0;
}

.history-run-command-outcome-summary {
  display: grid;
  gap: 8px;
}

.history-run-command-outcome-list {
  display: grid;
  gap: 6px;
}

.history-run-command-outcome-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}

.history-run-command-outcome-label {
  color: var(--muted);
}

.history-run-command-outcome-value {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.history-run-ai-summary {
  min-height: 0;
}

.history-run-ai-summary-copy {
  margin: 0;
}

.history-run-ai-suggestion-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.history-run-ai-suggestion-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-muted);
}

.history-run-ai-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history-run-ai-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.history-run-ai-suggestion-command {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.history-run-ai-suggestion-reason {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.history-run-ai-list {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  padding-left: 18px;
}

.history-run-ai-list li {
  min-width: 0;
  padding-left: 2px;
  overflow-wrap: anywhere;
}

.history-run-ai-thinking {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(180px, max-content) auto;
  align-items: center;
  min-width: min(260px, 100%);
  min-height: 18px;
  color: var(--muted);
}

.history-run-ai-thinking-phrase {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.history-run-ai-thinking-dots {
  grid-area: 1 / 2;
  margin-left: 4px;
  animation: history-ai-thinking-dots 1.2s steps(4, end) infinite;
  overflow: hidden;
  white-space: nowrap;
}

@keyframes history-ai-thinking-dots {
  0% { width: 0; }
  100% { width: 1.5em; }
}

.history-run-output-summary-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.history-run-output-summary-fields .history-run-field {
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
}

.history-run-output-outline-card {
  min-height: 260px;
}

.history-run-output-outline-list .history-run-field {
  grid-template-columns: minmax(190px, max-content) minmax(0, 1fr);
  column-gap: 16px;
}

.history-run-chip-row,
.history-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-run-note-preview {
  margin: 0;
}

.history-run-primary-actions {
  align-items: center;
  justify-content: flex-end;
}

.history-run-action-menu-wrap,
.history-run-export-menu-wrap {
  position: relative;
  display: inline-flex;
}

.history-run-action-menu-wrap .history-run-action-menu,
.history-run-export-menu-wrap .history-run-export-menu {
  min-width: 190px;
  z-index: 520;
}

.history-run-action-menu-wrap.open .history-run-action-menu,
.history-run-export-menu-wrap.open .history-run-export-menu {
  display: block;
}

.history-run-action-menu button,
.history-run-export-menu button {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.history-run-muted,
.history-run-empty,
.history-run-notice,
.history-run-list-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}

.history-run-notice {
  border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--amber) 6%, transparent);
  padding: 9px 10px;
}

.history-run-notice.is-error {
  border-color: color-mix(in srgb, var(--red) 42%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, transparent);
  color: var(--text);
}

@media (max-width: 760px) {
  .history-run-context-grid {
    grid-template-columns: 1fr;
  }

  .history-run-field {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .history-run-ai-suggestion-field .history-run-field-label {
    padding-top: 0;
  }

  .history-run-output-summary-fields {
    grid-template-columns: 1fr;
  }

  .history-run-command-outcome-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .history-run-output-outline-list .history-run-field {
    grid-template-columns: 1fr;
  }

  .history-run-ai-suggestion-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-run-ai-suggestion-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .history-run-ai-suggestion-actions .btn {
    flex: 1 1 120px;
    justify-content: center;
  }
}

.history-run-output {
  flex: 1 1 auto;
  margin: 0;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  overflow-x: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.history-run-list {
  display: grid;
  gap: 8px;
}

.history-run-entity-panel {
  display: grid;
  flex: 1 1 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-content: stretch;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding-right: 2px;
}

.history-run-entity-list {
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
}

.history-run-entity-list .atlas-entity-row {
  background: var(--theme-chrome-row-bg);
}

.history-run-entity-list .atlas-entity-row:last-child {
  border-bottom: 0;
}

.history-run-entity-list .history-run-entity-row {
  display: block;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: inherit;
  font: inherit;
}

.history-run-entity-list .history-run-entity-row:last-child {
  border-bottom: 0;
}

.history-run-entity-row {
  width: 100%;
  text-align: left;
}

.history-run-list-title {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.history-run-finding-raw {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* ── Starred chip styles ── */
.chip-star {
  color: var(--muted);
  font-size: 10px;
  margin-right: 5px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.hist-chip.starred .chip-star { color: var(--amber); }
.hist-chip.starred { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

.history-entry.starred { padding-left: 14px; }

#search-toggle-btn, #search-summary-btn, #ts-btn, #ln-btn {
  background: color-mix(in srgb, var(--theme-toolbar-button-bg) 72%, color-mix(in srgb, var(--surface) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--border-bright) 90%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 1.5%, transparent);
}
#search-summary-btn {
  border-color: color-mix(in srgb, var(--green-dim) 26%, var(--border-bright));
  background: color-mix(in srgb, var(--green) 2.5%, var(--surface));
}
#search-summary-btn:hover:not(:disabled) {
  border-color: var(--green-dim);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, transparent);
}
#search-summary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  border-color: color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}
#search-summary-btn:disabled:hover {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  border-color: color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
#search-toggle-btn {
  color: transparent;
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
  padding-inline: 10px;
  font-size: 0;
}
#search-toggle-btn::before {
  content: '⌕';
  font-size: 18px;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  transform: translateY(1px);
}
#search-toggle-btn::after {
  content: attr(data-search-label);
  font-size: 12px;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
#search-toggle-btn:hover {
  border-color: color-mix(in srgb, var(--border-bright) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
#search-toggle-btn:hover::before,
#search-toggle-btn:hover::after {
  color: var(--text);
}
.search-signal-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 8px 0 8px;
  margin-left: -2px;
  border-left: 1px solid color-mix(in srgb, var(--border-bright) 45%, transparent);
}
.search-signal-summary strong {
  color: var(--text);
  font-weight: 600;
}
.search-signal-sep {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}
.search-signal-chip {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  min-height: 0;
  padding: 0;
}
.search-signal-chip:hover,
.search-signal-chip:focus-visible {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
.tabbar-chrome:hover .search-signal-summary,
#search-toggle-btn:hover + .search-signal-summary,
.search-signal-summary:hover,
.search-signal-summary:focus-within {
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  border-left-color: color-mix(in srgb, var(--border-bright) 75%, transparent);
}
.tabbar-chrome:hover .search-signal-summary strong,
#search-toggle-btn:hover + .search-signal-summary strong,
.search-signal-summary:hover strong,
.search-signal-summary:focus-within strong {
  color: var(--text);
}
#ts-btn, #ln-btn {
  border-color: color-mix(in srgb, var(--green-dim) 26%, var(--border-bright));
  background: color-mix(in srgb, var(--green) 2.5%, var(--surface));
}
#ts-btn::before, #ln-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 9px;
  background: color-mix(in srgb, var(--muted) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 2%, transparent);
}
#ts-btn:hover, #ln-btn:hover {
  border-color: var(--green-dim);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, transparent);
}
#ts-btn.active::before, #ln-btn.active::before {
  background: color-mix(in srgb, var(--green) 78%, transparent);
  border-color: color-mix(in srgb, var(--green) 88%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 24%, transparent);
}


/* /static/css/features/run-comparison.css */
/* Run Comparison modal, controls, and transcript diff view. */



.history-compare-overlay {
  z-index: 360;
}



.history-compare-modal {
  width: min(980px, 94vw);
  max-height: min(860px, 90vh);
}



.history-compare-header {
  gap: 12px;
}



.history-compare-heading {
  min-width: 0;
}



.history-compare-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}



.history-compare-controls .app-select,
.history-compare-view-select,
.history-compare-context-select {
  width: 156px;
}



.history-compare-reset-view.btn-icon-only {
  flex: 0 0 28px;
  min-height: 28px;
  min-width: 28px;
}



.history-compare-reset-icon {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
}



.history-compare-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--green);
}



.history-compare-subtitle {
  margin-top: 2px;
  max-width: min(680px, 72vw);
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.history-compare-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 18px 20px 22px;
}



.history-compare-run-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}



.history-compare-run-card,
.history-compare-section,
.history-compare-lines {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--theme-chrome-row-bg);
  padding: 12px;
}



.history-compare-run-eyebrow,
.history-compare-section-title,
.history-compare-metric-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}



.history-compare-run-command {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
}



.history-compare-run-meta,
.history-compare-candidate-meta,
.history-compare-empty,
.history-compare-truncation {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}



.history-compare-primary {
  margin-top: 10px;
}



.history-compare-search {
  margin-top: 8px;
  width: 100%;
}



.history-compare-candidate-list {
  display: flex;
  flex-direction: column;
  margin: 10px -12px -12px;
}



.history-compare-candidate-group {
  border-bottom: 1px solid var(--border);
}



.history-compare-candidate-day {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 16px 5px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: left;
  text-transform: uppercase;
}



.history-compare-candidate-day:hover,
.history-compare-candidate-day:focus-visible {
  background: var(--theme-chrome-row-hover-bg);
  outline: none;
}



.history-compare-candidate-day-icon {
  color: var(--muted);
  width: 10px;
  font-size: 11px;
  opacity: 0.75;
}



.history-compare-candidate-day[aria-expanded="true"] .history-compare-candidate-day-icon {
  transform: translateY(-2px) rotate(90deg);
}



.history-compare-candidate-day-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.history-compare-candidate-day-count {
  color: var(--muted);
}



.history-compare-candidate {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
}



.history-compare-candidate-group-rows .history-compare-candidate:last-child {
  border-bottom: 0;
}



.history-compare-candidate-command {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.history-compare-load-more {
  align-self: center;
  margin: 10px 0 12px;
}



.history-compare-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}



.history-compare-metric {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px;
}



.history-compare-metric.is-changed {
  border-color: color-mix(in srgb, var(--amber) 46%, var(--border));
}



.history-compare-metric-value {
  margin-top: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}



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



.history-compare-toolbar .history-compare-controls {
  flex: 1 1 auto;
}



.history-compare-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}



.history-compare-counts-note {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
}



.history-compare-actions-menu-wrap {
  position: relative;
  display: inline-flex;
}



.history-compare-actions-menu {
  right: auto;
  left: 0;
  min-width: 150px;
  z-index: 520;
}



.history-compare-actions-menu-wrap.open .history-compare-actions-menu {
  display: block;
}



.history-compare-actions-menu .dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}



.history-compare-lines summary {
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}



.history-compare-line-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}



.history-compare-line {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}



.history-compare-line:is(button) {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
}



.history-compare-object-row.is-anchorable:hover,
.history-compare-object-row.is-anchorable:focus-visible {
  background: var(--theme-button-ghost-hover-bg);
  outline: 1px solid var(--green-dim);
  outline-offset: 2px;
}



.history-compare-line code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}



.history-compare-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 10px;
  gap: 10px;
  min-height: 320px;
}



.history-compare-split.is-unified,
.history-compare-split.is-changes-only {
  grid-template-columns: minmax(0, 1fr) 10px;
}



.history-compare-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
  overscroll-behavior: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}



.history-compare-split.is-unified .history-compare-pane,
.history-compare-split.is-changes-only .history-compare-pane {
  max-height: min(58vh, 580px);
}



.history-compare-split.is-unified .history-compare-pane,
.history-compare-split.is-changes-only .history-compare-pane {
  grid-column: 1;
}



.history-compare-split.is-unified .history-compare-minimap,
.history-compare-split.is-changes-only .history-compare-minimap {
  grid-column: 2;
  grid-row: 1 / span 2;
}



.history-compare-pane-title {
  position: sticky;
  top: -1px;
  z-index: 1;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--theme-chrome-row-bg);
  box-shadow: 0 -1px 0 0 var(--theme-chrome-row-bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 9px 10px;
  text-transform: uppercase;
}



.history-compare-row {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  flex: 0 0 auto;
  min-height: 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  padding: 5px 8px;
}



.history-compare-line-mark {
  min-width: 0;
  text-align: center;
}



.history-compare-line-anchor-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 16px;
}



.history-compare-finding-marker.btn {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 22%, var(--surface));
  box-shadow: inset 0 0 0 3px var(--surface);
  line-height: 1;
  padding: 0;
  cursor: pointer;
}



.history-compare-finding-marker.btn::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: auto;
  border-radius: 50%;
  background: currentColor;
}



.history-compare-finding-marker.is-high {
  color: var(--red);
}



.history-compare-finding-marker.is-medium {
  color: var(--amber);
}



.history-compare-finding-marker.is-info {
  color: var(--muted);
}



.history-compare-minimap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: stretch;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 2px;
  overflow: hidden;
}



.history-compare-minimap-segment {
  min-height: 2px;
  flex: 1 1 2px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}



.history-compare-minimap-segment.is-changed {
  background: var(--amber);
}



.history-compare-minimap-segment.is-added {
  background: var(--green);
}



.history-compare-minimap-segment.is-removed {
  background: var(--red);
}



.history-compare-minimap-segment.is-equal {
  background: color-mix(in srgb, var(--muted) 34%, transparent);
}



.history-compare-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}



.history-compare-row.is-insert {
  background: color-mix(in srgb, var(--green) 7%, transparent);
}



.history-compare-row.is-delete {
  background: color-mix(in srgb, var(--red) 7%, transparent);
}



.history-compare-row.is-replace {
  background: color-mix(in srgb, var(--amber) 5%, transparent);
}



.history-compare-row.is-structural-change {
  box-shadow: inset 2px 0 0 var(--amber);
}



.history-compare-row-spacer {
  color: transparent;
  user-select: none;
}



.history-compare-row-fold,
.history-compare-row-omitted {
  color: var(--muted);
}



.history-compare-row-omitted {
  display: block;
}



.history-compare-fold {
  grid-column: 3;
  justify-self: start;
  border-color: color-mix(in srgb, var(--green-dim) 44%, var(--border));
  background: color-mix(in srgb, var(--green-dim) 8%, transparent);
}



.history-compare-line-text-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}



.history-compare-line-expander {
  align-self: start;
  min-height: 18px;
  padding: 1px 7px;
  font-size: 10px;
}



.history-compare-object-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}



.history-compare-derived-groups {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}



.history-compare-derived-group {
  display: grid;
  gap: 4px;
}



.history-compare-derived-group-title {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
}



.history-compare-derived-group .history-compare-line-list {
  margin-top: 0;
}



.history-compare-derived-change-mark {
  border-radius: 3px;
  background: color-mix(in srgb, var(--amber) 48%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--amber));
  display: inline-block;
  justify-self: start;
  padding: 0 1px;
}



.history-compare-object-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
}



.history-compare-line-delta {
  border-radius: 3px;
  background: color-mix(in srgb, var(--amber) 48%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--amber));
  padding: 0 1px;
}



.history-compare-line-added {
  color: var(--green);
}



.history-compare-line-removed {
  color: var(--red);
}



.history-compare-line-pulse {
  animation: history-compare-line-pulse 800ms ease-out;
}



@keyframes history-compare-line-pulse {
  0% {
    box-shadow: inset 0 0 0 1px var(--green-dim);
    background: color-mix(in srgb, var(--green-dim) 18%, transparent);
  }

  100% {
    box-shadow: inset 0 0 0 1px transparent;
  }
}



.history-compare-truncation {
  border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--amber) 6%, transparent);
  padding: 9px 10px;
}

@media (max-width: 600px) {
  body.mobile-terminal-mode .history-compare-modal {
    min-height: 68svh;
    max-height: 88svh;
  }

  body.mobile-terminal-mode .history-compare-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-terminal-mode .history-compare-run-grid,
  body.mobile-terminal-mode .history-compare-metrics {
    grid-template-columns: 1fr;
  }

  body.mobile-terminal-mode .history-compare-split {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    min-height: min(42svh, 440px);
  }

  body.mobile-terminal-mode .history-compare-split.is-unified,
  body.mobile-terminal-mode .history-compare-split.is-changes-only {
    display: block;
    grid-template-columns: none;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  body.mobile-terminal-mode .history-compare-minimap {
    display: none;
  }

  body.mobile-terminal-mode .history-compare-pane {
    min-height: min(38svh, 400px);
    max-height: none;
    overflow: visible;
    isolation: isolate;
    /* Explicit positioned stacking context below the toolbar's z-index 40 so
       iOS Safari's compositor can't promote the sticky pane-title's layer
       above the toolbar's open dropdown menu. */
    position: relative;
    z-index: 0;
  }

  body.mobile-terminal-mode .history-compare-split.is-unified .history-compare-pane,
  body.mobile-terminal-mode .history-compare-split.is-changes-only .history-compare-pane {
    display: block;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  body.mobile-terminal-mode .history-compare-split.is-unified .history-compare-pane + .history-compare-pane,
  body.mobile-terminal-mode .history-compare-split.is-changes-only .history-compare-pane + .history-compare-pane {
    margin-top: 10px;
  }

  body.mobile-terminal-mode .history-compare-pane-title {
    position: sticky;
    top: -14px;
    z-index: 5;
    background: var(--theme-chrome-row-bg);
    box-shadow:
      0 -2px 0 var(--theme-chrome-row-bg),
      0 1px 0 var(--border);
    /* Keeps the sticky title's compositor layer inside the pane's stacking
       context so it can't out-paint the toolbar's open dropdown menu. iOS
       Safari otherwise promotes pinned sticky+z-index layers to body level
       where z-index 5 ends up competing with the toolbar's z-index 40. */
    will-change: transform;
  }

  body.mobile-terminal-mode .history-compare-toolbar {
    position: relative;
    z-index: 40;
    overflow: visible;
    isolation: isolate;
  }

  body.mobile-terminal-mode .history-compare-toolbar .history-compare-controls {
    flex: 0 0 100%;
    width: 100%;
  }

  body.mobile-terminal-mode .history-compare-actions-menu-wrap,
  body.mobile-terminal-mode .history-compare-nav {
    order: 2;
  }

  body.mobile-terminal-mode .history-compare-nav {
    margin-left: auto;
    justify-content: flex-end;
  }

  body.mobile-terminal-mode .history-compare-controls .app-select,
  body.mobile-terminal-mode .history-compare-actions-menu-wrap {
    z-index: 50;
  }

  body.mobile-terminal-mode .history-compare-controls .app-select.open,
  body.mobile-terminal-mode .history-compare-actions-menu-wrap.open {
    z-index: 80;
  }

  body.mobile-terminal-mode .history-compare-controls .app-select-menu,
  body.mobile-terminal-mode .history-compare-actions-menu {
    z-index: 900;
  }

  body.mobile-terminal-mode .history-compare-subtitle {
    max-width: 74vw;
  }
}


/* /static/css/features/schedules.css */
/* Schedules modal and recurring-run controls. */

#schedules-modal {
  width: min(1180px, 94vw);
  max-height: min(860px, 92vh);
  background: var(--theme-modal-bg);
}

.schedules-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.schedules-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  min-height: 560px;
  border-top: 1px solid var(--border);
}

.schedules-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.schedules-sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.schedules-sidebar-toolbar .btn:first-child {
  flex: 1 1 auto;
}

.schedules-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.schedules-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 12px;
}

.schedules-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  width: 100%;
  min-height: 76px;
  padding: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.schedules-list-row:hover,
.schedules-list-row:focus-visible {
  border-color: var(--border-bright);
  outline: none;
}

.schedules-list-row.active {
  border-color: var(--green);
  background: var(--theme-button-ghost-hover-bg);
}

.schedules-list-title,
.schedules-detail-title {
  overflow: hidden;
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedules-list-title {
  grid-column: 1 / -1;
  font-size: 13px;
}

.schedules-list-meta,
.schedules-muted,
.schedules-fire-reason {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
}

.schedules-list-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedules-list-status {
  justify-self: end;
}

.schedules-detail {
  min-width: 0;
  overflow: auto;
}

.schedules-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.schedules-detail-header,
.schedules-section-header,
.schedules-detail-actions,
.schedules-pager,
.schedules-fire-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedules-section-header,
.schedules-detail-actions,
.schedules-pager,
.schedules-fire-actions {
  flex-wrap: wrap;
}

.schedules-detail-header {
  justify-content: space-between;
}

.schedules-detail-title {
  min-width: 0;
  font-size: 18px;
}

.schedules-form,
.schedules-fires {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.schedules-field {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.schedules-field-label,
.schedules-section-kicker,
.schedules-section-header h3 {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.schedules-section-header h3 {
  margin: 0;
}

.schedules-input,
.schedules-command-input,
.schedules-select {
  width: 100%;
}

.schedules-command-input {
  min-height: 84px;
  resize: vertical;
}

.schedules-cadence-controls {
  --tab-strip-bg: transparent;
  --tab-strip-border-color: transparent;
  --tab-strip-min-height: 0;
  --tab-strip-padding: 0;
  --tab-strip-active-bg: var(--theme-button-ghost-hover-bg);
  --tab-strip-item-radius: 6px;
  --tab-strip-item-padding: 8px 12px;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  border-bottom: 0;
  overflow: visible;
}

.schedules-cadence-btn.tab-strip-item {
  margin-bottom: 0;
  border-bottom-color: var(--border-bright);
}

.schedules-cadence-btn.tab-strip-item.is-active {
  border-bottom-color: color-mix(in srgb, var(--green) 42%, var(--border-bright));
}

.schedules-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
}

.schedules-preview,
.schedules-alert,
.schedules-empty,
.schedules-fire-row {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}

.schedules-preview,
.schedules-alert,
.schedules-empty {
  padding: 12px;
}

.schedules-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.schedules-preview-list span {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.schedules-alert,
.schedules-error {
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.schedules-empty {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.schedules-detail-empty {
  margin: auto;
}

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

.schedules-fire-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px;
}

.schedules-fire-actions {
  justify-content: flex-end;
}

.schedules-fire-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.schedules-fire-status {
  min-height: 18px;
}

.schedules-fire-date {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.schedules-fire-reason {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .schedules-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedules-sidebar {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .schedules-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}


/* /static/css/features/status-monitor.css */
/* darklab_shell CSS module: status-monitor
   Status Monitor modal, visual cards, active-run rows, and mobile sheet layout. */

@media (min-width: 601px) {
  .status-monitor {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(1180px, 96vw);
    max-height: min(820px, 90vh);
    z-index: 321;
    border: 1px solid var(--theme-panel-border);
    border-radius: 6px;
    box-shadow: 0 24px 60px var(--theme-panel-shadow);
    transform-origin: center;
    transform: translate(-50%, -50%);
    animation: status-monitor-modal-enter 160ms ease-out both;
  }
}

@keyframes status-monitor-modal-enter {
  from {
    opacity: 0.86;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.status-monitor-scrim {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--theme-overlay-backdrop-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.status-monitor.u-hidden,
.status-monitor-scrim.u-hidden {
  display: none !important;
}

.status-monitor-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.status-monitor-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-monitor-summary {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.status-monitor-close {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-monitor-close:hover,
.status-monitor-close:focus-visible {
  color: var(--text);
  border-color: var(--border-bright);
  outline: none;
}

.status-monitor-collapse-glyph {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}

.status-monitor-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.status-monitor-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-monitor-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.status-monitor-section-title {
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-monitor-section-meta {
  color: var(--muted);
  font-size: 9px;
}

.status-monitor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.status-monitor-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-monitor-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border-bright) 45%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--theme-chrome-row-bg) 84%, transparent);
  padding: 10px;
}

.status-monitor-card-label {
  color: var(--muted);
  font-size: 8.5px;
  text-transform: uppercase;
}

.status-monitor-card-value-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 7px;
}

.status-monitor-card-value {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-monitor-card-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.status-monitor-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 8px color-mix(in srgb, var(--muted) 30%, transparent);
}

.status-monitor-dot-ok { background: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green) 35%, transparent); }
.status-monitor-dot-warn { background: var(--amber); box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 35%, transparent); }
.status-monitor-dot-bad { background: var(--red); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 35%, transparent); }
.status-monitor-dot-idle { background: var(--muted); }

.status-monitor-card-meter {
  --status-meter-percent: 0%;
  height: 3px;
  margin-top: 9px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--green) var(--status-meter-percent),
      color-mix(in srgb, var(--border-bright) 35%, transparent) 0
    );
}

.status-monitor-card-warn .status-monitor-card-meter {
  background:
    linear-gradient(
      90deg,
      var(--amber) var(--status-meter-percent),
      color-mix(in srgb, var(--border-bright) 35%, transparent) 0
    );
}

.status-monitor-showcase {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-monitor-pulse-strip {
  --pulse-glow-opacity: 0.34;
  --pulse-glow-width: 7px;
  --pulse-beat-glow-opacity: 0.32;
  --pulse-beat-glow-width: 16px;
  --pulse-line-width: 1.8px;
  --pulse-load-color: var(--green);
  --pulse-load-alpha: 0.1;
  --pulse-load-border-alpha: 0.28;
  --pulse-load-shadow-alpha: 0.08;
  position: relative;
  min-height: 84px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pulse-load-color) calc(var(--pulse-load-border-alpha) * 100%), var(--border));
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pulse-load-color) calc(var(--pulse-load-alpha) * 100%), transparent),
      color-mix(in srgb, var(--pulse-load-color) calc(var(--pulse-load-alpha) * 42%), transparent) 56%,
      transparent
    ),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--pulse-load-color) calc(var(--pulse-load-alpha) * 58%), transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-chrome-row-bg) 92%, transparent), var(--theme-chrome-bg));
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--pulse-load-color) calc(var(--pulse-load-shadow-alpha) * 100%), transparent),
    0 0 24px color-mix(in srgb, var(--pulse-load-color) calc(var(--pulse-load-shadow-alpha) * 82%), transparent);
  transition:
    --pulse-load-color 1400ms ease,
    --pulse-load-alpha 1400ms ease,
    --pulse-load-border-alpha 1400ms ease,
    --pulse-load-shadow-alpha 1400ms ease,
    border-color 1400ms ease,
    box-shadow 1400ms ease;
}

.status-monitor-pulse-strip.status-monitor-pulse-load-resetting {
  transition: none;
}

.status-monitor-pulse-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.status-monitor-pulse-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--green) 16%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 8;
}

.status-monitor-pulse-glow,
.status-monitor-pulse-beat-glow,
.status-monitor-pulse-placeholder-line,
.status-monitor-pulse-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.status-monitor-pulse-glow {
  stroke: color-mix(in srgb, var(--green) 65%, transparent);
  stroke-width: var(--pulse-glow-width);
  filter: blur(9px);
  opacity: var(--pulse-glow-opacity);
}

.status-monitor-pulse-beat-glow {
  stroke: color-mix(in srgb, var(--green) 86%, transparent);
  stroke-width: var(--pulse-beat-glow-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(12px);
  opacity: var(--pulse-beat-glow-opacity);
}

.status-monitor-pulse-line {
  stroke: var(--green);
  stroke-width: var(--pulse-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-monitor-pulse-placeholder-line {
  stroke: color-mix(in srgb, var(--green) 48%, transparent);
  stroke-width: 1.8px;
  stroke-dasharray: 7 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.68;
}

.status-monitor-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 260px 190px;
  gap: 10px;
}

.status-monitor-visual-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-bright) 42%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-chrome-row-bg) 88%, transparent), var(--theme-chrome-bg));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--green) 5%, transparent);
}

.status-monitor-constellation-card {
  grid-column: 1 / -1;
  grid-row: auto;
}

.status-monitor-constellation-card,
.status-monitor-treemap-card,
.status-monitor-heatmap-card {
  contain: layout paint;
}

.status-monitor-visual-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 0;
}

.status-monitor-visual-title {
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-monitor-visual-meta {
  color: var(--muted);
  font-size: 9px;
}

.status-monitor-category-legend {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.status-monitor-category-legend-item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
}

.status-monitor-category-legend-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: hsl(var(--legend-hue, 120) var(--legend-saturation, 100%) 58%);
  box-shadow: 0 0 7px hsl(var(--legend-hue, 120) var(--legend-saturation, 100%) 58% / 0.48);
}

.status-monitor-category-legend-label {
  overflow: hidden;
  max-width: 54px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Constellation full-day toggle. Composes the `.toggle-btn` primitive (per
   ARCHITECTURE.md Design System) and only tightens density so the toggle
   fits inside the legend strip without overpowering the category chips. */
.status-monitor-constellation-toggle {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.status-monitor-legend-key-glyph {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.status-monitor-legend-key-glyph-failed {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1.4px solid color-mix(in srgb, var(--red) 78%, transparent);
  box-shadow: 0 0 5px color-mix(in srgb, var(--red) 64%, transparent);
}

.status-monitor-legend-star-svg {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.status-monitor-legend-star-svg-small {
  width: 8px;
  height: 8px;
}

.status-monitor-legend-star-svg-large {
  width: 14px;
  height: 14px;
}

.status-monitor-heatmap-meta-group {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.status-monitor-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.status-monitor-heatmap-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.status-monitor-constellation-plot {
  position: relative;
  height: calc(100% - 28px);
}

.status-monitor-constellation {
  display: block;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--green) 7%, transparent) 1px, transparent 1px);
  background-size: 100% 42px;
}

/* Sky backdrop for the Command Constellation. The fill is set inline via
   `url(#constellation-sky)` so the JS can rebuild the gradient stops per
   render; `pointer-events: none` keeps it inert so hover/click hit-test
   still routes to stars on top of it. */
.status-monitor-constellation-sky {
  pointer-events: none;
}

/* Seam markers between visible segments when auto-fit crops interior
   dead bands out of the X axis. The dashed vertical line + `//` glyph
   make the discontinuity legible without dominating the chart, and the
   colors are theme-relative so contrast holds in every theme. */
.status-monitor-constellation-seam {
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-width: 0.6;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.status-monitor-constellation-seam-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.6px;
  pointer-events: none;
}

.status-monitor-star-ambient {
  /* Ambient stars are pure background chrome — desaturated, no glow, no
     pointer events — so hover and keyboard activation only reach real
     stars. The hue/saturation/lightness/opacity vars are written per-star
     by the JS sampler; defaults match the desaturated-twilight palette in
     case the inline style is missing. */
  fill: hsl(var(--ambient-hue, 218) var(--ambient-saturation, 18%) var(--ambient-lightness, 60%) / var(--ambient-opacity, 0.32));
  pointer-events: none;
  transform: scaleX(var(--constellation-star-scale-x, 1));
  transform-box: fill-box;
  transform-origin: center;
}

.status-monitor-constellation-streak {
  fill: none;
  stroke: var(--star-streak-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 62% / 0.4));
  stroke-width: 1.1;
  stroke-dasharray: 2.5 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--star-streak-glow-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 58% / 0.25)));
  pointer-events: none;
}

.status-monitor-star-node-kind-error,
.status-monitor-constellation-streak-kind-error {
  --star-fill-color: var(--red);
  --star-glow-color: color-mix(in srgb, var(--red) 62%, transparent);
  --star-ring-color: color-mix(in srgb, var(--red) 80%, transparent);
  --star-ring-glow-color: color-mix(in srgb, var(--red) 62%, transparent);
  --star-streak-color: color-mix(in srgb, var(--red) 72%, transparent);
  --star-streak-glow-color: color-mix(in srgb, var(--red) 36%, transparent);
  --star-tick-color: color-mix(in srgb, var(--red) 82%, transparent);
  --star-tick-glow-color: color-mix(in srgb, var(--red) 54%, transparent);
}

.status-monitor-star-node-kind-warn,
.status-monitor-constellation-streak-kind-warn {
  --star-fill-color: var(--amber);
  --star-glow-color: color-mix(in srgb, var(--amber) 62%, transparent);
  --star-ring-color: color-mix(in srgb, var(--amber) 82%, transparent);
  --star-ring-glow-color: color-mix(in srgb, var(--amber) 62%, transparent);
  --star-streak-color: color-mix(in srgb, var(--amber) 74%, transparent);
  --star-streak-glow-color: color-mix(in srgb, var(--amber) 34%, transparent);
  --star-tick-color: color-mix(in srgb, var(--amber) 84%, transparent);
  --star-tick-glow-color: color-mix(in srgb, var(--amber) 52%, transparent);
}

.status-monitor-constellation-guide {
  pointer-events: none;
}

.status-monitor-constellation-guide-minor {
  stroke: color-mix(in srgb, var(--green) 8%, transparent);
  stroke-width: 0.55;
  stroke-dasharray: 1 11;
}

.status-monitor-constellation-guide-major {
  stroke: color-mix(in srgb, var(--green) 18%, transparent);
  stroke-width: 0.85;
  stroke-dasharray: 1.5 9;
}

.status-monitor-constellation-guide-label {
  fill: color-mix(in srgb, var(--muted) 86%, transparent);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  pointer-events: none;
}

.status-monitor-constellation-guide-label-y {
  dominant-baseline: middle;
}

.status-monitor-star {
  fill: var(--star-fill-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 58%));
  stroke: color-mix(in srgb, var(--text) 58%, transparent);
  stroke-width: 0.5;
  filter: drop-shadow(0 0 6px var(--star-glow-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 58% / var(--star-age-glow, 0.72))));
}

.status-monitor-star-failed {
  filter:
    drop-shadow(0 0 5px var(--star-glow-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 54% / var(--star-age-glow, 0.72))))
    drop-shadow(0 0 7px color-mix(in srgb, var(--red) 58%, transparent));
}

.status-monitor-star-failure-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--red) 78%, transparent);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--red) 64%, transparent));
  pointer-events: none;
}

.status-monitor-star-node {
  cursor: pointer;
  transform: scaleX(var(--constellation-star-scale-x, 1));
  transform-box: fill-box;
  transform-origin: center;
  user-select: none;
}

.status-monitor-star-ring {
  fill: none;
  stroke: var(--star-ring-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 62%));
  stroke-width: 1.2;
  opacity: 0;
  filter: drop-shadow(0 0 8px var(--star-ring-glow-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 58%)));
  pointer-events: none;
}

.status-monitor-star-hit {
  fill: transparent;
  pointer-events: all;
}

.status-monitor-star-offscale-tick {
  stroke: var(--star-tick-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 70%));
  stroke-width: 1.1;
  stroke-linecap: round;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--star-tick-glow-color, hsl(var(--star-hue, 120) var(--star-saturation, 100%) 60%)));
}

.status-monitor-star-node:hover .status-monitor-star-ring,
.status-monitor-star-node:focus .status-monitor-star-ring,
.status-monitor-star-node:focus-visible .status-monitor-star-ring {
  opacity: 0.95;
}

.status-monitor-constellation-popover {
  position: absolute;
  z-index: 3;
  width: min(280px, calc(100% - 22px));
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--border));
  border-radius: 7px;
  padding: 9px 10px;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-chrome-bg) 96%, transparent), color-mix(in srgb, var(--theme-chrome-row-bg) 96%, transparent));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--bg) 72%, transparent),
    0 0 18px color-mix(in srgb, var(--green) 18%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--green) 7%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: none;
}

.status-monitor-constellation-popover-visible {
  opacity: 1;
}

.status-monitor-heatmap-popover {
  width: min(210px, calc(100% - 22px));
}

.status-monitor-treemap-popover {
  width: min(240px, calc(100% - 22px));
}

.status-monitor-constellation-popover-below {
  transform: none;
}

.status-monitor-constellation-popover-root {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-monitor-constellation-popover-command {
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
}

.status-monitor-constellation-popover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.status-monitor-constellation-popover-meta span {
  border: 1px solid color-mix(in srgb, var(--border-bright) 38%, transparent);
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--theme-chrome-row-bg) 72%, transparent);
  font-size: 8.5px;
}

.status-monitor-constellation-sparse {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: min(330px, calc(100% - 48px));
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-radius: 999px;
  padding: 7px 12px;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-chrome-bg) 74%, transparent), color-mix(in srgb, var(--theme-chrome-row-bg) 70%, transparent));
  box-shadow:
    0 0 22px color-mix(in srgb, var(--green) 12%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--green) 5%, transparent);
  font-size: 10px;
  line-height: 1.25;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  white-space: normal;
}

.status-monitor-treemap {
  position: relative;
  height: calc(100% - 30px);
  margin: 9px 10px 10px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--theme-chrome-bg) 86%, transparent);
}

.status-monitor-treemap-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--border-bright) 58%, var(--theme-chrome-bg));
  background:
    radial-gradient(
      circle at var(--tile-glow-x, 18%) var(--tile-glow-y, 20%),
      hsl(var(--category-hue, 120) var(--category-saturation-strong, 100%) 58% / 0.42),
      transparent 54%
    ),
    linear-gradient(
      to top,
      hsl(4 88% 45% / var(--failure-alpha, 0)) 0%,
      hsl(4 88% 45% / var(--failure-alpha, 0)) var(--failure-stop, 0%),
      hsl(4 88% 45% / 0) var(--failure-fade, 14%)
    ),
    linear-gradient(
      135deg,
      hsl(var(--category-hue, 120) var(--category-saturation-mid, 82%) 28% / 0.68),
      hsl(var(--category-hue, 120) var(--category-saturation-low, 72%) 12% / 0.82)
    );
  color: var(--text);
  padding: 8px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 0 18px hsl(var(--category-hue, 120) var(--category-saturation-strong, 100%) 54% / 0.12);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
  will-change: transform;
}

.status-monitor-treemap-tile-compact {
  gap: 2px;
  padding: 6px;
}

.status-monitor-treemap-tile-tiny {
  justify-content: center;
  padding: 4px 6px;
}

.status-monitor-treemap-tile-inline {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-start;
  padding: 5px 7px;
}

.status-monitor-treemap-tile:hover,
.status-monitor-treemap-tile:focus-within {
  z-index: 2;
  border-color: color-mix(in srgb, var(--border-bright) 82%, var(--green-dim));
  box-shadow:
    inset 0 0 18px hsl(var(--category-hue, 120) var(--category-saturation-strong, 100%) 54% / 0.18),
    0 8px 18px color-mix(in srgb, var(--bg) 52%, transparent);
  transform: translateY(-1px);
}

.status-monitor-treemap-root {
  min-width: 0;
  font-size: clamp(9px, 1.2vw, 15px);
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 10px color-mix(in srgb, var(--bg) 80%, transparent);
}

.status-monitor-treemap-tile-compact .status-monitor-treemap-root {
  font-size: clamp(8px, 0.82vw, 11px);
  line-height: 1.05;
}

.status-monitor-treemap-tile-tiny .status-monitor-treemap-root {
  font-size: clamp(8px, 0.72vw, 10px);
  line-height: 1;
}

.status-monitor-treemap-tile-inline .status-monitor-treemap-root {
  flex: 0 1 auto;
  max-width: 56%;
  font-size: clamp(8px, 0.82vw, 11px);
  line-height: 1;
}

.status-monitor-treemap-detail {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-size: 9px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-monitor-treemap-tile-compact .status-monitor-treemap-detail {
  font-size: 8px;
}

.status-monitor-treemap-tile-inline .status-monitor-treemap-detail {
  flex: 1 1 auto;
  font-size: 8px;
  line-height: 1;
}

.status-monitor-treemap-tile-tiny .status-monitor-treemap-detail {
  display: none;
}

.status-monitor-heatmap-body {
  position: relative;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  grid-template-rows: 12px minmax(0, 1fr);
  gap: 2px 5px;
  height: calc(100% - 40px);
  margin: 7px 12px 12px;
}

.status-monitor-heatmap-months {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(var(--status-heatmap-weeks, 4), minmax(4px, 1fr));
  align-items: end;
  min-width: 0;
}

.status-monitor-heatmap-month {
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-monitor-heatmap-weekdays {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: repeat(7, 1fr);
  align-items: center;
}

.status-monitor-heatmap-weekday {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: 7.5px;
  line-height: 1;
  text-transform: uppercase;
}

.status-monitor-heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(var(--status-heatmap-weeks, 4), minmax(4px, 1fr));
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  min-width: 0;
}

.status-monitor-heatmap-cell {
  min-width: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--border-bright) 22%, transparent);
  outline: none;
}

.status-monitor-heatmap-cell:hover,
.status-monitor-heatmap-cell:focus-visible {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 54%, transparent),
    0 0 10px color-mix(in srgb, var(--green) 28%, transparent);
}

.status-monitor-heatmap-level-1 { background: color-mix(in srgb, var(--green) 26%, var(--theme-chrome-bg)); }
.status-monitor-heatmap-level-2 { background: color-mix(in srgb, var(--green) 46%, var(--theme-chrome-bg)); }
.status-monitor-heatmap-level-3 { background: color-mix(in srgb, var(--green) 68%, var(--theme-chrome-bg)); box-shadow: 0 0 5px color-mix(in srgb, var(--green) 16%, transparent); }
.status-monitor-heatmap-level-4 { background: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green) 36%, transparent); }

.status-monitor-heatmap-legend-swatch.status-monitor-heatmap-level-0 {
  background: color-mix(in srgb, var(--border-bright) 22%, transparent);
}

.status-monitor-heatmap-out-of-range {
  background: color-mix(in srgb, var(--theme-chrome-bg) 78%, var(--border-bright)) !important;
  box-shadow: none;
  opacity: 0.45;
}

.status-monitor-visual-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.status-monitor-event-ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  contain: paint;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-chrome-row-bg) 78%, transparent);
  padding: 7px 9px;
}

.status-monitor-event-label {
  color: var(--amber);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-monitor-event-track {
  min-width: 0;
  overflow: hidden;
  contain: paint;
  transform: translateZ(0);
}

.status-monitor-event-row {
  display: inline-flex;
  gap: 18px;
  width: max-content;
  white-space: nowrap;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: status-monitor-event-scroll 34s linear infinite;
}

.status-monitor-event-item {
  color: var(--muted);
  font-size: 10px;
}

.status-monitor-event-item::before {
  content: '▸ ';
  color: var(--green);
}

.status-monitor-event-failed::before {
  color: var(--red);
}

@keyframes status-monitor-event-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.status-monitor-runs-list {
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--border-bright) 35%, transparent);
  border-radius: 6px;
  overflow: hidden;
}

.status-monitor-runs-section {
  margin-top: 2px;
}

.status-monitor-item {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(230px, 1.05fr) minmax(200px, auto);
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 14px 16px 14px 20px;
  border: 0;
  border-radius: 0;
}

.status-monitor-runs-list-medium .status-monitor-item {
  grid-template-columns: minmax(200px, 0.95fr) minmax(210px, 1fr) minmax(190px, auto);
  min-height: 98px;
  padding-block: 12px;
}

.status-monitor-runs-list-many .status-monitor-item {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(170px, auto);
  min-height: 82px;
  padding-block: 10px;
}

.status-monitor-runs-list .status-monitor-item + .status-monitor-item {
  border-top: 1px solid var(--theme-chrome-divider-color);
}

.status-monitor-details {
  min-width: 0;
}

.status-monitor-command {
  color: var(--green);
  text-shadow: 0 0 8px color-mix(in srgb, var(--green) 20%, transparent);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.status-monitor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.status-monitor-meta-chip {
  min-width: 0;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--green) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 8%, var(--theme-chrome-bg));
  color: var(--green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-monitor-meta-chip-ok {
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  color: var(--green);
}

.status-monitor-meta-chip-warn {
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  color: var(--amber);
}

.status-monitor-meta-chip-tab {
  color: var(--green);
}

.status-monitor-pty-note {
  margin-top: 7px;
  color: var(--amber);
  font-size: 10px;
  line-height: 1.35;
}

.status-monitor-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0;
}

.status-monitor-spark-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.status-monitor-spark-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-monitor-spark-title {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.status-monitor-sparkline {
  width: 100%;
  height: 42px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--green) 5%, transparent), transparent 58%),
    color-mix(in srgb, var(--theme-chrome-bg) 78%, transparent);
}

.status-monitor-sparkline-grid,
.status-monitor-sparkline-cpu,
.status-monitor-sparkline-mem {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.status-monitor-sparkline-grid {
  stroke: color-mix(in srgb, var(--border-bright) 35%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.status-monitor-sparkline-cpu {
  stroke: var(--green);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--green) 48%, transparent));
}

.status-monitor-sparkline-mem {
  stroke: var(--amber);
  stroke-width: 1.4;
  opacity: 0.88;
}

.status-monitor-spark-label {
  color: var(--muted);
  font-size: 8.5px;
  white-space: nowrap;
}

.status-monitor-action-btn {
  min-width: 62px;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10px;
}

.status-monitor-action-btn-kill {
  border-color: color-mix(in srgb, var(--red) 72%, var(--border));
}

.status-monitor-action-btn-disabled {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--border));
  color: var(--amber);
}

.status-monitor-elapsed {
  color: var(--green);
  font-weight: 700;
}

.status-monitor-meter-rail {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.status-monitor-meter-rail .status-monitor-actions {
  justify-content: flex-end;
}

.status-monitor-meters {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.status-monitor-meter {
  --meter-percent: 0%;
  --meter-color: var(--green);
  display: grid;
  grid-template-columns: 54px;
  justify-items: center;
  gap: 4px;
}

.status-monitor-runs-list-medium .status-monitor-meter {
  grid-template-columns: 50px;
}

.status-monitor-runs-list-medium .status-monitor-meter-ring {
  width: 50px;
  height: 50px;
}

.status-monitor-runs-list-many .status-monitor-sparkline {
  height: 32px;
}

.status-monitor-runs-list-many .status-monitor-spark-header {
  gap: 8px;
}

.status-monitor-runs-list-many .status-monitor-spark-title {
  font-size: 8.5px;
}

.status-monitor-runs-list-many .status-monitor-meter {
  grid-template-columns: 40px;
}

.status-monitor-runs-list-many .status-monitor-meter-ring {
  width: 40px;
  height: 40px;
}

.status-monitor-runs-list-many .status-monitor-meter-value {
  max-width: 34px;
  font-size: 8.5px;
}

.status-monitor-meter-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--meter-color) var(--meter-percent),
      color-mix(in srgb, var(--border-bright) 40%, transparent) 0
    );
  padding: 3px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--meter-color) 16%, transparent);
}

.status-monitor-meter-mem {
  --meter-color: var(--amber);
}

.status-monitor-meter-ring::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--theme-chrome-row-bg);
  border: 1px solid color-mix(in srgb, var(--border-bright) 42%, transparent);
}

.status-monitor-meter-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-monitor-meter-label {
  color: var(--muted);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.status-monitor-meter-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  max-width: 48px;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-monitor-meter-cpu .status-monitor-meter-value {
  color: var(--green);
}

.status-monitor-meter-cpu .status-monitor-meter-label {
  color: var(--green);
}

.status-monitor-meter-mem .status-monitor-meter-label,
.status-monitor-meter-mem .status-monitor-meter-value {
  color: var(--amber);
}

.status-monitor-meter-collecting .status-monitor-meter-ring {
  animation: status-monitor-meter-spin 960ms linear infinite;
}

@keyframes status-monitor-meter-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .status-monitor-meter-collecting .status-monitor-meter-ring {
    animation: none;
  }

  .status-monitor-event-row {
    animation: none;
  }
}

.status-monitor-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.status-monitor-runs-empty {
  background: color-mix(in srgb, var(--theme-chrome-row-bg) 78%, transparent);
}

.status-monitor-error {
  color: var(--red);
}

/* ============================================================
   Mobile: hide the desktop chrome and let the stacked layout
   (mobile.css + mobile-terminal-mode re-parenting) take over.
   ============================================================ */

@media (max-width: 600px) {
  .shell-root, .main-col, .tabbar-scroll { display: contents; }
  .rail, .hud, .tabbar-chrome { display: none !important; }
}

body.mobile-terminal-mode .rail,
body.mobile-terminal-mode .hud,
body.mobile-terminal-mode .tabbar-chrome { display: none !important; }

body.mobile-terminal-mode .shell-root,
body.mobile-terminal-mode .main-col,
body.mobile-terminal-mode .tabbar-scroll { display: contents; }

@media (max-width: 600px) {
  .status-monitor {
    position: fixed;
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: min(68vh, 520px);
    z-index: 120;
    display: flex;
    flex-direction: column;
    background: var(--theme-chrome-bg);
    border: 1px solid var(--border-bright);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 28px var(--theme-chrome-shadow);
    font-family: var(--font-mono);
    transform: none;
    animation: none;
  }

  .status-monitor-list {
    gap: 12px;
    padding: 12px;
  }

  .status-monitor-grid,
  .status-monitor-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-monitor-pulse-strip {
    min-height: 76px;
    /*
     * The pulse SVG runs `preserveAspectRatio: 'xMidYMid slice'` on mobile so
     * beats render at native aspect (1 viewBox unit ≈ 1 CSS pixel) instead of
     * the X-compressed `none` mode used on desktop. The generated glow paths
     * scale their inline widths in status_monitor.js for mobile; keep the visible
     * line itself a touch thinner here.
     */
    --pulse-line-width: 1.5px;
  }

  /*
   * iOS Safari (3x DPR) silently drops or hard-masks CSS `filter: blur()`
   * on SVG paths that have `vector-effect: non-scaling-stroke` — the halo
   * renders as a concentric solid band instead of a Gaussian falloff. The
   * non-scaling-stroke is only needed because of desktop's `preserveAspectRatio:
   * 'none'` X-compression; under mobile's slice mode the path renders at 1:1
   * already. Drop it on mobile and force the glow layers onto a GPU
   * compositing layer so iOS Safari rasterizes the blur properly.
   */
  .status-monitor-pulse-glow,
  .status-monitor-pulse-beat-glow {
    vector-effect: none;
    transform: translateZ(0);
    will-change: filter;
  }

  .status-monitor-pulse-line {
    filter:
      drop-shadow(0 0 2px color-mix(in srgb, var(--green) 82%, transparent))
      drop-shadow(0 0 7px color-mix(in srgb, var(--green) 48%, transparent));
  }

  .status-monitor-showcase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 240px 190px 126px;
  }

  .status-monitor-constellation-card {
    grid-column: auto;
    grid-row: auto;
  }

  .status-monitor-item {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }

  .status-monitor-spark-panel {
    width: 100%;
  }

  .status-monitor-sparkline {
    height: 34px;
  }

  .status-monitor-meter-rail {
    align-self: stretch;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .status-monitor-meters {
    align-self: auto;
  }

  .status-monitor-scrim {
    z-index: 119;
    background: color-mix(in srgb, var(--bg) 45%, transparent);
  }

  body.status-monitor-mobile-open .status-monitor-close {
    display: none !important;
  }
}

body.mobile-terminal-mode .status-monitor {
  position: fixed;
  left: 0;
  top: auto;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: min(68vh, 520px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--theme-chrome-bg);
  border: 1px solid var(--border-bright);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 28px var(--theme-chrome-shadow);
  font-family: var(--font-mono);
  transform: none;
  animation: none;
}

body.mobile-terminal-mode .status-monitor-list {
  gap: 12px;
  padding: 12px;
}

body.mobile-terminal-mode .status-monitor-grid,
body.mobile-terminal-mode .status-monitor-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.mobile-terminal-mode .status-monitor-pulse-strip {
  min-height: 76px;
}

body.mobile-terminal-mode .status-monitor-showcase-grid {
  grid-template-columns: 1fr;
  grid-template-rows: 240px 190px 126px;
}

body.mobile-terminal-mode .status-monitor-constellation-card {
  grid-column: auto;
  grid-row: auto;
}

body.mobile-terminal-mode .status-monitor-item {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

body.mobile-terminal-mode .status-monitor-spark-panel {
  width: 100%;
}

body.mobile-terminal-mode .status-monitor-sparkline {
  height: 34px;
}

body.mobile-terminal-mode .status-monitor-meter-rail {
  align-self: stretch;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

body.mobile-terminal-mode .status-monitor-meters {
  align-self: auto;
}

body.mobile-terminal-mode .status-monitor-scrim {
  z-index: 119;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}

body.status-monitor-mobile-open .status-monitor-close {
  display: none !important;
}


/* /static/css/features/watchers.css */
/* Watchers modal and change-detection controls. */

#watchers-modal {
  width: min(1180px, 94vw);
  max-height: min(860px, 92vh);
  background: var(--theme-modal-bg);
}

.watchers-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.watchers-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: 560px;
  border-top: 1px solid var(--border);
}

.watchers-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.watchers-sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.watchers-sidebar-toolbar .btn:first-child {
  flex: 1 1 auto;
}

.watchers-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.watchers-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 12px;
}

.watchers-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  width: 100%;
  min-height: 76px;
  padding: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.watchers-list-row:hover,
.watchers-list-row:focus-visible {
  border-color: var(--border-bright);
  outline: none;
}

.watchers-list-row.active {
  border-color: var(--green);
  background: var(--theme-button-ghost-hover-bg);
}

.watchers-list-title,
.watchers-detail-title {
  overflow: hidden;
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchers-list-title {
  grid-column: 1 / -1;
  font-size: 13px;
}

.watchers-list-meta,
.watchers-muted,
.watchers-fire-summary {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
}

.watchers-list-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchers-list-status {
  justify-self: end;
}

.watchers-detail {
  min-width: 0;
  overflow: auto;
}

.watchers-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.watchers-detail-header,
.watchers-section-header,
.watchers-detail-actions,
.watchers-pager,
.watchers-fire-main,
.watchers-fire-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.watchers-section-header,
.watchers-detail-actions,
.watchers-pager,
.watchers-fire-main,
.watchers-fire-actions {
  flex-wrap: wrap;
}

.watchers-detail-header {
  justify-content: space-between;
}

.watchers-detail-title {
  min-width: 0;
  font-size: 18px;
}

.watchers-form,
.watchers-fires,
.watchers-options,
.watchers-policy,
.watchers-diff {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.watchers-field {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.watchers-field-label,
.watchers-section-kicker,
.watchers-section-header h3 {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.watchers-section-header h3 {
  margin: 0;
}

.watchers-field-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: visible;
}

.watchers-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.watchers-help-trigger {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}

.watchers-help-card {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, 72vw);
  padding: 12px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  white-space: normal;
}

.watchers-input,
.watchers-command-input,
.watchers-select {
  width: 100%;
}

.watchers-command-input {
  min-height: 84px;
  resize: vertical;
}

.watchers-cadence-controls {
  --tab-strip-bg: transparent;
  --tab-strip-border-color: transparent;
  --tab-strip-min-height: 0;
  --tab-strip-padding: 0;
  --tab-strip-active-bg: var(--theme-button-ghost-hover-bg);
  --tab-strip-item-radius: 6px;
  --tab-strip-item-padding: 8px 12px;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  border-bottom: 0;
  overflow: visible;
}

.watchers-cadence-btn.tab-strip-item {
  margin-bottom: 0;
  border-bottom-color: var(--border-bright);
}

.watchers-cadence-btn.tab-strip-item.is-active {
  border-bottom-color: color-mix(in srgb, var(--green) 42%, var(--border-bright));
}

.watchers-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
}

.watchers-policy-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.watchers-preview,
.watchers-alert,
.watchers-empty,
.watchers-fire-row {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}

.watchers-preview,
.watchers-alert,
.watchers-empty {
  padding: 12px;
}

.watchers-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.watchers-preview-list span {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.watchers-alert,
.watchers-error {
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 12px;
}

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

.watchers-fire-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
}

.watchers-fire-actions {
  justify-content: flex-end;
}

.watchers-fire-summary {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.watchers-fire-details {
  grid-column: 1 / -1;
}

.watchers-fire-details > summary {
  width: max-content;
  max-width: 100%;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

.watchers-fire-details .watchers-diff {
  margin-top: 10px;
}

.watchers-fire-date {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.watchers-diff-metrics {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.watchers-detail-empty {
  min-height: 120px;
}

@media (max-width: 760px) {
  #watchers-modal {
    width: 100%;
    max-height: 92vh;
  }

  .watchers-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .watchers-sidebar {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .watchers-field {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }

  .watchers-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* /static/css/features/workflows.css */
/* Workflows modal, workflow cards, editor, and rendered step controls. */



.workflows-body {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}



.workflow-step-cmd.allowed-chip {
  justify-self: start;
  max-width: min(42vw, 460px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: inset 0 -1px 0 var(--border-bright);
}



.workflow-step-cmd.allowed-chip:hover,
.workflow-step-cmd.allowed-chip:focus-visible {
  color: var(--green);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--green-dim), 0 5px 18px var(--green-glow);
  outline: none;
}


body #workflows-modal {
  background: var(--theme-modal-bg);
}



/* ── Workflows overlay & modal ────────────────────────────────────── */
#workflows-modal {
  width: min(960px, 92vw);
}



.workflow-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}



/* ── Workflow cards ───────────────────────────────────────────────── */
.workflow-card {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
}



.workflow-section-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}



.workflow-card.is-user-workflow {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
}



.workflow-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
}



.workflow-card-toggle-icon {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
}



.workflow-card-toggle:hover .workflow-card-toggle-icon,
.workflow-card-toggle:focus-visible .workflow-card-toggle-icon {
  color: var(--green);
}



.workflow-card.is-collapsed .workflow-card-toggle-icon {
  transform: rotate(-90deg);
}



.workflow-card.is-collapsed .workflow-card-body {
  display: none;
}



.workflow-card-body {
  margin-top: 6px;
}



.workflow-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}



.workflow-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.3px;
  margin-bottom: 0;
}



.workflow-source-badge {
  flex: 0 0 auto;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  text-transform: lowercase;
}



.workflow-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 12px;
}



.workflow-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 14px;
}



.workflow-input-panel {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}



.workflow-input-intro,
.workflow-input-hint {
  font-size: 12px;
  line-height: 1.6;
}



.workflow-input-intro {
  color: var(--muted);
  margin-bottom: 10px;
}



.workflow-input-hint {
  color: var(--muted);
  margin-top: 10px;
}



.workflow-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}



.workflow-input-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}



.workflow-input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}



.workflow-input-label {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}



.workflow-input-help {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}



.workflow-editor {
  width: min(760px, 92vw);
}



.workflow-editor-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}



.workflow-editor-field,
.workflow-editor-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}



.workflow-editor-help,
.workflow-editor-msg,
.workflow-editor-variable-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}



.workflow-editor-msg.is-error {
  color: var(--red);
}



.workflow-editor-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}



.workflow-editor-step {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 12px;
}



.workflow-editor-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}



.workflow-editor-step-title {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}



.workflow-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}



.workflow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: workflow-step;
}



.workflow-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 8px;
  row-gap: 4px;
  counter-increment: workflow-step;
}



.workflow-step::before {
  content: counter(workflow-step) '.';
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
  padding-top: 3px;
  grid-row: 1;
  grid-column: 1;
}



.workflow-step-main {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}



.workflow-step-cmd {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  overflow-wrap: anywhere;
}



.workflow-step-cmd.is-disabled {
  opacity: 0.72;
  cursor: default;
}



.workflow-step-cmd.allowed-chip.is-disabled,
.workflow-step-cmd.allowed-chip.is-disabled:hover,
.workflow-step-cmd.allowed-chip.is-disabled:focus-visible {
  color: var(--muted);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--border-bright);
}



.workflow-step-run {
  flex-shrink: 0;
  font-size: 9px;
  line-height: 1;
}



.workflow-step-note {
  grid-row: 2;
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  body.mobile-terminal-mode .workflows-body,
  body.mobile-terminal-mode .workflow-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-terminal-mode .workflows-body {
    gap: 10px;
    padding: 14px;
  }

  body.mobile-terminal-mode .workflow-header-actions {
    margin-left: auto;
  }

  body.mobile-terminal-mode .workflow-editor {
    min-height: 68svh;
  }

  body.mobile-terminal-mode .workflow-editor-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  }

  body.mobile-terminal-mode .workflow-card {
    padding: 0;
    overflow: hidden;
  }

  body.mobile-terminal-mode .workflow-card-toggle {
    min-height: 44px;
    padding: 12px 14px;
  }

  body.mobile-terminal-mode .workflow-card-body {
    margin-top: 0;
    padding: 0 14px 14px;
  }

  body.mobile-terminal-mode .workflow-input-panel {
    padding: 10px;
  }

  body.mobile-terminal-mode .workflow-steps {
    gap: 12px;
  }

  body.mobile-terminal-mode .workflow-step {
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 6px;
  }

  body.mobile-terminal-mode .workflow-step-main {
    align-items: flex-start;
    gap: 6px;
  }

  body.mobile-terminal-mode .workflow-step-cmd {
    box-sizing: border-box;
    display: inline;
    min-width: 0;
    width: fit-content;
    padding: 0;
    border-radius: 0;
    white-space: normal;
    line-height: 1.45;
    text-align: left;
  }

  body.mobile-terminal-mode .workflow-step-run {
    margin-top: 1px;
  }
}


/* /static/css/features/workspace.css */
/* darklab_shell CSS module: workspace
   Files modal, viewer/editor, workspace rows, and workspace metadata chips. */

.workspace-body {
  overflow-y: auto;
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workspace-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.workspace-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workspace-refresh-btn {
  flex: 0 0 22px;
  height: 22px;
  min-height: 22px;
  min-width: 22px;
  padding: 0;
  width: 22px;
}

.workspace-refresh-glyph {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 18px;
  height: 1em;
  justify-content: center;
  line-height: 1;
  transform-origin: center;
  width: 1em;
}

.workspace-viewer-refresh-btn.is-refreshing .workspace-refresh-glyph,
.workspace-viewer-auto-refresh-toggle.is-refreshing .workspace-auto-refresh-glyph {
  color: transparent;
  position: relative;
}

.workspace-viewer-refresh-btn.is-refreshing .workspace-refresh-glyph::before,
.workspace-viewer-auto-refresh-toggle.is-refreshing .workspace-auto-refresh-glyph::before,
.workspace-preview-loading::before {
  animation: workspace-refresh-spin 700ms linear infinite;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 999px;
  box-sizing: border-box;
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  height: 14px;
  transform-origin: center;
  width: 14px;
}

.workspace-viewer-refresh-btn.is-refreshing .workspace-refresh-glyph::before,
.workspace-viewer-auto-refresh-toggle.is-refreshing .workspace-auto-refresh-glyph::before {
  color: var(--text);
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
}

@keyframes workspace-refresh-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.workspace-heading {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-subtitle,
.workspace-file-details {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.workspace-message {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 12px;
}

.workspace-message-error {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
  color: var(--red);
}

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

.workspace-breadcrumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.workspace-breadcrumb-separator {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.workspace-folder-row {
  border-color: color-mix(in srgb, var(--muted) 30%, var(--border));
}

.workspace-folder-icon,
.workspace-parent-icon {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 15px;
}

.workspace-file-meta {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.workspace-file-meta-text {
  min-width: 0;
}

.workspace-metadata-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.workspace-metadata-chip {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  max-width: 180px;
  min-height: 20px;
  overflow: hidden;
  padding: 3px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-metadata-chip.is-label {
  border-color: color-mix(in srgb, var(--green) 44%, var(--border));
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

.workspace-metadata-chip.is-note {
  border-color: color-mix(in srgb, var(--amber) 44%, var(--border));
  color: color-mix(in srgb, var(--amber) 76%, var(--text));
}

.workspace-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 16px;
}

.workspace-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
}

.workspace-file-row[draggable="true"] {
  cursor: grab;
}

.workspace-file-row.workspace-dragging {
  opacity: 0.56;
}

.workspace-folder-row.workspace-drop-target {
  border-color: color-mix(in srgb, var(--green) 72%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 38%, transparent);
}

.workspace-file-name {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-word;
}

.workspace-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workspace-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workspace-viewer-auto-refresh-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--green) 55%, var(--border));
  color: var(--text);
}

.workspace-viewer-auto-refresh-toggle[aria-pressed="false"] {
  color: var(--muted);
}

.workspace-viewer-auto-refresh-toggle[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
}

.workspace-auto-refresh-glyph {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 15px;
  height: 1em;
  justify-content: center;
  line-height: 1;
  transform-origin: center;
  width: 1em;
}

.workspace-editor,
.workspace-viewer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.workspace-editor.u-hidden,
#workspace-viewer.u-hidden {
  display: none;
}

.workspace-viewer-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.workspace-viewer-text {
  background: var(--theme-chrome-control-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-height: min(68vh, 680px);
  min-height: min(58vh, 560px);
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.workspace-viewer-text.workspace-viewer-json {
  white-space: pre;
  word-break: normal;
}

.workspace-viewer-mode-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-viewer-controls:empty {
  display: none;
}

.workspace-viewer-controls {
  min-width: 0;
}

.workspace-preview-kind,
.workspace-preview-subtitle {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-line-preview {
  display: grid;
  gap: 4px;
  min-width: max-content;
}

.workspace-viewer-search.search-bar {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  min-width: min(100%, 720px);
  padding: 6px;
}

.workspace-viewer-search.search-bar input {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 30px;
  padding: 0 8px;
}

.workspace-viewer-search.search-bar > input {
  flex: 1 1 240px;
  min-width: 180px;
}

.workspace-line-row {
  display: grid;
  grid-template-columns: minmax(4ch, var(--workspace-line-number-width, 4ch)) minmax(0, 1fr);
  min-height: 20px;
}

.workspace-line-number {
  color: var(--muted);
  min-width: 0;
  padding-right: 12px;
  text-align: right;
  user-select: none;
  white-space: nowrap;
}

.workspace-line-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.workspace-preview-notice {
  color: var(--muted);
  font-family: var(--font-mono);
  padding: 8px 0;
  white-space: normal;
}

.workspace-preview-loading {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.workspace-preview-loading::before {
  color: currentcolor;
}

.workspace-viewer-table-wrap {
  white-space: normal;
  word-break: normal;
}

.workspace-table-preview {
  min-width: max-content;
}

.workspace-preview-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 100%;
}

.workspace-preview-table th,
.workspace-preview-table td {
  border: 1px solid var(--border);
  max-width: 36ch;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.workspace-preview-table th {
  background: var(--theme-chrome-row-bg);
  color: var(--green);
  position: sticky;
  top: 0;
  z-index: 1;
}

.workspace-http-preview {
  display: grid;
  gap: 12px;
  white-space: normal;
}

.workspace-http-status {
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 700;
}

.workspace-http-headers {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.workspace-http-headers dt,
.workspace-http-headers dd {
  border-top: 1px solid var(--border);
  margin: 0;
  padding: 6px 8px;
}

.workspace-http-headers dt {
  color: var(--muted);
  font-family: var(--font-mono);
}

.workspace-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workspace-textarea {
  min-height: clamp(220px, 40vh, 420px);
  resize: vertical;
}

.workspace-notes-textarea {
  min-height: 64px;
  resize: vertical;
}

.workspace-path-readonly {
  color: var(--muted);
}

.workspace-folder-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 16px;
}

.workspace-folder-form .form-input {
  width: 100%;
}

.workspace-folder-error {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}

.workspace-editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .workspace-file-row,
  .workspace-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .workspace-file-actions,
  .workspace-editor-actions,
  .workspace-toolbar-actions,
  .workspace-viewer-actions,
  .workspace-viewer-header {
    justify-content: flex-start;
  }
  .workspace-viewer-header {
    align-items: stretch;
    flex-direction: column;
  }
}

#theme-overlay {
  align-items: stretch;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--theme-overlay-backdrop-bg) 24%, transparent);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}


/* /static/css/mobile-chrome.css */
/* Mobile chrome — progress bar, recents peek + pull-up sheet,
   bottom-sheet menu, and keyboard-aware edit helper. All rules scoped under
   body.mobile-terminal-mode so they never leak into desktop. Relies on the
   theme variables declared in base.css + app/conf/themes/*.yaml. */

@keyframes shell-m-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes shell-m-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shell-m-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes shell-m-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Prevent the browser's native pull-to-refresh / overscroll bounce while in
   mobile terminal mode. A terminal has no refresh semantics — reloading
   destroys session state — and without this, a finger that lands above a
   bottom sheet's grab handle can start a page reload gesture instead of a
   sheet-close drag. iOS Safari and Firefox only honor `overscroll-behavior`
   on the actual scroll-root element, which is `html` (not `body`) for this
   document, so the rule has to be hung off `html` via :has() rather than
   nested inside the body scope below. */
html:has(body.mobile-terminal-mode) {
  overscroll-behavior-y: contain;
}

body.mobile-terminal-mode {
  /* Defense-in-depth duplicate of the html rule above for engines that treat
     body as the scroll root. */
  overscroll-behavior-y: contain;

  /* u-hidden escape hatch: the scoped rules below set display:flex / :block on
     the sheets and helper rows and win on specificity against the base
     .u-hidden utility. Re-assert display:none for the hidden state. */
  .recent-peek.u-hidden,
  .kb-helper.u-hidden,
  .recents-sheet.u-hidden,
  .recents-sheet-scrim.u-hidden,
  .menu-sheet.u-hidden,
  .menu-sheet-scrim.u-hidden,
  .menu-sheet .menu-submenu.u-hidden,
  .recents-sheet .sheet-filter-expanded.u-hidden {
    display: none;
  }

  /* Thin amber slide under the header while a command is running. */
  .shell-progress-bar {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--amber) 16%, transparent);
  }
  .shell-progress-bar::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      var(--amber) 40%,
      transparent 80%
    );
    animation: shell-m-progress-slide 1.4s ease-in-out infinite;
  }

  /* Single source of truth for every mobile bottom-sheet gesture handle.
     Behavior is wired in app/static/js/ui/mobile_sheet.js::bindMobileSheet —
     visual + cursor + touch-action + brighten on press all live here so the
     menu, recents, history panel, workflows, FAQ, options, kill, hist-del,
     and share-redaction sheets cannot drift. Outside mobile-terminal-mode the
     scope above keeps the bar invisible on desktop modals. */
  .gesture-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Generous vertical padding around the visible bar so thumb-near-misses
       in either direction still register as a sheet drag rather than a
       browser overscroll gesture or a tap on the row beneath the handle. */
    padding: 20px 0;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
  }
  .gesture-handle:active { cursor: grabbing; }
  .gesture-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-bright);
    transition: background 120ms ease;
  }
  .gesture-handle:hover::before,
  .gesture-handle:active::before {
    background: var(--text);
  }

  /* Recent peek row sits between transcript and composer while idle. */
  .recent-peek {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-top: 1px solid var(--border);
    background: var(--theme-chrome-bg);
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease;
  }
  .recent-peek::before {
    content: '';
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--green) 5%, transparent);
    opacity: 0;
    transition: opacity 140ms ease;
    pointer-events: none;
  }
  .recent-peek:hover::before { opacity: 0.6; }
  .recent-peek:active::before { opacity: 1; }
  .recent-peek:active {
    background: var(--theme-chrome-row-hover-bg);
  }
  .recent-peek[data-peek-mode="status-monitor"] {
    border-top-color: color-mix(in srgb, var(--green) 42%, var(--border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--green) 18%, transparent);
  }
  .recent-peek[data-peek-mode="status-monitor"]::before {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    opacity: 0.65;
  }
  .recent-peek .recent-peek-handle {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-bright);
    flex: 0 0 auto;
  }
  .recent-peek .recent-peek-label {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .recent-peek .recent-peek-count {
    color: var(--muted);
    font-size: 9.5px;
    letter-spacing: 0.5px;
  }
  .recent-peek .recent-peek-preview {
    flex: 1;
    color: var(--muted);
    font-size: 10.5px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recent-peek[data-peek-mode="status-monitor"] .recent-peek-handle {
    background: color-mix(in srgb, var(--green) 72%, var(--border-bright));
  }
  .recent-peek[data-peek-mode="status-monitor"] .recent-peek-label {
    color: var(--green);
  }
  .recent-peek[data-peek-mode="status-monitor"] .recent-peek-count {
    color: var(--green);
  }
  .recent-peek.recent-peek-status-monitor-wiggle {
    animation: mobile-status-monitor-peek-wiggle 0.62s ease-in-out 3;
  }
  @keyframes mobile-status-monitor-peek-wiggle {
    0%, 100% { transform: translateY(0); }
    38% { transform: translateY(-7px); }
    62% { transform: translateY(2px); }
  }
  .recent-peek.hidden { display: none; }

  &.mobile-keyboard-open .recent-peek,
  &.mobile-keyboard-open .terminal-actions {
    display: none;
  }

  /* The legacy top-of-page "Recent:" chip row is replaced on mobile by the
     pull-up recents sheet (opened from the bottom peek bar). Hide it so we
     don't render two overlapping recents surfaces. */
  #history-row { display: none !important; }

  /* Pull-up recents sheet (opens when the peek row is tapped). The scrim sits
     above the mobile-terminal sticky header (z-index 90) so tapping anywhere
     outside the sheet — including the visually dimmed header band — hits the
     scrim's bindDismissible click handler and closes the sheet. The sheet
     itself stacks one step above the scrim so its own controls remain
     interactive. */
  .recents-sheet-scrim {
    position: fixed; inset: 0;
    background: var(--theme-history-load-overlay-bg, rgba(0,0,0,0.76));
    z-index: 100;
    animation: shell-m-fade-in 200ms ease;
  }
  .recents-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 101;
    max-height: 86dvh;
    animation: shell-m-sheet-in 240ms ease;
  }
  .recents-sheet .sheet-title-label {
    color: var(--green);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .recents-sheet .sheet-title-spacer { flex: 1; }
  .recents-sheet .sheet-filters {
    padding: 0 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-bottom: 1px solid var(--border);
  }
  .recents-sheet .sheet-filter-row {
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* iOS Safari auto-zooms any input with font-size < 16px on focus. */
  .recents-sheet #mobile-recents-search,
  .recents-sheet #mobile-recents-filter-root {
    font-size: 16px;
  }
  .recents-sheet .sheet-filter-toggle {
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
  }
  .recents-sheet .sheet-filter-toggle[aria-expanded="true"] {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 50%, transparent);
  }
  /* Surface-specific tweaks for the disclosure primitive on the filters
     toggle. Colour matches the muted convention used by .menu-sheet, and a
     small translateY pulls the glyph onto the visual centerline of the
     shorter row (the ▸ codepoint renders in the upper half of its em-box). */
  .recents-sheet .sheet-filter-toggle .disclosure-chev {
    color: var(--border-bright);
    transform: translateY(2px);
  }
  .recents-sheet .sheet-filter-toggle[aria-expanded="true"] .disclosure-chev {
    transform: translateY(2px) rotate(90deg);
  }
  .recents-sheet .sheet-filter-expanded {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .recents-sheet button.sheet-filter-row {
    font-family: inherit;
    cursor: pointer;
    text-align: left;
  }
  .recents-sheet .sheet-filter-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .recents-sheet .sheet-filter-input input::placeholder {
    color: var(--muted);
    opacity: 0.7;
  }
  .recents-sheet .sheet-filter-input.active .sheet-filter-label,
  .recents-sheet .sheet-filter-input.active input {
    color: var(--green);
  }

  /* App-style custom dropdown. Shared dropdown primitives own the common
     surface/item treatment; the sheet keeps placement and mobile sizing. */
  .recents-sheet .sheet-filter-dropdown-wrap {
    position: relative;
  }
  .recents-sheet .sheet-filter-dropdown {
    width: 100%;
  }
  .recents-sheet .sheet-filter-dropdown-wrap.active .sheet-filter-value {
    color: var(--green);
  }
  .recents-sheet .sheet-filter-dropdown-wrap.open .sheet-filter-caret {
    transform: rotate(180deg);
  }
  .recents-sheet .sheet-filter-caret {
    transition: transform 120ms ease;
    display: inline-block;
  }
  .recents-sheet .sheet-filter-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    border-radius: 6px;
    z-index: 60;
    flex-direction: column;
  }
  .recents-sheet .sheet-filter-dropdown-wrap.open .sheet-filter-menu {
    display: flex;
  }
  .recents-sheet .sheet-filter-menu button {
    display: block;
    width: 100%;
    white-space: nowrap;
  }
  .recents-sheet .sheet-filter-menu button:hover,
  .recents-sheet .sheet-filter-menu button[aria-selected="true"] {
    color: var(--text);
  }
  .recents-sheet .sheet-filter-menu button[aria-selected="true"] {
    color: var(--green);
  }
  .recents-sheet .sheet-filter-label {
    color: var(--text);
    opacity: 0.9;
  }
  .recents-sheet .sheet-filter-value {
    flex: 1;
    color: var(--muted);
  }
  .recents-sheet .sheet-filter-row.active .sheet-filter-value,
  .recents-sheet .sheet-filter-row[aria-pressed="true"] .sheet-filter-value {
    color: var(--green);
  }
  .recents-sheet .sheet-filter-caret {
    color: var(--muted);
    opacity: 0.6;
    font-size: 16px;
    line-height: 1;
  }
  .recents-sheet .sheet-filter-checkbox {
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-bright);
    border-radius: 2px;
    flex: 0 0 auto;
    position: relative;
  }
  .recents-sheet .sheet-filter-check[aria-pressed="true"] .sheet-filter-checkbox {
    background: var(--green);
    border-color: var(--green);
  }
  .recents-sheet .sheet-filter-check[aria-pressed="true"] .sheet-filter-checkbox::after {
    content: '';
    position: absolute;
    left: 3px; top: 0;
    width: 5px; height: 9px;
    border-right: 2px solid var(--surface);
    border-bottom: 2px solid var(--surface);
    transform: rotate(45deg);
  }
  .recents-sheet .sheet-filter-clear {
    width: 100%;
    min-height: 40px;
    font-size: 12px;
  }
  .recents-sheet .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 3px;
  }
  .recents-sheet .filter-chips:empty { display: none; }
  .recents-sheet #mobile-recents-filters-toggle[aria-expanded="true"] ~ .filter-chips {
    display: none;
  }
  .recents-sheet .filter-chip {
    gap: 6px;
    padding: 4px 9px 4px 11px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
    font-size: 10.5px;
    letter-spacing: 0.3px;
  }
  .recents-sheet .filter-chip-x {
    opacity: 0.7;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
  }

  .recents-sheet .sheet-list {
    flex: 1;
    overflow: auto;
  }
  .recents-sheet .sheet-item {
    padding: 12px 16px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .recents-sheet .sheet-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .recents-sheet .sheet-item-star {
    font-size: 13px;
    color: var(--border-bright);
  }
  .recents-sheet .sheet-item-star.starred { color: var(--amber); }
  .recents-sheet .sheet-item-cmd {
    flex: 1;
    font-size: 12.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recents-sheet .sheet-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 23px;
  }
  .recents-sheet .sheet-item-time {
    color: var(--muted);
    font-size: 10px;
  }
  .recents-sheet .sheet-item-exit {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--green);
  }
  .recents-sheet .sheet-item-exit.nonzero { color: var(--red); }
  .recents-sheet .sheet-item-actions {
    display: flex;
    gap: 6px;
    padding-left: 23px;
  }
  .recents-sheet .sheet-item-action-menu-wrap {
    position: relative;
    display: inline-flex;
    flex: 1;
    min-width: 0;
  }
  .recents-sheet .sheet-item-action-menu-wrap .sheet-item-action {
    width: 100%;
  }
  .recents-sheet .sheet-item-action-menu-wrap .sheet-item-action-menu {
    min-width: 190px;
    z-index: 520;
    overscroll-behavior: contain;
  }
  .recents-sheet .sheet-item-action-menu-wrap.open .sheet-item-action-menu {
    display: block;
  }
  .recents-sheet .sheet-item-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
  }
  .recents-sheet .sheet-item-action {
    flex: 1;
    padding: 6px 4px;
    font-size: 10.5px;
    min-height: 32px;
    /* Reset native <button> chrome — without this the default user-agent
       button fill leaks through and the row actions render as light-gray
       boxes on real devices and on the Chromium demo recorder. */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  /* Bottom-sheet menu (hamburger target). Workflows is a normal row that
     opens the existing workflows overlay; no nested surface. */
  .menu-sheet-scrim {
    position: fixed; inset: 0;
    background: var(--theme-overlay-backdrop-bg, rgba(0,0,0,0.72));
    z-index: 100;
    animation: shell-m-fade-in 200ms ease;
  }
  .menu-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 101;
    max-height: 86dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    animation: shell-m-sheet-in 240ms ease;
  }
  .menu-sheet .menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .menu-sheet .menu-title-label {
    color: var(--green);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    flex: 1;
  }
  .menu-sheet .menu-group {
    display: flex;
    flex-direction: column;
  }
  .menu-sheet .menu-group-divider {
    padding: 22px 0;
    background: var(--theme-chrome-row-bg);
  }
  .menu-sheet .menu-group-divider::before {
    content: '';
    display: block;
    height: 1px;
    margin: 0 16px;
    background: var(--theme-chrome-divider-color);
  }
  .menu-sheet .menu-item {
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-height: 48px;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .menu-sheet .menu-group:first-of-type .menu-item:first-child {
    border-top: 1px solid var(--border);
  }
  /* Use :last-of-type (button) so the suppression also catches the timestamps
     row, which is the last <button> in the first group even though a sibling
     <div class="menu-submenu"> follows it as the actual :last-child. */
  .menu-sheet .menu-group .menu-item:last-of-type {
    border-bottom: none;
  }
  .menu-sheet .menu-item:hover:not([aria-disabled="true"]):not(:disabled),
  .menu-sheet .menu-subitem:hover:not([aria-disabled="true"]):not(:disabled) {
    background: transparent;
    color: var(--text);
  }
  .menu-sheet .menu-item:active:not([aria-disabled="true"]):not(:disabled),
  .menu-sheet .menu-subitem:active:not([aria-disabled="true"]):not(:disabled) {
    background: color-mix(in srgb, var(--green) 6%, transparent);
    color: var(--green);
  }
  .menu-sheet .menu-item.muted { color: var(--muted); }
  .menu-sheet .menu-item-icon {
    color: var(--muted);
    font-size: 13px;
    width: 16px;
    text-align: center;
    font-family: var(--font-mono);
    flex: 0 0 16px;
  }
  .menu-sheet .menu-item-label { flex: 1; }
  .menu-sheet .menu-item-toggle {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
    opacity: 0.85;
  }
  .menu-sheet .menu-item[aria-pressed="true"] .menu-item-toggle {
    color: var(--green);
    opacity: 1;
  }
  .menu-sheet .menu-item-hint {
    color: var(--muted);
    font-size: 11px;
    max-width: 46%;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu-sheet .mobile-scope-row {
    cursor: pointer;
  }
  .menu-sheet .mobile-scope-row.is-loading .menu-item-hint {
    color: var(--muted);
    font-style: italic;
  }
  .menu-sheet .mobile-scope-row.is-error .menu-item-hint {
    color: var(--red);
    opacity: 1;
  }
  /* Surface-specific chev color: drill-chev (drill-in rows) and
     disclosure-chev (timestamps expander) both render in --border-bright
     so they recede against the menu text. The primitives in components.css
     own size/spacing/rotation. */
  .menu-sheet .menu-item-chev,
  .menu-sheet .disclosure-chev {
    color: var(--border-bright);
  }
  /* Block-disclosure rotation for the timestamps expander now lives in the
     shared .disclosure-chev primitive (components.css). */
  .menu-sheet .menu-submenu {
    display: flex;
    flex-direction: column;
    background: var(--theme-chrome-row-bg);
    border-bottom: 1px solid var(--border);
  }
  .menu-sheet .menu-subitem {
    gap: 12px;
    padding: 11px 16px 11px 44px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    min-height: 42px;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .menu-sheet .menu-submenu .menu-subitem:last-child {
    border-bottom: none;
  }
  .menu-sheet .menu-subitem-radio {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--border-bright);
    background: transparent;
    flex: 0 0 12px;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .menu-sheet .menu-subitem[aria-pressed="true"] .menu-subitem-radio {
    border-color: var(--green);
    background:
      radial-gradient(circle, var(--green) 0 3px, transparent 4px);
  }
  .menu-sheet .menu-subitem[aria-pressed="true"] .menu-subitem-label {
    color: var(--green);
  }
  .menu-sheet .menu-subitem-label {
    flex: 1;
  }
  .menu-sheet .menu-subitem-hint {
    color: var(--muted);
    font-size: 10.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
    opacity: 0.75;
  }
  .menu-sheet .menu-footer {
    padding: 14px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: 1.5px;
    text-transform: lowercase;
    font-family: var(--font-mono);
    text-decoration: none;
  }
  .menu-sheet .menu-footer:hover,
  .menu-sheet .menu-footer:focus-visible {
    color: var(--text);
    outline: none;
  }

  /* Run ↔ Kill swap in the composer. The Kill button mirrors the desktop
     HUD Kill primitive (.btn.btn-destructive.btn-compact) but tuned for the
     tighter mobile row. */
  #mobile-composer.is-running #mobile-run-btn { display: none; }
  #mobile-composer:not(.is-running) #mobile-kill-btn { display: none; }
  #mobile-kill-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
    flex-shrink: 0;
    min-height: 34px;
    letter-spacing: 0.3px;
  }
  #mobile-kill-btn:active {
    background: color-mix(in srgb, var(--red) 22%, transparent);
  }
  #mobile-kill-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Edit-helper row above the composer when the soft keyboard is open. */
  .kb-helper {
    position: relative;
    z-index: 55;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0 8px 6px;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kb-helper::-webkit-scrollbar { display: none; }
  .kb-helper-sep {
    width: 1px;
    min-width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
    flex: 0 0 1px;
    align-self: center;
  }
  .kb-key {
    height: 28px;
    min-width: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.2px;
    color: var(--muted);
    border-radius: 4px;
    user-select: none;
    transition: background 100ms ease, color 100ms ease;
    cursor: pointer;
    /* Without these, the browser user-agent <button> appearance bleeds through
       and renders .kb-key with a light gray/white fill — visible on a real
       device and on Chromium-based demo recordings. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .kb-key.kb-key-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
  }
  .kb-key[data-kb-action="word-left"],
  .kb-key[data-kb-action="word-right"] {
    font-size: 15px;
    letter-spacing: -1px;
    line-height: 1;
    transform: translateY(-1px);
  }
  .kb-key:active {
    background: color-mix(in srgb, var(--green) 8%, transparent);
    color: var(--text);
  }
  @media (hover: hover) {
    .kb-key:hover {
      background: color-mix(in srgb, var(--green) 4%, transparent);
      color: var(--text);
    }
  }

}