/* Service On Scene — web app, v70 "Liquid Glass" (the same look as the app: mobile/lib/design/).
   The map runs edge to edge and every control floats over it on clear glass: a translucent fill
   that is brighter at the top, a bright rim that catches the light, a soft float shadow. Pages off
   the map stand on a soft colour field (teal, sky and mint light drifting in the corners) so their
   glass cards have something to frost. One teal accent; corners concentric with the screen's.
   Light by default; Profile → Dark mode switches this browser to the dark palette (js/theme.js sets
   data-theme="dark" on <html>). Every colour comes from the tokens below (design/tokens.dart); the
   old names (--blue, --red, --green, --amber, --purple) are kept as aliases because inline styles in
   the JS still use them. */

:root {
  color-scheme: light;
  /* ---- palette: light (SosColors.light) ---- */
  --bg: #EDF3F1;
  --map-bg: #EEF1EC;
  --surface: #FFFFFF;
  --surface-2: #EAF0ED;          /* quiet fills: tracks, empty bars */
  --surface-3: #F7F9F8;          /* a card on a card */
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .92);
  --glass-border: rgba(255, 255, 255, .90);
  --text: #0F1B24;
  --muted: #4B5A66;
  --faint: #5E6D78;
  --border: #DCE4E0;             /* hairlines on solid fills */
  --accent: #0B6E69;
  --accent-press: #095C58;
  --accent-2: #22B5A6;           /* the lighter teal the accent fades into (fills, rings, the route's glow) */
  --on-accent: #FFFFFF;
  --mint: #E3F4F1;
  --on-mint: #0B6E69;
  --online: #0B7A4B;
  --online-soft: #DFF3E8;
  --warn: #9A5B00;
  --warn-soft: #FFF1DB;
  --danger: #C4231A;
  --danger-soft: #FCE7E4;
  --on-danger: #FFFFFF;
  --direct: #6247C8;
  --direct-soft: #EEEAFB;
  --sos: #C2410C;                /* an SOS (service on scene) that isn't an emergency: orange */
  --sos-soft: #FFEDD5;
  --book: #1D4ED8;               /* bookings for later: blue */
  --book-soft: #E3EDFF;
  --sponsored: #8A6100;
  --sponsored-soft: #FFF4D6;
  --star: #E09B1A;
  --ink: #2E3B44;                /* the tabs that aren't picked */
  --scrim: rgba(15, 27, 36, .28);

  /* ---- Liquid Glass ---- */
  --field-top: #EAF4F1;          /* the colour field behind every page off the map */
  --field-bottom: #E6EFF2;
  --aurora-1: rgba(56, 190, 170, .26);
  --aurora-2: rgba(120, 190, 240, .22);
  --aurora-3: rgba(160, 230, 200, .24);
  --glass-top: rgba(255, 255, 255, .72);         /* clear glass, over the map */
  --glass-bottom: rgba(255, 255, 255, .52);
  --glass-strong-top: rgba(255, 255, 255, .90);  /* strong glass: cards, trays, sheets */
  --glass-strong-bottom: rgba(255, 255, 255, .78);
  --hairline: rgba(15, 27, 36, .09);             /* the thin edge of fields and glass buttons */
  --field-fill: rgba(255, 255, 255, .78);        /* text fields, glass chips */
  --btn-glass: rgba(255, 255, 255, .82);         /* clear glass buttons */
  --tint-top: rgba(26, 150, 140, .95);           /* tinted (teal) glass: the SOS capsule, the next step */
  --tint-bottom: rgba(11, 110, 105, .97);
  --lens-top: rgba(255, 255, 255, .95);          /* the lens under the picked tab */
  --lens-bottom: rgba(227, 244, 241, .86);
  --lens-edge: rgba(255, 255, 255, .90);
  /* The bright rim that catches the light at the top-left (and, softer, the bottom-right). */
  --rim: inset 1.2px 1.2px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --rim-tint: inset 1.2px 1.2px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .22), inset 0 -2px 6px rgba(0, 40, 38, .18);
  /* The light that runs down a glass button: a white sheen fading out by the middle. */
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05));
  --shadow: 0 10px 24px -6px rgba(12, 38, 42, .11), 0 1px 3px rgba(12, 38, 42, .05);
  --float: 0 12px 32px -6px rgba(12, 38, 42, .20), 0 2px 6px rgba(12, 38, 42, .06);
  --glow: 0 14px 30px -8px rgba(11, 110, 105, .55), 0 2px 6px rgba(11, 110, 105, .25);
  --glow-danger: 0 14px 30px -8px rgba(196, 35, 26, .55), 0 2px 6px rgba(196, 35, 26, .25);
  --card-border: transparent;
  --sheet-bg: rgba(251, 253, 252, .95);
  --sheet-edge: rgba(255, 255, 255, .95);
  --handle: rgba(15, 27, 36, .18);
  --toast-bg: rgba(20, 32, 38, .92);
  --toast-fg: #F2F7F6;
  --toast-err-bg: rgba(196, 35, 26, .95);
  --toast-err-fg: #FFFFFF;
  --chip-shadow: 0 8px 20px -6px rgba(12, 38, 42, .18), 0 1px 3px rgba(12, 38, 42, .06);
  --route-casing: #FFFFFF;
  --route-glow: rgba(34, 181, 166, .30);
  --marker-ring: #FFFFFF;
  --marker-glyph: #FFFFFF;
  --tag-fg: #FFFFFF;             /* text on a map tag */
  --track: rgba(15, 27, 36, .08);                /* ring and progress tracks */
  --tile-top: rgba(255, 255, 255, .92);          /* the SOS issue tiles */
  --tile-bottom: rgba(255, 255, 255, .72);
  --tile-edge: #FFFFFF;
  --tile-shadow: 0 8px 18px -6px rgba(12, 38, 42, .08), 0 1px 2px rgba(12, 38, 42, .04);
  --seg-track: rgba(255, 255, 255, .55);
  --seg-lens: #FFFFFF;
  --seg-lens-shadow: 0 2px 8px rgba(12, 38, 42, .12);
  --step-face: #FFFFFF;
  --tl-face: #FFFFFF;

  /* ---- old names ---- */
  --blue: var(--accent);
  --red: var(--danger);
  --green: var(--online);
  --amber: var(--warn);
  --purple: var(--direct);

  /* ---- shape (Radii): concentric — a tray's corners are wider than the card in it ---- */
  --radius: 26px;                /* cards */
  --r-tile: 22px;
  --r-field: 18px;
  --r-tray: 34px;
  --r-sheet: 38px;
  --tabs-h: 66px;
  --tabs-space: 0px;             /* room the floating tab bar takes at the bottom (set below) */

  /* ---- motion (design/motion.dart) ---- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --decel: cubic-bezier(.05, .7, .1, 1);
  --accel: cubic-bezier(.3, 0, .8, .15);
  --spring: cubic-bezier(.3, 1.18, .5, 1);
  --pop: cubic-bezier(.3, 1.35, .5, 1);

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode (Profile → Dark mode, v61). */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* ---- palette: dark (SosColors.dark) ---- */
  --bg: #0C1518;
  --map-bg: #1F2724;
  --surface: #172024;
  --surface-2: #1E292E;
  --surface-3: #223036;
  --glass: rgba(26, 38, 43, .76);
  --glass-strong: rgba(26, 37, 42, .94);
  --glass-border: rgba(255, 255, 255, .14);
  --text: #EAF2F0;
  --muted: #A3B3B1;
  --faint: #7C8E8C;
  --border: #26343A;
  --accent: #3CC4B5;
  --accent-press: #2FA89B;
  --accent-2: #6FE3D5;
  --on-accent: #05302C;
  --mint: #173A38;
  --on-mint: #7FE3D7;
  --online: #3DDC97;
  --online-soft: #15332A;
  --warn: #F5B94A;
  --warn-soft: #3A2E14;
  --danger: #FF7A6E;
  --danger-soft: #3D1D1A;
  --on-danger: #3A0B07;
  --direct: #B7A4FF;
  --direct-soft: #2A2440;
  --sos: #FF9A55;
  --sos-soft: #3A2414;
  --book: #7DB0FF;
  --book-soft: #16243D;
  --sponsored: #F2C14E;
  --sponsored-soft: #3A3116;
  --star: #F2C14E;
  --ink: #A3B3B1;
  --scrim: rgba(5, 10, 12, .6);

  --field-top: #0B1417;
  --field-bottom: #0D1A1D;
  --aurora-1: rgba(60, 196, 181, .16);
  --aurora-2: rgba(90, 150, 220, .12);
  --aurora-3: rgba(61, 220, 151, .10);
  --glass-top: rgba(30, 44, 50, .76);
  --glass-bottom: rgba(18, 28, 32, .82);
  --glass-strong-top: rgba(32, 46, 52, .94);
  --glass-strong-bottom: rgba(22, 32, 37, .92);
  --hairline: rgba(255, 255, 255, .10);
  --field-fill: rgba(255, 255, 255, .06);
  --btn-glass: rgba(255, 255, 255, .07);
  --tint-top: rgba(94, 214, 200, .95);
  --tint-bottom: rgba(60, 196, 181, .97);
  --lens-top: rgba(255, 255, 255, .20);
  --lens-bottom: rgba(255, 255, 255, .09);
  --lens-edge: rgba(255, 255, 255, .14);
  --rim: inset 1px 1px 0 rgba(255, 255, 255, .20), inset -1px -1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .05);
  --rim-tint: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(255, 255, 255, .15), inset 0 -2px 6px rgba(0, 30, 28, .25);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%);
  --shadow: 0 10px 24px -6px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .12);
  --float: 0 12px 32px -6px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .30);
  --glow: 0 14px 30px -8px rgba(60, 196, 181, .35), 0 2px 6px rgba(60, 196, 181, .25);
  --glow-danger: 0 14px 30px -8px rgba(255, 122, 110, .35), 0 2px 6px rgba(255, 122, 110, .25);
  --card-border: transparent;
  --sheet-bg: rgba(26, 37, 42, .95);
  --sheet-edge: rgba(255, 255, 255, .08);
  --handle: rgba(234, 242, 240, .25);
  --toast-bg: rgba(38, 52, 57, .95);
  --toast-fg: #F2F7F6;
  --toast-err-bg: rgba(90, 33, 28, .96);
  --toast-err-fg: #FFFFFF;
  --chip-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
  --route-casing: #0B1316;
  --route-glow: rgba(111, 227, 213, .22);
  --marker-ring: #FFFFFF;
  --marker-glyph: #0B1316;
  --tag-fg: #0B1316;
  --track: rgba(255, 255, 255, .10);
  --tile-top: rgba(255, 255, 255, .08);
  --tile-bottom: rgba(255, 255, 255, .04);
  --tile-edge: rgba(255, 255, 255, .10);
  --tile-shadow: none;
  --seg-track: rgba(255, 255, 255, .06);
  --seg-lens: rgba(255, 255, 255, .16);
  --seg-lens-shadow: none;
  --step-face: #223036;
  --tl-face: #223036;
}

