/*
 * agent-intelligence.ai — Landing Page Styles
 *
 * DECISION: Font hosting
 * Using system font stack only (ui-monospace chain). No external font requests.
 * Rationale: fastest load, stays under 100KB budget, renders monospace on all OSes.
 * Upgrade path: self-host JetBrains Mono WOFF2 (latin subset ~30KB) if visual consistency
 * across OSes becomes a priority. Add @font-face block here pointing to /fonts/JetBrainsMono.woff2.
 *
 * Font stack: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro',
 *             Menlo, Consolas, 'DejaVu Sans Mono', monospace
 */

/* ---------------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Colors — dark mode (default) */
  --color-bg:           #0a0a0a;   /* near-black page background */
  --color-surface:      #111111;   /* slightly lighter panel surface */
  --color-border:       #2a2a2a;   /* subtle border / divider */
  --color-accent:        #4ade80;   /* green accent — prompts, logo, success */
  --color-accent-2:        #f59e0b;   /* amber accent — agent names, warnings */
  --color-muted:         #9ca3af;   /* grey secondary — output text, descriptors */
  --color-text:        #e5e7eb;   /* near-white — primary body text */
  --color-link:         #60a5fa;   /* blue — URLs, links */
  --color-error:          #f87171;   /* red — errors, close dot */
  --color-warn:       #fbbf24;   /* yellow — minimise dot */
  --color-graph:      #a78bfa;   /* purple — graph traversal, MCP tool calls */

  /* Typography */
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro',
               Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size-base:   14px;
  --font-size-sm:     12px;
  --font-size-lg:     16px;
  --font-size-xl:     20px;
  --line-height-base: 1.6;   /* ~22.4px — keeps monospace grid alignment */
  --line-height-tight: 1.4;
}

/* ---------------------------------------------------------------------------
 * Accessibility utility
 * ------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link: visually hidden until focused (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  z-index: 9999;
  padding: 0.4rem 0.8rem;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  text-decoration: none;
  border: 2px solid var(--color-bg);
}
/* :focus (not :focus-visible) — skip links must appear on mouse focus too */
.skip-link:focus {
  left: 0.75rem;
}

/* ---------------------------------------------------------------------------
 * Reset & base
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: var(--font-size-base);
}

body {
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Page layout — task-003
 * Three-row grid: header (auto) / main (1fr) / footer (auto)
 * Guarantees all content fits within a 1440×900 viewport with no scroll.
 * ------------------------------------------------------------------------- */

#app {
  height: 100%;
  max-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* --- Header --- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.logo,
.logo:hover,
.logo:visited,
.logo:focus,
.logo:active {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-accent);
  letter-spacing: 0;   /* monospace grid — no reflow artifacts */
  user-select: none;
  white-space: pre;    /* preserve bracket character spacing exactly */
  text-decoration: none !important;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  color: var(--color-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-accent);  /* accent color on hover — terminal aesthetic */
}

.nav-link:focus-visible {
  color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

.nav-cta {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  outline: none;
}

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

/* Hamburger menu button — hidden on desktop, shown on mobile via media query */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.3rem;
  font-family: var(--font-mono);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  user-select: none;
}

.nav-hamburger:hover {
  color: var(--color-text);
}

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

/* --- Main content — two-column grid: hero (left) + terminal (right) --- */

.site-main {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
  padding: 2rem;
  overflow: hidden;
  min-height: 0; /* allow grid children to shrink */
}

/* --- Hero section --- */

.hero-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;  /* scrollable to reveal #quickstart below the CTA (task-065) */
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.hero-content {
  flex-shrink: 0;
}

/* Box-drawing framed hero block */
.hero-box {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  white-space: pre;
  letter-spacing: 0;  /* prevent monospace grid drift */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  font-weight: normal;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0, "kern" 0;
  text-rendering: optimizeSpeed;
}

.box-border {
  color: var(--color-accent);
}

.hero-title-text {
  color: var(--color-text);
  font-weight: bold;
}

.hero-tagline-text {
  color: var(--color-accent);
}

.hero-sub-text {
  color: var(--color-muted);
}

