/*
 * Shared stylesheet for ainotchaos.com. Hand-written, no build step.
 * Palette and typography are the reels' own — see src/social/renderer/palette.ts
 * (DOSSIER_DESIGN_PALETTE) and the type trio in .claude/skills/reel-news/template.html.
 * Someone arriving here has just watched a reel; the site must look like the same place.
 */

:root {
  --ink: #0A1020;
  --ink-raised: #0F1729;
  --paper: #F2F6FC;
  --body: #D5DEEC;
  --muted: #C9D4E6;
  --signal: #7FD3F5;
  /* 4.61:1 on --ink. The previous #3E6A86 was 3.26:1, under the 4.5:1 AA floor,
     and every use of this token is 12-13px text: dates, footer, th, rule numbers. */
  --signal-dim: #4D83A5;
  --rule: rgba(234, 238, 247, 0.08);
  --rule-strong: rgba(127, 211, 245, 0.25);

  --display: "DM Sans", system-ui, sans-serif;
  --text: "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;

  --measure: 34rem;
  --frame: 72rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

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

/* Mobile browsers inflate text inside blocks they judge too wide for the screen
   ("font boosting"), which reads as the page opening at roughly double size and
   makes the measure below meaningless. `pre` was already opted out of it; the
   document as a whole was not, which only showed once a page carried enough
   long code blocks to trip the heuristic. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long unbreakable tokens — file paths, base URLs, `Authorization: Bearer …` —
     otherwise push past the 34rem measure, widen the layout viewport, and take
     the whole page's wrapping with them. */
  overflow-wrap: break-word;
}

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 12vw, 6rem) var(--gutter) 5rem;
}

/* Wide screens: centre a wider composition frame and sit the measure at its
   left edge. The text reads off dead-centre without being stranded far left
   on an ultrawide, because the frame keeps growing with the viewport.
   The left padding is also the room the hanging dates below need. */
@media (min-width: 64rem) {
  .page {
    max-width: var(--frame);
    padding-left: clamp(6.5rem, 7vw, 8rem);
  }
  .page > * { max-width: var(--measure); }
}

/* --- Type scale ------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  color: var(--paper);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 800; }
h2 { font-size: 1.4rem; font-weight: 700; margin-top: 3.5rem; }
h3 { font-size: 1.0625rem; font-weight: 700; margin-top: 2.25rem; }

p { margin: 1.1em 0; }
p:first-of-type { margin-top: 0; }

strong { color: var(--paper); font-weight: 600; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.5rem;
}

.lede {
  font-size: 1.1875rem;
  color: var(--paper);
  margin-top: 1.75rem;
}

.note {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --- Links ------------------------------------------------------------ */

a {
  color: var(--signal);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration-color: var(--signal); }

a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Rules: a ranked stack, not a flat list --------------------------- *
 * The deliverable states its own ordering ("if you only take one: number
 * one"). The numbers hang in the margin and the first rule is set larger,
 * so the page asserts the ranking the copy claims.                       */

.rules { margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: rule; }

.rule {
  counter-increment: rule;
  position: relative;
  padding: 1.75rem 0 0 3.25rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.75rem;
}
.rule:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.rule::before {
  content: "0" counter(rule);
  position: absolute;
  left: 0;
  top: 1.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--signal-dim);
  font-variant-numeric: tabular-nums;
}
.rule:first-child::before { top: 0.45rem; color: var(--signal); }

.rule h3 { margin-top: 0; }
.rule:first-child h3 { font-size: clamp(1.375rem, 4.5vw, 1.75rem); font-weight: 800; }
.rule:first-child p { color: var(--paper); }
.rule p { margin: 0.5rem 0 0; }

/* --- Reel index ------------------------------------------------------- */

.reels { margin: 2rem 0 0; padding: 0; list-style: none; }

.reel {
  position: relative;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.reel:last-child { border-bottom: 1px solid var(--rule); }

.reel .when {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--signal-dim);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.15rem;
}

/* Wide enough for the date to hang in the margin: titles then share the one
   left edge the rest of the page uses, instead of sitting 4.5rem inside it. */
@media (min-width: 64rem) {
  .reel .when {
    position: absolute;
    left: -5.25rem;
    top: 1.35rem;
    margin-bottom: 0;
    text-align: right;
    width: 4.25rem;
  }
}
.reel .what { font-family: var(--display); font-weight: 700; color: var(--paper); }
.reel .what a { color: inherit; }
.reel .what a:hover { color: var(--signal); }
.reel .said { font-size: 0.9375rem; color: var(--muted); margin: 0.15rem 0 0; }

/* --- Code ------------------------------------------------------------- */

pre {
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: 3px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--body);
  -webkit-text-size-adjust: 100%;
}

code { font-family: var(--mono); font-size: 0.9em; color: var(--paper); }
pre code { font-size: inherit; color: inherit; }

/* --- Tables ----------------------------------------------------------- */

.scroller { overflow-x: auto; margin: 1.5rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
  font-size: 0.875rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 1rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-dim);
}

td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--paper); }

/* --- Callout: the page's own caveats, shown not hidden ---------------- */

.caveat {
  border-left: 2px solid var(--signal-dim);
  padding: 0.1rem 0 0.1rem 1.25rem;
  margin: 2rem 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- Footer ----------------------------------------------------------- */

.foot {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* --- Setup picker ------------------------------------------------------
 * A deliverable page answers one question ("how do I set this up?") that has
 * a different answer per tool. Showing all four branches at once is how the
 * first version of these pages read wrong: a reader had to work out which
 * third of the page was theirs.
 *
 * Progressive enhancement is the whole design. The picker ships hidden and is
 * revealed by script; every branch section is visible in the HTML by default.
 * With no JS, or before it runs, the page is exactly what it was — a complete
 * document with every path in it. Nothing is behind a click that isn't also
 * in the source.
 */

.picker {
  margin: 2rem 0 2.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
}

.picker > p {
  margin: 0 0 0.85rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-dim);
}

.picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.picker button {
  font-family: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.picker button:hover { border-color: var(--rule-strong); color: var(--paper); }

.picker button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--signal);
  border-color: var(--signal);
}

.picker button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Shown by script only while a branch is selected, so the reader always has a
   one-click way back to the whole document. */
.picker-reset {
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
  color: var(--signal-dim);
}

.branch-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-dim);
  margin-bottom: 0.4rem;
}

[hidden] { display: none !important; }