/* ============================================================== base */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
/* The colour field (LiquidFieldPainter): a soft wash from top to bottom with teal, sky and mint light
   drifting in the corners, fixed behind every page so the glass cards have something to frost. The
   map screens cover it with the map. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  --s: max(100vw, 360px);
  background:
    radial-gradient(circle calc(var(--s) * .72) at 6% 5%, var(--aurora-1), transparent),
    radial-gradient(circle calc(var(--s) * .78) at 100% 26%, var(--aurora-2), transparent),
    radial-gradient(circle calc(var(--s) * .84) at 26% 66%, var(--aurora-3), transparent),
    radial-gradient(circle calc(var(--s) * .76) at 94% 98%, var(--aurora-1), transparent),
    linear-gradient(180deg, var(--field-top), var(--field-bottom));
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
h1, h2, h3 { letter-spacing: -.02em; }

/* ============================================================== shell */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
:root:has(#tabs:not(:empty)) { --tabs-space: calc(var(--tabs-h) + 18px + max(10px, env(safe-area-inset-bottom))); }

/* The bar on top of a page: see-through glass over the colour field. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  min-height: 56px;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field-top) 84%, transparent), color-mix(in srgb, var(--field-top) 62%, transparent));
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.topbar:empty { display: none; }
.topbar h1 { font-size: 17px; font-weight: 700; margin: 0 6px; flex: 1; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.topbar:has(.back) h1 { text-align: left; }
/* A tab's own page: a big left-aligned title, like the app's PageTitle. */
.topbar.large { border-bottom-color: transparent; padding-left: 16px; }
.topbar.large h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; text-align: left; margin-left: 4px; }
.topbar .back {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  background: var(--btn-glass); box-shadow: inset 0 0 0 1px var(--hairline), 0 2px 8px -2px rgba(12, 38, 42, .12);
  transition: background .15s var(--ease), transform .38s var(--pop);
}
.topbar .back:hover { background: var(--glass-strong); }
.topbar .back:active { transform: scale(.9); transition-duration: .11s; }
.topbar .back .i { width: 22px; height: 22px; }
.topbar .btn.text { height: 40px; }

.view { flex: 1; display: flex; flex-direction: column; padding-bottom: var(--tabs-space); }
.view.full { padding-bottom: 0; }
.page { padding: 12px 16px 40px; max-width: 760px; width: 100%; margin: 0 auto; }
.page.wide { max-width: 1100px; }

/* ---- the floating glass tab bar (design/nav.dart): clear glass with a bright rim; the picked tab
   sits on a white glass lens that springs across. ---- */
.tabs {
  --n: 4; --i: 0;
  position: fixed; z-index: 30;
  left: 50%; bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(480px, calc(100% - 28px)); height: var(--tabs-h);
  display: flex; padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter: saturate(1.85) blur(18px); -webkit-backdrop-filter: saturate(1.85) blur(18px);
  box-shadow: var(--rim), var(--float);
}
.tabs:empty { display: none; }
.tabs::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / var(--n)); border-radius: 999px;
  background: radial-gradient(140% 140% at 50% 0%, var(--lens-top), var(--lens-bottom));
  box-shadow: inset 0 0 0 1px var(--lens-edge), 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .56s var(--spring);
}
.tab {
  flex: 1; position: relative; z-index: 1; min-width: 0;
  border: 0; background: transparent; color: var(--ink); padding: 0; cursor: pointer; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; line-height: 1.1; letter-spacing: -.05px;
  transition: color .22s var(--ease), transform .38s var(--pop);
}
.tab .ic { display: inline-flex; align-items: center; justify-content: center; }
.tab .ic .i { width: 24px; height: 24px; }
.tab .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.tab:hover:not(.active) { color: var(--text); }
.tab.active { color: var(--accent); }
.tab:active { transform: scale(.92); transition-duration: .11s; }
.tab .badge {
  position: absolute; top: 3px; left: calc(50% + 5px);
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--danger); color: var(--on-danger);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--glass-strong);
}

/* Wide screens: the capsule stands up as a floating rail on the left. */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100dvh; }
  .app:has(#tabs:empty) { display: flex; flex-direction: column; }
  :root:has(#tabs:not(:empty)) { --tabs-space: 0px; }
  .tabs {
    grid-column: 1; grid-row: 1 / span 2;
    position: sticky; top: 16px; left: auto; bottom: auto; transform: none; align-self: start;
    margin: 16px 0 16px 16px;
    width: 80px; height: auto; flex-direction: column; border-radius: var(--r-tray);
  }
  .tabs::before {
    top: 6px; left: 6px; right: 6px; bottom: auto; width: auto; height: 68px; border-radius: 28px;
    transform: translateY(calc(var(--i) * 68px));
  }
  .tab { flex: 0 0 68px; border-radius: 28px; font-size: 11.5px; gap: 4px; }
  .tab .ic .i { width: 24px; height: 24px; }
  .tab .badge { top: 8px; }
  .topbar { grid-column: 2; grid-row: 1; }
  .view { grid-column: 2; grid-row: 2; padding-bottom: 0; }
  /* With a mouse there's no swiping sideways: the service chips wrap instead. */
  .quick-strip { flex-wrap: wrap; overflow: visible; }
  .toast { bottom: 24px; }
}

/* ============================================================== cards + type */
/* A glass card on the colour field (SurfaceCard): strong glass, the bright rim, a soft shadow. */
.card {
  background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom));
  border-radius: var(--radius); padding: 16px; margin: 0 0 12px;
  border: 1px solid var(--card-border); box-shadow: var(--rim), var(--shadow);
}
.card.flat { background: color-mix(in srgb, var(--field-fill) 80%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); }
.card .card { background: color-mix(in srgb, var(--field-fill) 70%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); }
.card h2, .page h2 { font-size: 21px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; }
.card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
.section-label { font-size: 15px; font-weight: 700; color: var(--muted); margin: 20px 4px 8px; letter-spacing: -.15px; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; line-height: 1.4; }
.tiny { font-size: 12px; line-height: 1.35; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.center { text-align: center; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gap { height: 10px; }
p { line-height: 1.5; }

/* ============================================================== buttons */
/* Every button reads as glass: a white sheen runs down it over its colour (the app's _buttonSheen). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 0 22px; height: 52px;
  font-weight: 700; font-size: 15.5px; letter-spacing: -.2px; cursor: pointer; text-decoration: none; white-space: nowrap;
  background-color: var(--accent); background-image: var(--sheen); color: var(--on-accent);
  transition: background-color .15s var(--ease), box-shadow .2s var(--ease), transform .38s var(--pop), opacity .15s, filter .15s;
}
.btn:hover { background-color: var(--accent-press); }
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: .11s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; }
/* Clear glass buttons (OutlinedButton): a white pill with a hairline edge. */
.btn.secondary { background-color: var(--btn-glass); color: var(--text); box-shadow: inset 0 0 0 1px var(--hairline), 0 2px 8px -3px rgba(12, 38, 42, .10); }
.btn.secondary:hover { background-color: var(--glass-strong); }
.btn.outline { background-color: transparent; background-image: none; color: var(--accent); box-shadow: inset 0 0 0 1.6px var(--accent); }
.btn.outline:hover { background-color: var(--mint); }
.btn.danger { background-color: var(--danger); color: var(--on-danger); }
.btn.danger:hover { background-color: color-mix(in srgb, var(--danger) 88%, var(--text)); }
.btn.danger.outline { background-color: transparent; background-image: none; color: var(--danger); box-shadow: inset 0 0 0 1.6px var(--danger); }
.btn.danger.outline:hover { background-color: var(--danger-soft); }
.btn.green { background-color: var(--online); color: var(--on-accent); }
:root:not([data-theme="dark"]) .btn.green { color: #fff; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.xs { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.pill { border-radius: 999px; }
.btn.text { background-color: transparent; background-image: none; color: var(--accent); padding: 0 10px; box-shadow: none; }
.btn.text:hover { background-color: var(--mint); }
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { flex: 1; }
/* The one next step on a screen (LiquidButton): tinted glass with a glow — "Send SOS", "On my way",
   "Work finished". Red for an emergency. */
.btn.liquid {
  height: 56px; font-size: 17px; letter-spacing: -.3px; padding: 0 22px;
  background-image: var(--sheen), linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
  box-shadow: var(--rim-tint), var(--glow);
}
.btn.liquid:hover { filter: brightness(1.05); }
.btn.liquid .i { width: 22px; height: 22px; }
.btn.liquid.danger { background-image: var(--sheen), linear-gradient(180deg, color-mix(in srgb, var(--danger) 84%, #fff), var(--danger)); box-shadow: var(--rim-tint), var(--glow-danger); }
.btn.liquid.green { background-image: var(--sheen), linear-gradient(180deg, color-mix(in srgb, var(--online) 84%, #fff), var(--online)); box-shadow: var(--rim-tint), 0 14px 30px -8px color-mix(in srgb, var(--online) 50%, transparent); }
.btn.liquid:disabled { box-shadow: none; filter: none; }

/* ============================================================== fields */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.field label { font-size: 13px; font-weight: 700; color: var(--muted); padding-left: 2px; }
/* Glass fields: a white glass fill with a hairline edge; teal edge and halo when focused. */
.field input, .field select, .field textarea, .input {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-field); padding: 14.6px 16.6px;
  background: var(--field-fill); color: var(--text); outline: none; font-size: 15.5px;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 .6px var(--accent), 0 0 0 4.6px color-mix(in srgb, var(--accent) 14%, transparent); }
.field textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.field .hint { font-size: 12.5px; color: var(--muted); padding-left: 2px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; line-height: 1.45; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .grow b { display: block; font-size: 15.5px; font-weight: 600; }
.switch-row .grow span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 999px; transition: background .25s var(--ease); cursor: pointer; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.switch i::after {
  content: ""; position: absolute; width: 26px; height: 26px; left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform .42s var(--spring), width .2s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.switch input:checked + i { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: .45; cursor: not-allowed; }
select.sm { padding: 7px 12px; border-radius: 14px; }
.input.sm { width: auto; flex: 1 1 160px; min-width: 0; padding: 8px 12px; border-radius: 14px; }

/* ============================================================== chips, tags, avatars */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--mint); color: var(--on-mint);
}
.chip.red { background: var(--danger-soft); color: var(--danger); }
.chip.green { background: var(--online-soft); color: var(--online); }
.chip.amber { background: var(--warn-soft); color: var(--warn); }
.chip.purple { background: var(--direct-soft); color: var(--direct); }
.chip.gray { background: var(--surface-2); color: var(--muted); }
.chip.sponsored { background: var(--sponsored-soft); color: var(--sponsored); }
.chip.sos { background: var(--sos-soft); color: var(--sos); }
.chip.book { background: var(--book-soft); color: var(--book); }
.chip.solid { background: var(--danger); color: var(--on-danger); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Choice chips: clear glass; the chosen one is tinted glass. */
.tag-select { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-select label {
  padding: 8px 14px; border-radius: 999px; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
  transition: background .2s var(--ease), color .2s var(--ease), transform .38s var(--pop);
}
.tag-select label:active { transform: scale(.95); transition-duration: .11s; }
.tag-select input { display: none; }
.tag-select label:has(input:checked) { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint), 0 6px 14px -6px color-mix(in srgb, var(--accent) 60%, transparent); }

/* A rounded-square icon (IconTile): service tiles, the icon on a job card or a stat. */
.itile {
  width: 38px; height: 38px; border-radius: 34%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  transition: background .2s var(--ease), color .2s var(--ease);
}
:root[data-theme="dark"] .itile { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.itile .i { width: 58%; height: 58%; }
.itile.sm { width: 34px; height: 34px; } .itile.md { width: 36px; height: 36px; } .itile.lg { width: 42px; height: 42px; } .itile.xl { width: 60px; height: 60px; }
:root .itile.sos { background: var(--sos-soft); color: var(--sos); }
:root .itile.book { background: var(--book-soft); color: var(--book); }
:root .itile.red { background: var(--danger-soft); color: var(--danger); }
:root .itile.green { background: var(--online-soft); color: var(--online); }
:root .itile.amber { background: var(--warn-soft); color: var(--warn); }
:root .itile.purple { background: var(--direct-soft); color: var(--direct); }
:root .itile.gray { background: var(--surface-2); color: var(--muted); }
:root .itile.sponsored { background: var(--sponsored-soft); color: var(--sponsored); }
:root .itile.filled { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .itile.filled { color: var(--bg); }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; object-fit: cover;
  background: var(--mint); color: var(--on-mint);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 72px; height: 72px; font-size: 28px; }
.avatar.sm { width: 34px; height: 34px; font-size: 14px; }
.stars { color: var(--star); font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 0; }
.stars .i { width: 15px; height: 15px; vertical-align: 0; }
.stars .n { color: var(--muted); letter-spacing: 0; margin-left: 4px; font-size: 12.5px; font-weight: 600; }

/* ============================================================== lists */
.list-tile { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--hairline); cursor: pointer; border-radius: 14px; transition: background .15s var(--ease); }
.list-tile:last-child { border-bottom: 0; }
.list-tile:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* The tile's icon is a rounded square (IconTile), like the app's Profile tiles. */
.list-tile .ic { width: 40px; height: 40px; border-radius: 34%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 18px; flex: none; }
:root[data-theme="dark"] .list-tile .ic { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.list-tile .ic .i { width: 22px; height: 22px; color: var(--accent); }
.list-tile .ic[style*="color"] .i { color: inherit; }
:root .list-tile .ic.red { background: var(--danger-soft); } .list-tile .ic.red .i { color: var(--danger); }
.list-tile .ic.lg { width: 56px; height: 56px; } .list-tile .ic.lg .i, .card .ic.lg .i { width: 28px; height: 28px; }
.list-tile b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.list-tile span.sub { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.list-tile .chev { color: var(--faint); display: inline-flex; }
.list-tile .chev .i { width: 20px; height: 20px; color: var(--faint); }
.info-line { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 4px 0; line-height: 1.4; }
.info-line .ic { width: 18px; text-align: center; flex: none; opacity: .8; }
.info-line .ic .i { width: 16px; height: 16px; color: var(--muted); }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty .ic { display: inline-flex; width: 72px; height: 72px; border-radius: 50%; align-items: center; justify-content: center; background: var(--mint); color: var(--accent); margin-bottom: 12px; font-size: 30px; }
.empty .ic .i { width: 34px; height: 34px; }
.empty b { display: block; color: var(--text); font-size: 17px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.2px; }
.spinner { width: 22px; height: 22px; border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; justify-content: center; padding: 44px; }
.error { color: var(--danger); font-size: 13.5px; }
.small.red, .tiny.red, .sub.red { color: var(--danger); }

/* ============================================================== glass */
/* Clear glass (Glass): a translucent fill that is brighter at the top, the backdrop blurred, a bright
   rim and a float shadow. .strong carries a lot of text (trays, notices); .tint is teal glass. */
.glass, .pill, .panel {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter: saturate(1.85) blur(18px); -webkit-backdrop-filter: saturate(1.85) blur(18px);
  border: 1px solid transparent;
  box-shadow: var(--rim), var(--float);
}
.glass.strong, .panel.strong, .pill.strong { background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); }
.glass.tint, .pill.tint { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint), var(--glow); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -.1px; }
.pill .i { width: 18px; height: 18px; }
.panel { border-radius: 30px; padding: 16px; color: var(--text); }
/* An icon in a soft tinted circle (IconBubble). */
.bubble { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; flex: none; background: var(--mint); color: var(--accent); }
.bubble .i { width: 52%; height: 52%; }
.bubble.red { background: var(--danger-soft); color: var(--danger); }
.bubble.green { background: var(--online-soft); color: var(--online); }
.bubble.amber { background: var(--warn-soft); color: var(--warn); }
.bubble.purple { background: var(--direct-soft); color: var(--direct); }
.bubble.gray { background: var(--surface-2); color: var(--muted); }
.bubble.lg { width: 58px; height: 58px; }
/* A round glass button (map controls). */
.glass-btn {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter: saturate(1.85) blur(18px); -webkit-backdrop-filter: saturate(1.85) blur(18px);
  box-shadow: var(--rim), var(--float);
  transition: transform .38s var(--pop), background .15s var(--ease), opacity .15s;
}
.glass-btn:hover { background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); }
.glass-btn:active:not(:disabled) { transform: scale(.9); transition-duration: .11s; }
.glass-btn:disabled { opacity: .45; cursor: not-allowed; }
.glass-btn .i { width: 22px; height: 22px; }
.glass-btn.warn { color: var(--warn); }
/* A dot on a glass button: "you have bookings" on the calendar. */
.glass-btn .dot { position: absolute; right: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--book); border: 1.5px solid #fff; }

/* ============================================================== maps */
.map-screen { position: relative; flex: 1; min-height: 60dvh; display: flex; flex-direction: column; background: var(--map-bg); }
.map { flex: 1; min-height: 320px; z-index: 0; background: var(--map-bg); }
.leaflet-container { font: inherit; background: var(--map-bg); }
/* v62: the map pictures come from our server already in the palette (/tiles/light|dark, drawn by
   app/maptiles.py), so nothing is filtered here; --map-bg is their land colour, shown while they load. */
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--rim), var(--float) !important; border-radius: 18px !important; overflow: hidden; }
.leaflet-control-zoom a { background: var(--glass-strong) !important; color: var(--text) !important; border-color: var(--hairline) !important; width: 38px !important; height: 38px !important; line-height: 38px !important; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 70%, transparent) !important; color: var(--muted) !important; border-radius: 8px 0 0 0; font-size: 10.5px !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.map-screen .leaflet-bottom { bottom: var(--tabs-space); }
.map-overlay-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 10; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.map-overlay-top > * { pointer-events: auto; }
.map-overlay-top:has(> .quick-strip:only-child) { flex-direction: row; }
.map-overlay-bottom { position: absolute; left: 12px; right: 12px; bottom: calc(10px + var(--tabs-space)); z-index: 10; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.map-overlay-bottom > * { pointer-events: auto; }
.map-overlay-bottom:empty { display: none; }
@media (min-width: 720px) {
  .map-overlay-bottom { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); }
}
.hstrip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.hstrip::-webkit-scrollbar { display: none; }
/* A nearby provider in the tray (_NearbyCard): strong glass, no shadow of its own. */
.hstrip .mcard {
  flex: 0 0 222px; scroll-snap-align: start; border-radius: var(--r-tile); padding: 10px; cursor: pointer;
  background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom));
  box-shadow: var(--rim);
  transition: transform .38s var(--pop);
}
.hstrip .mcard:active { transform: scale(.97); transition-duration: .11s; }
.quick-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 12px 26px; margin: -4px -12px -26px; pointer-events: none; }
.quick-strip > * { pointer-events: auto; }
.quick-strip::-webkit-scrollbar { display: none; }
/* The quick-service chips over the map (GlassChip); "More" is tinted glass. */
.quick-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px 10px 14px; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 14px; letter-spacing: -.15px; color: var(--text); border: 0;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter: saturate(1.85) blur(18px); -webkit-backdrop-filter: saturate(1.85) blur(18px);
  box-shadow: var(--rim), var(--chip-shadow);
  transition: transform .38s var(--pop), background .15s var(--ease);
}
.quick-chip:hover { background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); }
.quick-chip:active { transform: scale(.95); transition-duration: .11s; }
.quick-chip .i { width: 18px; height: 18px; color: var(--accent); }
.quick-chip.accent { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint), var(--glow); }
.quick-chip.accent .i { color: var(--on-accent); }
.heat-legend { display: flex; gap: 12px; font-size: 12.5px; flex-wrap: wrap; }
.heat-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.heat-legend .i { width: 12px; height: 12px; }

