/* ==========================================================================
   SlashDat food tracking
   One calm column of flat, slightly translucent cards on a dark background. SlashDat orange is the one accent color.

   How it is organised:
     1. Design tokens (tweak the look here: colors, text strengths, radius, spacing)
     2. Base page, background, header, footer
     3. Cards and type
     4. Order header (logo + "Order for" + name)
     5. Status card: icon, headline, tracker, freshness
     6. Pickup, delivery, items, order details, help
     7. Buttons and links
     8. Per-state accents (data-phase)
     9. Motion (all of it is switched off for "reduce motion")
    10. Accessibility fallbacks

   The page phase lives on <body data-phase="..."> and <main data-phase="...">:
     waiting · active · late · stale · ready · done · cancelled   (home and 404 pages use "neutral")
   Spacing follows an 8px grid (4px for hairline gaps).
   ========================================================================== */

/* 1. Design tokens --------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Base and brand */
  --base: #0b0b0d;
  --orange: #ff8a3d;          /* the one accent: progress, primary button, icons */
  --orange-deep: #f2661c;
  --orange-ink: #1f0d02;      /* text on orange */
  --ray: #ee7426;             /* the logo's burst rays in the one-time ready celebration */

  /* Status colors, used sparingly and for one meaning each */
  --green: #3fd68b;           /* "Live" dot */
  --amber: #f5b544;           /* running late, stale updates */
  --amber-text: #f7e2b8;
  --red: #ff6b61;             /* cancelled */

  /* Text. All of these pass WCAG AA on the card color at the sizes used. */
  --text: #f5f5f7;                       /* primary: near-white */
  --text-2: rgba(255, 255, 255, 0.80);   /* secondary */
  --text-3: rgba(255, 255, 255, 0.66);   /* small labels, hints */
  --line: rgba(255, 255, 255, 0.09);     /* borders and dividers (decorative) */
  --track: rgba(255, 255, 255, 0.12);    /* empty progress segments (decorative) */

  /* Cards: flat, a hint of glass */
  --card-fill: rgba(255, 255, 255, 0.045);
  --card-shade: rgba(11, 11, 13, 0.55);  /* a dark layer under the tint keeps text crisp over the photo */
  --card-border: rgba(255, 255, 255, 0.08);
  --card-blur: 16px;
  --card-fallback: #17171a;              /* where the browser can't blur */

  /* Background: the food photo (web/assets/slashdat-bg.jpg) and one soft tinted glow. 0 hides either. */
  --photo-opacity: 0.3;
  --glow-opacity: 0.16;

  /* Shape and space (8px grid) */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --column: 460px;
  --gutter: 16px;
  --card-pad: 24px;
  --gap: 16px;

  /* Type: three weights only */
  --font: -apple-system, "SF Pro Text", system-ui, Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --regular: 400;
  --medium: 600;
  --bold: 700;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --rise: 480ms;
  --stagger: 60ms;
}

/* The glow's color, registered so a state change fades it instead of snapping (where supported). */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #ff8a3d; }

/* 2. Base page, background, header, footer --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  --glow: #ff8a3d;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--base);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  transition: --glow 1.2s ease;
}

/* The background never moves and never takes clicks: a very dim food photo and one soft glow at the top. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--base);
}
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/slashdat-bg.jpg") center / cover no-repeat;
  opacity: var(--photo-opacity);
}
.blob {
  position: absolute;
  top: -60vmax;
  left: 50%;
  width: 120vmax;
  height: 100vmax;
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: var(--glow-opacity);
  background: radial-gradient(closest-side, var(--glow), transparent);
}

.shell {
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 8px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--base);
  font-weight: var(--medium);
  text-decoration: none;
}
.skip-link:focus { top: calc(16px + env(safe-area-inset-top)); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.site-header { padding-top: env(safe-area-inset-top); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

/* Logos: the white-wordmark logo in the header, the plain mark in the footer (both in web/assets). */
.brand-logo { display: block; flex: none; width: auto; height: 26px; }
.brand-small { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.brand-small .brand-mark { display: block; flex: none; width: 20px; height: 20px; }
.brand-small .brand-name { font-size: 14px; font-weight: var(--bold); letter-spacing: -0.01em; }

/* "Live" pill: shown while the order is active. Stale data turns its dot amber and still. */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--card-border);
  background: var(--card-fill);
  color: var(--text);
  font-size: 13px;
  font-weight: var(--medium);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
[data-stale="true"] .live-dot { background: var(--amber); }

.site-footer { margin-top: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 8px; color: var(--text-3); font-size: 13px; }

