/* Kitchen — Terminal/TUI aesthetic
   Light-mode first. Clean monospace. Details/summary sections. */

/* ── Base variables (light mode) ─────────────────── */

.kitchen-page {
  --bg: #fafaf9;
  --text: #1a1a1a;
  --dim: #737373;
  --accent-ok: #059669;
  --accent-flag: #d97706;
  --accent-error: #dc2626;
  --border: #e5e5e5;
  --stove-primary: #8B4513;
  --stove-shadow: #3E2723;
  --font: 'IBM Plex Mono', 'Courier New', Courier, monospace;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
}

/* ── Dark mode override ──────────────────────────── */

@media (prefers-color-scheme: dark) {
  .kitchen-page {
    --bg: #0a0a0a;
    --text: #e5e5e5;
    --dim: #737373;
    --accent-ok: #34d399;
    --accent-flag: #f59e0b;
    --accent-error: #f87171;
    --border: #262626;
    --stove-primary: #A0522D;
    --stove-shadow: #5D3A1A;
  }
}

/* ── Dark overrides for shared nav/footer ────────── */

@media (prefers-color-scheme: dark) {
  .kitchen-page .page-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .kitchen-page .page-header-left,
  .kitchen-page .page-header-left a,
  .kitchen-page .page-header-center,
  .kitchen-page .page-header-right.palette-trigger {
    color: var(--text);
  }
  .kitchen-page .page-dropdown {
    background: #171717;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
  .kitchen-page .page-dropdown a { color: var(--dim); }
  .kitchen-page .page-dropdown a:hover { color: var(--accent-ok); }
  .kitchen-page footer,
  .kitchen-page .footer-note,
  .kitchen-page .footer-note a { color: var(--dim); }
  .kitchen-page .footer-note a:hover { color: var(--text); }
}

/* ── Terminal container ──────────────────────────── */

.kitchen-page .container {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 80px;
}

/* ── Stove art ───────────────────────────────────── */

.stove-art {
  text-align: center;
  line-height: 1.0;
  font-size: 10px;
  margin: 0 auto 1rem;
  user-select: none;
  -webkit-user-select: none;
}
.stove-art pre {
  margin: 0;
  font-family: var(--font);
  font-size: inherit;
  line-height: inherit;
}

/* ── Kitchen title ───────────────────────────────── */

.kitchen-title {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 0.9rem;
  color: var(--dim);
  margin-bottom: 2.5rem;
  font-weight: 400;
}

/* ── TUI sections (details/summary) ──────────────── */

.tui-section { border-top: 1px solid var(--border); }
.tui-section:last-child { border-bottom: 1px solid var(--border); }

.tui-section summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.tui-section summary::-webkit-details-marker { display: none; }
.tui-section summary::marker { display: none; }

.tui-section .section-count {
  font-weight: 400;
  color: var(--dim);
  font-size: 0.85rem;
}

.tui-section .section-right {
  font-weight: 400;
  color: var(--dim);
  font-size: 0.85rem;
  margin-left: auto;
  padding-left: 1rem;
}

.section-body {
  padding: 0 0 1rem;
}

/* ── TUI lines (agent/project/stack rows) ────────── */

.tui-line {
  display: flex;
  align-items: baseline;
  padding: 2px 0;
  gap: 0;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
}

.tui-line .tree {
  color: var(--dim);
  width: 2ch;
  flex-shrink: 0;
  text-align: center;
}

.tui-line .status {
  width: 2ch;
  flex-shrink: 0;
  text-align: center;
}
.tui-line .status.ok { color: var(--accent-ok); }
.tui-line .status.flag { color: var(--accent-flag); }
.tui-line .status.error { color: var(--accent-error); }

.tui-line .name {
  width: 16ch;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tui-line .value {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
  padding-left: 1ch;
}

/* ── Nested sub-lines (expanded agent flags) ─────── */

.tui-sub {
  padding-left: 4ch;
}
.tui-sub .tui-line {
  font-size: 0.8rem;
  color: var(--dim);
}
.tui-sub .tui-line .name {
  width: auto;
  flex: 1;
}

/* ── Agent detail toggle ─────────────────────────── */

.agent-detail { display: none; }
.agent-detail.open { display: block; }

/* ── Now divider ─────────────────────────────────── */

.now-divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: var(--dim);
  font-size: 0.85rem;
}
.now-divider::before {
  content: '───';
  margin-right: 0.75ch;
}
.now-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
  margin-left: 0.75ch;
}

.now-section {
  padding: 0.25rem 0 0.5rem;
  font-size: 0.85rem;
}
.now-section .now-line {
  display: flex;
  gap: 2ch;
  padding: 2px 0;
  flex-wrap: wrap;
}
.now-section .now-label { color: var(--dim); }

/* ── Sparkline and progress bar ──────────────────── */

.sparkline {
  letter-spacing: 0;
  font-size: 0.85rem;
}
.progress-filled { color: var(--accent-ok); }
.progress-empty { color: var(--border); }

/* ── Method single line ──────────────────────────── */

.method-line {
  font-size: 0.85rem;
  padding: 0.25rem 0;
  color: var(--dim);
}

/* ── Loading state ───────────────────────────────── */

.loading-state {
  color: var(--dim);
  font-size: 0.85rem;
  padding: 2rem 0;
  text-align: center;
}

/* ── Smoke animation ─────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .smoke-char {
    animation: smoke-drift 4s ease-in-out infinite;
  }
  .smoke-char:nth-child(2) { animation-delay: 1s; }
  .smoke-char:nth-child(3) { animation-delay: 2s; }
}
@keyframes smoke-drift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ── Mobile ──────────────────────────────────────── */

@media (max-width: 700px) {
  .kitchen-page .container { padding: 80px 16px 80px; }
  .stove-art { font-size: 7px; }
  .tui-line .name { width: 13ch; }
}

@media (max-width: 400px) {
  .stove-art { font-size: 5px; }
  .tui-line { flex-wrap: wrap; }
  .tui-line .value { width: 100%; padding-left: 4ch; margin-left: 0; }
}