/* =====================================================================================
   Driftr theme.css: "Oat Milk Morning" (light, default) and charcoal (dark), with Geist.
   v45 foundation. Loads AFTER styles.css, so equal specificity wins. styles.css is never
   edited for the look; everything visual for v45 lives here.

   Sources: handoff/design/APPROVED.md (approved tokens, FINAL EDGES, no scrollbars) and
   the design system SYSTEM.md (components, type, rules). Three rules carry it all:
     1. Raised means you can tap it.   2. Pressed means a path, or what is selected.
     3. Brass means now (one brass region per screen). Sage means done, always with a word.

   Theme switch: html[data-theme="light" | "dark"], set by the inline script in index.html
   from localStorage "driftr.theme". No attribute (or "auto") follows the OS.

   Sections
     1. Tokens (light on :root, charcoal on html[data-theme="dark"] and in the OS-dark media)
     2. Base (Geist, page, no scrollbars, focus ring, motion)
     3. Legacy bridge (old custom properties + old component selectors restyled)
     4. New components, prefixed "d-" so they never clash with legacy names

   NEW COMPONENTS (for the v45 builders). All work in both themes with no extra classes.
     .d-num            tabular numerals for every time, date, price, count, countdown
     .d-t-display / .d-t-title / .d-t-head / .d-t-body / .d-t-body-sm / .d-t-label / .d-t-micro
                       the type scale (30 / 22 / 18 / 17 / 15 / 13 / 12 px, rem based)
     .d-muted          secondary text color (--ink-2)
     .d-ic, .d-ic-sm   inline stroke icon (22 / 18 px, 1.75 stroke, currentColor)
     .d-btn            raised secondary button, pill, 44 px min. Pressed on :active.
       .d-btn-primary  brass fill, #1F1D1A text. One per screen, specific verb.
       .d-btn-quiet    text button, no surface (Undo, Not now, Whole day >)
       .d-btn-icon     44 px round icon-only button (needs aria-label)
       .d-btn-wide     full width, 48 px          .d-btn-slab  full-width 52 px slab, label left, hint right
       .d-btn-danger   quiet destructive word in --alert-ink
     .d-chip           36 px visual / 44 px hit. Raised off, pressed on: [aria-pressed="true"] or .is-on
     .d-card           the one focal card per screen (145deg card surface, raise)
     .d-scrim          flat neutral dim behind a sheet (never blurred)
     .d-sheet          bottom sheet. Children: .d-grabber + .d-sheet-head stay pinned,
                       .d-sheet-body is the only part that scrolls, .d-sheet-foot pins the primary
     .d-grabber        the pressed handle at the top of a sheet
     .d-seg            segmented control: pressed track, selected button raised
                       (button[aria-pressed="true"] or .is-on)
     .d-toggle         switch: <button class="d-toggle" role="switch" aria-checked="true"><i></i></button>
     .d-field          label above + .d-input (pressed field, visible focus ring) + .d-help / .d-error
     .d-toast          raised toast with one .d-btn-quiet Undo
     .d-av             photo avatar circle (img object-fit cover) with initials fallback.
                       Fills .d-av-1 .. .d-av-4 (or auto-cycled inside .d-av-stack). Sizes .d-av-sm (28) .d-av-lg (64)
     .d-av-stack       overlapping faces (max 4) then .d-av-more "+n"; the stack is one link
     .d-road           the road: pressed groove + dashed brass center line down the left edge.
                       Children that sit on it get .d-on-road. .d-road-end stops the bottom fade.
     .d-pebble         stop marker on the road. Variants: .d-pebble-done (sage), .d-pebble-now (brass),
                       .d-pebble-leg (raised, holds an <i> leg glaze dot), .d-pebble-sealed (pressed, surprise)
     .d-row            item row: .d-row-main (.d-row-time + .d-row-title), optional trailing
                       .d-row-walk button (walk icon + minutes), then .d-row-caret chevron. Whole row is the target.
     .d-gap-note       walk gap line between rows ("6 min walk")
     .d-status         status word + icon; .d-status-done (sage-ink) .d-status-todo (ink-2)
     .d-topbar, .d-logo-tile, .d-topbar-title    the slim top bar (logo tile stays white)
     .d-nav, .d-tab, .d-tab-well, .d-tab-dot      bottom tab bar; current tab: [aria-current="page"]
     .d-pinned-top     sticks to the top; draws its hairline only once content slides under it
     .d-pinned-bottom  sticks to the bottom (thumb zone), respects the home indicator
   ===================================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  color-scheme:light;
  /* color: approved light set */
  --ground:#EFE8DD; --page:#E6DED1; --well:#E8DFD1;
  --card-a:#F3EDE3; --card-b:#EBE3D6; --card:linear-gradient(145deg,var(--card-a),var(--card-b));
  --hi:#FBF8F2; --lo:#D3C8B6; --press-hi:#FFFFFF; --press-lo:#CEC2AE;
  --ink:#1F1D1A; --ink-2:#5F5A52; --line:rgba(31,29,26,.10);
  --brass:#C9A25A; --brass-a:#D4AE66; --brass-b:#C29A50; --brass-ink:#7E5A1C; --on-brass:#1F1D1A;
  --road:rgba(126,90,28,.45);
  --sage:#7D8F74; --sage-ink:#4F6247; --terra-ink:#9C4524; --alert-ink:#9C4524;
  --alert-bg:rgba(156,69,36,.08); --alert-line:rgba(156,69,36,.30);
  --tile:#FFFFFF; --scrim:rgba(31,29,26,.40);
  /* leg glazes by leg order (v45 R4); no place-named tokens */
  --glaze-1:#C8763C; --glaze-2:#7A8C46; --glaze-3:#3F8FA3;
  --av-1:#4F6147; --av-2:#8A4A30; --av-3:#74561F; --av-4:#44464C; --on-av:#F6F0E4;
  /* depth: FINAL EDGES (APPROVED.md), exactly */
  --e2:6px 6px 16px rgba(160,140,108,.36),-6px -6px 15px #FFFFFF,inset 1px 1px 0 rgba(255,255,255,.95);
  --e1:3px 3px 7px rgba(160,140,108,.36),-3px -3px 7px #FFFFFF,inset 1px 1px 0 rgba(255,255,255,.9);
  --in:inset 3px 3px 7px #CEC2AE,inset -3px -3px 7px #FFFFFF;
  --in-sm:inset 1px 1px 2px #CEC2AE,inset -1px -1px 2px #FFFFFF;
  --sheet-shadow:0 -8px 24px rgba(160,140,108,.30);
  /* centered popups sit on the scrim: a soft drop only, no white top-left half (it reads as a halo there) */
  --pop-shadow:0 14px 34px rgba(31,29,26,.24),0 2px 6px rgba(31,29,26,.10),inset 1px 1px 0 rgba(255,255,255,.95);
  --raise:var(--e2); --raise-sm:var(--e1); --press:var(--in);
  /* type */
  --font:'Geist',system-ui,sans-serif;
  --fs-display:1.875rem; --fs-title:1.375rem; --fs-head:1.125rem; --fs-body:1.0625rem;
  --fs-body-sm:.9375rem; --fs-label:.8125rem; --fs-micro:.75rem;
  /* space, size, radii, motion */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --gutter:20px; --tap:44px;
  --r-sm:12px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --select-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235F5A52' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");

  /* legacy bridge: the old names now point at the new palette */
  --bg:var(--ground); --panel:var(--ground); --panel-2:var(--well);
  --muted:var(--ink-2); --gold:var(--ink); --done:var(--ink-2); --radius:var(--r-md);
  --danger:var(--alert-ink); --danger-bg:var(--alert-bg); --danger-line:var(--alert-line);
  --prg:var(--glaze-1); --por:var(--glaze-2); --lis:var(--glaze-3);
}
/* charcoal: explicit choice */
html[data-theme="dark"]{
  color-scheme:dark;
  --ground:#1D1D20; --page:#141416; --well:#19191C;
  --card-a:#222225; --card-b:#1A1A1D;
  --hi:#2A2A2E; --lo:#0F0F11; --press-hi:#2A2A2E; --press-lo:#0F0F11;
  --ink:#EEE8DE; --ink-2:#A8A196; --line:rgba(238,232,222,.10);
  --brass:#C9A25A; --brass-ink:#DDB872; --on-brass:#1F1D1A; --road:rgba(221,184,114,.38);
  --sage:#7D8F74; --sage-ink:#A7BA9C; --terra-ink:#E09570; --alert-ink:#E09570;
  --alert-bg:rgba(224,149,112,.12); --alert-line:rgba(224,149,112,.35);
  --scrim:rgba(0,0,0,.55);
  --glaze-1:#C8763C; --glaze-2:#A3B56E; --glaze-3:#3F8FA3;
  --e2:6px 6px 16px rgba(0,0,0,.42),-6px -6px 16px rgba(255,255,255,.05),inset 1px 1px 0 rgba(255,255,255,.06);
  --e1:3px 3px 7px rgba(0,0,0,.42),-3px -3px 7px rgba(255,255,255,.05),inset 1px 1px 0 rgba(255,255,255,.06);
  --in:inset 3px 3px 7px #0F0F11,inset -3px -3px 7px #2A2A2E;
  --in-sm:inset 1px 1px 2px #0F0F11,inset -1px -1px 2px #2A2A2E;
  --sheet-shadow:0 -8px 24px rgba(0,0,0,.45);
  --pop-shadow:0 14px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.30),inset 1px 1px 0 rgba(255,255,255,.06);
  --select-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A8A196' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}
