/* =====================================================================
   Itinera — iOS-style design system
   ===================================================================== */
:root{
  --red-text:#D70015;
  --hero:#2742F5; --hero2:#1A2BB8; --tint:#2742F5; --onhero:#fff;
  --bg:#F2F2F7; --card:#FFFFFF; --card2:#F2F2F7; --ink:#000; --ink2:#3C3C43; --mute:#6C6C70;
  --sep:#C6C6C8; --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.2);
  --red:#FF3B30; --green:#34C759; --orange:#FF9500; --yellow:#FFCC00; --sun:#FFC83D;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(16,24,40,.18);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --kb:0px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --hero:#1B2CC4; --hero2:#101A7A; --tint:#8C9BFF;
  --bg:#000; --card:#1C1C1E; --card2:#2C2C2E; --ink:#fff; --ink2:#EBEBF5; --mute:#98989F;
  --sep:#38383A; --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.32);
  --red:#FF453A; --green:#30D158; --orange:#FF9F0A;
  --shadow:none;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--hero)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;min-height:100dvh;overscroll-behavior-y:none;touch-action:manipulation}
@supports (font:-apple-system-body){body{font:-apple-system-body;font-family:-apple-system,system-ui,sans-serif}}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--tint);text-decoration:none}
svg{display:block}
.hide{display:none!important}

/* Status-bar area always in brand blue (white clock/battery on top) */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--safe-t);background:var(--hero);z-index:45}

/* ---------- Navigation bar ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:var(--safe-t);background:var(--hero);color:var(--onhero);transition:box-shadow .2s}
.nav-in{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;max-width:720px;margin:0 auto}
.nav-title{font-weight:600;font-size:17px;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.nav.scrolled .nav-title{opacity:1;transform:none}
.nav.scrolled{box-shadow:0 .5px 0 rgba(0,0,0,.25)}
.nav-l{display:flex;justify-content:flex-start}.nav-r{display:flex;justify-content:flex-end;gap:2px}
.nb{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:2px;font-size:17px;padding:0 8px;border-radius:10px;color:var(--onhero)}
.nb:active{opacity:.5}
.nb svg{width:24px;height:24px}
.nb.back{padding-left:2px}.nb.back svg{width:22px;height:22px;margin-right:-2px}
.avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:600;font-size:15px}

/* ---------- Hero (large title area) ---------- */
.hero{background:linear-gradient(180deg,var(--hero) 0%,var(--hero) 70%,var(--hero2) 140%);color:var(--onhero);padding:calc(var(--safe-t) + 44px) 20px 26px;position:relative}
.hero-in{max-width:720px;margin:0 auto}
.large{display:block;font:700 34px/1.12 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.022em;margin:2px 0 0}
.hero .sub{opacity:.82;font-size:15px;margin-top:4px}
.hero .flags{font-size:28px;line-height:1;margin-bottom:6px}
.hero-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hchip{font-size:13px;font-weight:600;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.18)}
.hchip.sun{background:var(--sun);color:#101828}

/* ---------- Page ---------- */
.page{max-width:720px;margin:0 auto;padding:0 16px calc(96px + var(--safe-b));position:relative}
.page>:first-child{margin-top:-14px}
.sec-h{font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.02em;padding:22px 16px 7px}
.sec-h.big{font:700 22px/1.2 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);text-transform:none;padding:26px 4px 8px}
.sec-f{font-size:13px;color:var(--mute);padding:7px 16px 0;line-height:1.35}
.sticky{position:sticky;top:calc(var(--safe-t) + 44px);z-index:5;background:var(--bg);margin:0 -16px;padding-left:32px;padding-right:32px}

