/* The Star Book: teaching instrument. Cool paper, navy structure, gold only
   for star marks and "gate open" states. Light-only. Sibling to Rate Book,
   not a copy of its warm paper / money-green palette. */

* { box-sizing: border-box; }

/* Token pass, 2026-08-07. Every value below was measured in-browser with alpha
   compositing, not eyeballed. Two rules came out of it:

   1. A gold that works as a stroke does not work as text. --gold is for strokes,
      fills, tints, and accent-color; --gold-ink is the only gold allowed on text.
      #a67c00 measures 3.8:1 on white, which fails AA at the sizes this page uses.
   2. --ink-faint has to clear on --paper, not just on white cards. The old
      #6a7583 passed at 4.68 on a card and failed at 4.29 on the page background,
      so the same token was compliant in one place and not in another.

   The green "gate open" state was retired here. Two reasons: SPEC section 6 says
   one gold accent carries the at/above-gate state, and the old #0e7a5a sat close
   to The Rate Book's money-green #0b6b4f, which on sibling pages would have meant
   "dollars" there and "gate open" here. Gold is also simply the right colour for
   a page whose subject is stars. */
:root {
  --paper: #f3f5f8;
  --card: #ffffff;
  --ink: #1a222c;
  --ink-soft: #44505e;
  --ink-faint: #626c7a;   /* 4.87 on paper, 5.32 on card, 5.04 on chip */
  --navy: #27548c;
  --gold: #a67c00;        /* strokes, fills, accent-color. NEVER text. */
  --gold-ink: #7a5a00;    /* the only gold for text: 5.8 paper, 6.4 card, 5.7 tint */
  --gold-tint: #fbf2dc;   /* "gate open" chip fill */
  --gold-edge: #e3cd92;   /* "gate open" chip border */
  --gold-soft: #c9a227;   /* gold on dark surfaces only */
  --rule: #dde3ea;
  --spine-bg: #1c2430;
  --spine-label: #93a0b0;
  --spine-value: #f0d27a;
  --spine-op: #8b95a0;    /* was #6b7783, 3.42 on the spine */
  --spine-context: #b7c2d0;
  --spine-rule: #363d47;
  --gate-off: #626c7a;    /* was #8a93a0, 2.94 on the chip: worst on the page */
  color-scheme: light;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(39, 84, 140, 0.08), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(166, 124, 0, 0.07), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: "Public Sans", system-ui, sans-serif;
  line-height: 1.65;
  padding: 22px 20px 80px;
}

.mono { font-family: "IBM Plex Mono", monospace; }

.back {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-decoration: none;
}
.back:hover { color: var(--ink); }

.masthead { max-width: 720px; margin: 52px auto 36px; }

.wordmark {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin: 0 0 10px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.star-flourish {
  /* Enlarged 2026-08-07 after seeing it rendered: at 132x20 the risers were 4px
     and the mark read as a squiggle rather than a ladder. */
  width: 140px;
  height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.star-flourish path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw-star 1.05s ease-out forwards;
}
/* The star draws first, then the ladder climbs out of it. */
.star-flourish .sf-star { animation-delay: 0.15s; }
.star-flourish .sf-ladder { animation-delay: 0.5s; }
@keyframes draw-star { to { stroke-dashoffset: 0; } }

.masthead h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 14px;
}
.lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 58ch; margin: 0 0 14px; }
.meta-line {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0;
}

.spine {
  position: sticky;
  top: 10px;
  z-index: 10;
  background: var(--spine-bg);
  color: #f2f4f6;
  border-radius: 12px;
  max-width: 860px;
  margin: 0 auto 56px;
  padding: 14px 18px 10px;
  box-shadow: 0 10px 30px rgba(28, 36, 48, 0.2);
}
.spine-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flow-step { display: flex; flex-direction: column; min-width: 100px; }
.flow-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--spine-label);
}
.flow-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--spine-value);
  font-variant-numeric: tabular-nums;
}
.flow-value.flash { animation: value-flash 0.45s ease-out; }
@keyframes value-flash {
  0% { color: #ffffff; }
  100% { color: var(--spine-value); }
}
.flow-op { color: var(--spine-op); font-size: 1.1rem; }
.spine-context {
  margin: 9px 0 0;
  font-size: 0.84rem;
  color: var(--spine-context);
  max-width: 70ch;
  /* Separates the sentence from the values it explains, as Rate Book's does. */
  border-top: 1px solid var(--spine-rule);
  padding-top: 8px;
}

main { max-width: 720px; margin: 0 auto; }

.chapter { margin: 0 0 72px; }
/* Body copy was running the full 720px, roughly 90 characters, which reads as
   undesigned however good the type is. Rate Book caps its measure at 66ch. */
.chapter p { max-width: 66ch; }
.ch-mark {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--navy);
  margin: 0 0 8px;
}
.chapter h2 {
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.chapter p { margin: 0 0 14px; color: var(--ink-soft); }
.chapter p strong { color: var(--ink); font-weight: 650; }
.chapter a { color: var(--navy); }

.caveat {
  font-size: 0.92rem;
  color: var(--ink-faint);
  border-left: 3px solid var(--rule);
  padding-left: 12px;
}

.control-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 22px 0 16px;
  /* Rate Book lifts its cards off the paper with a very soft shadow. Flat
     bordered boxes were most of why this page read as less finished. */
  box-shadow: 0 2px 10px rgba(26, 34, 44, 0.04);
}
.control-label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin: 0 0 10px;
}

