*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* ============================================================================
   ConstructCo Design System — colors & type
   ----------------------------------------------------------------------------
   Single source of truth for color and typography tokens. Mirrors the values in
   the live app (web/app/globals.css and web/design/DESIGN-SYSTEM.md), plus the
   ops dashboard spec extensions.

   Usage: import this file at the top of any HTML mockup or component sandbox.
   The :root block defines raw tokens; the semantic block below maps element
   selectors (h1, p, code, etc.) to the type ramp.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ── Brand color ─────────────────────────────────────────────────────── */
  --primary:        #2F6BFF;  /* CTAs, active nav, links, seller pins */
  --primary-dark:   #1F54D6;  /* hover / pressed primary */
  --blue-tint:      #EAF1FF;  /* category badges, selected states, map zone fills */
  --blue-tint-2:    #F4F8FF;  /* nested card bg inside detail panels */

  /* ── Text / ink ──────────────────────────────────────────────────────── */
  /* Text ON the primary/accent fill. PINNED — deliberately no dark override: a blue button
     needs white text in BOTH themes. Button.svelte previously used var(--surface) here, which
     flipped to #121C36 in dark and rendered navy-on-blue (probed 2026-08-10 on /admin/tickets;
     latent on every primary button in dark). */
  --on-primary:     #FFFFFF;
  --ink:            #0E1726;  /* body text, headings */
  --ink-2:          #3B4757;  /* sub-headings, secondary body */
  --muted:          #6B7280;  /* secondary text, placeholders, inactive icons */
  /* WCAG AA at 12px: #A6AEB8 was 2.24:1 on white, half the required 4.5:1, and it is the
     caption colour on most of the app. #697079 clears it on BOTH surfaces captions sit on —
     5.01:1 on a white card, 4.67:1 on --bg. Do not lighten it back without re-checking both. */
  --muted-2:        #697079;  /* captions, disabled */

  /* Pinned light-mode ink for surfaces that stay light-glass in BOTH themes (e.g. the
     own-delivery sheet in SellerOrderDetailActions.svelte, same convention as
     ShopStatusSheet.svelte) — deliberately has NO dark-theme override below, so text on
     those surfaces never flips to a light color and goes invisible. */
  --glass-ink:      #0E1726;  /* pinned copy of light --ink */
  --glass-ink-2:    #3B4757;  /* pinned copy of light --ink-2 */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --bg:             #F5F7FA;  /* page background */
  --surface:        #FFFFFF;  /* cards, header, inputs, bottom nav */
  --card:           #F8F9FB;  /* subtle inset card on white surface */
  --line:           #E6EAF0;  /* borders, dividers */
  --card-border:    #E8EAF0;  /* border on --card */

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --danger:         #EF4444;  /* errors, badge counts, destructive */
  --success:        #16A34A;  /* accepted, delivered, order PIN, in stock */
  --warning:        #E65100;  /* delivery on the way, pending */

  /* ── Shop-status sheet gradient stops (liquid-glass CTA buttons) ─────── */
  /* These are the lighter gradient-top and darker gradient-bottom variants  */
  /* used only inside the ShopStatusSheet component's CTA button.            */
  --success-cta-top:  #22C55E;  /* active CTA gradient top (lighter green) */
  --danger-cta-dark:  #DC2626;  /* paused CTA gradient bottom (darker red) */
  --warning-cta-dark: #D97706;  /* closed CTA gradient bottom (darker amber) */
  --success-bg:       #F0FDF4;  /* active status tint bg */
  --danger-bg:        #FEF2F2;  /* paused status tint bg */
  --warning-bg:       #FFFBEB;  /* closed status tint bg (design's warning-bg) */

  /* ── Status badge pairs (background / text) ──────────────────────────── */
  --status-pending-bg:     #FEF9C3;
  --status-pending-fg:     #A16207;
  --status-accepted-bg:    #F0FDF4;
  --status-accepted-fg:    #22C55E;
  /* Text-safe accepted green. --status-accepted-fg is a CHIP colour: it sits on the
     --status-accepted-bg pastel and only ever carries a small label. As body/headline text on
     the light glass card it measures ~2.2:1, well under 4.5:1. Use this darker green wherever
     the accepted colour has to be READ as text (ActiveOrderStrip's statement card); keep
     --status-accepted-fg for fills and rules, where contrast doesn't apply. Flips back to the
     bright value in dark theme, where the pastel is the readable one. */
  --status-accepted-fg-strong: #15803D;
  --status-requested-bg:   #DBEAFE;
  --status-requested-fg:   #2563EB;
  --status-otw-bg:         #FEF3C7;  /* delivery on the way */
  --status-otw-fg:         #D97706;
  --status-completed-bg:   #DCFCE7;
  --status-completed-fg:   #16A34A;
  --status-cancelled-bg:   #FEE2E2;
  --status-cancelled-fg:   #DC2626;

  /* ── Service tiles (homepage 4-up) ───────────────────────────────────── */
  --svc-contracting-bg:    #FEF3C7;
  --svc-contracting-fg:    #D97706;
  --svc-plumbing-bg:       #DBEAFE;
  --svc-plumbing-fg:       #2563EB;
  --svc-electrical-bg:     #FCE7F3;
  --svc-electrical-fg:     #BE185D;
  --svc-painting-bg:       #D1FAE5;
  --svc-painting-fg:       #059669;
  /* Added 2026-09-16 with the Carpenter and Tile/Marble categories (Contracting removed —
     its pair is kept so an old row or a cached page never renders an undefined colour). */
  --svc-carpenter-bg:      #FFEDD5;
  --svc-carpenter-fg:      #EA580C;
  --svc-tile-bg:           #E0E7FF;
  --svc-tile-fg:           #4F46E5;

  /* ── Shadow ──────────────────────────────────────────────────────────── */
  --shadow-card:    0 1px 4px rgba(14, 23, 38, 0.06);
  --shadow-frame:   0 28px 70px rgba(15, 23, 42, 0.22);  /* phone mockup */

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-card:    12px;
  --radius-tile:    14px;   /* category badges, icon tiles */
  --radius-pill:    999px;
  --radius-frame:   44px;   /* phone-mockup body */

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --space-1:        4px;
  --space-2:        8px;    /* component-internal */
  --space-3:        12px;   /* carousel item gap */
  --space-4:        16px;   /* page padding, card padding */
  --space-5:        20px;
  --space-6:        24px;   /* section vertical gap */
  --space-8:        32px;
  --space-10:       40px;

  /* ── Safe-area insets (notch / home-bar — used as page padding across web/iOS/Android shells) ── */
  --safe-top:       env(safe-area-inset-top, 0px);
  --safe-bottom:    env(safe-area-inset-bottom, 0px);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  /* Duration scale — "tool, not toy": fast and functional */
  --dur-instant:    80ms;   /* @kind other */ /* press feedback, icon swap */
  --dur-fast:       120ms;  /* @kind other */ /* hover tint, opacity toggle */
  --dur-normal:     220ms;  /* @kind other */ /* page transitions, sheet slide, view-transition */
  --dur-slow:       360ms;  /* @kind other */ /* spring release, complex enter */
  --dur-emphasis:   500ms;  /* @kind other */ /* stamp, celebration, first-paint hero */

  /* Easing — two curves cover the system */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */ /* enter / appear — fast start, gentle land */
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */ /* morph / reflow — Material standard */

  /* Derived motion shortcuts */
  --transition-page:     var(--dur-normal) var(--ease-out);
  --transition-press:    var(--dur-instant) var(--ease-in-out);
  --transition-hover:    var(--dur-fast) var(--ease-in-out);
  --transition-sheet:    var(--dur-normal) var(--ease-out);
  --transition-spring:   var(--dur-slow) var(--ease-out);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-stack:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* type ramp */
  --t-hero:         18px;   /* page greeting / hero */
  --t-section:      14px;   /* section header */
  --t-eyebrow:      11px;   /* UPPERCASE category labels */
  --t-body:         14px;
  --t-caption:      12px;
  --t-meta:         10px;   /* MRP strikethrough, deep meta */

  --w-regular:      400;  /* @kind font */
  --w-medium:       500;  /* @kind font */
  --w-semibold:     600;  /* @kind font */
  --w-bold:         700;  /* @kind font */

  --tracking-eyebrow: 0.08em;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  /* ── Glass redesign system (mobile app screens) ──────────────────────── */
  /* Locked type scale, by role. Working screens top out at Title;
     Display is reserved for moment screens (login, signup). */
  --t-display:    40px;   /* login / signup hero only */
  --t-title:      22px;   /* page headers — order detail, checkout */
  --t-card:       17px;   /* card / section titles */
  --t-body-lg:    15px;   /* primary field / row text */
  --t-input:      16px;   /* MIN size for any focusable input — below this iOS Safari auto-zooms */
  --t-body-sm:    12.5px; /* descriptions, secondary meta */
  --t-label:      10px;   /* mono UPPERCASE labels — BILL DETAILS, I WANT TO */
  --t-figure:     27px;   /* mono totals / amounts */
  --w-extrabold:  800;  /* @kind font */
  --tracking-display: -0.04em;
  --tracking-title:   -0.02em;

  /* Glass materials — frosted surfaces over the blue ambient */
  --ambient-base: #D8E4FB;                 /* screen bg the ambient sits on */
  --glass-card:   rgba(255,255,255,.82);   /* working-screen cards */
  --glass-field:  rgba(255,255,255,.5);    /* inputs, dropdown buttons */
  --glass-header: rgba(214,228,255,.5);    /* sticky headers */
  --glass-nav:    rgba(214,228,255,.56);   /* bottom nav */
  --glass-modal:  rgba(255,255,255,.16);   /* floating moment-screen modal */
  --glass-edge:   rgba(255,255,255,.85);   /* lit 1px border */
  --glass-sheen:  rgba(255,255,255,.5);    /* top-highlight gradient start */
  --glass-blur:   blur(24px) saturate(1.8);  /* @kind other */
  --glass-shadow: 0 14px 40px rgba(20,40,90,.18);

  /* Per-page DARK conversions of the glass family (see the NOTE in the dark block below: the
     glass family stays light globally; a page opts in under [data-theme="dark"]). CONSTANTS —
     nothing reads these unless a page assigns them inside a dark-scoped selector, so declaring
     them changes no screen. Values are the /search mockup's own dark block and dark rules,
     design/pages/search/concept-final.html :43-55 (glass), :120-122 (controls, header),
     :130 (error), :156 (full qty), :169 (in-cart) — "same values orders/[id] uses". */
  --dark-glass-card:          rgba(18,28,54,.66);
  --dark-glass-edge:          rgba(255,255,255,.12);
  --dark-glass-sheen:         rgba(255,255,255,.05);
  --dark-glass-header:        rgba(9,16,34,.55);
  --dark-card-inset:          inset 0 1px 1px rgba(255,255,255,.08);  /* orders/[id] card inset */
  --dark-header-inset:        inset 0 1px 1px rgba(255,255,255,.06);
  --dark-control-fill:        rgba(255,255,255,.08);  /* field / chip / sort pill */
  --dark-control-edge:        rgba(255,255,255,.14);
  --dark-control-clear:       rgba(255,255,255,.14);  /* search field × button */
  --dark-error-fill:          rgba(239,68,68,.14);
  --dark-success-fill:        rgba(22,163,74,.16);    /* in-cart pill */
  --dark-success-fade:        rgba(22,163,74,.18);    /* full-qty box gradient end */

  /* Seller Orders glass — additional surface tokens */
  --glass-tab-bg:           rgba(225,235,255,.55);  /* inactive filter pill */
  --glass-nav-tab-active:   rgba(234,241,255,.7);   /* active bottom-nav tab fill */
  --glass-pin-bg:           rgba(220,252,231,.7);   /* pickup-PIN green tint */
  --glass-pin-border:       rgba(22,163,74,.3);     /* pickup-PIN border */
  --glass-danger-btn-bg:    rgba(255,240,240,.66);  /* Decline/danger glass button bg */
  --glass-danger-btn-border:rgba(239,68,68,.5);     /* Decline/danger glass button border */
  --glass-muted-btn-bg:     rgba(255,255,255,.62);  /* View details / muted glass button */

  /* Login moment-screen orb accents — multi-colour orbs + OTP active glow (login only) */
  --glass-teal:   #16D0C4;
  --glass-violet: #7B5BDC;

  /* ── Overlays — the ONE scrim + the ONE sheet radius ──────────────────────
     Consumed by src/lib/components/Overlay.svelte (::backdrop). Before these
     existed, every modal hard-coded its own: 10 different scrim values across 3
     base inks (rgba(0,0,0,.4) / rgba(8,12,20,.44) / rgba(14,23,38,.2….62)) and 6
     bottom-sheet radii (16/18/20/24/26/28px). .44 is the median and matches the
     most recently designed overlays. See design/DESIGN-SYSTEM.md § Overlays. */
  --scrim:        rgba(14,23,38,.44);   /* modal scrim — ::backdrop only */
  --sheet-radius: 26px;                 /* bottom-sheet top corners */

  /* ── Order Confirmed moment screen ─────────────────────────────────────── */

  /* Confirmed-screen specific values */
  --map-dark-stop:  #16306e;              /* map gradient dark anchor (navy) */
  --conf-periwinkle: #9DB8FF;             /* confetti periwinkle accent */

  /* ── Design-system merge additions (ds-20260620 handoff) ─────────────── */
  /* Neutral chrome — icon/avatar ink + hairlines on a dimmed backdrop beneath overlays */
  --ink-chrome:     #5A6472;
  --chrome-tint:    #EDEFF3;
  --chrome-line:    #DFE3EA;
  --focus-ring:     #9AA3B2;  /* neutral focus outline on glass (vs blue --primary) */

  /* Status-reactive ambient gradient stops (RGB channel pairs, composited with alpha) */
  --amb-active-1:   34,197,94;
  --amb-active-2:   22,163,74;
  --amb-paused-1:   239,68,68;
  --amb-paused-2:   220,38,38;
  --amb-closed-1:   245,158,11;
  --amb-closed-2:   217,119,6;

  /* ── Working-screen glass surface-detail (Checkout (Real) — flip in dark) ─ */
  /* These carry the checkout/glass card vocabulary; their dark values live in
     the [data-theme="dark"] block below so every screen flips from one source. */
  --blue-deep:      #1D44C4;  /* glass tile / CTA gradient bottom */
  --blue-ink:       #15389C;  /* amount / link ink on glass */
  --glass-fill:     linear-gradient(160deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.68) 100%);
  --glass-border:   0.5px solid rgba(255,255,255,.85);
  --divider:        rgba(13,33,92,.12);
  --divider-soft:   rgba(13,33,92,.1);
  --row-active:     rgba(255,255,255,.4);
  --thumb-fill:     linear-gradient(135deg, rgba(255,255,255,.7), rgba(220,228,240,.5));
  --thumb-border:   rgba(255,255,255,.7);
  --thumb-ink:      #7D93B5;
  --field-fill:     rgba(255,255,255,.55);
  --field-border:   rgba(13,33,92,.2);
  --paybar-fill:    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  --paybar-border:  rgba(255,255,255,.9);

  /* ── Checkout (Real) ambient scene — full-bleed blue backdrop + drift orbs ── */
  /* Page-scene gradient + orb fills; dark variants live in the dark block below. */
  --scene-checkout:        radial-gradient(120% 80% at 16% 6%, #6F9BFF 0%, rgba(111,155,255,0) 52%), radial-gradient(130% 90% at 90% 96%, #16379E 0%, rgba(22,55,158,0) 58%), linear-gradient(160deg, #1D44C4 0%, #2657ED 48%, #2F6BFF 100%);
  --scene-checkout-orb-a:  radial-gradient(circle, rgba(170,200,255,.5) 0%, rgba(170,200,255,0) 70%);
  --scene-checkout-orb-b:  radial-gradient(circle, rgba(120,160,255,.45) 0%, rgba(120,160,255,0) 70%);

  /* ── Notifications (liquid-glass) — page palette + ambient canvas ──────── */
  /* Namespaced so the page hits 1-to-1 without overriding global ink/blue/glass. */
  --notif-ink:        #0B1F3A;
  --notif-ink-soft:   rgba(11,31,58,.58);
  --notif-ink-faint:  rgba(11,31,58,.40);
  --notif-ink-ghost:  rgba(11,31,58,.30);
  --notif-blue:       #0A6CFF;
  --notif-blue-deep:  #0048C4;
  --notif-amber:      #F06A00;
  --notif-amber-ink:  #D65A00;
  --notif-glass-fill: rgba(255,255,255,.52);
  --notif-glass-read: rgba(255,255,255,.34);
  --notif-hairline:   rgba(11,31,58,.07);
  --notif-field-1:    #DCE9FF;
  --notif-field-2:    #EAF2FF;
  --notif-field-3:    #EEF5FF;
  --notif-orb-1:      #6FA8FF;
  --notif-orb-2:      #2E7BFF;
  --notif-orb-3:      #2F72E6;
  --notif-orb-4:      #9EC8FF;
}

