/* The page around Flutter until its first frame: colors, the loading screen (web/splash.js), the failure screen
   (web/boot.js). A file of its own, as the page has no inline style or script (CSP; decisions «Web loading screen»).
   Colors are the tokens of docs/design.md §2. Dark by default; light from the system, or from the brightness picked in
   the app (web/boot.js sets data-theme on <html>). The font is the system's: the app's own is not loaded yet. */

:root {
  --bg: #0E1013;
  --surface: #1A1D22;
  --border: #2A2E35;
  --text: #F4F4F5;
  --text-muted: #A1A1AA;
  --accent: #FACC15;
  --on-accent: #0E1013;
  --accent-text: #FACC15;
  /* In light every accent surface has a 2px #0E1013 border (design.md §2); dark has none. */
  --accent-border: transparent;
  --info: #60A5FA;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F2EF;
    --surface: #FFFFFF;
    --border: #DEDED9;
    --text: #0E1013;
    --text-muted: #52525B;
    --accent-text: #854D0E;
    --accent-border: #0E1013;
    --info: #2563EB;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #F2F2EF;
  --surface: #FFFFFF;
  --border: #DEDED9;
  --text: #0E1013;
  --text-muted: #52525B;
  --accent-text: #854D0E;
  --accent-border: #0E1013;
  --info: #2563EB;
  color-scheme: light;
}

/* Until the first frame: our color and logo, never a white page. */
html, body { margin: 0; height: 100%; background: var(--bg); }
html, body { overflow: hidden; overscroll-behavior: none; }

/* Above Flutter's view: it stays a moment after the first frame, while the car drives off and the page fades. */
#splash {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 16px; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, sans-serif;
  transition: opacity 350ms ease-out;
}
#splash.is-leaving { opacity: 0; pointer-events: none; }
#splash img { width: 96px; height: 96px; border-radius: 22px; }
#splash [hidden] { display: none !important; }

/* The road: the car's place is the real progress (--progress, 0 to 1, from web/splash.js). The logical inset follows
   the language: right to left in Persian, left to right in English. */
#splash-progress { --car: 48px; --progress: 0; width: min(280px, calc(100vw - 32px)); margin-top: 32px; }
.splash-track { position: relative; height: 34px; }
.splash-road {
  position: absolute; inset-inline: 0; top: 20px; height: 12px; border-radius: 6px; box-sizing: border-box; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
}
.splash-dashes {
  position: absolute; inset-inline: 4px; top: 4px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px);
}
.splash-fill {
  position: absolute; inset-block: -1px; inset-inline-start: -1px; border-radius: 6px; box-sizing: border-box;
  width: calc(var(--car) / 2 + var(--progress) * (100% - var(--car)) + 1px);
  background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-border);
}
.splash-car { position: absolute; top: 4px; inset-inline-start: calc(var(--progress) * (100% - var(--car))); width: var(--car); height: 24px; }
.splash-car svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Drawn facing right; in Persian it drives the other way. */
#splash-progress[dir="rtl"] .splash-car svg { transform: scaleX(-1); }
.splash-car .car-body { fill: var(--bg); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.splash-car .car-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.splash-car .car-wheel { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.splash-car .car-spoke { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; }
.splash-car .car-lamp { fill: var(--accent); stroke: none; }
.splash-car .wheel { transform-box: fill-box; transform-origin: center; }
.splash-car .car-shake { transform-box: view-box; transform-origin: center; }
/* Wheels turn while it moves; a tiny engine shiver while the progress waits. */
#splash-progress.is-moving .wheel { animation: car-wheel 450ms linear infinite; }
#splash-progress.is-idle .car-shake { animation: car-idle 140ms ease-in-out infinite; }
@keyframes car-wheel { to { transform: rotate(360deg); } }
@keyframes car-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } }

.splash-slow { margin-top: 16px; text-align: center; }
.splash-slow p { margin: 0; color: var(--text-muted); }

/* Main buttons: accent fill, design.md §3. */
.splash-button, .boot-button {
  margin-top: 12px; min-height: 44px; padding: 10px 24px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent-border);
}
.splash-button:disabled, .boot-button:disabled { opacity: 0.6; }
.splash-button:focus-visible, .boot-button:focus-visible, .install-card button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* The install card (web/splash.js): small and quiet, under the road. */
.install-card {
  width: min(320px, calc(100vw - 32px)); box-sizing: border-box; margin-top: 32px; padding: 12px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px;
}
.install-row { display: flex; align-items: center; gap: 10px; }
.install-text { flex: 1; margin: 0; }
.install-line { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.install-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.install-actions .splash-button { margin-top: 0; padding: 8px 16px; font-size: 14px; }
.install-secondary {
  min-height: 44px; padding: 8px 16px; border-radius: 12px; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.install-close { flex: none; width: 44px; height: 44px; margin: -8px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.install-note { margin: 8px 0 0; color: var(--text-muted); overflow-wrap: anywhere; }
.install-steps { margin: 12px 0 0; padding: 0; list-style: none; }
.install-steps li { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.install-step-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); color: var(--info);
}
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.install-row > .icon, .install-line > .icon { color: var(--accent-text); }
.install-close .icon { display: block; margin: auto; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Share, plate and links read left to right in any language. */
.ltr { direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  /* No moving car, turning wheels or shiver: the road only fills. */
  .splash-car { display: none; }
  #splash-progress .wheel, #splash-progress .car-shake { animation: none !important; }
  #splash { transition-duration: 1ms; }
}

/* web/boot.js: a start that failed, or offline before everything was stored. */
#boot-error {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box; text-align: center; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, sans-serif;
}
#boot-error p { margin: 0 0 8px; max-width: 360px; }
#boot-error .boot-button { margin-top: 16px; }

/* For when no script can run at all, boot.js included: appears by itself. boot.js removes it. */
#boot-fallback {
  position: fixed; left: 16px; right: 16px; bottom: 15%; z-index: 11; text-align: center; color: var(--text); font: 16px/1.6 system-ui, sans-serif;
  visibility: hidden; animation: boot-fallback-show 0s linear 60s forwards;
}
#boot-fallback a { color: inherit; }
@keyframes boot-fallback-show { to { visibility: visible; } }

/* Safari on iOS zooms into a focused field whose text is under 16px, and the page then sits cut off and shifted.
   This is Flutter's own invisible input (its text is drawn by the app), so its size never shows. Paired with the
   viewport pin and the scroll reset in pwa.js (docs/web.md). */
flt-text-editing-host input, flt-text-editing-host textarea { font-size: 16px !important; }

/* Measured by the app (PwaBridge.safeArea): the notch and home indicator. */
#safe-area-probe {
  position: fixed; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}