/* charcoal: "auto" follows the OS (same set as above, kept in step by hand) */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#1D1D20; --page:#141416; --well:#19191C;
    --card-a:#222225; --card-b:#1A1A1D;
    --hi:#2A2A2E; --lo:#0F0F11; --press-hi:#2A2A2E; --press-lo:#0F0F11;
    --ink:#EEE8DE; --ink-2:#A8A196; --line:rgba(238,232,222,.10);
    --brass:#C9A25A; --brass-ink:#DDB872; --on-brass:#1F1D1A; --road:rgba(221,184,114,.38);
    --sage:#7D8F74; --sage-ink:#A7BA9C; --terra-ink:#E09570; --alert-ink:#E09570;
    --alert-bg:rgba(224,149,112,.12); --alert-line:rgba(224,149,112,.35);
    --scrim:rgba(0,0,0,.55);
    --glaze-1:#C8763C; --glaze-2:#A3B56E; --glaze-3:#3F8FA3;
    --e2:6px 6px 16px rgba(0,0,0,.42),-6px -6px 16px rgba(255,255,255,.05),inset 1px 1px 0 rgba(255,255,255,.06);
    --e1:3px 3px 7px rgba(0,0,0,.42),-3px -3px 7px rgba(255,255,255,.05),inset 1px 1px 0 rgba(255,255,255,.06);
    --in:inset 3px 3px 7px #0F0F11,inset -3px -3px 7px #2A2A2E;
    --in-sm:inset 1px 1px 2px #0F0F11,inset -1px -1px 2px #2A2A2E;
    --sheet-shadow:0 -8px 24px rgba(0,0,0,.45);
    --pop-shadow:0 14px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.30),inset 1px 1px 0 rgba(255,255,255,.06);
    --select-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A8A196' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  }
}

/* ---------- 2. BASE ---------- */
/* No scrollbars, anywhere. Everything still scrolls by touch, wheel and keyboard. */
*{scrollbar-width:none;}
*::-webkit-scrollbar{display:none;}

html{background:var(--page);}
body{
  background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:1rem;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* times, prices and counts appear inside free text all over the legacy views: tabular everywhere */
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px;}
::selection{background:rgba(201,162,90,.35);color:inherit;}

#app{background:var(--ground);}
.screen{padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right));animation:d-settle 200ms var(--ease);}
@keyframes d-settle{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes d-rise{from{opacity:.4;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes d-fade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .screen,.modal,.pop,.qrviewer,.d-sheet{animation:d-fade 120ms linear;}
  .backdrop,.d-scrim{animation:d-fade 120ms linear;}
  .toggle i,.d-toggle i,.onbbar i,.dayprog-bar i{transition:none;}
}

/* ---------- 3. LEGACY BRIDGE ---------- */

/* top bar: slim, pinned, hairline only once content slides under it */
.topbar{background:var(--ground);border-bottom:1px solid transparent;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 0 12px;}
@supports (animation-timeline: scroll()){
  .topbar,.d-pinned-top{animation:d-hairline linear both;animation-timeline:scroll(root);animation-range:0 12px;}
  @keyframes d-hairline{from{border-bottom-color:transparent;}to{border-bottom-color:var(--line);}}
}
@supports not (animation-timeline: scroll()){
  .topbar,.d-pinned-top{border-bottom-color:var(--line);}
}
.icbtn{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--ground);border:0;box-shadow:var(--e1);color:var(--ink);font-size:1.05rem;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.icbtn:active{background:var(--ground);box-shadow:var(--in);}
.topttl{font:600 var(--fs-body-sm)/1.3 var(--font);letter-spacing:0;color:var(--ink);}
/* the logo keeps its white tile: no filter, no crop, no recolor */
.toplogo{height:var(--tap);max-width:160px;padding:6px 10px;border-radius:var(--r-sm);background:var(--tile);box-shadow:var(--e1);}
.avatar{width:var(--tap);height:var(--tap);background:var(--av-1);color:var(--on-av);font:600 .875rem/1 var(--font);box-shadow:var(--e1);cursor:pointer;}
.avatar.ring{width:var(--tap);height:var(--tap);padding:3px;background:conic-gradient(var(--brass) var(--pct), var(--well) 0);}
.avatar.ring>.avatar{width:38px;height:38px;box-shadow:none;}
.clockchip{display:none !important;} /* owner rule: no clock */
.badge{top:-3px;right:-3px;background:var(--sage-ink);color:var(--ground);border:0;box-shadow:0 0 0 2px var(--ground);font:600 .6875rem/1 var(--font);min-width:18px;height:18px;}
.bell.pulse{animation:none;}

/* headings */
.banner{font:600 var(--fs-display)/1.2 var(--font);letter-spacing:-.025em;margin:20px 0 14px;color:var(--ink);}
.sect{font:600 var(--fs-head)/1.33 var(--font);letter-spacing:-.01em;margin:28px 0 8px;}
.seeall{font:600 var(--fs-body-sm)/1.3 var(--font);color:var(--ink);}
.setgrp{font:600 var(--fs-label)/1.4 var(--font);text-transform:none;letter-spacing:0;color:var(--ink-2);margin:28px 0 4px;}
.note{font:400 var(--fs-label)/1.45 var(--font);font-style:normal;color:var(--ink-2);}
.empty{font:400 var(--fs-body-sm)/1.45 var(--font);color:var(--ink-2);}

/* inputs: pressed fields with a visible focus ring */
.search,.fld{min-height:48px;background:var(--well);border:0;box-shadow:var(--in);border-radius:var(--r-md);padding:12px 16px;color:var(--ink);font:400 1rem/1.4 var(--font);}
.search{margin-top:4px;}
.search::placeholder,.fld::placeholder{color:var(--ink-2);opacity:1;}
.search:focus,.fld:focus{outline:2px solid var(--brass-ink);outline-offset:2px;}
select.fld{background-color:var(--well);background-image:var(--select-caret);background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
textarea.fld{min-height:96px;line-height:1.45;}
textarea.pastebox{font:400 .875rem/1.45 var(--font);}
.row2{gap:12px;}
.typeahead{background:var(--card);border:0;box-shadow:var(--e2);border-radius:var(--r-md);margin-top:8px;}
.tarow{min-height:var(--tap);display:flex;align-items:center;padding:10px 16px;font-size:var(--fs-body-sm);border-bottom:1px solid var(--line);}
.tarow:active,.tarow:hover{background:var(--well);}

/* chips: raised when off, pressed when on; 36 px visual, 44 px hit */
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 14px;border:0;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:500 .875rem/1.3 var(--font);cursor:pointer;transition:box-shadow 120ms var(--ease);}
.chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}
.chip.on{background:var(--well);box-shadow:var(--in);color:var(--ink);font-weight:600;}
.chip.sm{min-height:28px;padding:3px 10px;font:500 .75rem/1.3 var(--font);}
.chip.love{background:var(--well);box-shadow:var(--in);color:var(--ink);font-weight:600;}
.chip.skip{color:var(--ink-2);}
.chip.sm.rel{color:var(--ink-2);border:0;}
.chip.policy{font:500 var(--fs-body-sm)/1.4 var(--font);border-radius:var(--r-md);justify-content:flex-start;}
.subtog,.visrow{gap:8px;}
.aichips .chip{color:var(--ink);border-radius:var(--r-md);font:600 var(--fs-body-sm)/1.3 var(--font);}
.aichips .chip small{color:var(--ink-2);font-size:.75rem;}
.vibechip .chip{color:var(--ink);border:0;}

/* list cards (trips on Home): raised card surface, no borders */
.trip{background:var(--card);border:0;box-shadow:var(--e2);border-radius:var(--r-md);padding:16px 18px;margin:14px 0;cursor:pointer;}
.trip h3{font:600 var(--fs-head)/1.33 var(--font);letter-spacing:-.01em;margin:0 0 4px;}
.trip:has(.draft) h3{padding-right:120px;}
.trip .meta{font:400 var(--fs-body-sm)/1.4 var(--font);color:var(--ink-2);}
.trip .row{margin-top:12px;gap:8px;}
.trip.invited,.trip.waiting{border:0;}
.waitline{color:var(--ink-2);}
.rolechip,.urole{font:500 .75rem/1.3 var(--font);letter-spacing:0;text-transform:capitalize;border-radius:var(--r-pill);padding:3px 10px;color:var(--ink-2);background:var(--well);}
.rolechip.member,.rolechip.manager,.urole.owner,.urole.manager,.urole.member{color:var(--ink-2);background:var(--well);}
.draft{top:16px;right:16px;font:500 .75rem/1.3 var(--font);letter-spacing:0;text-transform:lowercase;color:var(--ink-2);background:var(--well);border-radius:var(--r-pill);padding:3px 10px;}
.draft::first-letter{text-transform:uppercase;}
.usertag{font:500 .75rem/1.3 var(--font);letter-spacing:0;color:var(--ink-2);background:var(--well);border-radius:var(--r-pill);padding:2px 8px;}

/* avatars: deep ceramic fills with cream initials; photos fill the circle */
.av,.miniav{background:var(--av-4);color:var(--on-av);border:0;font-weight:600;}
.miniav{box-shadow:0 0 0 2px var(--ground);margin-left:-6px;}
.av.avkid,.miniav.avkid{background:var(--av-3);border:0;color:var(--on-av);}
.miniav.more{background:var(--ground);color:var(--ink-2);box-shadow:var(--e1),0 0 0 2px var(--ground);}
.rstack .miniav:nth-of-type(4n+1),.invstack .miniav:nth-of-type(4n+1),.withfaces .miniav:nth-of-type(4n+1){background:var(--av-1);}
.rstack .miniav:nth-of-type(4n+2),.invstack .miniav:nth-of-type(4n+2),.withfaces .miniav:nth-of-type(4n+2){background:var(--av-2);}
.rstack .miniav:nth-of-type(4n+3),.invstack .miniav:nth-of-type(4n+3),.withfaces .miniav:nth-of-type(4n+3){background:var(--av-3);}
.rstack .miniav.more,.invstack .miniav.more,.withfaces .miniav.more{background:var(--ground);color:var(--ink-2);}
.herostack .miniav{border:0;box-shadow:0 0 0 2px var(--ground);}
.herostack .miniav.more{background:var(--ground);color:var(--ink);}

/* dashed add-boxes become raised slabs */
.addbtn{display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--ground);border:0;box-shadow:var(--e1);border-radius:var(--r-md);padding:12px 18px;color:var(--ink);font:600 1rem/1.25 var(--font);margin:16px 0 4px;transition:box-shadow 120ms var(--ease);}
.addbtn:active{background:var(--ground);box-shadow:var(--in);}
.addsub,.linkbtn,.aitog,.inapplink,.aibgo,.addname,.cmpcap{color:var(--ink);}
.linkbtn{font:600 var(--fs-body-sm)/1.3 var(--font);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;}