/* ============================================================================
   GLOBAL DARK THEME  —  one switch flips every token-driven screen.
   Activated by <html data-theme="dark"> (set by the no-flash script in app.html
   from localStorage['cc-theme']). Light is the default; only the deltas live here.
   Base palette = DESIGN_SYSTEM_README canonical buyer map; surface-detail values
   = Checkout (Real) dark block. Status colors stay light pastel chips by design.
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Base palette */
  --bg:             #0B1430;
  --surface:        #121C36;
  --card:           #0E1830;
  --line:           rgba(255,255,255,.10);
  --ink:            #EAF1FF;
  --ink-2:          #AEBFE0;
  --muted:          #8294B8;
  --muted-2:        #7889AF;  /* 5.03:1 on --card, 5.18:1 on --bg (was #6F80A6, 4.46:1 on --card) */
  --blue-tint:      #1A2A52;
  --blue-tint-2:    #16233F;
  --ambient-base:   #091022;
  /* --primary / --primary-dark and all --status-*/--svc-* pairs stay unchanged */
  /* …with one exception: the text-safe accepted green is a LIGHT-theme correction. On the dark
     card the bright #22C55E is already the readable one and #15803D is far too dark. */
  --status-accepted-fg-strong: #22C55E;

  /* Working-screen glass surface-detail */
  --blue-ink:       #9DB8FF;
  --glass-fill:     linear-gradient(160deg, rgba(40,54,96,.60) 0%, rgba(20,30,62,.46) 100%);
  --glass-border:   0.5px solid rgba(255,255,255,.16);
  --divider:        rgba(255,255,255,.1);
  --divider-soft:   rgba(255,255,255,.08);
  --row-active:     rgba(255,255,255,.07);
  --thumb-fill:     linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  --thumb-border:   rgba(255,255,255,.14);
  --thumb-ink:      #A6BBDF;
  --field-fill:     rgba(255,255,255,.06);
  --field-border:   rgba(255,255,255,.18);
  --paybar-fill:    linear-gradient(180deg, rgba(14,22,48,.72), rgba(8,14,34,.93));
  --paybar-border:  rgba(255,255,255,.12);

  /* Checkout (Real) ambient scene — dark */
  --scene-checkout:        radial-gradient(120% 80% at 16% 6%, #264FA6 0%, rgba(38,79,166,0) 54%), radial-gradient(130% 90% at 90% 96%, #0A1126 0%, rgba(10,17,38,0) 58%), linear-gradient(160deg, #060B1C 0%, #0B1530 48%, #0F2049 100%);
  --scene-checkout-orb-a:  radial-gradient(circle, rgba(96,146,255,.42) 0%, rgba(96,146,255,0) 70%);
  --scene-checkout-orb-b:  radial-gradient(circle, rgba(74,116,236,.36) 0%, rgba(74,116,236,0) 70%);

  /* Notifications dark — DERIVED (no dark mockup supplied for this screen yet);
     refine against a real dark notification mockup when one lands. */
  --notif-ink:        #EAF1FF;
  --notif-ink-soft:   rgba(234,241,255,.62);
  --notif-ink-faint:  rgba(234,241,255,.44);
  --notif-ink-ghost:  rgba(234,241,255,.34);
  --notif-blue:       #6FA8FF;
  --notif-blue-deep:  #2E7BFF;
  --notif-amber:      #F89A4A;
  --notif-amber-ink:  #F06A00;
  --notif-glass-fill: rgba(40,54,96,.55);
  --notif-glass-read: rgba(30,42,76,.42);
  --notif-hairline:   rgba(255,255,255,.08);
  --notif-field-1:    #0B1530;
  --notif-field-2:    #0A1126;
  --notif-field-3:    #0E1830;
  --notif-orb-1:      #264FA6;
  --notif-orb-2:      #1A3A86;
  --notif-orb-3:      #16306E;
  --notif-orb-4:      #1F4391;

  /* Overlays — dark needs a heavier wash: the light scrim reads too weak against
     the dark surfaces behind it. --sheet-radius is geometry, so it does not flip. */
  --scrim:          rgba(4,8,20,.62);

  /* NOTE: the moment-screen --glass-card/-field/-header/-nav/-modal/-edge/-sheen
     family keeps its light values until those pages are converted; add their dark
     values per-page (DESIGN_SYSTEM_README §Dark conversion). */
}

