/* docs-site/styles.css — ShortPlay developer docs.
   Consumes ONLY the DS token custom properties from app/src/styles/tokens.css (imported below,
   copied to dist/tokens.css by build.mjs) — no invented colours/spacing/type. Left nav on
   desktop, collapsible top nav on mobile (a "PageHeader-equivalent" chrome per the card AC).

   THEME NOTE (deliberate, documented — see docs-site/SOURCES.md "Theme decision"): tokens.css's
   own `[data-theme='light']` block is EXPLICITLY UNSUPPORTED/DORMANT today — tokens.css:603-611
   (W8 ruling, CPO 2026-08-20) states five measured pairs fail WCAG AA on that palette and a vitest
   gate (app/tests/qa/lightThemeUnsupported.test.ts) blocks any SHIPPING app/src file from setting
   `data-theme="light"`. This docs site holds the same AAA/AA bar (card AC: "contrast AA"), so it
   does NOT re-theme into that failing palette. The `prefers-color-scheme` + `[data-theme]` SEAM
   below exists structurally (so a future real light theme drops in with zero markup changes) but
   both currently resolve to the SAME (dark, AA-passing) values as :root — this is a light+dark
   SWITCH POINT, not a second live palette, until the app ships a real light theme. */

@import url('./tokens.css');

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font-ui);
  font-size: var(--sp-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* THEME SEAM — see the note at the top of this file. Both branches restate :root's dark values
   on purpose (no divergence into tokens.css's dormant/failing light palette). */
@media (prefers-color-scheme: light) {
  body {
    background: var(--sp-bg);
    color: var(--sp-text);
  }
}
[data-theme='light'] body {
  background: var(--sp-bg);
  color: var(--sp-text);
}

/* --- Skip link (a11y) --------------------------------------------------------------------- */
.sp-docs-skip-link {
  position: absolute;
  left: var(--sp-space-2);
  top: -100px;
  z-index: 100;
  background: var(--sp-surface-raised);
  color: var(--sp-text);
  padding: var(--sp-space-2) var(--sp-space-4);
  border-radius: var(--sp-radius-control);
  border: 1px solid var(--sp-control-border-strong);
  text-decoration: none;
  font-weight: var(--sp-weight-medium);
  transition: top var(--sp-dur-fade) var(--sp-ease-standard);
}
.sp-docs-skip-link:focus-visible {
  top: var(--sp-space-2);
  outline: var(--sp-focus-ring-width) solid var(--sp-focus-ring-color);
  outline-offset: var(--sp-focus-ring-offset);
}

/* --- Focus-visible ring (app-wide, matches the app's keyboard focus contract) --------------- */
a:focus-visible,
button:focus-visible,
.sp-docs-content pre:focus-visible {
  outline: var(--sp-focus-ring-width) solid var(--sp-focus-ring-color);
  outline-offset: var(--sp-focus-ring-offset);
  border-radius: var(--sp-radius-control);
}

/* --- Top bar (mobile chrome; also the persistent brand row on desktop) ---------------------- */
.sp-docs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: 1px solid var(--sp-hairline);
  background: var(--sp-nav-plate);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.sp-docs-topbar__brand {
  color: var(--sp-text);
  text-decoration: none;
  font-weight: var(--sp-weight-semibold);
  font-size: var(--sp-text-title);
  letter-spacing: var(--sp-tracking-tight);
}
.sp-docs-topbar__brand span {
  color: var(--sp-text-dim);
  font-weight: var(--sp-weight-regular);
  font-size: var(--sp-text-label);
  display: block;
  letter-spacing: var(--sp-tracking-label);
  text-transform: uppercase;
}
.sp-docs-topbar__nav-toggle {
  display: none;
  min-height: var(--sp-hit-min);
  min-width: var(--sp-hit-min);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: var(--sp-surface-raised);
  color: var(--sp-text);
  border: 1px solid var(--sp-control-border);
  border-radius: var(--sp-radius-control);
  font-family: inherit;
  font-size: var(--sp-text-body);
  font-weight: var(--sp-weight-medium);
  cursor: pointer;
}

/* --- Mobile nav (collapsible top nav — hidden on desktop, the left nav takes over) ---------- */
.sp-docs-mobile-nav {
  display: none;
}
.sp-docs-mobile-nav[data-open] {
  display: block;
  border-bottom: 1px solid var(--sp-hairline);
  background: var(--sp-surface);
  padding: var(--sp-space-2) var(--sp-space-4) var(--sp-space-4);
}
.sp-docs-mobile-nav .sp-docs-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-1);
}
.sp-docs-mobile-nav a {
  display: block;
  min-height: var(--sp-hit-min);
  display: flex;
  align-items: center;
  padding: var(--sp-space-2) var(--sp-space-3);
  color: var(--sp-text-dim);
  text-decoration: none;
  border-radius: var(--sp-radius-control);
  font-size: var(--sp-text-body);
}
.sp-docs-mobile-nav a:hover {
  color: var(--sp-text);
  background: var(--sp-surface-raised);
}
.sp-docs-mobile-nav a.is-active {
  color: var(--sp-text);
  background: var(--sp-surface-raised);
  font-weight: var(--sp-weight-semibold);
}

