/* The spoilers page (2026-10-21): a hero naming the set, set links when several are being
   revealed, one row of filters, then the cards grouped by the day they were revealed. Colours
   come from theme.css tokens only, so both themes are covered. */

.spoilers-page { max-width:1440px; margin:0 auto; padding:0 28px 60px; }
.spoilers-hero { padding:34px 0 18px; }
.spoilers-hero h1 { margin:0 0 8px; font:500 clamp(32px,4vw,48px)/1.05 Georgia,serif; letter-spacing:-.02em; }
.spoilers-summary { margin:0; color:var(--muted); font-size:var(--text-base); }
.spoilers-sets { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.spoilers-sets a { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:var(--text-s); font-weight:600; text-decoration:none; }
.spoilers-sets a img { width:18px; height:18px; }
.spoilers-sets a.active { border-color:var(--green2); background:var(--accent-soft); }
.spoilers-tools { position:sticky; top:76px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 -28px; padding:12px 28px; border-bottom:1px solid var(--line); background:var(--paper); }
.spoilers-tools > input { flex:1 1 240px; max-width:360px; height:42px; }
.spoilers-colors { display:flex; gap:4px; }
.spoilers-colors button { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--surface-raised); color:var(--ink); font:700 var(--text-xs) system-ui; cursor:pointer; }
.spoilers-colors button.active { border-color:var(--green2); background:var(--accent-soft); color:var(--green2); }
.spoilers-colors button { display:grid; place-items:center; padding:5px; }
.spoilers-colors button>img,.spoilers-colors button>svg { display:block; width:22px; height:22px; }
.spoilers-colors button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.spoilers-select { display:flex; align-items:center; gap:6px; margin:0; font-size:var(--text-2xs); }
.spoilers-select select { width:auto; padding:8px 10px; margin:0; }
.spoilers-check { display:flex; align-items:center; gap:6px; margin:0; font-size:var(--text-xs); letter-spacing:0; text-transform:none; }
.spoilers-check input { width:auto; margin:0; accent-color:var(--accent); }
.spoilers-count { margin:14px 0 0; color:var(--muted); font-size:var(--text-xs); }
.spoilers-note { margin:8px 0 0; font-size:var(--text-s); color:var(--muted); }
.spoiler-day { margin-top:26px; }
.spoiler-day h2 { margin:0 0 12px; font:var(--text-xl) Georgia,serif; }
.spoiler-day h2 span { color:var(--muted); font:600 var(--text-xs) system-ui; }
.spoiler-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.spoiler-card { display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; }
.spoiler-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.spoiler-card.is-new { border-color:var(--copper); }
.spoiler-art { position:relative; }
.spoiler-art img { display:block; width:100%; height:auto; aspect-ratio:488/680; border-radius:4.75%/3.5%; }
.spoiler-placeholder { display:grid; place-items:center; aspect-ratio:488/680; border-radius:4.75%/3.5%; background:var(--surface-muted); color:var(--muted); font-size:var(--text-xs); text-align:center; padding:12px; }
.spoiler-new { position:absolute; top:8px; left:8px; padding:2px 8px; border-radius:999px; background:var(--copper); color:var(--on-inverse); font:700 var(--text-2xs)/1.4 system-ui; letter-spacing:.04em; }
.spoiler-copy { display:grid; gap:3px; min-width:0; }
.spoiler-copy strong { font-size:var(--text-s); overflow-wrap:anywhere; }
.spoiler-copy small { color:var(--muted); font-size:var(--text-2xs); }
.spoiler-credit a { color:var(--green2); }
.spoiler-fits summary { cursor:pointer; color:var(--green2); font-size:var(--text-2xs); font-weight:700; }
.spoiler-fits ul { margin:6px 0 0; padding-left:16px; display:grid; gap:4px; font-size:var(--text-2xs); }
.spoiler-fits li span { display:block; color:var(--muted); }
.spoiler-consider { margin:4px 0 0; }
.spoiler-consider select { width:100%; padding:6px 8px; margin:0; font-size:var(--text-2xs); }
.spoiler-visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width: 800px) {
  .spoilers-page { padding:0 12px 40px; }
  .spoilers-tools { position:static; margin:0 -12px; padding:10px 12px; }
  .spoilers-tools > input { flex-basis:100%; max-width:none; }
  .spoiler-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}