/* ==========================================================================
   SHELL  ·  the frame every screen sits in: the safe-area strip, the header slot (the app bar), the screen host, the fade, the dock slot (the Rankings dock, the chat composer), the action slot (the pinned
   primary of Story, Quiz and Join), the tab bar's room, the overlay layer, page transitions, the install steps (SPEC 6 and 12).
   The document scrolls (not an inner box): the phone's own address bar tucks away, scroll restoration is the browser's, and the bars are position: fixed (--hl-nav-pos: absolute previews them inside a frame).
   The shell sets --hl-tab-h (52px while the tab bar shows) and --hl-dock-h (the dock's height, or 72px for the action slot: 12 + 52 + 8) on the page, so that html's scroll-padding-bottom, the fade and the screen's own
   padding all know what is over the foot of the page.
   Every bar, the fade and the safe strip carries a view-transition-name and the same three rules: an unnamed bar is painted over by the arriving screen's snapshot for the whole 320 ms of a transition.
   ========================================================================== */
.hl-skip { position: absolute; left: var(--hl-sp-8); top: -120px; z-index: var(--hl-z-max); display: inline-flex; align-items: center; min-height: var(--hl-tap); padding: 0 var(--hl-sp-16); border-radius: var(--hl-r-pill); background: var(--hl-text); color: var(--hl-bg); font: 600 var(--hl-t-body-s-size) / var(--hl-t-body-s-lh) var(--hl-font-ui); letter-spacing: .005em; }
.hl-skip:focus { top: calc(var(--hl-safe-top) + var(--hl-sp-8)); outline: var(--hl-focus); outline-offset: 3px; }

.hl-shell { position: relative; min-height: 100vh; min-height: 100dvh; }
/* a strip of the sky as tall as the top inset, above the content: index.html asks for black-translucent, so without it a letter would run under the clock */
.hl-shell__safe { position: var(--hl-nav-pos); top: 0; left: 0; right: 0; height: var(--hl-safe-top); z-index: calc(var(--hl-z-tabbar) + 1); background: var(--hl-sky-top); pointer-events: none; }
.hl-shell__header { position: relative; padding-top: var(--hl-safe-top); }
.hl-shell__header:empty { padding-top: var(--hl-safe-top); }
.hl-shell__screens { position: relative; outline: none; padding-bottom: calc(var(--hl-tab-h) + var(--hl-safe-bottom) + var(--hl-dock-h) + var(--hl-sp-24)); }
.hl-shell__tabbar { display: none; }
.hl-shell[data-tabbar="on"] .hl-shell__tabbar { display: block; }
.hl-fade { position: var(--hl-nav-pos); left: 0; right: 0; bottom: calc(var(--hl-tab-h) + var(--hl-safe-bottom) + var(--hl-dock-h)); height: var(--hl-fade-h); z-index: var(--hl-z-fade); background: var(--hl-fade); pointer-events: none; }
.hl-shell__dock, .hl-shell__action { position: var(--hl-nav-pos); left: 0; right: 0; z-index: var(--hl-z-tabbar); background: var(--hl-surface-inset); box-shadow: var(--hl-rule-t); }
.hl-shell__dock { bottom: calc(var(--hl-tab-h) + var(--hl-safe-bottom)); }
.hl-shell__action { bottom: 0; padding: var(--hl-sp-12) max(var(--hl-gutter), var(--hl-safe-left)) calc(var(--hl-safe-bottom) + var(--hl-sp-8)) max(var(--hl-gutter), var(--hl-safe-right)); }
.hl-shell__action > * { max-width: calc(var(--hl-content-max) - 2 * var(--hl-gutter)); margin-inline: auto; }
.hl-shell__dock > * { max-width: none; }
.hl-shell__dock:empty, .hl-shell__action:empty, .hl-fade[hidden] { display: none; }
/* while the phone's keyboard is open (the shell sets .is-keyboard from the visual viewport) the tab bar and the action slot step aside (they would sit on top of the text field), and the dock (the chat composer)
   follows the visual viewport: --hl-kb is how far the keyboard has pushed it up */
.hl-shell.is-keyboard .hl-shell__tabbar, .hl-shell.is-keyboard .hl-shell__action { display: none; }
.hl-shell.is-keyboard .hl-shell__dock { bottom: var(--hl-kb); }
.hl-shell.is-keyboard .hl-fade { bottom: calc(var(--hl-kb) + var(--hl-dock-h)); }
.hl-shell.is-keyboard .hl-shell__screens { padding-bottom: calc(var(--hl-kb) + var(--hl-dock-h) + var(--hl-sp-24)); }

.hl-screen { position: relative; min-height: 60vh; }
.hl-screen:focus { outline: none; }