/* rows: flush on the ground, separated by air, no boxes and no dividers */
.listrow,.userrow,.mp,.notif,.setrow{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;}
.listrow{min-height:60px;padding:8px 0;gap:12px;cursor:pointer;}
.listrow:active,.setrow:active{background:transparent;opacity:.7;}
.ricon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--well);font-size:1.05rem;}
.rtext .rn{font:500 var(--fs-body)/1.35 var(--font);}
.rtext .rs{font:400 var(--fs-body-sm)/1.4 var(--font);color:var(--ink-2);}
.setrow{min-height:52px;padding:12px 0;font:400 var(--fs-body)/1.35 var(--font);gap:16px;cursor:pointer;}
.setrow .v{font:400 var(--fs-body-sm)/1.35 var(--font);color:var(--ink-2);}
.userrow{min-height:60px;padding:8px 0;gap:12px;}
.mp{min-height:52px;padding:8px 0;gap:12px;}
.mp.indent{margin-left:28px;}
.mp .nm{font-size:var(--fs-body-sm);}
.permline{font-size:var(--fs-label);color:var(--ink-2);}
.ptog{min-height:52px;padding:8px 0;font-size:var(--fs-body-sm);border-bottom:1px solid var(--line);}
.dayrow{border-top:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-label);}
.notif{padding:10px 0;font-size:var(--fs-body-sm);}
.notif.unread{background:var(--well);border-radius:var(--r-md);padding:10px 12px;}
.nsub{color:var(--ink-2);font-size:var(--fs-label);}

/* switches: pressed track, raised knob, sage when on */
.toggle{width:52px;height:32px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--in);position:relative;}
.toggle::before{content:"";position:absolute;inset:-6px -2px;}
.toggle i{top:4px;left:4px;width:24px;height:24px;background:var(--ground);box-shadow:var(--e1);transition:left 200ms var(--ease);}
.toggle.on{background:var(--sage);box-shadow:inset 2px 2px 5px rgba(0,0,0,.22);}
.toggle.on i{left:24px;}
html[data-theme="dark"] .toggle i{background:#3A3A3F;}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .toggle i{background:#3A3A3F;}}

/* checkboxes */
.ckbox,.ck{position:relative;width:24px;height:24px;border:0;border-radius:8px;background:var(--well);box-shadow:var(--in);color:transparent;}
.ckbox::after{content:"";position:absolute;inset:-10px;}
.ckbox.on,.ck.on{background:var(--sage);box-shadow:none;color:#FFFFFF;}

/* trip hero: no stripes, no colored wash. A flat well until a photo is set (photo comes inline). */
.hero{border:0;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--e2);margin:14px 0 8px;}
.heroimg{background:var(--well);background-size:cover;background-position:center;padding:10px;}
.editimg{font:500 .75rem/1.3 var(--font);background:var(--ground);border:0;box-shadow:var(--e1);border-radius:var(--r-pill);padding:4px 10px;color:var(--ink);}
.herobar{background:transparent;padding:12px 16px;gap:12px;}
.widget{font:400 var(--fs-body-sm)/1.3 var(--font);color:var(--ink-2);}
.nextbtn{min-height:var(--tap);padding:10px 18px;border:0;border-radius:var(--r-pill);background:linear-gradient(145deg,var(--brass-a),var(--brass-b));color:var(--on-brass);box-shadow:var(--e1);font:600 .9375rem/1.2 var(--font);}
.nextbtn:active{box-shadow:var(--in);}

/* leg bubbles and day strip: raised chips, the current one pressed; leg glaze only as a small dot */
.bubbles,.daystrip{gap:10px;padding:8px 4px 14px;margin:0 -4px;border-bottom:0;}
.bub{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:8px 16px;border:0;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:500 .9375rem/1.2 var(--font);cursor:pointer;}
.bub.active,.bub.leg0.active,.bub.leg1.active,.bub.leg2.active,.bub.leg3.active,.bub.leg4.active,.bub.tix.active,.bub.saved.active{background:var(--well);box-shadow:var(--in);color:var(--ink);font-weight:600;}
.bub.leg0::before,.bub.leg1::before,.bub.leg2::before,.bub.leg3::before,.bub.leg4::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;}
.bub.leg0::before{background:var(--glaze-1);}
.bub.leg1::before{background:var(--glaze-2);}
.bub.leg2::before{background:var(--glaze-3);}
.bub.leg3::before{background:#8A5A9A;}
.bub.leg4::before{background:#5A8A7A;}
.day{min-width:56px;min-height:56px;padding:8px 12px;border:0;border-radius:var(--r-md);background:var(--ground);box-shadow:var(--e1);color:var(--ink-2);font:500 .75rem/1.25 var(--font);cursor:pointer;}
.day b{font:600 1.0625rem/1.25 var(--font);color:var(--ink);}
.day.active{background:var(--well);box-shadow:var(--in);color:var(--ink);}

/* day progress */
.dayprog{gap:12px;margin:4px 0 12px;}
.dayprog-bar{height:8px;background:var(--well);box-shadow:var(--in-sm);}
.dayprog-bar i{background:var(--sage);}
.dayprog-txt{font:500 var(--fs-label)/1.3 var(--font);color:var(--ink-2);}
.geoprog{color:var(--ink-2);}

/* the day's stops ride on the road: pressed groove, dashed brass center line, a pebble per stop */
ul.stops{position:relative;padding-left:30px;}
ul.stops::before{content:"";position:absolute;left:2px;top:4px;bottom:4px;width:12px;border-radius:6px;background:var(--well);box-shadow:var(--in-sm);}
ul.stops::after{content:"";position:absolute;left:7px;top:12px;bottom:12px;border-left:2px dashed var(--road);}
ul.stops:empty::before,ul.stops:empty::after{display:none;}
li.stop,li.stop.meal,li.stop.activity,li.stop.transport,li.stop.lodging,li.stop.slot{position:relative;border:0;background:transparent;padding:12px 0;gap:12px;}
li.stop::before{content:"";position:absolute;left:-28px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--ink-2),0 0 0 3px var(--well);z-index:1;}
li.stop:has(.ckbox.on)::before{background:var(--sage);box-shadow:0 0 0 3px var(--well);}
li.stop.slot::before{background:var(--well);box-shadow:var(--in-sm),0 0 0 3px var(--well);}
.time{min-width:52px;color:var(--ink-2);padding-top:2px;}
.time b{font:600 .9375rem/1.2 var(--font);color:var(--ink);}
.time .ap{font:500 .6875rem/1 var(--font);text-transform:none;letter-spacing:0;color:var(--ink-2);}
.place{font:500 var(--fs-body)/1.35 var(--font);}
.placesub{font:400 var(--fs-body-sm)/1.4 var(--font);color:var(--ink-2);}
.chips{gap:8px;margin-top:6px;}
.pencil{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-2);padding:0;}
.pencil:active{box-shadow:var(--in);}
.rating{font:500 var(--fs-label)/1.3 var(--font);letter-spacing:0;color:var(--ink-2);min-height:28px;}
.rating small{color:var(--ink-2);font-size:.75rem;}
.rating.rate-cta{color:var(--ink-2);font-weight:600;}
.maplink,.osm a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}
.plink{border-bottom:1px dotted var(--ink-2);}
.slotbadge{font:600 .75rem/1.3 var(--font);color:var(--ink-2);background:var(--well);border-radius:var(--r-pill);padding:4px 10px;min-height:28px;}
.opt{background:transparent;border:0;border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-body-sm);}
.opt.win{background:var(--well);box-shadow:var(--in-sm);font-weight:600;}
.optrank{color:var(--ink-2);}
.votebtn,.imgbtn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 14px;border:0;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:600 .8125rem/1.2 var(--font);cursor:pointer;}
.votebtn:active,.imgbtn:active{box-shadow:var(--in);}
.imgbtn.sm{min-height:32px;padding:4px 12px;font-size:.75rem;}
.ridebtn{position:relative;min-height:28px;padding:3px 10px;border:0;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:500 .75rem/1.2 var(--font);}
.ridebtn::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}
.ridebtn:active{background:var(--ground);box-shadow:var(--in);}
/* small legacy controls keep their look but get a 44 px tall hit band */
.rating,.slotbadge,.imgbtn,.votebtn{position:relative;}
.rating::after,.slotbadge::after,.imgbtn::after,.votebtn::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}
.petchip{font:500 .75rem/1.3 var(--font);color:var(--ink-2);background:var(--well);border:0;border-radius:var(--r-pill);padding:2px 8px;}
.petchip.no{color:var(--alert-ink);}

