/* Launch countdown (/tools/launch-countdown), scripts/lib/templates/tools/launch-countdown.mjs.
   The clock is the answer: it sits beside the realm table at 60rem and up, above it 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; }

.lc-stage { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 60rem) {
  .lc-stage { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "clock unlocks" "facts unlocks"; grid-template-rows: auto 1fr; }
  .lc-stage > #countdown { grid-area: clock; }
  .lc-stage > #unlocks { grid-area: unlocks; }
  .lc-stage > #launch-facts { grid-area: facts; }
}

/* The clock. */
.lc-clock { padding: var(--s-2) 0 var(--s-2); 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: 34rem; margin: 0; }
.no-sec .lc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 26rem; }
.no-sec .lc-cell[data-cell="seconds"] { display: none; }
.lc-cell { display: grid; justify-items: center; gap: .35rem; padding: var(--s-3) var(--s-1) var(--s-2); border: 1px solid var(--edge); box-shadow: var(--panel-frame); background: var(--bg); }
.lc-cell b { color: var(--ink); font: 400 clamp(2.6rem, 10vw, 4.4rem)/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.lc-cell small { color: var(--ink-3); font: 400 .72rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.lc-when { max-width: 34rem; 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); }
.lc-clock .wfg-local { margin: 0; font-size: .9rem; }
/* 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-action { margin-top: var(--s-1); }
.lc-live-title { color: var(--ink); font: 400 clamp(2.6rem, 8vw, 3.8rem)/1 var(--font-display); }

/* The embed builder. */
.lc-embed { margin-top: var(--s-section); }
.lc-embed-head h2 { font: 400 clamp(1.6rem, 3.2vw, 2rem)/1.1 var(--font-display); }
.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: 400 1.35rem/1.1 var(--font-display); letter-spacing: .02em; }
.lc-field { display: grid; gap: .4rem; min-width: 0; }
.lc-field-head { display: flex; 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) { .lc-zone-tables { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lc-zones { width: 100%; border-collapse: collapse; font: 400 .9rem/1.35 var(--font-ui); }
.lc-zones caption { padding-bottom: .4rem; color: var(--accent-text); font: 400 1.1rem/1.1 var(--font-display); letter-spacing: .02em; 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 th, .lc-zones td { padding: .45rem .35rem; text-align: left; vertical-align: baseline; }
.lc-zones thead th { padding-top: 0; border-bottom: 1px solid var(--edge-inner); color: var(--ink-3); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lc-zones tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); }
.lc-zones tbody th { color: var(--ink); font-weight: 400; }
.lc-zones td { color: var(--ink-2); }
.lc-zones td:last-child { color: var(--ink); white-space: nowrap; }
.lc-zones small { color: var(--ink-3); font-size: .78rem; }
@media (max-width: 30rem) { .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; }
}