/* Hallmark · macrostructure: Workbench (annotated screenshot tour, sticky CTA after step 3) · genre: atmospheric
 * tone: technical, night-quiet · theme: custom (vibe: "the app's night sky, moon type, status lights")
 * paper oklch(15.6% 0.037 271) · accent oklch(97.3% 0.035 91) moon · semantic: waiting amber
 * display: Instrument Serif (roman) · body: IBM Plex Sans · mono: IBM Plex Mono (code only)
 * nav: N9 edge-aligned (wordmark + one CTA) · footer: Ft2 single line (no rule: atmospheric uses surfaces, not hairlines)
 * pre-emit critique: P4 H4 E4 S5 R5 V4 · contrast: pass (40–41) · mobile: pass (34, 49–51)
 */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Tokens — the app's palette (StandbyKit/Sources/DesignSystem/Tokens.swift). One dark world, on purpose. */
:root {
  color-scheme: dark;
  --color-paper: oklch(15.6% 0.037 271);        /* ink-deep */
  --color-paper-2: oklch(30.5% 0.095 268);      /* ink: the sky's glow */
  --color-paper-3: oklch(20% 0.05 270);         /* raised surface */
  --color-edge: oklch(40% 0.06 268 / 0.55);     /* screenshot frame edge */
  --color-ink: oklch(96.2% 0.013 87);           /* text, moon-tinted */
  --color-ink-2: oklch(96.2% 0.013 87 / 0.74);
  --color-ink-3: oklch(96.2% 0.013 87 / 0.6);
  --color-accent: oklch(97.3% 0.035 91);        /* moon */
  --color-accent-ink: oklch(15.6% 0.037 271);
  --color-waiting: oklch(79.6% 0.16 68);        /* "needs you": semantic, not decoration */
  --color-focus: oklch(79.6% 0.16 68);

  --font-display: "Instrument Serif", "New York", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --text-hero: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --text-mono: 0.92em;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-shot: 28px;          /* matches the iPhone screen corners in the screenshots */
  --radius-pill: 999px;
  --size-mark: 28px;            /* wordmark icon */
  --size-touch: 44px;           /* minimum tap target */
  --size-bar-button: 40px;
  --size-arrowhead: 0.45rem;
  --shot-width: 19rem;          /* one tour screenshot */
  --pin-width: 16rem;
  --page-max: 68rem;
  --measure: 62ch;
  --measure-lede: 46ch;
  --step-marker: 2.25rem;       /* setup step numbers */
  --pin-reach: 2.75rem;         /* annotation arrow length */
  --bar-clearance: 3rem;        /* room under the footer for the sticky bar */
  --rule-width: 1px;
  --ring-width: 2px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-short: 140ms;
  --dur-fade: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  background-image: radial-gradient(90rem 50rem at 10% -10%, var(--color-paper-2), transparent 60%);
  background-attachment: fixed;
  color: var(--color-ink);
  font: 400 var(--text-base)/1.6 var(--font-body);
  padding-inline: max(var(--space-md), env(safe-area-inset-left, 0px));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-underline-offset: 3px; text-decoration-thickness: var(--rule-width); }
a:hover { text-decoration-thickness: var(--ring-width); }
:focus-visible { outline: var(--ring-width) solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
code, kbd { font: 400 var(--text-mono) var(--font-mono); overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0 0 var(--space-md); }

.skip { position: absolute; left: var(--space-md); top: -10rem; padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); z-index: 3; }
.skip:focus { top: var(--space-md); }

.wrap { max-width: var(--page-max); margin-inline: auto; }

/* N9: wordmark left, one CTA right, nothing between */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none;
  font: 400 var(--text-lg)/1 var(--font-display); }
.wordmark img { width: var(--size-mark); height: var(--size-mark); border-radius: calc(var(--size-mark) / 4); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--size-touch); padding: 0 var(--space-lg); border-radius: var(--radius-pill);
  font: 500 var(--text-base)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  border: var(--rule-width) solid transparent;
  transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out);
}
.button:hover { text-decoration: none; }
.button:active { transform: translateY(1px); }
.button--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button--primary:hover { background: var(--color-ink); }
.button--outline { border-color: var(--color-edge); color: var(--color-ink); }
.button--outline:hover { background: var(--color-paper-3); }

/* Hero: small and functional; the tour below is the pitch */
.hero { padding-block: var(--space-xl) var(--space-2xl); max-width: var(--measure); }
.hero h1 { font: 400 var(--text-hero)/1.05 var(--font-display); color: var(--color-accent); margin: 0 0 var(--space-md); }
.lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: var(--measure-lede); margin: 0 0 var(--space-lg); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center; }
.note { font-size: var(--text-sm); color: var(--color-ink-3); margin: 0; }