/* ============================================================================
   Semantic element styles
   These map raw HTML elements to the type ramp so unstyled markup looks right.
   ============================================================================ */

html, body {
  margin: 0;
  font-family: var(--font-stack);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .t-hero {
  font-size: var(--t-hero);
  font-weight: var(--w-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.2px;
  color: var(--ink);
}

h2, .t-section {
  font-size: var(--t-section);
  font-weight: var(--w-semibold);
  line-height: var(--leading-snug);
  color: var(--ink);
}

h3, .t-card-title {
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.t-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
}

p, .t-body {
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--leading-normal);
  color: var(--ink);
}

small, .t-caption {
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  color: var(--muted);
}

.t-meta {
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  color: var(--muted);
}

.t-price {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  color: var(--ink);
}

.t-price-mrp {
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  color: var(--muted);
  text-decoration: line-through;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { color: var(--primary-dark); }

/* Inputs never render below 16px — iOS Safari auto-zooms (and shifts/overflows the
   layout) on focus of any smaller field. Safety net for fields that set no explicit
   size; component-scoped rules must still use var(--t-input). Enforced by input-zoom:check. */
input, textarea, select {
  font-size: var(--t-input);
}

code, kbd, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ============================================================================
   Status badge utility
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--w-semibold);
  line-height: 1;
}
.badge--pending    { background: var(--status-pending-bg);   color: var(--status-pending-fg); }
.badge--accepted   { background: var(--status-accepted-bg);  color: var(--status-accepted-fg); }
.badge--requested  { background: var(--status-requested-bg); color: var(--status-requested-fg); }
.badge--otw        { background: var(--status-otw-bg);       color: var(--status-otw-fg); }
.badge--completed  { background: var(--status-completed-bg); color: var(--status-completed-fg); }
.badge--cancelled  { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }

/* ============================================================================
   Surface utilities
   ============================================================================ */

.cc-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.cc-card--inset {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }