/* assets/styles.css — agentsbox landing page styles.
   Replaces WebTUI. Refined Catppuccin Mocha, one green accent.
   Fonts are self-hosted (@fontsource woff2 in dist/assets/fonts/). */

/* ───────────────────── Fonts ───────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/geist-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/geist-sans-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/geist-sans-latin-700-normal.woff2) format('woff2');
}

/* ───────────────────── Tokens ─────────────────────
   Refined Catppuccin Mocha. ONE accent (green) — the sandbox border is the
   brand. Syntax tokens keep a small palette but page chrome is green-only. */
:root {
  --bg:            #1e1e2e;   /* Base    — page bg              */
  --surface:       #181825;   /* Mantle  — code/cards            */
  --surface-2:     #11111b;   /* Crust   — install button bg     */
  --border:        #313244;   /* Surface0 — hairlines            */
  --text:          #cdd6f4;   /* Text    — body                  */
  --muted:         #a6adc8;   /* Subtext0 — descriptions/nav (AA)*/
  --faint:         #7f849c;   /* Overlay1 — decorative only      */
  --accent:        #a6e3a1;   /* Green — the sandbox (brand)     */
  --accent-bright: #5ee9b5;   /* emerald — copy-success glow     */
  --kw:            #cba6f7;   /* Mauve  — keywords (code only)   */
  --str:           #a6e3a1;   /* Green  — strings (code only)     */
  --num:           #fab387;   /* Peach  — numbers (code only)    */
  --fn:            #89b4fa;   /* Blue   — functions (code only)  */

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius:    8px;
  --radius-sm: 4px;
  --maxw:      80ch;
}

