/*
 * The site's stylesheet — the pclshm family's EDITORIAL DARK register (the handoff's
 * "Night Press": warm near-black ground, ember accent, Newsreader display, Geist prose,
 * JetBrains Mono for every piece of metadata), applied to Playground's product page.
 *
 * Tokens are the family's own values (the design-system spec §2.2 dark theme and the
 * pclshm.io kit 5a), spelled once here because this page lives outside the bundle and
 * the vendored `packages/ui-kit/src/family/foundation.css` is the app's, not a website's.
 * The rules the register fixes and this file must not break: hairline rules over cards
 * and one bordered container deep; metadata always mono and tabular, prose never mono;
 * status is never drawn with the brand accent; the gradient is allowed on the single
 * primary call-to-action and nowhere else; nothing claims a state it cannot observe.
 */

:root {
  color-scheme: dark;

  /* surfaces */
  --surface-window: #0e0d0c;
  --surface-raised: #151413;
  --surface-code: #0a0a09;
  --line-subtle: #262421;
  --line-default: #393934;
  --line-strong: #4f4d47;

  /* text */
  --text-primary: #f4f1ea;
  --text-secondary: #ada99f;
  --text-muted: #8c887e; /* ≥18px, or decorative, only — 4.3:1 on the ground */
  --text-on-action: #1c1c1a;

  /* the brand hue: ember, the dark-theme value of the family token */
  --ember: #f18a62;
  --ember-strong: #f9a365;
  --ember-wash: rgba(241, 138, 98, 0.12);
  --action-gradient: linear-gradient(100deg, #f2b45c, #e8813f);

  /* status — its own ramp, never the accent */
  --status-ok: #8bbf91;
  --status-warn: #dfb86a;
  --status-failed: #e4808b;
  --status-info: #83becb;

  /* faces */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* scale — the family's, verbatim */
  --type-xs: 11px;
  --type-sm: 12px;
  --type-base: 13.5px;
  --type-md: 15px;
  --type-lg: 18px;
  --type-xl: 22px;
  --type-2xl: 28px;
  --type-3xl: 40px;
  --type-4xl: 56px;

  /* spacing — the 4px scale; the website is the comfortable density */
  --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-28: 28px; --space-36: 36px;
  --space-48: 48px; --space-72: 72px;
  --row: 48px;
  --target: 44px;
  --radius: 2px;

  /* layout */
  --header-height: 72px;
  --frame-max: 1280px;
  --gutter: clamp(20px, 3vw, 48px);
  --frame: min(var(--frame-max), calc(100% - 2 * var(--gutter)));
  --section-space: clamp(48px, 5vw, 72px);
  --measure: 62ch;

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
  html { scroll-behavior: auto !important; }
}

/* ---- ground ------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-window);
  color: var(--text-primary);
  font: 400 var(--type-md) / 1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; text-wrap: balance; }
h1, h2, .display { font-family: var(--font-display); letter-spacing: -0.005em; }
h3 { font-size: var(--type-xl); font-family: var(--font-display); }
h4 { font-size: var(--type-md); font-weight: 500; }
a { color: var(--ember); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
strong { font-weight: 500; color: var(--text-primary); }
em { font-style: italic; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Focus: one ring, everywhere, in both polarities — 2px accent at 2px offset. */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20;
  padding: var(--space-8) var(--space-12); background: var(--surface-raised);
  border: 1px solid var(--line-default); color: var(--text-primary);
  font: 500 var(--type-sm) / 1 var(--font-mono);
}
.skip:focus { top: var(--space-12); }