/* The tour: screenshot frames are the dividers; sides alternate */
.tour { display: grid; gap: var(--space-3xl); padding-bottom: var(--space-2xl); }
.step { display: grid; grid-template-columns: var(--shot-width) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.step--flip { grid-template-columns: minmax(0, 1fr) var(--shot-width); }
.step--flip .shot { order: 2; }
.shot { position: relative; margin: 0; }
.shot img { border-radius: var(--radius-shot); border: var(--rule-width) solid var(--color-edge); }
.step h2 { font: 400 var(--text-xl)/1.15 var(--font-display); color: var(--color-accent); margin: var(--space-xl) 0 var(--space-sm); }
.step p { color: var(--color-ink-2); max-width: var(--measure-lede); }

/* Annotation pins: a label with an arrow pointing into the screenshot at height --y */
.pin { position: absolute; top: var(--y); left: calc(100% + var(--space-sm)); display: flex; align-items: center; gap: var(--space-xs);
  width: max-content; max-width: var(--pin-width); font-size: var(--text-sm); color: var(--color-ink); line-height: 1.35; }
.pin::before { content: ""; flex: none; width: var(--pin-reach); height: var(--ring-width); background: currentColor; }
.pin::after { content: ""; position: absolute; left: 0; width: var(--size-arrowhead); height: var(--size-arrowhead);
  border-left: var(--ring-width) solid currentColor; border-bottom: var(--ring-width) solid currentColor; transform: rotate(45deg); }
.step--flip .pin { left: auto; right: calc(100% + var(--space-sm)); flex-direction: row-reverse; text-align: right; }
.step--flip .pin::after { left: auto; right: 0; transform: rotate(-135deg); }
.pin--waiting { color: var(--color-waiting); }

/* Raised panels instead of hairlines (atmospheric) */
.panel { background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-xl); margin-bottom: var(--space-xl); }
.panel h2, .prose h2 { font: 400 var(--text-xl)/1.15 var(--font-display); color: var(--color-accent); margin: 0 0 var(--space-md); }
.panel p { color: var(--color-ink-2); max-width: var(--measure); }
.statement { padding-block: var(--space-xl); max-width: var(--measure); }
.statement h2 { font: 400 var(--text-xl)/1.15 var(--font-display); color: var(--color-accent); margin: 0 0 var(--space-md); }
.statement p { color: var(--color-ink-2); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); counter-reset: step; max-width: var(--measure); }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--step-marker) minmax(0, 1fr); gap: var(--space-sm); color: var(--color-ink-2); }
.steps li::before { content: counter(step); font: 400 var(--text-xl)/1 var(--font-display); color: var(--color-accent); }
.steps b { color: var(--color-ink); font-weight: 600; }

/* Sticky CTA bar, shown once the tour has passed its third step */
.cta-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: var(--space-md); align-items: center;
  padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-sm);
  transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out); }
.cta-bar[data-hidden="true"] { opacity: 0; transform: translateY(100%); pointer-events: none; visibility: hidden; }
.cta-bar .button { min-height: var(--size-bar-button); }

/* Ft2: one line, separated by space rather than a rule */
footer { padding-block: var(--space-xl) calc(var(--space-2xl) + var(--bar-clearance)); font-size: var(--text-sm); color: var(--color-ink-3);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); justify-content: space-between; }
footer a { color: var(--color-ink-2); white-space: nowrap; }
footer nav { display: flex; gap: var(--space-lg); }

/* Inner pages */
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--color-ink-2); }
.prose h2 { margin-top: var(--space-xl); }
.page-title { font: 400 var(--text-hero)/1.05 var(--font-display); color: var(--color-accent); margin: var(--space-xl) 0 var(--space-md); }
.updated { color: var(--color-ink-3); font-size: var(--text-sm); margin-bottom: var(--space-xl); }

@media (max-width: 56rem) {
  .step, .step--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .step--flip .shot { order: 0; }
  .shot { max-width: var(--shot-width); }
  .step h2 { margin-top: 0; }
  /* Pins become a list under the screenshot */
  .pins { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
  .pin, .step--flip .pin { position: static; width: auto; max-width: none; flex-direction: row; text-align: left; }
  .pin::before { width: var(--space-md); }
  .pin::after { display: none; }
  .tour { gap: var(--space-2xl); }
  .panel { padding: var(--space-lg); }
  .cta-bar span { display: none; }
}

@media (max-width: 24rem) {
  .wide-only { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}