/* Fonts and design tokens (palette, typography scale, both themes) come from
   the canonical token layer /static/css/tokens.css — imported from the Satelle
   Design System and linked FIRST by the layout. This sheet only styles the
   site's components on top of those tokens. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* All text is Space Grotesk (self-hosted, see @font-face above); only the
     monospace surfaces (terminal cast, code, command blocks) differ. */
  font: 15px/1.6 var(--display);
  background: var(--bg);
  color: var(--ink);
}

/* Form controls default to the UA font — pull them onto the site face. */
button, input, select, textarea { font-family: inherit; }

/* Base anchor: site accent, no underline — a bare <a> must never fall back
   to the UA default blue underlined text. Scoped rules (nav, docs, .btn
   variants) override colour where they need to. */
a { color: var(--accent); text-decoration: none; }

/* Headings carry the satellites tight tracking. */
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* ---- header / nav ----
   The header component (site-header, brand, mark, nav, toggles) is styled
   in the SHARED /static/css/header.css — one component for the landing and
   the app (templates/partials/header.html). */

/* ---- main ---- */
main {
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3.5rem 2rem;
}

/* ---- hero ---- */
.hero { margin-bottom: 3.5rem; }

.hero h1 {
  font-size: 3rem;
  margin: 0 0 0.5rem;
}

.tagline {
  font-size: 1.35rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.lede {
  font-size: 1.1rem;
  max-width: 70ch;
  margin: 0 0 1.5rem;
}

.local-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin: 0 0 1.75rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- concepts ---- */
.concepts h2 {
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.concept {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  transition: border-color 0.15s;
}
.concept:hover { border-color: var(--accent); }

.concept h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--accent);
}

.concept p { margin: 0; color: var(--ink); }

code {
  font-family: var(--mono);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}

.callout {
  margin-top: 2rem;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
}
.callout p { margin: 0; }

/* ---- install / tabs / command blocks ---- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--line);
}

.tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }

.tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-panel { margin-bottom: 1rem; }

.cmd {
  position: relative;
  margin: 0.75rem 0 1.25rem;
}

.cmd pre {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 4.5rem 1rem 1rem;
  overflow-x: auto;
}

.cmd code {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  white-space: pre;
}

.copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

.quickstart { margin-top: 2.5rem; }
.quickstart h2 { font-size: 1.5rem; }

/* ---- docs ---- */
.docs-index h3 a { color: var(--accent); text-decoration: none; }
/* Hover affordance is colour, never an underline (site-wide rule). */
.docs-index h3 a:hover { filter: brightness(1.15); }

.doc-back { margin: 0 0 1rem; }
.doc-back a { color: var(--muted); text-decoration: none; font-family: var(--mono); font-size: 0.85rem; }
.doc-back a:hover { color: var(--accent); }

.doc-body { max-width: 75ch; }
.doc-body h1 { font-size: 2rem; margin: 0 0 1rem; }
.doc-body h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; }
.doc-body h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.doc-body p, .doc-body li { color: var(--ink); }
.doc-body a { color: var(--accent); }

.doc-body pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.doc-body pre code { background: none; border: 0; padding: 0; white-space: pre; }
.doc-body :not(pre) > code {
  font-family: var(--mono);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}
.doc-body blockquote {
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.doc hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0 1rem; }
.doc-source { color: var(--muted); font-family: var(--mono); font-size: 0.85rem; }
.doc-source a { color: var(--accent); }

/* ---- footer — satellites .site-footer language: email · version, in mono ---- */
.site-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.25rem 2rem 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.site-footer .footer-email { color: var(--muted); }
.site-footer .footer-email:hover { color: var(--accent); }
.site-footer .footer-version { margin-left: auto; }