/* ---- markers ---- */
/* A mechanic or shop on the driver's map (v70): their photo in a white ring of colour (teal, violet
   for a shop, gold when sponsored) and a glass label beside it — name, rating, distance. The map
   point is the photo's centre (ui.js providerMarker). */
.provider-marker { display: flex; align-items: center; gap: 5px; width: 184px; cursor: pointer; }
.provider-marker .ring {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 2px;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 4px 12px rgba(12, 38, 42, .25);
  transition: transform .38s var(--pop);
}
.provider-marker:hover .ring { transform: scale(1.06); }
.provider-marker .ring.shop { border-color: var(--direct); }
.provider-marker .ring .avatar { width: 36px; height: 36px; font-size: 15px; }
.provider-marker .ring .badge { position: absolute; right: -6px; bottom: -5px; width: 19px; min-width: 0; height: 19px; padding: 0; border-radius: 50%; background: var(--direct); border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; }
.provider-marker .ring .badge .i { width: 11px; height: 11px; color: #fff; }
.provider-marker .label {
  min-width: 0; max-width: 133px; padding: 4px 10px 5px 9px; border-radius: 15px; line-height: 1.15; color: var(--text);
  background: linear-gradient(180deg, var(--glass-strong-top), color-mix(in srgb, var(--glass-strong-top) 60%, var(--glass-strong-bottom)));
  box-shadow: var(--rim), 0 6px 16px -4px rgba(12, 38, 42, .22);
}
.provider-marker .label b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-marker .label .meta { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-marker .label .i { width: 12px; height: 12px; vertical-align: -2px; color: var(--star); }
.provider-marker .label .sp { display: block; font-size: 8px; font-weight: 800; letter-spacing: .06em; line-height: 1.1; color: var(--sponsored); }
.provider-marker.sponsored .ring { border-color: var(--sponsored); }
/* Job pins (the provider's Map tab): a round badge with a white ring (MapBadge), coloured by kind —
   emergency red, SOS orange, "asked for you" violet, booking blue, my own job green. */
.job-pin {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--sos); color: var(--marker-glyph); border: 2.5px solid var(--marker-ring);
  box-shadow: 0 4px 10px rgba(12, 38, 42, .28); margin: auto;
  transition: transform .32s var(--pop), box-shadow .32s var(--ease);
}
.job-pin .i { width: 20px; height: 20px; color: var(--marker-glyph); }
.leaflet-marker-icon > .job-pin { position: absolute; inset: 0; }   /* centred on the point both ways */
.job-pin.red { background: var(--danger); }
.job-pin.purple { background: var(--direct); }
.job-pin.green { background: var(--online); }
.job-pin.blue { background: var(--accent); }
.job-pin.book { background: var(--book); }
.job-pin.sos { background: var(--sos); }
.job-pin.selected { transform: scale(1.26); border-width: 3.5px; box-shadow: 0 6px 18px rgba(12, 38, 42, .35); }
/* A request on the dispatch board's map (MapTag): a tinted-glass tag with its kind — "SOS",
   "Emergency", "For you", "Fri 10:00 AM" — centred on the spot. */
.map-tag-wrap { width: 170px; height: 44px; display: flex; align-items: center; justify-content: center; }
.leaflet-marker-icon.tag-icon { pointer-events: none !important; }   /* only the tag itself is tappable, not the box round it */
.tag-icon .map-tag { pointer-events: auto; }
.map-tag {
  --c: var(--sos);
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px 0 9px; border-radius: 17px; cursor: pointer;
  white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: -.15px; color: var(--tag-fg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 5px 14px color-mix(in srgb, var(--c) 38%, transparent);
  transition: transform .38s var(--pop);
}
:root[data-theme="dark"] .map-tag { border-color: rgba(255, 255, 255, .5); }
.map-tag:hover { transform: scale(1.06); }
.map-tag .i { width: 16px; height: 16px; }
.map-tag.red { --c: var(--danger); } .map-tag.purple { --c: var(--direct); } .map-tag.book { --c: var(--book); } .map-tag.green { --c: var(--online); }
/* A technician on the shop's team map: their photo in their colour, and what they're doing. */
.tech-ava { --c: var(--faint); position: relative; display: inline-flex; flex: none; padding: 2px; border-radius: 50%; border: 2.5px solid var(--c); }
.tech-ava .avatar { width: 38px; height: 38px; font-size: 15px; }
.tech-ava.sm .avatar { width: 30px; height: 30px; font-size: 13px; }
.tech-ava.xs .avatar { width: 24px; height: 24px; font-size: 11px; }
.tech-ava .on { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--faint); border: 2px solid var(--surface); }
:root:not([data-theme="dark"]) .tech-ava .on { border-color: #fff; }
.tech-ava .on.yes { background: var(--online); }
.tech-ava.dim { opacity: .55; }
.tech-pin { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.tech-pin .tech-ava { background: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 40%, transparent); }
.tech-pin .what { padding: 2px 7px 3px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); box-shadow: var(--rim), 0 3px 8px -2px rgba(12, 38, 42, .2); }
/* "You are here": a teal dot with a white ring and a slow pulse (MeDot). */
.me-dot { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); margin: auto; }
.me-dot::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 35%, transparent); animation: me-pulse 2.6s var(--ease) infinite; z-index: -1; }
@keyframes me-pulse { from { transform: scale(.35); opacity: .6; } to { transform: scale(1.2); opacity: 0; } }
.me-pin { color: var(--accent); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); line-height: 1; }
.me-pin .i { width: 36px; height: 36px; }
/* The mechanic's van (VanBadge): tinted glass with a glow. */
.van-pin { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); border: 3px solid #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 50%, transparent); }
.van-pin .i { width: 22px; height: 22px; }
/* The route: a soft teal glow, a casing so it reads on any tile, then the line (RouteLayer). */
.route-glow { stroke: var(--route-glow); }
.route-casing { stroke: var(--route-casing); }
.route-line { stroke: var(--accent); }