#star-slider {
  width: 100%;
  accent-color: var(--gold);
}
.tick-row {
  display: flex;
  justify-content: space-between;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  color: var(--ink-faint);
  margin-top: 6px;
}
.gate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.gate-chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--gate-off);
  background: #f7f9fb;
  /* Gates open and close as the dial moves; snapping made it read as a redraw
     rather than a state change. */
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gate-chip.is-on {
  color: var(--gold-ink);
  border-color: var(--gold-edge);
  background: var(--gold-tint);
  font-weight: 500;
}
.gate-chip.is-on .gate-star { color: var(--gold-ink); }

.weight-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.weight-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 8px 14px;
  cursor: pointer;
}
.weight-btn.is-on {
  background: var(--navy);
  color: #fff;
}

/* Was a bare bordered table sitting loose on the card. Rate Book's tier table is
   a rounded, clipped container with a tinted header, which is most of why its
   data reads as composed rather than dumped. */
.demo-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.demo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.demo-table th {
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 500;
  background: #f7f9fb;
  border-bottom: 1px solid var(--rule);
  padding: 9px 14px;
}
.demo-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: background 0.2s ease;
}
.demo-table tr:last-child td { border-bottom: none; }
.demo-table tr.is-hot td { background: var(--gold-tint); }
.demo-table td:last-child,
.demo-table th:last-child { text-align: right; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.stat {
  background: #f7f9fb;
  border-radius: 8px;
  padding: 10px 12px;
}
.stat-label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.stat-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.stat-value.above { color: var(--gold-ink); }

.demo-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

.finding-card {
  background: #1c2430;
  color: #e8eef5;
  border-radius: 12px;
  padding: 18px 18px 14px;
  margin-top: 18px;
}
.finding-card .ch-mark { color: var(--gold-soft); }
.finding-card p { color: #c9d3df; }
.finding-card .caveat {
  color: #93a0b0;
  border-left-color: #3a4556;
  margin-bottom: 0;
}

/* Was four bordered cards stacked with a gap, which read as a list rather than
   a sequence. A chapter whose entire argument is "these things happen in this
   order, years apart" should look like it: one continuous rail, a node per step,
   and the last node filled because arriving at PAY is the point. */
.timeline {
  margin-top: 16px;
  padding-left: 3px;
}
.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: start;
  padding: 0 0 24px 26px;
  border-left: 2px solid var(--rule);
}
.tl-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.tl-step::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold);
}
.tl-step:last-child::before {
  background: var(--gold);
}
.tl-mark {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
  padding-top: 2px;
}
.tl-body { color: var(--ink-soft); font-size: 0.95rem; }

.sources ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ink-soft);
}
/* The script paths in here are long unbreakable mono tokens. Without this the
   longest one pushed the document 3px wider than a 375px viewport, which reads
   as the whole page being able to slide sideways. */
.sources li { margin-bottom: 8px; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  body { padding: 16px 14px 60px; }
  .masthead { margin-top: 36px; }
  .spine { position: static; }
  .spine-inner { gap: 8px; }
  .flow-step { min-width: 84px; }
  .flow-value { font-size: 0.92rem; }
  .control-card { padding: 14px 14px 12px; }
  /* Keep the rail and its padding; only the label/body split collapses. */
  .tl-step { grid-template-columns: 1fr; gap: 4px; }
}

/* The spec asks for mobile-first controls. The weighting toggle rendered 31px
   tall, under the 44px touch-target guideline. The dial is a native range and
   gets platform touch handling, so it is left alone. */
@media (pointer: coarse) {
  .weight-btn { min-height: 44px; padding: 8px 18px; }
}

/* Every other page on the site defines its own focus ring (root style.css uses
   --accent-2); this stylesheet had none, so keyboard users got only the browser
   default. Navy rather than root's blue, to stay inside this page's palette.
   All focusable elements here sit on light surfaces, so navy has the contrast. */
/* The page previously just stopped after Sources, which reads as unfinished.
   Same footer as the sibling pages. */
.foot {
  max-width: 720px;
  margin: 44px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

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

@media (prefers-reduced-motion: reduce) {
  .star-flourish path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .flow-value.flash { animation: none; }
  .gate-chip { transition: none; }
  .demo-table td { transition: none; }
}