.feature-strip {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0.5rem;
  overflow: hidden;
  /* Reset <ul> defaults — layout is handled by CSS Grid */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each <li> is a grid cell; flex so the <a> inside fills the full height */
.feature-strip > li {
  display: flex;
}

/* Card link fills the <li> so the border covers the full grid cell */
.feature-strip > li > .fc-linked {
  flex: 1;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.6rem;
}

/* Linked principle cards */
.fc-linked {
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.fc-linked:hover,
.fc-linked:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  outline: none;
}
.fc-linked:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Each principle row within a card */
.fc-principle {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.3rem 0;
}

/* Thin separator between the two principles */
.fc-sep {
  height: 1px;
  background: var(--color-border);
  margin: 0.1rem 0;
}

.fc-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.fc-id {
  color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  font-size: 10px;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.feature-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-prefix {
  color: var(--color-accent);
}

.feature-desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: var(--line-height-tight);
}

.cta-area {
  flex-shrink: 0;
  /* task-010/011 will populate this */
}

/* --- Comparison table (task-062) --- */

.compare-section {
  flex-shrink: 0;
  margin: 1.25rem 0 0.75rem;
}

.compare-heading {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0 0 0.5rem;
  font-weight: normal;
}

.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  white-space: pre;
  margin: 0;
  line-height: 1.4;
}

.compare-ok { color: var(--color-accent); }
.compare-no { color: var(--color-muted); opacity: 0.5; }
.compare-hi { color: var(--color-text); }

.compare-prose {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: var(--line-height-base);
  margin: 0 0 0.75rem;
  max-width: 64ch;
}

.compare-prose code {
  font: inherit;
  color: var(--color-accent);
  background: none;
}

/* --- Quickstart section (task-065) --- */

