/*
 * Auspicious Journeys design system ("Window Seat"). Tokens and every shared component.
 * Source of truth: assets/DESIGN.md. Surfaces never type a hex value: use the tokens below.
 * Sections: 1 tokens . 2 themes and grounds . 3 base . 4 type . 5 layout . 6 buttons . 7 fields
 * 8 choice . 9 status . 10 surfaces . 11 trip . 12 lists . 13 money . 14 tables . 15 data
 * 16 progress . 17 people . 18 overlays . 19 feedback . 20 chat . 21 shells . 22 website
 * 23 brand . 24 map . 25 motion . 26 print
 */

/* ============================== 1. Tokens ============================== */
:root {
  /* raw colour (DESIGN 4.1). Owner feedback 12-13/10/2026: "too green". Every surface is now neutral graphite and
   * porcelain, the website's palette. The token names are historical: --pine, --green and the --green-* steps hold
   * graphite, not green. Deep green #083933 survives only as --brand (the logo files and the active tab line). */
  --pine: #0F1213;
  --green: #15191A;
  --green-raised: #1E2324;
  --green-high: #2A3031;
  --green-line: #343B3C;
  --slate: #4A5254;
  --green-500: #6B7476;
  --green-300: #A9B0B1;
  --celadon: #E6E8E8;
  --porcelain: #F2F3F3;
  --paper: #FAFAFA;
  --sunken: #E8EAEA;
  --select: #E3E6E6;
  --hair: #D5D8D8;
  --field: #7B8282;
  --ink: #121515;
  --ink-2: #4F5656;
  --ink-3: #5D6464;
  --mist: #EDEEEE;
  --mist-2: #A2A9AA;
  --mist-50: #EDEEEE80;
  --mist-14: #EDEEEE24;
  --mist-10: #EDEEEE1A;
  --raised-60: #1E232499;
  --press-shade: #0F12131F;
  --skel-band-l: #FAFAFAB3;
  --skel-band-d: #2A303180;
  --hair-d: #2E3435;
  --field-d: #858D8E;
  --land-d: #121617;
  --brand: #083933; --brand-deep: #062B26;
  --vermilion: #E74219;
  --vermilion-press: #C2380F;
  --vermilion-hover: #A9300B;
  --vermilion-ink: #B3310E;
  --vermilion-glow: #FF9A78;
  --vermilion-wash: #FBE3DA;
  --vermilion-wash-d: #3A2A1F;
  --ok: #1C6B52; --ok-tint: #DCEBE6;
  --warn: #80560D; --warn-tint: #F2E8D3;
  --danger: #B0202E; --danger-tint: #F6DADC;
  --info: #44505A; --info-tint: #E5E9EC;
  --ok-d: #7FCFAE; --ok-d-bg: #1A2F29;
  --warn-d: #E0B567; --warn-d-bg: #33291A;
  --danger-d: #FF9A9A; --danger-d-bg: #3E2023;
  --info-d: #BFC8CF; --info-d-bg: #222A30;
  --chart-1: #15191A; --chart-2: #6B7476; --chart-3: #A9B0B1; --chart-4: #DCDFE0;
  --chart-d1: #EDEEEE; --chart-d2: #A9B0B1; --chart-d3: #6B7476; --chart-d4: #343B3C;
  --map-sea: #D9DFE2; --map-land: #F6F7F7; --map-coast: #C3C9CC; --map-road: #E3E6E6; --map-xway: #D0D5D6;
  --map-sea-d: #0F1213; --map-land-d: #15191A; --map-coast-d: #2E3435; --map-road-d: #262C2D; --map-xway-d: #343B3C;
  --scrim: #0F1213CC;
  --scrim-clear: #0F121300;
  --backdrop: #0F121373;
  --shadow-float: 0 1px 2px #0F12131A, 0 18px 40px -18px #0F121361;

  /* type: one family everywhere, Montserrat (owner decision 12/10/2026, website first, apps 13/10/2026).
   * --serif is kept as a name so existing rules resolve; it is no longer a serif. */
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--font);
  --sans: var(--font);

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: 16px;

  /* radius (no pills) */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 16px;
  --r-arch: 100vmax 100vmax 0 0;
  --r-round: 50%;

  /* layers */
  --z-header: 10; --z-bar: 20; --z-sheet: 40; --z-toast: 60;

  /* motion */
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 280ms; --dur-4: 600ms; --dur-5: 1200ms; --dur-live: 2400ms;
  --ease-out: cubic-bezier(.2,.7,.1,1);
  --ease-in: cubic-bezier(.5,0,.75,0);
  --ease-in-out: cubic-bezier(.6,0,.2,1);

  /* density (overridden per surface) */
  --ctl-h: 48px;
  --icon-btn: 44px;
  --row-h: 56px;
  --icon-stroke: 1.5px;
  --tabbar-h: 64px;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ============================== 2. Themes and grounds ============================== */
/* Light row (default, and every light ground nested inside a dark one) */
:root, .on-porcelain, .on-paper, .on-celadon, .theme-light, .doc, .name-board {
  --bg: var(--porcelain);
  --surface: var(--paper);
  --inset: var(--sunken);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --heading: var(--green);
  --line: var(--hair);
  --edge: var(--field);
  --sel: var(--select);
  --sel-edge: var(--green);
  --focus: var(--vermilion);
  --att-fg: var(--vermilion-ink); --att-bg: var(--vermilion-wash);
  --ok-fg: var(--ok); --ok-bg: var(--ok-tint);
  --warn-fg: var(--warn); --warn-bg: var(--warn-tint);
  --danger-fg: var(--danger); --danger-bg: var(--danger-tint);
  --info-fg: var(--info); --info-bg: var(--info-tint);
  --neu-fg: var(--ink-2); --neu-bg: var(--sunken);
  --brand-fg: var(--green); --brand-bg: var(--celadon);
  --field-bg: var(--paper);
  --strong-bg: var(--green); --strong-fg: var(--paper); --strong-hover: var(--green-raised);
  --seg-sel-bg: var(--green); --seg-sel-fg: var(--mist);
  --link: var(--green);
  --tab-bar: var(--brand);
  --card-line: var(--hair);
  --sheet-bg: var(--paper);
  --tabbar-bg: var(--paper);
  --toast-bg: var(--pine); --toast-fg: var(--mist);
  --toast-ok: var(--ok-d); --toast-info: var(--info-d); --toast-danger: var(--danger-d);
  --quiet-fill: var(--green);
  --cell-empty-bg: transparent; --cell-empty-edge: var(--field);
  --bar: var(--green-500);
  --c1: var(--chart-1); --c2: var(--chart-2); --c3: var(--chart-3); --c4: var(--chart-4);
  --skel-band: var(--skel-band-l);
  --danger-fill: var(--danger); --danger-fill-fg: var(--paper);
  --tier-v-bg: var(--pine); --tier-v-fg: var(--mist); --tier-v-edge: transparent;
}
/* Dark row: night theme on the apps and ops, plus the green and pine grounds */
html[data-theme="night"] .aj-app, html[data-theme="night"] .aj-chauffeur, html[data-theme="night"] .aj-ops,
.theme-dark, .on-pine, .on-green, .card-green, .ticket, .trip-bar, .sidebar, .site-footer,
.statement-band, .cta-band, .photo-panel, .notice-bar, .utility, .hero, .toast-region {
  --bg: var(--pine);
  --surface: var(--green-raised);
  --inset: var(--land-d);
  --text: var(--mist);
  --text-2: var(--mist-2);
  --text-3: var(--mist-2);
  --heading: var(--mist);
  --line: var(--hair-d);
  --edge: var(--field-d);
  --sel: var(--green-high);
  --sel-edge: var(--mist-2);
  --focus: var(--vermilion-glow);
  --att-fg: var(--vermilion-glow); --att-bg: var(--vermilion-wash-d);
  --ok-fg: var(--ok-d); --ok-bg: var(--ok-d-bg);
  --warn-fg: var(--warn-d); --warn-bg: var(--warn-d-bg);
  --danger-fg: var(--danger-d); --danger-bg: var(--danger-d-bg);
  --info-fg: var(--info-d); --info-bg: var(--info-d-bg);
  --neu-fg: var(--mist); --neu-bg: var(--green-line);
  --brand-fg: var(--mist); --brand-bg: var(--green-high);
  --field-bg: var(--land-d);
  --strong-bg: var(--paper); --strong-fg: var(--ink); --strong-hover: var(--mist);
  --seg-sel-bg: var(--paper); --seg-sel-fg: var(--ink);
  --link: var(--mist);
  --tab-bar: var(--mist);
  --card-line: transparent;
  --sheet-bg: var(--green);
  --tabbar-bg: var(--pine);
  --toast-bg: var(--paper); --toast-fg: var(--ink);
  --toast-ok: var(--ok); --toast-info: var(--info); --toast-danger: var(--danger);
  --quiet-fill: var(--green-300);
  --cell-empty-bg: var(--green-line); --cell-empty-edge: transparent;
  --bar: var(--green-300);
  --c1: var(--chart-d1); --c2: var(--chart-d2); --c3: var(--chart-d3); --c4: var(--chart-d4);
  --skel-band: var(--skel-band-d);
  --danger-fill: var(--danger-d); --danger-fill-fg: var(--pine);
  --tier-v-bg: var(--pine); --tier-v-fg: var(--mist); --tier-v-edge: var(--hair-d);
}
/* Toasts sit on pine over light pages, on paper over dark ones */
.toast-region { --toast-bg: var(--pine); --toast-fg: var(--mist); --toast-ok: var(--ok-d); --toast-info: var(--info-d); --toast-danger: var(--danger-d); }
html[data-theme="night"] .aj-app .toast-region, html[data-theme="night"] .aj-chauffeur .toast-region, html[data-theme="night"] .aj-ops .toast-region,
.theme-dark .toast-region {
  --toast-bg: var(--paper); --toast-fg: var(--ink); --toast-ok: var(--ok); --toast-info: var(--info); --toast-danger: var(--danger);
}
/* Client app and ops follow the phone when no theme is chosen */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .aj-app, html:not([data-theme]) .aj-ops {
    --bg: var(--pine); --surface: var(--green-raised); --inset: var(--land-d);
    --text: var(--mist); --text-2: var(--mist-2); --text-3: var(--mist-2); --heading: var(--mist);
    --line: var(--hair-d); --edge: var(--field-d); --sel: var(--green-high); --sel-edge: var(--mist-2);
    --focus: var(--vermilion-glow);
    --att-fg: var(--vermilion-glow); --att-bg: var(--vermilion-wash-d);
    --ok-fg: var(--ok-d); --ok-bg: var(--ok-d-bg); --warn-fg: var(--warn-d); --warn-bg: var(--warn-d-bg);
    --danger-fg: var(--danger-d); --danger-bg: var(--danger-d-bg); --info-fg: var(--info-d); --info-bg: var(--info-d-bg);
    --neu-fg: var(--mist); --neu-bg: var(--green-line); --brand-fg: var(--mist); --brand-bg: var(--green-high);
    --field-bg: var(--land-d);
    --strong-bg: var(--paper); --strong-fg: var(--ink); --strong-hover: var(--mist);
    --seg-sel-bg: var(--paper); --seg-sel-fg: var(--ink);
    --link: var(--mist); --tab-bar: var(--mist); --card-line: transparent; --sheet-bg: var(--green); --tabbar-bg: var(--pine);
    --quiet-fill: var(--green-300); --cell-empty-bg: var(--green-line); --cell-empty-edge: transparent; --bar: var(--green-300);
    --c1: var(--chart-d1); --c2: var(--chart-d2); --c3: var(--chart-d3); --c4: var(--chart-d4);
    --skel-band: var(--skel-band-d); --danger-fill: var(--danger-d); --danger-fill-fg: var(--pine);
    --tier-v-edge: var(--hair-d);
  }
  html:not([data-theme]) .aj-app .toast-region, html:not([data-theme]) .aj-ops .toast-region {
    --toast-bg: var(--paper); --toast-fg: var(--ink); --toast-ok: var(--ok); --toast-info: var(--info); --toast-danger: var(--danger);
  }
  html:not([data-theme]):has(> body.aj-app), html:not([data-theme]):has(> body.aj-ops) { color-scheme: dark; background: var(--pine); }
}
html[data-theme="night"]:has(> body.aj-app), html[data-theme="night"]:has(> body.aj-chauffeur), html[data-theme="night"]:has(> body.aj-ops) { color-scheme: dark; background: var(--pine); }

