/* Launch tracker layout: /beta and /roadmap (scripts/lib/templates/launch-tracker.mjs,
   ops/design/templates/launch-tracker/contract.md). The components draw themselves; this
   file places them. The answer (status panel and access, or status and road) comes first
   and fits the first screen at 390 by 844 and 1440 by 900. Brand v2.1 tokens only. */

.lt { padding-bottom: var(--s-section); }
.lt .wfg-page-head { padding-bottom: var(--s-3); }

/* ---------- The answer: status and access, or status, road and image ---------- */

.lt-top { display: grid; gap: var(--s-3); align-items: start; }
.lt-top .wfg-panel-title { font-size: 1.15rem; }
.lt-top .wfg-realm tbody th a { min-height: 1.75rem; }
.lt-top .wfg-realm tbody th { width: 34%; }
.lt-top .wfg-asof { margin-top: .4rem; }
.lt-top .wfg-local { margin-top: .5rem; }
.lt-top .wfg-facts.is-compact .wfg-fact { padding-block: 4px; }
.lt-top .wfg-fact-value { font-size: .95rem; line-height: 1.4; }

.lt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.lt-actions .wfg-btn { flex: 1 1 auto; }
.lt-link { display: inline-flex; align-items: center; min-height: 1.75rem; font: 400 .95rem/1.3 var(--font-ui); color: var(--accent-text); }

@media (min-width: 64rem) { @container page (width >= 63rem) {
  .lt-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4); }
  .lt-top--roadmap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lt-actions .wfg-btn { flex: 0 1 auto; }
  /* 2026-10-02: on /beta the partner CTA (components/partner-cta.css) sits under the access
     answer in the left column, the status panel beside both. Below 64rem it follows the
     status panel, so the answer and the status still share the first screen on a phone. */
  .lt-top.has-cta { grid-template-rows: auto 1fr; }
  .lt-top.has-cta > #beta-status { grid-column: 2; grid-row: 1 / span 2; }
  .lt-top.has-cta > .wfg-cta { grid-column: 1; grid-row: 2; }
} }

/* The access answer: label and tier share a fact's first line and the answer takes the
   panel's full width under it, so three routes stay short at every width. */
.lt-top .wfg-facts.is-compact .wfg-fact { gap: 0 8px; }
/* Phones: the column heads are read out but not drawn, and the milestone names take less
   width, so the Beta row and its two end dates stay in the first screen. */
@media (max-width: 40rem) {
  .lt-top .wfg-realm td:nth-child(2) { white-space: normal; }
  .lt-top .wfg-realm tbody th { width: 26%; }
  .lt-top .wfg-realm thead th { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* The same under 39rem of page (styles.css, main): 768 at 200% text. */
@container page (width < 39rem) {
  .lt-top .wfg-realm td:nth-child(2) { white-space: normal; }
  .lt-top .wfg-realm tbody th { width: 26%; }
  .lt-top .wfg-realm thead th { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@container page (width < 20rem) {
  .lt-top .wfg-realm tbody th { width: auto; }
}

/* ---------- The road, the roadmap image and its card text ---------- */

.lt-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.lt-col > .lt-section.prose { max-width: none; }

.lt-road { min-width: 0; }
.lt-road > h2 { margin-bottom: var(--s-4); }
.lt-road .wfg-stops.is-vertical .wfg-stop { padding-bottom: 1.1rem; }
.lt-road .wfg-stop p { font-size: .9rem; line-height: 1.45; }

.lt-figure { min-width: 0; margin: 0; }
.lt-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); }
.lt-figure-link { display: block; }
.lt-figure figcaption { margin-top: var(--s-2); font: 400 .82rem/1.45 var(--font-ui); color: var(--ink-3); }

/* ---------- The reference below ---------- */

.lt-layout { display: grid; gap: var(--s-6); margin-top: var(--s-section); }
.lt-main { min-width: 0; }
.lt-main > * + * { margin-top: var(--s-section); }
.lt-main > .affiliate-break { margin-block: var(--s-6); }
.lt-section.prose { max-width: 52rem; }
.lt-section.prose > h2:first-child, .lt-records > h2:first-child { margin-top: 0; }
.lt-section.prose > p, .lt-section.prose > ul, .lt-section.prose > ol { max-width: var(--measure); }
/* Fact rows inside a prose section keep their own rhythm, not the list indent. */
.lt-section .wfg-facts { max-width: 52rem; padding-left: 0; }
.lt-section .wfg-facts .wfg-fact { margin-top: 0; }
.lt-section .wfg-fact-value { font-size: .95rem; line-height: 1.45; }
.lt-section .wfg-facts.is-compact .wfg-fact { gap: 0 8px; }
.lt-section .wfg-record { margin-top: var(--s-4); }
.lt-section .wfg-record summary > * { margin-top: 0; }
.lt-section .wfg-record + .wfg-record { margin-top: var(--s-2); }
.lt-records > h2, .lt-main .wfg-faq > h2 { margin-bottom: var(--s-4); }
.lt-records > p { max-width: var(--measure); margin-bottom: var(--s-3); color: var(--ink-2); }
.lt-main .wfg-faq, .lt-records { max-width: 52rem; }
.lt-checked { font: 400 .82rem/1.4 var(--font-ui); color: var(--ink-3); }
.lt-legend { max-width: var(--measure); font: 400 .85rem/1.5 var(--font-ui); color: var(--ink-3); }
.lt-legend a { color: var(--accent-text); }
.lt-main > .source-block, .lt-main > .related-block { margin-top: var(--s-6); }

/* Tables keep a readable width on phones and scroll inside their wrapper instead of
   squeezing each cell to a word per line. */
@media (max-width: 40rem) {
  .lt .table-scroll table { min-width: 36rem; }
}

.lt-toc { display: none; }
.lt-toc-mobile { margin-top: var(--s-4); border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); padding: 0 14px; font-family: var(--font-ui); }
.lt-toc-mobile summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lt-toc-mobile ol { display: grid; gap: 2px; margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.lt-toc-mobile a { display: flex; align-items: center; min-height: 2rem; color: var(--ink-2); text-decoration: none; }
@media (min-width: 64rem) {
  .lt-layout { grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--s-7); }
  .lt-toc-mobile { display: none; }
  .lt-toc { display: block; position: sticky; top: var(--sticky-top); align-self: start; font-family: var(--font-ui); font-size: .88rem; }
  .lt-toc-title { margin: 0 0 var(--s-2); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .lt-toc ol { display: grid; gap: 2px; margin: 0; padding: 0 0 0 var(--s-3); border-left: 1px solid var(--edge-inner); list-style: none; }
  .lt-toc a { display: flex; align-items: center; min-height: 1.75rem; color: var(--ink-2); text-decoration: none; }
  .lt-toc a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
}