/* Counts in the provider map's "Jobs around you" capsule, and the heat-map chip (a GlassChip). */
.map-count { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 14px; }
.map-count .i { width: 17px; height: 17px; }
.map-count b { font-weight: 700; }
.map-count.zero { color: var(--faint); }
.heat-chip { user-select: none; transition: background .2s var(--ease), color .2s var(--ease), transform .38s var(--pop); }
.heat-chip .i { color: var(--warn); }
.heat-chip:active { transform: scale(.95); transition-duration: .11s; }
.heat-chip:has(input:checked) { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint), var(--glow); }
.heat-chip:has(input:checked) .i { color: var(--on-accent); }
/* The arrival chip floating on the driver's job map. */
.job-eta { position: absolute; left: 10px; top: 10px; z-index: 500; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 30px; font-size: 14px; font-weight: 700; max-width: calc(100% - 20px); }
.job-eta .eta-ring { width: 46px; height: 46px; }
.job-eta .eta-ring circle { stroke-width: 7; }
.job-eta .eta-num b { font-size: 15px; letter-spacing: -.3px; }
.job-eta .eta-num small { display: none; }

/* ============================================================== sheets, dialogs, toast */
/* A closing sheet keeps its picture for a moment while it slides away: UI.sheet renames it
   (.sheet-backdrop → .sheet-leaving, .sheet → .sheet-out), strips its ids and makes it inert, so
   nothing — code or tests — mistakes it for the sheet that is open now. */