/* Ground modifiers */
.on-green, .card-green, .ticket, .trip-bar, .sidebar, .statement-band, .cta-band, .photo-panel, .notice-bar { --bg: var(--green); }
.on-celadon { --bg: var(--celadon); --inset: var(--paper); --text-3: var(--ink-2); }
.on-paper { --bg: var(--paper); }
.on-porcelain, .on-paper, .on-celadon, .on-green, .on-pine { background: var(--bg); color: var(--text); }

/* Chauffeur day theme is sun-hardened (DESIGN 4.2) */
html:not([data-theme="night"]) .aj-chauffeur,
html:not([data-theme="night"]) .aj-chauffeur .on-porcelain,
html:not([data-theme="night"]) .aj-chauffeur .on-paper,
html:not([data-theme="night"]) .aj-chauffeur .on-celadon {
  --text-3: var(--ink-2);
  --line: var(--field);
  --card-line: var(--field);
}

/* Surface roots and density */
.aj-site, .aj-launcher { --ctl-h: 48px; --icon-btn: 44px; --row-h: 56px; }
.aj-app { --ctl-h: 52px; --icon-btn: 44px; --row-h: 56px; }
.aj-chauffeur { --ctl-h: 56px; --icon-btn: 48px; --row-h: 64px; --icon-stroke: 2px; }
.aj-ops { --ctl-h: 40px; --icon-btn: 40px; --row-h: 48px; }
@media (max-width: 899px) { .aj-ops { --ctl-h: 44px; --icon-btn: 44px; } }
html:has(> body.aj-chauffeur) { font-size: 106.25%; }

/* Logo swap: put both images in the markup (.logo-on-light = colour, .logo-on-dark = reversed); the right one shows on every ground and theme */
.logo-on-dark { display: none; }
:is(.on-pine, .on-green, .theme-dark, .sidebar, .site-footer, .hero, .card-green, .ticket, .trip-bar) .logo-on-light { display: none; }
:is(.on-pine, .on-green, .theme-dark, .sidebar, .site-footer, .hero, .card-green, .ticket, .trip-bar) .logo-on-dark { display: inline-block; }
html[data-theme="night"] :is(.aj-app, .aj-chauffeur, .aj-ops) .logo-on-light { display: none; }
html[data-theme="night"] :is(.aj-app, .aj-chauffeur, .aj-ops) .logo-on-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) :is(.aj-app, .aj-ops) .logo-on-light { display: none; }
  html:not([data-theme]) :is(.aj-app, .aj-ops) .logo-on-dark { display: inline-block; }
}
:is(.on-porcelain, .on-paper, .on-celadon) .logo-on-light { display: inline-block; }
:is(.on-porcelain, .on-paper, .on-celadon) .logo-on-dark { display: none; }

