/* pages.css — /about/ and /docs/* composition.
   Loads AFTER blog.css. Tokens live in blog.css and are inherited; never
   redeclare them here. No new custom properties, colours, radii or sizes:
   everything below is composition on top of the frozen token set.

   Layout model
   ------------
   One five-track grid does all the work. Prose sits in the centre track
   (a fixed 520px reading measure ≈ 68 characters at 16px Plus Jakarta Sans);
   figures — spec rows, tables, code — break out into the two flanking
   tracks (856px total) so they are visibly wider than the measure without
   ever widening a run of body text past ~70 characters. */

/* ===== SHELL ===== */

.page {
  padding: 0 0 112px;
}

.page-grid {
  display: grid;
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, 160px)
    minmax(0, 680px)
    minmax(0, 160px)
    minmax(24px, 1fr);
}

.page-grid > * {
  grid-column: 3;
}

/* ===== HERO ===== */

.page-hero {
  padding: 120px 0 0;
}

.page-hero-inner {
  grid-column: 2 / 5;
  text-align: center;
}

.page-back {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-text);
  text-decoration: none;
  margin-bottom: 48px;
  transition: color 0.16s var(--ease);
}

.page-back:hover { color: var(--lavender); }

.page-hero h1 {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.02;
  color: var(--light-text);
  text-wrap: balance;
}

.page-lede {
  max-width: 520px;
  margin: 32px auto 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--secondary-text);
  text-wrap: pretty;
}

/* ===== PROSE ===== */

.prose {
  counter-reset: pagesection;
  padding-top: 40px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.75;
  color: var(--light-text);
}

.prose > * + * { margin-top: 24px; }

/* Section heading: a 12px label sits directly above a 44px heading, so the
   heading is 3.6x its nearest supporting text. Body copy is held 32px away. */
.prose h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.08;
  color: var(--light-text);
  text-wrap: balance;
  margin-top: 112px;
  margin-bottom: 32px;
}

.prose h2::before {
  counter-increment: pagesection;
  content: counter(pagesection, decimal-leading-zero);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--lavender);
  margin-bottom: 20px;
}

/* h3 is a label, not a heading — deliberately smaller than body so it never
   reads as a section head competing with the 44px h2 above it. */
.prose h3 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-text);
  margin-top: 56px;
  margin-bottom: 20px;
}

.prose p {
  color: var(--light-text);
  text-wrap: pretty;
}

.prose strong { color: var(--light-text); font-weight: 600; }
.prose em { color: var(--light-text); }

.prose a {
  color: var(--light-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lavender);
  text-underline-offset: 4px;
  transition: color 0.16s var(--ease), text-decoration-color 0.16s var(--ease);
}

.prose a:hover {
  color: var(--lavender);
  text-decoration-color: var(--border-hover);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 72px 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* ===== SPEC ROWS =====
   Everything readable sits on the one 680px measure. These rows previously
   broke out to a wider band while the paragraphs around them did not, which
   put two left edges in a single section; and a large padding-right squeezed
   their text to roughly half the measure. Both are gone. */

.prose > ul,
.prose > ol {
  /* Prose, not a figure — stays in the measure. Breaking lists out to the
     wide band left them with different left/right margins from the
     paragraphs around them, which read as a layout fault. */
  grid-column: 3;
  list-style: none;
  padding: 0;
  margin-top: 40px;
  color: var(--secondary-text);
}

.prose > ul > li,
.prose > ol > li {
  border-top: 1px solid var(--border);
  padding: 26px 336px 28px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--secondary-text);
}

.prose > ul > li:last-child,
.prose > ol > li:last-child {
  border-bottom: 1px solid var(--border);
}

.prose > ul > li > strong:first-child,
.prose > ol > li > strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--light-text);
  margin-bottom: 10px;
}

/* ===== FIGURE 2 — TABLES ===== */

.prose > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  grid-column: 3;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 40px;
}

.prose > table th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-text);
  text-align: left;
  padding: 0 28px 14px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
}

/* The endpoint table is headerless in markdown; collapse the empty row. */
.prose > table th:empty {
  padding: 0;
  border-bottom: none;
}