/* Metadata is always mono, always tabular, always the smallest thing on screen. */
.mono, code, kbd, .meta, .eyebrow, .marker, .pill, .nav a, .btn, .lockup, figcaption, .status-line {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
code {
  font-size: 0.92em; color: var(--text-primary);
  background: var(--surface-raised); border: 1px solid var(--line-subtle);
  padding: var(--space-2) 5px; border-radius: var(--radius);
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
kbd { font-size: 0.85em; border: 1px solid var(--line-default); padding: 1px 5px; border-radius: var(--radius); }

.meta { font-size: var(--type-xs); color: var(--text-secondary); letter-spacing: 0.02em; }
.eyebrow {
  font-size: var(--type-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary);
}
.eyebrow b { color: var(--ember); font-weight: 500; }
.muted { color: var(--text-secondary); }
.measure { max-width: var(--measure); }

/* ---- the frame ------------------------------------------------------------------ */

.frame { width: var(--frame); margin-inline: auto; }
section { padding-block: var(--section-space); }
section + section, .site-footer { border-top: 1px solid var(--line-subtle); }
.section-head { display: grid; gap: var(--space-12); max-width: 46rem; margin-bottom: var(--space-36); }
.section-head h2 { font-size: clamp(var(--type-2xl), 1.4rem + 1.8vw, var(--type-3xl)); }
.section-head p { color: var(--text-secondary); }

/* The numbered marker: mono, a hairline rule running to the margin. */
.marker {
  display: flex; align-items: center; gap: var(--space-12);
  font-size: var(--type-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary);
}
.marker b { color: var(--ember); font-weight: 500; }
.marker::after { content: ""; flex: 1; height: 1px; background: var(--line-subtle); }

/* ---- header ---------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface-window) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-subtle);
}
.site-header .frame {
  min-height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-28); flex-wrap: wrap;
  padding-block: var(--space-12);
}
.lockup {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-size: var(--type-sm); color: var(--text-secondary); white-space: nowrap;
  min-height: var(--target);
}
.lockup:hover { text-decoration: none; }
.lockup img { width: 22px; height: 22px; border-radius: 5px; }
.lockup .slash { color: var(--text-muted); }
.lockup .product { color: var(--ember); font-weight: 500; }
.nav { margin-left: auto; display: flex; gap: var(--space-4) var(--space-20); flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--target);
  font-size: var(--type-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary); transition: color var(--motion-fast) var(--ease);
}
.nav a:hover { color: var(--text-primary); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text-primary); text-decoration: underline; text-underline-offset: 6px; }

/* ---- buttons --------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--target); padding: 0 var(--space-20);
  font-size: var(--type-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-default); border-radius: var(--radius);
  color: var(--text-primary); background: transparent;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.btn:hover { text-decoration: none; border-color: var(--line-strong); background: var(--surface-raised); }
/* The gradient: allowed on the one primary call-to-action, ink on it, nowhere else. */
.btn-primary { background: var(--action-gradient); border-color: transparent; color: var(--text-on-action); }
.btn-primary:hover { background: var(--action-gradient); filter: brightness(1.05); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---- hero ------------------------------------------------------------------------ */

.hero { padding-block: clamp(48px, 7vw, 96px) var(--section-space); }
.hero-copy { display: grid; gap: var(--space-20); max-width: 52rem; }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, var(--type-4xl)); font-weight: 500; }
.hero h1 .turn { display: block; font-style: italic; font-weight: 400; color: var(--ember); }
.hero .lede { font-size: var(--type-lg); line-height: 1.5; color: var(--text-secondary); max-width: 40rem; }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; margin-top: var(--space-8); }
.cta .fine { flex-basis: 100%; font-size: var(--type-sm); color: var(--text-secondary); max-width: 44rem; }
.hero-shot { margin-top: var(--space-48); }

/* ---- screenshots ----------------------------------------------------------------- */

figure.shot { margin: 0; border: 1px solid var(--line-default); border-radius: var(--radius); background: var(--surface-raised); overflow: hidden; }
figure.shot img { width: 100%; }
figure.shot figcaption {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); align-items: baseline;
  padding: var(--space-8) var(--space-12); border-top: 1px solid var(--line-subtle);
  font-size: var(--type-xs); color: var(--text-secondary); letter-spacing: 0.02em;
}
figure.shot figcaption b { color: var(--text-primary); font-weight: 500; }
figure.shot figcaption .from { margin-left: auto; color: var(--text-muted); }

/* ---- principles ----------------------------------------------------------------- */

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-subtle); }
.principles > div { padding: var(--space-28) var(--space-28) var(--space-28) 0; border-bottom: 1px solid var(--line-subtle); display: grid; gap: var(--space-12); align-content: start; }
.principles > div + div { border-left: 1px solid var(--line-subtle); padding-left: var(--space-28); }
.principles h3 { font-size: var(--type-xl); }
.principles p { color: var(--text-secondary); font-size: var(--type-base); line-height: 1.55; }
.principles blockquote { margin: 0; font-family: var(--font-display); font-size: var(--type-md); color: var(--text-primary); font-style: italic; }

/* ---- index rows — a divider beats a card ------------------------------------------ */

