/* USTA — customer theme tokens (light + dark)
 *
 * WHY TOKENS AT ALL
 *   The prototype authors colour as inline hex: 1532 literals, 65 distinct
 *   values, zero CSS variables. There was no seam to theme through, so every
 *   literal in index.html was rewritten to var(--cXXXXXX, #XXXXXX). The fallback
 *   IS the original colour, so :root below is an identity mapping and the
 *   approved light design is unchanged to the pixel. Dark mode is then the same
 *   tokens with different values, and nothing else in the app had to move.
 *
 * HOW THE DARK VALUES WERE CHOSEN
 *   By role, never by inversion. Surfaces lighten as they stack
 *   (page #12161C < card #171C24 < raised #1B212B) so depth still reads.
 *   Body text is #E6EAF0 on #12161C, roughly 13:1 - well past WCAG AA.
 *   The brand blue is lifted #0078F8 -> #4DA3FF, because the original sits at
 *   about 3.2:1 on a dark surface and would fail on buttons and links.
 *   Tinted status chips keep their hue and become dark washes, so the coloured
 *   text on them stays legible instead of glowing.
 *   Google's blue and the Apple mark's black are held identical in both themes:
 *   vendor marks are not ours to re-colour.
 *
 * SCOPE: the CUSTOMER app only. worker.html is untouched.
 */
:root {
  /* ── DOCKED BOTTOM NAV ──────────────────────────────────────────────
   * Heights are tokens because two things must agree: the bar's own height and
   * the bottom padding every tab scroller reserves for it. Hardcoding both is
   * how the last item ends up under the bar.
   *
   * --nav-h excludes nothing: it already carries env(safe-area-inset-bottom),
   * so the solid block runs through the home indicator and the scroll padding
   * accounts for it on devices that have one and not on devices that don't. */
  /* Status-bar allowance at the top of every screen. 70px is the desktop
   * review value (it is what the mock's fake status bar occupies). The
   * native shell overrides this to a small breathing space, because there
   * the real inset is supplied by SafeAreaView — see native-preview.ts.
   * Exactly one of the two is ever in effect. */
  --screen-pad-top: 70px;
  --nav-blur-h: 22px;
  --nav-h: calc(103px + env(safe-area-inset-bottom));
  --nav-scroll-pad: calc(var(--nav-h) + 24px);
  --nav-solid: #FFFFFF;
  --nav-fade-0: rgba(255,255,255,0);
  --nav-fade-1: rgba(255,255,255,0.92);
  --nav-border: rgba(11,18,32,0.08);
  --surface-bar: rgba(255,255,255,0.97);
  --surface-veil: rgba(255,255,255,0.88);
  --scrim-0: rgba(245,247,250,0);
  --scrim-1: #F5F7FA;
  --c000000: #000000;
  --c0057B0: #0057B0;
  --c0065D1: #0065D1;
  --c0068D6: #0068D6;
  --c0078F8: #0078F8;
  --c0B0B0C: #0B0B0C;
  --c0B1220: #0B1220;
  --c0B2447: #0B2447;
  --c111827: #111827;
  --c15803D: #15803D;
  --c166534: #166534;
  --c17A34A: #17A34A;
  --c37414F: #37414F;
  --c41506B: #41506B;
  --c4285F4: #4285F4;
  --c4CAF7D: #4CAF7D;
  --c4DA3FF: #4DA3FF;
  --c5D6673: #5D6673;
  --c5D7597: #5D7597;
  --c68717E: #68717E;
  --c6FBF8E: #6FBF8E;
  --c7FB5F7: #7FB5F7;
  --c8A93A2: #8A93A2;
  --c8A9BB8: #8A9BB8;
  --c8F5504: #8F5504;
  --c93A1B4: #93A1B4;
  --c9AA3AF: #9AA3AF;
  --c9AA3B2: #9AA3B2;
  --cA32222: #A32222;
  --cB26A05: #B26A05;
  --cB3BAC6: #B3BAC6;
  --cB6BDC9: #B6BDC9;
  --cBFDCFD: #BFDCFD;
  --cC22B2B: #C22B2B;
  --cC3CBD6: #C3CBD6;
  --cCDEBD8: #CDEBD8;
  --cD5DCE5: #D5DCE5;
  --cD8DFE8: #D8DFE8;
  --cD9E8FB: #D9E8FB;
  --cDDE3EA: #DDE3EA;
  --cDE3B3B: #DE3B3B;
  --cDFEBDD: #DFEBDD;
  --cE2E8F0: #E2E8F0;
  --cE4E9F0: #E4E9F0;
  --cE6EAF0: #E6EAF0;
  --cE8930C: #E8930C;
  --cE8ECF2: #E8ECF2;
  --cE8F7EE: #E8F7EE;
  --cE9EDF2: #E9EDF2;
  --cE9EEF4: #E9EEF4;
  --cEAF3FE: #EAF3FE;
  --cEBEEF3: #EBEEF3;
  --cEBEFF4: #EBEFF4;
  --cED9A9A: #ED9A9A;
  --cF0F3F7: #F0F3F7;
  --cF1F4F8: #F1F4F8;
  --cF1F5F9: #F1F5F9;
  --cF2DFBC: #F2DFBC;
  --cF5F7FA: #F5F7FA;
  --cF6D2D2: #F6D2D2;
  --cF8FAFC: #F8FAFC;
  --cFBFCFD: #FBFCFD;
  --cFDECEC: #FDECEC;
  --cFDF3E3: #FDF3E3;
  --cFFFFFF: #FFFFFF;
}