/* 3. Cards and type ------------------------------------------------------- */
.page { display: grid; gap: var(--gap); padding-top: 8px; padding-bottom: 32px; }

.card, .glass {
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  background: linear-gradient(var(--card-fill), var(--card-fill)), var(--card-shade);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}
.card { padding: var(--card-pad); }
/* Browsers without blur get a solid surface instead. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .glass, .live-pill { background: var(--card-fallback); }
}

.eyebrow {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: var(--medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card-title {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: var(--medium);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.card-text { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }

/* Codes (order number, SD reference): one monospace style, white, tabular. */
.code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--medium);
  letter-spacing: 0.04em;
  color: var(--text);
}
.code-xl { font-size: 40px; line-height: 1.1; letter-spacing: 0.06em; }
.code-md { font-size: 17px; }
.code-sm { font-size: 15px; }
.code-label { color: var(--text-3); font-size: 12px; font-weight: var(--medium); letter-spacing: 0.08em; text-transform: uppercase; }
.code-hint { color: var(--text-3); font-size: 13px; }

/* 4. Order header ------------------------------------------------------------ */
/* The tile stays beside the first line even when a long name wraps onto several. */
.order-head { display: flex; align-items: flex-start; gap: 16px; padding: 8px 4px 0; }
.order-head .logo-tile { margin-top: 4px; }
.order-head:not(:has(.order-head-text > .eyebrow)) .logo-tile { margin-top: 0; }

/* The restaurant's logo (served from our own domain) or, without one, its first letter. Never a broken image. */
.logo-tile {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #1c1c20;
  overflow: hidden;
}
.logo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.logo-letter { color: var(--text-2); font-size: 20px; font-weight: var(--bold); line-height: 1; }