.rows { list-style: none; border-top: 1px solid var(--line-subtle); }
.rows li {
  display: grid; grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: var(--space-16); align-items: baseline;
  padding: var(--space-16) 0; min-height: var(--row);
  border-bottom: 1px solid var(--line-subtle);
}
.rows .n { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--ember); letter-spacing: 0.1em; padding-top: 3px; }
.rows h3 { font-size: var(--type-lg); font-family: var(--font-body); font-weight: 500; }
.rows h3 a { color: inherit; }
.rows .where { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-secondary); }
.rows p { color: var(--text-secondary); font-size: var(--type-base); line-height: 1.55; }
.rows .go { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; min-height: var(--target); display: inline-flex; align-items: center; }

.shots-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); margin-block: var(--space-36); }

/* ---- pills ----------------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  padding: 5px var(--space-8); border: 1px solid var(--line-default); border-radius: var(--radius);
  color: var(--text-secondary); white-space: nowrap;
}
.pill.accent { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 45%, var(--line-default)); }
.pill.ok { color: var(--status-ok); border-color: color-mix(in srgb, var(--status-ok) 40%, var(--line-default)); }
.pill.warn { color: var(--status-warn); border-color: color-mix(in srgb, var(--status-warn) 40%, var(--line-default)); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* ---- connection cards (the one Playground-only component in the spec) ------------- */

.connections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.connection { border: 1px solid var(--line-default); border-radius: var(--radius); background: var(--surface-raised); padding: var(--space-20); display: grid; gap: var(--space-12); align-content: start; }
.connection .pill { justify-self: start; }
.connection h3 { font-family: var(--font-body); font-size: var(--type-lg); font-weight: 500; }
.connection p { color: var(--text-secondary); font-size: var(--type-base); line-height: 1.55; }
.connection ul { list-style: none; display: grid; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-secondary); }
.connection ul li::before { content: "· "; color: var(--text-muted); }

/* ---- code / terminal block ------------------------------------------------------- */

.code {
  border: 1px solid var(--line-default); border-radius: var(--radius);
  background: var(--surface-code); overflow: hidden;
}
.code .bar {
  display: flex; align-items: center; gap: var(--space-12);
  padding: 0 var(--space-12); min-height: 34px;
  border-bottom: 1px solid var(--line-subtle); background: var(--surface-raised);
  font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-secondary); letter-spacing: 0.08em; text-transform: uppercase;
}
.code .bar .lang { margin-left: auto; color: var(--text-muted); }
.code .bar button {
  font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary); min-height: 28px; padding: 0 var(--space-8); border: 1px solid var(--line-subtle); border-radius: var(--radius);
}
.code .bar button:hover { color: var(--text-primary); border-color: var(--line-default); }
.code pre {
  margin: 0; padding: var(--space-16); overflow-x: auto;
  font: 400 var(--type-sm) / 1.7 var(--font-mono); color: var(--text-primary); tab-size: 2;
}
.code .p { color: var(--ember); }
.code .c { color: var(--text-secondary); }
.code .ok { color: var(--status-ok); }
.code .warn { color: var(--status-warn); }
.code .n { color: var(--status-info); }

/* ---- download -------------------------------------------------------------------- */

.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.platform { border: 1px solid var(--line-default); border-radius: var(--radius); background: var(--surface-raised); padding: var(--space-20); display: grid; gap: var(--space-12); align-content: start; }
.platform.here { border-color: color-mix(in srgb, var(--ember) 55%, var(--line-default)); }
.platform header { display: flex; align-items: center; gap: var(--space-12); }
.platform header svg { width: 22px; height: 22px; color: var(--text-secondary); flex: none; }
.platform header h3 { font-family: var(--font-body); font-size: var(--type-lg); font-weight: 500; }
.platform header .pill { margin-left: auto; }
.platform .files { list-style: none; display: grid; gap: var(--space-4); }
.platform .files li { border-top: 1px solid var(--line-subtle); }
.platform .files a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-12); align-items: baseline;
  padding: var(--space-8) 0; min-height: var(--row); color: var(--text-primary); font-size: var(--type-base);
}
.platform .files a:hover { text-decoration: none; color: var(--ember); }
.platform .files .kind { grid-column: 1; font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-secondary); }
.platform .files .size { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-secondary); align-self: center; }
.platform .files .muted { font-size: var(--type-base); padding: var(--space-8) 0; }
.platform .note { font-size: var(--type-base); color: var(--text-secondary); line-height: 1.55; }
.status-line { margin-top: var(--space-20); font-size: var(--type-xs); color: var(--text-secondary); }