[data-usta-theme="dark"] {
  /* One step above the page (#0D1117) so the bar reads as docked-and-raised
   * rather than as a hole. Same value as the card surface. */
  --nav-solid: #171C24;
  --nav-fade-0: rgba(23,28,36,0);
  --nav-fade-1: rgba(23,28,36,0.92);
  --nav-border: rgba(255,255,255,0.08);
  --surface-bar: rgba(28,34,44,0.97);
  --surface-veil: rgba(28,34,44,0.88);
  --scrim-0: rgba(13,17,23,0);
  --scrim-1: #0D1117;
  --c000000: #000000;
  --c0057B0: #8CC2FF;
  --c0065D1: #3D93F0;
  --c0068D6: #3D93F0;
  --c0078F8: #4DA3FF;
  --c0B0B0C: #E6EAF0;
  --c0B1220: #E6EAF0;
  --c0B2447: #DCE6F5;
  --c111827: #E6EAF0;
  --c15803D: #4ADE80;
  --c166534: #86EFAC;
  --c17A34A: #22C55E;
  --c37414F: #9AA5B4;
  --c41506B: #AAB6C8;
  --c4285F4: #4285F4;
  --c4CAF7D: #4ADE80;
  --c4DA3FF: #4DA3FF;
  --c5D6673: #9AA5B4;
  --c5D7597: #9AA5B4;
  --c68717E: #8B95A5;
  --c6FBF8E: #4ADE80;
  --c7FB5F7: #4DA3FF;
  --c8A93A2: #8B95A5;
  --c8A9BB8: #AAB6C8;
  --c8F5504: #FCD34D;
  --c93A1B4: #8B95A5;
  --c9AA3AF: #8B95A5;
  --c9AA3B2: #8B95A5;
  --cA32222: #FF8585;
  --cB26A05: #FBBF24;
  --cB3BAC6: #6B7686;
  --cB6BDC9: #4A5563;
  --cBFDCFD: #25446B;
  --cC22B2B: #FF6B6B;
  --cC3CBD6: #3C4655;
  --cCDEBD8: #1E3B2A;
  --cD5DCE5: #333C4A;
  --cD8DFE8: #333C4A;
  --cD9E8FB: #1E3A5F;
  --cDDE3EA: #2A323F;
  --cDE3B3B: #FF6B6B;
  --cDFEBDD: #1E3B2A;
  --cE2E8F0: #2A323F;
  --cE4E9F0: #2A323F;
  --cE6EAF0: #2A323F;
  --cE8930C: #FBBF24;
  --cE8ECF2: #2A323F;
  --cE8F7EE: #12291C;
  --cE9EDF2: #0D1117;
  --cE9EEF4: #2A323F;
  --cEAF3FE: #16273A;
  --cEBEEF3: #232A35;
  --cEBEFF4: #2A323F;
  --cED9A9A: #5C2C2C;
  --cF0F3F7: #1B212B;
  --cF1F4F8: #1B212B;
  --cF1F5F9: #1B212B;
  --cF2DFBC: #4A3820;
  --cF5F7FA: #12161C;
  --cF6D2D2: #4A2424;
  --cF8FAFC: #12161C;
  --cFBFCFD: #171C24;
  --cFDECEC: #331A1A;
  --cFDF3E3: #332614;
  --cFFFFFF: #171C24;
}

/* USTA — page canvas. Not inline-styled, and now visible: the app runs
 * edge-to-edge under the status bar, so body is what shows up there. */
body { background: #F5F7FA; }
[data-usta-theme="dark"] body { background: #0D1117; }

/* Form controls otherwise inherit the OS light default inside the WebView. */
[data-usta-theme="dark"] input,
[data-usta-theme="dark"] textarea { color: #E6EAF0; caret-color: #4DA3FF; }
[data-usta-theme="dark"] input::placeholder,
[data-usta-theme="dark"] textarea::placeholder { color: #8B95A5; }

/* Tells the engine to render scrollbars and native UI dark too. */
[data-usta-theme="dark"] { color-scheme: dark; }

/* ── VIEWPORT BEHAVIOUR (customer app only) ────────────────────────────────
 * The document itself had no overscroll rule, so the whole page could
 * rubber-band on iOS even when a screen fits and has nothing to scroll. That is
 * the "screen moves when it shouldn't" feel.
 *
 * `overscroll-behavior: none` stops the bounce and scroll-chaining at the
 * document. It does NOT disable scrolling: every screen that genuinely scrolls
 * still does, because those are inner containers with their own overflow. The
 * booking-confirmed screen additionally sets overscroll-behavior:contain on its
 * own scroller, so a gesture there cannot chain outward either.
 */
html, body { overscroll-behavior: none; }