/* Launch countdown (/tools/launch-countdown): the page is
   scripts/lib/templates/tools/launch-countdown-v2.mjs, the clock's source launch-countdown.mjs.
   The first screen pairs the clock (the answer) with the RestedXP launch kit, side by side from
   60rem and stacked on phones. Digits change in place with no motion; the seconds cell hides
   under reduced motion (components/countdown.js adds .no-sec to <html>). */
.lc-page { padding-bottom: var(--s-6); }
.lc-head .wfg-page-head { padding-bottom: var(--s-2); }
.lc-head .wfg-page-meta .wfg-evidence { margin-left: .3rem; }

/* ---------- First screen: clock + launch kit ---------- */
.lc-stage { display: grid; gap: var(--s-3); align-items: stretch; }
@media (min-width: 60rem) { @container page (width >= 59rem) {
  .lc-stage { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
} }
.lc-stage > #countdown { display: flex; flex-direction: column; }

/* The clock. */
.lc-clock { flex: 1; display: grid; align-content: center; padding: var(--s-2) 0 var(--s-1); text-align: center; }
.lc-ahead, .lc-live { display: grid; gap: var(--s-3); justify-items: center; }
.lc-ahead[hidden], .lc-live[hidden], .lc-grid[hidden] { display: none; }
.lc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); width: 100%; max-width: 40rem; margin: 0; }
.no-sec .lc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; }
.no-sec .lc-cell[data-cell="seconds"] { display: none; }
.lc-cell { display: grid; justify-items: center; gap: .45rem; padding: var(--s-3) var(--s-1) var(--s-2); border: 1px solid var(--edge); border-top: 2px solid color-mix(in srgb, var(--accent) var(--mix-line), var(--edge)); box-shadow: var(--panel-frame); background: var(--bg); }
.lc-cell b { color: var(--accent-text); font: 400 clamp(2.7rem, 11vw, 5.4rem)/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.lc-cell small { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--ink-3); font: 400 .72rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.lc-when { max-width: 40rem; color: var(--ink-2); font: 400 .95rem/1.45 var(--font-body); }
.lc-when .wfg-ev { vertical-align: middle; }
.lc-date { color: var(--ink); font-weight: 600; }
.lc-utc { color: var(--ink-3); white-space: nowrap; }
.lc-nowrap { white-space: nowrap; }
[data-state="date"] .lc-date { display: block; margin-bottom: .2rem; font: 400 clamp(1.7rem, 5vw, 2.3rem)/1.1 var(--font-display); }
/* Your time: the reader's own clock, the line most visitors came for. */
.lc-clock .wfg-local { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem .5rem; margin: 0; padding: .45rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) var(--mix-line), var(--edge)); background: color-mix(in srgb, var(--accent) var(--mix-faint), var(--bg)); color: var(--ink-2); font: 400 .9rem/1.3 var(--font-ui); letter-spacing: .02em; }
.lc-clock .wfg-local b { color: var(--ink); font: 400 1.15rem/1.3 var(--font-ui); }
/* Without JavaScript the local line would print UTC under "Your time"; the date line already gives UTC. */
[data-state="date"] .wfg-local { display: none; }
.lc-next { margin: 0; }

/* The save row: calendar links, then Discord and full screen (script only), then the embed jump. */
.lc-save { display: grid; gap: var(--s-2); justify-items: center; width: 100%; margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.lc-save-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin: 0; }
.lc-save-row[hidden] { display: none; }
.lc-save-label { margin-right: .2rem; color: var(--ink-3); font: 400 .78rem/1.25 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.lc-mini { min-height: 2.25rem; padding: .3rem .8rem; font-size: .9rem; }
.lc-mini[hidden] { display: none; }
@media (pointer: coarse) { .lc-mini { min-height: 44px; } }
@media (max-width: 30rem) { .lc-save-label { flex-basis: 100%; margin: 0; text-align: center; } }
.lc-embed-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 28px; color: var(--ink-3); font: 400 .88rem/1.3 var(--font-ui); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: .2em; }
.lc-embed-link:hover { color: var(--accent-text); }
.lc-embed-link svg, .lc-kit-more svg { width: .85em; height: .85em; flex: none; }

