/* Pilot-inspired theme. Layout and responsive behavior live in app.css. */
:root {
  color-scheme: dark;
  --canvas: #090a0b;
  --surface: #121416;
  --surface-raised: #1b1d20;
  --text: #fff4ea;
  --muted: #b2aba4;
  --line: #343434;
  --accent: #ff7a00;
  --accent-hover: #ffab49;
  --soft: #291b10;
  --white: var(--surface);
  /* Compatibility with the original layout's foreground token. */
  --navy: var(--text);
  --success: #96dbb1;
  --success-bg: #12271c;
  --warning: #f4c87b;
  --warning-bg: #2a2012;
  --danger: #ffb1a3;
  --danger-bg: #301b19;
  color: var(--text);
  background: var(--canvas);
}

body { background: var(--canvas); }
::selection { color: #090a0b; background: var(--accent-hover); }
h1, .empty h2, .dialog-header h2, .login-aside h2 {
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.brand { letter-spacing: -.025em; }
.mark { background: var(--accent); }
.sidebar {
  background: #060708;
  color: var(--text);
  border-right: 1px solid var(--line);
}
.nav-caption, .connection, .instance span, .signout { color: var(--muted); }
.nav-link {
  background: var(--soft);
  color: var(--text);
  box-shadow: inset 2px 0 var(--accent);
}
.nav-icon { color: var(--accent); }
.instance { border-color: var(--line); }
.signout:hover { color: var(--accent-hover); }
.dot { background: var(--success); }
.dot.offline { background: var(--warning); }

/* Primary actions use dark text: white on orange is not readable enough. */
.button { background: var(--accent); color: #120b04; }
.button:hover:not(:disabled) { background: var(--accent-hover); }
.button.secondary, .button.quiet, .button.close {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.button.secondary:hover:not(:disabled),
.button.quiet:hover:not(:disabled),
.button.close:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: #82603d;
}
.button:disabled {
  opacity: 1;
  background: #212224;
  color: #96908a;
  border-color: var(--line);
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline-color: var(--accent-hover);
}
.skip-link { background: var(--accent); color: #120b04; }
.button.tab { background: transparent; color: var(--muted); }
.button.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.button.tab:hover:not(:disabled) { color: var(--accent-hover); background: transparent; }

/* Surfaces and non-color status cues are shared across all report states. */
.panel, .empty, .configuration-row, .history-item, .source-row {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.project-card:hover { border-color: var(--accent); }
.project-symbol { font-family: "Bahnschrift", sans-serif; color: var(--accent-hover); }
.component { background: #0e1012; }
.count, .badge { background: var(--surface-raised); color: var(--muted); }
.badge.completed { background: var(--success-bg); color: var(--success); border-color: #355c43; }
.badge.running { background: var(--warning-bg); color: var(--warning); border-color: #66502b; }
.badge.failed, .badge.interrupted { background: var(--danger-bg); color: var(--danger); border-color: #754239; }
.alert { background: var(--warning-bg); border-color: #66502b; color: var(--warning); }
.alert.error { background: var(--danger-bg); border-color: #754239; color: var(--danger); }
.history-item:hover { border-color: #82603d; }
.history-item[aria-pressed="true"] { background: var(--soft); border-color: var(--accent); }
.file-count { color: var(--text); font-family: "Bahnschrift", sans-serif; }
summary:hover { color: var(--accent-hover); }
.empty-art::before { background: var(--surface-raised); border-color: #55504a; }
.empty-art::after { background: var(--soft); border-color: #ab682b; box-shadow: inset 0 13px var(--surface); }
.spinner { border-color: var(--line); border-top-color: var(--accent); }
.skeleton {
  background: linear-gradient(105deg, #151719 30%, #252729 50%, #151719 70%);
  background-size: 200% 100%;
}

/* Native controls inherit dark color-scheme, including select popups. */
.field input, .field select {
  background: #0a0c0e;
  color: var(--text);
  border-color: #706961;
  caret-color: var(--accent);
}
.field input::placeholder { color: #a49c94; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input:read-only { color: var(--muted); }
.check-label input { accent-color: var(--accent); }
.dialog { background: var(--surface); color: var(--text); border-color: #706961; box-shadow: 0 30px 100px #000a; }
.dialog::backdrop { background: #000b; }

/* Quiet brand treatment; no remote fonts, images, or animated neon. */
.login-aside {
  background: radial-gradient(ellipse at 0 100%, #321904 0, transparent 65%), #060708;
  color: var(--text);
  border-right: 1px solid var(--line);
}
.login-aside h2 em { color: var(--accent); font-style: normal; }
.login-aside p, .login-aside footer { color: var(--muted); }
.login-main { background: var(--canvas); }
.login-card h1 { font-size: clamp(2rem, 3vw, 2.7rem); }

.runtime-panel { margin-bottom: 26px; }
.runtime-panel .stack { margin-top: 18px; }
.runtime-service { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; font-size: .85rem; }
.runtime-url { color: var(--accent-hover); overflow-wrap: anywhere; }
#runtime-dialog .field { margin-top: 12px; }
#runtime-dialog .check-label { margin-top: 20px; }
.field textarea {
  width: 100%; min-width: 0; resize: vertical; padding: 12px;
  color: var(--text); background: var(--canvas); border: 1px solid #706961;
  border-radius: 8px; font: .85rem/1.6 Consolas, monospace;
}
textarea:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 4px; }

@media (max-width: 700px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .login-aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .login-aside h2 { font-size: 2.1rem; }
}