/* Design 2 proposals only. Does not alter the V04 booking flow.
   --border-control: text fields, selects, switches (must stay clearly visible).
   --border-choice: unselected option tiles (dates, times, packages, chips, rows); selected = 2px ink. */
@font-face{font-family:Figtree;src:url('/panda/assets/figtree-latin.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
/* "$" only, from Plus Jakarta Sans (decided 2026-09-25): Figtree's "$" has short stubs and can read as an S.
   unicode-range limits this face to U+0024, so every other character stays Figtree. Loaded from Google Fonts
   for the prototype (OFL); self-host this file before launch. */
@font-face{font-family:Figtree;src:url('https://fonts.gstatic.com/l/font?kit=LDIoaomQNQcsA88c7O9yZ4KMCoOg4Jo02SuCgcHaaw&skey=ca4b9e62a7d41df5&v=v12') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0024}
:root{
  --font-body:Figtree,system-ui,sans-serif;
  --surface-page:light-dark(#f7f7f5, #2e2e31);--surface-panel:light-dark(#fff, #1f1f21);--surface-subtle:light-dark(#f0f0ed, #2e2e31);
  --surface-raised:light-dark(var(--surface-panel), #2e2e31);   /* what floats over cards (tips, the Undo toast): white in light, a step lighter than cards in dark */
  --surface-ground:light-dark(var(--surface-page), #141415);   /* the page itself; --surface-page is also the fill inside a card (the price box, Rare find, hovers), which goes lighter than the card in dark (2026-10-28) */
  --text-primary:light-dark(#222, #f2f2f0);--text-secondary:light-dark(#62666d, #a1a1a6);   /* ink: Airbnb's (2026-10-12; was #222429). Grey: ours, 5.4:1 on the page; Airbnb's #6c6c6c fell under 4.5:1 on the segmented track and hover fills */
  --border-divider:light-dark(#e5e5e1, #38383a);--border-control:light-dark(#767b83, #8e8e93);--border-choice:light-dark(#d1d1cd, #545458);
  --brand-blue:#1469c9;--brand-blue-hover:#1058ab;--surface-blue:light-dark(#eff6ff, #0f2742);
  --action-primary:var(--text-primary);--action-hover:#080a0d;--action-foreground:#fff;
  --focus-ring:light-dark(var(--brand-blue), #4c9aff);--selection-outline:var(--text-primary);
  --status-error:light-dark(#b42318, #ff6961);--status-success:light-dark(#16643b, #4cc97b);--surface-error:light-dark(#fff4f2, #3a1512);
  --radius-pill:999px;
  /* Corner scale (decided 2026-10-01, the Cleaner system board): corners follow size. The roles below use it;
     16 and 20 cards stay available (--radius-card-tight, --radius-card-soft) for a screen that needs them. */
  --radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-16:16px;--radius-18:18px;--radius-20:20px;--radius-32:32px;
  --radius-card:var(--radius-18);        /* every card (was 20; Airbnb's 24 was tried on 2026-10-12 and taken out: too round) */
  --radius-card-tight:var(--radius-16);  /* option: a sharper card */
  --radius-card-soft:var(--radius-20);   /* option: a softer card */
  --radius-tile-lg:var(--radius-16);     /* big tiles that hold a lot: packages, Help me choose, Pro cards in Change Pro */
  --radius-field:var(--radius-12);
  --radius-button-rounded:var(--radius-10);  /* kit option, not used by default: a rounded full-width button */
  --radius-button-small:var(--radius-8);     /* kit option, not used by default: a small rounded button */
  --radius-sheet:var(--radius-32);           /* pop-ups on phones */
  --radius-panel:var(--radius-12);           /* fills inside a card: Rare find, earn-back, notices, savings */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  /* Spacing roles (2026-10-01, measured on the booking flow at 402pt; margins and padding from Airbnb's search sheet on
     2026-10-12: a card's words start 36pt from the screen's edge). Change a role here and every screen follows. */
  --gutter:var(--space-3);          /* 12 · side margin of every screen (16 before 2026-10-12) */
  --gap-cards:var(--space-3);       /* 12 · between stacked cards (the builder) */
  --gap-heading:var(--space-3);     /* 12 · a section heading to its card */
  --gap-section:var(--space-8);     /* 32 · the end of one card to the next section's heading */
  --pad-card:var(--space-6);        /* 24 · inside a card (Review, Confirm and pay; 20 before 2026-10-12) */
  --pad-card-step:var(--space-6);   /* 24 · inside an open step card, all round (18 at the sides, 22 above, 20 below before) */
  --pad-row:var(--space-4);         /* 16 · above and below a row in a card, with a hairline between rows */
  --type-title:1.75rem;--leading-title:2.125rem;
  --type-section:1.25rem;--leading-section:1.625rem;
  --type-card:1.125rem;--leading-card:1.5rem;
  --type-body:1rem;--leading-body:1.5rem;
  --type-meta:.875rem;--leading-meta:1.25rem;
  --type-total:1.125rem;--leading-total:1.5rem;
  --type-due:1.625rem;--leading-due:2rem;   /* 26/32 · the total you pay, on Confirm and pay (2026-10-12: 28pt was "overpowering" on a phone) */
  --type-ask:1.375rem;--leading-ask:1.75rem;   /* 22/28 · a choice the customer has to make, inside a card (Confirm and pay's "Pick member or regular", 2026-10-12) */
  --motion-feedback:150ms;--motion-enter:200ms;--motion-selection:240ms;--motion-toast:220ms;--ease-out:cubic-bezier(.2,0,0,1);
  --press-in:60ms;--press-out:200ms;--press-big:.97;--press-small:.95;--press-dim:.5;   /* a press: in at once, back over 200ms; cards and big buttons 97%, small tiles 95%, links 50% (DESIGN.md › Press and tap areas, 2026-10-27) */
  /* Springs (DESIGN.md › Motion, 2026-10-27): what you touch moves on a spring, two numbers (response · damping) that SwiftUI
     and Compose take as they are. Here as CSS linear() easings worked out from those numbers by scripts/make-springs.mjs
     (rerun it to change one). A pop-up let go after a drag: 0.3 s · 0.8 from the finger's speed, in popup.js. */
  --spring-sheet:linear(0, 0.0213, 0.0707, 0.1366, 0.211, 0.2881, 0.3642, 0.437, 0.5048, 0.567, 0.6233, 0.6737, 0.7184, 0.7577, 0.7922, 0.8222, 0.8482, 0.8707, 0.89, 0.9067, 0.9209, 0.933, 0.9434, 0.9522, 0.9596, 0.966, 0.9713, 0.9759, 0.9797, 0.983, 0.9857, 0.988, 0.9899, 0.9915, 0.9929, 0.9941, 0.995, 0.9958, 0.9965, 0.9971, 0.9976, 0.998, 0.9983, 0.9986, 0.9988, 0.999, 0.9992, 0.9993, 0.9994, 1);--spring-sheet-ms:490ms;   /* 0.3 s · 1: a pop-up or sheet opened or closed by a tap (Compose stiffness 439) */
  --spring-move:linear(0, 0.0123, 0.0425, 0.0849, 0.1353, 0.1904, 0.2479, 0.3057, 0.3626, 0.4176, 0.4701, 0.5195, 0.5658, 0.6087, 0.6482, 0.6845, 0.7176, 0.7478, 0.7751, 0.7997, 0.8219, 0.8419, 0.8598, 0.8758, 0.89, 0.9028, 0.9141, 0.9242, 0.9332, 0.9411, 0.9481, 0.9543, 0.9598, 0.9647, 0.969, 0.9728, 0.9761, 0.979, 0.9816, 0.9839, 0.9859, 0.9876, 0.9892, 0.9905, 0.9917, 0.9927, 0.9936, 0.9944, 0.9951, 0.9957, 0.9963, 0.9968, 0.9972, 0.9975, 0.9978, 0.9981, 0.9984, 0.9986, 0.9987, 0.9989, 0.999, 0.9992, 0.9993, 0.9994, 0.9994, 1);--spring-move-ms:650ms;   /* 0.4 s · 1: a move: the tabs' indicator, a page sliding in (Compose stiffness 247) */
  --surface-glass:light-dark(rgb(255 255 255 / 88%), rgb(28 28 30 / 86%));--border-glass:light-dark(rgb(255 255 255 / 95%), rgb(255 255 255 / 10%));--text-on-glass:light-dark(#50545b, #aeaeb2);
  --elite-accent:light-dark(#805600, #d9a441);
  --shadow-selection:0 2px 8px light-dark(rgb(34 36 41 / 10%), rgb(0 0 0 / 50%));
  --shadow-float:0 8px 28px light-dark(rgb(34 36 41 / 7%), rgb(0 0 0 / 50%));
  /* Decided 2026-09-24: elevation, choices, bars and tips. */
  --shadow-card:0 0 0 1px light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 5%)),0 0 18px light-dark(rgb(0 0 0 / 7%), transparent);    /* top-level cards: even on all four sides (no offset) */
  /* Card edges (the surface kit, 2026-10-01): the default is the shadow above on the grey page. On a white page cards use
     the crisper shadow; the stroke is an option, a light 1px edge with no shadow. Set one on a container to switch. */
  --shadow-card-white:0 0 0 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 5%)),0 0 20px light-dark(rgb(0 0 0 / 8%), transparent);
  --stroke-card:0 0 0 1px light-dark(#dcdcd8, #38383a);
  --shadow-head:0 1px 0 light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 7%)),0 6px 16px light-dark(rgb(0 0 0 / 6%), transparent);        /* sticky booking header, once scrolled */
  --shadow-bar:0 -1px 0 light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 7%)),0 -10px 28px light-dark(rgb(0 0 0 / 7%), transparent);      /* docked bottom booking bar */
  --shadow-tip:0 0 0 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 8%)),0 6px 22px light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 60%));      /* the tip pill and the Undo toast (2026-10-26; 0 1px 2px 6% + 0 8px 28px 12% before) */
  --shadow-overlay:0 0 0 1px light-dark(transparent, rgb(255 255 255 / 7%)),0 20px 60px light-dark(rgb(0 0 0 / 24%), rgb(0 0 0 / 60%)),0 0 0 1px light-dark(rgb(0 0 0 / 4%), transparent);  /* pop-ups, over the dimmed page */
  --scrim:light-dark(rgb(23 26 32 / 34%), rgb(0 0 0 / 55%));                                               /* the dim behind a pop-up (blurred 4px) */
  /* Shadow levels (2026-10-01), lowest to highest. 1 Card: --shadow-card (--shadow-card-white on a white page).
     2 Bars: --shadow-head (top bar once content scrolls under it), --shadow-bar (docked bottom bar).
     3 Floating: --shadow-tip (tips; the Undo toast). 4 Overlay: --shadow-overlay on the pop-up, over --scrim. */
  --radius-choice:var(--radius-12);  /* small tiles: time of day, start times, days, extras and option rows (was 16) */
  --surface-track:light-dark(#e9e9e6, #2e2e31);                                                  /* segmented control track */
  --surface-unavailable:light-dark(#f0f0ed, #262628);
  --surface-bar:light-dark(rgb(255 255 255 / 74%), rgb(28 28 30 / 80%));                                     /* frosted bar; solid fallback below */
  --text-on-bar:light-dark(#3f4248, #c7c7cc);
  --text-disabled:light-dark(#9a9da3, #636366);      /* switched-off controls and locked steps only (exempt from contrast rules). Placeholders and days or times you can't book use --text-secondary (accessibility audit, 2026-10-05) */
  --icon-muted:light-dark(#b3b5b9, #5a5a5e);         /* inherited inclusions, disabled icons */
  --surface-hover:light-dark(#e8e8e4, #3c3c3f);      /* hover on subtle surfaces */
  --surface-elite:light-dark(#faf3e3, #2a2210);      /* Elite pill background */
  --switch-on:var(--brand-blue); /* switch track when on (decided 2026-09-29): ink was too close to the grey off track */
  --switch-off:light-dark(#8a8d93, #76767b);         /* switch track when off: 3.3:1 on white, so the off state stays visible (WCAG 1.4.11) */
}
/* Main forward action: Panda blue (decided 2026-09-24). data-action="ink" is kept only to compare. */
body[data-action="blue"]{--action-primary:var(--brand-blue);--action-hover:var(--brand-blue-hover);--action-press:#0c4a91}
/* Ink buttons (black in light, white in dark, like Uber), on trial (2026-10-28, ideation-ink-buttons.html): the main
   action takes the ink, its text the colour that sits on ink. */
body[data-action="ink"]{--action-primary:var(--text-primary);--action-hover:var(--ink-hover);--action-press:var(--ink-press);--action-foreground:var(--text-on-ink)}

:root{--status-warning:light-dark(#805600, #e8b04b);--surface-warning:light-dark(#fff6dd, #2d2410);--surface-success:light-dark(#edf7f0, #0f2a1b);--surface-info:light-dark(#eff6ff, #0f2742);--status-info:light-dark(#1058ab, #6aaeff);--icon-small:16px;--icon-medium:20px;--icon-large:24px;--control-hit:44px}

/* Colours that used to be written straight into the booking's CSS (Dark Mode round 1, 2026-10-28): the same light values,
   now tokens, so each has a dark partner below. Text on an ink fill, the frosted bar's edge and pill, the pop-up's badge,
   the studio's page and the phone's home bar, the caption on a photo, what a press mixes in, the tabs' thumb, a hover
   edge, the skeleton's shine, Apple's pay button, the Elite hover, the ink hover, the Help me choose dial's needle. */
:root{--text-on-ink:light-dark(#fff, #111);--edge-glass:light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 8%));--surface-on-glass:light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 8%));--text-on-pill:light-dark(#2b2e33, #e5e5ea);--surface-badge:light-dark(#f3f7fd, #0f2742);--studio-page:light-dark(#ecece9, #141415);--home-indicator:light-dark(#111, #fff);--surface-caption:light-dark(rgb(255 255 255 / 92%), rgb(28 28 30 / 88%));--press-mix:light-dark(#000, #fff);--surface-thumb:light-dark(#fff, #636366);--border-hover:light-dark(#b3b3ae, #6e6e73);--skeleton-shine:light-dark(#f7f7f5, #3a3a3c);--wallet-button:light-dark(#000, #fff);--wallet-ink:light-dark(#fff, #000);--surface-elite-hover:light-dark(#f6ecd6, #352a14);--ink-hover:light-dark(#080a0d, #e0e0dd);--ink-press:light-dark(#000, #cdcdca);--gauge-needle:light-dark(#222429, #f2f2f0);--car-lift:radial-gradient(58% 42% at 50% 64%, light-dark(transparent, rgb(255 255 255 / 16%)), transparent 72%)}
/* The Pro's car on the On the way map (MotionKit.car()): dark greys in light, a white car in dark, so it stays clear on a
   dark map (the user, 2026-10-28, ideation-dark-car.html: "for the dark mode, it will be the white car"). The glass stays
   darker than the body; the lights don't change. The apps: the marker's image with an Any/Dark version. */
:root{--car-body:light-dark(#2e3238, #c3c7cd);--car-hood:light-dark(#3a3f46, #d3d6db);--car-roof:light-dark(#454a52, #e2e4e7);--car-glass:light-dark(#14171b, #4b5058)}

/* ---- Light and dark (Dark Mode, built 2026-10-28; DESIGN.md › Light and dark) ----
   Every colour above with two values is light-dark(light, dark): one list, two appearances. A page picks with
   html[data-theme]: "auto" follows the phone's own setting (the booking; no switch in the app), "dark" forces dark
   (boards), none or "light" stays light. Dark: a dark grey page (#141415), cards #1f1f21, fills, chips and tips #2e2e31,
   no shadows (a faint edge), off-white text, ink fills turned light, brighter status colours, Panda blue buttons kept,
   Apple Pay white. */
:root{color-scheme:light}
:root[data-theme=auto]{color-scheme:light dark}
:root[data-theme=dark]{color-scheme:dark}
/* Pictures with a dark version (2026-10-28; DESIGN.md › Light and dark). Icons draw in the text colour, so they switch
   on their own. A picture drawn in a fixed ink can't: it has a second file beside it, name-dark.svg, shown in dark by the
   same choice as color-scheme above. Today: the Panda One logo and the Panda Hub logo (#222429, dark #F2F2F0) and the
   select arrow. A new logo or picture gets its dark file and its lines here. The apps: an Any/Dark image set (iOS),
   drawable-night (Android). */
:root{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2362666D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme=dark]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A1A1A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme=dark] img[src$="panda-one.svg"]{content:url(/panda-design-2/panda-one-dark.svg)}
:root[data-theme=dark] img[src$="/v01/assets/logo.svg"]{content:url(/landing-pages/v01/assets/logo-dark.svg)}
@media (prefers-color-scheme:dark){
  :root[data-theme=auto]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A1A1A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  :root[data-theme=auto] img[src$="panda-one.svg"]{content:url(/panda-design-2/panda-one-dark.svg)}
  :root[data-theme=auto] img[src$="/v01/assets/logo.svg"]{content:url(/landing-pages/v01/assets/logo-dark.svg)}
}

/* ---- More contrast (built 2026-10-28; DESIGN.md › Light and dark; board ideation-contrast.html, round 2) ----
   When the phone asks for more contrast (iPhone: Increase Contrast; Android: High contrast text; the web:
   prefers-contrast: more), these tokens take stronger values, in light and in dark: grey text 7:1 or more, a field's edge
   and the switch stronger, status colours a step stronger, solid bars instead of glass. Outlines, card edges and the lines
   between rows stay as they are (the user: "we have a background and we have a shadow"). Only for people who turn the
   setting on; it follows the same choice as dark: a page that follows the phone (data-theme="auto") gets it, and
   html[data-contrast=more] forces it (boards). The apps: the "increased contrast" variants of the same colours. */
:root[data-contrast=more]{
    --text-secondary:light-dark(#4b4f56, #c7c7cc);--text-on-bar:light-dark(#2f3237, #d8d8dc);--text-on-glass:light-dark(#2f3237, #d8d8dc);
    --border-control:light-dark(#55595f, #aeaeb2);--switch-off:light-dark(#6e7177, #8e8e93);
    --status-success:light-dark(#0f5230, #6fdb98);--status-info:light-dark(#0b4a92, #9cc9ff);--status-warning:light-dark(#664400, #f2c86e);--status-error:light-dark(#8f1b12, #ff9a94);--elite-accent:light-dark(#664400, #ebc06a);
    --surface-bar:light-dark(#fff, #1c1c1e);--surface-glass:light-dark(#fff, #1c1c1e);--surface-caption:light-dark(#fff, #1c1c1e)}
@media (prefers-contrast:more){
  :root[data-theme=auto]{
    --text-secondary:light-dark(#4b4f56, #c7c7cc);--text-on-bar:light-dark(#2f3237, #d8d8dc);--text-on-glass:light-dark(#2f3237, #d8d8dc);
    --border-control:light-dark(#55595f, #aeaeb2);--switch-off:light-dark(#6e7177, #8e8e93);
    --status-success:light-dark(#0f5230, #6fdb98);--status-info:light-dark(#0b4a92, #9cc9ff);--status-warning:light-dark(#664400, #f2c86e);--status-error:light-dark(#8f1b12, #ff9a94);--elite-accent:light-dark(#664400, #ebc06a);
    --surface-bar:light-dark(#fff, #1c1c1e);--surface-glass:light-dark(#fff, #1c1c1e);--surface-caption:light-dark(#fff, #1c1c1e)}
}