/* /static/css/core/fonts.css */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

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

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

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

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


/* /static/css/core/base.css */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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 */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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; }

#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);
}

.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;
}

.cleanup-reason-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.cleanup-sample-details {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.cleanup-sample-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.cleanup-sample-toggle:hover,
.cleanup-sample-toggle:focus-visible {
  color: var(--text);
}

.cleanup-sample-toggle:focus-visible {
  outline: 1px solid var(--green-dim);
  outline-offset: 2px;
}

.cleanup-sample-toggle-glyph {
  width: 1ch;
  color: var(--green);
}

.cleanup-sample-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-height: min(260px, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.cleanup-sample-panel.u-hidden {
  display: none;
}

.cleanup-sample-group-title {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
}

.cleanup-sample-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cleanup-sample-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.cleanup-sample-value {
  overflow-wrap: anywhere;
  color: var(--text);
}

.cleanup-sample-omitted {
  color: var(--muted);
}

.cleanup-sample-badge.badge {
  letter-spacing: 0;
}

.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;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  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-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-selected .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;
}
.chip.atlas-entity-token {
  display: inline;
  gap: 0;
  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-output-entity-menu {
  position: fixed;
  z-index: 650;
  min-width: 150px;
}
.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 */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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"],
.form-select[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);
}

/* Keep persistent row selection above role-specific hover/press treatments. */
.selection-row.is-selected,
.selection-row.is-selected:focus,
.selection-row.is-selected:focus-visible,
.selection-row.is-selected:focus-within,
.selection-row.is-selected:hover:not([aria-disabled="true"]):not(:disabled),
.selection-row.is-selected:active:not([aria-disabled="true"]):not(:disabled) {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border));
  background: var(--theme-button-ghost-hover-bg);
  box-shadow: inset 3px 0 0 var(--green);
}


/* /static/css/welcome.css */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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 */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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-workflows .rail-workflows-browse-all {
    border-bottom: 1px solid var(--border-soft);
    color: var(--green);
    font-weight: 700;
  }
  .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 */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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;
}

/* Core mobile shell layout. These rules must stay on the initial CSS path so
   the desktop rail and HUD cannot overlap the mobile transcript before any
   optional feature stylesheet is loaded. */
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;
}

/* ── 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. */
  .shell-root,
  .main-col,
  .tabbar-scroll {
    display: contents;
  }
  .rail,
  .hud,
  .tabbar-chrome {
    display: none !important;
  }
  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/faq-shortcuts.css */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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 */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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.u-hidden {
  display: none;
}

.history-project-run-entities-option .form-check input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.history-project-run-entities-note {
  margin: 8px 0 0 28px;
}

.history-bulk-note {
  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-workflow-summary {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
}

.history-run-workflow-label {
  line-height: 1.3;
}

.history-run-workflow-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.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 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 70px;
  overflow: visible;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--theme-chrome-row-bg);
  color: inherit;
  font: inherit;
  text-align: left;
}

.history-run-entity-list .atlas-entity-row:last-child {
  border-bottom: 0;
}

.history-run-entity-list .atlas-entity-row.is-suppressed {
  opacity: 0.68;
}

.history-run-entity-list .atlas-entity-main {
  display: grid;
  flex: 1 1 auto;
  align-self: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.history-run-entity-list .atlas-entity-value {
  display: block;
  overflow: visible;
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.history-run-entity-list .atlas-entity-badges {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding-top: 2px;
}

.history-run-entity-list .atlas-muted {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.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;
}
.search-signal-compare {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
}
.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/mobile-chrome.css */
/* SPDX-FileCopyrightText: 2026 mmayhew */
/* SPDX-License-Identifier: AGPL-3.0-only */

/* 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);
    }
  }

}