/* --- Shell layout: left nav (desktop) + content ---------------------------------------------- */
.sp-docs-shell {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-space-4);
}

.sp-docs-nav {
  display: none; /* mobile: the top collapsible nav is the only nav */
}

.sp-docs-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--sp-page-prose);
  margin: 0 auto;
  padding: var(--sp-space-8) 0 var(--sp-space-12);
}

@media (min-width: 900px) {
  .sp-docs-topbar__nav-toggle {
    display: none;
  }
  .sp-docs-mobile-nav {
    display: none !important; /* left nav takes over at desktop width */
  }
  .sp-docs-shell {
    gap: var(--sp-space-8);
    align-items: flex-start;
  }
  .sp-docs-nav {
    display: block;
    position: sticky;
    top: calc(var(--sp-space-8) + 56px);
    flex: 0 0 240px;
    padding: var(--sp-space-8) 0;
  }
  .sp-docs-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-1);
    border-left: 1px solid var(--sp-hairline);
  }
  .sp-docs-nav a {
    display: block;
    padding: var(--sp-space-2) var(--sp-space-4);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--sp-text-dim);
    text-decoration: none;
    font-size: var(--sp-text-body);
  }
  .sp-docs-nav a:hover {
    color: var(--sp-text);
  }
  .sp-docs-nav a.is-active {
    color: var(--sp-text);
    border-left-color: var(--sp-accent);
    font-weight: var(--sp-weight-semibold);
  }
  .sp-docs-content {
    margin: 0;
    padding: var(--sp-space-12) 0;
  }
}