.sheet-backdrop, .sheet-leaving { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { animation: fade .22s var(--ease); }
.sheet-leaving { animation: fade-out .2s var(--ease) both; pointer-events: none; }
:is(.sheet-backdrop, .sheet-leaving).center { align-items: center; padding: 20px; }
/* Sheets and dialogs are strong glass with the screen-concentric corners and a bright top edge. */
.sheet, .sheet-out {
  width: 100%; max-width: 640px; max-height: 92dvh; color: var(--text);
  background: var(--sheet-bg); backdrop-filter: saturate(1.4) blur(24px); -webkit-backdrop-filter: saturate(1.4) blur(24px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 var(--sheet-edge), 0 -10px 40px rgba(12, 38, 42, .22);
}
.sheet { animation: sheet-up .44s var(--spring); }
.sheet-out { animation: sheet-down .22s var(--accel) both; }
:is(.sheet-backdrop, .sheet-leaving).center :is(.sheet, .sheet-out) { border-radius: 30px; max-width: 440px; max-height: 85dvh; box-shadow: inset 0 0 0 1px var(--sheet-edge), 0 24px 60px rgba(12, 38, 42, .3); }
.sheet-backdrop.center .sheet { animation: dialog-in .32s var(--pop); }
.sheet-leaving.center .sheet-out { animation: dialog-out .16s var(--accel) both; }
:is(.sheet-backdrop, .sheet-leaving).center.wide :is(.sheet, .sheet-out) { max-width: 760px; }
@media (min-width: 700px) { :is(.sheet-backdrop, .sheet-leaving):not(.center) :is(.sheet, .sheet-out) { margin-bottom: 16px; border-radius: var(--r-sheet); } }
/* `.center` is also the text-align utility, so a centred dialog centres everything in it — fine for a
   question, wrong for a form: labels, inputs and lists inside it stay left-aligned. */
:is(.sheet-backdrop, .sheet-leaving).center :is(.field, .radio-list, .list-tile, .banner, .card, .tag-select, .consent-text, .terms-box, .table, .check) { text-align: left; }
:is(.sheet, .sheet-out) .handle { width: 40px; height: 5px; border-radius: 3px; background: var(--handle); margin: 10px auto 0; flex: none; }
.center > :is(.sheet, .sheet-out) .handle { display: none; }
:is(.sheet, .sheet-out) .sheet-body { padding: 14px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.center > :is(.sheet, .sheet-out) .sheet-body { padding-top: 22px; }
:is(.sheet, .sheet-out) .sheet-title { font-size: 21px; font-weight: 700; margin: 4px 0 8px; letter-spacing: -.5px; }
:is(.sheet, .sheet-out) .sheet-content > p:first-child { margin-top: 4px; color: var(--muted); }
/* Three buttons ("Yes, emergency / No, not an emergency / Cancel") don't fit one phone-width row:
   let them wrap and let a long label break onto two lines instead of being cut off. */
:is(.sheet, .sheet-out) .sheet-actions { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 8px; flex: none; border-top: 1px solid var(--hairline); }
:is(.sheet, .sheet-out) .sheet-actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; height: auto; min-height: 52px; line-height: 1.2; padding: 8px 18px; text-align: center; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes dialog-in { from { transform: scale(.94); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes dialog-out { to { transform: scale(.96); opacity: 0; } }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabs-space) + 14px + env(safe-area-inset-bottom)); z-index: 60;
  background: var(--toast-bg); color: var(--toast-fg); padding: 13px 18px; border-radius: 22px;
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  font-size: 14.5px; font-weight: 600; max-width: min(520px, 90vw); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 32px rgba(0, 0, 0, .3);
  animation: toast-in .42s var(--spring);
}
.toast.err { background: var(--toast-err-bg); color: var(--toast-err-fg); }
@keyframes toast-in { from { transform: translate(-50%, 20px) scale(.96); opacity: 0; } }

/* ============================================================== chat */
.chat { display: flex; flex-direction: column; min-height: 240px; }
.chat .msgs { flex: 1; overflow-y: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 6px; max-height: 50dvh; }
.msg { max-width: 80%; padding: 9px 13px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; animation: msg-in .32s var(--decel); }
.msg.mine { align-self: flex-end; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); border-bottom-right-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.msg.theirs { align-self: flex-start; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); border-bottom-left-radius: 6px; }
.msg.system { align-self: center; background: transparent; color: var(--muted); font-size: 12.5px; text-align: center; }
.msg .who { display: block; font-size: 11.5px; opacity: .8; margin-bottom: 2px; font-weight: 600; }
.msg .i { width: 14px; height: 14px; }
@keyframes msg-in { from { transform: translateY(8px); opacity: 0; } }
.chat .compose { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.chat .compose input { flex: 1; }
.quick-replies { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; scrollbar-width: none; }

/* ============================================================== provider side */
/* The job card (MechanicJobCard): a glass card; a request still open is edged in its colour —
   emergency red, SOS orange, "asked for you" violet, booking blue (the same colours as the map). */
.job-card {
  --edge: transparent;
  background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom));
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  border: 1.8px solid var(--edge); box-shadow: var(--rim), var(--shadow); position: relative; overflow: hidden;
  transition: transform .38s var(--pop), box-shadow .2s var(--ease);
}
.job-card:hover { box-shadow: var(--rim), var(--float); }
.job-card:active { transform: scale(.985); transition-duration: .11s; }
.edge-sos { --edge: color-mix(in srgb, var(--sos) 75%, transparent); }
.edge-red { --edge: color-mix(in srgb, var(--danger) 75%, transparent); }
.edge-purple { --edge: color-mix(in srgb, var(--direct) 75%, transparent); }
.edge-book { --edge: color-mix(in srgb, var(--book) 75%, transparent); }
.job-card .head { display: flex; align-items: center; gap: 10px; }
.job-card .head .cat { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-card .head .dist { text-align: right; color: var(--accent); font-weight: 700; font-size: 16px; }
.job-card .head .dist small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.job-card .photos { display: flex; flex-direction: column; gap: 6px; }
.job-card .photos img { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; }
.job-card hr, .card hr { border: 0; border-top: 1px solid var(--hairline); margin: 10px 0 8px; }
.status-bar { display: flex; align-items: center; gap: 12px; }
.status-bar .avatar { width: 52px; height: 52px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
/* A number on a glass card (the earnings board, the shop's day). */
.stat { min-width: 0; background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); box-shadow: var(--rim), var(--shadow); border-radius: var(--r-tile); padding: 12px 14px; }   /* min-width: three across on a phone, long lines end in … instead of pushing the row wider */
.stat b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.stat b .i { width: 22px; height: 22px; vertical-align: -3px; }
.stat span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.3; color: var(--muted); overflow: hidden; }   /* v71: two lines before …, so "requests taken" survives three across */
.stat .k { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
.stat .k .i { width: 16px; height: 16px; }
/* Bars by day: the teal light fades down each bar; the latest one is solid. */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 112px; }
.bars div { flex: 1; border-radius: 5px 5px 2px 2px; min-height: 3px; position: relative; transform-origin: bottom; animation: bar-grow .6s var(--decel) both;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 75%, transparent), color-mix(in srgb, var(--accent) 55%, transparent)); }
.bars div:last-child { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.bars div.zero { background: var(--track); }
.bars div small { position: absolute; bottom: -18px; left: -4px; right: -4px; text-align: center; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
@keyframes bar-grow { from { transform: scaleY(0); } }
.progress { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 55%, transparent); transition: width .6s var(--decel); }
.progress.thin { height: 6px; }

/* ---- the Dispatch map board (mechanics and a shop's technicians, v70) ---- */
.board-screen { --sheet-h: 46%; overflow: hidden; }
.board-top { right: auto; width: calc(100% - 24px); max-width: 460px; }
/* My photo with the online dot, online or not, my name, the switch. */
.status-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 30px; }
.status-card .who { position: relative; flex: none; display: inline-flex; }
.status-card .who .avatar { width: 44px; height: 44px; }
.status-card .who .on { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); border: 2px solid #fff; transition: background .3s var(--ease); }
:root[data-theme="dark"] .status-card .who .on { border-color: var(--surface); }
.status-card .who .on.yes { background: var(--online); box-shadow: 0 0 8px color-mix(in srgb, var(--online) 60%, transparent); }
.status-card .state { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.status-card .state.on { color: var(--online); }
.status-card .name { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-card .hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; line-height: 1.3; color: var(--muted); overflow: hidden; }   /* two lines: the whole sentence fits */
/* Today on one glass strip: money, jobs, rating — opens the earnings board. */
.today-strip { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px 12px 10px 16px; border-radius: 24px; cursor: pointer; border: 0; text-align: left; color: var(--text); transition: transform .38s var(--pop); }
.today-strip:active { transform: scale(.98); transition-duration: .11s; }
.today-strip .cell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.today-strip .cell small { font-size: 12px; font-weight: 700; color: var(--muted); }
.today-strip .cell b { font-size: 19px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-strip .cell b .i { width: 17px; height: 17px; color: var(--star); vertical-align: -2px; margin-left: 2px; }
.today-strip .sep { width: 1px; height: 30px; background: var(--hairline); margin: 0 10px; flex: none; }
/* A notice over the map or on the board (paused, busy nearby, profile to finish, an error). */
.map-notice { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--r-tile); margin-bottom: 8px; }
.map-notice b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; }
.map-notice span.sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.map-notice[role="button"] { cursor: pointer; }
/* Pause requests, at the top of Which jobs reach me (the shop's day has no pause button of its own). */
.pause-row { padding: 12px 14px; margin-bottom: 12px; }
.pause-row b { display: block; font-size: 15px; font-weight: 700; }
.pause-row .sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.pause-row button.chip { cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; }
.board-top .map-notice { margin-bottom: 0; }
/* The controls down the right side of the map, and the "…" menu beside them. */
.board-top .ctl-col { align-self: flex-end; display: flex; flex-direction: column; gap: 8px; }
.more-wrap { position: relative; display: inline-flex; }
.more-menu { position: absolute; z-index: 12; right: 58px; top: 0; min-width: 200px; padding: 6px; border-radius: 20px; display: flex; flex-direction: column; animation: dialog-in .24s var(--pop); }
.more-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: transparent; border-radius: 14px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--text); text-align: left; }
.more-menu button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.more-menu button .i { width: 20px; height: 20px; color: var(--muted); }
/* The board: a glass sheet that pulls up over the map (DraggableScrollableSheet). */
.board-sheet {
  position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: var(--sheet-h);
  display: flex; flex-direction: column; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  transition: height .44s var(--spring);
}
.board-sheet.dragging { transition: none; }
.board-sheet .grab { flex: none; display: flex; justify-content: center; padding: 12px 0 10px; border: 0; background: transparent; cursor: grab; touch-action: none; width: 100%; }   /* 27 px tall: a handle you can actually catch */
.board-sheet .grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--handle); }
.board-sheet .board-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 18px 10px; touch-action: none; }
.board-sheet .board-head h2 { flex: 1; margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.board-sheet .board-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px calc(var(--tabs-space) + 24px); }
@media (min-width: 900px) {
  /* With room to spare the board stands on the right like a dispatcher's list, and the map stays in view. */
  .board-sheet { left: auto; top: 12px; right: 12px; bottom: 12px; height: auto; width: min(440px, 44%); border-radius: var(--r-tray); }
  .board-sheet .grab { display: none; }
  .board-sheet .board-head { padding-top: 16px; }
}
/* "Requests" with its count, and the sections of the board. */
.board-sec { display: flex; align-items: center; gap: 8px; margin: 6px 4px 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -.1px; }
.board-sec .n { --c: var(--muted); padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.board-sec.sos .n { --c: var(--sos); } .board-sec.direct .n { --c: var(--direct); } .board-sec.book .n { --c: var(--book); } .board-sec.mine .n { --c: var(--online); }

/* ---- the shop's day (a shop owner's Dispatch tab, v70) ---- */
.shop-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 30px; margin-bottom: 8px; }
.shop-logo { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #F59E0B, #B45309); }
.shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.shop-logo .i { width: 26px; height: 26px; }
.shop-card .grow b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card .live { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.shop-card .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.shop-card .live.on { color: var(--online); } .shop-card .live.on i { background: var(--online); }
.bento { display: grid; grid-template-columns: 11fr 9fr; gap: 10px; margin: 4px 0 10px; }
.bento-tile { display: flex; flex-direction: column; padding: 12px 12px 14px 14px; border-radius: var(--radius); cursor: pointer; text-align: left; border: 0; color: var(--text); transition: transform .38s var(--pop); }
.bento-tile:active { transform: scale(.98); transition-duration: .11s; }
.bento-tile .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.bento-tile .k .i { width: 17px; height: 17px; color: var(--accent); }
.bento-tile .k .chev { margin-left: auto; color: var(--faint); }
.bento-tile .k .chev .i { color: var(--faint); width: 18px; height: 18px; }
.bento-tile .big { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bento-tile .big small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.bento-tile .sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.ava-stack { display: flex; margin-top: 6px; height: 28px; }
.ava-stack .avatar { width: 24px; height: 24px; font-size: 11px; box-shadow: 0 0 0 2px #fff; margin-right: -4px; }
.ava-stack .avatar.off { opacity: .45; }
.mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.mini-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px 12px; border-radius: var(--r-tile); border: 0; text-align: left; color: var(--text); }
button.mini-tile { cursor: pointer; transition: transform .38s var(--pop); }
button.mini-tile:active { transform: scale(.97); transition-duration: .11s; }
.mini-tile .k { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; }
.mini-tile .k .i { width: 15px; height: 15px; }
.mini-tile b { font-size: 22px; font-weight: 700; letter-spacing: -.6px; }
.sec-head { display: flex; align-items: center; gap: 8px; margin: 18px 4px 8px; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.sec-head .grow { flex: 1; }
/* A request with the team under it: pick who goes, then "Send to Dev · set price". */
.req-card { cursor: default; border: 1.8px solid var(--edge, transparent); }
.req-card.edge-sos { --edge: color-mix(in srgb, var(--sos) 55%, transparent); } .req-card.edge-red { --edge: color-mix(in srgb, var(--danger) 55%, transparent); }
.req-card.edge-purple { --edge: color-mix(in srgb, var(--direct) 55%, transparent); } .req-card.edge-book { --edge: color-mix(in srgb, var(--book) 55%, transparent); }
.req-card .top { display: flex; align-items: center; gap: 8px; }
.req-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -.5px; margin: 8px 0 0; }
.req-card .desc { font-size: 14.5px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.send-to { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 12px 0 8px; }
.tech-pick { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.tech-pick::-webkit-scrollbar { display: none; }
.tech-pick button { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--text); transition: transform .38s var(--pop); }
.tech-pick button:active { transform: scale(.94); transition-duration: .11s; }
.tech-pick .halo { padding: 2.5px; border-radius: 50%; border: 2.5px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tech-pick button.on .halo { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.tech-pick b { font-size: 12.5px; font-weight: 700; max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tech-pick small { font-size: 11px; font-weight: 700; white-space: nowrap; }
.tone-fg-accent { color: var(--accent); } .tone-fg-book { color: var(--book); } .tone-fg-online { color: var(--online); } .tone-fg-warn { color: var(--warn); } .tone-fg-neutral { color: var(--muted); }
.req-actions { display: flex; gap: 10px; margin-top: 12px; }
.req-actions .btn { height: 48px; font-size: 15px; padding: 0 16px; }
.req-actions .btn.grow { flex: 1; min-width: 0; }
.req-actions .btn .lbl { overflow: hidden; text-overflow: ellipsis; }
.under-way .list-tile { padding: 10px 6px; }

/* ---- the shop's team over the Map tab (v70) ---- */
.team-panel { padding: 12px 10px 8px 14px; border-radius: 30px; }
.team-panel .head { display: flex; align-items: center; gap: 10px; }
.team-panel .head b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.team-panel .head span { display: block; font-size: 13px; color: var(--muted); }
.team-list { max-height: 210px; overflow-y: auto; margin-top: 6px; }
.team-list .list-tile { padding: 9px 0; cursor: default; }
.team-list .list-tile:hover { background: transparent; }
.team-list .sub.free { color: var(--online); font-weight: 700; }

/* ---- the job a mechanic is on (v70): the map with a glass bar to navigate, call, text or chat ---- */
.job-map { position: relative; height: 210px; border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; box-shadow: var(--rim), var(--shadow); }
.job-map .map { height: 100%; min-height: 0; }
/* The map's credit line sits above the bar, not behind it (v71). */
.job-map .leaflet-bottom { bottom: 66px; }
.job-actions-bar { position: absolute; z-index: 500; left: 10px; right: 10px; bottom: 10px; display: flex; padding: 8px 4px; border-radius: 26px; }
.job-actions-bar a, .job-actions-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--text); text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 0; border-radius: 16px; transition: transform .38s var(--pop); }
.job-actions-bar a:active, .job-actions-bar button:active { transform: scale(.92); transition-duration: .11s; }
.job-actions-bar .i { width: 22px; height: 22px; }
.job-actions-bar .off { opacity: .4; pointer-events: none; }
.steps-card { padding: 14px 8px 12px; }
.steps-card .steps { margin: 0; }
/* The one big button that moves the job forward, kept in reach at the bottom of the screen. */
.next-bar { position: sticky; z-index: 6; bottom: calc(var(--tabs-space) + 10px); margin: 4px 0 10px; }
.next-bar:empty { display: none; }
.next-bar .wait { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-tile); font-size: 14px; line-height: 1.35; }
.map.boxed { border-radius: var(--radius); box-shadow: var(--rim), var(--shadow); margin-bottom: 10px; }

/* ---- the earnings board (v70): the week against the goal on a glass card with a ring ---- */
.goal-card { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.goal-card .amount { font-size: 38px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 2px 0 8px; }
.svc-row { padding: 6px 0; }
.svc-row .row { gap: 8px; }
.svc-row .progress { margin-top: 6px; }

/* ---- the schedule (calendar, v70): a strip of days, then the chosen day as a timeline ---- */
.week-strip { display: flex; align-items: center; padding: 8px 4px; border-radius: var(--radius); margin-bottom: 10px; }
.week-strip .nav { width: 34px; height: 40px; border: 0; background: transparent; border-radius: 12px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.week-strip .nav:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.day-pill { flex: 1; min-width: 0; margin: 0 2px; padding: 7px 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; color: var(--text); display: flex; flex-direction: column; align-items: center; transition: background .2s var(--ease), transform .38s var(--pop); }
.day-pill:active { transform: scale(.94); transition-duration: .11s; }
.day-pill small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.day-pill b { font-size: 17px; font-weight: 700; letter-spacing: -.4px; }
.day-pill i { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; background: transparent; }
.day-pill.has i { background: var(--accent); }
.day-pill.today b { color: var(--accent); }
.day-pill.on { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.day-pill.on small, .day-pill.on b { color: var(--on-accent); } .day-pill.on small { opacity: .85; }
.day-pill.on.has i { background: var(--on-accent); }
.who-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 10px; scrollbar-width: none; }
.who-chips::-webkit-scrollbar { display: none; }
.who-chips button { --c: var(--text); flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--field-fill) 80%, transparent); border: 1px solid var(--hairline); transition: border-color .2s var(--ease), background .2s var(--ease); }
.who-chips button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.who-chips button.on { background: var(--seg-lens); border: 1.6px solid var(--c); }
.timeline { position: relative; margin: 0 4px 0 0; }
.timeline .hr { position: absolute; left: 46px; right: 0; height: 1px; background: var(--hairline); }
.timeline .hl { position: absolute; left: 0; width: 38px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; transform: translateY(-7px); }
.timeline .now-line { position: absolute; left: 46px; right: 0; height: 2px; background: var(--danger); }
.timeline .now-line::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.tl-block {
  --c: var(--accent);
  position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 6px 8px 6px 10px; border-radius: 14px; cursor: pointer; overflow: hidden; text-align: left;
  border: 0; border-left: 4px solid var(--c); color: var(--text);
  background: color-mix(in srgb, var(--c) 12%, var(--tl-face)); transition: transform .38s var(--pop);
}
:root[data-theme="dark"] .tl-block { background: color-mix(in srgb, var(--c) 22%, var(--tl-face)); }
.tl-block:active { transform: scale(.97); transition-duration: .11s; }
.tl-block.open { --c: var(--sos); background: var(--sos-soft); }
.tl-block.done { opacity: .6; }
.tl-block b { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block b .ellipsis { min-width: 0; flex: 1; }
.tl-block b .i { width: 16px; height: 16px; color: var(--online); margin-left: auto; flex: none; }
.tl-block span { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================== photos, radios, tables */
.photo-thumb { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; border: 1px solid var(--hairline); }
.photo-pick { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.photo-pick .box { width: 64px; height: 64px; border-radius: 18px; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; flex: none; }
.photo-pick .box img { width: 100%; height: 100%; object-fit: cover; }
.photo-pick .box .i { width: 26px; height: 26px; color: var(--muted); }
.radio-list label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--hairline); }
.radio-list label:last-child { border-bottom: 0; }
.radio-list input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.radio-list b { display: block; font-size: 15.5px; font-weight: 600; }
.radio-list span { display: block; font-size: 13.5px; color: var(--muted); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table th { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
tr.serious td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
/* Wide admin tables scroll sideways inside their card instead of stretching the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* A heading in a wrapping toolbar keeps its full text; the controls drop to the next line instead. */
.row.wrap > h3.grow { min-width: fit-content; }

/* ============================================================== sign-in (the app's LoginScreen) */
/* The brighter colour field behind sign-in, first-run and the dashboards (AirBackdrop): the same
   lights as the page's field, half as strong again. */
.air { position: relative; isolation: isolate; }
/* Fixed, not sized to the page: on a desktop or a short page the lights fill the window behind the
   content like the app's AirBackdrop, instead of stopping in a visible rectangle below the last card (v71). */
.air::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  --s: max(100vw, 360px);
  background:
    radial-gradient(circle calc(var(--s) * .72) at 6% 5%, var(--aurora-1), transparent),
    radial-gradient(circle calc(var(--s) * .78) at 100% 26%, var(--aurora-2), transparent),
    radial-gradient(circle calc(var(--s) * .84) at 26% 66%, var(--aurora-3), transparent),
    radial-gradient(circle calc(var(--s) * .76) at 94% 98%, var(--aurora-1), transparent);
}
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; isolation: isolate; }
.login-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  --s: max(100vw, 360px);
  background:
    radial-gradient(circle calc(var(--s) * .72) at 6% 5%, var(--aurora-1), transparent),
    radial-gradient(circle calc(var(--s) * .78) at 100% 26%, var(--aurora-2), transparent),
    radial-gradient(circle calc(var(--s) * .84) at 26% 66%, var(--aurora-3), transparent),
    radial-gradient(circle calc(var(--s) * .76) at 94% 98%, var(--aurora-1), transparent);
}
.login-col { width: 100%; max-width: 420px; color: var(--text); }
.login-col #auth-head { text-align: center; margin-bottom: 26px; animation: rise .52s var(--decel) both; }
/* The brand mark: a teal rounded square with the car-repair glyph (BrandMark). */
.brand-mark { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--rim-tint), var(--glow); }
.brand-mark .i { width: 40px; height: 40px; }
.brand-mark.sm { width: 60px; height: 60px; border-radius: 18px; }
.brand-mark.sm .i { width: 34px; height: 34px; }
.hero-bubble { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 34%; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.hero-bubble .i { width: 36px; height: 36px; }
.login-col h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.8px; line-height: 1.2; }
.login-col #auth-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.auth-card {
  padding: 18px 16px 16px; border-radius: 30px; margin-bottom: 10px;
  background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom));
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid transparent; box-shadow: var(--rim), var(--float);
  animation: rise .52s var(--decel) .08s both;
}
/* Material filled field with a floating label (InputDecoration labelText). */
.mfield { display: block; position: relative; margin: 0 0 12px; }
.mfield input {
  width: 100%; height: 58px; padding: 22px 16.6px 8px; border: 1px solid var(--hairline); border-radius: var(--r-field);
  background: var(--field-fill); color: var(--text); font-size: 16px; outline: none;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease);
}
.mfield span { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; pointer-events: none; transition: all .18s var(--ease); }
.mfield input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 .6px var(--accent), 0 0 0 4.6px color-mix(in srgb, var(--accent) 14%, transparent); }
.mfield input:focus + span, .mfield input:not(:placeholder-shown) + span { top: 9px; transform: none; font-size: 12px; font-weight: 600; }
.mfield input:focus + span { color: var(--accent); }
.login-col .helper { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px 16px; line-height: 1.35; }
.login-col .notice { background: var(--danger-soft); color: var(--text); border-radius: 18px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }
.login-col .consent { margin: 4px 0 8px; font-size: 14px; }
.login-col #auth-submit { margin-top: 8px; }
.login-col #auth-err { margin-bottom: 8px; }
.login-col #auth-err:empty { display: none; }