/* ============================== 3. Base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--porcelain); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
.aj-site { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.6; }
.aj-chauffeur { font-size: 1rem; }
html:not([data-theme="night"]) .aj-chauffeur { font-weight: 500; }
.aj-ops { font-size: 14px; line-height: 1.45; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--select); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.icon { display: inline-block; flex: none; vertical-align: middle; stroke-width: var(--icon-stroke); stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.icon * { vector-effect: non-scaling-stroke; }
.icon .fill { fill: currentColor; stroke: none; }
i[data-icon] { display: inline-flex; flex: none; font-style: normal; line-height: 0; }

/* ============================== 4. Type ============================== */
.t-display, .t-h1, .t-h2, .t-h3, .t-screen, .t-page, .t-panel, .t-statement, .t-tier, .sheet-title, .doc-title, .mcard-tier {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  color: var(--heading);
  text-wrap: balance;
}
.t-display { font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.015em; }
.t-h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); line-height: 1.04; letter-spacing: -0.012em; }
.t-h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 3.25rem); line-height: 1.08; letter-spacing: -0.01em; }
.t-h3 { font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); line-height: 1.15; }
.t-screen { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.1; letter-spacing: -0.01em; }
.aj-chauffeur .t-screen { font-size: 1.75rem; }
.t-page { font-size: clamp(1.75rem, 1.4rem + 0.6vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; }
.t-panel { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.t-statement { font-variant-numeric: tabular-nums lining-nums; line-height: 1; letter-spacing: -0.01em; font-size: clamp(2.25rem, 1.8rem + 1vw, 2.75rem); white-space: nowrap; }
.aj-chauffeur .t-statement { font-size: 3.75rem; }
.t-statement .cur, .t-statement .cents { font-size: 0.4em; vertical-align: 1.1em; line-height: 0; letter-spacing: 0; }
.t-statement .cur { margin-right: 0.08em; }
.statement-context { color: var(--text-2); font-size: 0.9375rem; margin-top: 6px; }
.aj-chauffeur .statement-context { font-size: 0.882rem; }
.t-tier { font-style: italic; font-weight: 500; letter-spacing: 0.02em; font-size: 1.75rem; line-height: 1.1; }
.t-lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; max-width: 44ch; }
.t-body { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.6; }
.t-small { font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.aj-app .t-small, .aj-chauffeur .t-small, .aj-ops .t-small { font-weight: 400; }
.aj-chauffeur .t-small { font-size: 0.882rem; }
.t-label { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
.t-caption { font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }
.aj-chauffeur .t-label, .aj-chauffeur .t-caption { font-size: 0.882rem; }
.t-section { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.aj-chauffeur .t-section { font-size: 1rem; }
.t-glance { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.t-glance.is-time { font-size: 1.75rem; }
.aj-chauffeur .t-glance, .aj-chauffeur .t-glance.is-time { font-size: 2rem; }
.t-place { font-size: 18px; font-weight: 600; line-height: 1.3; }
.aj-chauffeur .t-place { font-size: 1.1875rem; }
.plate { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aj-chauffeur .plate { font-size: 1.3rem; }
.plate-box { display: inline-block; padding: 2px 8px; border: 1px solid var(--edge); border-radius: var(--r-2); line-height: 1.3; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.meta-dots > * + *::before { content: "\00a0\00b7\00a0"; color: var(--text-2); }
.prose { max-width: 65ch; font-variant-numeric: proportional-nums lining-nums; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.w-40 { width: 40%; } .w-60 { width: 60%; } .w-80 { width: 80%; }
.muted { color: var(--text-2); }

/* ============================== 5. Layout ============================== */
.container { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
.stack-sm { --stack-gap: 8px; } .stack-lg { --stack-gap: 32px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.span-2 { grid-column: 1 / -1; }
.ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-4x5 { aspect-ratio: 4 / 5; } .ratio-3x2 { aspect-ratio: 3 / 2; } .ratio-1 { aspect-ratio: 1; }

/* ============================== 6. Buttons ============================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl-h); min-width: var(--ctl-h);
  padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-2);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.aj-ops .btn { font-size: 14px; }
.aj-ops .btn:not(.btn-icon):not(.btn-link) { padding: 0 16px; }
.btn:active:not([disabled]) { transform: scale(.98); }
.btn-primary { background: var(--vermilion-press); color: var(--paper); }
.btn-primary:hover { background: var(--vermilion-hover); }
.btn-strong { background: var(--strong-bg); color: var(--strong-fg); }
.btn-strong:hover { background: var(--strong-hover); }
.btn-secondary { border-color: var(--edge); color: var(--text); }
.btn-secondary:hover { background: var(--inset); }
.btn-quiet { color: var(--text-2); }
.btn-quiet:hover { background: var(--inset); color: var(--text); }
.btn-danger { border-color: var(--danger-fg); color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-danger.is-filled { background: var(--danger-fill); border-color: transparent; color: var(--danger-fill-fg); }
.btn-danger.is-filled:hover { filter: none; background: var(--danger-fill); box-shadow: inset 0 0 0 99px var(--press-shade); }
.btn-book { border-color: var(--edge); color: var(--text); }
.btn-book:hover { background: var(--inset); }
.btn-book.is-filled { background: var(--vermilion-press); border-color: transparent; color: var(--paper); }
.btn-book.is-filled:hover { background: var(--vermilion-hover); }
.btn-link {
  display: inline; padding: 0; height: auto; border: 0; background: none;
  color: var(--link); font: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { text-decoration-thickness: 2px; }
.btn-link .icon { margin-right: 6px; vertical-align: -3px; }
.btn-icon { width: var(--icon-btn); min-width: var(--icon-btn); height: var(--icon-btn); padding: 0; }
.btn-block { display: flex; width: 100%; }
.btn-sm { height: 32px; min-width: 32px; padding: 0 12px; font-size: 14px; gap: 6px; }
.btn-sm.btn-icon { width: 32px; }
@media (max-width: 899px) { .btn-sm { height: 44px; min-width: 44px; } .btn-sm.btn-icon { width: 44px; } }
.btn-lg { height: 52px; padding: 0 24px; }
.btn-step { height: 64px; font-size: 1.0625rem; padding: 0 24px; }
.btn.is-loading { overflow: hidden; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 36%;
  background: currentColor; animation: aj-sweep 1.1s var(--ease-in-out) infinite;
}
.btn[disabled], .btn[aria-disabled="true"] { background: var(--inset); border-color: transparent; color: var(--text-3); cursor: not-allowed; }
.btn-quiet[disabled], .btn-link[disabled] { background: transparent; }
.btn-stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px; }
.btn-reason { display: flex; align-items: center; gap: 6px; color: var(--warn-fg); font-size: 13px; font-weight: 500; }
.btn-icon .count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11.5px; }

/* ============================== 7. Fields ============================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--text); }
.aj-chauffeur .label { font-size: 0.882rem; }
.opt { color: var(--text-2); font-weight: 400; }
.hint { font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); }
.aj-chauffeur .hint { font-size: 0.882rem; }
.input, .select, .textarea {
  display: block; width: 100%;
  height: var(--ctl-h);
  padding: 0 12px;
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--edge); border-radius: var(--r-2);
  font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.3;
  transition: border-color var(--dur-1) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.aj-chauffeur .input, .aj-chauffeur .select, .aj-chauffeur .textarea { font-size: 1rem; font-weight: 500; }
@media (min-width: 900px) { .aj-ops .input, .aj-ops .select, .aj-ops .textarea { font-size: 14px; } }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-2); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-fg); }
.input[readonly] { background: var(--inset); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--inset); color: var(--text-3); border-color: var(--line); }
.input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.textarea { height: auto; min-height: 96px; padding: 12px; line-height: 1.5; resize: vertical; }
.field-error { display: flex; align-items: flex-start; gap: 6px; color: var(--danger-fg); font-size: 14px; line-height: 1.35; }
.field-error .icon { margin-top: 1px; }
.input-wrap { position: relative; display: block; }
.input-wrap > .icon, .input-wrap > i[data-icon] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.input-wrap > .icon ~ .input, .input-wrap > i[data-icon] ~ .input { padding-left: 40px; }
.input-wrap.has-btn .input { padding-right: calc(var(--ctl-h) + 4px); }
.input-wrap .cal-btn, .input-wrap > .btn-icon { position: absolute; right: 2px; top: 2px; height: calc(var(--ctl-h) - 4px); width: calc(var(--ctl-h) - 4px); min-width: 0; }
.input-affix { display: flex; align-items: stretch; }
.input-affix > span { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--edge); border-right: 0; border-radius: var(--r-2) 0 0 var(--r-2); background: var(--inset); color: var(--text-2); font-weight: 600; }
.input-affix > .input { border-radius: 0 var(--r-2) var(--r-2) 0; min-width: 0; }
.select-wrap { position: relative; display: block; }
.select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select-wrap .select { padding-right: 40px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; line-height: 1.35; }
.check.is-split { display: flex; justify-content: space-between; width: 100%; gap: 16px; }
.check input[type="checkbox"]:not(.switch), .radio input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 20px; height: 20px; border: 1px solid var(--edge); background: var(--field-bg);
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.check input[type="checkbox"]:not(.switch) { border-radius: var(--r-1); }
.check input[type="checkbox"]:not(.switch)::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--strong-fg); border-bottom: 2px solid var(--strong-fg); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-1) var(--ease-out); }
.check input[type="checkbox"]:not(.switch):checked { background: var(--strong-bg); border-color: var(--strong-bg); }
.check input[type="checkbox"]:not(.switch):checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input[type="checkbox"]:not(.switch):indeterminate { background: var(--strong-bg); border-color: var(--strong-bg); }
.check input[type="checkbox"]:not(.switch):indeterminate::after { width: 10px; height: 0; border-left: 0; border-bottom: 2px solid var(--strong-fg); transform: none; }
.radio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.radio input[type="radio"] { border-radius: var(--r-round); }
.radio input[type="radio"]:checked { border-color: var(--strong-bg); background: var(--strong-bg); box-shadow: inset 0 0 0 5px var(--field-bg); }
.switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer;
  position: relative; width: 44px; height: 26px; border-radius: 13px;
  background: var(--inset); box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color var(--dur-1) var(--ease-out);
}
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-round); background: var(--edge); transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1); }
.switch:checked { background: var(--strong-bg); box-shadow: none; }
.switch:checked::before { transform: translateX(18px); background: var(--strong-fg); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper .btn-icon { width: 40px; min-width: 40px; height: 40px; }
.aj-chauffeur .stepper .btn-icon { width: 48px; min-width: 48px; height: 48px; }
.stepper output { min-width: 32px; text-align: center; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.otp { display: flex; gap: 8px; }
.otp input {
  width: 48px; height: 48px; padding: 0; text-align: center;
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--edge); border-radius: var(--r-2);
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.otp input:focus-visible { outline-offset: 1px; }
.signature { display: flex; flex-direction: column; gap: 6px; }
.signature-head { display: flex; align-items: center; justify-content: space-between; }
.signature-pad { position: relative; height: 160px; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-2); touch-action: none; overflow: hidden; }
.signature-pad::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 40px; height: 1px; background: var(--hair); pointer-events: none; }
.signature-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.signature-pad .signature-x { position: absolute; left: 16px; bottom: 44px; color: var(--ink-3); font-size: 14px; pointer-events: none; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; padding: 24px 16px; text-align: center;
  border: 1px dashed var(--edge); border-radius: var(--r-2);
  color: var(--text-2); background: transparent; cursor: pointer; width: 100%;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.dropzone .icon { color: var(--text); }
.dropzone:hover, .dropzone.is-over { background: var(--sel); border-color: var(--sel-edge); }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fieldset > legend { padding: 0; margin-bottom: 12px; font-size: 17px; font-weight: 600; color: var(--text); }

/* Date and time pickers (rendered by AJ.ui.picker) */
.picker {
  position: absolute; z-index: var(--z-sheet); top: calc(100% + 6px); left: 0;
  width: 320px; max-width: calc(100vw - 2 * var(--gutter));
  background: var(--sheet-bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-float);
  padding: 12px; animation: aj-pop-in var(--dur-2) var(--ease-out);
}
.picker.is-right { left: auto; right: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-title { font-weight: 600; font-size: 15px; }
.cal-head .btn-icon { width: 40px; min-width: 40px; height: 40px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 4px 0 6px; }
.cal-day {
  height: 40px; border: 1px solid transparent; border-radius: var(--r-2);
  background: transparent; color: var(--text); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.cal-day:hover:not([disabled]) { background: var(--inset); }
.cal-day.is-out { color: var(--text-3); }
.cal-day[aria-current="date"] { border-color: var(--edge); }
.cal-day[aria-selected="true"] { background: var(--seg-sel-bg); color: var(--seg-sel-fg); border-color: transparent; }
.cal-day[disabled] { color: var(--text-3); opacity: .45; cursor: not-allowed; }
.slots-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.slots-head span { font-weight: 600; font-size: 15px; }
.slots-head small { color: var(--text-2); font-size: 13px; }
.slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.slots-col { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; align-content: start; }
.slots-label { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); font-weight: 500; padding-bottom: 2px; }
.slot { height: 36px; border: 1px solid var(--line); border-radius: var(--r-2); background: transparent; color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.slot:hover { background: var(--inset); }
.slot[aria-selected="true"] { background: var(--seg-sel-bg); color: var(--seg-sel-fg); border-color: transparent; }
.picker-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ============================== 8. Choice ============================== */
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--edge); border-radius: var(--r-2); overflow: hidden; background: var(--field-bg); }
.seg > button, .seg > a {
  flex: 1 0 auto; height: 44px; padding: 0 16px; margin: 0;
  border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--text);
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.seg > :first-child { border-left: 0; }
.seg > :hover:not([aria-checked="true"]):not([aria-pressed="true"]) { background: var(--inset); }
.seg > [aria-checked="true"], .seg > [aria-pressed="true"], .seg > [aria-current="page"] { background: var(--seg-sel-bg); color: var(--seg-sel-fg); }
.seg > [aria-checked="true"] + *, .seg > [aria-pressed="true"] + * { border-left-color: transparent; }
.seg > :focus-visible { outline-offset: -4px; }
.seg .count { background: transparent; color: inherit; padding: 0 2px; min-width: 0; font-weight: 500; opacity: .8; }
.seg-block { display: flex; width: 100%; }
.seg-block > button, .seg-block > a { flex: 1 1 0; padding: 0 8px; min-width: 0; }
.aj-chauffeur .seg > button, .aj-chauffeur .seg > a { height: 48px; font-size: 1rem; }
.aj-ops .seg > button { height: 36px; font-size: 14px; padding: 0 12px; }
@media (max-width: 899px) { .aj-ops .seg > button { height: 44px; } }
.tabs { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 44px; padding: 0 2px; border: 0; background: none;
  color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.aj-ops .tab { font-size: 14px; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tab-bar); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--text); }
.tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { transform: scaleX(1); }
.tab:focus-visible { outline-offset: -2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--edge); border-radius: var(--r-2);
  background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
@media (max-width: 899px) { .chip { height: 44px; } }
.aj-chauffeur .chip { height: 48px; font-size: 1rem; }
.chip:hover { background: var(--inset); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-on { background: var(--sel); border-color: var(--sel-edge); }
.chip .icon { color: var(--text-2); }
.chip-x { padding-right: 10px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 0; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================== 9. Status ============================== */
.tag {
  --tone-fg: var(--neu-fg); --tone-bg: var(--neu-bg);
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 4px 8px; border-radius: var(--r-1);
  background: var(--tone-bg); color: var(--tone-fg);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; letter-spacing: 0;
}
.aj-chauffeur .tag { font-size: 0.882rem; padding: 4px 8px; }
.tag .icon { width: 14px; height: 14px; }
.dot { --tone-fg: var(--text-2); display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: var(--tone-fg); flex: none; vertical-align: middle; }
.notice { --tone-fg: var(--text-2); --tone-bg: var(--inset); }
/* tones (declared after the component defaults so they win) */
.tone-ok { --tone-fg: var(--ok-fg); --tone-bg: var(--ok-bg); }
.tone-warn { --tone-fg: var(--warn-fg); --tone-bg: var(--warn-bg); }
.tone-danger { --tone-fg: var(--danger-fg); --tone-bg: var(--danger-bg); }
.tone-info { --tone-fg: var(--info-fg); --tone-bg: var(--info-bg); }
.tone-neutral { --tone-fg: var(--neu-fg); --tone-bg: var(--neu-bg); }
.tone-brand { --tone-fg: var(--brand-fg); --tone-bg: var(--brand-bg); }
.tone-attention { --tone-fg: var(--att-fg); --tone-bg: var(--att-bg); }
.tone-muted { --tone-fg: var(--text-2); --tone-bg: transparent; }
.tag.tone-muted, .tag-outline { box-shadow: inset 0 0 0 1px var(--line); }
.tag-outline { --tone-bg: transparent; --tone-fg: var(--text); }
.tag-tier[data-tier="member"] { --tone-bg: transparent; --tone-fg: var(--text); box-shadow: inset 0 0 0 1px var(--edge); }
.tag-tier[data-tier="jade"] { --tone-bg: var(--brand-bg); --tone-fg: var(--brand-fg); }
.tag-tier[data-tier="vermilion"] { --tone-bg: var(--tier-v-bg); --tone-fg: var(--tier-v-fg); box-shadow: inset 0 0 0 1px var(--tier-v-edge); }
.doc-badge { display: inline-grid; place-items: center; min-width: 34px; padding: 3px 6px; border-radius: var(--r-1); background: var(--inset); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.2; flex: none; }
.aj-chauffeur .doc-badge { font-size: 0.882rem; min-width: 40px; }

/* Expense receipts (AJ.receipts in ui.js): a thumbnail for tables and lists, the receipt itself in a drawer */
.rcpt-thumb { display: inline-grid; width: 32px; height: 40px; border-radius: var(--r-1); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); vertical-align: middle; flex: none; }
.rcpt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcpt-thumb.is-drawn { align-content: start; gap: 4px; padding: 7px 5px; }
.rcpt-thumb.is-drawn i { display: block; height: 2px; background: var(--line); }
.rcpt-thumb.is-drawn i.w-60 { width: 60%; }
.rcpt-thumb.is-pdf { place-items: center; }
.rcpt-thumb.is-pdf .doc-badge { min-width: 0; padding: 2px 3px; font-size: 10px; }
.rcpt-fig { margin: 16px 0 0; display: grid; gap: 8px; justify-items: start; }
.rcpt-fig figcaption { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.rcpt-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-2); }
.rcpt-photo { display: block; max-width: 100%; max-height: 420px; border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--line); }
.rcpt-pdf { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--inset); border-radius: var(--r-2); font-size: 14px; }
.rcpt-slip { display: grid; gap: 6px; width: min(100%, 300px); padding: 20px 20px 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-1); font-size: 13px; color: var(--text-2); }
.rcpt-slip.is-invoice { width: min(100%, 340px); }
.rcpt-vendor { color: var(--text); font-size: 15px; font-weight: 600; text-align: center; }
.rcpt-kind { text-align: center; }
.rcpt-row { display: flex; justify-content: space-between; gap: 12px; }
.rcpt-row > span:first-child { min-width: 0; }
.rcpt-total { color: var(--text); font-weight: 600; font-size: 14px; }
.rcpt-rule { display: block; border-top: 1px dashed var(--line); margin: 4px 0; }
.rcpt-foot { text-align: center; margin-top: 6px; font-size: 12px; }
.rcpt-dialog { max-width: min(92vw, 720px); max-height: 92vh; padding: 12px; border: 0; border-radius: var(--r-2); background: var(--surface); color: var(--text); }
.rcpt-dialog[open] { display: grid; gap: 12px; justify-items: end; }
.rcpt-dialog::backdrop { background: var(--scrim); }
.rcpt-dialog img { display: block; max-width: 100%; max-height: calc(92vh - 84px); justify-self: center; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-1); background: var(--neu-bg); color: var(--neu-fg); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.aj-chauffeur .count { min-width: 22px; height: 22px; font-size: 0.882rem; }
.count-attention { background: var(--att-bg); color: var(--att-fg); }

/* ============================== 10. Surfaces ============================== */
.card { display: block; background: var(--surface); color: var(--text); border: 1px solid var(--card-line); border-radius: var(--r-3); }
.card-body { padding: 16px; }
@media (min-width: 600px) { .card-body { padding: 20px; } }
.aj-ops .card-body { padding: 16px; }
.card-link { text-decoration: none; color: inherit; transition: border-color var(--dur-1) var(--ease-out); }
.card-link:hover { border-color: var(--edge); }
.card-soft { background: var(--inset); border-color: transparent; }
.card-green { background: var(--green); color: var(--mist); border-color: transparent; }
.panel { background: var(--surface); color: var(--text); border: 1px solid var(--card-line); border-radius: var(--r-3); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 16px; }
.panel-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-2);
  background: var(--tone-bg); color: var(--text);
  font-size: 14px; line-height: 1.45;
}
.aj-chauffeur .notice { font-size: 0.882rem; }
.notice > .icon, .notice > i[data-icon] { color: var(--tone-fg); margin-top: 1px; }
.notice > span { flex: 1; min-width: 0; }
.notice > .btn-link { flex: none; }
.banner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: var(--r-3); background: var(--bg); color: var(--text); }
.banner .btn-quiet { color: var(--text); }

/* ============================== 11. Trip ============================== */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: var(--r-3); background: var(--green); color: var(--mist); overflow: hidden; }
.ticket-top { font-size: 13px; color: var(--text-2); }
.ticket-map { height: 88px; margin: 0 -16px; background: var(--map-sea-d); overflow: hidden; position: relative; }
.ticket-map > svg { width: 100%; height: 100%; }
.ticket:not(.is-live) .ticket-map { display: none; } /* the night strip appears only while the trip is live */
.ticket .chauffeur-card { padding-top: 12px; border-top: 1px solid var(--line); }
.stops { list-style: none; padding: 0; margin: 0; display: grid; }
.stop { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 5px 0; line-height: 1.4; }
.stop > .num { color: var(--text-2); font-size: 14px; padding-top: 1px; }
.stop:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 23px; bottom: -6px; width: 2px; background: var(--edge); opacity: .55; }
.stop-mark { justify-self: center; margin-top: 6px; width: 10px; height: 10px; }
.stop[data-kind="pickup"] .stop-mark { border: 2px solid var(--heading); border-radius: var(--r-round); }
.stop[data-kind="stop"] .stop-mark { width: 8px; height: 8px; margin-top: 7px; border: 1.5px solid var(--heading); }
.stop[data-kind="dropoff"] .stop-mark { width: 8px; height: 8px; margin-top: 7px; background: var(--heading); }
.chauffeur-card { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chauffeur-card > div { min-width: 0; display: grid; gap: 2px; }
.chauffeur-card .plate { font-size: 17px; }
.flight-line { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.aj-chauffeur .flight-line { font-size: 0.882rem; }
.flight-line .icon { margin-top: 1px; color: var(--text-2); }
.flight-line.is-delayed .delay, .delay-ink { color: var(--att-fg); font-weight: 600; }
.time-was { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-2); margin-right: 4px; }
.countdown { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.countdown.is-urgent { color: var(--att-fg); }
.ring { position: relative; width: 28px; height: 28px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 2.5; }
.ring .ring-track { stroke: currentColor; opacity: .3; }
.ring .ring-fill { stroke: currentColor; stroke-dasharray: 1; transition: stroke-dashoffset 1s linear; }

/* ============================== 12. Lists ============================== */
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li, .row + .row { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--row-h); padding: 8px 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none;
}
a.row, button.row { cursor: pointer; transition: background-color var(--dur-1); }
a.row:hover, button.row:hover { background: var(--inset); }
.list.card .row, .card > .row, .panel > .list .row { padding-inline: 16px; }
.list.card > li:first-child .row { border-radius: var(--r-3) var(--r-3) 0 0; }
.list.card > li:last-child .row { border-radius: 0 0 var(--r-3) var(--r-3); }
.row-lead { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-1); background: var(--inset); color: var(--text-2); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 14px; color: var(--text-2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-chauffeur .row-meta { font-size: 0.882rem; }
.aj-ops .row-meta { font-size: 13px; }
.row-title.wrap, .row-meta.wrap { white-space: normal; }
.row-trail { flex: none; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.row-trail.num, .row-trail .num { color: var(--text); font-weight: 600; }
.row.is-selected, .row[aria-selected="true"] { background: var(--sel); }
.file-row .doc-badge { align-self: center; }
.file-row .row-trail { font-variant-numeric: tabular-nums; }
.time-pair { position: relative; display: inline-flex; flex-direction: column; gap: 6px; padding-left: 14px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.time-pair > span::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; margin-top: 5px; }
.time-pair > span:first-child::before { border: 1.5px solid var(--heading); }
.time-pair > span:last-child::before { background: var(--heading); }
.time-pair::after { content: ""; position: absolute; left: 2.5px; top: 13px; bottom: 13px; width: 1px; background: var(--line); }
.time-pair > span:last-child { color: var(--text-2); }

/* ============================== 13. Money ============================== */
.ledger, .price-lines { margin: 0; display: grid; }
.ledger > div, .price-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.ledger > div:first-child, .price-lines > div:first-child { border-top: 0; }
.ledger dt, .price-lines dt { font-weight: 400; min-width: 0; }
.ledger dt small, .price-lines dt small { display: block; color: var(--text-2); font-size: 13px; }
.ledger dd, .price-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ledger .ledger-total, .price-lines .ledger-total { border-top: 1px solid var(--text); font-weight: 600; }
.ledger .ledger-total dt, .price-lines .ledger-total dt { font-weight: 600; }

/* ============================== 14. Tables ============================== */
.table-wrap { container-type: inline-size; overflow-x: auto; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-3); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.aj-ops .table { font-size: 13px; }
.table th { position: relative; background: var(--inset); color: var(--text-2); font-size: 12.5px; font-weight: 500; text-align: left; padding: 8px 12px; height: 36px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table th:first-child { border-top-left-radius: calc(var(--r-3) - 1px); }
.table th:last-child { border-top-right-radius: calc(var(--r-3) - 1px); }
.table td { padding: 8px 12px; height: 44px; border-bottom: 1px solid var(--line); vertical-align: middle; background: var(--surface); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-bottom: 0; }
.table-compact td { height: 36px; padding: 6px 12px; }
.table .num, .table th.num { text-align: right; }
.table .col-check { width: 44px; padding-right: 0; }
.table .col-check input { margin: 0; vertical-align: middle; }
.table .col-check, .table .col-freeze { position: sticky; left: 0; z-index: 1; }
.table:has(.col-check) .col-freeze { left: 44px; }
.table .cell-main { font-weight: 600; white-space: nowrap; }
.table .cell-main .initials { margin-right: 8px; vertical-align: middle; }
.table tr.is-link { cursor: pointer; }
.table tr.is-link:hover td { background: var(--inset); }
.table tr.is-selected td { background: var(--sel); box-shadow: inset 0 1px 0 var(--sel-edge), inset 0 -1px 0 var(--sel-edge); }
.table tr.is-selected td:first-child { box-shadow: inset 0 1px 0 var(--sel-edge), inset 0 -1px 0 var(--sel-edge), inset 1px 0 0 var(--sel-edge); }
.table tr.is-selected td:last-child { box-shadow: inset 0 1px 0 var(--sel-edge), inset 0 -1px 0 var(--sel-edge), inset -1px 0 0 var(--sel-edge); }
.table tr.is-changed td { animation: aj-changed 2s var(--ease-in-out); }
.table tr.group td { background: var(--bg); color: var(--text-2); font-size: 12.5px; font-weight: 600; height: 32px; }
.table tfoot tr.total td, .table tr.total td { font-weight: 600; border-top: 1px solid var(--text); }
.table td .tag { vertical-align: middle; }
.row-adders { display: flex; gap: 4px; margin-top: 4px; }
@container (max-width: 639px) {
  .table-reflow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-reflow, .table-reflow tbody, .table-reflow tfoot, .table-reflow tr, .table-reflow td { display: block; width: 100%; }
  .table-reflow tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table-reflow tbody tr:last-child { border-bottom: 0; }
  .table-reflow td { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: auto; padding: 3px 0; border: 0; background: transparent; text-align: right; position: static; }
  .table-reflow td::before { content: attr(data-label); color: var(--text-2); font-size: 13px; font-weight: 500; text-align: left; }
  .table-reflow td.cell-main { justify-content: flex-start; font-size: 15px; padding-bottom: 6px; text-align: left; white-space: normal; }
  .table-reflow td.cell-main::before, .table-reflow td.col-check::before { content: none; }
  .table-reflow td.col-check { display: none; }
  .table-reflow tr.is-selected td, .table-reflow tr.is-selected td:first-child, .table-reflow tr.is-selected td:last-child { box-shadow: none; }
  .table-reflow tr.is-selected { background: var(--sel); box-shadow: inset 0 0 0 1px var(--sel-edge); }
  .table-reflow td.cell-main { flex-wrap: wrap; row-gap: 4px; }
  .table-reflow td.cell-main .row-adders { flex-basis: 100%; margin: 0 0 0 26px; }
  .table-reflow tfoot tr.total td, .table-reflow tr.total td { border-top: 0; }
  .table-reflow tfoot tr { border-top: 1px solid var(--text); }
  .table-reflow tfoot td:empty { display: none; }
}

/* ============================== 15. Data ============================== */
.stats { display: flex; flex-wrap: wrap; margin: 0; row-gap: 12px; }
.stat { flex: 1 1 0; min-width: 0; padding: 2px 16px; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat dt { font-size: 13px; color: var(--text-2); font-weight: 500; }
.aj-chauffeur .stat dt { font-size: 0.882rem; }
.stat dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.aj-chauffeur .stat-sub { font-size: 0.882rem; }
@media (max-width: 599px) {
  .stat { flex: 1 1 50%; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 12px; }
}
.comp-bar { display: flex; gap: 2px; height: 10px; }
.comp-bar > span { flex: var(--v, 1) 1 0; min-width: 2px; background: var(--c1); }
.comp-bar > span:nth-child(2) { background: var(--c2); }
.comp-bar > span:nth-child(3) { background: var(--c3); }
.comp-bar > span:nth-child(4) { background: var(--c4); }
.comp-bar > .is-deduction, .hatch {
  background: var(--text) !important; opacity: .3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 7L7-1M-1 1L1-1M5 7L7 5' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 7L7-1M-1 1L1-1M5 7L7 5' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask-size: 6px 6px; mask-size: 6px 6px;
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 6px; height: 6px; background: var(--c1); flex: none; }
.legend li:nth-child(2) .sw { background: var(--c2); } .legend li:nth-child(3) .sw { background: var(--c3); } .legend li:nth-child(4) .sw { background: var(--c4); }
.legend .sw.is-deduction { background: transparent; box-shadow: inset 0 0 0 1px var(--text); }
.legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-bars { --plot: 120px; --xh: 40px; position: relative; display: flex; align-items: flex-end; height: calc(var(--plot) + var(--xh)); }
.chart-bars .bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.chart-bars .bar-plot { height: var(--plot); width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart-bars .bar-fill { display: block; width: 62.5%; height: calc(var(--v, 0) / var(--max, 10) * 100%); min-height: 2px; background: var(--bar); transform-origin: bottom; }
.chart-bars .bar.is-selected .bar-fill { background: var(--text); }
.chart-bars .bar-x { height: var(--xh); padding-top: 6px; display: flex; flex-direction: column; align-items: center; font-size: 12.5px; color: var(--text-2); line-height: 1.25; }
.chart-bars .bar-x b { font-weight: 600; color: var(--text); }
.chart-bars .bar.is-selected .bar-x { color: var(--text); }
.aj-chauffeur .chart-bars .bar-x { font-size: 0.882rem; }
.chart-bars .chart-ref { position: absolute; left: 0; right: 0; bottom: calc(var(--xh) + var(--v) / var(--max, 10) * var(--plot)); border-top: 1px dashed var(--text-3); pointer-events: none; }
.chart-bars .chart-ref span { position: absolute; left: 0; bottom: 3px; font-size: 12px; color: var(--text-2); background: var(--bg); padding-right: 6px; }
.chart-stack { --plot: 140px; display: flex; align-items: flex-end; gap: 12px; }
.chart-stack .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.chart-stack .col-plot { height: var(--plot); display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; }
.chart-stack .col-plot > span { display: block; flex: none; height: calc(var(--v, 0) / var(--max, 10) * 100%); background: var(--c1); transform-origin: bottom; }
.chart-stack .col-plot > span:nth-child(2) { background: var(--c2); }
.chart-stack .col-plot > span:nth-child(3) { background: var(--c3); }
.chart-stack .col-x { padding-top: 6px; text-align: center; font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.chart-stack .col-x b { display: block; color: var(--text); font-weight: 600; }
.aj-chauffeur .chart-stack .col-x { font-size: 0.882rem; }
[data-anim="in"] .bar-fill, [data-anim="in"] .col-plot > span { animation: aj-grow 240ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.tier-meter { display: flex; gap: 4px; }
.tier-cell { flex: 1 1 0; height: 14px; border-radius: var(--r-1); background: var(--cell-empty-bg); box-shadow: inset 0 0 0 1px var(--cell-empty-edge); }
.tier-cell.is-done { background: var(--vermilion); box-shadow: none; }
.tier-meter.is-quiet .tier-cell.is-done { background: var(--quiet-fill); }
[data-anim="in"] .tier-cell.is-done, .tier-meter[data-anim="in"] .tier-cell.is-done { animation: aj-cell 220ms var(--ease-out) both; }
.tier-meter .tier-cell:nth-child(2) { animation-delay: 60ms; } .tier-meter .tier-cell:nth-child(3) { animation-delay: 120ms; }
.tier-meter .tier-cell:nth-child(4) { animation-delay: 180ms; } .tier-meter .tier-cell:nth-child(5) { animation-delay: 240ms; }
.tier-meter .tier-cell:nth-child(6) { animation-delay: 300ms; } .tier-meter .tier-cell:nth-child(7) { animation-delay: 360ms; }
.tier-meter .tier-cell:nth-child(8) { animation-delay: 420ms; } .tier-meter .tier-cell:nth-child(9) { animation-delay: 480ms; }
.tier-meter .tier-cell:nth-child(10) { animation-delay: 540ms; }
.tier-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; }
.aj-chauffeur .tier-line { font-size: 1rem; }
.board { list-style: none; margin: 0; padding: 0; }
.board-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 8px; border-top: 1px solid var(--line); }
.board-row:first-child { border-top: 0; }
.board-rank { width: 32px; flex: none; font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.board-name { flex: 1; min-width: 0; font-weight: 500; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-value { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.board-row.is-me { background: var(--sel); }
.board-row.is-first .board-rank { color: var(--text); }
.board-row .star-slot { position: absolute; left: 24px; top: 9px; width: 16px; height: 16px; color: var(--vermilion); }

/* ============================== 16. Progress ============================== */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 2px solid var(--line); min-width: 0; }
.step-title { font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.step-hint { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step[data-state="done"], .step[data-state="current"] { border-bottom-color: var(--heading); }
.step[data-state="done"] .step-title, .step[data-state="current"] .step-title { color: var(--text); }
.step[data-state="blocked"] { border-bottom-color: var(--danger-fg); }
.step[data-state="blocked"] .step-title { color: var(--danger-fg); }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 48px 12px minmax(0, 1fr); column-gap: 12px; padding-bottom: 16px; line-height: 1.4; }
.tl-item:last-child { padding-bottom: 0; }
.tl-time { color: var(--text-2); font-size: 14px; text-align: right; }
.tl-time:empty::before { content: "\00a0"; }
.tl-mark { width: 8px; height: 8px; margin: 6px auto 0; box-shadow: inset 0 0 0 1px var(--edge); background: var(--bg); position: relative; z-index: 1; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 65px; top: 14px; bottom: -6px; width: 2px; background: var(--line); }
.tl-item[data-state="done"] .tl-mark { background: var(--heading); box-shadow: none; }
.tl-item[data-state="done"]:not(:last-child)::before { background: var(--heading); opacity: .5; }
.tl-item[data-state="current"] .tl-mark { box-shadow: inset 0 0 0 2px var(--heading); }
.tl-item[data-state="todo"] .tl-body { color: var(--text-2); }
.tl-body small { display: block; color: var(--text-2); font-size: 13px; }
.window-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; align-items: start; }
.window-line::before { content: ""; position: absolute; left: 0; right: calc((100% - 16px) / 3 - 9px); top: 4px; height: 1px; background: var(--edge); }
.window-line .countdown { grid-column: 1 / -1; }
.wl-node { position: relative; padding-top: 18px; font-size: 13px; color: var(--text-2); line-height: 1.35; }
.wl-node::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--edge); }
.wl-node.is-now { color: var(--text); font-weight: 600; }
.wl-node.is-now::before { left: 1px; top: 1px; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--vermilion); box-shadow: none; }
.progress { position: relative; height: 3px; background: var(--inset); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--p, 0%); background: var(--heading); transition: width var(--dur-2) var(--ease-out); }
.progress.is-indeterminate > span { width: 32%; animation: aj-sweep 1.2s var(--ease-in-out) infinite; }

/* ============================== 17. People ============================== */
.initials {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-1);
  background: var(--brand-bg); color: var(--brand-fg);
  font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.02em;
}
.initials.s24 { width: 24px; height: 24px; font-size: 10.5px; }
.initials.s32 { width: 32px; height: 32px; font-size: 13px; }
.initials.s40 { width: 40px; height: 40px; font-size: 15px; }
.initials.s48 { width: 48px; height: 48px; font-size: 17px; }
.aj-chauffeur .initials.s32 { font-size: 14px; }
.arch-portrait {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  width: 72px; height: 96px; border-radius: var(--r-arch);
  background: var(--brand-bg); color: var(--brand-fg);
  font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; padding-top: 0.2em;
}
.arch-portrait.s56 { width: 56px; height: 72px; font-size: 17px; }
.arch-portrait.s72 { width: 72px; height: 96px; font-size: 22px; }
.arch-portrait.s120 { width: 120px; height: 160px; font-size: 34px; }
.arch-portrait img { width: 100%; height: 100%; object-fit: cover; }
.arch-portrait:has(img) { padding-top: 0; }
.mono-mark { position: relative; display: inline-block; flex: none; width: 32px; height: 32px; border-radius: var(--r-1); background: var(--brand-bg); color: var(--brand-fg); vertical-align: middle; }
.mono-mark::before {
  content: ""; position: absolute; inset: 5px 8px; background: currentColor;
  -webkit-mask: url("img/aj-monogram-mask.png") center / contain no-repeat;
  mask: url("img/aj-monogram-mask.png") center / contain no-repeat;
}
.mono-mark.s20 { width: 20px; height: 20px; }
.mono-mark.s20::before { inset: 3px 5px; }

/* ============================== 18. Overlays ============================== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: var(--backdrop); opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease-in), visibility 0s linear 200ms;
}
.sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--ease-out), visibility 0s; }
.sheet, .drawer, .dialog {
  position: fixed; z-index: calc(var(--z-sheet) + 1);
  display: flex; flex-direction: column;
  background: var(--sheet-bg); color: var(--text);
  box-shadow: var(--shadow-float);
  visibility: hidden;
  overscroll-behavior: contain;
}
.sheet {
  left: 0; right: 0; bottom: 0; max-height: min(92dvh, 820px);
  border-radius: var(--r-4) var(--r-4) 0 0;
  transform: translateY(100%);
  transition: transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.sheet.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
@media (min-width: 600px) {
  .sheet { left: 50%; right: auto; width: min(560px, 100%); transform: translate(-50%, 100%); }
  .sheet.is-open { transform: translate(-50%, 0); }
}
.drawer {
  top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
.drawer.is-left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); }
.drawer.is-left.is-open { transform: none; }
@media (max-width: 599px) {
  .drawer:not(.is-left) { top: auto; left: 0; width: 100%; max-height: 92dvh; border-left: 0; border-radius: var(--r-4) var(--r-4) 0 0; transform: translateY(100%); }
  .drawer:not(.is-left).is-open { transform: none; }
  .drawer:not(.is-left) .sheet-grip { display: block; }
}
.dialog {
  top: 50%; left: 50%; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px);
  border-radius: var(--r-3);
  opacity: 0; transform: translate(-50%, calc(-50% + 8px));
  transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.dialog.is-open { opacity: 1; transform: translate(-50%, -50%); visibility: visible; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s; }
.sheet-grip { flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--edge); opacity: .6; }
.drawer .sheet-grip, .dialog .sheet-grip { display: none; }
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 8px 16px; min-height: 60px; }
.drawer .sheet-head { padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.dialog .sheet-head { padding: 16px 12px 4px 20px; }
.sheet-title { font-size: 1.5rem; line-height: 1.15; min-width: 0; }
.aj-ops .sheet-title { font-size: 1.25rem; font-weight: 500; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.drawer .sheet-body { padding: 16px 20px; }
.dialog .sheet-body { padding: 8px 20px 16px; }
.sheet-foot { flex: none; display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet .sheet-foot > .btn, .drawer .sheet-foot > .btn { flex: 1 1 0; }
.dialog .sheet-foot { justify-content: flex-end; padding: 12px 20px 16px; border-top: 0; }
html.has-sheet, html.has-sheet body { overflow: hidden; }
.sheet:focus, .drawer:focus, .dialog:focus, .sidebar:focus { outline: none; } /* the container takes focus for screen readers; its controls keep their rings */
.toast-region {
  position: fixed; z-index: var(--z-toast);
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--toast-bottom, 16px) + env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  background: transparent; color: inherit;
}
@media (min-width: 600px) { .aj-ops .toast-region { left: auto; right: 24px; transform: none; } }
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 8px 12px 14px; min-height: 48px;
  background: var(--toast-bg); color: var(--toast-fg);
  border-radius: var(--r-3); box-shadow: var(--shadow-float);
  font-size: 15px; font-weight: 500; line-height: 1.4;
  animation: aj-toast-in var(--dur-2) var(--ease-out) both;
}
.toast > .icon { margin-top: 1px; }
.toast--ok > .icon { color: var(--toast-ok); }
.toast--info > .icon { color: var(--toast-info); }
.toast--danger > .icon { color: var(--toast-danger); }
.toast-msg { flex: 1; min-width: 0; padding-top: 1px; }
.toast-action, .toast-close { flex: none; margin: -6px 0; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-2); background: transparent; color: inherit; font-weight: 600; font-size: 15px; }
.toast-action { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.toast-close { width: 36px; padding: 0; display: grid; place-items: center; opacity: .8; }
.toast-action:hover, .toast-close:hover { background: var(--mist-10); }
.toast.is-leaving { animation: aj-toast-out 200ms var(--ease-in) both; }


/* Menus (avatar menu, row actions): AJ.ui.menu via [aria-haspopup="menu"][aria-controls] */
.menu-host { position: relative; display: inline-block; }
.menu { position: absolute; z-index: var(--z-sheet); top: calc(100% + 6px); right: 0; min-width: 220px; padding: 6px; background: var(--sheet-bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-float); animation: aj-pop-in var(--dur-2) var(--ease-out); }
.menu[hidden] { display: none; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-2); background: none; color: var(--text); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; }
.menu-item:hover { background: var(--inset); }
.menu-item .icon { color: var(--text-2); }
.menu-sep { height: 1px; margin: 6px 0; background: var(--line); }

/* ============================== 19. Feedback ============================== */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 16px; }
.empty-arch { width: 64px; height: 80px; border-radius: var(--r-arch); background: var(--brand-bg); margin-bottom: 10px; }
.empty-title { font-size: 17px; font-weight: 600; color: var(--text); }
.empty-text { font-size: 15px; color: var(--text-2); max-width: 34ch; }
.empty .btn { margin-top: 12px; }
.skel { display: block; position: relative; overflow: hidden; background: var(--inset); border-radius: var(--r-1); }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skel-band), transparent); transform: translateX(-100%); animation: aj-skel 1.4s var(--ease-in-out) infinite; }
.skel-line { height: 12px; margin: 6px 0; }
.skel-line.is-title { height: 22px; }
.skel-block { width: 100%; }
.skel-row { height: 56px; margin: 8px 0; }