@media (max-width: 899.98px) {
  .sp-docs-topbar__nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Prose typography (headings in order, DS type scale) ------------------------------------- */
.sp-docs-content h1 {
  font-size: var(--sp-text-display);
  font-weight: var(--sp-weight-bold);
  letter-spacing: var(--sp-tracking-tight);
  margin: 0 0 var(--sp-space-4);
}
.sp-docs-content h2 {
  font-size: var(--sp-text-title);
  font-weight: var(--sp-weight-semibold);
  margin: var(--sp-space-12) 0 var(--sp-space-3);
  padding-top: var(--sp-space-2);
  border-top: 1px solid var(--sp-hairline);
}
.sp-docs-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.sp-docs-content h3 {
  font-size: var(--sp-text-hook);
  font-weight: var(--sp-weight-semibold);
  margin: var(--sp-space-8) 0 var(--sp-space-2);
}
.sp-docs-content h4 {
  font-size: var(--sp-text-body);
  font-weight: var(--sp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--sp-tracking-label);
  color: var(--sp-text-dim);
  margin: var(--sp-space-6) 0 var(--sp-space-2);
}
.sp-docs-content p,
.sp-docs-content ul,
.sp-docs-content ol {
  margin: 0 0 var(--sp-space-4);
  color: var(--sp-text);
}
.sp-docs-content ul,
.sp-docs-content ol {
  padding-left: var(--sp-space-6);
}
.sp-docs-content li {
  margin-bottom: var(--sp-space-1);
}
.sp-docs-content a {
  color: var(--sp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sp-docs-content a:hover {
  color: var(--sp-primary-hover);
}
.sp-docs-content strong {
  font-weight: var(--sp-weight-semibold);
}
/* QA re-walk slice B (bug-docs-getting-started-and-makers-api-scroll-sideways-both-viewports-
   1440px-screenshots-no-max-width): the walkthrough screenshots are captured at the desktop shoot
   viewport (1440px, appShoot.spec.ts) — with no max-width they render at their intrinsic size and
   widen the page's own scrollWidth past the phone/desktop viewport (measured 1456 @ 390, 1768 @
   1280 before this rule). Every image in the content column scales down to its container instead. */
.sp-docs-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sp-radius-card);
  border: 1px solid var(--sp-hairline);
}
.sp-docs-content blockquote {
  margin: 0 0 var(--sp-space-4);
  padding: var(--sp-space-3) var(--sp-space-4);
  border-left: 3px solid var(--sp-accent);
  background: var(--sp-surface);
  border-radius: 0 var(--sp-radius-control) var(--sp-radius-control) 0;
  color: var(--sp-text-dim);
}
.sp-docs-content hr {
  border: none;
  border-top: 1px solid var(--sp-hairline);
  margin: var(--sp-space-8) 0;
}

/* --- Code (every sample is a fenced block with a language, per the card AC) ------------------- */
.sp-docs-content code {
  font-family: var(--sp-font-mono);
  font-size: 0.9em;
  background: var(--sp-surface-raised);
  border-radius: var(--sp-radius-chip);
  padding: 0.15em 0.4em;
}
.sp-docs-content pre {
  background: var(--sp-surface);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-card);
  padding: var(--sp-space-4);
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 var(--sp-space-4);
}
.sp-docs-content pre code {
  background: none;
  padding: 0;
  font-size: var(--sp-text-body);
  line-height: 1.55;
  /* QA re-walk slice B: a long unbroken bash line (e.g. the curl walkthrough) must scroll INSIDE
     the pre's own overflow-x:auto box, never widen it. `white-space: pre` is normally inherited
     from the <pre> UA default, but stating it explicitly makes the contract non-accidental; `display:
     block` + `min-width: 0` stop the inline <code> from becoming a flex/grid-sized child that
     ignores its ancestor's max-width (the same class of bug the .table-scroll wrapper above fixes
     for wide tables). */
  white-space: pre;
  display: block;
  min-width: 0;
}

/* --- Tables (the generated manifest table + others) ------------------------------------------- */
/* QA post-walk 2026-09-08-postwalk-docs-site-11488 finding #3: a table-layout:auto table with
   nowrap code cells has a minimum content width `width:100%` can't shrink below (CSS2.1 tables are
   exempt from normal block containment), so a wide table bleeds past its container into the
   page's horizontal scroll at 390px. build.mjs wraps every generated <table> in this div; the div
   (a normal block box, not a table) absorbs the overflow as its OWN internal scroll instead. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 var(--sp-space-6);
}
.table-scroll table {
  margin: 0;
}
.sp-docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-space-6);
  font-size: var(--sp-text-body);
}
.sp-docs-content th,
.sp-docs-content td {
  text-align: left;
  padding: var(--sp-space-2) var(--sp-space-3);
  border-bottom: 1px solid var(--sp-hairline);
  vertical-align: top;
}
.sp-docs-content th {
  color: var(--sp-text-dim);
  font-weight: var(--sp-weight-semibold);
  text-transform: uppercase;
  font-size: var(--sp-text-label);
  letter-spacing: var(--sp-tracking-label);
}
.sp-docs-content table code {
  white-space: nowrap;
}

/* --- Footer ------------------------------------------------------------------------------------ */
.sp-docs-footer {
  border-top: 1px solid var(--sp-hairline);
  padding: var(--sp-space-6) var(--sp-space-4);
  color: var(--sp-text-faint);
  font-size: var(--sp-text-label);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sp-docs-skip-link {
    transition: none;
  }
}