/* grouping slabs (were bordered panels): the soft card surface replaces every border */
.legblock,.pubrow,.relask,.relrow,.crewcard,.subrow,.stylecard,.invitecard,.installcard,.aiprev,.tixcard,.instcard{background:var(--card);border:0;box-shadow:var(--e2);border-radius:var(--r-md);}
.legblock{padding:12px 14px;margin:12px 0;}
.pubrow{padding:14px 16px;margin:12px 0;}
.relask,.relrow{padding:14px;margin:12px 0;}
.invitecard.muted{border:0;}
.extrarow{background:var(--well);border:0;border-radius:var(--r-md);}
.legname{font:600 var(--fs-body)/1.3 var(--font);}
.legname small{color:var(--ink-2);font-size:var(--fs-label);}
.legthumb,.daythumb{width:40px;height:40px;border:0;border-radius:var(--r-sm);background:var(--well);}

/* buttons */
.btns{gap:12px;margin-top:20px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:0;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:600 1rem/1.25 var(--font);transition:box-shadow 120ms var(--ease);}
.btn:active{box-shadow:var(--in);}
.btn.save{background:linear-gradient(145deg,var(--brass-a),var(--brass-b));color:var(--on-brass);box-shadow:var(--e1);}
.btn.save:active{box-shadow:var(--in);}
.btn.del{background:var(--ground);color:var(--alert-ink);box-shadow:var(--e1);}
.btn.sm{min-height:var(--tap);padding:8px 16px;font-size:.875rem;}
.btn.quiet{background:transparent;box-shadow:none;color:var(--ink-2);font-weight:600;}
.btn.quiet:active{box-shadow:none;opacity:.7;}
.bigbtn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--r-pill);background:linear-gradient(145deg,var(--brass-a),var(--brass-b));color:var(--on-brass);box-shadow:var(--e1);font:600 1rem/1.25 var(--font);}
.bigbtn:active{box-shadow:var(--in);}
.installpill{background:linear-gradient(145deg,var(--brass-a),var(--brass-b));color:var(--on-brass);box-shadow:var(--e2);font:600 .9375rem/1.2 var(--font);}
.tixqrbtn{min-height:var(--tap);border:0;border-radius:var(--r-pill);background:var(--ground);color:var(--ink);box-shadow:var(--e1);font:600 .8125rem/1.2 var(--font);}
.tixqrbtn:active{opacity:1;box-shadow:var(--in);}

/* dialogs and sheets: flat neutral dim (no blur), sheet rises from the bottom with a grabber */
.backdrop{background:var(--scrim);animation:d-fade 200ms var(--ease);}
.modal{background:linear-gradient(180deg,var(--card-a),var(--ground) 120px);border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sheet-shadow);padding:10px var(--gutter) calc(24px + env(safe-area-inset-bottom));color:var(--ink);animation:d-rise 280ms var(--ease);}
.modal::before{content:"";display:block;width:36px;height:5px;margin:0 auto 14px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--in-sm);}
@media(min-width:431px){.modal{border-radius:var(--r-lg);box-shadow:var(--pop-shadow);}.modal::before{display:none;}.modal{padding-top:20px;}}
.modal h4{font:600 var(--fs-title)/1.27 var(--font);letter-spacing:-.02em;margin:0 0 6px;}
.modal .sub{font:400 var(--fs-body-sm)/1.45 var(--font);color:var(--ink-2);margin-bottom:12px;}
.modal label{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);margin:16px 0 6px;}
.pop{background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--pop-shadow);padding:22px 20px 20px;margin:0 var(--gutter);color:var(--ink);animation:d-settle 200ms var(--ease);}
.pop h5{font:600 var(--fs-head)/1.33 var(--font);letter-spacing:-.01em;margin:0 0 8px;}
.pop p{font:400 var(--fs-body-sm)/1.45 var(--font);color:var(--ink-2);}
.qrviewer{background:var(--card);border:0;box-shadow:var(--pop-shadow);border-radius:var(--r-lg);padding:20px;margin:0 var(--gutter);}
.qrclose{width:var(--tap);height:var(--tap);top:12px;right:12px;border:0;background:var(--ground);box-shadow:var(--e1);color:var(--ink);}
.qrtitle{font:600 var(--fs-head)/1.33 var(--font);margin:6px 48px 14px;}
/* QR, ticket and invite codes stay on white for scanners */
.qrbig,.tixqr,.qrsvg{background:var(--tile);}
.tixgrid{gap:14px;}
.tixcard{padding:14px;}
.tixname{font:600 var(--fs-body-sm)/1.3 var(--font);}
.tixsub{color:var(--ink-2);font-size:var(--fs-label);}
.tixgrouphead{font:600 var(--fs-label)/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--ink-2);margin:24px 0 10px;}
.tixdate{font:600 .75rem/1.3 var(--font);letter-spacing:0;text-transform:none;color:var(--sage-ink);}
/* the scan badge gets its colors inline from dialogs.js; keep it legible on both grounds */
.qrbadge{background:var(--well) !important;color:var(--ink) !important;border-radius:var(--r-pill);padding:4px 12px;font:600 .75rem/1.3 var(--font);}
/* rank, tokens, rating faces */
.tok,.emj{border:0;background:var(--ground);box-shadow:var(--e1);border-radius:var(--r-sm);}
.tok.on,.emj.on{border:0;background:var(--well);box-shadow:var(--in);}
.rankrow{background:var(--ground);border:0;box-shadow:var(--e1);border-radius:var(--r-md);min-height:52px;padding:8px 8px 8px 14px;font-size:var(--fs-body-sm);}
.rankrow .up,.rankrow .down{width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:var(--ground);box-shadow:var(--e1);color:var(--ink);}
.rankrow .up:active,.rankrow .down:active{box-shadow:var(--in);}
/* crop */
.cropvp{border:0;border-radius:var(--r-md);}
.cropstage{background:var(--well);box-shadow:var(--in);border:0;border-radius:var(--r-md);}
.cropctl input[type=range],.sliderrow input[type=range]{accent-color:var(--brass);}