.prose > table td {
  border-top: 1px solid var(--border);
  padding: 20px 28px 20px 0;
  color: var(--secondary-text);
  line-height: 1.65;
  vertical-align: top;
}

.prose > table td:first-child { color: var(--light-text); }
.prose > table th:first-child,
.prose > table td:first-child { width: 16%; }
.prose > table th:nth-child(2),
.prose > table td:nth-child(2) { width: 30%; }
.prose > table tr:last-child td { border-bottom: 1px solid var(--border); }

/* ===== FIGURE 3 — CODE =====
   Chroma runs with noClasses=true, so every token carries a SATURATED inline
   style attribute. Inline declarations outrank normal stylesheet rules, but an
   author !important declaration outranks an inline one — so the catch-all below
   neutralises every span regardless of which hue Chroma picked, present or
   future. The attribute selectors then demote the three semantic classes we do
   want to differentiate (dracula comment / string / keyword hues) to the
   neutral secondary, which keeps code two-tone and off the colour budget. */

.prose > .highlight,
.prose > pre {
  grid-column: 3;
  margin-top: 40px;
  border-radius: var(--r-md);
  box-shadow: var(--edge);
  overflow: hidden;
}

.prose .highlight pre,
.prose > pre {
  margin: 0;
  padding: 26px 28px;
  background: var(--surface) !important;
  color: var(--light-text) !important;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  border-radius: var(--r-md);
  /* Install commands are meant to be copied, so wrap rather than clip: a
     hidden right-hand half of a shell command is a support ticket. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prose pre code {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.prose pre span,
.prose pre code span {
  color: inherit !important;
  background-color: transparent !important;
}

.prose pre span[style*="#6272a4"],
.prose pre span[style*="#f1fa8c"],
.prose pre span[style*="#ff79c6"],
.prose pre span[style*="#8be9fd"],
.prose pre span[style*="#bd93f9"],
.prose pre span[style*="#50fa7b"],
.prose pre span[style*="#ffb86c"],
.prose pre span[style*="#ff5555"] {
  color: var(--secondary-text) !important;
}

.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--light-text);
  background: var(--surface);
  box-shadow: var(--edge);
  border-radius: var(--r-sm);
  padding: 2px 5px;
  /* Identifiers like R-XXX must not break across lines at the hyphen. */
  white-space: nowrap;
}

/* ===== ABOUT — contents rail =====
   The first paragraph of the about content is the "Jump to" line. Set as a
   quiet rail so it supports the hero rather than competing with it. */

.page-about .prose > p:first-child {
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary-text);
  text-align: center;
}

.page-about .prose > p:first-child strong {
  color: var(--secondary-text);
  font-weight: 500;
}

.page-about .team-photo { margin: 0 0 24px; }

/* ===== DOCS INDEX — the opening line stands in for a lede ===== */

.page-docs .prose > p:first-child {
  color: var(--secondary-text);
  text-align: center;
}

/* ===== CLOSING CTA =====
   The shared cta-footer partial ships a two-hue gradient panel; on these pages
   it is flattened to a plain surface with the standard hairline (no gradient,
   no shadow) so the colour budget stays near zero. */

.page .post-footer {
  grid-column: 2 / 5;
  margin-top: 128px;
  padding-top: 0;
  border-top: none;
}

.page .post-cta {
  background: var(--surface);
  border: none;
  box-shadow: var(--edge);
  border-radius: var(--r-md);
  padding: 56px 40px;
  text-align: center;
}

.page .post-cta h3 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.08;
  color: var(--light-text);
  text-wrap: balance;
  margin: 0 auto 20px;
  max-width: 620px;
}

.page .post-cta p {
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary-text);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  .page-hero { padding-top: 88px; }
  .page-hero h1 { font-size: 44px; }
  .page-lede { font-size: 17px; }
  .prose h2 { font-size: 34px; margin-top: 80px; }
  .prose > ul > li,
  .prose > ol > li { padding-right: 0; }
  .prose > table { font-size: 14px; }
  .prose > table th,
  .prose > table td { padding-right: 16px; }
  .page .post-cta { padding: 40px 24px; }
  .page .post-cta h3 { font-size: 34px; }
}