/* a11y: additions and overrides, loaded last. Owned by one workstream (see HANDOFF §5.28).
   Sections: focus · the header and skip link · reading · reduced motion · the hidden layer · forced colours. */

/* ---------------------------------------------------------------- focus */
/* one visible ring everywhere, in the accent, never removed without a replacement */
:focus-visible { outline: 2px solid var(--focus, #3d55ff); outline-offset: 3px; }
/* targets that only take focus so the keyboard follows a skip or an in-page link: no ring around a whole section */
main:focus, [tabindex="-1"]:focus { outline: none; }
/* the painted room: a dark ring, and its own buttons don't get to hide it */
.room-egg *:focus-visible { outline: 2px solid #2a2f86 !important; outline-offset: 2px !important; }
/* the palette's field is its only stop; the caret and a brighter rule show it has focus */
.egg-pal input:focus-visible { outline: none; border-bottom-color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue); }

/* ---------------------------------------------------------------- the header and skip link */
/* the header slides away on scroll; it comes back the moment the keyboard reaches it */
.site-header:focus-within { transform: none; }
.skip { z-index: 220; font-weight: 600; text-decoration: none; }
.skip:focus { left: max(8px, env(safe-area-inset-left)); outline-offset: 2px; }
/* a link or button reached by Tab never lands under the fixed header or, on phones, the floating Contents button
   (WCAG 2.4.11): the browser keeps focus scrolling clear of these edges */
html { scroll-padding-top: var(--header-h, 64px); }
@media (max-width: 1099px) { html { scroll-padding-bottom: 72px; } } /* the Contents button sits at the bottom up to 1099px */
/* the footer's ? opens the keys and the hidden things on phones too */
.egg-open { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); font: 600 12px/1 var(--f-sans); letter-spacing: 0; transition: color 0.25s, border-color 0.25s; }
.egg-open:hover { color: var(--fg); border-color: var(--fg-2); }
@media (pointer: coarse) { .egg-open { width: 32px; height: 32px; margin: -7px 0; } }

/* ---------------------------------------------------------------- reading */
/* long words (the email address, URLs) wrap instead of pushing a phone layout sideways */
body { overflow-wrap: break-word; }
/* nothing can make the page wider than the screen: body already clips, but its clip moves up to the viewport
   as "hidden", which still lets a stray bleed (a ::before at -21px) widen the page and scroll it sideways.
   Clipping at the root too keeps the page exactly screen-wide. clip, unlike hidden, leaves sticky alone. */
html { overflow-x: clip; }
/* small labels on the white sheets: keep them at 4.5:1 or better (--muted is 5.29:1 on white) */
.egg-pal li i { color: var(--muted); }
.egg-sheet li b, .egg-sheet li span { color: var(--muted); }

/* ---------------------------------------------------------------- reduced motion */
/* the device setting and the footer's Motion switch both land here (motion-off) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .egg-toast { transition: opacity 0.2s; transform: translate(-50%, 0); }
  .egg-ad { transition: opacity 0.2s; transform: none; }
}
html.motion-off { scroll-behavior: auto; }
html.motion-off .egg-toast { transform: translate(-50%, 0); }
html.motion-off .egg-ad { transform: none; }

/* ---------------------------------------------------------------- the hidden layer */
.egg-toast a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.egg-toast.has-link { pointer-events: auto; }
.egg-sheet h2.mono { font-weight: 500; }
/* the only ad on the site */
.egg-ad { position: fixed; z-index: 150; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px)); padding: 14px 16px 18px; border-radius: 16px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(11, 11, 13, 0.05), 0 26px 60px -24px rgba(11, 11, 13, 0.45); overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity 0.35s, transform 0.45s var(--ease); }
.egg-ad.is-on { opacity: 1; transform: none; }
.egg-ad-top { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-sans); }
.egg-ad-tag { padding: 4px 6px; border-radius: 4px; background: #ffc21f; color: #141006; font-weight: 800; letter-spacing: 0.04em; }
.egg-ad-who { color: var(--ink-2); }
.egg-ad-skip { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 6px; background: var(--surface); color: var(--ink); font: 600 13px/1 var(--f-sans); white-space: nowrap; }
.egg-ad-skip:disabled { cursor: default; color: var(--ink-2); }
.egg-ad-skip:not(:disabled):hover { background: var(--rule); }
.egg-ad-h { margin: 12px 0 10px; font: 700 18px/1.2 var(--f-sans); letter-spacing: -0.02em; }
.egg-ad-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 700 14px/1 var(--f-sans); text-decoration: none; }
.egg-ad-s { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.egg-ad-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rule); }
.egg-ad-bar b { display: block; height: 100%; width: 100%; background: #e0a100; transform-origin: 0 50%; animation: egg-ad-run 5s linear forwards; }
@keyframes egg-ad-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 560px) { .egg-ad { left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); } }
@media print { .egg-ad, .egg-open, .egg-score, .egg-saver, .egg-sheet, .egg-pal, .c3-watch, .c3-back, .c3-toc, .w4-filter, .w4-tip { display: none !important; } }

/* ---------------------------------------------------------------- forced colours (Windows contrast themes) */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; }
  .egg-toast, .egg-sheet-in, .egg-pal-in, .egg-ad, .egg-score { border: 1px solid CanvasText; }
  .egg-pal li[aria-selected="true"] { outline: 2px solid Highlight; }
}
/* on a phone the keyboard list is noise: the sheet opens on the hidden things */
@media (pointer: coarse) and (hover: none) { .egg-sheet dl, .egg-sheet #egg-sheet-h { display: none; } }

/* ---------------------------------------------------------------- without JavaScript */
/* the read dims every step but the one in view; with no script to light them up, all of it stays readable */
html:not(.js) .r3-step { opacity: 1; }
/* the films are built by script: without it, no empty stage or dead Play button, just the read below */
html:not(.js) .f3, html:not(.js) .f3-chapters, html:not(.js) .c3-hint, html:not(.js) [data-f3-watch], html:not(.js) .r3-stagewrap { display: none; }