/* toasts */
#toast,.undotoast{background:var(--card);border:0;box-shadow:var(--e2);border-radius:var(--r-md);color:var(--ink);font:400 var(--fs-body-sm)/1.4 var(--font);}
#toast{padding:14px 18px;}
#toast.err{border:0;color:var(--alert-ink);}
.undotoast{min-height:52px;padding:4px 8px 4px 16px;}
.undotoast button{color:var(--brass-ink);font:600 var(--fs-body-sm)/1.2 var(--font);}

/* sign in */
.login{background:var(--ground);gap:16px;}
.logo{background:var(--tile);box-shadow:var(--e2);border-radius:var(--r-md);}
.login h1{font:600 var(--fs-display)/1.2 var(--font);letter-spacing:-.025em;}
.login .tag{font:400 var(--fs-body)/1.45 var(--font);color:var(--ink-2);}
.devnote{font:400 var(--fs-label)/1.45 var(--font);color:var(--ink-2);}
.signhint{color:var(--ink-2);}
.googlebtn{background:var(--ground);}
/* app.js colors the "Use a different email" link inline with the old gold: keep it legible */
[style*="230, 180, 80"]{color:var(--ink) !important;}
.spin{border-color:var(--well);border-top-color:var(--brass-ink);}

/* invites */
.linkbox{font:400 var(--fs-label)/1.4 var(--font);background:var(--well);border:0;box-shadow:var(--in);border-radius:var(--r-sm);padding:12px 14px;color:var(--ink);}
.linkacts .muted{color:var(--ink-2);font-size:var(--fs-label);}
.invitecard .invsmall,.invitecard .invmeta{color:var(--ink-2);}
.invitecard .invname{font:600 var(--fs-head)/1.33 var(--font);}

/* install */
.insticon{border-radius:var(--r-sm);background:var(--tile);box-shadow:var(--e1);}
.inststep{background:transparent;border:0;border-radius:0;padding:8px 0;gap:12px;}
.instnum{background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:600 .875rem/1 var(--font);width:28px;height:28px;}
.instt{font:600 var(--fs-body-sm)/1.35 var(--font);}
.insts{color:var(--ink-2);font-size:var(--fs-label);}
.instglyph{background:var(--ground);box-shadow:var(--e1);color:var(--ink);border-radius:var(--r-sm);}
.installcard{padding:12px 8px 12px 14px;margin:12px 0 4px;}
.instx{color:var(--ink-2);}
.instx:active{background:transparent;box-shadow:var(--in);}
.mock{background:var(--well);border:0;border-radius:var(--r-sm);color:var(--ink-2);}
.mockic.hot,.mockcopy.hot,.mockbubble.hot{color:var(--brass-ink);box-shadow:0 0 0 2px var(--brass-ink);}
.mockrow.hot{color:var(--brass-ink);box-shadow:inset 0 0 0 2px var(--brass-ink);}
.mockrow+.mockrow,.mockcodehead{border-color:var(--line);}
.mockurl,.mockinput,.mockcodehead,.mockbubble{background:var(--ground);border:0;}
.mockpill{background:linear-gradient(145deg,var(--brass-a),var(--brass-b));color:var(--on-brass);}
.mockpill.hot{box-shadow:0 0 0 2px var(--well),0 0 0 4px var(--brass-ink);}
.mockbubble::after{border-top-color:var(--brass-ink);}
.mocksend{background:var(--ink-2);color:var(--ground);}
.mockcodebody{font-family:var(--font);}
.sharehint{color:var(--ink);}
.shtext{background:var(--card);border:0;box-shadow:var(--e2);border-radius:var(--r-md);color:var(--ink);font:600 var(--fs-body-sm)/1.3 var(--font);}
.sharrow svg{animation:none;}

/* ride sheet: provider rows flush, names in text; third-party brand fills neutralized */
.ridelist{border-top:0;}
.riderow{min-height:56px;padding:8px 0;border-bottom:0;gap:12px;}
.riderow:active{background:transparent;opacity:.7;}
.ridechip{background:var(--well) !important;color:var(--ink) !important;border:0;box-shadow:var(--in-sm);font-weight:600;}
.ridename{font:500 var(--fs-body)/1.3 var(--font);}
.ridecap{color:var(--ink-2);font-size:.75rem;}
.ridediv{font:600 var(--fs-label)/1.4 var(--font);font-variant:normal;text-transform:none;letter-spacing:0;color:var(--ink-2);padding:16px 0 4px;border-bottom:0;}

/* plan with my AI */
.aibanner{background:var(--card);border:0;box-shadow:var(--e1);border-radius:var(--r-md);min-height:52px;padding:6px 4px 6px 16px;font-size:var(--fs-body-sm);}
.aibx{color:var(--ink-2);width:var(--tap);height:var(--tap);}
.aipart{color:var(--ink);font-weight:600;}
.aimeta,.notelist,.howfoot{color:var(--ink-2);}
.aiprev{padding:14px 16px;}
.aiprev h5{font:600 var(--fs-head)/1.33 var(--font);}
.errlist{color:var(--alert-ink);background:var(--alert-bg);border-radius:var(--r-sm);}
.fielderr{color:var(--alert-ink);}

