/* DV55 LIQUID DOCK · stage 4 of 6 adds the running dot and the live region. The page's own dark scheme; never follows the OS. */
:root {
  color-scheme: dark;
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, .78);
  --ink-3: rgba(255, 255, 255, .62);
  --night: #0e0a33;
  --focus: #9fd8ff;
  --icon: 80px;
  --cy: 50vh;
  --hh: 72px;
  --focus-x: 50%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* wallpaper */
#wall, #wall img { position: fixed; inset: 0; width: 100%; height: 100%; }
#wall img { object-fit: cover; object-position: 50% 50%; display: block; }
[data-layout='home'] #wall img { object-position: var(--focus-x) 50%; }
/* a soft vignette so the glass and captions sit on a calmer field (the board is darker at the edges) */
#wall::after { content: ''; position: fixed; inset: 0; background:
  radial-gradient(120% 90% at 50% 52%, transparent 55%, rgba(8, 4, 30, .45) 100%),
  linear-gradient(to bottom, transparent 70%, rgba(8, 4, 30, .35)); pointer-events: none; }

/* glass layers: back canvas → icons → front canvas → lifted icon → tooltip */
#glass-back, #glass-front { position: fixed; left: 0; width: 100%; pointer-events: none; display: block; }
#glass-back { z-index: 2; }
#dock { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#glass-front { z-index: 4; }
#tip { z-index: 7; }
#dock-hit { position: absolute; left: 0; top: 0; height: calc(var(--hh) * 2); pointer-events: auto; touch-action: none; border-radius: var(--hh); }

/* CSS frosted fallback (no WebGL): same layout, same magnification, a frosted bar instead of refraction */
#glass-css { display: none; }
.no-gl #glass-css { display: block; position: fixed; z-index: 2; top: calc(var(--cy) - var(--hh)); height: calc(var(--hh) * 2); border-radius: calc(var(--hh) * .94);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .16));
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -14px 24px rgba(255, 255, 255, .14), 0 24px 50px rgba(8, 4, 40, .5); }
.no-gl #glass-back, .no-gl #glass-front { display: none; }

/* apps */
.app { position: absolute; left: 0; top: 0; width: var(--icon); height: var(--icon); padding: 0; margin: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; pointer-events: auto; touch-action: none; transform-origin: 50% 50%; border-radius: 26%; outline: none; }
.app .ico { display: block; width: 100%; height: 100%; border-radius: 26%; }
.app svg { display: block; width: 100%; height: 100%; overflow: visible; }
.app .lbl { display: none; }
.app .dot { position: absolute; left: 50%; bottom: -16%; width: 6%; height: 6%; min-width: 4px; min-height: 4px; margin-left: -3%; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(170, 220, 255, .85); opacity: 0; transition: opacity .3s; }
.app.running .dot { opacity: 1; }
.app:focus-visible .ico { box-shadow: 0 0 0 3px rgba(10, 6, 40, .55), 0 0 0 6px var(--focus), 0 0 22px 6px rgba(159, 216, 255, .55); }

/* home screen (phones, portrait tablets): the apps that are not in the dock */
#home { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); display: none; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 8px; width: min(560px, calc(100% - 24px)); top: 150px; }
.has-home #home { display: grid; }
[data-layout='stage'] #home { left: 24px; transform: none; top: 24px; width: min(420px, 40vw); }
.app.in-home { position: relative; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0;
  min-height: 44px; border-radius: 16px; transform: none; }
.app.in-home .ico { width: min(var(--icon), 60px); height: min(var(--icon), 60px); }
.app.in-home .lbl { display: block; font-size: 12px; font-weight: 500; color: var(--ink); text-shadow: 0 1px 6px rgba(6, 2, 30, .7); line-height: 1.2; }
.app.in-home .dot { bottom: auto; top: calc(min(var(--icon), 60px) + 2px); width: 5px; height: 5px; margin-left: -2.5px; display: none; }

/* tooltip: a small glass pill above the icon */
#tip { position: fixed; left: 0; top: 0; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: #fff; background: linear-gradient(to bottom, rgba(70, 58, 140, .72), rgba(34, 24, 84, .78)); /* no backdrop-filter: it moves every frame */
  border: 1px solid rgba(255, 255, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 24px rgba(6, 2, 30, .35);
  opacity: 0; transition: opacity .16s ease; pointer-events: none; }
#tip.on { opacity: 1; }

/* captions */
.phone-head { display: none; }
.caption { position: fixed; z-index: 5; left: 0; right: 0; bottom: max(3.2vh, 18px); text-align: center; padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cap-title { margin: 0; font-size: clamp(15px, 1.45vw, 22px); font-weight: 600; letter-spacing: -.005em; text-shadow: 0 2px 14px rgba(6, 2, 30, .6); }
.cap-title span { font-weight: 500; color: var(--ink-2); }
.hint { margin: 0; font-size: clamp(13px, .7vw, 18px); color: var(--ink-3); text-shadow: 0 1px 8px rgba(6, 2, 30, .7); }
.hint kbd { font: 600 11px/1 Inter, sans-serif; display: inline-block; padding: 3px 5px; margin: 0 1px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.h-touch { display: none; }
@media (hover: none) { .h-pointer { display: none; } .h-touch { display: inline; } }
.credit { position: fixed; z-index: 5; right: 14px; bottom: 10px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .5); text-shadow: 0 1px 6px rgba(6, 2, 30, .7); }

/* phone / portrait: "Aether Phone" home screen, bottom dock */
[data-layout='home'] .phone-head { display: block; position: fixed; z-index: 5; top: max(44px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; padding: 0 16px; }
[data-layout='home'] .brand { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(6, 2, 30, .55); }
[data-layout='home'] .sub { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--ink-2); text-shadow: 0 1px 8px rgba(6, 2, 30, .6); }
/* the page's only <h1> stays readable to screen readers on phones, where the header shows the name */
[data-layout='home'] .cap-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-layout='home'] .caption { bottom: auto; top: calc(var(--cy) - var(--hh) * 1.55 - 96px); gap: 10px; }
[data-layout='home'] .credit { display: none; }
[data-layout='home'] #home { top: max(140px, calc(env(safe-area-inset-top) + 120px)); }
@media (max-height: 640px) { [data-layout='home'] .phone-head { top: 18px; } [data-layout='home'] .brand { font-size: 24px; } [data-layout='home'] #home { top: 92px; gap: 10px 6px; } }

/* short landscape screens */
@media (max-height: 520px) and (min-width: 600px) { .hint, .credit { display: none; } .caption { bottom: 10px; } }

/* reduced motion: no transitions; the glass still shows the lens, without wobble or splashes (handled in JS) */
.reduced *, .reduced *::before, .reduced *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; } }

/* before the glass is ready, keep the icons from flashing at 0,0 */
html:not(.ready) .app.in-dock { opacity: 0; }