/* ---- responsive ---- */
/* (The header's mobile collapse lives in the shared header.css.) */
@media (max-width: 640px) {
  .hero h1 { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ==========================================================================
   Home — pi.dev-shaped landing (hero + terminal cast + features + omissions)
   Grounded in real satelle usage; layered after the base rules so it overrides
   the generic .hero styling above. Every page container — site main/.site-footer
   AND app .wrap — shares one content width: var(--content-width) capped at
   var(--content-max) (tokens.css, from the design system), so all pages match.
   ========================================================================== */

.hero {
  margin-bottom: 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0 0 1rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
/* Everything in the headline is italic except the upright ◐ satelle wordmark. */
.hero h1 em { font-style: italic; }
.hero h1 .wordmark, .hero h1 .wordmark * { font-style: normal; }

.hero .lede {
  font-size: 1.08rem;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}

.install-lead { margin: 0 0 1.75rem; }
.cmd-inline pre {
  padding: 0.8rem 4.2rem 0.8rem 0.9rem;
  font-size: 0.82rem;
}
/* The install one-liner is the primary CTA content — wrap it so the whole
   command is visible rather than scrolling off under the Copy button. */
.cmd-inline code { white-space: pre-wrap; word-break: break-all; }
.cmd-inline .copy-btn { top: 0.5rem; right: 0.5rem; }
.install-lead .local-badge { margin: 0.9rem 0 0; }

/* ---- the terminal cast (the "movie") ---- */
.cast {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.45);
  align-self: stretch;
}

.cast-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--chip);
}
.cast-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.cast-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.4rem;
}
.cast-replay {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.cast-replay:hover { border-color: var(--accent); color: var(--accent); }

.cast-screen {
  margin: 0;
  padding: 1.1rem 1.2rem 1.3rem;
  /* Fixed-height terminal window: the height is reserved from first paint so
     playing the cast never grows the box or pushes the page down. The transcript
     is taller than the window, so it scrolls internally and follows the newest
     output — the typing caret and gate spinner stay in view (see follow() in
     ui.js). */
  height: min(28rem, 70vh);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
}
/* Slim scrollbar so the terminal reads as a terminal, not a scrollable panel. */
.cast-screen::-webkit-scrollbar { width: 8px; }
.cast-screen::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.cast-line { display: block; }
.cast-prompt { color: var(--accent); font-weight: 700; }
.cast-line.cmd { color: var(--ink); }
.cast-screen .muted, .cast-screen .dim { color: var(--muted); }
.cast-screen .s { color: var(--muted); }
.cast-screen .ok { color: var(--accent); }
.cast-screen .no { color: var(--cast-red); font-weight: 700; }
.cast-screen .done { color: var(--accent); font-weight: 700; }

/* Claude Code console idiom: a user turn (> …), assistant turns leading with an
   orange ⏺, Bash tool calls, a ✻ working spinner, results indented under ⎿.
   Claude's chrome is orange; satelle's own status (● / ✓) stays accent-green so
   the two systems read apart. */
.cast-line.cc-user, .cast-line.cc-say, .cast-line.cc-tool, .cast-line.cc-res { color: var(--ink); }
.cast-line.cc-status { color: var(--muted); }
.cast-screen .bullet { color: var(--cc-orange); font-weight: 700; margin-right: 0.15rem; }
.cast-screen .cc-spin { color: var(--cc-orange); display: inline-block; }
.cast-screen .tool { color: var(--ink); font-weight: 700; }
.cast-screen .pipe { color: var(--muted); }
.cast-screen .pipe.cont { color: transparent; }

/* Composer input bar — the Claude Code prompt line under the transcript. */
.cast-composer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1.2rem 1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.cast-composer .cast-prompt { color: var(--accent); font-weight: 700; }
.cast-composer .composer-ph { color: var(--muted); }
.cast-composer .composer-hint { margin-left: auto; color: var(--muted); opacity: 0.7; }
.cast-composer .cast-caret { margin-left: -0.35rem; }

.cast-caret {
  display: inline-block;
  width: 0.55ch;
  height: 1.05em;
  transform: translateY(0.18em);
  background: var(--accent);
  animation: cast-blink 1s steps(1) infinite;
}
.cast-spin {
  display: inline-block;
  color: var(--accent);
  animation: cast-spin 0.9s linear infinite;
}
@keyframes cast-blink { 50% { opacity: 0; } }
@keyframes cast-spin { to { transform: rotate(360deg); } }

.cast-caption {
  margin: 0;
  padding: 0.7rem 1.2rem 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- section scaffolding ---- */
.section-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.section-lede {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 2rem;
}

/* ---- feature blocks ---- */
.features { margin-bottom: 4.5rem; }
.features .section-title { margin-bottom: 1.75rem; }

/* Lead feature — a prominent full-width callout for the key message, so the
   width reads as used, not blank. Accent left border marks it as the lead. */
.feature-lead {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--panel);
  padding: 1.4rem 1.7rem;
  margin: 0.25rem 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: 0.75rem 2.5rem;
  align-items: start;
}
.feature-lead h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.feature-lead p { margin: 0; font-size: 1.05rem; max-width: none; color: var(--ink); }

/* The rest — a two-column grid of stacked blocks, so the width is used
   efficiently instead of leaving an empty right-hand column. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
}
.feature {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.feature h3 {
  margin: 0 0 0.5rem;
  font-size: 1.12rem;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.feature p { margin: 0; font-size: 0.98rem; max-width: 60ch; color: var(--ink); }

/* ---- "what satelle doesn't do" ---- */
.didnt-build { margin-bottom: 4.5rem; }
.omit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.omit {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  background: var(--panel);
}
.omit h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-family: var(--mono);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.omit p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---- closing CTA band ---- */
.closer {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 3rem;
}
.closer h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.closer .cta-row { justify-content: center; }

/* ---- home responsive ---- */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 3.5rem;
  }
  .hero .lede { max-width: none; }
  /* The hard <br> in the headline is a desktop nicety; on narrow screens it
     forces an unwrappable line and horizontal overflow, so let it wrap. */
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero h1 br { display: none; }
  .feature-lead {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .feature-grid { grid-template-columns: 1fr; column-gap: 0; }
  /* Shorter fixed terminal on mobile so it doesn't dominate — it scrolls
     internally (lines wrap taller here) and still never pushes the page. */
  .cast-screen { height: 32rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cast-caret, .cast-spin { animation: none; }
  .cast-caret { display: none; }
  /* No animation, so no push-down to avoid — show the full transcript. */
  .cast-screen { height: auto; }
}

/* Login page — the sign-in form in the site's visual language (satelle-server). */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 22rem;
  margin-top: 1.5rem;
}
.login-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}
/* Inputs follow the design-system control spec: control-height, hairline
   border, radius 8, panel background. */
.login-form input {
  font: inherit;
  height: var(--control-height);
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}
.login-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.login-form .btn { align-self: flex-start; }
.login-error {
  color: #b3261e;
  font-weight: 600;
  margin-top: 1rem;
}
/* OAuth providers lead the sign-in page; the email/password form is the
   fallback below the "or" line. */
.login-providers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.login-or {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}