/* ---------- Inset grouped list ---------- */
.group{background:var(--card);border-radius:12px;overflow:hidden;position:relative}
.cell{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 16px;position:relative;width:100%;text-align:left;background:var(--card)}
.cell+.cell::before,.cell+.fr::before,.fr+.cell::before,.fr+.fr::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:.5px solid var(--sep)}
.cell.ic+.cell::before,.cell+.cell.ic::before{left:58px}
button.cell:active,.cell.tap:active{background:var(--fill)}
.cell .main{flex:1;min-width:0}
.cell .t1{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.cell .t2{font-size:15px;color:var(--mute);line-height:1.3;margin-top:1px}
.cell .t3{font-size:13px;color:var(--mute);margin-top:3px}
.cell .val{color:var(--mute);font-size:17px;text-align:right;flex:none;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{display:inline-block;width:8px;height:14px;flex:none;background:#C4C4C6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cell.center{justify-content:center;color:var(--tint)}
.cell.danger{justify-content:center;color:var(--red-text,var(--red))}
.cell.tint{color:var(--tint)}
.cell.ghost .t1{color:var(--mute);font-size:15px}
.tile{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:none}
.tile svg{width:19px;height:19px}
.tile.lg{width:40px;height:40px;border-radius:10px}.tile.lg svg{width:24px;height:24px}
.flagtile{font-size:26px;line-height:1;width:30px;text-align:center;flex:none}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--fill);color:var(--ink2);margin:4px 4px 0 0;white-space:nowrap}
.badge.ok{background:rgba(52,199,89,.16);color:#17702f}.badge.todo{background:rgba(255,149,0,.16);color:#8f5000}.badge.paid{background:rgba(39,66,245,.12);color:var(--tint)}
.badge.red{background:rgba(255,59,48,.14);color:var(--red)}
@media (prefers-color-scheme:dark){.badge.ok{color:var(--green)}.badge.todo{color:var(--orange)}}
.leg{font-size:15px;color:var(--ink2);margin-top:2px}.leg b{font-weight:600;color:var(--ink)}
.lay{font-size:13px;color:var(--mute);margin:3px 0 3px;padding-left:8px;border-left:2px solid var(--sep)}
.price{font-size:15px;color:var(--mute);flex:none;text-align:right}

/* Swipe rows */
.swr{position:relative;overflow:hidden}
.swa{position:absolute;inset:0;background:var(--red);display:flex;justify-content:flex-end}
.swdel{width:88px;color:#fff;font-size:15px;font-weight:600;transition:width .2s}
.swr.full .swdel{width:100%;text-align:right;padding-right:22px}
.swl{position:absolute;inset:0;z-index:0;display:none;background:#8E8E93}
.swr.lead .swl{display:flex}.swr.lead .swa{display:none}
.swbtn{width:75px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;font-size:13px;font-weight:600}
.swbtn svg{width:22px;height:22px}.swbtn.ed{background:var(--tint)}.swbtn.mo{background:#8E8E93}
.swc{position:relative;z-index:1;background:var(--card);transition:transform .25s cubic-bezier(.2,.9,.25,1);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.swc.pressed{transform:scale(.97)!important;transition:transform .15s}
.swr+.swr>.swc>.cell::before,.cell+.swr>.swc>.cell::before,.swr+.cell::before{content:"";position:absolute;top:0;right:0;left:58px;border-top:.5px solid var(--sep);z-index:2}
.swr+.swr>.swc>.rem::before,.swr+.rem::before{content:"";position:absolute;top:0;right:0;left:52px;border-top:.5px solid var(--sep);z-index:2}
.ptr{position:fixed;left:50%;top:calc(var(--safe-t) + 52px);z-index:39;width:32px;height:32px;border-radius:50%;background:var(--card);color:var(--mute);box-shadow:0 3px 12px rgba(0,0,0,.14);display:grid;place-items:center;opacity:0;pointer-events:none;will-change:transform,opacity}
.ptr svg{width:20px;height:20px;transition:color .15s}
.ptr.armed svg,.ptr.spin svg{color:var(--tint)}
.ptr.spin svg{animation:spin .8s linear infinite}
.ptr.spin .arc{stroke-dasharray:30 100}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Cards ---------- */
.card{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.summary b{display:block;font:600 20px/1.2 -apple-system,"SF Pro Display",system-ui;font-variant-numeric:tabular-nums}
.summary span{font-size:12px;color:var(--mute)}
.summary-foot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;padding-top:12px;border-top:.5px solid var(--sep)}
.next{background:var(--tint);color:#fff}
.next .t2{color:rgba(255,255,255,.8)}
.warn .tile{background:var(--orange)}
.empty{text-align:center;color:var(--mute);padding:48px 24px}
.empty .art{width:84px;height:84px;margin:0 auto 14px;border-radius:24px;background:var(--fill);display:grid;place-items:center;color:var(--tint)}
.empty .art svg{width:44px;height:44px}
.empty h3{color:var(--ink);font-size:20px;margin:0 0 6px}
.empty p{margin:0 0 18px;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:0 22px;border-radius:14px;background:var(--tint);color:#fff;font-weight:600;font-size:17px}
.btn:active{opacity:.75}
.btn.wide{width:100%}
.btn.gray{background:var(--fill);color:var(--tint)}

/* Trip "boarding pass" cards on the home screen */
.ticket{display:block;width:100%;text-align:left;background:var(--card);border-radius:20px;box-shadow:var(--shadow);margin:12px 0;overflow:hidden;position:relative}
.ticket:active{transform:scale(.985);transition:transform .1s}
.tk-band{height:6px;background:hsl(var(--h,228) 88% 58%)}
.tk-body{padding:14px 18px 12px}
.tk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tk-flags{font-size:26px;line-height:1}
.tk-when{background:var(--sun);color:#101828;font-weight:700;font-size:13px;padding:4px 11px;border-radius:20px}
.tk-when.past{background:var(--fill);color:var(--mute)}
.tk-name{font:700 24px/1.15 -apple-system,"SF Pro Display",system-ui;letter-spacing:-.02em}
.tk-dates{color:var(--mute);font-size:15px;margin-top:2px}
.tk-foot{display:flex;gap:16px;padding:11px 18px 13px;border-top:2px dashed var(--sep);position:relative;font-size:13px;color:var(--mute)}
.tk-foot b{color:var(--ink);font-weight:600}
.tk-foot::before,.tk-foot::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--bg)}
.tk-foot::before{left:-9px}.tk-foot::after{right:-9px}

/* ---------- Tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;padding:6px 8px calc(4px + var(--safe-b));background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep)}
.tabbar button{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:500;color:var(--mute);min-height:46px}
.tabbar button.on{color:var(--tint)}
.tabbar svg{width:26px;height:26px}

/* ---------- Sheets ---------- */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;animation:fade .25s ease-out}
.sheet{position:fixed;left:0;right:0;top:calc(var(--safe-t) + 10px + var(--vvtop,0px));margin:0 auto;max-width:720px;z-index:61;background:var(--bg);border-radius:12px 12px 0 0;display:flex;flex-direction:column;height:calc(100dvh - var(--safe-t) - 10px);max-height:calc(100dvh - var(--safe-t) - 10px);animation:up .42s cubic-bezier(.32,.72,0,1);box-shadow:0 -6px 30px rgba(0,0,0,.18);will-change:transform;transition:top .22s cubic-bezier(.32,.72,0,1)}
.sheet.short{top:auto;bottom:0;height:auto}
.sheet.closing{animation:down .3s cubic-bezier(.32,.72,0,1) forwards;pointer-events:none}
.backdrop.closing{animation:fade .25s ease-in reverse forwards;pointer-events:none}
.grab{position:absolute;top:5px;left:50%;width:36px;height:5px;border-radius:3px;background:var(--fill2);transform:translateX(-50%)}
.sh-head{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;padding:8px 8px 0;touch-action:none}
.sh-title{font-weight:600;font-size:17px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.sh-l{justify-self:start}.sh-r{justify-self:end}
.sh-btn{min-height:44px;padding:0 10px;font-size:17px;color:var(--tint)}
.sh-btn.strong{font-weight:600}
.sh-btn:disabled,.sh-btn.dim{color:var(--mute);opacity:.6}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.sh-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 16px calc(28px + var(--safe-b) + var(--kb))}
.sheet.short .sh-body{flex:none}
@keyframes up{from{transform:translateY(100%)}}
@keyframes down{to{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

/* Action sheet */
.as{position:fixed;left:8px;right:8px;bottom:calc(8px + var(--safe-b));z-index:71;max-width:560px;margin:0 auto;animation:up .3s cubic-bezier(.2,.9,.25,1)}
.as.closing{animation:down .2s ease-in forwards;pointer-events:none}
.as-g{background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-radius:14px;overflow:hidden;margin-top:8px}
.as-h{padding:14px 16px;text-align:center;font-size:13px;color:var(--mute);border-bottom:.5px solid var(--sep)}
.as-h b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.as-b{display:block;width:100%;min-height:57px;font-size:20px;color:var(--tint);border-top:.5px solid var(--sep)}
.as-b:first-child{border-top:0}
.as-b.red{color:var(--red)}.as-b.bold{font-weight:600}
.as-b:active{background:var(--fill)}
.as-bd{z-index:70}

/* ---------- Form rows ---------- */
.fr{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px;position:relative;background:var(--card)}
.fr>label{flex:none;font-size:17px;min-width:96px;text-align:left}
.fr .pills{flex:1}
.fr .in{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:17px;text-align:right;padding:6px 0;color:var(--ink)}
.fr .in.left{text-align:left}
.fr .in::placeholder{color:#C4C4C6}
.fr textarea.in{text-align:left;resize:none;min-height:88px;line-height:1.35}
.fr.full{display:block;padding:10px 16px}
.fr.full .in{width:100%;text-align:left}
.fr .pick{flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:center;gap:6px;color:var(--mute);font-size:17px;min-height:36px;text-align:right}
.fr .pick .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr .pick .v.set{color:var(--ink)}
.fr .pick:active{opacity:.6}
.pills{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.pill{position:relative;display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:7px;background:var(--fill);color:var(--ink);font-size:17px;white-space:nowrap}
.pill.empty{color:var(--mute)}
.pill input{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;-webkit-appearance:none;appearance:none;font-size:16px}
.pill.on{color:var(--tint)}
.unit{color:var(--mute)}
.fr .x{flex:none;width:22px;height:22px;border-radius:50%;background:var(--fill2);color:var(--card);display:grid;place-items:center}
.fr .x svg{width:10px;height:10px}

/* Segmented control */
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;gap:2px;width:100%}
.seg button{flex:1;min-height:32px;border-radius:7px;font-size:13px;font-weight:500;color:var(--ink);padding:0 4px;transition:background .15s}
.seg button.on{background:var(--card);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
@media (prefers-color-scheme:dark){.seg button.on{background:#636366}}

/* Stepper */
.stepper{display:inline-flex;align-items:center;background:var(--fill);border-radius:9px;overflow:hidden;flex:none}
.stepper button{width:46px;height:32px;display:grid;place-items:center;color:var(--ink)}
.stepper button:active{background:var(--fill2)}
.stepper button:disabled{opacity:.3}
.stepper i{width:.5px;height:18px;background:var(--sep)}
.stepper svg{width:14px;height:14px}
.stepval{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Switch: native iOS switch where supported (haptics), custom fallback elsewhere */
input.sw{accent-color:var(--green);flex:none;margin:0}
html.nosw input.sw{-webkit-appearance:none;appearance:none;width:51px;height:31px;border-radius:16px;background:var(--fill2);position:relative;transition:background .2s;cursor:pointer}
html.nosw input.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .2s}
html.nosw input.sw:checked{background:var(--green)}
html.nosw input.sw:checked::after{transform:translateX(20px)}

/* Stars */
.stars{display:inline-flex;gap:2px;flex:none}
.st{width:32px;height:36px;display:grid;place-items:center;color:var(--fill2)}
.st svg{width:24px;height:24px}
.st.on{color:var(--sun)}
.stars-ro{color:var(--sun);font-size:14px;letter-spacing:1px}
.stars-ro i{color:var(--fill2);font-style:normal}

/* Type tiles (add flow) */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.tbtn{background:var(--card);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:96px;text-align:left}
.tbtn:active{transform:scale(.97);background:var(--fill)}
.tbtn b{font-weight:600;font-size:16px}
.tbtn em{font-style:normal;font-size:13px;color:var(--mute);margin-top:-6px}

/* Search field */
.search{display:flex;align-items:center;gap:6px;background:var(--fill);border-radius:10px;padding:0 8px;height:36px;margin:2px 0 12px;color:var(--mute)}
.search svg{width:16px;height:16px;flex:none}
.search input{flex:1;border:0;outline:0;background:transparent;font-size:17px;color:var(--ink);min-width:0}
.code{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:42px;color:var(--tint)}

/* Calendar (date range) */
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:13px;color:var(--mute);text-align:center;padding:4px 0 6px;position:sticky;top:-4px;background:var(--bg);z-index:2;border-bottom:.5px solid var(--sep)}
.cal-m{margin:14px 0 4px}
.cal-mt{font-weight:600;font-size:17px;padding:4px 4px 8px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.cal-d{height:44px;display:grid;place-items:center;font-size:17px;position:relative;font-variant-numeric:tabular-nums}
.cal-d.today{color:var(--tint);font-weight:600}
.cal-d.past{color:var(--mute)}
.cal-d.in{background:color-mix(in srgb,var(--tint) 16%,transparent)}
.cal-d.s,.cal-d.e{color:#fff;font-weight:600}
.cal-d.s::before,.cal-d.e::before{content:"";position:absolute;inset:2px;margin:auto;width:40px;height:40px;border-radius:50%;background:var(--tint);z-index:-1}
.cal-d{isolation:isolate}
.cal-d.s.has-e{background:linear-gradient(90deg,transparent 50%,color-mix(in srgb,var(--tint) 16%,transparent) 50%)}
.cal-d.e:not(.s){background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 16%,transparent) 50%,transparent 50%)}
.cal-sum{position:sticky;bottom:calc(-28px - var(--safe-b));background:var(--bg);padding:12px 0 calc(12px + var(--safe-b));border-top:.5px solid var(--sep);margin:0 -16px;padding-left:16px;padding-right:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal-sum .t{font-size:15px}
.cal-sum .t b{display:block;font-size:17px}

/* Checklist (Reminders style) */
.rem{display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:44px;position:relative;background:var(--card)}
.rem+.rem::before{content:"";position:absolute;top:0;right:0;left:52px;border-top:.5px solid var(--sep)}
.circ{width:24px;height:24px;border-radius:50%;border:1.5px solid #C4C4C6;flex:none;display:grid;place-items:center;transition:all .15s}
.circ.on{background:var(--tint);border-color:var(--tint);color:#fff}
.circ svg{width:13px;height:13px}
.rem input{flex:1;border:0;outline:0;background:transparent;font-size:17px;padding:4px 0;min-width:0;color:var(--ink)}
.rem.done input{color:var(--mute)}
.rem.new .circ{border-style:dashed}
.prog{height:6px;border-radius:3px;background:var(--fill);overflow:hidden;margin:8px 0 2px}
.prog i{display:block;height:100%;background:var(--tint);border-radius:3px;transition:width .3s}

/* Checklist extras */
.row-h{display:flex;justify-content:space-between;align-items:flex-end}
.row-h button{color:var(--tint);font-size:13px;text-transform:none;letter-spacing:0;font-weight:500;min-height:28px}
.cnt{color:var(--mute);font-weight:400;margin-left:4px}
.rem.sel{width:100%;text-align:left}
.rem.sel:active{background:var(--fill)}
.rtx{flex:1;font-size:17px;padding:4px 0;color:var(--ink)}
.rtx.d{color:var(--mute);text-decoration:line-through}
.rem.had .rtx{color:var(--mute)}
.circ.had{background:var(--fill2);border-color:transparent}
.rem.done input{text-decoration:line-through}
.circ.on{animation:pop .25s}
@keyframes pop{50%{transform:scale(1.2)}}
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:31;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px calc(10px + var(--safe-b));background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);font-size:15px;color:var(--mute)}
.selbar button{color:var(--tint);font-size:17px;min-height:44px;min-width:90px;text-align:left}
.selbar button.red{color:var(--red);text-align:right}
.selbar button:disabled{opacity:.35}

/* Status bar area */
.rem .pav{margin-left:4px}
.selbar button{flex:1}

/* Map */
.mapcard{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--card);position:relative;z-index:1}
#tripmap{height:230px;background:var(--fill)}
.mpin span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:#fff;font:700 13px/1 -apple-system,system-ui;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.mpin.dt span{width:16px;height:16px;background:#fff;border:3px solid var(--tint)}
.leaflet-popup-content{font:15px/1.35 -apple-system,system-ui}
.leaflet-container a{color:var(--tint)}
@media (prefers-color-scheme:dark){#tripmap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}}

/* Attachments */
.fthumb{width:44px;height:44px;border-radius:8px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--fill)}
.fthumb img{width:100%;height:100%;object-fit:cover}
.viewer{background:var(--card);border-radius:12px;overflow:hidden;margin-top:8px}
.viewer img{display:block;width:100%;height:auto}
.viewer iframe{display:block;width:100%;height:68vh;border:0;background:#fff}

/* Reorder */
.grip{width:36px;height:36px;display:grid;place-items:center;color:#C4C4C6;touch-action:none;flex:none;margin-right:-8px;cursor:grab}
.grip svg{width:20px;height:20px}
.rem.sel{transition:transform .18s}
.rem.dragging{transition:none;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.18);border-radius:10px;position:relative}

/* Costs */
.ccy{flex:none;color:var(--tint);font-size:17px;min-height:36px;padding:0 2px 0 6px;font-weight:500}
.bignum{font:700 34px/1.1 -apple-system,"SF Pro Display",system-ui;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cbar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:14px 0 10px;background:var(--fill);gap:2px}
.cbar i{display:block;height:100%}
.clegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--mute)}
.clegend span{display:inline-flex;align-items:center;gap:5px}
.clegend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.clegend b{color:var(--ink);font-weight:600}
.pav{width:30px;height:30px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:inline-grid;place-items:center;flex:none;letter-spacing:.02em}
.pav.sm{width:24px;height:24px;font-size:10px}
.owe{font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.rmv{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.rmv svg{width:12px;height:12px}

/* ---------- Toasts / status ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--kb) + var(--safe-b) + 74px);transform:translate(-50%,20px);z-index:90;background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink);padding:10px 16px;border-radius:24px;font-size:15px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.25,1);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast button{pointer-events:auto}
.toast button{color:var(--tint);font-weight:600}
#status{position:fixed;right:10px;top:calc(var(--safe-t) + 50px);z-index:35;font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px;background:var(--card);color:var(--mute);box-shadow:0 2px 10px rgba(0,0,0,.08);opacity:0;transition:opacity .2s;pointer-events:none}
#status.on{opacity:1;pointer-events:auto}

/* ---------- Screen transitions ---------- */
/* only the content slides; the top bar and tab bar never move (a moving parent would unpin them on iPhone) */
#app.push>.hero,#app.push>main{animation:push .32s cubic-bezier(.2,.9,.25,1)}
#app.pop>.hero,#app.pop>main{animation:pop2 .32s cubic-bezier(.2,.9,.25,1)}
@keyframes pop2{from{transform:translateX(-22%);opacity:.4}}
@keyframes push{from{transform:translateX(28%);opacity:.4}}
@keyframes pop{from{transform:translateX(-22%);opacity:.4}}
@media (prefers-reduced-motion:reduce){#app.push,#app.pop,.sheet,.as,.backdrop{animation:none!important}}

/* ---------- Login ---------- */
.login{min-height:100dvh;background:var(--bg);padding:calc(var(--safe-t) + 48px) 16px 40px;max-width:480px;margin:0 auto}
.login .logo{width:84px;height:84px;border-radius:20px;display:block;margin:0 auto 14px;box-shadow:0 12px 30px -12px rgba(39,66,245,.6)}
.login h1{font:700 34px/1.1 -apple-system,"SF Pro Display",system-ui;text-align:center;margin:0}
.login p.sub{text-align:center;color:var(--mute);margin:6px 0 24px}

/* 1.9: weather, journal */
.wx{display:inline-flex;align-items:center;gap:2px;margin-left:8px;padding:1px 7px;border-radius:10px;background:var(--fill);font-size:12px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;vertical-align:1px}
.wx span{color:var(--mute);font-weight:500}
.jcard{display:block;width:100%;text-align:left;margin-top:12px;font:inherit;color:inherit}
.jhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;font-size:16px}
.jhead span{color:var(--mute);font-size:14px;white-space:nowrap}
.jtext{font-size:16px;line-height:1.45;color:var(--ink)}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.jgrid.edit{padding:10px}
.jph{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--fill)}
.jph img{width:100%;height:100%;object-fit:cover;display:block}
.jph .rmv{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:12px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.jph .rmv svg{width:14px;height:14px}
.jph i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:#fff;font-style:normal}

/* 1.10: iOS menus, half-height sheets */
.pm-ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.08);animation:fade .2s ease-out}
.pm-ov.blur{background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
.pm-ov.closing,.pm-pv.closing{animation:fade .18s ease-in reverse forwards}
.pm-pv{position:fixed;z-index:81;pointer-events:none;overflow:hidden;border-radius:12px;box-shadow:0 18px 50px -10px rgba(0,0,0,.35);animation:lift .28s cubic-bezier(.2,.9,.25,1) both}
.pm-pv .group{margin:0;border-radius:12px}
.pm-pv .cell>svg:last-child,.pm-pv .chev{display:none}
@keyframes lift{from{transform:scale(1)}50%{transform:scale(1.035)}to{transform:scale(1.02)}}
.pm{position:fixed;z-index:82;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 10px 40px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.08);animation:pmIn .28s cubic-bezier(.2,1.1,.3,1) both}
.pm.closing{animation:pmOut .16s ease-in forwards;pointer-events:none}
@keyframes pmIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes pmOut{to{opacity:0;transform:scale(.85)}}
.pm-h{padding:10px 16px 8px;font-size:13px;color:var(--mute);text-align:center;border-bottom:.5px solid var(--sep)}
.pm-b{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 16px;font-size:17px;color:var(--ink);text-align:left;border-top:.5px solid var(--sep)}
.pm-b:first-child,.pm-h+.pm-b,.pm-sep+.pm-b{border-top:0}
.pm-b svg{width:20px;height:20px;flex:none;color:var(--ink)}
.pm-b.red,.pm-b.red svg{color:var(--red)}
.pm-b:active{background:var(--fill)}
.pm-sep{height:8px;background:color-mix(in srgb,var(--sep) 55%,transparent)}
.sheet.half{top:auto;bottom:0;height:min(64dvh,620px)}

/* 1.10: search under title, boarding pass, timeline, polish */
.hsearch{display:flex;align-items:center;gap:6px;width:100%;margin-top:14px;height:36px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.18);color:rgba(255,255,255,.85);font-size:17px}
.hsearch svg{width:18px;height:18px}.hsearch:active{background:rgba(255,255,255,.26)}
.cell.passcell{display:block;padding:12px 14px}
.bp-wrap{display:flex;flex-direction:column;gap:8px}
.bp{border-radius:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 9%,var(--card)),var(--card));border:.5px solid color-mix(in srgb,var(--tint) 22%,transparent);padding:10px 12px 10px}
.bp-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.bp-cd{background:var(--tint);color:#fff;border-radius:8px;padding:2px 7px;letter-spacing:0;text-transform:none}
.bp-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.bp-a{display:flex;flex-direction:column;min-width:0;flex:1}
.bp-a.r{text-align:right;align-items:flex-end}
.bp-a b{font:700 30px/1.05 -apple-system,"SF Pro Display",system-ui;letter-spacing:-.01em;color:var(--ink)}
.bp-a span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bp-a i{font-style:normal;font-size:17px;font-weight:600;color:var(--tint);margin-top:2px}
.bp-a sup{font-size:11px;margin-left:2px;color:var(--mute)}
.bp-mid{flex:0 0 82px;display:flex;align-items:center;gap:4px;color:var(--tint)}
.bp-mid span{flex:1;border-top:1.5px dashed color-mix(in srgb,var(--tint) 45%,transparent)}
.bp-mid svg{width:20px;height:20px;flex:none}
.bp-det{display:flex;gap:18px;margin-top:8px;padding-top:8px;border-top:.5px dashed var(--sep)}
.bp-det span{display:flex;flex-direction:column}
.bp-det em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.bp-det b{font-size:17px;font-weight:600}
.bp-lay{font-size:13px;color:var(--mute);text-align:center}
.bp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bp-ref{font-size:14px;color:var(--mute)}.bp-ref b{color:var(--ink);font-weight:600;letter-spacing:.03em}
.fr.tri{gap:6px}.fr.tri>label{min-width:0;font-size:15px;color:var(--mute)}.fr.tri .in{text-align:left;font-weight:600}
.nowtag{display:inline-block;margin:0 0 3px;padding:1px 7px;border-radius:7px;background:#D70015;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.btn.danger-btn{background:var(--red);color:#fff}.btn.danger-btn:disabled{opacity:.35}
.circ.on.pop{animation:tickb .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes tickb{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

.ptypes{display:flex;gap:8px;overflow-x:auto;margin:10px -16px 4px;padding:0 16px 4px;scrollbar-width:none}
.ptypes::-webkit-scrollbar{display:none}
.ptype{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;background:var(--card);font-size:15px;font-weight:500;color:var(--ink);box-shadow:0 0 0 .5px var(--sep)}
.ptype.on{background:var(--tint);color:#fff;box-shadow:none}
.conv-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.conv-in,.conv-out{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;background:var(--fill);border-radius:10px;padding:8px 12px}
.conv-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 22px/1.2 -apple-system,system-ui;color:var(--ink)}
.conv-in span,.conv-out span{color:var(--mute);font-size:15px}
.conv-out b{flex:1;font:600 22px/1.2 -apple-system,system-ui;overflow:hidden;text-overflow:ellipsis}
.conv-sw{flex:none;width:36px;height:36px;border-radius:18px;background:var(--fill);color:var(--tint);font-size:18px}
.upd{position:fixed;left:12px;right:12px;bottom:calc(var(--safe-b) + 70px);z-index:55;max-width:520px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--ink);color:var(--card);font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s}
.upd.on{transform:none;opacity:1}
.upd button{flex:none;background:var(--tint);color:#fff;font-weight:600;border-radius:10px;padding:8px 14px}
.tabbar,.selbar{transform:translateY(var(--barfix,0px))}
.page>.group{content-visibility:auto;contain-intrinsic-size:auto 260px}
@media print{.page>.group{content-visibility:visible}}
@media print{.nav,.tabbar,.toast,#status,.noprint{display:none!important}.hero{background:none;color:#000;padding-top:0}body,html{background:#fff}}

/* segmented control: one selection pill that slides between segments (iOS) */
.seg.slide{position:relative}
.seg.slide>button{position:relative;z-index:1}
.seg.slide>button.on{background:transparent;box-shadow:none}
.seg-th{position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc((100% - 4px - (var(--n) - 1) * 2px) / var(--n));border-radius:7px;background:var(--card);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);transform:translateX(calc(var(--i,0) * (100% + 2px)));pointer-events:none}
@media (prefers-color-scheme:dark){.seg-th{background:#636366}}
.seg.onhero{background:#E4E4E9}
@media (prefers-color-scheme:dark){.seg.onhero{background:#2C2C2E}}
.nowleft{display:inline-block;margin:0 0 3px 6px;font-size:12px;font-weight:600;color:var(--red)}
.nowbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fill);overflow:hidden;pointer-events:none}
.nowbar::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}
.large,.tk-name,.t1{overflow-wrap:anywhere}
@media (prefers-color-scheme:dark){:root{--red-text:#FF6961}}
.nav.scrolled .nb.back span{display:none}   /* like iOS: when the title appears, the back button shrinks to its arrow */
.login .card.invite{text-align:center;margin:0 0 18px;border:1.5px solid var(--tint)}
/* ---------- Cover photo ---------- */
.nav{transition:box-shadow .2s,background-color .25s}
.nav.clear:not(.scrolled){background:transparent}
.hero.photo{background-color:var(--hero);background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,.22) 48%,rgba(0,0,0,.74) 100%),var(--cover);background-size:cover,cover;background-position:center,center var(--cy,50%);padding-top:calc(var(--safe-t) + 44px + 104px);padding-bottom:40px}
.hero.photo h1,.hero.photo .sub{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero.photo .hchip:not(.sun){background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero .credit{position:absolute;right:16px;bottom:19px;font-size:10px;color:#fff;opacity:.7;text-decoration:none;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.tk-band.photo{height:88px;background-color:hsl(var(--h,228) 88% 58%);background-image:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.18)),var(--cover);background-size:cover,cover;background-position:center,center var(--cy,50%)}
.covprev{border-radius:16px;overflow:hidden;margin-top:8px;min-height:210px;display:flex;align-items:flex-end;color:#fff;background:linear-gradient(180deg,var(--hero) 0%,var(--hero2) 160%)}
.covprev.photo{background-color:var(--hero);background-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.74) 100%),var(--cover);background-size:cover,cover;background-position:center,center var(--cy,50%)}
.covprev-in{padding:16px}.covprev .flags{font-size:22px}
.covprev-name{font:700 26px/1.15 -apple-system,"SF Pro Display",system-ui;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.covprev-sub{font-size:14px;opacity:.85;margin-top:2px}
.covrange{width:100%;accent-color:var(--tint)}
.settle-btn{flex:none;min-height:34px;padding:0 14px;border-radius:17px;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-text,#248A3D);font-weight:600;font-size:15px}
.settle-btn:active{opacity:.6}
@media (prefers-color-scheme:dark){:root{--green-text:#30D158}}