/* onboarding: one question per screen, pinned top progress and pinned bottom primary */
.screen.onb{background:var(--ground);padding:0 var(--gutter);}
.onbhead{background:var(--ground);}
.onbback{border-radius:50%;}
.onbbar{height:8px;background:var(--well);box-shadow:var(--in-sm);}
.onbbar i{background:var(--brass);border-radius:var(--r-pill);}
.onbskip,.onbsec{color:var(--ink-2);font:600 var(--fs-body-sm)/1.2 var(--font);}
.onbtitle{font:600 var(--fs-display)/1.2 var(--font);letter-spacing:-.025em;margin:16px 0 8px;}
.onbsub{font:400 var(--fs-body)/1.45 var(--font);color:var(--ink-2);margin:0 0 16px;}
.onbfoot{background:var(--ground);border-top:1px solid var(--line);margin:0 calc(-1 * var(--gutter));padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));}
.onbql{font:600 var(--fs-body-sm)/1.35 var(--font);color:var(--ink);margin:0 0 8px;}
.onbql.small{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.onbqs,.onbloc{color:var(--ink-2);font-size:var(--fs-label);}
.onbloc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.onbchips .chip{font:500 var(--fs-body-sm)/1.3 var(--font);border-radius:var(--r-md);}
.cards{gap:14px;}
.card{background:var(--ground);border:0;box-shadow:var(--e1);border-radius:var(--r-md);color:var(--ink);padding:14px;transition:box-shadow 120ms var(--ease);}
.card.on{background:var(--well);border:0;box-shadow:var(--in);}
.cardl{font:600 var(--fs-body-sm)/1.3 var(--font);}
.card.big .cardl{font-size:var(--fs-head);}
.cardt{font-size:.75rem;color:var(--ink-2);}
.subrow{padding:10px 14px 12px;}
.subrowhead{font:600 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.subx{color:var(--ink-2);}
.sliderlbl{font:600 var(--fs-label)/1.4 var(--font);}
.stylecard{padding:16px;margin:12px 0;}
.stylehead{font:600 var(--fs-head)/1.33 var(--font);letter-spacing:-.01em;}
.styleline{color:var(--ink-2);font-size:var(--fs-body-sm);}
.menuline{color:var(--ink-2);font-size:var(--fs-label);}
.menuline.gold{color:var(--ink);font-weight:600;}
.kidrow{background:var(--ground);border:0;box-shadow:var(--e1);border-radius:var(--r-md);min-height:56px;padding:10px 14px;margin:10px 0;}
.kidn{font:600 var(--fs-body-sm)/1.3 var(--font);}
.kidneeds{color:var(--ink-2);font-size:var(--fs-label);}

/* who's invited, crew, nudges */
.invrow{background:var(--ground);border:0;box-shadow:var(--e1);border-radius:var(--r-md);min-height:52px;padding:8px 14px;font-size:var(--fs-body-sm);}
.invrow:active{box-shadow:var(--in);}
.invlbl,.invchev{color:var(--ink-2);}
.lockpill{background:var(--well);border:0;color:var(--ink-2);font:600 .75rem/1.3 var(--font);}
.nudge{background:var(--well);border-left:0;border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-label);padding:10px 12px;}
.nudge.hard{border-left:0;font-weight:600;}
.invlost,.ridenote{color:var(--ink);}
.relq{font:600 var(--fs-body-sm)/1.35 var(--font);}
.relmine{color:var(--ink-2);}
.userrow.approve{border:0;}
.crewcard{padding:12px 14px;}
.crewline{font-size:var(--fs-label);}
.crewline.muted{color:var(--ink-2);}
/* the old 3-way segmented control: pressed track, the selected segment raised */
.seg{background:var(--well);border:0;box-shadow:var(--in);border-radius:var(--r-pill);padding:4px;gap:4px;}
.segb{border-radius:var(--r-pill);color:var(--ink-2);font:500 .9375rem/1.2 var(--font);}
.segb.on{background:var(--ground);color:var(--ink);font-weight:600;box-shadow:var(--e1);}
/* companions */
.cmpphoto{background:var(--ground);border:0;box-shadow:var(--e1);color:var(--ink-2);}
.photoX span{background:var(--ground);border:0;box-shadow:var(--e1);color:var(--ink);}
.cmpmore{border-top:1px solid var(--line);color:var(--ink);font:600 var(--fs-body-sm)/1.3 var(--font);}
.cmpchev,.cmpline,.cmptogwho small,.mp .nm small{color:var(--ink-2);}
.cmprm{color:var(--ink-2);}

/* ---------- 4. NEW COMPONENTS (d-) ---------- */
.d-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.d-t-display{font:600 var(--fs-display)/1.2 var(--font);letter-spacing:-.025em;margin:0;}
.d-t-title{font:600 var(--fs-title)/1.27 var(--font);letter-spacing:-.02em;margin:0;}
.d-t-head{font:600 var(--fs-head)/1.33 var(--font);letter-spacing:-.01em;margin:0;}
.d-t-body{font:400 var(--fs-body)/1.45 var(--font);margin:0;}
.d-t-body-sm{font:400 var(--fs-body-sm)/1.45 var(--font);margin:0;}
.d-t-label{font:500 var(--fs-label)/1.4 var(--font);margin:0;}
.d-t-micro{font:500 var(--fs-micro)/1.35 var(--font);letter-spacing:.01em;margin:0;}
.d-muted{color:var(--ink-2);}
.d-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.d-ic-sm{width:18px;height:18px;}

/* buttons */
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 20px;border:0;border-radius:var(--r-pill);background:var(--ground);color:var(--ink);box-shadow:var(--e1);font:600 1rem/1.25 var(--font);text-decoration:none;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.d-btn:active{box-shadow:var(--in);}
.d-btn:disabled,.d-btn[aria-disabled="true"]{opacity:.55;pointer-events:none;}
.d-btn-primary{background:linear-gradient(145deg,var(--brass-a),var(--brass-b));color:var(--on-brass);}
.d-btn-quiet{background:transparent;box-shadow:none;padding:10px 4px;color:var(--ink);}
.d-btn-quiet:active{box-shadow:none;opacity:.7;}
.d-btn-danger{background:transparent;box-shadow:none;padding:10px 4px;color:var(--alert-ink);}
.d-btn-danger:active{box-shadow:none;opacity:.7;}
.d-btn-icon{width:var(--tap);height:var(--tap);min-height:0;padding:0;border-radius:50%;}
.d-btn-wide{display:flex;width:100%;min-height:48px;}
.d-btn-slab{display:flex;width:100%;min-height:52px;border-radius:var(--r-md);justify-content:space-between;padding:12px 18px;}

/* chip */
.d-chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:0;border-radius:var(--r-pill);background:var(--ground);color:var(--ink);box-shadow:var(--e1);font:500 .875rem/1.3 var(--font);white-space:nowrap;cursor:pointer;transition:box-shadow 120ms var(--ease);}
.d-chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}
.d-chip[aria-pressed="true"],.d-chip.is-on{background:var(--well);box-shadow:var(--in);font-weight:600;}

/* focal card */
.d-card{border-radius:var(--r-lg);background:var(--card);box-shadow:var(--e2);padding:20px;color:var(--ink);}

/* sheet */
.d-scrim{position:fixed;inset:0;background:var(--scrim);z-index:100;animation:d-fade 200ms var(--ease);}
.d-sheet{position:fixed;left:0;right:0;bottom:0;z-index:101;max-width:430px;margin:0 auto;max-height:calc(92dvh - env(safe-area-inset-top));display:flex;flex-direction:column;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(180deg,var(--card-a),var(--ground) 120px);box-shadow:var(--sheet-shadow);color:var(--ink);animation:d-rise 280ms var(--ease);}
.d-grabber{flex:none;width:36px;height:5px;margin:10px auto 12px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--in-sm);}
.d-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gutter) 8px;}
.d-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--gutter) 8px;-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent);}
.d-sheet-foot{flex:none;padding:12px var(--gutter) calc(20px + env(safe-area-inset-bottom));}

/* segmented */
.d-seg{display:flex;gap:4px;padding:4px;min-height:var(--tap);border-radius:var(--r-pill);background:var(--well);box-shadow:var(--in);}
.d-seg button{position:relative;flex:1;min-height:36px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 .9375rem/1.2 var(--font);padding:6px 12px;cursor:pointer;}
.d-seg button::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}
.d-seg button[aria-pressed="true"],.d-seg button.is-on{background:var(--ground);color:var(--ink);font-weight:600;box-shadow:var(--e1);}

/* toggle */
.d-toggle{position:relative;width:52px;height:32px;border:0;padding:0;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--in);cursor:pointer;flex:none;}
.d-toggle::before{content:"";position:absolute;inset:-6px -2px;}
.d-toggle i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--ground);box-shadow:var(--e1);transition:left 200ms var(--ease);}
.d-toggle[aria-checked="true"]{background:var(--sage);box-shadow:inset 2px 2px 5px rgba(0,0,0,.22);}
.d-toggle[aria-checked="true"] i{left:24px;}
html[data-theme="dark"] .d-toggle i{background:#3A3A3F;}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .d-toggle i{background:#3A3A3F;}}

/* input */
.d-field{display:flex;flex-direction:column;gap:6px;}
.d-field>label{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.d-input{width:100%;min-height:52px;padding:12px 16px;border:0;border-radius:var(--r-md);background:var(--well);box-shadow:var(--in);color:var(--ink);font:400 1rem/1.4 var(--font);}
textarea.d-input{min-height:120px;resize:vertical;}
.d-input::placeholder{color:var(--ink-2);opacity:1;}
.d-input:focus{outline:2px solid var(--brass-ink);outline-offset:2px;}
.d-help{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.d-error{font:500 var(--fs-label)/1.4 var(--font);color:var(--alert-ink);}

/* toast */
.d-toast{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 8px 4px 16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e2);color:var(--ink);font:400 var(--fs-body-sm)/1.4 var(--font);}
.d-toast .d-btn-quiet{color:var(--brass-ink);margin-left:auto;padding:10px 12px;}

/* avatars */
.d-av{position:relative;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;background:var(--av-4);color:var(--on-av);font:600 .875rem/1 var(--font);box-shadow:0 0 0 2px var(--ground);}
.d-av img{width:100%;height:100%;object-fit:cover;display:block;}
.d-av-sm{width:28px;height:28px;font-size:.6875rem;}
.d-av-lg{width:64px;height:64px;font-size:1.125rem;}
.d-av-1{background:var(--av-1);} .d-av-2{background:var(--av-2);} .d-av-3{background:var(--av-3);} .d-av-4{background:var(--av-4);}
.d-av-stack{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;}
.d-av-stack .d-av+.d-av{margin-left:-10px;}
.d-av-stack .d-av:nth-child(4n+1):not([class*="d-av-"]){background:var(--av-1);}
.d-av-stack .d-av:nth-child(4n+2):not([class*="d-av-"]){background:var(--av-2);}
.d-av-stack .d-av:nth-child(4n+3):not([class*="d-av-"]){background:var(--av-3);}
.d-av-more,.d-av-stack .d-av-more{background:var(--ground);color:var(--ink-2);box-shadow:var(--e1),0 0 0 2px var(--ground);}

/* the road */
.d-road{position:relative;padding-inline-start:40px;}
.d-road::before{content:"";position:absolute;inset-inline-start:4px;top:0;bottom:0;width:12px;border-radius:6px;background:var(--well);box-shadow:var(--in-sm);-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent);}
.d-road::after{content:"";position:absolute;inset-inline-start:9px;top:8px;bottom:8px;border-left:2px dashed var(--road);-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent);}
.d-road-end::before,.d-road-end::after{-webkit-mask-image:none;mask-image:none;}
.d-on-road{position:relative;}
.d-pebble{position:absolute;inset-inline-start:-36px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--ink-2),0 0 0 3px var(--ground);z-index:1;}
.d-pebble-done{background:var(--sage);box-shadow:0 0 0 3px var(--ground);}
.d-pebble-now{inset-inline-start:-40px;top:22px;width:20px;height:20px;margin-top:0;background:var(--brass);box-shadow:0 0 0 4px var(--ground);}
.d-pebble-leg{inset-inline-start:-38px;width:16px;height:16px;margin-top:-8px;box-shadow:var(--e1),0 0 0 3px var(--ground);display:flex;align-items:center;justify-content:center;}
.d-pebble-leg i{width:8px;height:8px;border-radius:50%;display:block;}
.d-pebble-sealed{background:var(--well);box-shadow:var(--in-sm),inset 0 0 0 1px var(--ink-2),0 0 0 3px var(--ground);}