/* v64: Update required (api.js UpdateGate) — the sign-in look, over everything; nothing under it
   can be reached. Same screen as the app's UpdateRequiredScreen. */
.update-gate { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background: linear-gradient(180deg, var(--field-top), var(--field-bottom)); animation: fade .28s var(--decel) both; }
.update-gate .login-wrap { min-height: 100%; }
.ug-head { text-align: center; margin-bottom: 22px; animation: rise .52s var(--decel) both; }
.ug-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.ug-note { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--mint) 85%, transparent); color: var(--text); font-size: 14.5px; line-height: 1.45; margin-bottom: 12px; overflow-wrap: anywhere; }
.ug-note b { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ug-versions { text-align: center; font-size: 13px; color: var(--muted); margin: 2px 0 12px; }
html.update-required, html.update-required body { overflow: hidden; }
/* v65: the gentle note — a newer version is on the server; nothing is stopped. */
.update-note {
  position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 70;
  width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  border-radius: var(--r-tile); background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); border: 1px solid transparent; box-shadow: var(--rim), var(--float);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  animation: note-in .42s var(--decel) both;
}
.update-note.leaving { animation: fade-out .25s var(--ease) both; }
.update-note .un-ic { width: 38px; height: 38px; flex: none; border-radius: 13px; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--rim-tint); }
.update-note .un-ic .i { width: 22px; height: 22px; }
.update-note .grow b { display: block; font-size: 14.5px; }
.update-note .grow span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.update-note .un-actions { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
@keyframes note-in { from { opacity: 0; transform: translate(-50%, -14px); } }
@media (prefers-reduced-motion: reduce) { .update-note, .update-note.leaving { animation: none; } }
/* The version line at the bottom of Profile. */
.app-version { text-align: center; font-size: 12.5px; color: var(--muted); margin: 14px 0 4px; }
.login-col .links { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 6px; }
.login-col .links .btn.text { height: 44px; }
/* v63: How it works (the landing page) and the Help center, side by side under the form. */
.login-col .links.login-help { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.login-help .btn.text .i { width: 18px; height: 18px; }
.role-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.role-pick label { border-radius: var(--r-tile); padding: 12px 8px; text-align: center; cursor: pointer; font-size: 13.5px; background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); border: 1.5px solid var(--hairline); box-shadow: var(--rim); transition: border-color .15s var(--ease), background .15s var(--ease), transform .38s var(--pop); }
.role-pick label b { display: block; font-size: 22px; margin-bottom: 4px; }
.role-pick label b .i { width: 28px; height: 28px; color: var(--accent); }
.role-pick input { display: none; }
.role-pick label:has(input:checked) { border-color: var(--accent); background: linear-gradient(180deg, var(--mint), color-mix(in srgb, var(--accent) 6%, var(--mint))); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 35%, transparent); }
.role-pick label:active { transform: scale(.97); transition-duration: .11s; }
/* "I am a…": three big cards, one per role, stacked. */
.role-pick.big { grid-template-columns: 1fr; gap: 14px; margin: 0 0 4px; }
.role-pick.big label {
  display: flex; align-items: center; gap: 16px; text-align: left; padding: 20px 16px 20px 18px; border-radius: var(--radius); font-size: 14px;
  border: 1px solid transparent; box-shadow: var(--rim), var(--shadow);
  animation: rise .52s var(--decel) both;
}
.role-pick.big label:nth-child(2) { animation-delay: .04s; }
.role-pick.big label:nth-child(3) { animation-delay: .08s; }
.role-pick.big label:hover { box-shadow: var(--rim), var(--float); }
.role-pick.big label b { margin: 0; flex: none; width: 60px; height: 60px; border-radius: 34%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.role-pick.big label b .i { width: 32px; height: 32px; color: var(--accent); }
.role-pick.big label .role-name { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.role-pick.big label .role-sub { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; line-height: 1.35; }
.role-pick.big label .chev { margin-left: auto; color: var(--faint); }

/* ============================================================== documents, banners, forms */
.line-items .li { display: grid; grid-template-columns: 1fr 64px 92px 32px; gap: 6px; margin-bottom: 6px; align-items: center; }
.line-items .li input { width: 100%; min-width: 0; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--field-fill); color: var(--text); outline: none; }
.line-items .li input:focus { border-color: var(--accent); }
.line-items .li .btn.icon-btn { padding: 0; width: 32px; min-width: 32px; }
/* v68 SOS "What's wrong?": the Common tiles and the More list (like the app's request sheet). v70:
   clear glass tiles with a rounded-square icon; the chosen one turns mint with a teal edge. */
.issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.issue-grid[hidden] { display: none; }
.issue-tile {
  aspect-ratio: 1.12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 6px;
  border-radius: var(--r-tile); border: 1px solid var(--tile-edge); background: linear-gradient(180deg, var(--tile-top), var(--tile-bottom));
  box-shadow: var(--tile-shadow); color: var(--text); font: 700 13.5px/1.2 var(--font); letter-spacing: -.2px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .38s var(--pop);
}
.issue-tile > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issue-tile:active { transform: scale(.96); transition-duration: .11s; }
.issue-tile.on { border-color: var(--accent); color: var(--accent); background: linear-gradient(180deg, var(--mint), color-mix(in srgb, var(--accent) 6%, var(--mint))); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 18px -6px color-mix(in srgb, var(--accent) 25%, transparent); }
.issue-tile.on .itile { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .issue-tile.on .itile { color: var(--bg); }
#rq-svc-search { width: 100%; }
.tag-select label.on { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint); }
.tag-select label.on .i { color: var(--on-accent); }
/* v68 extra work: what needs doing, as the mechanic wrote it */
.work-text { white-space: pre-wrap; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 14px; padding: 10px 12px; margin: 4px 0 8px; font-size: 14px; }
.sig { font-family: "Snell Roundhand", "Brush Script MT", cursive; font-size: 24px; }
.consent-text { background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 18px; padding: 13px; line-height: 1.5; }
.terms-box { max-height: 40dvh; overflow-y: auto; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 18px; padding: 13px; font-size: 13.5px; white-space: pre-wrap; line-height: 1.5; }
/* A note on a soft tint (what happens when it's sent, a warning). */
.banner { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 18px; background: color-mix(in srgb, var(--warn-soft) 92%, transparent); color: var(--text); font-size: 13.5px; line-height: 1.4; margin-bottom: 10px; }
.banner .i { width: 20px; height: 20px; flex: none; color: var(--warn); }
.banner.blue { background: color-mix(in srgb, var(--mint) 88%, transparent); } .banner.blue .i { color: var(--accent); }
.banner.red { background: color-mix(in srgb, var(--danger-soft) 92%, transparent); } .banner.red .i { color: var(--danger); }
.banner.green { background: color-mix(in srgb, var(--online-soft) 92%, transparent); } .banner.green .i { color: var(--online); }
.two-col { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* ============================================================== icons (inline SVG, same set as the app) */
.i { width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -.3em; flex: none; display: inline-block; }
.i.gold { color: var(--star); } .i.red { color: var(--danger); } .i.green { color: var(--online); } .i.blue { color: var(--accent); } .i.purple { color: var(--direct); } .i.amber { color: var(--warn); } .i.muted { color: var(--muted); } .i.sos { color: var(--sos); } .i.book { color: var(--book); }
.btn .i { width: 20px; height: 20px; vertical-align: middle; }
.btn.sm .i { width: 18px; height: 18px; } .btn.xs .i { width: 16px; height: 16px; }
.btn.icon-btn { padding: 0 9px; min-width: 40px; }
.btn.text .i { color: currentColor; }
.chip .i { width: 13px; height: 13px; vertical-align: -2px; }
.star-picker { display: flex; justify-content: center; gap: 6px; margin: 12px 0; cursor: pointer; }
.star-picker .i { width: 40px; height: 40px; color: color-mix(in srgb, var(--text) 16%, transparent); transition: transform .38s var(--pop), color .15s; }
.star-picker .i.gold { color: var(--star); transform: scale(1.08); }
.ic.lg { width: 56px; height: 56px; border-radius: 34%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.hero-ic { display: flex; justify-content: center; margin: 4px 0 10px; color: var(--accent); }
.hero-ic .i { width: 44px; height: 44px; }
.cat-ic { display: inline-flex; width: 42px; height: 42px; border-radius: 34%; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); align-items: center; justify-content: center; flex: none; }
.cat-ic .i { width: 22px; height: 22px; }
.lead-ic { display: inline-flex; width: 40px; height: 40px; border-radius: 34%; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); align-items: center; justify-content: center; flex: none; }
:root[data-theme="dark"] :is(.ic.lg, .cat-ic, .lead-ic) { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lead-ic .i { width: 21px; height: 21px; }
.tag-select label .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.tag-select label:has(input:checked) .i { color: var(--on-accent); }
.card h3 .i, .section-label .i { width: 17px; height: 17px; vertical-align: -3px; }
.icon-btn .badge { position: static !important; display: inline-block; margin-left: 2px; }
.badge { display: inline-block; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--danger); color: var(--on-danger); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.badge.badge-accent { background: var(--mint); color: var(--on-mint); }

/* ============================================================== towing, ads, segments */
.tow-banner { border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); align-items: flex-start; }
.tow-banner b { color: var(--danger); display: inline-flex; align-items: center; gap: 6px; }
.tow-line { display: flex; align-items: flex-start; gap: 4px; color: var(--danger); font-size: 12.5px; font-weight: 700; margin: 2px 0 6px; line-height: 1.3; }
.tow-line .i { width: 16px; height: 16px; flex: none; color: var(--danger); }
.tow-card { background: color-mix(in srgb, var(--danger-soft) 70%, transparent); }
/* v53: sponsored placements — always labelled, with a "Why this?" line */
.adcard { border: 1px dashed color-mix(in srgb, var(--sponsored) 50%, transparent); background: color-mix(in srgb, var(--sponsored-soft) 50%, transparent); box-shadow: none; }
.adcard .adtag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sponsored); margin-bottom: 6px; }
.adcard [data-sp] + [data-sp] { border-top: 1px solid var(--hairline); }
/* Two to five choices on a glass track (GlassSegmented): the chosen one sits on a white lens that
   springs across. The lens finds its place from which button is .on — no script needed. */