/* ============================== 20. Chat ============================== */
.thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; }
.day-divider { align-self: center; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.bubble { position: relative; max-width: min(85%, 520px); padding: 10px 12px; border-radius: var(--r-3); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.aj-chauffeur .bubble { font-size: 1rem; }
.bubble.me { align-self: flex-end; background: var(--sel); color: var(--text); border-bottom-right-radius: 2px; }
.bubble.bot, .bubble.them, .bubble.staff { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--card-line); border-bottom-left-radius: 2px; }
.bubble.note { align-self: flex-start; background: var(--warn-bg); color: var(--text); border-bottom-left-radius: 2px; }
.bubble-who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.bubble-who .mono-mark { width: 20px; height: 20px; }
.bubble-who .mono-mark::before { inset: 3px 5px; }
.bubble-time { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-2); text-align: right; }
.aj-chauffeur .bubble-time { font-size: 0.882rem; }
.proposal { align-self: stretch; max-width: 520px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sys-row { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 13px; color: var(--text-2); }
.typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 12px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-3); border-bottom-left-radius: 2px; }
.typing > span { width: 5px; height: 5px; background: var(--text-2); animation: aj-typing 1.2s var(--ease-in-out) infinite; }
.typing > span:nth-child(2) { animation-delay: .2s; } .typing > span:nth-child(3) { animation-delay: .4s; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 0; }
.composer .textarea { flex: 1; min-height: var(--ctl-h); max-height: 140px; height: var(--ctl-h); resize: none; padding: 13px 12px; line-height: 1.4; }
.composer .btn-icon { width: var(--ctl-h); min-width: var(--ctl-h); height: var(--ctl-h); }

