/* Blocks from scripts/components.mjs. Colors come from the active skin's variables. */

/* Release line: stage, demo dates, countdown and the "which game this is" notice. */
.release-badges{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.stage-badge,.intent-badge{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:14px;line-height:1.5}
.stage-badge>span{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid currentColor;border-radius:999px}
.stage-badge>span[hidden]{display:none}
.stage-badge .countdown{border-style:dashed}
.intent-badge{font-size:13px;opacity:.9;letter-spacing:.01em}
.hero .stage-badge>span,.expedition-hero .stage-badge>span{color:var(--hero-ink);border-color:var(--button)}
.hero .intent-badge,.expedition-hero .intent-badge{color:var(--hero-muted)}

/* Steam widgets: fixed heights so the page does not jump while they load. */
.steam-widgets{display:grid;gap:18px;margin-block:8px 32px}
.steam-widget{margin:0;min-width:0}
.steam-widget iframe{display:block;width:100%;border:0;background:transparent}
.steam-chart[hidden]{display:none}
.steam-store iframe{max-width:646px;height:190px}
.steam-chart iframe{height:389px;overflow:hidden}
.steam-chart figcaption{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.6}

/* Checklist tables: the tick column stays narrow; ticked rows dim but stay readable. */
.checklist{margin:18px 0 8px}
.checklist-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.checklist-bar[hidden]{display:none}
.checklist-count{margin:0;font-size:13px;color:var(--muted)}
.checklist-reset{min-height:44px;padding:8px 14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font-size:13px;cursor:pointer}
.checklist .check-col{width:72px}
.checklist .check-cell{text-align:center}
.checklist input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.checklist tr.is-done th,.checklist tr.is-done td:not(.check-cell){opacity:.6}
.checklist tr.is-done th{text-decoration:line-through;text-decoration-thickness:1px}
@media(max-width:600px){[data-layout=immersive] .checklist .check-cell{display:flex;align-items:center;gap:12px;text-align:left}[data-layout=immersive] .checklist .check-cell:before{margin:0}}

/* Ad slots reserve their space up front (AdsterraSlot); under the answer they sit in the reading column. */
.ad-slot{contain:layout}
.answer-ads{margin:0 0 24px;display:grid;gap:16px}