.seg { --n: 2; --i: 0; position: relative; display: flex; padding: 4px; gap: 4px; margin-bottom: 8px; border-radius: 18px; background: var(--seg-track); box-shadow: inset 0 0 0 1px var(--hairline); }
.seg:has(> button:nth-child(3)) { --n: 3; } .seg:has(> button:nth-child(4)) { --n: 4; } .seg:has(> button:nth-child(5)) { --n: 5; }
.seg:has(> button:nth-child(2).on) { --i: 1; } .seg:has(> button:nth-child(3).on) { --i: 2; } .seg:has(> button:nth-child(4).on) { --i: 3; } .seg:has(> button:nth-child(5).on) { --i: 4; }
.seg::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 14px;
  width: calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n)); transform: translateX(calc(var(--i) * (100% + 4px)));
  background: var(--seg-lens); box-shadow: var(--seg-lens-shadow);
  transition: transform .56s var(--spring);
}
.seg:not(:has(> button.on))::before { display: none; }
.seg button {
  position: relative; z-index: 1; flex: 1; min-width: 0; border: 0; background: transparent; color: var(--muted); padding: 9px 8px; border-radius: 14px;
  font-size: 14px; font-weight: 700; letter-spacing: -.15px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color .2s var(--ease);
}
.seg button.on { color: var(--text); }
.seg button .i { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .seg::before { transition: none; } }
button.chip { cursor: pointer; border: 0; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 12px; transition: transform .38s var(--pop), background .15s; }
button.chip:hover { background: var(--glass-strong); }
button.chip:active { transform: scale(.95); transition-duration: .11s; }
button.chip .i { width: 15px; height: 15px; vertical-align: -2px; color: var(--accent); }

/* ============================================================== first-run setup + walkthrough */
.view.full .tour { max-width: 560px; margin: 0 auto; padding-bottom: 24px; }
.tour-dots { display: flex; gap: 5px; justify-content: center; margin: 8px 0 16px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, transparent); transition: width .42s var(--spring), background .2s var(--ease); }
.tour-dots span.done { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.tour-dots span.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 22px; }
.tour-head { text-align: center; margin-bottom: 14px; }
.tour-head h2 { margin: 10px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.tour-head p { margin: 0; color: var(--muted); }
.tour-ic { display: inline-flex; width: 58px; height: 58px; border-radius: 34%; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.tour-ic .i { width: 30px; height: 30px; }
.tour-hero { display: inline-flex; width: 96px; height: 96px; border-radius: 30px; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint), var(--glow); }
.tour-hero .i { width: 52px; height: 52px; }
.tour-hero.green { background: var(--online-soft); color: var(--online); box-shadow: none; border-radius: 50%; }
.tour-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.tour-num { width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--on-mint); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tour-where { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--on-mint); background: color-mix(in srgb, var(--mint) 88%, transparent); border-radius: 16px; padding: 9px 12px; margin: 12px 0 8px; }
.tour-where .i { width: 16px; height: 16px; }
.tour-steps { margin: 0 0 12px; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.tour-steps li { margin-bottom: 8px; }
.tour-mock { background: var(--map-bg); border: 1px solid var(--hairline); border-radius: var(--r-tile); padding: 12px; margin: 8px 0; }
.tm-card { background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); border-radius: 16px; padding: 10px 12px; font-size: 13px; box-shadow: var(--rim), var(--shadow); }
.tm-map { position: relative; height: 90px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); overflow: hidden; }
.tm-pin { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); } .tm-pin .i { width: 30px; height: 30px; }
.tm-fab { margin: 8px auto 6px; width: max-content; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); border-radius: 999px; padding: 8px 18px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: var(--rim-tint), var(--glow); }
.tm-fab .i { width: 18px; height: 18px; }
.tm-strip { display: flex; gap: 6px; overflow: hidden; margin-bottom: 8px; } .tm-strip .chip { white-space: nowrap; }
.tm-bar { height: 8px; border-radius: 999px; background: var(--track); margin-top: 6px; overflow: hidden; } .tm-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
.tm-switch { width: 40px; height: 22px; border-radius: 11px; background: color-mix(in srgb, var(--text) 16%, transparent); position: relative; flex: none; }
.tm-switch.on { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); } .tm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; } .tm-switch.on::after { left: 21px; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.tour-nav .btn { min-width: 120px; }

/* ============================================================== deals + card payments (v59) */
/* The extra-cost line sits right under the price and is never under half its size
   (California: 16 CCR 3372.1(d)). */
.deals-strip { margin-bottom: 4px; }
.deal-tile { flex: 0 0 204px; background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); border: 1px solid transparent; border-radius: var(--r-tile); padding: 11px 13px; cursor: pointer; box-shadow: var(--rim), var(--shadow); transition: transform .38s var(--pop); }
.deal-tile:active { transform: scale(.97); transition-duration: .11s; }
.deal-tile.sponsored { border: 1px dashed color-mix(in srgb, var(--sponsored) 50%, transparent); background: color-mix(in srgb, var(--sponsored-soft) 50%, var(--glass-strong-top)); }
.deal-tile .adtag, .deal-sheet .adtag { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sponsored); }
.deal-cat { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; } .deal-cat .i { width: 14px; height: 14px; }
.deal-price { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--online); letter-spacing: -.3px; }
.deal-price.big { font-size: 30px; }
.deal-reg { font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: line-through; }
.deal-disc { font-size: 12px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.deal-price.big + .deal-disc { font-size: 15px; }
.deal-title { font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.deal-chip { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--online-soft); color: var(--online); margin-right: 8px; white-space: nowrap; }
.deal-banner { align-items: flex-start; }
.deal-sheet { text-align: left; }
.amt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.amt-chips button.chip.on { background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); box-shadow: var(--rim-tint); }