/* ============================== 21. Shells ============================== */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: 8px;
  height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 16px;
  background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line);
}
.app-header > .btn-icon:first-child { margin-left: -10px; }
.app-brand { display: inline-flex; align-items: center; height: 44px; }
.app-brand img { height: 28px; width: auto; }
.app-header-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.app-main { flex: 1; width: 100%; max-width: 480px; margin-inline: auto; padding: 16px 16px 32px; }
.aj-chauffeur .app-main { max-width: 440px; }
body:has(.tabbar) .app-main, .app:not(.no-tabbar) .app-main:has(~ .tabbar) { padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); }
.no-tabbar .tabbar { display: none; }
body:has(.no-tabbar) .app-main { padding-bottom: 32px; }
.app-bar {
  position: sticky; bottom: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.app-bar > .btn:not(.btn-icon) { flex: 1; }
.app:not(.no-tabbar) .app-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--tabbar-bg); border-top: 1px solid var(--line);
}
.tab-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--tabbar-h); padding: 0 2px; border: 0; background: none;
  color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none;
}
.aj-chauffeur .tab-item { font-size: 0.882rem; }
.tab-item::before { content: ""; position: absolute; top: 0; left: 50%; width: 16px; height: 2px; margin-left: -8px; background: var(--tab-bar); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
.tab-item[aria-current="page"] { color: var(--text); }
.tab-item[aria-current="page"]::before { transform: scaleX(1); }
.tab-item:focus-visible { outline-offset: -4px; }
.tab-badge { position: absolute; top: 7px; left: calc(50% + 6px); }
.tab-dot { position: absolute; top: 9px; left: calc(50% + 9px); width: 6px; height: 6px; border-radius: 1px; background: var(--heading); }
.trip-bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; background: var(--green); color: var(--mist); font-size: 15px; font-weight: 600; text-decoration: none; }
.trip-bar .icon:last-child { margin-left: auto; }
.app-side { display: none; }
@media (min-width: 900px) {
  .app-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-bar); display: flex; flex-direction: column; gap: 4px; width: 240px; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
  .app-side .app-brand { padding: 0 8px 12px; height: auto; }
  .app-side > .btn { margin: 4px 0 12px; }
  .app-side .tab-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r-2); font-size: 15px; }
  .app-side .tab-item::before { top: 50%; left: 0; width: 2px; height: 16px; margin: -8px 0 0; transform: scaleY(0); }
  .app-side .tab-item[aria-current="page"] { background: var(--sel); font-weight: 600; }
  .app-side .tab-item[aria-current="page"]::before { transform: none; display: none; }
  .app-side .tab-badge { position: static; margin-left: auto; }
  body:has(.app-side) .tabbar { display: none; }
  body:has(.app-side) .app-header, body:has(.app-side) .app-main, body:has(.app-side) .app-bar { margin-left: 240px; }
  body:has(.app-side) .app-main { max-width: 1080px; padding: 24px 32px 48px; margin-right: auto; }
  body:has(.app-side) .app-main { padding-bottom: 48px; }
}
/* Ops console */
.console { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
@media (max-width: 1099px) { .console { grid-template-columns: 220px minmax(0, 1fr); } }
.sidebar {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 16px;
  background: var(--green); color: var(--mist);
}
.side-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; font-size: 15px; font-weight: 600; color: var(--mist); text-decoration: none; }
.side-head img { height: 28px; width: auto; }
.side-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.side-group-title { padding: 6px 10px 4px; font-size: 13px; font-weight: 400; color: var(--mist-2); }
.side-link { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--r-2); color: var(--mist); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--dur-1); }
.side-link:hover { background: var(--raised-60); }
.side-link[aria-current="page"] { background: var(--green-raised); font-weight: 600; }
.side-link .icon { color: var(--mist-2); }
.side-link[aria-current="page"] .icon { color: var(--mist); }
.side-count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--mist-2); font-variant-numeric: tabular-nums; }
.side-count.is-attention { color: var(--vermilion-glow); font-weight: 600; }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 8px 0; border-top: 1px solid var(--hair-d); font-size: 13px; color: var(--mist-2); }
.side-foot b { display: block; color: var(--mist); font-size: 14px; font-weight: 600; }
.console-body { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px;
  background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line);
}
.topbar-search { flex: 1; max-width: 520px; }
.topbar-search .input { height: 36px; background: var(--bg); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.topbar-search { min-width: 0; }
@media (max-width: 599px) { .topbar { gap: 6px; } .topbar .btn-label, .toolbar .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topbar .btn:has(.btn-label) { width: var(--icon-btn); padding: 0; } }
.console-main { flex: 1; padding: 24px; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.page-head .page-date { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bottomnav { display: none; }
@media (max-width: 899px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .console > .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1); width: min(300px, 86vw); height: auto; transform: translateX(-100%); visibility: hidden; transition: transform 200ms var(--ease-in), visibility 0s linear 200ms; }
  .console > .sidebar.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
  .topbar { padding: 0 12px; }
  .console-main { padding: 16px 16px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--tabbar-bg); border-top: 1px solid var(--line); }
}
.phone-frame { width: 390px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); color: var(--text); overflow: hidden; position: relative; }