.quickstart-section {
  flex-shrink: 0;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.quickstart-heading {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  font-weight: normal;
  margin: 0 0 0.75rem;
}

.quickstart-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quickstart-step {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.qs-label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* Reuse install-block style for single-line command blocks, but reset margin-top */
.install-block.qs-cmd {
  margin-top: 0;
  cursor: default; /* no block-level click handler on quickstart blocks */
}

/* Multi-line TOML config block */
.qs-toml-block {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
}

.qs-toml-pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  white-space: pre;
  margin: 0;
  line-height: 1.5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qs-toml-copy {
  align-self: flex-end;
  margin-top: 0.4rem;
}

/* "next step" hint row at the bottom of quickstart */
.qs-next {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.qs-next code {
  font: inherit;
  color: var(--color-accent);
  background: none;
}

/* --- Terminal section --- */

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

.terminal-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  min-height: 0;
}

.terminal-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-close    { background-color: var(--color-error); }
.dot-minimise { background-color: var(--color-warn); }
.dot-maximise { background-color: var(--color-accent); }

.terminal-title {
  margin-left: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.terminal-content {
  flex: 1;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  min-height: 0;
  font-size: var(--font-size-sm);
}

/* Typewriter blinking cursor */
.t-cursor {
  color: var(--color-accent);
  animation: t-blink 1s step-end infinite;
  user-select: none;
}

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

/* Terminal line type colors — used by animation engine (task-008) */
.t-url          { color: var(--color-link); }
.t-agent        { color: var(--color-accent-2); }
.t-comment      { color: var(--color-muted); opacity: 0.7; }
.t-toml-header  { color: var(--color-muted); }
.t-toml-key     { color: var(--color-accent-2); }
.t-bat-bar      { color: var(--color-accent); opacity: 0.6; }
.t-success      { color: var(--color-accent); }

/* Copy button on terminal prompt lines (landing page) */
.t-copy-btn {
  background: none; border: none;
  color: var(--color-muted); cursor: pointer;
  padding: 0 0.3rem; font: inherit; font-size: var(--font-size-sm); line-height: 1;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
  vertical-align: middle; margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.terminal-line:hover .t-copy-btn { opacity: 0.7; }
.t-copy-btn:hover, .t-copy-btn.copied { color: var(--color-accent); opacity: 1 !important; }

/* Linkified command keyword on prompt lines */
.t-cmd-link {
  color: inherit; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  text-underline-offset: 2px; transition: text-decoration-color 0.15s;
}
.t-cmd-link:hover { text-decoration-color: var(--color-accent); }

/* Install command block in landing page CTA area */
.install-block {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm); margin-top: 1rem;
}
.install-block code {
  flex: 1; color: var(--color-accent); background: none; padding: 0; font: inherit;
}
.install-block-copy {
  background: none; border: none; color: var(--color-muted); cursor: pointer;
  padding: 0; font: inherit; font-size: var(--font-size-sm);
  transition: color 0.15s; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.install-block-copy:hover, .install-block-copy.copied { color: var(--color-accent); }

/* install-block is clickable */
.install-block { cursor: pointer; }
.install-block:hover .install-block-copy { color: var(--color-accent); }

/* GitHub star CTA — amber bracket-badge, visually distinct from the plain nav link */
.github-star-cta {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-2);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.75rem;
  margin-top: 0.75rem;
  transition: border-color 0.15s ease;
}
.github-star-cta:hover {
  border-color: var(--color-accent-2);
}
.github-star-cta:focus-visible {
  border-color: var(--color-accent-2);
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

/* Play button — shown when prefers-reduced-motion is active */
.terminal-play-btn {
  background: none; border: 1px solid transparent; border-radius: 2px;
  color: var(--color-muted); cursor: pointer;
  padding: 0.1rem 0.4rem;
  font: inherit; font-size: 11px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.terminal-play-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-border);
}

/* Copy-all-steps button in terminal chrome */
.terminal-copy-all {
  margin-left: auto;
  background: none; border: 1px solid transparent; border-radius: 2px;
  color: var(--color-muted); cursor: pointer;
  padding: 0.1rem 0.4rem;
  font: inherit; font-size: 11px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.terminal-copy-all:hover,
.terminal-copy-all.copied {
  color: var(--color-accent);
  border-color: var(--color-border);
}

.terminal-line {
  display: flex;
  align-items: baseline;
  line-height: var(--line-height-tight);
  white-space: pre;
}

.t-prompt {
  color: var(--color-accent);
}

.t-output {
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
 * Waitlist overlay — task-011
 * Revealed by clicking "→ Request Early Access" in the nav.
 * Uses the [hidden] attribute for show/hide (toggled via JS).
 * ------------------------------------------------------------------------- */

.waitlist-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.waitlist-overlay[hidden] {
  display: none;
}

.waitlist-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  min-width: 300px;
  max-width: 460px;
  width: 90vw;
}

.waitlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.waitlist-title {
  color: var(--color-accent);
  font-size: var(--font-size-base);
}

.waitlist-close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.waitlist-close:hover {
  color: var(--color-text);
}

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

.waitlist-form {
  display: flex;
  gap: 0.5rem;
}

.waitlist-input {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  padding: 0.5rem 0.75rem;
  outline: none;
}

.waitlist-input::placeholder {
  color: var(--color-muted);
}

.waitlist-input:focus {
  border-color: var(--color-accent);
}

.waitlist-submit {
  background: none;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.waitlist-submit:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

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

.waitlist-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.waitlist-status {
  margin-top: 0.75rem;
  font-size: var(--font-size-sm);
  min-height: 1.2em;
  color: var(--color-muted);
}

.waitlist-status.success {
  color: var(--color-accent);
}

.waitlist-status.error {
  color: var(--color-error);
}

/* --- Footer --- */

.site-footer {
  padding: 0.5rem 2rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
 * Prism.js syntax highlighting — token colors matching design tokens
 * Loaded via CDN on docs pages. Override Prism defaults (light bg, shadows).
 * ------------------------------------------------------------------------- */

code[class*="language-"],
pre[class*="language-"]  { background: transparent; text-shadow: none; border-radius: 0; }

.token.property,
.token.tag               { color: var(--color-accent-2); }
.token.string            { color: var(--color-accent); }
.token.number            { color: var(--color-link); }
.token.boolean           { color: var(--color-link); }
.token.null.keyword      { color: var(--color-link); }
.token.keyword           { color: var(--color-link); }
.token.builtin           { color: var(--color-link); }
.token.punctuation       { color: var(--color-muted); }
.token.operator          { color: var(--color-muted); }
.token.comment,
.token.block-comment     { color: var(--color-muted); opacity: 0.6; font-style: italic; }
.token.function          { color: var(--color-accent-2); }
.token.class-name        { color: var(--color-text); font-weight: bold; }
.token.decorator         { color: var(--color-accent-2); }
.token.namespace         { color: var(--color-muted); }

/* ---------------------------------------------------------------------------
 * Graceful degradation for narrower viewports
 * Stack hero above terminal on viewports < 1024px wide.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Named themes — applied via data-theme attribute on <html>.
 * FOUC prevention: a synchronous <script> in <head> reads localStorage and sets
 * data-theme before first paint. Default when no preference: terminal (dark).
 * System prefers-light default: github.
 *
 * Themes:  terminal · one-dark · dracula · github · solarized
 *          (dark)     (dark)     (dark)    (light)  (light)
 * Backward-compat aliases: data-theme="dark" = terminal, "light" = github
 * ------------------------------------------------------------------------- */

/* --- terminal (ai[] — our dark default, same as :root) --- */
:root[data-theme="terminal"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:       #0a0a0a;
  --color-surface:  #111111;
  --color-border:   #2a2a2a;
  --color-accent:   #4ade80;
  --color-accent-2: #f59e0b;
  --color-muted:    #9ca3af;
  --color-text:     #e5e7eb;
  --color-link:     #60a5fa;
  --color-error:    #f87171;
  --color-warn:     #fbbf24;
  --color-graph:    #a78bfa;   /* purple — graph traversal, MCP tool calls */
}

/* --- One Dark Pro (dark, Atom-inspired) --- */
:root[data-theme="one-dark"] {
  color-scheme: dark;
  --color-bg:       #282c34;
  --color-surface:  #21252b;
  --color-border:   #3e4451;
  --color-accent:   #98c379;   /* green — strings, success */
  --color-accent-2: #e5c07b;   /* yellow — attributes, agent names */
  --color-muted:    #5c6370;   /* comments, secondary */
  --color-text:     #abb2bf;   /* foreground */
  --color-link:     #61afef;   /* blue — types, links */
  --color-error:    #e06c75;   /* red */
  --color-warn:     #d19a66;   /* orange — terminal dot */
  --color-graph:    #c678dd;   /* purple — One Dark Pro keywords */
}

/* --- Dracula (dark, vivid) --- */
:root[data-theme="dracula"] {
  color-scheme: dark;
  --color-bg:       #282a36;
  --color-surface:  #1e1f29;
  --color-border:   #44475a;
  --color-accent:   #50fa7b;   /* green */
  --color-accent-2: #ffb86c;   /* orange */
  --color-muted:    #6272a4;   /* comments */
  --color-text:     #f8f8f2;   /* foreground */
  --color-link:     #8be9fd;   /* cyan */
  --color-error:    #ff5555;   /* red */
  --color-warn:     #f1fa8c;   /* yellow */
  --color-graph:    #bd93f9;   /* purple — Dracula signature */
}

/* --- GitHub Light (light, high contrast) --- */
/* Contrast on #ffffff: text 17:1 AAA · muted 5.5:1 AA · accent 10.7:1 AAA */
/* link 10.8:1 AAA · error 5.7:1 AA · warn 5.3:1 AA                        */
:root[data-theme="github"],
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg:       #ffffff;
  --color-surface:  #f6f8fa;
  --color-border:   #d0d7de;
  --color-accent:   #116329;   /* dark green — 10.7:1 AAA */
  --color-accent-2: #953800;   /* dark orange — 7.3:1 AAA */
  --color-muted:    #636c76;   /* gray — 5.5:1 AA+ */
  --color-text:     #1f2328;   /* near-black — 17:1 AAA */
  --color-link:     #0550ae;   /* deep blue — 10.8:1 AAA */
  --color-error:    #cf222e;   /* red — 5.7:1 AA */
  --color-warn:     #9a6700;   /* dark yellow — 5.3:1 AA */
  --color-graph:    #6639ba;   /* purple — GitHub purple, 5.2:1 AA */
}

/* --- Solarized Light (classic, enhanced contrast) --- */
/* Contrast on #fdf6e3: text 15.8:1 AAA · muted 5.7:1 AA · accent 6.5:1 AA+ */
:root[data-theme="solarized"] {
  color-scheme: light;
  --color-bg:       #fdf6e3;   /* Solarized base3 */
  --color-surface:  #eee8d5;   /* Solarized base2 */
  --color-border:   #d4cfbe;
  --color-accent:   #1a5e58;   /* darkened Solarized cyan — 6.5:1 AA+ */
  --color-accent-2: #7a4f00;   /* darkened Solarized yellow — 5.4:1 AA */
  --color-muted:    #4a6068;   /* between base00/01 — 5.7:1 AA+ */
  --color-text:     #073642;   /* Solarized base03 — 15.8:1 AAA */
  --color-link:     #1a549c;   /* darkened Solarized blue — 6.4:1 AA+ */
  --color-error:    #8b0f0f;   /* darkened red — 8.4:1 AAA */
  --color-warn:     #6e4300;   /* dark amber — 5.8:1 AA */
  --color-graph:    #5c4d99;   /* purple — darkened violet, 5.1:1 AA */
}

/* ---------------------------------------------------------------------------
 * .force-dark — keeps terminal panels dark on light themes.
 * On dark themes (terminal / one-dark / dracula) the panel naturally inherits
 * the page theme — so it looks like One Dark Pro or Dracula as expected.
 * On light themes (github / solarized) we override back to the terminal dark
 * palette so the panel always reads as a real terminal window.
 * ------------------------------------------------------------------------- */

.force-dark {
  /* Always apply explicit bg/fg so the panel is opaque regardless of theme. */
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Override to terminal dark palette only on light themes */
:root[data-theme="github"] .force-dark,
:root[data-theme="light"]  .force-dark,
:root[data-theme="solarized"] .force-dark {
  color-scheme: dark;
  --color-bg:       #0a0a0a;
  --color-surface:  #111111;
  --color-border:   #2a2a2a;
  --color-accent:   #4ade80;
  --color-accent-2: #f59e0b;
  --color-muted:    #9ca3af;
  --color-text:     #e5e7eb;
  --color-link:     #60a5fa;
  --color-error:    #f87171;
  --color-warn:     #fbbf24;
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------------
 * Theme picker — button + dropdown menu
 * ------------------------------------------------------------------------- */

.theme-picker {
  position: relative;
  flex-shrink: 0;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 2px;
  transition: color 0.15s;
  user-select: none;
  white-space: nowrap;
}

.theme-toggle:hover,
.theme-picker.open .theme-toggle {
  color: var(--color-accent);
}

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

.theme-menu {
  display: none !important;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  list-style: none;
  min-width: 156px;
  z-index: 100;
}

.theme-picker.open .theme-menu {
  display: block !important;
}

.theme-menu li {
  padding: 0.3rem 0.75rem;
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color 0.1s;
}

.theme-menu li::before {
  content: '  ';   /* placeholder to align with selected bullet */
  white-space: pre;
}

.theme-menu li[aria-selected="true"]::before {
  content: '● ';
  color: var(--color-accent);
}

.theme-menu li:hover,
.theme-menu li:focus {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  outline: none; /* focus indicated by background+color change above; not an unintentional omission */
}

.theme-menu li[aria-selected="true"] {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
 * Graceful degradation for narrower viewports
 * Stack hero above terminal on viewports < 1024px wide.
 * ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  body {
    overflow: auto; /* allow scroll on small screens */
  }

  #app {
    max-height: none;
    overflow: visible;
  }

  .site-main {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .terminal-section {
    min-height: 320px;
  }
}

/* ---------------------------------------------------------------------------
 * Mobile layout — 767px and below
 * Covers phones and small tablets. Desktop layout (≥768px) is unchanged.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  html {
    font-size: 14px; /* explicit px value — unitless rem math stays predictable on mobile */
  }

  .site-main {
    padding: 1rem; /* reduce from 2rem to recover usable width */
  }

  /* Reduce header side padding to recover width on narrow viewports */
  .site-header {
    padding: 0.75rem 1rem;
  }

  /* Reduce nav gap on mobile so items fit in one row */
  .site-nav {
    gap: 1rem;
  }

  /* Touch targets: all nav links ≥ 44px tall (Apple HIG / WCAG 2.5.5) */
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
  }

  /* Touch target: CTA button ≥ 44px tall */
  .nav-cta {
    min-height: 44px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
  }

  /* Touch target: theme toggle ≥ 44×44px */
  .theme-toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Touch targets: terminal chrome buttons ≥ 44×44px */
  .terminal-play-btn,
  .terminal-copy-all {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.75rem;
  }

  /* Touch target: inline copy buttons on terminal lines */
  .t-copy-btn {
    min-height: 44px;
    min-width: 44px;
    opacity: 0.5; /* overrides desktop opacity: 0; touch devices have no hover state */
    justify-content: center;
  }

  /* Touch target: install block copy button */
  .install-block-copy {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }

  .feature-strip {
    grid-template-columns: repeat(2, 1fr); /* 2-col on mid-mobile */
  }

  /* Scale hero ASCII box so it fits a 360px viewport without horizontal scroll */
  .hero-box {
    font-size: clamp(10px, 2.8vw, 13px);
  }

  /* Allow the curl install command to scroll horizontally rather than wrap */
  .install-block code {
    overflow-x: auto;
    white-space: pre;
    min-width: 0; /* flex item needs this for overflow-x to trigger (flex: 1 sets min-width: auto by default) */
  }

  /* Allow long terminal output lines to scroll rather than wrap */
  .terminal-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  }
}

/* ---------------------------------------------------------------------------
 * Narrow mobile — 480px and below
 * Single-column feature strip for smallest phone viewports.
 * ------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .feature-strip {
    grid-template-columns: 1fr;
  }

  /* Header reflow: allow nav items to wrap onto a second line at 360-480px.
   * Logo stays on the left; the nav wraps below if all three items + logo
   * exceed the viewport width. */
  .site-header {
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem 0;
  }

  .site-nav {
    gap: 0.75rem;
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------------
 * Docs pages — shared responsive layout
 * Applies to: cli.html, config.html, api.html, roadmap.html, principles.html
 * architecture.html and web.html also use these rules but have additional
 * inline diagram-specific overrides in their own <style> blocks.
 * ------------------------------------------------------------------------- */

/* Collapse to single-column, hide sidebar on tablets and smaller (≤1023px).
 * Pages that already define this inline (roadmap, architecture, principles)
 * will agree on these values; pages without any mobile CSS (cli, config, api)
 * now get the correct responsive layout from style.css.
 *
 * Higher-specificity selector (.docs-layout .docs-content) is used so these
 * rules beat the per-page inline .docs-content { padding: 2.5rem 3rem }
 * declarations, which have lower specificity (0,1,0 vs 0,2,0). */
@media (max-width: 1023px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    display: none;
  }

  .docs-layout .docs-content {
    grid-column: 1;
    padding: 1.5rem;
  }
}

/* Phone-specific tweaks (≤767px): tighter padding, scrollable code + tables */
@media (max-width: 767px) {
  /* Reduce content padding from 1.5rem to 1rem to maximise usable width.
   * Also set --docs-padding so architecture.html full-bleed diagram margins
   * stay in sync (calc(-1 * var(--docs-padding, 1rem))). */
  .docs-layout .docs-content {
    padding: 1rem;
    --docs-padding: 1rem;
  }

  /* Code blocks: scroll horizontally rather than wrapping or overflowing page */
  .docs-content pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    white-space: pre; /* preserve indentation — no wrapping */
  }

  /* Tables: switch to block layout so overflow-x works (table does not shrink
   * below its content width in the default table display model) */
  .docs-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* keep table cells on one line during horizontal scroll */
  }

  /* Restore text wrapping in description columns where nowrap would be
   * unreadable — these cells are the last (widest) column in most tables */
  .docs-content table td:last-child {
    white-space: normal;
    min-width: 160px; /* keep description column legible */
  }
}

/* ---------------------------------------------------------------------------
 * Hamburger nav menu — mobile (≤767px)  task-052
 * Replaces the inline nav with a ≡ button + dropdown on narrow screens.
 * Desktop layout (≥768px) is entirely unchanged.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Show hamburger button */
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }

  /* Header must be positioned so the dropdown anchors to it */
  .site-header {
    position: relative;
  }

  /* Collapse the nav links by default on mobile */
  .site-nav {
    display: none;
  }

  /* Dropdown: full-width vertical list anchored below header */
  .site-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    z-index: 200;
    gap: 0;
    padding: 0;
  }

  /* Nav links inside the open dropdown */
  .site-nav.open > .nav-link,
  .site-nav.open > .nav-cta {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.5rem;
    border-top: 1px solid var(--color-border);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  /* Theme picker row inside the open dropdown */
  .site-nav.open > .theme-picker {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.5rem;
    border-top: 1px solid var(--color-border);
    box-sizing: border-box;
  }
}