/* item row: time above title, trailing walk button, caret. The whole row is the target. */
.d-row{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:8px;min-height:60px;padding:8px 0;color:var(--ink);text-decoration:none;cursor:pointer;}
.d-row:active{opacity:.7;}
.d-row-main{display:flex;flex-direction:column;min-width:0;}
.d-row-time{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);font-variant-numeric:tabular-nums;}
.d-row-title{font:500 var(--fs-body)/1.35 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.d-row-sub{font:400 var(--fs-body-sm)/1.4 var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-row-walk{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);min-width:var(--tap);padding:0 10px;border:0;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);font:500 var(--fs-label)/1 var(--font);font-variant-numeric:tabular-nums;cursor:pointer;}
.d-row-walk:active{box-shadow:var(--in);}
.d-row-caret{width:18px;height:18px;color:var(--ink-2);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.d-row:not(:has(.d-row-walk)){grid-template-columns:minmax(0,1fr) 20px;}
/* a trailing status word (Booked, To book, Recap) keeps its own column so the caret never wraps */
.d-row:has(> .d-status):not(:has(.d-row-walk)){grid-template-columns:minmax(0,1fr) auto 20px;}
.d-gap-note{display:flex;align-items:center;gap:6px;min-height:28px;color:var(--ink-2);font:500 var(--fs-label)/1.4 var(--font);font-variant-numeric:tabular-nums;}
.d-status{display:inline-flex;align-items:center;gap:4px;font:500 var(--fs-label)/1.4 var(--font);}
.d-status-done{color:var(--sage-ink);}
.d-status-todo{color:var(--ink-2);}

/* top bar and tab bar */
.d-topbar{display:flex;align-items:center;gap:12px;min-height:56px;padding:calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;background:var(--ground);}
.d-logo-tile{width:var(--tap);height:var(--tap);border-radius:var(--r-sm);background:var(--tile);box-shadow:var(--e1);display:flex;align-items:center;justify-content:center;flex:none;}
.d-logo-tile img{width:34px;height:34px;object-fit:contain;display:block;}
/* the trip name whole (v46.2: never cut); a long one wraps to a second line, only between words (v46.2.1: never inside
   one). A name that would need a third line, or one word wider than the room, first gets the room of tighter gaps, then goes one size down (ui/frame.js fitTitle) */
.d-topbar-title{flex:1;min-width:0;font:600 var(--fs-body-sm)/1.25 var(--font);overflow-wrap:normal;word-break:normal;hyphens:manual;}
.d-topbar-title.is-tight{font-size:var(--fs-label);}
.d-topbar.is-snug{gap:6px;}
.d-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--ground);}
.d-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;color:var(--ink-2);font:500 var(--fs-micro)/1.35 var(--font);letter-spacing:.01em;text-decoration:none;background:none;border:0;cursor:pointer;}
.d-tab-well{position:relative;width:56px;height:32px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;}
.d-tab[aria-current="page"]{color:var(--ink);font-weight:600;}
.d-tab[aria-current="page"] .d-tab-well{background:var(--well);box-shadow:var(--in);}
.d-tab-dot{position:absolute;top:3px;right:13px;width:8px;height:8px;border-radius:50%;background:var(--sage-ink);box-shadow:0 0 0 2px var(--ground);}

/* what stays put while content scrolls */
.d-pinned-top{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid transparent;}
.d-pinned-bottom{position:sticky;bottom:0;z-index:20;background:var(--ground);padding-bottom:env(safe-area-inset-bottom);}

/* ---------- 5. v45 FOUNDATION FIXES ---------- */

/* Emoji never show in app chrome. "d-blank" is a 3 KB font whose only glyph is empty and zero-width,
   mapped from the emoji and pictograph ranges (incl. VS15/VS16 sequences). Applied only to the legacy
   chrome selectors below, never to user content (trip names, avatar markers). Built for this file. */
@font-face{font-family:"d-blank";src:url(data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMntEVjEAAACsAAAAYGNtYXB+Jh4LAAABDAAACVJnbHlmAAAAAAAACmAAAAAMaGVhZF8eQOUAAApsAAAANmhoZWEDIf87AAAKpAAAACRobXR4AAAAAAAACsgAAAAIbG9jYQAGAAYAAArQAAAACG1heHAAAwACAAAK2AAAACBuYW1lDWUkqwAACvgAAADKcG9zdP+fADIAAAvEAAAAIAAEAAABkAAFAAACigJYAAAASwKKAlgAAAFeADIA+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABOT05FAEAgDf//AyD/OAAAAyAAyAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAAFAAAAHAADAAEAAACYAAMACgAACLIADgAAAHwAAAACAP4OAAAAIAAAAAAA/g8AAAAgAAAAAAAAABYAIA0AACDjAAAjAP8AJgD/ACcAvwApNAEAKwD/ADAwAAAwPQAAMpcCAfAA/wHxAP8B8gD/AfMA/wH0AP8B9QD/AfYA/wH3AP8B+AD/AfkA/wH6AP8OACBfAAQIGgAAABYAEAADAAYgDSDjI/8nvyk1K/8wMDA9Mpn+D///AAAgDSDjIwAmACk0KwAwMDA9Mpf+AP//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAWABYAFgIUBZIFlAeSB5IHkgeWAAAAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQANAAAAAACgAAAAAAAAAAwAACANAAAgDQAAAAEAACDjAAAg4wAAAAEAACMAAAAj/wAAAAEAACYAAAAnvwAAAAEAACk0AAApNQAAAAEAACsAAAAr/wAAAAEAADAwAAAwMAAAAAEAADA9AAAwPQAAAAEAADKXAAAymQAAAAEAAP4AAAD+DwAAAAEAAfAAAAH6/wAAAAEADgAgAA4AfwAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAQAA1CiXI18PPPUACwPoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAACAAAAAAAAAAEAAAMg/zgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAGAAYAAAABAAAAAgAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAABgBOAAMAAQQJAAEAFgAAAAMAAQQJAAIADgAWAAMAAQQJAAMAFgAkAAMAAQQJAAQAFgA6AAMAAQQJAAUAFgBQAAMAAQQJAAYAFgBmAEQAcgBpAGYAdAByAEIAbABhAG4AawBSAGUAZwB1AGwAYQByAEQAcgBpAGYAdAByAEIAbABhAG4AawBEAHIAaQBmAHQAcgBCAGwAYQBuAGsAVgBlAHIAcwBpAG8AbgAgADEALgAwAEQAcgBpAGYAdAByAEIAbABhAG4AawAAAAMAAAAAAAD/nAAyAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype");
  unicode-range:U+200D,U+20E3,U+2300-23FF,U+2600-27BF,U+2934-2935,U+2B00-2BFF,U+3030,U+303D,U+3297-3299,U+FE00-FE0F,U+1F000-1FAFF,U+E0020-E007F;}
.icbtn[title],.widget,.geonote,.ridebtn,.pencil,.legthumb,.imgbtn{font-family:"d-blank",var(--font);}

/* their stroke icons (--ink / --ink-2 only), drawn as masks in currentColor */
:root{
  --ic-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  --ic-note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
  --ic-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
  --ic-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M19 6h1M4 12h3M13 12h7M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2.5'/%3E%3Ccircle cx='10' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
  --ic-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/%3E%3Cpath d='M15 5l4 4'/%3E%3C/svg%3E");
  --ic-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E");
  --ic-car:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
  --ic-thermo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E");
}
.icbtn[title]::before,.pencil::before,.legthumb:not(:has(img))::before,.ridebtn::before,.herobar>.widget::before{
  content:"";display:block;flex:none;width:22px;height:22px;background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.icbtn[title]{font-size:0;color:var(--ink);}
.icbtn[title="Weather"]{--ic:var(--ic-sun);}
.icbtn[title="Currency converter"]{--ic:var(--ic-note);}
.icbtn[title="Notifications"]{--ic:var(--ic-bell);}
.icbtn[title="Manage Trip"]{--ic:var(--ic-sliders);}
.pencil{font-size:0;--ic:var(--ic-pencil);}
.pencil::before{width:18px;height:18px;}
.legthumb:not(:has(img)){font-size:0;color:var(--ink-2);--ic:var(--ic-image);}
.legthumb:not(:has(img))::before{width:18px;height:18px;}
.ridebtn{display:inline-flex;align-items:center;gap:4px;padding-left:8px;--ic:var(--ic-car);}
.ridebtn::before{width:16px;height:16px;}
.herobar>.widget{gap:6px;}
.herobar>.widget::before{width:18px;height:18px;}
.herobar>.widget:first-child{--ic:var(--ic-thermo);}
.herobar>.widget:nth-child(2){--ic:var(--ic-note);}

/* Logo tile: its raised edge was clipped by the title slot's overflow:hidden */
.topttl:has(>.toplogo){overflow:visible;}

/* Pinned top bar spans the full screen width so nothing shows beside it in the gutters */
.topbar{
  margin-left:calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right:calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));}