/* ---- transitions between screens: ONE pair of keyframes with --dx (a push: 28 px and opacity, 320 ms; back: -28 px; a tab change: opacity only, 160 ms; leaving takes 60% of the time). With the View Transitions API
   (transitions.js) the same pair runs on ::view-transition-old/new(hl-screen); this is the fallback. Under reduced motion a screen change is an instant swap. */
@keyframes hl-screen-in { from { opacity: 0; transform: translateX(var(--dx, 28px)); } to { opacity: 1; transform: none; } }
@keyframes hl-screen-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(var(--dx, 28px) * -.5)); } }
.hl-shell__screens { view-transition-name: hl-screen; }
.hl-tabbar { view-transition-name: hl-tabbar; }
.hl-shell__dock { view-transition-name: hl-dock; }
.hl-shell__action { view-transition-name: hl-action; }
.hl-fade { view-transition-name: hl-fade; }
.hl-shell__safe { view-transition-name: hl-safe; }
::view-transition-group(hl-screen), ::view-transition-group(hl-tabbar), ::view-transition-group(hl-dock), ::view-transition-group(hl-action), ::view-transition-group(hl-fade), ::view-transition-group(hl-safe) { animation-duration: 0s; }
::view-transition-old(hl-tabbar), ::view-transition-old(hl-dock), ::view-transition-old(hl-action), ::view-transition-old(hl-fade), ::view-transition-old(hl-safe) { display: none; }
::view-transition-new(hl-tabbar), ::view-transition-new(hl-dock), ::view-transition-new(hl-action), ::view-transition-new(hl-fade), ::view-transition-new(hl-safe) { animation: none; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: no-preference) {
  .hl-screen.is-entering { --dx: 28px; animation: hl-screen-in var(--hl-dur-page) var(--hl-ease-out) both; }
  .hl-screen.is-entering[data-dir="back"] { --dx: -28px; }
  .hl-screen.is-entering[data-dir="tab"] { --dx: 0px; animation-duration: var(--hl-dur-fast); }
  .hl-screen.is-leaving { --dx: 28px; position: fixed; left: 0; right: 0; top: calc(var(--_scroll, 0) * -1px); z-index: 0; pointer-events: none; animation: hl-screen-out calc(var(--hl-dur-page) * .6) var(--hl-ease-out) both; }
  .hl-screen.is-leaving[data-dir="back"] { --dx: -28px; }
  .hl-screen.is-leaving[data-dir="tab"] { --dx: 0px; animation-duration: calc(var(--hl-dur-fast) * .6); }
  ::view-transition-old(hl-screen) { --dx: 28px; animation: hl-screen-out calc(var(--hl-dur-page) * .6) var(--hl-ease-out) both; }
  ::view-transition-new(hl-screen) { --dx: 28px; animation: hl-screen-in var(--hl-dur-page) var(--hl-ease-out) both; }
  html[data-nav="back"]::view-transition-old(hl-screen), html[data-nav="back"]::view-transition-new(hl-screen) { --dx: -28px; }
  html[data-nav="tab"]::view-transition-old(hl-screen), html[data-nav="tab"]::view-transition-new(hl-screen) { --dx: 0px; }
  html[data-nav="tab"]::view-transition-new(hl-screen) { animation-duration: var(--hl-dur-fast); }
  html[data-nav="tab"]::view-transition-old(hl-screen) { animation-duration: calc(var(--hl-dur-fast) * .6); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- the overlay layer: sheets, dialogs, toasts, the lightbox and the banner live here, outside #app, so #app can be made inert behind a modal */
.hl-overlays { position: relative; z-index: var(--hl-z-sheet); }
html.hl-scroll-locked, html.hl-scroll-locked body { overflow: hidden; }

/* the splash (the wordmark and one lit door) is styled inline in index.html: it is the very first paint, so it must not wait for a stylesheet */

/* ---- "add to the home screen" steps (the install hint sheet) */
.hl-steps { display: grid; gap: var(--hl-sp-12); counter-reset: step; }
.hl-steps > li { counter-increment: step; display: flex; align-items: center; gap: var(--hl-sp-12); min-height: 44px; font: 400 var(--hl-t-body-size) / var(--hl-t-body-lh) var(--hl-font-ui); color: var(--hl-text); }
.hl-steps > li::before { content: counter(step); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; box-shadow: var(--hl-ring-gold-state-in); color: var(--hl-accent-gold); font: 600 .875rem / 1 var(--hl-font-ui); font-variant-numeric: lining-nums; }          /* Red Hat, not Playfair: Playfair is never set under 22 px except the doors' numerals (SPEC 4) */
.hl-steps .hl-icon { display: inline-block; vertical-align: -6px; color: var(--hl-accent-gold); }

/* ---- the plain section every screen puts its content in: the gutter and the column */
.hl-section { padding-inline: max(var(--hl-gutter), var(--hl-safe-left)) max(var(--hl-gutter), var(--hl-safe-right)); max-width: var(--hl-content-max); margin-inline: auto; }