/* ============================== 22. Website ============================== */
.widget { position: relative; display: block; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-2); }
.widget.is-docked { box-shadow: var(--shadow-float); }
.widget-modes { display: flex; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-2) var(--r-2) 0 0; background: transparent; }
.widget-modes > button { flex: 1 1 0; height: 44px; padding: 0 8px; }
.widget-fields { display: flex; flex-direction: column; }
.wfield { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-width: 0; position: relative; }
.wfield .label { color: var(--text-2); font-size: 13px; font-weight: 500; }
.wfield .input { height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 17px; font-weight: 500; }
.wfield .input:focus-visible { outline: none; }
.wfield:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.wfield .input-wrap.has-btn .input { padding-right: 44px; }
.wfield .input-wrap .cal-btn { top: -7px; right: -10px; width: 44px; height: 44px; }
.wfield .flight-line, .wfield .hint, .wfield .field-error { margin-top: 4px; }
.wfield-steppers { flex-direction: row; justify-content: space-between; gap: 16px; }
.wfield-steppers > div { display: flex; flex-direction: column; gap: 4px; }
.widget-action { margin: 12px 16px 16px; }
.widget-assure { padding: 0 16px 16px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
@media (min-width: 1024px) {
  .widget-fields { flex-direction: row; align-items: stretch; }
  .wfield { flex: 1 1 0; border-bottom: 0; border-right: 1px solid var(--line); padding: 14px 18px; }
  .widget-modes { justify-content: flex-start; }
  .widget-modes > button { flex: 0 0 auto; min-width: 132px; padding: 0 20px; border-right: 1px solid var(--line); }
  .widget-modes > [aria-checked="true"] + * { border-left-color: transparent; }
  .wfield:nth-child(2) { flex-grow: 1.35; }
  .wfield-steppers { flex: 0 0 auto; }
  .widget-action { align-self: center; margin: 12px 16px; min-width: 176px; }
  .widget-assure { padding: 12px 18px 14px; border-top: 1px solid var(--line); }
}
.notice-bar { background: var(--green); color: var(--mist); font-size: 14px; line-height: 1.4; }
.notice-bar > .container { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.notice-bar p { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice-bar .btn-link { color: var(--mist); flex: none; }
.notice-bar .btn-icon { color: var(--mist); margin-right: -12px; }
.utility { display: none; }
@media (min-width: 1024px) {
  .utility { display: block; background: var(--pine); color: var(--mist-2); font-size: 13px; }
  .utility > .container { display: flex; align-items: center; justify-content: flex-end; height: 40px; }
  .utility > .container > * { padding: 0 16px; border-left: 1px solid var(--hair-d); line-height: 1; }
  .utility > .container > :first-child { border-left: 0; }
  .utility > .container > :last-child { padding-right: 0; }
  .utility a { color: var(--mist-2); text-decoration: none; }
  .utility a:hover { color: var(--mist); }
}
.site-header { position: relative; z-index: var(--z-header); height: 64px; background: var(--porcelain); color: var(--ink); border-bottom: 1px solid var(--hair); }
.site-header > .container { display: flex; align-items: center; gap: 24px; height: 100%; }
.site-header .brand { display: inline-flex; align-items: center; flex: none; }
.site-header .brand img { height: 28px; width: auto; }
.site-header.is-over-photo { position: absolute; left: 0; right: 0; background: transparent; color: var(--mist); border-bottom-color: var(--mist-14); }
.site-header.is-over-photo .logo-on-light { display: none; }
.site-header.is-over-photo .logo-on-dark { display: block; }
.site-header.is-over-photo .btn-book:not(.is-filled), .site-header.is-over-photo .menu-btn { border-color: var(--mist-50); color: var(--mist); }
.site-header.is-over-photo .btn-book:not(.is-filled):hover, .site-header.is-over-photo .menu-btn:hover { background: var(--mist-10); }
.site-header .header-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.site-header .header-wa { display: none; }
@media (min-width: 1024px) {
  .site-header { height: 80px; }
  .site-header .brand img { height: 36px; }
  .site-header .header-wa { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 15px; font-weight: 500; text-decoration: none; }
  .site-header .header-wa:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: flex; align-items: center; gap: 28px; margin-left: 16px; }
  .site-nav a { position: relative; padding: 8px 0; color: inherit; font-size: 15px; font-weight: 500; text-decoration: none; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
  .site-header.is-over-photo .site-nav a::after { background: var(--mist); }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
}
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--edge); border-radius: var(--r-2); background: transparent; color: inherit; }
.site-header .btn-book { display: none; height: 44px; }
@media (min-width: 1024px) { .menu-btn { display: none; } .site-header .btn-book { display: inline-flex; } }
.site-drawer .site-drawer-nav { display: flex; flex-direction: column; }
.site-drawer .site-drawer-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 18px; font-weight: 500; text-decoration: none; }
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--hair);
  transform: translateY(110%); transition: transform var(--dur-2) var(--ease-out);
}
.action-bar.is-shown { transform: none; }
.action-bar > .btn:not(.btn-icon) { flex: 1; height: 56px; }
.action-bar > .btn-icon { width: 48px; min-width: 48px; height: 48px; }
@media (min-width: 1024px) { .action-bar { display: none; } }
.hero { position: relative; display: flex; align-items: flex-end; min-height: max(560px, 78svh); overflow: hidden; background: var(--pine); color: var(--mist); }
@media (min-width: 1024px) { .hero { min-height: min(88vh, 860px); } }
.hero > .photo, .hero > picture, .hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero > .photo, .hero > picture > img { animation: aj-settle var(--dur-5) var(--ease-out) both; }
.hero-words { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hero-words .t-display { max-width: 11em; }
.hero-words .t-h1 { max-width: 13em; }
.hero-words .t-lede { color: var(--mist); }
.scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim) 0%, var(--scrim-clear) 55%); pointer-events: none; }
.photo { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--sunken); border-radius: var(--r-0); }
img.photo { color: transparent; }
.photo-band { position: relative; background: var(--sunken); }
.photo-band > .photo, .photo-band > picture > img { aspect-ratio: 4 / 3; min-height: 280px; }
@media (min-width: 1024px) { .photo-band > .photo, .photo-band > picture > img { aspect-ratio: 21 / 9; min-height: 520px; max-height: 760px; } }
.photo-panel { position: relative; padding: 28px var(--gutter) 32px; background: var(--green); color: var(--mist); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1024px) { .photo-panel { position: absolute; left: var(--gutter); bottom: 0; width: min(520px, 40%); padding: 40px; } }
.statement-band, .cta-band { padding-block: var(--section-y); background: var(--green); color: var(--mist); }
.statement-band .container, .cta-band .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
.cta-band .t-h2, .statement-band .t-h1 { max-width: 18ch; }
.arch { position: relative; display: block; aspect-ratio: 4 / 5; min-width: 240px; overflow: hidden; border-radius: var(--r-arch); background: var(--sunken); }
.arch > img, .arch > picture > img, .arch > .photo { width: 100%; height: 100%; object-fit: cover; }
/* The photo inside rises; the arch itself is observed (a clip-path on it would hide it from IntersectionObserver) */
.arch-rise { background: transparent; }
.arch-rise > * { clip-path: inset(0); transition: clip-path var(--dur-4) var(--ease-out); }
.arch-rise.is-pending > * { clip-path: inset(100% 0 0 0); }
.arch-rise.is-instant > * { transition: none; }
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.index-row .t-h3 { color: var(--text); transition: color var(--dur-1); grid-column: 1; }
.index-row .index-fact { grid-column: 1; grid-row: 2; font-size: 14px; color: var(--text-2); }
.index-row .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--text-2); transition: transform var(--dur-2) var(--ease-out), color var(--dur-1); }
.index-row:hover .t-h3 { color: var(--heading); }
.index-row:hover .icon { transform: translateX(4px); color: var(--heading); }
@media (min-width: 720px) {
  .index-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .index-row .index-fact { grid-column: 2; grid-row: 1; text-align: right; }
  .index-row .icon { grid-column: 3; grid-row: 1; }
}
.qa { border-top: 1px solid var(--line); }
.qa > details, details.qa { border-bottom: 1px solid var(--line); }
details.qa { border-top: 0; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor; transition: transform var(--dur-2) var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.qa details[open] > summary::after, details.qa[open] > summary::after { transform: rotate(45deg); }
.qa details > :not(summary), details.qa > :not(summary) { padding-bottom: 20px; color: var(--text-2); max-width: 65ch; }
.site-footer { background: var(--pine); color: var(--mist-2); padding-block: 64px 32px; font-size: 14px; }
.site-footer a { color: var(--mist-2); text-decoration: none; }
.site-footer a:hover { color: var(--mist); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }
.site-footer .lockup img:first-child { height: 64px; width: auto; }
.site-footer .lockup img:last-child { height: 36px; width: auto; }
.site-footer .footer-cols { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; overflow-wrap: anywhere; }
@media (max-width: 599px) { .site-footer .footer-cols > :first-child, .site-footer .footer-cols > :last-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .site-footer .footer-cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); margin-top: 0; } }
.site-footer .footer-cols h2 { color: var(--mist); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.site-footer .footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer .legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair-d); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.chat-launcher { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-bar); width: 48px; height: 48px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-float); border-color: var(--field); }
body:has(.action-bar.is-shown) .chat-launcher { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body:has(.action-bar.is-shown) .chat-launcher { bottom: 24px; } .chat-launcher { right: 24px; bottom: 24px; } }