/* Full screen (launch-night watch parties and second monitors): the digits fill the screen. */
.lc-full-title { display: none; }
.lc-clock:fullscreen { display: grid; place-content: center; padding: 4vmin; background: var(--bg); overflow: auto; }
.lc-clock:fullscreen::backdrop { background: var(--bg); }
.lc-clock:fullscreen .lc-full-title { display: block; color: var(--accent-text); font: 400 clamp(1.6rem, 5vmin, 3.4rem)/1.1 var(--font-display); }
.lc-clock:fullscreen .lc-grid { max-width: min(92vw, 150vmin); gap: 2vmin; }
.lc-clock:fullscreen .lc-cell { padding: 3vmin 1vmin 2vmin; }
.lc-clock:fullscreen .lc-cell b { font-size: min(15vw, 26vmin); }
.lc-clock:fullscreen .lc-cell small { font-size: clamp(.8rem, 2.2vmin, 1.4rem); }
.lc-clock:fullscreen .lc-when, .lc-clock:fullscreen .wfg-local { max-width: none; font-size: clamp(1rem, 2.6vmin, 1.6rem); }
.lc-clock:fullscreen .lc-save { border: 0; }
.lc-clock:fullscreen .lc-kit-jump { display: none; }
.lc-clock:fullscreen .lc-direct-actions { display: none; }
.lc-clock:fullscreen .lc-save-row:first-child, .lc-clock:fullscreen .lc-embed-row, .lc-clock:fullscreen [data-cd-copy] { display: none; }
.lc-live-title { color: var(--ink); font: 400 clamp(2.6rem, 8vw, 3.8rem)/1 var(--font-display); }
/* Phones: keep the guide button inside the first screen (390x844 and 375x812). Spacing and
   type only: every word stays in the page. The Ask tagline repeats the example-question chips
   right below it, so phones show the chips and the "?" help button without it. */
@media (max-width: 30rem) {
  .lc-live-title { font-size: 1.375rem; line-height: 1.1; }
  .lc-v2 #ask { margin-block: 8px; }
  .lc-v2 #st-ask-title { font-size: 1.125rem; line-height: 1.2; }
  .lc-v2 [data-st-ask-quip] { display: none; }
  .lc-v2 #countdown > .wfg-panel-title { margin-bottom: 6px; }
  .lc-v2 #countdown > p { font-size: 0.875rem; line-height: 1.35; }
  .lc-v2 .lc-clock:not(:fullscreen) { padding-top: 2px; }
  .lc-v2 .lc-direct-actions { margin-top: 6px; }
}

/* The launch kit: the RestedXP offer beside the clock. The card reads like an in-game item
   tooltip (name in the epic color, claims under it, the Use: line in the game's green); the
   loot button is the page's one filled button. */
.lc-kit { display: grid; align-content: start; gap: var(--s-3); min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); }
.lc-kit-kicker { margin: 0; color: var(--accent-text); font: 400 .78rem/1.25 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.lc-kit-kicker [hidden], .lc-kit-title [hidden] { display: none; }
.lc-kit-title { margin: -.5rem 0 0; color: var(--ink); font: var(--heading-weight) clamp(1.3rem, 2.4vw, 1.6rem)/1.2 var(--font-heading); letter-spacing: 0; }
.lc-kit-card { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--s-3); align-items: start; padding: var(--s-3); border: 1px solid var(--line-strong); background: var(--tip-ground); }
.lc-kit-name { margin: 0; color: var(--q4); font: 400 1.12rem/1.25 var(--font-ui); }
.lc-kit-type { margin: .1rem 0 .6rem; color: var(--ink-3); font: 400 .82rem/1.3 var(--font-ui); }
.lc-kit-claims { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.lc-kit-claims li { display: flex; align-items: flex-start; gap: .4rem; color: var(--ink); font: 400 .9rem/1.35 var(--font-body); }
.lc-kit-claims li > span:first-child { flex: 1; min-width: 0; }
.lc-kit-claims li.lc-kit-use { color: var(--q2); }
.lc-kit-claims .wfg-ev { flex: none; }
.lc-kit-shot { margin: 0; }
.lc-kit-shot img { display: block; width: 100%; height: auto; }
.lc-kit-shot figcaption { margin-top: .35rem; color: var(--ink-3); font: 400 .72rem/1.35 var(--font-body); }
.lc-kit-shot figcaption a { color: var(--ink-2); }
.lc-kit-action { margin: 0; }
.lc-kit-btn { width: 100%; min-height: 3rem; font-size: 1.12rem; }
.lc-kit-note { margin: -.4rem 0 0; color: var(--ink-3); font: 400 .82rem/1.4 var(--font-body); text-align: center; }
.lc-kit-more { margin: -.2rem 0 0; text-align: center; font: 400 .88rem/1.3 var(--font-ui); }
.lc-kit-more a { display: inline-flex; align-items: center; gap: .3rem; min-height: 28px; color: var(--ink-2); }
.lc-kit-more a:hover { color: var(--accent-text); }
@media (max-width: 26rem) { .lc-kit-card { grid-template-columns: minmax(0, 1fr) 5rem; } }

/* ---------- The board: what unlocks when, launch facts, the checklist ---------- */
.lc-board { display: grid; gap: var(--s-4); align-items: start; margin-top: var(--s-4); }
@media (min-width: 60rem) { @container page (width >= 59rem) {
  .lc-board { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "unlocks facts" "plan plan"; align-items: stretch; }
  .lc-board > #unlocks { grid-area: unlocks; }
  .lc-board > #launch-facts { grid-area: facts; }
  .lc-board > #launch-plan { grid-area: plan; }
  /* Wide screens: the checklist reads left to right as one row of steps. */
  .lc-plan { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .lc-plan-step { align-items: start; padding: .55rem var(--s-3); }
  .lc-plan-step:first-child { padding-left: 0; }
  .lc-plan-step + .lc-plan-step { border-top: 0; border-left: 1px solid var(--hairline); }
} }
.lc-plan { display: grid; margin: 0; padding: 0; list-style: none; }
.lc-plan-step { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .15rem .65rem; align-items: center; padding: .55rem 0; }
.lc-plan-step + .lc-plan-step { border-top: 1px solid var(--hairline); }
.lc-plan-n { grid-row: span 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--accent-text); font: 400 .85rem/1 var(--font-ui); }
.lc-plan-text { color: var(--ink); font: 400 .95rem/1.35 var(--font-body); }
.lc-plan-link { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; color: var(--accent-text); font: 400 .88rem/1.3 var(--font-ui); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: .2em; }
.lc-plan-link:hover { color: var(--ink); }

.lc-slot { margin-top: var(--s-4); }

/* The corner Discord invitation (components/discord-community.js) would cover the clock's date and
   local time on phones and the kit button on laptops. This page's one next step is the kit, so the
   invitation sits this page out; every other page still shows it. */
.discord-community { display: none; }

/* The embed builder. */
.lc-embed { margin-top: var(--s-section); }
.lc-embed-head h2 { font: var(--heading-weight) clamp(1.6rem, 3.2vw, 2rem)/1.2 var(--font-heading); letter-spacing: 0; }
.lc-embed-head p { max-width: 66ch; margin-top: var(--s-2); color: var(--ink-2); }
.lc-options { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-5); margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--edge); box-shadow: var(--panel-frame); background: var(--panel); }
.lc-options[hidden] { display: none; }
.lc-seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.lc-seg legend { margin-bottom: .35rem; padding: 0; color: var(--ink-3); font: 400 .78rem/1.25 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.lc-seg-row { display: flex; flex-wrap: wrap; }
.lc-seg label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line-control); background: var(--bg-3); color: var(--ink-2); font: 400 .95rem/1 var(--font-ui); cursor: pointer; transition: color var(--t), background-color var(--t); }
.lc-seg label + .wfg-radio + label { margin-left: -1px; }
.lc-seg .wfg-radio:checked + label { z-index: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) var(--mix-wash), var(--bg-3)); color: var(--ink); }
.lc-seg .wfg-radio:focus-visible + label { z-index: 2; outline: 2px solid var(--focus); outline-offset: 2px; }
.lc-check { display: flex; align-items: center; gap: .55rem; min-height: 44px; }
.lc-check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); }
.lc-check label { color: var(--ink-2); font: 400 .95rem/1 var(--font-ui); cursor: pointer; }