/* Manage Trip is an inner screen with its own bar (back to the trip + title): show only that one */
.screen>.topbar:has(+ div>.topbar:first-child){display:none;}

/* Bottom sheets: the grabber and the title row stay pinned; only the body scrolls under them.
   The sheet's top 64 px is flat --card-a so the pinned band matches the surface exactly. */
.modal{background:linear-gradient(180deg,var(--card-a) 0 64px,var(--ground) 180px);}
.modal::before{position:sticky;top:10px;z-index:3;
  box-shadow:var(--in-sm),0 0 0 100vmax var(--card-a);
  clip-path:inset(-40px -100vmax -14px -100vmax);}
.modal>h4:first-child{position:sticky;top:29px;z-index:2;background:var(--card-a);
  margin:0 calc(-1 * var(--gutter)) 6px;padding:0 var(--gutter) 10px;border-bottom:1px solid transparent;}
@supports (animation-timeline: scroll()){
  .modal>h4:first-child{animation:d-hairline linear both;animation-timeline:scroll(nearest);animation-range:0 12px;}
}
@media(min-width:431px){.modal>h4:first-child{top:0;margin-top:-20px;padding-top:20px;}}

/* Leg bubbles and the day strip run to the screen edges and fade softly there; never a hard cut.
   Extra top padding keeps the chips' raised edge inside the scroller. */
.bubbles,.daystrip{
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));margin-top:-4px;
  padding:12px var(--gutter) 14px;scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);}
/* the selected bubble or day starts in view (Tickets, Saved, a late day) */
.bub.active,.day.active{scroll-snap-align:center;scroll-initial-target:nearest;}

/* Stop checkboxes: a clear ring (about 6:1 on the ground) instead of a near-invisible pressed square */
.ckbox:not(.on),.ck:not(.on){background:transparent;box-shadow:inset 0 0 0 2px var(--ink-2);}
.ckbox.on,.ck.on{background:var(--sage);box-shadow:inset 0 0 0 2px var(--sage);}

/* Time fields: no clock glyph (owner rule). The same caret as selects; the whole end stays tappable. */
input.fld[type=time],input.d-input[type=time]{position:relative;background-image:var(--select-caret);background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
/* every time field holds its own (invisible) picker button: without position:relative it escaped to the sheet and the
   field could not be set on Android (owner, v45.1) */
input[type=time]{position:relative;}
input[type=time]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;top:0;right:0;width:48px;height:100%;margin:0;padding:0;cursor:pointer;}

/* Legacy layouts at 375 px with the larger type */
.legname{min-width:0;}
.legname small{display:block;white-space:nowrap;margin-top:2px;}
.time .ap{margin-left:1px;}

/* Sign-in (Clerk, production only): the oat look and Geist over app.js's legacy appearance values.
   Clerk's class names are stable public hooks (cl-*). The logo image is left exactly as supplied. */
.cl-rootBox,.cl-rootBox *,.cl-modalContent,.cl-modalContent *{font-family:var(--font) !important;}
.cl-cardBox{background:var(--ground) !important;border:0 !important;border-radius:var(--r-lg) !important;box-shadow:var(--e2) !important;}
.cl-card{background:var(--ground) !important;border:0 !important;box-shadow:none !important;color:var(--ink) !important;}
.cl-footer{background:transparent !important;border:0 !important;}
.cl-headerTitle{color:var(--ink) !important;font-weight:600 !important;letter-spacing:-.02em !important;}
.cl-headerSubtitle{color:var(--ink-2) !important;}
.cl-formFieldLabel,.cl-formFieldHintText,.cl-dividerText,.cl-footerActionText,.cl-identityPreviewText{color:var(--ink-2) !important;}
.cl-dividerLine{background:var(--line) !important;}
.cl-formFieldInput,.cl-otpCodeFieldInput{background:var(--well) !important;color:var(--ink) !important;border:0 !important;box-shadow:var(--in) !important;border-radius:var(--r-md) !important;}
.cl-formFieldInput:focus,.cl-otpCodeFieldInput:focus{outline:2px solid var(--brass-ink) !important;outline-offset:2px !important;}
.cl-formButtonPrimary{background:linear-gradient(145deg,var(--brass-a),var(--brass-b)) !important;color:var(--on-brass) !important;border:0 !important;border-radius:var(--r-pill) !important;box-shadow:var(--e1) !important;min-height:48px !important;font-weight:600 !important;text-transform:none !important;}
.cl-formButtonPrimary:active{box-shadow:var(--in) !important;}
.cl-socialButtonsBlockButton,.cl-socialButtonsIconButton{background:var(--ground) !important;color:var(--ink) !important;border:0 !important;border-radius:var(--r-pill) !important;box-shadow:var(--e1) !important;min-height:48px !important;}
.cl-socialButtonsBlockButtonText{color:var(--ink) !important;font-weight:600 !important;}
.cl-footerActionLink,.cl-formFieldAction,.cl-formResendCodeLink,.cl-identityPreviewEditButton,.cl-backLink,.cl-alternativeMethodsBlockButton{color:var(--ink) !important;font-weight:600 !important;}
.cl-identityPreview{background:var(--well) !important;border:0 !important;}
.cl-formFieldErrorText,.cl-alertText{color:var(--alert-ink) !important;}
.cl-alert{background:var(--alert-bg) !important;border:0 !important;}

/* One brass region per screen: on Manage Trip the AI fill is the primary, so Share drops to a raised secondary */
.screen:has(.aigo) .btn.save:not(.aigo){background:var(--ground);color:var(--ink);}

/* ---------- v45 pinned chrome (plan 3.5): frame() -> .d-screen; the body (.d-scroll) is the only scroller ---------- */
.d-screen{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:var(--ground);overflow:hidden;}
.d-screen .d-pinned-top{position:relative;animation:none;border-bottom-color:transparent;}
.d-screen .d-pinned-top.is-under{border-bottom-color:var(--line);}
.d-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 max(var(--gutter), env(safe-area-inset-right)) 24px max(var(--gutter), env(safe-area-inset-left));}
.d-scroll-sentinel{height:1px;margin-bottom:-1px;}
.d-bottom{background:var(--ground);}
.d-dock{padding:8px var(--gutter) 12px;}