/* ============================== 23. Brand ============================== */
.star { display: inline-block; flex: none; width: 16px; height: 16px; color: var(--vermilion); vertical-align: middle; line-height: 0; }
.star svg { width: 100%; height: 100%; }
.star path { fill: currentColor; }
.star.s12 { width: 12px; height: 12px; } .star.s16 { width: 16px; height: 16px; } .star.s22 { width: 22px; height: 22px; } .star.s32 { width: 32px; height: 32px; }
.star-draw path { stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: aj-draw 400ms var(--ease-out) forwards, aj-fill 300ms var(--ease-out) 300ms forwards; }
.seal { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-1); background: var(--vermilion); color: var(--paper); }
.seal svg { width: 55%; height: 55%; }
.seal path { fill: currentColor; }
.seal.s40 { width: 40px; height: 40px; } .seal.s48 { width: 48px; height: 48px; } .seal.s56 { width: 56px; height: 56px; }
.seal.is-pressed { animation: aj-seal var(--dur-2) var(--ease-out) both; }
.seal-wrap { display: inline-flex; align-items: center; gap: 12px; }
.seal-caption { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; }
.mcard {
  position: relative; display: block; width: 100%; max-width: 380px; aspect-ratio: 1.586;
  border-radius: var(--r-3); overflow: hidden;
  background: var(--paper); color: var(--ink); border: 1px solid var(--hair);
  font-family: var(--sans); text-decoration: none;
}
.mcard[data-tier="jade"] { background: var(--green-high); color: var(--mist); border-color: transparent; }
.mcard[data-tier="vermilion"] { background: var(--pine); color: var(--mist); border-color: var(--hair-d); }
.mcard-window { position: absolute; top: 14px; left: 14px; bottom: 14px; width: calc(38% - 28px); border-radius: var(--r-arch); background: var(--celadon); }
.mcard[data-tier="jade"] .mcard-window { background: var(--green); }
.mcard[data-tier="vermilion"] .mcard-window { background: var(--green-high); }
.mcard-window .star { position: absolute; left: 50%; top: 32%; width: 22px; height: 22px; transform: translate(-50%, -50%); color: var(--green); }
.mcard[data-tier="jade"] .mcard-window .star, .mcard[data-tier="vermilion"] .mcard-window .star { color: var(--mist); }
.mcard.is-mine .mcard-window .star { color: var(--vermilion); }
.mcard-body { position: absolute; top: 11px; right: 16px; bottom: 16px; left: 38%; display: flex; flex-direction: column; min-width: 0; }
.mcard-tier { font-size: 28px; font-style: italic; line-height: 1; color: inherit; }
.mcard-name { margin-top: auto; font-size: 16px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-no { font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mcard-since { font-size: 13px; opacity: .78; }
.mcard[data-tier="member"] .mcard-since { color: var(--ink-2); opacity: 1; }
.wallet { display: grid; max-width: 380px; }
.wallet > .mcard { grid-area: 1 / 1; }
.wallet > .mcard:nth-child(2) { transform: translateY(40px); }
.wallet > .mcard:nth-child(3) { transform: translateY(80px); }
.wallet > .mcard:nth-child(4) { transform: translateY(120px); }
.wallet:has(> .mcard:nth-child(2)) { padding-bottom: 40px; }
.wallet:has(> .mcard:nth-child(3)) { padding-bottom: 80px; }
.wallet:has(> .mcard:nth-child(4)) { padding-bottom: 120px; }
.name-board { display: block; padding: 16px 20px; background: var(--paper); color: var(--ink); border-radius: var(--r-0); font-family: var(--sans); font-size: 24px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; letter-spacing: 0; }
.doc-wrap { background: var(--inset); padding: 24px 0; }
@media (min-width: 600px) { .doc-wrap { padding: 32px 16px; } }
.doc { max-width: 760px; margin-inline: auto; padding: 24px 20px; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.5; }
@media (min-width: 600px) { .doc { padding: 32px; } }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.doc-title { font-size: 28px; line-height: 1.1; }
.doc-ref { margin-top: 6px; font-weight: 600; }
.doc-seal { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.doc-seal .seal-caption { font-size: 13px; }
.doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 20px 0; margin: 0; }
.doc-meta dt { color: var(--ink-2); font-size: 13px; }
.doc-meta dd { margin: 2px 0 0; font-weight: 500; }
.doc .ledger { margin-top: 4px; }
.doc-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 13px; }

/* ============================== 24. Map ============================== */
.map { display: block; width: 100%; height: 100%; font-family: var(--sans); }
.map-sea { fill: var(--map-sea); }
.map-land { fill: var(--map-land); }
.map-coast { fill: none; stroke: var(--map-coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-road { fill: none; stroke: var(--map-road); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-xway { fill: none; stroke: var(--map-xway); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-label { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.map-airport { fill: none; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
text.map-airport, .map-airport text { fill: var(--ink); stroke: none; font-size: 12px; font-weight: 600; }
.map-f1 { fill: var(--ink-2); fill-opacity: .12; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.map-f1-hatch { stroke: var(--ink-2); stroke-opacity: .35; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.map-note { fill: var(--ink-3); font-size: 12px; }
.map[data-map-theme="night"] .map-sea { fill: var(--map-sea-d); }
.map[data-map-theme="night"] .map-land { fill: var(--map-land-d); }
.map[data-map-theme="night"] .map-coast { stroke: var(--map-coast-d); }
.map[data-map-theme="night"] .map-road { stroke: var(--map-road-d); }
.map[data-map-theme="night"] .map-xway { stroke: var(--map-xway-d); }
.map[data-map-theme="night"] .map-label { fill: var(--mist-2); }
.map[data-map-theme="night"] .map-airport { stroke: var(--mist-2); }
.map[data-map-theme="night"] text.map-airport, .map[data-map-theme="night"] .map-airport text { fill: var(--mist); }
.map[data-map-theme="night"] .map-f1 { fill: var(--mist); fill-opacity: .08; stroke: var(--mist); stroke-opacity: .5; }
.map[data-map-theme="night"] .map-f1-hatch { stroke: var(--mist); stroke-opacity: .3; }
.map[data-map-theme="night"] .map-note { fill: var(--mist-2); }
.map-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-1); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
g.map-tag rect { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1; }
g.map-tag text { fill: var(--ink); font-size: 12px; font-weight: 600; }
.map[data-map-theme="night"] g.map-tag rect { fill: var(--green-raised); stroke: var(--hair-d); }
.map[data-map-theme="night"] g.map-tag text { fill: var(--mist); }
.map-pop { padding: 10px 12px; background: var(--surface); color: var(--text); border-radius: var(--r-2); box-shadow: var(--shadow-float); font-size: 13px; line-height: 1.4; }
.map-ctrl { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-2); }
.route-left { fill: none; stroke: var(--vermilion); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-left.is-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: aj-draw var(--dur-4) var(--ease-out) forwards; }
.route-done { fill: none; stroke: var(--mist); stroke-opacity: .3; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.route-driven, .route-remaining { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.route-remaining { stroke-dasharray: 6 4; }
.route-nav { fill: none; stroke: var(--green); stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map[data-map-theme="night"] .route-driven, .map[data-map-theme="night"] .route-remaining, .map[data-map-theme="night"] .route-nav { stroke: var(--mist); }
.pin-pickup { fill: var(--map-land); stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pin-dropoff { fill: var(--green); }
.pin-stop { fill: var(--map-land); stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map[data-map-theme="night"] .pin-pickup, .map[data-map-theme="night"] .pin-stop { fill: var(--map-land-d); stroke: var(--mist); }
.map[data-map-theme="night"] .pin-dropoff { fill: var(--mist); }
.pin-car { fill: var(--vermilion); stroke: var(--pine); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map:not([data-map-theme="night"]) .pin-car { stroke: var(--paper); }
.pin-car-heading { fill: var(--mist); }
.pin-halo { fill: none; stroke: var(--vermilion); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: aj-halo var(--dur-live) var(--ease-out) infinite; }
.pin-star { fill: var(--vermilion); }
.pin-chauffeur { fill: var(--green); stroke: var(--map-land); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pin-chauffeur.is-free { fill: var(--map-land); stroke: var(--green); }
.pin-chauffeur.is-selected { fill: var(--vermilion); stroke: var(--map-land); }
.map[data-map-theme="night"] .pin-chauffeur { fill: var(--mist); stroke: var(--map-land-d); }
.map[data-map-theme="night"] .pin-chauffeur.is-free { fill: var(--map-land-d); stroke: var(--mist); }
.map[data-map-theme="night"] .pin-chauffeur.is-selected { fill: var(--vermilion); }

/* ============================== 25. Motion ============================== */
.is-entering { animation: aj-fade-rise var(--dur-2) var(--ease-out) both; }
.rise-in { animation: aj-rise var(--dur-4) var(--ease-out) both; }
.swap-in { animation: aj-swap 120ms var(--ease-out) both; }
@keyframes aj-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes aj-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes aj-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-fade-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-swap { from { opacity: 0; } to { opacity: 1; } }
@keyframes aj-pop-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-toast-out { from { opacity: 1; } to { transform: translateY(4px); opacity: 0; } }
@keyframes aj-changed { from { background-color: var(--ok-bg); } to { background-color: var(--surface); } }
@keyframes aj-skel { to { transform: translateX(100%); } }
@keyframes aj-typing { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes aj-halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes aj-draw { to { stroke-dashoffset: 0; } }
@keyframes aj-fill { to { fill-opacity: 1; } }
@keyframes aj-seal { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes aj-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aj-cell { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: none; } }
.is-changed:not(tr) { animation: aj-changed 2s var(--ease-in-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .hero > .photo, .hero > picture > img { animation: none !important; }
  .arch-rise.is-pending > * { clip-path: inset(0); }
  .pin-halo { animation: none !important; transform: scale(1.6); opacity: .6; stroke-width: 1; }
  .skel::after, .btn.is-loading::after, .progress.is-indeterminate > span { animation: none !important; }
  .btn.is-loading::after { width: 100%; opacity: .4; transform: none; }
  .typing > span { animation: none !important; opacity: .6; }
  .star-draw path { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }

/* ============================== 26. Print ============================== */
@media print {
  html, body { background: var(--paper) !important; }
  .app-header, .tabbar, .app-bar, .app-side, .sidebar, .topbar, .bottomnav, .action-bar, .chat-launcher, .toast-region, .sheet-backdrop, .notice-bar, .site-header, .site-footer, .no-print { display: none !important; }
  .doc-wrap { background: none; padding: 0; }
  .doc { max-width: none; padding: 0; }
  .console { display: block; }
}
.rcpt-tap { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-1); flex: none; }
.ch-me-claim .rcpt-thumb, .ch-me-claim .rcpt-tap { margin-left: 12px; align-self: center; }