.lc-embed-grid { display: grid; gap: var(--s-4); }
@media (min-width: 64rem) {
  .lc-embed-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .lc-preview { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
.lc-preview { min-width: 0; margin: 0; }
.lc-preview-frame { padding: var(--s-4) var(--s-3); border: 1px solid var(--edge); box-shadow: var(--panel-frame); background: var(--bg-band); }
.lc-preview iframe { display: block; width: 100%; height: auto; margin-inline: auto; border: 0; background: transparent; }
.lc-preview figcaption { margin-top: var(--s-2); color: var(--ink-3); font: 400 .85rem/1.45 var(--font-body); }
.lc-codes { display: grid; gap: var(--s-4); min-width: 0; }
.lc-block { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-3) var(--s-4) var(--s-4); border: 1px solid var(--edge); box-shadow: var(--panel-frame); background: var(--panel); }
.lc-block h3 { font: var(--heading-weight) 1.35rem/1.25 var(--font-heading); letter-spacing: 0; }
.lc-field { display: grid; gap: .4rem; min-width: 0; }
.lc-field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.lc-field-head label { color: var(--ink-2); font: 400 .9rem/1.25 var(--font-ui); }
.lc-copy { min-height: 2.25rem; padding: .3rem .85rem; font-size: .9rem; }
.lc-copy[hidden] { display: none; }
@media (pointer: coarse) { .lc-copy { min-height: 44px; } }
.lc-code { field-sizing: content; width: 100%; min-width: 0; padding: .55rem .65rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 .8rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
input.lc-code { text-overflow: ellipsis; }
.lc-hint { color: var(--ink-3); font: 400 .85rem/1.45 var(--font-body); }
.lc-hint a { color: var(--ink-2); }
.lc-hint a:hover { color: var(--accent-text); }

/* Time zones and facts. */
.lc-panels { margin-top: var(--s-section); }
.lc-zone-tables { display: grid; gap: var(--s-3) var(--s-6); align-items: start; }
@media (min-width: 52rem) { @container page (width >= 51rem) { .lc-zone-tables { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } }
.lc-zones { width: 100%; }
.lc-zones caption { caption-side: top; padding: 0 0 .4rem; color: var(--accent-text); font: var(--heading-weight) 1.1rem/1.3 var(--font-heading); letter-spacing: 0; text-align: left; }
.lc-zone-note { margin-top: var(--s-3); color: var(--ink-3); font: 400 .82rem/1.45 var(--font-body); }
.lc-zones thead th { white-space: nowrap; }
.lc-zones td:last-child { color: var(--ink); white-space: nowrap; }
.lc-zones tr.lc-mine > * { background: color-mix(in srgb, var(--accent) var(--mix-wash), transparent); }
.lc-you { display: inline-block; margin-left: .3rem; padding: 0 .35rem; border: 1px solid var(--accent); color: var(--accent-text); font: 400 .68rem/1.5 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 30rem) { .lc-zones td:last-child { white-space: normal; } }
/* Under 20rem of page (390 at 200% text; styles.css, main) the three columns cannot fit:
   each city takes a line, its zone and launch time under it. */
@container page (width < 20rem) {
  .lc-zones, .lc-zones tbody, .lc-zones caption { display: block; }
  .lc-zones thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lc-zones tbody tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .5rem; padding-block: .35rem; }
  .lc-zones tbody tr + tr { border-top: 1px solid var(--hairline); }
  .lc-zones tbody tr > *, .lc-zones tbody tr + tr > * { display: block; padding: 0; border: 0; }
  .lc-zones tbody th { flex: 1 0 100%; }
  .lc-zones td:last-child { white-space: normal; }
}

.lc-lower { display: grid; gap: var(--s-5); margin-top: var(--s-section); }
.lc-article td code { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .lc-seg label { transition: none; }
}

/* Keep the guide handoff in flow; timer and calendar controls remain unobscured. */
.lc-kit-jump, .lc-kit-factions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#launch-kit { scroll-margin-top: 5rem; }
.lc-kit-jump svg { width: .85em; height: .85em; }

/* One qualified shopping unit below the digits, shared across clock states. */
.lc-direct-actions { display: grid; gap: .65rem; min-width: 0; margin-block: .75rem; overflow-wrap: anywhere; }
.lc-direct-actions .lc-kit-factions { justify-content: center; margin: 0; }
.lc-direct-actions .lc-kit-note { margin: 0; }