/* 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) { @container page (width >= 59rem) {
  .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); }

/* The save row under the red button: calendar links, then Discord and full screen (script only). */
.lc-save { display: grid; gap: var(--s-2); justify-items: center; }
.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; } }

/* 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-action, .lc-clock:fullscreen .lc-save-row:first-child, .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); }

/* 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; 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; }
}