/* ───────────────────── Base ───────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 2ch 2ch;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  word-break: normal;            /* undo the break-all habit from the old base */
  overflow-wrap: break-word;
}
/* mono register: code, terminal chrome, the ASCII logo, the wordmark */
pre, code, kbd, samp, .sourceCode,
.logo, .wordmark, .install-cmd code, .site-header .brand { font-family: var(--mono); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* vertical rhythm (the old WebTUI base zeroed this; restore it) */
main p, main ul, main ol, main pre, main table, main blockquote { margin-block: 0 1lh; }
main h1, main h2, main h3, main h4 { margin-block: 1.5lh 0.5lh; line-height: 1.2; }
main > :first-child { margin-block-start: 0; }
main hr { margin-block: 1lh; border: 0; border-top: 1px solid var(--border); }
main ul, main ol { padding-left: 3ch; }

/* ───────────────────── Header (site chrome) ───────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: flex-end; gap: 2ch;
  height: 3.5lh;
  margin: 0 -2ch;              /* bleed to viewport edges inside the body column */
  padding: 0 2ch;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-nav { display: flex; align-items: center; gap: 2ch; }
.site-nav a { color: var(--muted); font-size: 0.9rem; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav .icon-link { display: inline-flex; align-items: center; gap: 0.5ch; }
.site-nav .icon-link svg { width: 1lh; height: 1lh; }
@media (max-width: 48ch) { .site-nav .nav-label { display: none; } }  /* icon-only on phones */

/* ───────────────────── Content column ───────────────────── */
main {
  padding: 0;
  margin-block: 1lh;
}
main > h2::before { content: "## "; color: var(--faint); font-family: var(--mono); }

/* ───────────────────── ASCII logo (kept) ───────────────────── */
main > h1 { margin: 0 0 1lh; min-width: 0; container-type: inline-size; }
main h1 .logo {
  background: none; border: none; padding: 0; margin: 0;
  white-space: pre; overflow: hidden;
  line-height: 1.1; color: var(--accent);
  /* Sized to its container (the h1 is an inline-size query container) so the
     ~84-char art always fits and never shows a scrollbar. 1.5cqw scales it
     down on narrow columns; the 10px cap keeps it crisp on desktop. */
  font-size: min(10px, 1.5cqw);
}

/* ───────────────────── Lead (one-line description) ───────────────────── */
.lead { margin: 0 0 2lh; color: var(--muted); font-size: 1.5rem; line-height: 1.4; max-width: 60ch; }

/* ───────────────────── Hero: install + agents ───────────────────── */
.hero { display: flex; flex-direction: column; gap: 1.5lh; margin-block: 0 2lh; }

.install-cmd {
  display: flex; align-items: center; justify-content: space-between; gap: 1ch;
  width: min(100%, 38rem);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.8lh 1ch; text-align: left; cursor: pointer;
  font: inherit;                       /* keep Geist for the "Copy" label */
  transition: border-color .2s, box-shadow .2s;
}
.install-cmd:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.install-cmd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.install-cmd code {
  font-size: 0.9rem; color: var(--text); background: none; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.install-cmd .prompt { color: var(--faint); user-select: none; }
.install-cmd .prompt::before { content: "$"; }   /* CSS-rendered so the prompt
   never enters the regex-replacement string or the copied command */
.copy-affordance {
  display: inline-flex; align-items: center; gap: 0.5ch; flex-shrink: 0;
  color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.copy-affordance svg { width: 1.2lh; height: 1.2lh; }
.icon-check { color: var(--accent-bright); }

/* icon swap: default shows clipboard + "Copy"; .copied shows check + "Copied" */
.install-cmd .icon-check, .install-cmd .copied-label { display: none; }
.install-cmd .icon-clipboard, .install-cmd .copy-label { display: inline; }
.install-cmd.copied { border-color: var(--accent-bright); }
.install-cmd.copied .icon-clipboard, .install-cmd.copied .copy-label { display: none; }
.install-cmd.copied .icon-check, .install-cmd.copied .copied-label { display: inline; }

/* ───────────────────── Agent logos row ─────────────────────
   Order is set in build.nu (AGENT_SVGS): OpenCode, Pi, Codex, Claude Code. */
.agents { list-style: none; display: flex; flex-wrap: wrap; gap: 1ch 2ch; padding: 0; margin: 0; }
.agents li { margin: 0; }
.agent { display: inline-flex; align-items: center; gap: 0.6ch; color: var(--muted); }
.agent:hover { color: var(--text); text-decoration: none; }
.agent-icon { display: inline-flex; width: 1.1lh; height: 1.1lh; }
.agent-icon svg { width: 100%; height: 100%; }
.agent-label { font-size: 0.85rem; font-family: var(--sans); }

/* ───────────────────── Features ───────────────────── */
.feature-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1lh; padding: 0; margin: 0 0 1lh; }
.feature { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5lh 1.5ch; margin: 0; }
.feature h3 { margin: 0 0 0.5lh; font-size: 1rem; color: var(--text); }
.feature p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* ───────────────────── Code blocks & syntax ───────────────────── */
pre, pre.sourceCode {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1lh 1.5ch; overflow-x: auto;
}
code { background: var(--surface); padding: 0.1em 0.4ch; border-radius: 3px; font-size: 0.9em; }
pre code { background: none; padding: 0; }
/* limited token set, palette-consistent; AA-checked on --surface */
code span.kw, code span.cf { color: var(--kw); }
code span.st, code span.ss { color: var(--str); }
code span.co { color: var(--muted); font-style: italic; }
code span.dv, code span.bn, code span.fl { color: var(--num); }
code span.fu, code span.ot { color: var(--fn); }
code span.va { color: var(--text); }

/* ───────────────────── Tables ───────────────────── */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--border); padding: 0.6lh 1ch; text-align: left; }
th { background: var(--surface); }

/* ───────────────────── Footer ───────────────────── */
footer {
  margin-block: 1lh; padding-top: 1lh; text-align: center;
  color: var(--muted); border-top: 2px solid var(--surface);
}

/* ───────────────────── Motion ───────────────────── */
/* terminal beat: blinking cursor on the `agentsbox enter` block (#cb1) */
@media (prefers-reduced-motion: no-preference) {
  #cb1 code::after { content: "▊"; color: var(--accent); animation: blink 1.1s step-end infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  /* copy-button icon swap */
  .install-cmd .icon-clipboard { transition: transform .3s cubic-bezier(0.16,1,0.3,1), opacity .3s; }
  .install-cmd.copied .icon-clipboard { transform: scale(.5); opacity: 0; }
  .install-cmd .icon-check { transition: transform .3s cubic-bezier(0.34,1.56,0.64,1); transform: scale(.5); }
  .install-cmd.copied .icon-check { transform: scale(1); }
  /* soft emerald glow on success */
  .install-cmd.copied { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 22%, transparent); }
}

/* ───────────────────── Mobile ───────────────────── */
@media (max-width: 48ch) {
  body { padding: 0 1ch 2ch; }
  main { padding: 1lh 1ch; }
  .site-header { margin: 0 -1ch; padding: 0 1ch; }
}