.order-head-text { min-width: 0; }
.customer-name {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: var(--bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.order-head-place { margin: 4px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }

/* 5. Status card ------------------------------------------------------------- */
.status { overflow: hidden; }
.status > *:not(.burst) { position: relative; }

.status-top { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.status-eyebrow { flex: 1; min-width: 0; }

/* Status icon: small and plain. One icon per state (receipt, flame, bag, check, scooter, cross). */
.stage {
  --stage: var(--orange);
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--stage);
  background: rgba(255, 255, 255, 0.06);
}
.stage-icon { display: none; width: 18px; height: 18px; stroke-width: 2; }
.stage[data-icon="receipt"] .icon-receipt,
.stage[data-icon="flame"] .icon-flame,
.stage[data-icon="bag"] .icon-bag,
.stage[data-icon="check"] .icon-check,
.stage[data-icon="scooter"] .icon-scooter,
.stage[data-icon="cross"] .icon-cross { display: block; }
.icon-flame .flame-core { fill: currentColor; fill-opacity: 0.35; }
/* Home and 404 pages show the icon a little larger. */
.hero-simple .stage { width: 40px; height: 40px; margin-bottom: 16px; }
.hero-simple .stage-icon { width: 22px; height: 22px; }

.late-pill {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 181, 68, 0.35);
  background: rgba(245, 181, 68, 0.1);
  color: var(--amber-text);
  font-size: 13px;
  font-weight: var(--medium);
}

.status-text { margin-top: 16px; }
.headline {
  margin: 0;
  font-size: 32px;
  font-weight: var(--bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.headline-md { font-size: 28px; }
.subline {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 17px;
  font-weight: var(--medium);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.message { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
.next-step { margin: 16px 0 0; }
.next-step-text { margin: 0; color: var(--text); font-size: 16px; font-weight: var(--medium); }
.callout { margin: 8px 0 0; color: var(--text); font-size: 16px; font-weight: var(--medium); }

/* Ready for pickup: the order number, large, inside the status card. */
.hero-code {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

/* Tracker: four slim segments in one row, a label under each. Done = full orange, under way = half, ahead = empty. */
.tracker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.tracker-step { display: grid; gap: 8px; min-width: 0; }
.tracker-seg { position: relative; display: block; height: 6px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.tracker-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--orange);
  transition: width 700ms var(--ease);
}
.step-complete .tracker-fill { width: 100%; }
.step-current .tracker-fill { width: 50%; }
.tracker-label { color: var(--text-3); font-size: 12px; font-weight: var(--medium); line-height: 1.3; transition: color 400ms ease; }
.step-complete .tracker-label { color: var(--text-2); }
.step-current .tracker-label { color: var(--text); }

.stale-note {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(245, 181, 68, 0.3);
  background: rgba(245, 181, 68, 0.08);
  color: var(--amber-text);
  font-size: 14px;
}

.updated {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.updated-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
[data-phase="active"] .updated-dot, [data-phase="waiting"] .updated-dot, [data-phase="late"] .updated-dot, [data-phase="ready"] .updated-dot { background: var(--green); }
[data-stale="true"] .updated { color: var(--amber-text); }
[data-stale="true"] .updated-dot { background: var(--amber); }

/* Ready celebration: the logo's three rays, invisible unless the ready animation plays (see Motion). The 120px box is
   centered on the 32px status icon and turned so the burst fires to the right, into the open space beside it.
   --ux/--uy are each ray's outward direction (from the traced logo). */
.burst {
  position: absolute;
  left: calc(var(--card-pad) + 16px - 60px);
  top: calc(var(--card-pad) + 16px - 60px);
  width: 120px;
  height: 120px;
  overflow: visible;
  pointer-events: none;
  transform: rotate(133deg);
}
.ray { fill: var(--ray); opacity: 0; transform-box: view-box; transform-origin: 0 0; }
.ray-1 { --ux: -0.351; --uy: -0.936; }
.ray-2 { --ux: -0.891; --uy: -0.453; }
.ray-3 { --ux: -0.964; --uy: 0.265; }

/* 6. Pickup, delivery, items, order details, help ------------------------------ */
.address { margin: 8px 0 0; }
.address-missing { margin: 8px 0 0; color: var(--text-3); font-size: 15px; }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.actions:has(> .btn[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Two buttons side by side on a phone: one line each ("Open in Maps" never wraps), still 48px tall. */
.actions .btn { padding-left: 8px; padding-right: 8px; gap: 6px; white-space: nowrap; }
@media (max-width: 380px) { .actions .btn { font-size: 15px; } }

.items { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.item { display: flex; gap: 12px; }
.item-qty { flex: none; min-width: 28px; color: var(--text-2); font-weight: var(--medium); font-variant-numeric: tabular-nums; }
.item-name { display: grid; gap: 2px; color: var(--text); min-width: 0; }
.item-mod { color: var(--text-3); font-size: 14px; line-height: 1.4; }

/* Orders with more than six lines: the page script hides the rest (data-collapsed) and shows the toggle button. */
.items[data-collapsed="true"] .item-extra { display: none; }
.items-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0 0 0 40px;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 15px;
  font-weight: var(--medium);
  cursor: pointer;
}
.items-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.items-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.items-unlisted { margin: 8px 0 0; padding-left: 40px; color: var(--text-3); font-size: 15px; }

/* Order details: a native <details>, closed by default. The page script animates its height. */
.details { padding: 0; }
.details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 var(--card-pad);
  color: var(--text);
  font-size: 16px;
  font-weight: var(--medium);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-card);
}
.details-summary::-webkit-details-marker { display: none; }
.chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 260ms var(--ease);
}
.details[open] > .details-summary .chevron { transform: translateY(2px) rotate(-135deg); }
.details-body { overflow: hidden; padding: 0 var(--card-pad) 8px; }

.meta { display: grid; margin: 0; }
.meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.meta dt { color: var(--text-3); font-size: 14px; }
.meta dd { margin: 0 0 0 auto; color: var(--text-2); font-size: 14px; font-weight: var(--medium); text-align: right; font-variant-numeric: tabular-nums; }
.meta dd.code { color: var(--text); }
.meta-code { align-items: center; }
.meta-hint { display: block; color: var(--text-3); font-size: 12px; }

.help { padding: 8px 4px 0; text-align: center; }
.help-title { margin: 0; font-size: 15px; font-weight: var(--medium); }
.help-text { margin: 4px auto 0; max-width: 36ch; color: var(--text-2); font-size: 14px; }

/* Plain factual note; low contrast but still readable (passes AA for its size). */
.disclaimer { margin: 0; padding: 0 8px; color: var(--text-3); font-size: 12px; line-height: 1.5; text-align: center; }

/* Homepage and 404 pages: the logo, one line, a button. */
.hero { overflow: hidden; padding: var(--card-pad); }
.hero-slash { display: none; }
.home-hero { text-align: center; padding-top: 32px; padding-bottom: 32px; }
.home-logo { margin: 0 0 16px; line-height: 0; }
.home-logo img { width: auto; height: 48px; }
.home-line { margin: 0 auto; max-width: 30ch; color: var(--text); font-size: 19px; font-weight: var(--medium); line-height: 1.35; }
.home-hero .btn-block { margin-top: 24px; }
.home-note { margin: 16px 0 0; color: var(--text-3); font-size: 14px; }

/* 7. Buttons and links --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: var(--medium);
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn svg { flex: none; width: 18px; height: 18px; }
.btn-primary { color: var(--orange-ink); background: var(--orange); }
.btn-secondary { color: var(--text); border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); }
.btn-secondary svg { color: var(--orange); }
.btn-block { width: 100%; margin-top: 16px; }
@media (hover: hover) {
  .btn-primary:hover { background: #ff9a55; }
  .btn-secondary:hover { background: rgba(255, 255, 255, 0.11); }
}

/* The address is itself a link to maps: a full-width, 44px+ tap target with a visible focus ring. */
.address-link {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 44px;
  padding: 8px 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.address-link:not([href]) { cursor: default; }
.address-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--orange); }
@media (hover: hover) {
  .address-link[href]:hover span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
}

/* 8. Per-state accents ----------------------------------------------------------- */
body[data-phase="late"], body[data-phase="stale"] { --glow: #f5a524; }
body[data-phase="ready"] { --glow: #ff8a3d; }
body[data-phase="done"] { --glow: #8a8a94; }
body[data-phase="cancelled"] { --glow: #b5403a; }
body[data-phase="neutral"] { --glow: #ff8a3d; }

[data-phase="late"] .stage, [data-phase="stale"] .stage { --stage: var(--amber); }
[data-phase="done"] .stage { --stage: var(--text-2); }
[data-phase="cancelled"] .stage { --stage: var(--red); }
[data-phase="stale"] .tracker-fill { background: rgba(255, 138, 61, 0.55); }

/* 9. Motion ---------------------------------------------------------------- */
/* Everything moving lives here, and the "reduce motion" block at the end switches all of it off. */

/* Cards fade and rise one after another on load. */
.rise { animation: rise var(--rise) var(--ease) both; }
.rise-2 { animation-delay: calc(var(--stagger) * 1); }
.rise-3 { animation-delay: calc(var(--stagger) * 2); }
.rise-4 { animation-delay: calc(var(--stagger) * 3); }
.rise-5 { animation-delay: calc(var(--stagger) * 4); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Live dot: a gentle pulse while updates are live. */
body[data-stale="false"] .live-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 139, 0.5); } 60% { box-shadow: 0 0 0 6px rgba(63, 214, 139, 0); } }

/* The step under way shimmers slightly while the order is moving. */
[data-phase="active"] .step-current .tracker-fill,
[data-phase="waiting"] .step-current .tracker-fill,
[data-phase="late"] .step-current .tracker-fill { animation: shimmer 2.4s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* A status change cross-fades the headline (the page script adds .is-changing for one run). */
.status-text.is-changing { animation: crossfade 520ms var(--ease) both; }
@keyframes crossfade { 0% { opacity: 0.15; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* The ready moment, once per order (the page script sets data-burst="play" the first time this browser sees it):
   the bag bounces and the logo's three rays fire out of the status icon. */
main[data-phase="ready"][data-burst="play"] .icon-bag { animation: bounce 900ms var(--ease) 350ms 1 both; }
@keyframes bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 72% { transform: translateY(-2px); } }
main[data-phase="ready"][data-burst="play"] .ray { animation: ray-fire 1100ms cubic-bezier(0.16, 0.84, 0.3, 1) 420ms 1 both; }
main[data-phase="ready"][data-burst="play"] .ray-2 { animation-delay: 480ms; }
main[data-phase="ready"][data-burst="play"] .ray-3 { animation-delay: 540ms; }
@keyframes ray-fire {
  0% { opacity: 0; transform: translate(calc(var(--ux) * 16px), calc(var(--uy) * 16px)) scale(0.5); }
  22% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--ux) * 24px), calc(var(--uy) * 24px)) scale(1.1); }
}

/* Buttons respond to touch. */
.btn { transition: transform 140ms var(--ease), background-color 140ms var(--ease); }
.btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 10. Accessibility fallbacks ----------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .card, .glass, .live-pill {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card-fallback);
  }
}
@media (prefers-contrast: more) {
  :root {
    --text-2: rgba(255, 255, 255, 0.9);
    --text-3: rgba(255, 255, 255, 0.82);
    --card-border: rgba(255, 255, 255, 0.3);
    --line: rgba(255, 255, 255, 0.3);
  }
}
@media (forced-colors: active) {
  .tracker-seg, .tracker-fill, .stage, .live-dot, .updated-dot { forced-color-adjust: none; }
  .btn, .details-summary { border: 1px solid ButtonText; }
}