/* engine.css — layout and accessibility primitives only. Every value that could carry a
   visual opinion comes from a custom property the skin defines. No colours live here. */

*, *::before, *::after { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; }

:where(body) { margin: 0; }

:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }

:where(ul[class], ol[class], ul[data-wsd-el], ol[data-wsd-el],
       nav ul, nav ol, [data-wsd] ul, [data-wsd] ol) { margin: 0; padding: 0; list-style: none; }

:where(img, picture, svg, video) { display: block; max-width: 100%; height: auto; }

:where(input, select, textarea, button) { font: inherit; color: inherit; }

:where(button) { cursor: pointer; }

template { display: none !important; }

[hidden] { display: none !important; }

/* the two lives of a site (2026-10-13, FOREVER-PLAN.md): a section that changes after the wedding
   carries both versions, data-when="before" and data-when="after"; the phase on <html> hides the
   other. Before boot runs, <html data-phase="before"> is in the markup, so the page reads as today. */
:root[data-phase="after"] [data-when="before"],
:root[data-phase="before"] [data-when="after"] { display: none !important; }

/* years later (2026-10-15, Forever round 2): in the after phase, which morning (clock.js → era, set on
   <html> as data-era). [data-era-when="morning|one|five|later"] shows only on that one; "later" is
   either anniversary. With no data-era yet (before boot) it reads as the morning after. */
:root[data-era="one"] [data-era-when="morning"],
:root[data-era="five"] [data-era-when="morning"],
:root:not([data-era="one"]) [data-era-when="one"],
:root:not([data-era="five"]) [data-era-when="five"],
:root:not([data-era="one"]):not([data-era="five"]) [data-era-when="later"] { display: none !important; }

/* print one thing (print.js): the page steps aside for a copy of the chosen element */
.wsd-print-sheet { display: none; }
@media print {
  :root[data-wsd-printing] body > :not(.wsd-print-sheet) { display: none !important; }
  :root[data-wsd-printing] .wsd-print-sheet { display: block; }
}

/* the accessibility floor: visible focus, never removed */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-w, 2px) solid var(--accent, currentColor);
  outline-offset: var(--focus-off, 3px);
}

/* ≥44px touch targets on anything the engine wires up */
:where([data-wsd-react], [data-wsd-filter], [data-wsd-chip], [data-wsd-el="phase-toggle"],
       [data-wsd-el="reset"], [data-wsd-el="nav-toggle"], [data-wsd-lang], [data-wsd-era],
       [data-wsd-print-card], [data-wsd-el="pick"]) {
  min-height: 44px;
  min-width: 44px;
}

.wsd-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* skip link — every page has one, the skin colours it */
.wsd-skip {
  position: absolute;
  left: var(--gap, 1rem); top: -4rem;
  z-index: 100;
  padding: .6em 1em;
  background: var(--bg-raised, #fff);
  color: var(--ink, #000);
  transition: top var(--motion-fast, 150ms) var(--ease, ease);
}
.wsd-skip:focus { top: var(--gap, 1rem); }

/* lightbox geometry; colour and chrome are the skin's */
[data-wsd="lightbox"] {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: var(--gap, 1rem);
  padding: clamp(1rem, 4vw, 3rem);
}
[data-wsd="lightbox"] [data-wsd-el="image"] {
  max-height: 78vh;
  width: auto;
  object-fit: contain;
}

/* modules render nothing until boot has run; keep space rather than jumping */
[data-wsd-el="feed"]:empty,
[data-wsd-el="chapter-list"]:empty,
[data-wsd-el="item-list"]:empty { min-height: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}