/* ---- steps ----------------------------------------------------------------------- */

.two-col { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-48); align-items: start; }
.steps { list-style: none; border-top: 1px solid var(--line-subtle); }
.steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid var(--line-subtle); }
.steps .n { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--ember); letter-spacing: 0.1em; padding-top: 4px; }
.steps b { display: block; font-weight: 500; margin-bottom: var(--space-4); }
.steps span { color: var(--text-secondary); font-size: var(--type-base); line-height: 1.55; }

/* ---- feature pages --------------------------------------------------------------- */

.toc { list-style: none; columns: 3; column-gap: var(--space-28); border-top: 1px solid var(--line-subtle); padding-top: var(--space-16); }
.toc li { break-inside: avoid; display: flex; gap: var(--space-12); align-items: baseline; min-height: 36px; }
.toc .n { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--ember); letter-spacing: 0.1em; }
.toc a { color: var(--text-primary); font-size: var(--type-base); }

.feature { scroll-margin-top: calc(var(--header-height) + var(--space-16)); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-48); align-items: start; }
.feature-body { display: grid; gap: var(--space-16); }
.feature-body h2 { font-size: clamp(var(--type-2xl), 1.3rem + 1.6vw, var(--type-3xl)); }
.feature-body .lede { font-size: var(--type-lg); color: var(--text-secondary); line-height: 1.5; }
.feature-body p { color: var(--text-secondary); }
.feature-body p strong, .feature-body li strong { color: var(--text-primary); }
.feature-aside { display: grid; gap: var(--space-20); position: sticky; top: calc(var(--header-height) + var(--space-16)); }
.where-list { border-top: 1px solid var(--line-subtle); }
.where-list div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-12); padding: var(--space-8) 0; border-bottom: 1px solid var(--line-subtle); font-size: var(--type-base); }
.where-list dt { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); padding-top: 3px; }
.where-list dd { margin: 0; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--type-sm); line-height: 1.6; overflow-wrap: anywhere; }
.why { border-left: 2px solid var(--ember); padding-left: var(--space-16); margin: 0; display: grid; gap: var(--space-8); }
.why p { font-family: var(--font-display); font-size: var(--type-lg); font-style: italic; color: var(--text-primary); line-height: 1.4; }
.why cite { font-family: var(--font-mono); font-size: var(--type-xs); font-style: normal; color: var(--text-secondary); }
.feature-body ul { list-style: none; display: grid; gap: var(--space-8); }
/* Positioned, not a grid: a grid would seat an inline <code> in a cell of its own. */
.feature-body ul li { position: relative; padding-left: calc(1rem + var(--space-8)); color: var(--text-secondary); }
.feature-body ul li::before { content: "·"; position: absolute; left: 0; color: var(--ember); font-family: var(--font-mono); }

/* ---- footer ---------------------------------------------------------------------- */

.site-footer { padding-block: var(--space-36); color: var(--text-secondary); font-size: var(--type-sm); }
.site-footer .frame { display: grid; gap: var(--space-20); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-28); align-items: center; }
.site-footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-20); }
.site-footer nav a { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); min-height: var(--target); display: inline-flex; align-items: center; }
.site-footer nav a:hover { color: var(--text-primary); }
.site-footer .family { border-top: 1px solid var(--line-subtle); padding-top: var(--space-16); font-size: var(--type-base); max-width: 60rem; line-height: 1.55; }

/* ---- responsive ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .principles { grid-template-columns: 1fr; }
  .principles > div, .principles > div + div { padding-inline: 0; border-left: 0; }
  .rows li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .rows li p { grid-column: 2; }
  .rows li .go { grid-column: 2; min-height: 0; }
  .connections, .platforms { grid-template-columns: 1fr; }
  .two-col, .feature-grid { grid-template-columns: 1fr; }
  .feature-aside { position: static; }
  .toc { columns: 2; }
  .shots-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .toc { columns: 1; }
  .site-header .frame { gap: var(--space-8) var(--space-16); }
  .nav { margin-left: 0; width: 100%; gap: 0 var(--space-16); }
  .hero .lede { font-size: var(--type-md); }
  section { padding-block: var(--space-48); }
  figure.shot figcaption .from { margin-left: 0; }
}