/* ============================================================== driver map (DriverHome, v70 Liquid Glass) */
/* "Your car is at · 1 Market St" — the clear-glass capsule on top of the map. */
.search-capsule {
  display: flex; align-items: center; gap: 4px; height: 62px; padding: 0 8px 0 10px; border-radius: 31px; cursor: pointer; color: var(--text);
  transition: transform .38s var(--pop);
}
.search-capsule:active { transform: scale(.985); transition-duration: .11s; }
.search-capsule.locked { cursor: default; }
.search-capsule.locked:active { transform: none; }
/* The map's attribution sits top-right, under the floating controls. */
#driver-map-screen .leaflet-top, #mech-map-screen .leaflet-top { top: calc(max(12px, env(safe-area-inset-top)) + 124px); }
.search-capsule .pin-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; margin-right: 6px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mint) 90%, transparent); color: var(--accent); }
.search-capsule .pin-ic .i { width: 21px; height: 21px; }
.search-capsule .where { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-capsule .where small { font-size: 12px; font-weight: 600; color: var(--muted); }
.search-capsule .where b { font-size: 15.5px; font-weight: 700; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-capsule .cap-btn { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.search-capsule .cap-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.search-capsule .cap-btn .i { width: 22px; height: 22px; }
/* You: your initials on a warm disc with a white ring. */
.search-capsule .me {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); flex: none; cursor: pointer;
  background: linear-gradient(135deg, #F59E0B, #B45309); color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: -.3px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(12, 38, 42, .18);
  transition: transform .38s var(--pop);
}
.search-capsule .me:active { transform: scale(.9); transition-duration: .11s; }
:root[data-theme="dark"] .search-capsule .me { border-color: rgba(255, 255, 255, .5); }
/* The glass at the bottom: the SOS capsule and who's nearby, or the request on its way. */
.tray { border-radius: var(--r-tray); padding: 16px 16px 14px; overflow: hidden; }
.tray-row { display: flex; align-items: center; gap: 14px; }
.tray-row .grow b, .tray-title { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.45px; line-height: 1.22; }
.tray-sub { font-size: 13.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.kick { display: block; font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kick.green { color: var(--online); } .kick.warn { color: var(--warn); }
.tray-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.tray-actions .btn { flex: 1; min-width: 0; height: 50px; font-size: 15px; padding: 0 12px; gap: 6px; }
.tray-actions .btn .i { width: 19px; height: 19px; }
.tray-actions .btn .lbl { overflow: hidden; text-overflow: ellipsis; }
/* The SOS capsule: tinted glass, the one big thing on the screen, with a slow halo. */
.sos-btn {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 78px; border: 0; border-radius: 39px; cursor: pointer; text-align: left;
  padding: 0 12px 0 10px; color: var(--on-accent);
  background-image: var(--sheen), linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
  box-shadow: var(--rim-tint), var(--glow);
  transition: transform .38s var(--pop), filter .15s var(--ease);
}
.sos-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent); animation: halo 2.8s var(--ease) infinite; pointer-events: none; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
.sos-btn:hover { filter: brightness(1.05); }
.sos-btn:active { transform: scale(.97); transition-duration: .11s; }
.sos-btn .sos-word { width: 56px; height: 56px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .45); font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.sos-btn .sos-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sos-btn .sos-text b { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sos-btn .sos-text small { font-size: 13.5px; font-weight: 600; opacity: .86; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sos-btn .sos-go { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); }
.sos-btn .sos-go .i { width: 22px; height: 22px; }
/* Who's nearby, on its own glass under the SOS capsule (swipe sideways). */
.near-tray { margin-top: 10px; border-radius: 30px; padding: 8px 0 12px 14px; }
.near-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 2px 2px; font-size: 13.5px; font-weight: 700; color: var(--text); min-height: 40px; }
.near-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.near-head .dot.on { background: var(--online); }
.near-tray .hstrip { margin: 0; padding: 2px 14px 2px 0; }
.near-tray .tray-sub { padding: 0 18px 4px 2px; }
/* A nearby provider in the tray (_NearbyCard). */
.near-card { display: flex; align-items: center; gap: 10px; }
.near-card .ring { padding: 2px; border-radius: 50%; border: 2.5px solid var(--border); flex: none; display: inline-flex; }
.near-card .ring.on { border-color: var(--online); }
.near-card .ring .avatar { width: 42px; height: 42px; }
.near-card b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-card .meta { font-size: 12.5px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.near-card .meta .i { width: 15px; height: 15px; color: var(--star); vertical-align: -3px; }
.near-card .state { font-size: 12px; font-weight: 700; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-card .state.on { color: var(--online); }
.near-card .sp { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--sponsored); background: var(--sponsored-soft); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
/* The mechanic on the live tray: strong glass, no shadow of its own. */
.who-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; margin-top: 12px; border-radius: var(--r-tile); background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); box-shadow: var(--rim); cursor: pointer; transition: transform .38s var(--pop); }
.who-row:active { transform: scale(.98); transition-duration: .11s; }
.who-row .avatar { width: 42px; height: 42px; }
.who-row b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-row b .i { width: 16px; height: 16px; color: var(--accent); vertical-align: -3px; }
.who-row .grow span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-row .chev .i { width: 20px; height: 20px; color: var(--faint); }
/* Share my trip (ShareTripTile): a glass row, or (on the live tray) a round glass button. */
.share-tile { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 6px 6px 12px; border-radius: 20px; background: var(--field-fill); box-shadow: inset 0 0 0 1px var(--hairline); transition: background .22s var(--ease); }
.share-tile > .i { width: 20px; height: 20px; color: var(--accent); }
.share-tile b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; }
.share-tile small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-tile .btn.text { height: 40px; }
.share-tile.on { background: var(--mint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.share-tile.on > .i, .share-tile.on b, .share-tile.on .btn.text { color: var(--on-mint); }
.share-tile.on small { color: color-mix(in srgb, var(--on-mint) 80%, transparent); }
.share-round { width: 50px; height: 50px; border-radius: 50%; border: 0; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); box-shadow: var(--rim), inset 0 0 0 1px var(--hairline); transition: transform .38s var(--pop); }
.share-round:active { transform: scale(.92); transition-duration: .11s; }
.share-round .i { width: 21px; height: 21px; }
.share-round.on { background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, var(--mint)), var(--mint)); color: var(--on-mint); box-shadow: var(--rim); }
/* Arrival ring (EtaRing): the teal fades lighter as it fills; the minutes roll. */
.eta-ring { position: relative; width: 76px; height: 76px; flex: none; }
.eta-ring.sm { width: 66px; height: 66px; }
.eta-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.eta-ring circle { fill: none; stroke-width: 6.5; stroke-linecap: round; }
.eta-ring .eta-track { stroke: var(--track); }
.eta-ring .eta-fill { stroke: var(--accent); stroke-dasharray: 100; transition: stroke-dashoffset .9s var(--decel); }
.eta-ring .eta-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.eta-ring .eta-num b { font-size: 24px; font-weight: 700; letter-spacing: -.6px; display: inline-block; font-variant-numeric: tabular-nums; }
.eta-ring.sm .eta-num b { font-size: 22px; }
.eta-ring .eta-num small { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.roll { animation: roll-in .42s var(--spring); }
@keyframes roll-in { from { transform: translateY(55%); opacity: 0; } }
/* A goal ring (the week against the weekly goal): a big number and a small line inside. */
.goal-ring { position: relative; width: 82px; height: 82px; flex: none; }
.goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.goal-ring .gr-track { stroke: var(--track); }
.goal-ring .gr-fill { stroke-dasharray: 100; transition: stroke-dashoffset .9s var(--decel); }
.goal-ring .gr-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; text-align: center; }
.goal-ring .gr-num b { font-size: 20px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.goal-ring .gr-num small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
/* Steps — Accepted, On the way, Arrived/On scene, Done — on a liquid track: the part behind you
   fills with a glowing teal, done steps get a tick, the current one pulses gently (StepDots). */
.steps { --n: 4; --at: 0; position: relative; display: flex; list-style: none; margin: 14px 0 0; padding: 0; }
.steps::before, .steps::after { content: ""; position: absolute; top: 9px; height: 6px; border-radius: 3px; left: calc(100% / var(--n) / 2); }
.steps::before { right: calc(100% / var(--n) / 2); background: var(--track); }
.steps::after { width: calc(100% / var(--n) * var(--at)); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 55%, transparent); transition: width .7s var(--ease); }
.steps li { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: -.05px; color: var(--faint); text-align: center; white-space: nowrap; }
.steps li span { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--step-face); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text) 12%, transparent); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.steps li span .i { width: 16px; height: 16px; }
.steps li.done span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.steps li.now span { background: var(--step-face); box-shadow: inset 0 0 0 7px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent-2) 28%, transparent); animation: step-pulse 2.8s var(--ease) infinite; }
.steps li.done, .steps li.now { color: var(--text); }
@keyframes step-pulse { 0%, 100% { box-shadow: inset 0 0 0 7px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent-2) 28%, transparent); } 50% { box-shadow: inset 0 0 0 7px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent-2) 28%, transparent); } }
/* Finding a mechanic: three rings spreading out (FindingRipple). */
.ripple { position: relative; width: 58px; height: 58px; flex: none; }
.ripple i { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); animation: ripple 2.4s var(--ease) infinite; }
.ripple i:nth-child(2) { animation-delay: .8s; }
.ripple i:nth-child(3) { animation-delay: 1.6s; }
.ripple b { position: absolute; inset: 35%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--step-face); }
@keyframes ripple { from { transform: scale(.25); opacity: .9; } to { transform: scale(1); opacity: 0; } }
/* A small rounded label (TonePill). */
.tone { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--mint); color: var(--on-mint); line-height: 1.3; white-space: nowrap; }
.tone .i { width: 13px; height: 13px; }
.tone.red { background: var(--danger-soft); color: var(--danger); }
.tone.amber { background: var(--warn-soft); color: var(--warn); }
.tone.green { background: var(--online-soft); color: var(--online); }
.tone.sos { background: var(--sos-soft); color: var(--sos); }
.tone.book { background: var(--book-soft); color: var(--book); }
.tone.purple { background: var(--direct-soft); color: var(--direct); }
.tone.gray { background: var(--surface-2); color: var(--muted); }
.tone.sponsored { background: var(--sponsored-soft); color: var(--sponsored); }
.tone.solid { background: var(--danger); color: var(--on-danger); }
.tone.lg { font-size: 12.5px; padding: 4px 10px; }

/* ============================================================== "Share my trip" public page (trip.html) */
.trip-page { overflow: hidden; background: var(--map-bg); }
.trip-map { position: fixed; inset: 0; z-index: 0; background: var(--map-bg); }
.trip-top {
  position: fixed; z-index: 10; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 16px 0 10px; border-radius: 31px;
}
.trip-logo { width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); flex: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--rim-tint), 0 6px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent); }
.trip-logo .i { width: 24px; height: 24px; }
.trip-top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trip-kicker { font-size: 12px; font-weight: 600; color: var(--muted); }
.trip-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--online); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 45%, transparent); animation: live 1.8s var(--ease) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 50%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.trip-tray {
  position: fixed; z-index: 10; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 560px;
  border-radius: var(--r-tray); padding: 18px 16px 14px; color: var(--text);
  background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom));
  animation: tray-in .56s var(--spring);
}
@keyframes tray-in { from { transform: translateY(40px); opacity: 0; } }
.trip-loading { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--muted); }
.trip-head { display: flex; align-items: center; gap: 14px; }
.trip-head-text { flex: 1; min-width: 0; }
.trip-head-text h1 { margin: 4px 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; }
.trip-head-text p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.trip-head .badge { background: var(--surface-2); color: var(--muted); height: auto; line-height: 1.5; padding: 2px 9px; font-size: 11.5px; }
.trip-head .badge.badge-accent { background: var(--mint); color: var(--on-mint); }
.trip-state-ic { width: 58px; height: 58px; border-radius: 34%; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.trip-state-ic .i { width: 28px; height: 28px; }
.trip-state-ic.ok { background: var(--online-soft); color: var(--online); }
.trip-state-ic.off { background: var(--surface-2); color: var(--muted); }
.pro-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 10px; border-radius: var(--r-tile); background: linear-gradient(180deg, var(--glass-strong-top), var(--glass-strong-bottom)); box-shadow: var(--rim); }
.pro-row .avatar { width: 40px; height: 40px; border: 2.5px solid var(--accent); }
.pro-text { flex: 1; min-width: 0; }
.pro-text b { display: block; font-size: 15px; font-weight: 700; }
.pro-text span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro-text .ic-star { width: 13px; height: 13px; color: var(--star); vertical-align: -2px; }
.trip-where { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.trip-where .i { width: 17px; height: 17px; color: var(--accent); }
.trip-foot { margin: 12px 0 0; font-size: 12px; color: var(--faint); line-height: 1.4; }
.trip-tray.ended .steps li.now span { animation: none; }
.pin-me { position: relative; }
.pin-me .pin-me-dot { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.pin-me .pin-me-pulse { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 35%, transparent); animation: me-pulse 2.6s var(--ease) infinite; }
.pin-van .pin-van-body { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom)); color: var(--on-accent); border: 3px solid #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 50%, transparent); }
.pin-van .pin-van-body .i { width: 22px; height: 22px; }

/* ============================================================== entrances + motion */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
/* A screen you just opened glides in; its first cards come in 40 ms apart (Rise). */
.view.enter > .page > *, .view.enter > .tour, .view.enter > .login-wrap { animation: rise .52s var(--decel) both; }
.view.enter > .page > :nth-child(2) { animation-delay: .04s; }
.view.enter > .page > :nth-child(3) { animation-delay: .08s; }
.view.enter > .page > :nth-child(4) { animation-delay: .12s; }
.view.enter > .page > :nth-child(5) { animation-delay: .16s; }
.view.enter > .page > :nth-child(6) { animation-delay: .2s; }
.view.enter > .page > :nth-child(7) { animation-delay: .24s; }
.view.enter > .page > :nth-child(n+8) { animation-delay: .28s; }
.view.enter > .map-screen { animation: fade .32s var(--ease) both; }
.view.enter .map-overlay-top > *, .view.enter .map-overlay-bottom > * { animation: rise .56s var(--decel) .06s both; }
.view.enter .board-sheet { animation: sheet-up .62s var(--spring) .05s both; }
.stagger > * { animation: rise .5s var(--decel) both; }
.stagger > :nth-child(2) { animation-delay: .04s; } .stagger > :nth-child(3) { animation-delay: .08s; } .stagger > :nth-child(4) { animation-delay: .12s; }
.stagger > :nth-child(5) { animation-delay: .16s; } .stagger > :nth-child(6) { animation-delay: .2s; } .stagger > :nth-child(7) { animation-delay: .24s; } .stagger > :nth-child(n+8) { animation-delay: .28s; }

/* Reduce Motion / "remove animations": movement becomes a plain fade, loops stop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .view.enter > .page > *, .view.enter > .tour, .view.enter .map-overlay-top > *, .view.enter .map-overlay-bottom > *, .stagger > *, .login-col #auth-head, .auth-card, .role-pick.big label, .roll, .msg, .bars div { animation: fade .2s ease both !important; animation-delay: 0s !important; }
  .sheet, .sheet-backdrop.center .sheet, .toast, .trip-tray, .view.enter .board-sheet { animation: fade .18s ease both !important; }
  .sheet-out, .sheet-leaving, .sheet-leaving.center .sheet-out { animation: fade-out .12s ease both !important; }
  .me-dot::before, .pin-me .pin-me-pulse, .sos-btn::after, .steps li.now span, .live-dot { animation-iteration-count: 1; }
  .ripple i { animation: none; opacity: .35; transform: scale(.8); }
  .spinner { animation: spin 1.6s linear infinite !important; }
}