/* ampline.js.org: page styles, ported from the approved reference mockup.
   Colors come from tokens.css where a token exists. Nothing here loads from another origin. */

:root {
  /* "ampline mono" (Iosevka Fixed) advances 0.5em against the mockup mono's 0.6em and reads
     smaller at the same size, so mono text is scaled up to keep the mockup's visual size. */
  --mk: 1.15;
  /* quiet text: the darkest gray that still clears 4.5:1 on every surface it sits on (#0a0a0a, #0b0b0b,
     #070707; the mockup's #666/#555/#4a4a4a and a plain #777 don't) */
  --quiet: #7a7a7a;
  --nav-h: 58px;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
img { max-width: 100%; height: auto }
code { font: inherit }
:focus-visible { outline: 2px solid var(--white); outline-offset: 2px }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter) }

/* accessibility helpers */
.skip { position: absolute; left: var(--gutter); top: 8px; z-index: 100; transform: translateY(-200%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px;
  background: var(--white); color: var(--bg); font-weight: 600 }
.skip:focus { transform: none }
.visually-hidden, .sr-status { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgb(0 0 0 / .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #111 }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h) }
.brand { display: flex; align-items: center; gap: 9px }
.brand-wm { display: block; flex: none; width: 68px; max-width: none }
.vu-nav { flex: none }
.links { display: flex; gap: 22px; font-size: 13px; color: var(--muted) }
.links a:hover { color: var(--white) }

/* wave equalizer: compositor-only (transform + opacity), never height or box-shadow.
   .hold pins one bar lit: only the OG card's still image uses it; the live waves never hold a bar. */
.vu { display: flex; align-items: flex-end; gap: 3px }
.vu > span { flex: 1; height: 100%; border-radius: 1px; background: var(--c); transform-origin: bottom;
  transform: scaleY(var(--snap, .3)); opacity: .5; animation: wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms) }
@keyframes wave { 0%, 100% { transform: scaleY(.18); opacity: .45 } 25% { transform: scaleY(1); opacity: 1 } 50% { transform: scaleY(.3); opacity: .6 } }
.vu > span.hold { animation: none; transform: scaleY(1); opacity: 1; filter: drop-shadow(0 0 6px var(--c)) }
.vu-nav { width: 40px; height: 12px; gap: 1px }
.vu-hero { width: min(460px, 78vw); height: 44px; margin: 22px auto 0 }

/* hero */
.hero { padding-block: 88px 40px; text-align: center }
.hero-wm { margin: 0; line-height: 0 }
.hero-wm img { display: block; margin: 0 auto; width: clamp(164px, 35.7vw, 366px); height: auto }
.slogan { font-weight: 700; letter-spacing: -.035em; color: var(--white); font-size: clamp(32px, 5.4vw, 56px); line-height: 1.04; margin: 54px 0 16px }
.sub { color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 620px; margin: 0 auto }
.sub b { color: var(--text); font-weight: 500 }
.install { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; margin-top: 30px; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 12px 12px 18px; background: #0a0a0a; font-family: var(--mono); font-size: calc(15px * var(--mk)); color: var(--white) }
.install code { min-width: 0; overflow-x: auto; white-space: pre }
.prompt-sym { color: var(--quiet); -webkit-user-select: none; user-select: none } /* copy/selection gets the command only, not the "$ " */
.copy { flex: none; font-family: var(--sans); font-size: 12px; color: var(--muted); background: none; border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 11px; min-width: 6em; cursor: pointer; transition: color .15s, border-color .15s } /* 6em = 72px: "Copy" and "Copied" (38px text) share one width, so the label swap never shifts the layout */
.copy:hover { color: var(--white); border-color: #444 }
.copy.is-copied, .copy.is-copied:hover { color: var(--danger-1); border-color: var(--danger-1) } /* after :hover so the green state wins */
.meta { margin: 16px 0 0; font-family: var(--mono); font-size: calc(12px * var(--mk)); color: var(--quiet) }
.compat { margin: 10px 0 0; font-family: var(--mono); font-size: calc(12px * var(--mk)); color: var(--text) } /* the OS line under .meta: same mono scale, brighter than the quiet meta line */
.compat-dot { color: var(--danger-1) } /* decoration only, aria-hidden */

/* faux terminal */
.term { margin: 56px auto 0; max-width: 960px; border: 1px solid #1e1e1e; border-radius: 12px; background: var(--surface-2); overflow: hidden; text-align: left; box-shadow: 0 30px 80px rgb(0 0 0 / .6) }
.chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block }
.chrome .title { margin-left: 10px; font-family: var(--mono); font-size: calc(11px * var(--mk)); color: var(--quiet) }
.term-body { padding: 18px 18px 26px; font-family: var(--mono); font-size: calc(13px * var(--mk)); color: #9a9a9a; line-height: 1.7; min-height: 150px; white-space: pre-wrap; overflow-wrap: anywhere }
.term-body .p { color: var(--white) }
.caret { display: inline-block; width: .55em; height: 1.15em; background: var(--white); vertical-align: -.2em; animation: blink 1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
/* statuslines keep their exact columns and scroll inside their own box */
.sl { border-top: 1px solid var(--line); padding: 10px 18px 12px; font-family: var(--mono); font-size: calc(13px * var(--mk)); line-height: 1.65;
  white-space: pre; overflow-x: auto; color: #ddd; transition: filter .5s }
.term-hero .sl { min-height: calc(2 * 1.65em + 22px) } /* room for the two-line wrap before it powers up (no layout shift) */
.sl.is-scrollable, .card .s.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
.sl.sl-off { filter: brightness(.18) saturate(0) }
.seg-in { animation: segin .45s ease-out both }
@keyframes segin { from { opacity: 0; filter: blur(3px) } to { opacity: 1; filter: none } }
.ansi-dim { color: var(--muted) } /* solid gray, not opacity: 5.70:1 on the terminal #0b0b0b */

/* sections */
.section { padding-top: 110px }
.eyebrow { margin: 0; font-family: var(--mono); font-size: calc(12px * var(--mk)); color: var(--quiet); letter-spacing: .1em; text-transform: uppercase }
h2 { font-weight: 700; letter-spacing: -.03em; color: var(--white); font-size: clamp(28px, 4vw, 40px); margin: 10px 0 12px }
.lead { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 640px; margin: 0 }
.note { margin: 16px 0 0; font-size: 13px; color: var(--quiet); line-height: 1.5 }
.note + .note { margin-top: 6px }

/* customize / FAQ prompts after the segment tour */
.learn-note { margin: 40px auto 0; max-width: 560px; text-align: center; font-size: 13px; color: var(--quiet); line-height: 1.5 }
.learn { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 32px; margin: 14px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5 }
.learn > span { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .4em }
.learn a { color: var(--white); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px }
.learn a:hover { text-decoration-color: var(--white) }

/* segment tour */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--surface) }
.card h3 { font-size: 14px; font-weight: 600; color: var(--white); margin: 0 0 10px }
.card .d { font-size: 13px; color: var(--quiet); line-height: 1.5; margin: 12px 0 0 }
.card .s { font-family: var(--mono); font-size: calc(13px * var(--mk)); line-height: 1.5; background: var(--surface-2); border: 1px solid #161616; border-radius: 8px;
  padding: 9px 11px; white-space: pre; overflow-x: auto; color: #ddd }
.span2 { grid-column: span 2 }

/* playground: Phase 1 static preview (.term-play, .soon) and the Phase 2 controls */
.term-play { margin: 34px 0 0; max-width: none }
.soon { margin: 18px 0 0; font-family: var(--mono); font-size: calc(13px * var(--mk)); color: var(--white) }
.soon + .note { margin-top: 6px }

/* playground (Phase 2) */
.play { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; margin-top: 34px; align-items: start }
.play .term { margin: 0; max-width: none }
.ctl { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 16px; font-size: 13px; color: #aaa }
.ctl label { display: flex; flex-direction: column; gap: 7px }
.ctl .row { display: flex; justify-content: space-between }
.ctl .row span:last-child { font-family: var(--mono); font-size: calc(1em * var(--mk)); color: var(--white) }
.ctl input[type=range] { accent-color: var(--white); width: 100% }
.ctl select { background: var(--bg); color: var(--white); border: 1px solid var(--line-2); border-radius: 7px; padding: 7px; font: inherit }
.seg-toggles { display: flex; flex-wrap: wrap; gap: 6px }
.seg-toggles button { font: calc(12px * var(--mk)) var(--mono); color: #aaa; background: #0d0d0d; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; cursor: pointer }
.seg-toggles button[aria-pressed=true] { color: var(--bg); background: var(--white); border-color: var(--white) }
.legend { font-family: var(--mono); font-size: calc(12px * var(--mk)); color: var(--quiet); margin-top: 12px; line-height: 1.6 }

/* under the hood */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 34px }
.hood .n { margin: 0; font-family: var(--mono); font-size: calc(12px * var(--mk)); color: var(--quiet) }
.hood h3 { font-weight: 600; color: var(--white); font-size: 15px; margin: 10px 0 6px }
.hood p:not(.n) { margin: 0; font-size: 13px; color: #7a7a7a; line-height: 1.5 }
.hood::after { content: ""; display: block; height: 3px; width: 34px; margin-top: 16px; border-radius: 2px; background: var(--a) }
.hood-1 { --a: #5D8EE8 }
.hood-2 { --a: #4AC98C }
.hood-3 { --a: #E8763D }
.hood-4 { --a: #C43DE8 }

.more { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0 }
.btn { border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 16px; font-size: 14px; color: var(--white); background: #0a0a0a }
.btn:hover { border-color: #555 }

/* 404 */
.not-found { padding-block: 120px 0 }
.not-found h1 { font-weight: 700; letter-spacing: -.035em; color: var(--white); font-size: clamp(32px, 5.4vw, 56px); line-height: 1.04; margin: 10px 0 0 }

/* footer */
.footer { margin-top: 120px; border-top: 1px solid #111; padding: 36px 0 48px; color: var(--quiet); font-size: 13px }
.footer p { margin: 0 }
.footer-inner { display: flex; flex-direction: column; gap: 14px }
.footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px }
.footer-wm { display: block; width: 63px; justify-self: start }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-self: end }
.footer-links a:hover { color: var(--white) }
.footer-base { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap }
.ver { font-family: var(--mono); font-size: calc(11px * var(--mk)); color: var(--quiet) }
.disc { font-size: 12px; line-height: 1.6; max-width: 760px }

/* support pill, ported from blitzcast's "Buy Me a Beer" button; gold is the wheel's Sonnet-max stop */
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(232 178 61 / .6); border-radius: 999px;
  padding: 6px 16px; font: calc(12px * var(--mk))/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--gold);
  transition: background-color .15s, color .15s }
.pill:hover, .pill:focus-visible { background: var(--gold); color: #000 }

/* grid items default to min-width:auto (= content width); the white-space:pre
   terminal lines would otherwise stretch the track past the viewport */
.grid > *, .play > *, .cards4 > * { min-width: 0 }

@media (max-width: 820px) {
  .links a.hide-narrow { display: none } /* outranks the coarse-pointer `.links a` inline-flex below */
  .grid { grid-template-columns: minmax(0, 1fr) }
  .span2 { grid-column: auto }
  .play { grid-template-columns: minmax(0, 1fr) }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sl { font-size: calc(11.5px * var(--mk)) }
  /* live preview above the controls and pinned under the nav, so a slider change is visible */
  .play > div:last-child { order: -1; position: sticky; top: var(--nav-h); z-index: 5 }
  .play .term .term-body { display: none }
  .footer-row { grid-template-columns: 1fr; justify-items: center; gap: 16px }
  .footer-wm { justify-self: center }
  .footer-links { justify-self: center; justify-content: center }
  .footer-row .pill { order: -1 }
  .footer-inner { align-items: center; text-align: center }
  .footer-base { justify-content: center }
}

/* The install line on phones: the whole command stays visible, with Copy beside it on one row.
   Box chrome is 108px (2px border + 22px padding + 12px gap + the 72px Copy button) plus 4px of slack, and the
   command is 30 mono glyphs at 0.5em each = 15em, so the font shrinks just enough to fit the room left between
   the page gutters. It is capped at the desktop size and only binds below roughly 430px. */
@media (max-width: 480px) {
  .install { gap: 12px; padding: 8px 8px 8px 14px;
    font-size: min(calc(15px * var(--mk)), calc((100vw - 2 * var(--gutter) - 112px) / 15)) }
}

/* touch: every interactive element gets a 44px hit area */
@media (pointer: coarse) {
  .links a, .copy, .seg-toggles button, .ctl select, .btn, .learn a, .footer-links a, .brand {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center }
  .card .s { min-height: 44px } /* a one-line sample that overflows is a focusable scroll region (42.4px tall otherwise) */
  .card .s a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center } /* PR / MR links */
  .pill { min-height: 44px; padding: 0 18px }
  .ctl input[type=range] { height: 44px }
  .copy { padding: 0 16px; min-width: 6em } /* 72px: fits "Copied" (72px at this padding) without squeezing the command at 360px */
  .seg-toggles button { padding: 0 14px }
  .footer-links { gap: 8px 14px }
}

@media (prefers-reduced-motion: reduce) {
  .vu > span { animation: none; opacity: 1 }
  .caret { animation: none }
  .seg-in { animation: none }
  .sl { transition: none }
  .pill { transition: none }
  .copy { transition: none }
}