/* ============================================================
   PIG & CHICKEN · Europe 2026 — design system
   Modern light: warm pearl, antique gold, charcoal
   ============================================================ */
:root{
  --ink:#232028;          /* warm charcoal text */
  --ink-soft:#55515C;
  --muted:#8C8578;        /* warm taupe grey */
  --gold:#B0892E;         /* antique gold — legible on light */
  --gold-soft:#C9A34C;
  --gold-deep:#8A6B1E;
  --blue:#2E6FB0;
  --teal:#0F9E92;
  --coral:#EE7A56;
  --sun:#E3A233;
  --bg:#F6F1E7;           /* warm pearl */
  --bg2:#FBF7EF;
  --card:#FFFFFF;
  --card-soft:#FFFDF8;
  --line:#ECE5D6;         /* warm hairline */
  --shadow:0 2px 14px rgba(70,58,32,.07);
  --shadow-lift:0 14px 40px rgba(70,58,32,.14);
  --radius:20px;
  --radius-sm:14px;
  --nav-h:64px;
  --maxw:1180px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* expensive fashion-magazine serif (Didot/Bodoni ship with Apple devices) */
  --script:"Didot","Bodoni 72","Playfair Display","Times New Roman",Georgia,serif;
  /* event-type colours */
  --c-hotel:#EE7A56; --c-flight:#2E6FB0; --c-ferry:#0F9E92;
  --c-rail:#7A6FF0; --c-food:#D69420; --c-note:#9A9488;
  /* status */
  --ok:#0E8A66; --ok-bg:#E4F5EC;
  --info:#1E6BA8; --info-bg:#E7F0F9;
  --warn:#9A6D0E; --warn-bg:#FBF0D6;
  --bad:#C43D55; --bad-bg:#FBE7EB;
  --tbc:#8C8578; --tbc-bg:#F0EBE0;
  --chip3d:#FBF6EC;   /* soft cream tile behind the rendered 3D icons */
}
/* header logo image (compass + wordmark) — cream bg blends via multiply, click = home */
.hdr-logo{height:88px;width:auto;max-width:70%;object-fit:contain;object-position:left center;margin-right:auto;cursor:pointer;mix-blend-mode:multiply;flex:0 1 auto}
/* destination flag next to the pig/chick pax dots */
.pax-flag{font-size:17px;line-height:1;margin-right:1px}
/* premium rendered 3D icons — white backgrounds vanish via multiply onto the cream chip */
.ic3d{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:2px;display:block}
.ev-ic:has(.ic3d),.bk-ic:has(.ic3d),.sw-ic:has(.ic3d),.alert-ic:has(.ic3d){padding:2px;overflow:hidden}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(1100px 560px at 85% -8%, rgba(200,163,76,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 8%, rgba(255,255,255,.6), transparent 55%),
    linear-gradient(180deg,#F8F3EA 0%,#F6F1E7 50%,#F3EDE1 100%);
  background-attachment:fixed;background-color:#F6F1E7}
a{color:var(--gold-deep);text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.app{max-width:var(--maxw);margin:0 auto;min-height:100vh;padding-bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))}

/* ---------- header — frosted glass, stays with you as you scroll ---------- */
header.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:calc(16px + env(safe-area-inset-top)) 18px 14px;
  background:rgba(246,247,251,.66);
  backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);
  border-bottom:1px solid rgba(231,234,243,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.brand{flex:1;min-width:0;position:relative;z-index:2}
.brand .script{font-family:var(--script);font-style:italic;font-weight:700;font-size:25px;line-height:1.1;color:var(--ink);letter-spacing:.015em}
.brand .tag{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-weight:600;margin-top:2px}
/* bougainvillea spray trailing from the top corner */
.bougain{position:absolute;top:-6px;right:-8px;width:190px;height:74px;pointer-events:none;z-index:1;opacity:.96}
.head-avatar{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;cursor:pointer;flex:0 0 auto;position:relative;z-index:3}
.head-avatar:active{transform:scale(.94)}
.av-circle{width:50px;height:50px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:var(--shadow);border:2px solid #fff}
.av-circle img,.av-circle video{width:100%;height:100%;object-fit:cover}
.av-name{font-size:11px;font-weight:800;color:var(--ink-soft);letter-spacing:.05em;line-height:1;text-transform:uppercase}
/* fallback: raw video before JS populates */
.head-avatar > video{width:50px;height:50px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow);border:2px solid #fff}
.add-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--teal);color:#fff;cursor:pointer;position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;flex:0 0 42px;box-shadow:0 4px 14px rgba(0,180,166,.4);transition:transform .15s}
.add-btn:active{transform:scale(.92)}
.add-btn svg{width:20px;height:20px}
/* add-to-trip form (inside the sheet) */
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;font-size:15px;font-family:inherit;background:var(--bg);color:var(--ink);outline:none}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--teal);background:#fff}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* iOS's native date-picker chrome won't shrink below its own intrinsic width, which can push
   a grid column wider than its 1fr share and crowd/overlap the field next to it — this lets it shrink */
.form-2col .form-row{min-width:0}
.form-2col .form-row input,.form-2col .form-row select{min-width:0}
.kind-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.kind-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:18px;cursor:pointer}
.kind-chip svg{width:15px;height:15px}
.kind-chip .xpi,.kind-chip img{width:16px;height:16px;object-fit:contain;flex:0 0 auto}
.af-spicy{background:linear-gradient(160deg,#FCEEF3,#FBF4EC);border:1.5px solid #E7B8CC;border-radius:14px;padding:10px 12px 12px;margin:2px 0 12px}
.af-spicy-banner{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px}
.ssb-imgs{display:flex;align-items:flex-end;justify-content:center;gap:2px}
.ssb-imgs img{filter:drop-shadow(0 5px 9px rgba(180,90,120,.28))}
.ssb-duo{height:118px}
.ssb-chick{height:128px;margin-bottom:-4px}
.af-spicy-banner span{font-size:12.5px;font-weight:800;color:#C22861}
.tl-add-row{display:flex;justify-content:flex-end;margin:-2px 2px 12px}
.tl-add{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fff,var(--bg));border:1.5px solid rgba(176,137,46,.5);color:var(--gold-deep);font-size:13px;font-weight:800;padding:6px 15px 6px 6px;border-radius:22px;cursor:pointer;box-shadow:0 3px 10px rgba(120,90,20,.14)}
.tl-add-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#fff;flex:0 0 auto;box-shadow:inset 0 1px 2px rgba(255,255,255,.4)}
.tl-add-ic svg{width:15px;height:15px}
.tl-add:active{transform:scale(.97)}
html[data-pcwho="jo"] .tl-add{border-color:rgba(217,138,148,.5);color:#B4626D}
html[data-pcwho="jo"] .tl-add-ic{background:linear-gradient(160deg,#E2909A,#C96F7B)}
.af-grid{padding:2px;margin-bottom:8px}
/* sexy-time hearts render 2× bigger, but scale() keeps the tile's layout box unchanged */
.af-grid .act-chip img[src*="spicy"]{transform:scale(2);transform-origin:center}
.af-group i{position:relative}
.af-group.opened{border-color:var(--gold);background:#FBF6EC}
.af-subs{background:#FBF6EC;border:1.5px solid rgba(176,137,46,.4);border-radius:14px;padding:9px 8px;margin:0 0 12px}
.notes-tab.active .notes-tab-av{animation:notepulsePig 1.9s ease-in-out infinite}
.notes-tab.active .notes-tab-av.is-chick{animation:notepulseChick 1.9s ease-in-out infinite}
@keyframes notepulsePig{0%,100%{box-shadow:0 0 0 0 rgba(176,137,46,.55)}50%{box-shadow:0 0 0 6px rgba(176,137,46,0)}}
@keyframes notepulseChick{0%,100%{box-shadow:0 0 0 0 rgba(194,40,97,.5)}50%{box-shadow:0 0 0 6px rgba(194,40,97,0)}}
.paystat-note{font-size:11.5px;color:var(--muted);text-align:center;margin:-4px 2px 10px;line-height:1.5}
/* Notes — Apple-Notes-ish */
.notes-new{margin:0 0 12px}
.notes-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.note-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:0;padding:13px 14px;cursor:pointer}
.note-row:active{background:#F3EEE2}
.note-main{flex:1;min-width:0}
.note-title{font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-prev{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.note-when{color:var(--ink-soft);font-weight:700;margin-right:4px}
.note-go{color:var(--muted);font-size:20px;font-weight:700;flex:0 0 auto}
.note-title-in{width:100%;border:0;background:transparent;font-size:19px;font-weight:800;color:var(--ink);padding:6px 2px;outline:none}
.note-body-in{width:100%;border:1.5px solid var(--line);background:var(--card);border-radius:14px;font:inherit;font-size:15px;line-height:1.55;color:var(--ink);padding:12px;outline:none;resize:vertical;min-height:220px}
.note-body-in:focus,.note-title-in:focus{outline:none}
/* Notes — per-person tabs, pin, sketch */
.notes-tabs{display:flex;gap:8px;margin:0 0 12px}
.notes-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border:1.5px solid var(--line);background:var(--card);border-radius:14px;font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer}
.notes-tab.active{border-color:var(--gold);background:#FBF6EC;color:var(--gold-deep)}
.notes-tab-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1.5px solid var(--line);background:#fff}
.notes-tab-av img{width:100%;height:100%;object-fit:cover}
.notes-tab-av.is-chick{border-color:#E7B8CC}
.notes-sec-lbl{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:10px 2px 6px}
.note-row .note-thumb{width:44px;height:44px;border-radius:9px;object-fit:cover;border:1px solid var(--line);flex:0 0 auto;background:#fff;cursor:pointer}
.note-pin{flex:0 0 auto;background:none;border:0;color:var(--muted);padding:4px;cursor:pointer;opacity:.5}
.note-pin.on{color:var(--gold-deep);opacity:1}
.note-pin-btn{margin-left:auto;background:none;border:0;color:var(--muted);padding:4px;cursor:pointer;opacity:.55}
.note-pin-btn.on{color:var(--gold-deep);opacity:1}
.note-draw-img{width:100%;border:1.5px solid var(--line);border-radius:14px;margin:4px 0 12px;background:#fff;display:block}

/* ===== Notes / To-do: type sub-tabs + full-screen paper editors ===== */
.notes-types{display:flex;gap:10px;margin:0 0 14px}
.nt-type{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 8px;border:1.5px solid var(--line);background:var(--card);border-radius:16px;font-size:12.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;box-shadow:var(--shadow)}
.nt-type i{font-style:normal}
.nt-type-ic{width:26px;height:26px;color:var(--muted)}
.nt-type-ic svg{width:100%;height:100%}
.nt-type.active{border:2px solid var(--gold);background:#FFFDF6;color:var(--gold-deep);box-shadow:0 0 0 2px rgba(200,163,76,.28),0 3px 11px rgba(176,137,46,.2)}
.nt-type.active .nt-type-ic{color:var(--gold-deep)}

/* full-screen overlay that flips open like a page */
.fsheet{position:fixed;inset:0;z-index:120;background:linear-gradient(180deg,#F7F2E6,#EFE8D6);
  display:flex;flex-direction:column;opacity:0;will-change:transform,opacity;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.fsheet.open{opacity:1;transition:opacity .2s}
.fsheet.flip{transform-origin:50% 45%;animation:noteFlip .62s cubic-bezier(.2,.75,.25,1) both}
@keyframes noteFlip{0%{transform:perspective(1500px) rotateY(-92deg) scale(.94);opacity:0}45%{opacity:1}100%{transform:perspective(1500px) rotateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.fsheet.flip{animation:none}.fsheet{opacity:1}}
.fsn-bar{display:flex;align-items:center;gap:10px;padding:12px 16px 8px;flex:0 0 auto}
.fsn-back{background:none;border:0;color:var(--gold-deep);font-size:16px;font-weight:800;cursor:pointer;padding:6px 2px;display:flex;align-items:center;gap:4px}
.fsn-back span{font-size:24px;line-height:.8}
.fsn-bar .note-pin-btn{margin-left:auto;opacity:.6}
.fsn-done{background:var(--gold-deep);color:#fff;border:0;border-radius:12px;padding:9px 18px;font-size:14px;font-weight:800;cursor:pointer}
.fsn-tools{display:flex;align-items:center;gap:8px;padding:2px 16px 10px;flex-wrap:wrap;flex:0 0 auto;border-bottom:1px solid var(--line)}
.fsn-tool{min-width:40px;height:38px;padding:0 11px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;font-size:15px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fsn-tool.on{border-color:var(--gold);background:#FBF6EC;color:var(--gold-deep)}
.fsn-tool.fsn-draw{font-size:17px}
.fsn-font{height:38px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;padding:0 10px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit}
.fsn-paper{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:720px;margin:0 auto;
  background:#fff;box-shadow:0 -1px 0 var(--line);padding:18px 20px 40px}
.fsn-head{width:100%;border:0;background:transparent;font-family:inherit;font-size:25px;font-weight:800;color:var(--ink);padding:6px 0 8px;outline:none;border-bottom:1px solid #ececec;margin-bottom:6px}
.fsn-head::placeholder{color:#c9c6bd}
.fsn-body{width:100%;min-height:46vh;outline:none;font-family:inherit;font-size:16px;color:#26242c;
  line-height:32px;padding:4px 0;
  background-image:repeating-linear-gradient(#fff,#fff 31px,#e6ebf0 31px,#e6ebf0 32px);background-attachment:local}
.fsn-body:empty::before{content:attr(data-ph);color:#c9c6bd}
.fsn-body u{text-decoration-thickness:2px}
.fsn-body ul{margin:0 0 0 4px;padding-left:20px}
#fsn-drawwrap .note-draw-img{margin-top:14px}
.fsn-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 18px;max-width:720px;margin:0 auto;width:100%}
.fsn-savehint{font-size:12px;color:var(--muted)}
.fsn-del{background:none;border:0;color:var(--bad);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
.fsn-del svg{width:16px;height:16px}

/* Apple-style to-do */
.td-paper{padding-top:16px;position:relative;overflow:hidden}
.td-done-wrap{position:relative;display:inline-flex}
.td-peek{position:absolute;top:-33px;right:-22px;width:48px;height:auto;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 6px rgba(160,90,60,.22))}
.td-watermark{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);width:46%;max-width:200px;opacity:.045;pointer-events:none;z-index:0}
.td-paper .fsn-head,.td-paper .td-list,.td-paper .td-add{position:relative;z-index:1}
.td-list{margin:8px 0 6px}
.td-item{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid #eef0f2}
.td-check{width:25px;height:25px;flex:0 0 25px;border-radius:50%;border:2px solid #c4c0b4;background:none;cursor:pointer;position:relative;transition:background .16s,border-color .16s}
.td-check::after{content:"";position:absolute;left:8px;top:3.5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .16s}
.td-item.done .td-check{background:#2E9E5B;border-color:#2E9E5B}
.td-item.done .td-check::after{transform:rotate(45deg) scale(1)}
.td-text{flex:1;border:0;background:none;font-family:inherit;font-size:16.5px;color:var(--ink);outline:none;padding:3px 0;transition:color .2s}
.td-text::placeholder{color:#c9c6bd}
.td-item.done .td-text{color:#9aa0a6;text-decoration:line-through;text-decoration-color:#2E9E5B;text-decoration-thickness:2.5px}
.td-rm{flex:0 0 auto;background:none;border:0;color:#c9c6bd;font-size:15px;cursor:pointer;padding:4px 6px;opacity:0;transition:opacity .15s}
.td-item:hover .td-rm,.td-item:focus-within .td-rm{opacity:1}
.td-add{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--gold-deep);font-size:15px;font-weight:800;cursor:pointer;padding:12px 2px}
.td-add span{font-size:20px;line-height:.7}
/* to-do item: text stacked with an optional reminder chip; a bell to set one */
.td-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.td-mid .td-text{flex:none;width:100%}
.td-remind{font-size:11px;font-weight:700;color:var(--gold-deep)}
.td-item.done .td-remind{color:var(--muted)}
.td-bell{flex:0 0 auto;background:none;border:0;color:var(--muted);width:30px;height:30px;padding:5px;cursor:pointer;opacity:.6;border-radius:8px;font-size:15px;display:flex;align-items:center;justify-content:center}
.td-bell svg{width:100%;height:100%}
.td-bell.on{opacity:1;color:var(--gold-deep)}
html[data-pcwho="jo"] .td-bell.on{color:#C46B7E}
/* reminder modal — sits above the floating to-do card */
.rmd-veil{position:fixed;inset:0;z-index:200;background:rgba(24,16,8,.5);display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;transition:opacity .2s;backdrop-filter:blur(3px)}
.rmd-veil.open{opacity:1}
.rmd-card{width:100%;max-width:360px;background:var(--card);border-radius:22px;padding:20px;box-shadow:0 24px 70px rgba(20,12,4,.45);transform:scale(.92);transition:transform .22s}
.rmd-veil.open .rmd-card{transform:scale(1)}
.rmd-h{font-size:20px;font-weight:800;color:var(--ink)}
.rmd-sub{font-size:13px;color:var(--muted);margin:3px 0 8px}
.rmd-lbl{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:13px 0 6px}
.rmd-at{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;font-size:15px;font-family:inherit;background:var(--bg);color:var(--ink)}
.rmd-seg{display:flex;gap:6px}
.rmd-seg button{flex:1;padding:9px 4px;border:1.5px solid var(--line);background:var(--bg);border-radius:11px;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.rmd-seg button.on{border-color:var(--gold);background:#FBF6EC;color:var(--gold-deep)}
html[data-pcwho="jo"] .rmd-seg button.on{border-color:#D98A94;background:#FDF1F3;color:#B4626D}
.rmd-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.rmd-actions>span{flex:1}
.rmd-rm{flex:1;background:none;border:0;color:var(--bad);font-size:13px;font-weight:700;cursor:pointer;text-align:left;padding:0}
.rmd-cancel{background:none;border:0;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;padding:8px}
.rmd-save{background:var(--gold-deep);color:#fff;border:0;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:800;cursor:pointer}
html[data-pcwho="jo"] .rmd-save{background:#C46B7E}
/* iOS-style swipe-from-left "back" tab — pink for Jo, gold/black for Neil */
.edge-back{position:fixed;left:0;top:50%;transform:translateY(-50%) translateX(-64px);z-index:210;width:50px;height:58px;border-radius:0 29px 29px 0;background:#C46B7E;color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:800;opacity:0;pointer-events:none;box-shadow:0 8px 22px rgba(120,40,70,.35)}
html[data-pcwho="neil"] .edge-back{background:linear-gradient(135deg,#141008,#6E5316);color:#F0D89A;box-shadow:0 8px 22px rgba(0,0,0,.5)}

/* ===== Notes & Lists landing ===== */
.notes-view{padding-top:2px;position:relative}
.nl-head{position:relative;text-align:left;margin:2px 0 10px;min-height:80px;padding:4px 66px 2px 4px}
/* a soft oatmeal/white glow behind the eyebrow + title so the wordmark pops off the background */
.nl-head::before{content:"";position:absolute;left:-24px;top:-16px;width:86%;height:118px;z-index:0;pointer-events:none;
  background:radial-gradient(120% 96% at 26% 44%,rgba(255,253,248,.88),rgba(255,253,248,.34) 42%,rgba(255,253,248,0) 72%);filter:blur(9px)}
html[data-pcwho="neil"] .nl-head::before{background:radial-gradient(120% 96% at 26% 44%,rgba(244,236,220,.92),rgba(244,236,220,.4) 42%,rgba(244,236,220,0) 72%)}
.nl-eyebrow,.nl-title{position:relative;z-index:1}
.nl-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:2px}
.nl-eyebrow span{font-family:var(--script);font-size:16px;letter-spacing:.32em;color:#B4788A;font-weight:700;text-shadow:0 1px 1px rgba(255,255,255,.9)}
html[data-pcwho="neil"] .nl-eyebrow span{color:#A17828;text-shadow:0 1px 1px rgba(255,255,255,.85)}
.nl-eyebrow i{color:var(--gold);font-style:normal;font-size:12px}
.nl-eyebrow em{width:54px;height:1.5px;background:linear-gradient(90deg,var(--gold),rgba(200,163,76,0))}
.nl-title{position:relative;display:inline-block;font-family:var(--script);font-weight:700;font-size:31px;line-height:1;color:var(--ink);letter-spacing:.01em}
.nl-swoosh{position:absolute;left:2%;bottom:-11px;width:60%;height:13px;overflow:visible;color:#D98A9B}
html[data-pcwho="neil"] .nl-swoosh{color:#C6A24E}
/* peek sits at the title level (not up over the search orb) and is a touch smaller so it doesn't crowd the orb or cards */
.nl-peek{position:absolute;top:0;right:-14px;width:84px;height:auto;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(160,90,60,.22));z-index:3}
.nl-peek-neil{width:80px;top:-4px;right:-16px}
/* the peekaboo game — plays ONCE each visit (the screen rebuilds when you come back, which restarts it).
   Chick: slow in → hold ~5s → slow out → REALLY quick in-and-out → slow in → stays put. */
.nl-peek{animation:peekOnceChick 13.5s ease-in-out 1 both}
@keyframes peekOnceChick{
  0%{transform:translateX(115%)}     /* off the edge */
  18%{transform:translateX(0)}       /* slow glide in */
  55%{transform:translateX(0)}       /* hold ~5s */
  73%{transform:translateX(115%)}    /* slowly slips away */
  77%{transform:translateX(0)}       /* pops back really quick */
  81%{transform:translateX(115%)}    /* darts off again */
  100%{transform:translateX(0)}}     /* slow glide back in — and she stays */
/* Pig: a cheeky HALF-peek first (just the right eye), ducks back, pops fully out quick, settles and stays */
.nl-peek-neil{animation:peekOncePig 14s ease-in-out 1 both}
@keyframes peekOncePig{
  0%{transform:translateX(115%)}
  16%{transform:translateX(56%)}     /* half-peek — only the eye shows */
  48%{transform:translateX(56%)}     /* lingers at the edge */
  62%{transform:translateX(115%)}    /* ducks back in */
  67%{transform:translateX(0)}       /* pops right out, quick */
  80%{transform:translateX(4%)}      /* settles */
  100%{transform:translateX(0)}}     /* and stays */
@media(prefers-reduced-motion:reduce){.nl-peek,.nl-peek-neil{animation:none}}
.nl-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin:10px 0 12px}
.nl-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.nl-card:active{transform:scale(.97)}
.nl-cover-wrap{position:relative;width:100%;max-width:140px;margin:0 auto;line-height:0}
/* the ring is baked into the cover art (a clean concentric double-ring) — gold set on Pig's account, pink on Chicken's — so no mismatched CSS ring on top */
.nl-cover{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center center;display:block;filter:drop-shadow(0 9px 20px rgba(120,90,40,.22))}
.nl-card-n{position:absolute;top:6%;right:9%;min-width:24px;height:24px;border-radius:12px;background:var(--gold-deep);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 7px rgba(0,0,0,.25)}
.nl-card-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--script);font-size:15px;color:var(--ink);background:var(--card);border:1px solid rgba(200,163,76,.45);border-radius:20px;padding:3px 13px;box-shadow:0 3px 9px rgba(120,90,40,.12);white-space:nowrap}
.nl-card-pill i{color:var(--gold);font-style:normal;font-size:11px}
/* the pink + up top-centre (gold for Neil) */
.nl-plus{position:absolute;top:-2px;left:65%;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;background:#C46B7E;color:#fff;border:0;font-size:25px;font-weight:400;line-height:1;cursor:pointer;box-shadow:0 5px 14px rgba(196,107,126,.42);z-index:9;display:flex;align-items:center;justify-content:center;padding-bottom:3px}
/* each account marked exactly where they want their + */
html[data-pcwho="jo"] .nl-plus{left:70%}
html[data-pcwho="neil"] .nl-plus{left:51%;background:var(--gold-deep);box-shadow:0 5px 14px rgba(176,137,46,.42)}
.nl-plus:active{transform:translateX(-50%) scale(.92)}
.nl-newitem{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto 22px;padding:13px 32px;border:none;border-radius:26px;background:var(--gold-deep);color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(176,137,46,.3)}
.nl-newitem span{font-size:20px;line-height:.7}
.nl-newitem:active{transform:scale(.97)}
html[data-pcwho="jo"] .nl-newitem{background:#C46B7E;box-shadow:0 6px 16px rgba(196,107,126,.34)}
.nl-glance{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 2px 6px;box-shadow:var(--shadow)}
.nl-glance-h{display:flex;justify-content:space-between;align-items:center;padding:0 14px 8px;font-family:var(--script);font-size:20px;color:var(--ink)}
.nl-glance-h i,.nl-next i{color:var(--gold);font-style:normal}
.nl-next{font-size:15px;color:var(--gold-deep);font-family:var(--script)}
.nl-glance-empty{padding:4px 14px 14px;color:var(--muted);font-size:13px}
.nl-g-row{display:flex;align-items:center;gap:11px;padding:10px 14px;border-top:1px solid var(--line);cursor:pointer}
.nl-g-row.done .nl-g-title{color:var(--muted);text-decoration:line-through;text-decoration-color:#2E9E5B;text-decoration-thickness:2px}
.nl-g-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;border:1.5px solid var(--gold);background:#fff}
.nl-g-av.is-chick{border-color:#E7B8CC}
.nl-g-av img{width:118%;height:118%;object-fit:cover;object-position:center 20%;margin:-9%}
.nl-g-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nl-g-title{min-width:0;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-g-sub{min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-g-tag{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--gold-deep);background:rgba(200,163,76,.15);border:1px solid rgba(200,163,76,.3);border-radius:20px;padding:2px 9px}
.nl-g-tag.jo{color:#B4626D;background:rgba(226,142,152,.15);border-color:rgba(226,142,152,.4)}
.nl-g-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);background:none;cursor:pointer}
.nl-g-pin{flex:0 0 auto;color:var(--gold-deep);display:flex}
.nl-g-pin svg{width:17px;height:17px}
/* list overlay + new-item chooser */
.nll-paper{padding-top:10px}
.nll-head{position:relative;padding:4px 96px 10px 2px;min-height:72px}
.nll-head .nl-eyebrow{margin-bottom:0}
.nll-h2{font-family:var(--script);font-weight:700;font-size:40px;line-height:.96;color:var(--ink)}
.nll-pad{position:absolute;top:-8px;right:-16px;width:126px;height:auto;pointer-events:none;filter:drop-shadow(0 4px 10px rgba(160,90,60,.16))}
.nll-tabs{display:flex;align-items:center;gap:2px;background:var(--card);border:1.5px solid var(--line);border-radius:24px;padding:4px;margin:4px 0 16px;width:fit-content}
.nll-tabs button{border:0;background:none;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.nll-tabs button.on{background:#FBF6EC;color:var(--gold-deep);box-shadow:0 1px 4px rgba(176,137,46,.22)}
html[data-pcwho="jo"] .nll-tabs button.on{background:#FDF1F3;color:#B4626D}
.nll-tabs>i{color:var(--gold);font-style:normal;margin:0 5px}
/* the to-do page's "Pig knows everything" pad — a touch bigger & nudged so more of the chicken's hand shows */
.nll-pad-todo{width:150px;top:-6px;right:-22px}
.nll-list{display:flex;flex-direction:column;gap:14px}
/* swipe a row left to reveal Edit / Delete */
.nll-swipe{position:relative;overflow:hidden;border-radius:18px}
.nll-actions{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:stretch;border-radius:18px;overflow:hidden}
.nll-act{border:0;color:#fff;font-weight:800;font-size:14px;width:74px;cursor:pointer;letter-spacing:.02em}
.nll-act.edit{background:#8194AC}
.nll-act.del{background:#C6483F}
.nll-fg{position:relative;z-index:1;transition:transform .18s cubic-bezier(.3,.7,.3,1);will-change:transform;touch-action:pan-y}
.nll-swipe .nll-card{margin:0}
/* ── polished themed ring around the little character icons throughout — gold on Pig's account, pink on Chicken's ── */
html[data-pcwho="neil"] .ev-ic,html[data-pcwho="neil"] .bk-ic,html[data-pcwho="neil"] .sw-char,html[data-pcwho="neil"] .alert-ic:has(.ic3d){box-shadow:0 0 0 2px rgba(214,176,74,.9),0 3px 9px rgba(120,90,40,.16)}
html[data-pcwho="jo"] .ev-ic,html[data-pcwho="jo"] .bk-ic,html[data-pcwho="jo"] .sw-char,html[data-pcwho="jo"] .alert-ic:has(.ic3d){box-shadow:0 0 0 2px rgba(226,150,172,.92),0 3px 9px rgba(150,90,110,.16)}
/* weather tiles: gold frame on Pig's account, pink on Chicken's */
html[data-pcwho="jo"] .wx-card{border-color:rgba(219,140,150,.6)}
.sw-char{border-radius:50%}
/* one clean gold line around each card (no more pink+gold double border) */
.nll-card{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid rgba(200,163,76,.72);border-radius:18px;padding:17px 18px;box-shadow:0 5px 16px rgba(160,90,60,.1);cursor:pointer}
.fsheet.own-jo .nll-card{background:#fff}
.fsheet.own-neil .nll-card{background:#FFFDF7}
.nll-card:active{transform:scale(.99)}
.nll-card-body{flex:1;min-width:0}
.nll-card-t{font-family:var(--script);font-weight:700;font-size:22px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nll-card-sub{font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nll-card-sub b{color:#B4626D;font-weight:800}
html[data-pcwho="neil"] .nll-card-sub b{color:var(--gold-deep)}
.nll-pin{flex:0 0 auto;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;opacity:.55}
.nll-pin.on{color:var(--gold-deep);opacity:1}
/* a nice pink pin on Chicken's lists (gold stays on Pig's) */
.fsheet.own-jo .nll-pin{color:#D98A9B;opacity:.7}
.fsheet.own-jo .nll-pin.on{color:#C46B7E;opacity:1}
.nll-spark{color:var(--gold);font-style:normal;font-size:13px;flex:0 0 auto}
.nc-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.nc-title{font-family:var(--script);font-size:34px;color:var(--ink)}
.nc-sub{color:var(--muted);font-size:14px;margin:2px 0 28px}
.nc-choices{display:flex;gap:20px;align-items:center}
/* just the two premium card icons (label baked in) — no border, no extra text */
.nc-choice{background:none;border:0;padding:0;cursor:pointer;width:44vw;max-width:190px;line-height:0;transition:transform .15s ease}
.nc-choice:active{transform:scale(.96)}
.nc-choice img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(120,90,40,.18))}
/* convert-to-todo in the note editor */
.fsn-foot{gap:14px}
.fsn-conv{background:none;border:0;color:var(--gold-deep);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;margin-left:auto}
.fsn-conv-ic{width:16px;height:16px;display:inline-flex}
.fsn-conv-ic svg{width:100%;height:100%}
/* hovering (~85vh floating) card + double-spin */
.fs-backdrop{position:fixed;inset:0;z-index:119;background:rgba(24,16,8,.42);opacity:0;transition:opacity .28s;backdrop-filter:blur(2px)}
.fs-backdrop.open{opacity:1}
.fsheet.hover{inset:7vh 4vw;bottom:calc(7vh + env(safe-area-inset-bottom));border-radius:26px;overflow:hidden;box-shadow:0 30px 90px rgba(20,12,4,.4)}
.fsheet.spin{transform-origin:50% 50%;animation:noteSpin .82s cubic-bezier(.2,.72,.22,1) both}
@keyframes noteSpin{0%{transform:perspective(1600px) rotateY(-720deg) scale(.55);opacity:0}55%{opacity:1}100%{transform:perspective(1600px) rotateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.fsheet.spin{animation:none}}
/* Jo — soft pink airy editor chrome, feathered so the top & bottom melt into the paper */
html[data-pcwho="jo"] .fsheet{background:#FCF5F3}
html[data-pcwho="jo"] .fsn-bar{background:linear-gradient(180deg,#F7D3DD 0%,rgba(247,211,221,.4) 62%,rgba(247,211,221,0) 100%)}
html[data-pcwho="jo"] .fsn-tools{background:transparent;border-bottom-color:rgba(226,142,152,.28)}
html[data-pcwho="jo"] .fsn-foot{background:linear-gradient(0deg,#F7D3DD 0%,rgba(247,211,221,.32) 68%,rgba(247,211,221,0) 100%)}
html[data-pcwho="jo"] .fsn-done{background:#C46B7E}
html[data-pcwho="jo"] .fsn-back,html[data-pcwho="jo"] .fsn-conv,html[data-pcwho="jo"] .td-add,html[data-pcwho="jo"] .fsn-savehint{color:#B4626D}
html[data-pcwho="jo"] .fsn-tool.on{border-color:#D98A94;background:#FDF1F3;color:#B4626D}
html[data-pcwho="jo"] .td-item.done .td-check,html[data-pcwho="jo"] .nl-g-check.done{background:#2E9E5B;border-color:#2E9E5B}
/* ── editors themed by the ITEM's OWNER, not the viewer — Chicken opening Pig's list sees it gold, Pig opening Chicken's sees it pink ── */
.fsheet.own-jo{background:#FCF5F3}
.fsheet.own-jo .fsn-bar{background:linear-gradient(180deg,#F7D3DD 0%,rgba(247,211,221,.4) 62%,rgba(247,211,221,0) 100%)}
.fsheet.own-jo .fsn-tools{background:transparent;border-bottom-color:rgba(226,142,152,.28)}
.fsheet.own-jo .fsn-foot{background:linear-gradient(0deg,#F7D3DD 0%,rgba(247,211,221,.32) 68%,rgba(247,211,221,0) 100%)}
.fsheet.own-jo .fsn-done{background:#C46B7E}
.fsheet.own-jo .fsn-back,.fsheet.own-jo .fsn-conv,.fsheet.own-jo .td-add,.fsheet.own-jo .fsn-savehint,.fsheet.own-jo .nl-eyebrow span{color:#B4626D}
.fsheet.own-jo .fsn-tool.on{border-color:#D98A94;background:#FDF1F3;color:#B4626D}
.fsheet.own-neil{background:linear-gradient(180deg,#F7F2E6,#EFE8D6)}
/* Pig's NEW-ITEM chooser goes rich black feathered into just a whisper of oatmeal — like his front screen —
   so the black-and-gold cards sit on their natural stage (the paper editors keep their light look) */
.fsheet.nc-sheet.own-neil{background:
  radial-gradient(120% 62% at 50% 114%, #EFE8D6 0%, rgba(239,232,214,.4) 30%, rgba(239,232,214,0) 58%),
  linear-gradient(180deg,#121110 0%,#17150F 55%,#241F15 80%,#3E3420 93%,#6E5B36 100%)}
.fsheet.nc-sheet.own-neil .fsn-bar{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.fsheet.nc-sheet.own-neil .fsn-back{color:#E7C56B}
.fsheet.nc-sheet.own-neil .nc-choice img{filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.fsheet.own-neil .fsn-bar{background:linear-gradient(180deg,#EEE1C2 0%,rgba(238,225,194,.4) 62%,rgba(238,225,194,0) 100%)}
.fsheet.own-neil .fsn-tools{background:transparent;border-bottom-color:rgba(176,137,46,.28)}
.fsheet.own-neil .fsn-foot{background:linear-gradient(0deg,#EEE1C2 0%,rgba(238,225,194,.32) 68%,rgba(238,225,194,0) 100%)}
.fsheet.own-neil .fsn-done{background:#B0892E}
.fsheet.own-neil .fsn-back,.fsheet.own-neil .fsn-conv,.fsheet.own-neil .td-add,.fsheet.own-neil .fsn-savehint,.fsheet.own-neil .nl-eyebrow span{color:#9A7A2E}
.fsheet.own-neil .fsn-tool.on{border-color:#C9AE68;background:#FBF6E8;color:#9A7A2E}
/* the peeking friend now grabs the title line (not the Done button): pig for Pig's list, chick for Chicken's */
.td-titlewrap{position:relative}
.td-titlepeek{position:absolute;top:-10px;right:-48px;width:78px;height:auto;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 8px rgba(150,100,60,.24))}
/* "＋ New" sits at the far right of the notes-list top bar */
#nll-new{margin-left:auto}
.draw-tools{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:2px 0 10px}
.draw-sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0}
.draw-sw.on{box-shadow:0 0 0 2px var(--ink)}
.draw-div{width:1px;height:22px;background:var(--line);margin:0 2px}
.draw-size{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--line);background:var(--card);border-radius:9px;cursor:pointer}
.draw-size i{display:block;border-radius:50%;background:var(--ink)}
.draw-size.on{border-color:var(--ink)}
.draw-erase,.draw-clear{padding:6px 11px;border:1.5px solid var(--line);background:var(--card);border-radius:10px;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.draw-erase.on{border-color:var(--gold);background:#FBF6EC;color:var(--gold-deep)}
.draw-cv{width:100%;border:1.5px solid var(--line);border-radius:14px;background:#fff;touch-action:none;display:block;margin-bottom:12px}
/* destination sheet — hero banner + swipe between stops */
.dsheet-hero{position:relative;margin:2px -20px 10px;height:262px;display:flex;align-items:flex-end;overflow:hidden;touch-action:pan-y;background:#17140f}
/* zoomed-out photo: a blurred, dimmed copy fills the whole banner (the soft "hue" wings) … */
.dsheet-hero::before{content:"";position:absolute;inset:-8%;z-index:0;background-image:var(--himg);background-size:cover;background-position:center 52%;filter:blur(30px) brightness(.68) saturate(1.25)}
/* … and the real shot sits smaller in a centred window, its sides feathered into the blur */
.dsheet-hero-sharp{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:76%;z-index:1;
  background-image:var(--himg);background-size:cover;background-position:center var(--focal,60%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.dsheet-hero.no-img{background-position:center}
.dsheet-hero-grad{z-index:2}
.dsheet-hero-cap,.dsheet-nav{z-index:3}
.dsheet-hero-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.04) 34%,transparent 56%)}
.dsheet-hero-cap{position:relative;z-index:2;padding:8px 16px 10px}
.dsheet-city{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.dsheet-meta{font-size:11px;font-weight:600;color:rgba(255,255,255,.94);margin-top:1px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.dsheet-nav{position:absolute;top:44%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.34);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dsheet-nav svg{width:20px;height:20px}
.dsheet-nav.prev{left:10px}
.dsheet-nav.next{right:10px}
.dsheet-nav:active{background:rgba(0,0,0,.55)}
.dsheet-dots{display:flex;gap:6px;justify-content:center;margin:0 0 6px;flex-wrap:wrap}
.dsheet-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:width .2s,background .2s}
.dsheet-dots i.on{background:var(--gold);width:18px;border-radius:3px}
.dsheet-hint{text-align:center;font-size:11px;color:var(--muted);margin:0 0 12px}
.kind-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

.searchrow{display:flex;align-items:center;gap:11px;margin:10px 18px 2px}
.searchbar{flex:1;min-width:0;position:relative}
.searchbar input{width:100%;border:1px solid var(--line);border-radius:16px;padding:12px 16px 12px 42px;font-size:15px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);outline:none}
/* the notes-&-to-do orb: sits beside the (now shorter) search bar, big, gently pulsing — no spin */
.s-orb{flex:0 0 auto;width:60px;height:60px;border-radius:50%;border:0;background:none;padding:0;cursor:pointer;animation:orbPulse 2.7s ease-in-out infinite;position:relative}
.s-orb-dot{position:absolute;top:0;right:0;width:15px;height:15px;border-radius:50%;background:#E86A85;border:2.5px solid #F6F1E7;box-shadow:0 1px 4px rgba(0,0,0,.28);opacity:0;transform:scale(.4);transition:opacity .22s ease,transform .22s ease;pointer-events:none;z-index:4}
.s-orb.has-due .s-orb-dot{opacity:1;transform:scale(1);animation:orbDot 1.5s ease-in-out infinite}
html[data-pcwho="neil"] .s-orb-dot{background:#E0B44E;border-color:#0c0b0a}
html[data-pcwho="neil"] .s-orb.has-due .s-orb-dot{animation:orbDotG 1.5s ease-in-out infinite}
@keyframes orbDot{0%,100%{box-shadow:0 0 0 0 rgba(232,106,133,.55)}50%{box-shadow:0 0 0 7px rgba(232,106,133,0)}}
@keyframes orbDotG{0%,100%{box-shadow:0 0 0 0 rgba(224,180,78,.6)}50%{box-shadow:0 0 0 7px rgba(224,180,78,0)}}
.s-orb img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 9px rgba(120,90,30,.28))}
.s-orb:active{transform:scale(.94)}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
.s-orb.orb-spin{animation:orbSpin .48s cubic-bezier(.3,.7,.3,1)}
@keyframes orbSpin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(330deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}
.notes-view.nl-enter{animation:nlEnter .44s cubic-bezier(.2,.72,.24,1) both}
@keyframes nlEnter{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.s-orb{animation:none}.s-orb.orb-spin{animation:none}.notes-view.nl-enter{animation:none}}
.searchbar input:focus{border-color:var(--teal)}
.searchbar .s-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}

main{padding:8px 18px 30px}
.view{display:none}
.view.active{display:block;animation:rise .28s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- bottom navigation ---------- */
nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:center;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.65);
  box-shadow:0 -8px 30px rgba(11,29,58,.07),inset 0 1px 0 rgba(255,255,255,.75);
  transform:translateZ(0);will-change:transform;backface-visibility:hidden}
body{overscroll-behavior-y:none}
/* the peeking characters slide off the right edge — clip (not hidden: hidden makes a scroll container and can break the sticky header) so the page never scrolls sideways */
html,body{overflow-x:clip}
nav.tabs .wrap{display:flex;width:100%;max-width:560px}
nav.tabs button{flex:1;border:none;background:none;color:var(--muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:14px;
  font-size:10.5px;font-weight:600;transition:color .18s}
nav.tabs button svg{width:23px;height:23px}
nav.tabs button.active{color:var(--ink)}
nav.tabs button.active .ic-wrap{background:var(--sun)}
nav.tabs .ic-wrap{width:44px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:background .18s}
/* premium nav icons: navy default, its gold twin when the tab is active (two raster sets) */
nav.tabs .ic-wrap .nic{width:25px;height:25px;object-fit:contain;display:block}
nav.tabs .ic-wrap .nic-on{display:none}
nav.tabs button.active .ic-wrap .nic-off{display:none}
nav.tabs button.active .ic-wrap .nic-on{display:block}

/* ---------- generic cards ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px;border:1px solid rgba(231,234,243,.6)}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
.sec h2{font-size:17px;font-weight:800;margin:0;letter-spacing:-.01em}
.sec .more-link{font-size:13px;font-weight:600;color:var(--blue)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;background:var(--tbc-bg);color:var(--ink-soft);white-space:nowrap}
.badge{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.02em}
.b-ok{background:var(--ok-bg);color:var(--ok)} .b-info{background:var(--info-bg);color:var(--info)}
.b-warn{background:var(--warn-bg);color:var(--warn)} .b-bad{background:var(--bad-bg);color:var(--bad)}
.b-tbc{background:var(--tbc-bg);color:var(--tbc)}
/* one-tap "mark paid" pill, sits right alongside the status badges */
.badge-paid-btn{font-size:10.5px;font-weight:800;padding:3px 10px 3px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.02em;
  border:1.5px solid var(--gold);background:#FBF6E8;color:var(--gold-deep);cursor:pointer;line-height:1.5}
.badge-paid-btn:active{transform:scale(.96)}

/* ---------- TODAY ---------- */
.greet{display:flex;align-items:center;gap:16px;margin:8px 0 4px}
.greet .txt .hi{font-size:16.5px;color:var(--muted);font-weight:600}
.greet .txt .names{font-family:var(--script);font-style:italic;font-weight:700;font-size:34px;line-height:1.05;color:var(--ink)}
.greet .chars{width:118px;height:118px;flex:0 0 118px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#FFEFD9,#FFE3EC);box-shadow:var(--shadow)}
.greet .chars img,.greet .chars video{width:100%;height:100%;object-fit:cover}
.av-circle video{width:100%;height:100%;object-fit:cover}

.countdown{background:linear-gradient(135deg,var(--ink) 0%,#14335F 60%,#1B4A7A 100%);color:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow-lift);position:relative;overflow:hidden;margin-bottom:14px}
.countdown .cd-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.75;font-weight:700}
.countdown .cd-big{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:2px 0 4px;position:relative;z-index:2}
.countdown .cd-big small{font-size:18px;font-weight:700;opacity:.85}
.countdown .cd-sub{font-size:13px;opacity:.85;position:relative;z-index:2}
/* living background: drifting aurora blobs + a light sweep + a little plane */
.countdown .cd-deco{position:absolute;right:-24px;top:-24px;width:130px;height:130px;border-radius:50%;background:rgba(255,209,102,.20);animation:blobFloat 11s ease-in-out infinite alternate}
.countdown .cd-deco2{position:absolute;right:36px;bottom:-40px;width:90px;height:90px;border-radius:50%;background:rgba(0,180,166,.24);animation:blobFloat 9s 1.2s ease-in-out infinite alternate-reverse}
.countdown .cd-deco3{position:absolute;left:-30px;bottom:-46px;width:110px;height:110px;border-radius:50%;background:rgba(255,122,89,.16);animation:blobFloat 13s .6s ease-in-out infinite alternate}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-14px,10px) scale(1.14)}}
.countdown::after{content:"";position:absolute;top:-60%;left:-30%;width:36%;height:220%;transform:rotate(22deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0));
  animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-40%}90%,100%{left:130%}}
/* a character rises from the bottom edge so only eyes+nose crest OVER the text,
   blinks twice, then slowly ducks back down. Pig goes, then the chick. */
.cd-peek{position:absolute;bottom:0;width:150px;height:150px;z-index:4;pointer-events:none;
  object-fit:contain;object-position:top center;transform-origin:bottom center;
  transform:translateY(100%);opacity:1;filter:drop-shadow(0 -1px 6px rgba(0,0,0,.28))}
.cd-chick{left:150px;animation:peekChick 26s ease-in-out infinite}
.cd-pig{left:26px;animation:peekPig 26s ease-in-out infinite}
/* pure slide (no opacity fade) — the card's overflow:hidden clips them below the edge.
   chick rises a touch higher, both hold ~3x longer, then slide back down. */
@keyframes peekChick{
  0%{transform:translateY(100%)}
  6%{transform:translateY(46%)}     /* chick up — higher crest */
  27%{transform:translateY(46%)}    /* long hold (~5s) */
  33%{transform:translateY(100%)}   /* slide down (not fade) */
  74%{transform:translateY(100%)}
  80%{transform:translateY(46%)}    /* both up together */
  93%{transform:translateY(46%)}    /* long hold */
  99%{transform:translateY(100%)}
  100%{transform:translateY(100%)}}
@keyframes peekPig{
  0%,38%{transform:translateY(100%)}
  44%{transform:translateY(52%)}    /* pig up, after chick has gone down */
  60%{transform:translateY(52%)}    /* long hold */
  66%{transform:translateY(100%)}   /* slide down */
  74%{transform:translateY(100%)}
  80%{transform:translateY(52%)}    /* both up together */
  93%{transform:translateY(52%)}    /* long hold */
  99%{transform:translateY(100%)}
  100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.cd-peek{display:none}}
.cd-plane{position:absolute;top:26%;left:-12%;width:22px;height:22px;color:rgba(255,255,255,.85);z-index:1;animation:planeFly 14s linear infinite}
.cd-plane svg{width:100%;height:100%;transform:rotate(12deg)}
@keyframes planeFly{0%,58%{left:-12%;top:30%;opacity:0}62%{opacity:.9}80%{top:16%}96%{opacity:.9}100%{left:106%;top:12%;opacity:0}}
.progressbar{height:8px;border-radius:6px;background:rgba(255,255,255,.18);margin-top:12px;overflow:hidden}
.progressbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--sun))}

/* destination scroller */
.dest-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0 -18px;padding-left:18px;padding-right:18px;scrollbar-width:none}
.dest-scroll::-webkit-scrollbar{display:none}
.dest-card{flex:0 0 212px;height:372px;border-radius:26px;overflow:hidden;position:relative;scroll-snap-align:start;box-shadow:var(--shadow-lift);cursor:pointer;background:var(--ink)}
.dest-card .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* living video layer — the still shows instantly; the video fades in once it can play */
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.dest-card.has-video .bgvid{opacity:1}
.dest-card.has-video .p-ol,.dest-card.has-video .birds,.dest-card.has-video .l,
.dest-card.has-video .sun,.dest-card.has-video .sil,.dest-card.has-video .sea,.dest-card.has-video .boat{display:none}
/* corner overlays only — top for the name, soft corner vignettes so the animals stay clear */
.dest-card .shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(4,7,16,.62) 0%,rgba(4,7,16,.14) 20%,rgba(4,7,16,0) 34%),
  radial-gradient(140% 60% at 0% 100%, rgba(4,7,16,.66), transparent 60%),
  radial-gradient(140% 60% at 100% 100%, rgba(4,7,16,.60), transparent 60%)}
.dest-card .d-top{position:absolute;top:0;left:0;right:44px;padding:15px 14px 0;color:#fff}
.dest-card .d-name{font-family:var(--script);font-weight:700;font-size:23px;letter-spacing:.01em;line-height:1.02;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.dest-card .d-cty{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;opacity:.94;margin-top:3px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.dest-card .d-cty .fl{font-size:13px}
/* favourite heart, top-right */
.dest-card .d-fav{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;z-index:3;
  background:rgba(8,11,20,.4);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff}
.dest-card .d-fav svg{width:17px;height:17px}
.dest-card .d-fav.on{color:var(--gold)}
.dest-card .d-fav.on svg{fill:var(--gold)}
/* weather bottom-LEFT */
.dest-card .d-wx{position:absolute;left:13px;bottom:13px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.dest-card .d-wx .t{display:flex;align-items:center;gap:5px;font-size:17px;font-weight:800;line-height:1}
.dest-card .d-wx .t svg{width:16px;height:16px;color:var(--gold-soft)}
.dest-card .d-wx .cond{font-size:10.5px;font-weight:600;opacity:.9;margin-top:2px;text-transform:capitalize}
/* nights + tiny dates bottom-RIGHT */
.dest-card .d-nights{position:absolute;right:13px;bottom:13px;text-align:right;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.dest-card .d-nights .n{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dest-card .d-nights .n b{color:var(--gold-soft)}
.dest-card .d-nights .dt{font-size:9.5px;font-weight:600;opacity:.85;margin-top:1px;letter-spacing:.01em}
/* pagination dots under the scroller */
.dest-dots{display:flex;gap:6px;justify-content:center;margin:2px 0 2px}
.dest-dots i{width:6px;height:6px;border-radius:50%;background:rgba(212,175,55,.3);transition:all .2s}
.dest-dots i.on{background:var(--gold);width:18px;border-radius:3px}

/* next-up + event rows */
.event-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.event-row:last-child{border-bottom:none}
.ev-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;color:#fff}
.ev-ic svg{width:20px;height:20px}
.ev-body{flex:1;min-width:0}
.ev-title{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ev-sub{font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.ev-when{font-size:11.5px;font-weight:700;color:var(--blue);margin-top:3px}
.ev-chev{color:var(--muted);align-self:center}

/* alert list — icon left, severity dot right, tappable to resolve */
.alert-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13px;align-items:center;cursor:pointer}
.alert-row:last-child{border-bottom:none}
.alert-row:active{opacity:.7}
.alert-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 36px;color:#fff}
.alert-ic svg{width:17px;height:17px}
.alert-body{flex:1;min-width:0}
.alert-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.alert-row .ev-chev{margin-left:2px}
.alert-row.resolved{opacity:.72}
.alert-row.resolved .alert-body b{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--teal)}
/* pig/chick pax dots + airline lettermark chips */
.pax-row{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
.pax-dot{width:30px;height:30px;border-radius:50%;background-color:#FBF3E2;background-repeat:no-repeat;border:2px solid #fff;box-shadow:0 1px 4px rgba(11,29,58,.2)}
.pax-dot.pig{background-image:url("images/characters/pig-peek.png");background-size:135%;background-position:50% 16%}
.pax-dot.chick{background-image:url("images/characters/chick-peek.png");background-size:140%;background-position:50% 14%}
/* bigger, clearer character dots on the main lists */
.event-row .pax-dot,.tl-card .pax-dot,.bk-card .pax-dot{width:34px;height:34px}
.air-chip{font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;padding:4px 8px;border-radius:8px;line-height:1}
/* resolve sheet person picker */
.who-pick{display:flex;gap:12px;margin:6px 0 4px}
.who-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;border:2px solid var(--line);border-radius:18px;padding:14px 8px;background:var(--card);cursor:pointer;font-weight:800;font-size:14px;color:var(--ink)}
.who-btn.active{border-color:var(--teal);background:#EDFBF8}
.who-btn .avatar{width:52px;height:52px}
/* timeline view toggle + scale (calendar) view */
.tl-toggle{display:flex;background:var(--tbc-bg);border-radius:14px;padding:3px;margin-bottom:12px;width:max-content}
.tl-toggle button{border:none;background:none;font-size:12.5px;font-weight:700;color:var(--muted);padding:7px 16px;border-radius:11px;cursor:pointer}
.tl-toggle button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.cal-wrap{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(231,234,243,.6);overflow:hidden;display:flex}
.cal-days{flex:0 0 46px;border-right:1px solid var(--line)}
.cal-day{height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase}
.cal-day b{font-size:13px;color:var(--ink);line-height:1.1}
.cal-day.month b{color:var(--coral)}
.cal-stays{flex:0 0 112px;position:relative;border-right:1px solid var(--line);
  background:repeating-linear-gradient(180deg,transparent 0 39px,var(--line) 39px 40px)}
.cal-bar{position:absolute;left:6px;right:6px;border-radius:11px;color:#fff;padding:6px 8px;font-size:11px;font-weight:800;line-height:1.15;overflow:hidden;cursor:pointer;box-shadow:0 1px 4px rgba(11,29,58,.2)}
.cal-bar small{display:block;font-weight:600;opacity:.85;font-size:9.5px}
.cal-bar .cb-ww{display:flex;align-items:center;gap:3px;margin-bottom:2px}
.cal-bar .cb-ic{display:inline-flex;color:#fff}
.cal-bar .cb-ic svg{width:13px;height:13px}
.cal-bar .pax-dot{width:16px;height:16px;border-width:1.5px;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.cal-pill .pax-dot{width:15px;height:15px;border-width:1.5px;margin-left:2px}
.cal-events{flex:1;position:relative;
  background:repeating-linear-gradient(180deg,transparent 0 39px,var(--line) 39px 40px)}
.cal-slot{position:absolute;left:8px;right:6px;display:flex;gap:5px;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cal-slot::-webkit-scrollbar{display:none}
.cal-pill{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:4px 8px 4px 4px;font-size:10.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.cal-pill .p-ic{width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff}
.cal-pill .p-ic svg{width:11px;height:11px}

/* weather strip */
.wx-strip{display:flex;gap:10px;overflow-x:auto;margin:0 -18px;padding:2px 18px 10px;scrollbar-width:none}
.wx-strip::-webkit-scrollbar{display:none}
.wx-tile{flex:0 0 108px;background:var(--card);border-radius:16px;padding:11px 12px;box-shadow:var(--shadow);text-align:center}
.wx-tile .w-city{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-tile .w-temp{font-size:21px;font-weight:800;margin:2px 0}
.wx-tile .w-cond{font-size:10.5px;color:var(--muted)}
.w-ic{display:inline-flex;vertical-align:-2px}
.w-ic svg{width:16px;height:16px;color:#E8A400}
.wx-tile .w-temp{display:flex;align-items:center;justify-content:center;gap:5px}
.wx-note{font-size:11.5px;color:var(--muted);margin:2px 2px 0}

/* ---------- TIMELINE ---------- */
.tl-day{position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 82%,rgba(246,247,251,0));padding:10px 2px 8px;font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.tl-day .d-num{background:var(--ink);color:#fff;border-radius:12px;padding:3px 10px;font-size:12px}
.tl-day .d-loc{color:var(--muted);font-weight:600;font-size:12px}
.tl-items{position:relative;margin-left:6px;padding-left:26px;border-left:2.5px solid var(--line)}
.tl-item{position:relative;margin-bottom:12px}
.tl-item .node{position:absolute;left:-47px;top:12px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 4px var(--bg)}
.tl-item .node svg{width:13px;height:13px}
.tl-card{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px 14px;cursor:pointer;border:1px solid rgba(231,234,243,.6)}
.tl-time{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.tl-title{font-weight:700;font-size:14.5px;margin-top:1px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tl-sub{font-size:12.5px;color:var(--muted);margin-top:1px}

/* ---------- BOOKINGS ---------- */
.filter-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -18px;padding-left:18px;padding-right:18px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.fchip{border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);font-size:13px;font-weight:700;padding:8px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all .15s}
.fchip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.bk-card{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:13px 14px;margin-bottom:11px;cursor:pointer;border:1px solid rgba(231,234,243,.6)}
.bk-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 44px;color:#fff}
.bk-ic svg{width:21px;height:21px}
.bk-body{flex:1;min-width:0}
.bk-title{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-sub{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-right{text-align:right;flex:0 0 auto}
.bk-when{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}

/* ---------- COSTS ---------- */
.cost-hero{background:linear-gradient(135deg,#fff,#FDFBF4);border-radius:24px;box-shadow:var(--shadow);padding:20px;text-align:center;margin-bottom:14px;border:1px solid rgba(231,234,243,.6)}
.cost-hero .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}
.cost-hero .amt{font-size:40px;font-weight:800;letter-spacing:-.02em;margin:2px 0}
.cost-hero .sub{font-size:12px;color:var(--muted)}
.seg{display:flex;background:var(--tbc-bg);border-radius:16px;padding:4px;margin:0 0 14px}
.seg button{flex:1;border:none;background:none;font-size:13px;font-weight:700;color:var(--muted);padding:9px 4px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.seg button.active{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.seg .avatar.sm{width:34px;height:34px;flex:0 0 34px}
.donut-wrap{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.donut-wrap svg{flex:0 0 130px}
.legend{flex:0 1 200px;min-width:0;font-size:12.5px}
.legend .lg-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.legend .lg-dot{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.legend .lg-name{flex:1;color:var(--ink-soft);font-weight:600}
.legend .lg-val{font-weight:800;font-variant-numeric:tabular-nums}
.paystat{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px}
.paystat .ps{border-radius:var(--radius-sm);padding:13px 15px}
.paystat .ps .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.paystat .ps .v{font-size:21px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.ps.paid{background:var(--ok-bg);color:var(--ok)}
.ps.due{background:var(--bad-bg);color:var(--bad)}
.ps.due.ahead{background:var(--ok-bg);color:var(--ok)}
/* the two settle buttons — roomy, premium, no cramped wrapping */
.paystat .ps.pay{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:left;border:1.5px solid var(--line);background:var(--card);cursor:pointer;min-height:76px;box-shadow:0 2px 8px rgba(60,45,15,.06)}
.paystat .ps.pay .l{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.paystat .ps.pay .l .pax-dot{width:26px;height:26px;flex:0 0 auto}
.paystat .ps.pay .v{font-size:19px;font-weight:800;margin-top:0;display:flex;align-items:center;gap:6px}
.ps.pay.ower{border-color:rgba(176,137,46,.55);background:linear-gradient(180deg,#fff,var(--bg))}
.ps.pay.ower .v{color:var(--gold-deep)}
.ps.pay.ower .ps-go{color:var(--gold);font-weight:900}
.ps.pay.owed{background:var(--ok-bg);border-color:transparent}
.ps.pay.owed .l,.ps.pay.owed .v{color:var(--ok)}
.ps.pay:active{transform:scale(.98)}
html[data-pcwho="jo"] .ps.pay.ower{border-color:rgba(217,138,148,.55)}
html[data-pcwho="jo"] .ps.pay.ower .v,html[data-pcwho="jo"] .ps.pay.ower .ps-go{color:#B4626D}
.settle-net{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--pearl,#F7F1E6);border:1.5px solid var(--gold);border-radius:14px;padding:12px 15px;margin:4px 0 12px}
.settle-net span{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.settle-net b{font-size:22px;font-weight:800;color:var(--gold-deep)}
.settle-net b.ok{color:var(--ok)}
.settle-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 2px 4px}
.pay-row .pay-amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-row.netted{opacity:.72}
.pay-row.netted b,.pay-row.netted .pay-amt{text-decoration:line-through;text-decoration-color:var(--ok);color:var(--ok)}
.cost-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.cost-row:last-child{border-bottom:none}
.cost-row .c-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.cost-row .c-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink-soft)}
.cost-row .c-amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-row .c-sub{font-size:11px;color:var(--muted);font-weight:600}
.note{background:#FFF9EA;border:1px solid #F4E7C3;border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:#6B5A23;margin-top:12px}

/* ---------- MORE / grid ---------- */
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.mg-tile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:17px 16px;cursor:pointer;border:1px solid rgba(231,234,243,.6)}
.mg-tile .t-ic{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:10px}
.mg-tile .t-ic svg{width:20px;height:20px}
.mg-tile .t-name{font-weight:800;font-size:14.5px}
.mg-tile .t-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.back-btn{display:inline-flex;align-items:center;gap:6px;border:none;background:var(--card);box-shadow:var(--shadow);color:var(--ink);font-size:13px;font-weight:700;padding:9px 15px;border-radius:20px;cursor:pointer;margin-bottom:14px}

/* document vault — folder cards */
.vault-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.vault-card{position:relative;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:13px 13px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s;font-family:inherit}
.vault-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.vault-card:active{transform:translateY(0)}
.vault-tab{position:absolute;top:-8px;left:16px;width:40px;height:14px;border-radius:6px 6px 0 0}
.vault-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;margin:4px 0 9px}
.vault-ic svg{width:20px;height:20px}
.vault-ic.lg{width:52px;height:52px;border-radius:16px;flex:0 0 52px;margin:0}
.vault-ic.lg svg{width:26px;height:26px}
.vault-name{display:block;font-weight:800;font-size:13.5px;color:var(--ink)}
.vault-count{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* docs */
.doc-row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px 14px;margin-bottom:10px;border:1px solid rgba(231,234,243,.6)}
.doc-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;color:#fff}
.doc-ic svg{width:19px;height:19px}
/* v96 — the pig & chicken holding the map (with the red pin) replaces the plain orange pin chip */
.doc-ic.doc-map{width:50px;height:50px;flex:0 0 50px;border-radius:14px;object-fit:cover;background:none;
  box-shadow:0 2px 7px rgba(70,58,32,.18)}
.doc-body{flex:1;min-width:0}
.doc-title{font-weight:700;font-size:13.5px}
.doc-sub{font-size:11.5px;color:var(--muted);margin-top:1px}

/* map route */
.route-strip{overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 14px;margin-bottom:14px}
.route-inner{display:flex;min-width:max-content}
.rstop{display:flex;flex-direction:column;align-items:center;min-width:86px;position:relative}
.rstop .seg-line{position:absolute;top:12px;left:50%;width:100%;height:3px;background:var(--line)}
.rstop .r-dot{width:24px;height:24px;border-radius:50%;z-index:1;border:4px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
.rstop .r-name{font-size:11px;font-weight:800;margin-top:7px;text-align:center;line-height:1.2}
.rstop .r-date{font-size:9.5px;color:var(--muted);font-weight:600;margin-top:1px}

/* ---------- bottom sheet ---------- */
.sheet-veil{position:fixed;inset:0;background:rgba(11,29,58,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px)}
.sheet-veil.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--card);border-radius:26px 26px 0 0;box-shadow:0 -8px 40px rgba(11,29,58,.25);
  transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.7,.3,1);max-height:86vh;overflow-y:auto;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.sheet.open{transform:translateY(0)}
/* destination sheet — a FLOATING card (not glued to the bottom): inset from every edge,
   rounded on all corners, lifted off the bottom, and capped so it never runs off the top.
   Keeps the same translateY transform so pull-down-to-close & swipe-between-stops still work. */
.sheet.dfloat{left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-width:460px;margin:0 auto;
  border-radius:26px;max-height:calc(100dvh - 22px - env(safe-area-inset-top));
  box-shadow:0 26px 64px rgba(11,29,58,.42),0 4px 14px rgba(11,29,58,.2)}
/* show the WHOLE hero photo (thought-bubble characters and all) — contained inside the
   soft blurred "wings", no side-fade, so nothing important is cropped */
.sheet.dfloat .dsheet-hero{margin:0 -20px 12px;height:236px;border-radius:26px 26px 0 0}
.sheet.dfloat .dsheet-hero-sharp{width:100%;background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:none;mask-image:none}
/* weather card → detail: the card presses, then flips over & zooms out to present its "back" (the full forecast).
   Once open it behaves exactly as before — pull it down to dismiss. Mobile bottom-sheet only. */
@media (max-width:699px){
  .wx-card.wx-press{transform:scale(.92)!important;transition:transform .13s ease}
  .sheet.wx-flip.open{animation:wxFlipIn .58s cubic-bezier(.2,.72,.24,1)}
  @keyframes wxFlipIn{
    0%{transform:perspective(1300px) translateY(4%) scale(.68) rotateY(-70deg);opacity:.25}
    58%{transform:perspective(1300px) translateY(0) scale(1.015) rotateY(8deg);opacity:1}
    100%{transform:perspective(1300px) translateY(0) scale(1) rotateY(0)}
  }
}
@media(prefers-reduced-motion:reduce){.sheet.wx-flip.open{animation:none}.wx-card.wx-press{transform:none!important}}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 14px}
.sheet .sh-head{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.sheet .sh-title{font-size:18px;font-weight:800;line-height:1.2}
.sheet .sh-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.dg-cell{background:var(--bg);border-radius:12px;padding:10px 12px}
.dg-cell .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.dg-cell .v{font-size:13.5px;font-weight:700;margin-top:2px;word-break:break-word}
.dg-cell.wide{grid-column:1/-1}
.dg-cell .v .copy-ic{opacity:.45;margin-left:5px;vertical-align:-2px;display:inline-block}
.dg-cell .v .copy-ic svg{width:13px;height:13px;display:inline}
.actions-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.act-btn{display:inline-flex;align-items:center;gap:7px;border:none;font-size:13px;font-weight:700;padding:11px 16px;border-radius:16px;cursor:pointer;color:#fff;background:var(--ink)}
.act-btn svg{width:16px;height:16px}
.act-btn.teal{background:var(--teal)} .act-btn.coral{background:var(--coral)}
.act-btn.ghost{background:var(--tbc-bg);color:var(--ink)}
/* v102 — small, tidy action buttons: even 2-up grid, pushed to the bottom, light neutral pills
   with just a colour-coded icon + label (green Call, Apple-blue Map). No heavy tinted fills. */
.sheet.acct .actions-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:20px}
.sheet.acct .actions-row .act-btn{justify-content:flex-start;box-shadow:none;font-size:11.5px;font-weight:600;
  padding:8px 11px;border-radius:11px;gap:6px;border:1px solid rgba(120,110,90,.14);
  background:rgba(255,255,255,.5)!important;color:#54515C!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet.acct .actions-row .act-btn svg{width:14px;height:14px;flex:0 0 14px}
.sheet.acct .actions-row .act-btn.teal{color:#2C8C46!important}   .sheet.acct .actions-row .act-btn.teal svg{color:#34C759}
.sheet.acct .actions-row .act-btn.gl-map{color:#1268CE!important} .sheet.acct .actions-row .act-btn.gl-map svg{color:#007AFF}
.sheet.acct .actions-row .act-btn.coral{color:#B85536!important}  .sheet.acct .actions-row .act-btn.coral svg{color:#F2653F}
.sheet.acct .actions-row .act-btn.ghost{color:#8A6B1E!important}  .sheet.acct .actions-row .act-btn.ghost svg{color:#B0892E}
.toast{position:fixed;bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 20px;border-radius:20px;box-shadow:var(--shadow-lift);opacity:0;transition:all .3s;z-index:70;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.empty{color:var(--muted);font-size:13.5px;text-align:center;padding:34px 20px}
.empty .e-chars{width:96px;height:96px;margin:0 auto 12px;border-radius:24px;overflow:hidden;opacity:.9}
.empty .e-chars img{width:100%;height:100%;object-fit:cover}
.foot{color:var(--muted);font-size:11px;text-align:center;padding:20px 18px 8px}

/* ============================================================
   LIVING DESTINATION CARDS — 22s day/night cycle, pure CSS
   ============================================================ */
:root{--cycle:48s}
.scene{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.scene .l{position:absolute;inset:0;pointer-events:none}
/* sky phases (silhouette cards) — dawn → day → golden → bright dusk → dawn. Never dark. */
.l-day{background:linear-gradient(180deg,#7FBEE3 0%,#B8DDF0 52%,#EAF2F7 100%)}
.l-sunset{background:linear-gradient(180deg,#7A6BA8 0%,#C4699B 34%,#FF9A62 68%,#FFD9A0 100%);opacity:0;animation:ph-sunset var(--cycle) linear infinite}
.l-night{background:linear-gradient(180deg,#5C5490 0%,#C86B8E 45%,#FF9E6E 78%,#FFC98B 100%);opacity:0;animation:ph-night var(--cycle) linear infinite}
.l-dawn{background:linear-gradient(180deg,#7C87B8 0%,#E8A0A8 52%,#FFD3A0 100%);opacity:0;animation:ph-dawn var(--cycle) linear infinite}
@keyframes ph-sunset{0%,42%{opacity:0}50%{opacity:1}66%{opacity:1}74%{opacity:0}100%{opacity:0}}
@keyframes ph-night{0%,64%{opacity:0}73%{opacity:.95}87%{opacity:.95}95%{opacity:0}100%{opacity:0}}
@keyframes ph-dawn{0%{opacity:.6}8%{opacity:0}90%{opacity:0}96%{opacity:.6}100%{opacity:.6}}
/* sun */
.sun{position:absolute;top:16%;width:36px;height:36px;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,left;
  background:radial-gradient(circle at 36% 36%,#FFF6D0 0%,#FFD166 55%,rgba(255,190,80,.55) 72%,rgba(255,190,80,0) 100%);box-shadow:0 0 28px 10px rgba(255,209,102,.5);animation:sunArc var(--cycle) linear infinite}
@keyframes sunArc{0%,6%{left:-16%;transform:translateY(84px);opacity:0}10%{opacity:1}20%{transform:translateY(28px)}33%{left:42%;transform:translateY(4px)}48%{transform:translateY(30px)}60%{opacity:1}66%,100%{left:104%;transform:translateY(88px);opacity:0}}
/* silhouettes + ground/sea */
.sil{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none}
.sil path,.sil rect.b,.sil circle.b,.sil polygon.b{fill:#101F3C}
.sil .win{fill:#FFD166;opacity:0;animation:winGlow var(--cycle) linear infinite}
@keyframes winGlow{0%,66%{opacity:0}74%{opacity:.9}88%{opacity:.9}94%{opacity:0}100%{opacity:0}}
.sea{position:absolute;left:0;right:0;bottom:0;height:20%;pointer-events:none;background:linear-gradient(180deg,#2F6E9E 0%,#123C63 100%)}
/* photo cards: gentle lighting overlays — golden hour then a bright rosy dusk, never dark */
.p-sunset{background:linear-gradient(180deg,rgba(120,60,140,.24) 0%,rgba(255,122,60,.30) 55%,rgba(255,170,90,.34) 100%);opacity:0;animation:ph-sunset var(--cycle) linear infinite;mix-blend-mode:soft-light}
.p-sunset2{background:linear-gradient(180deg,rgba(60,40,110,.14),rgba(255,110,60,.10));opacity:0;animation:ph-sunset var(--cycle) linear infinite}
.p-night{background:linear-gradient(180deg,rgba(108,84,150,.34) 0%,rgba(200,107,142,.26) 50%,rgba(255,158,110,.22) 100%);opacity:0;animation:ph-night var(--cycle) linear infinite}
.p-dawn{background:linear-gradient(180deg,rgba(110,120,180,.26),rgba(255,160,130,.22));opacity:0;animation:ph-dawn var(--cycle) linear infinite}
.bgimg.kb{animation:kenburns 76s ease-in-out infinite}
@keyframes kenburns{0%{transform:scale(1)}50%{transform:scale(1.09) translate(-1.6%,-1.2%)}100%{transform:scale(1)}}
/* birds — small flock of gulls with real wing-beats (SMIL), gliding across every ~20s */
.birds{position:absolute;top:16%;left:0;width:74px;pointer-events:none;opacity:0;animation:birdsFly 21s linear infinite}
.birds .bird{position:absolute;overflow:visible}
.birds .b1{width:26px;top:0;left:0}
.birds .b2{width:18px;top:14px;left:34px}
.birds .b3{width:13px;top:26px;left:12px}
.birds path,.birds ellipse{fill:rgba(16,31,60,.78)}
.has-photo .birds path,.has-photo .birds ellipse{fill:rgba(255,255,255,.9)}
@keyframes birdsFly{
  0%{transform:translate(-30%,0);opacity:0}
  4%{opacity:.95}
  26%{transform:translate(150%,-16px)}
  52%{transform:translate(330%,-6px);opacity:.95}
  56%{opacity:0}
  100%{transform:translate(350%,-6px);opacity:0}}
/* boats (silhouette sea cards) */
.boat{position:absolute;bottom:11%;left:-18%;width:44px;pointer-events:none;animation:boatDrift 46s linear infinite}
.boat svg{width:100%;overflow:visible;animation:boatBob 3.6s ease-in-out infinite alternate}
.boat path{fill:#101F3C}
.boat .sailc{fill:#F2EFE6}
@keyframes boatDrift{0%{left:-18%}100%{left:110%}}
@keyframes boatBob{from{transform:translateY(0) rotate(-1.6deg)}to{transform:translateY(3px) rotate(1.8deg)}}
/* hide the right layers depending on photo availability */
.dest-card:not(.has-photo) .shade{background:linear-gradient(180deg,rgba(11,29,58,0) 48%,rgba(11,29,58,.28) 72%,rgba(11,29,58,.78) 100%)}
.dest-card .bgimg,.dest-card .p-ol{display:none}
.dest-card.has-photo .bgimg,.dest-card.has-photo .p-ol{display:block}
.dest-card.has-photo .l-day,.dest-card.has-photo .l-sunset,.dest-card.has-photo .l-night,.dest-card.has-photo .l-dawn,
.dest-card.has-photo .sil,.dest-card.has-photo .sea,.dest-card.has-photo .sun,.dest-card.has-photo .moon,.dest-card.has-photo .boat{display:none}
@media (prefers-reduced-motion:reduce){
  .scene *,.bgimg.kb,.birds,.boat{animation:none !important}
  .l-sunset,.l-night,.l-dawn,.p-ol,.stars,.sun,.moon,.birds{opacity:0 !important}
}

/* ============================================================
   SPLITWISE-STYLE COSTS
   ============================================================ */
/* avatars & pax dots — use the individual cut-outs, centred, showing head+body */
.avatar{width:46px;height:46px;border-radius:50%;border:2.5px solid #fff;box-shadow:var(--shadow);flex:0 0 46px;
  background-color:#FBF3E2;background-repeat:no-repeat}
.avatar.pig{background-image:url("images/characters/pig-peek.png");background-size:135%;background-position:50% 16%}
.avatar.chick{background-image:url("images/characters/chick-peek.png");background-size:140%;background-position:50% 14%}
.avatar.sm{width:30px;height:30px;flex:0 0 30px;border-width:2px}
/* living avatars — tiny looping videos in a circle, static crop as fallback */
.avatar-v{position:relative;width:60px;height:60px;border-radius:50%;overflow:hidden;flex:0 0 60px;border:2.5px solid #fff;box-shadow:var(--shadow);background:#FBF3E2}
.avatar-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.avatar-v.lg{width:72px;height:72px;flex:0 0 72px}
.av-circle video{object-position:center 28%}
/* real money flying from the OWER (left) to the OWED (right) on the balance card */
/* v85 — bigger, cropped-out characters (no oatmeal disc) on the settle-up header */
.sw-char{width:96px;height:96px;object-fit:contain;object-position:center;flex:0 0 96px;
  filter:drop-shadow(0 4px 7px rgba(70,58,32,.22))}
.money-lane{position:relative;flex:0 0 189px;height:46px}
.mnote{position:absolute;top:11px;left:-6px;width:30px;height:auto;filter:drop-shadow(0 2px 3px rgba(30,80,50,.3));
  animation:noteFly 2.4s cubic-bezier(.3,.15,.55,1) infinite}
.mnote.m2{animation-delay:.8s;top:5px}
.mnote.m3{animation-delay:1.6s;top:17px}
@keyframes noteFly{
  0%{left:2px;transform:rotate(-14deg) translateY(0) scale(.9);opacity:0}
  14%{opacity:1}
  50%{transform:rotate(180deg) translateY(-14px) scale(1)}
  85%{opacity:1}
  100%{left:78px;transform:rotate(346deg) translateY(2px) scale(.9);opacity:0}}
/* even → both toss money in the air above themselves */
.who.even{gap:40px}
.who.even .tosser{position:relative}
.who.even .tosser .mnote{left:8px;top:-6px;animation:noteToss 1.9s ease-in-out infinite}
.who.even .tosser .mnote.t2,.who.even .tosser .mnote.t4{left:22px;animation-delay:.6s;width:24px}
@keyframes noteToss{0%,100%{transform:translateY(4px) rotate(-10deg);opacity:.85}50%{transform:translateY(-30px) rotate(190deg);opacity:1}}
.sw-balance .amt.ok{color:var(--teal)}
/* v86 — shorter settle card: tight vertical padding, label above, amount snug below,
   the who-row pulled into the characters' transparent margins (pig/chick keep 96px) */
/* shiny gold perimeter around the white settle card */
.sw-balance{background:var(--card);border-radius:24px;padding:8px 18px 10px;margin-bottom:14px;text-align:center;
  border:2px solid transparent;background-clip:padding-box;position:relative;
  box-shadow:0 0 0 2px #E8CC7E, 0 0 0 3.5px #B98F32, var(--shadow)}
.sw-balance .who{display:flex;align-items:center;justify-content:center;gap:8px;margin:-2px 0 0}
.sw-balance .arrow{color:var(--muted);font-size:18px;font-weight:800}
.sw-balance .line{font-size:13px;color:var(--muted);font-weight:600}
/* the amount in a nicer serif, dusty rose */
.sw-balance .amt{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-size:32px;font-weight:700;letter-spacing:.005em;margin-top:8px}
.sw-balance .amt.neg{color:#C05A78}
/* gold ring inside the pink ring on the settle characters */
.sw-balance .sw-char{box-shadow:0 0 0 3px #E0B44E, 0 0 0 6px #E296AC, 0 3px 9px rgba(150,90,110,.16)}
html[data-pcwho="neil"] .sw-balance .sw-char{box-shadow:0 0 0 3px #F0D687, 0 0 0 6px #B0892E, 0 3px 9px rgba(120,90,40,.16)}
.sw-balance .amt.pos{color:var(--teal)}
.sw-balance .why{font-size:12px;color:var(--muted);margin-top:6px}
.sw-month{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:20px 4px 8px}
.sw-row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:11px 13px;margin-bottom:9px;border:1px solid rgba(231,234,243,.6);cursor:pointer}
.sw-date{text-align:center;flex:0 0 34px;color:var(--muted)}
.sw-date .m{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.sw-date .d{font-size:16px;font-weight:800;color:var(--ink);line-height:1.05}
.sw-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 38px;color:#fff}
.sw-ic svg{width:18px;height:18px}
.sw-body{flex:1;min-width:0}
.sw-title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.sw-right{text-align:right;flex:0 0 auto;max-width:96px}
.sw-right .lbl{font-size:10px;font-weight:700;color:var(--muted);line-height:1.2}
.sw-right .val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.sw-right .val.pos{color:var(--teal)}
.sw-right .val.neg{color:var(--coral)}
.sw-right .val.mut{color:var(--muted)}

/* ============================================================
   DESKTOP — travel-planning dashboard, not a stretched phone
   ============================================================ */
@media (min-width:900px){
  body{background:linear-gradient(180deg,#F2F4F9,#F6F7FB)}
  .app{display:grid;grid-template-columns:230px 1fr;gap:0;padding-bottom:30px;background:transparent}
  header.top{grid-column:1/-1;padding:26px 30px 10px}
  .hdr-logo{height:112px;max-width:60%}
  .brand .script{font-size:36px}
  .searchrow{grid-column:1/-1;margin:12px 30px 10px;max-width:580px}
  .searchbar{margin:0}
  /* z-index below the banner (50) so it can never ride over it; sticky top clears the
     banner's height so it pauses just beneath, never rising past the logo */
  nav.tabs{position:sticky;top:158px;z-index:20;align-self:start;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);margin:10px 0 0 30px;padding:14px 10px;height:fit-content}
  nav.tabs .wrap{flex-direction:column;gap:4px;max-width:none}
  nav.tabs button{flex-direction:row;justify-content:flex-start;gap:12px;font-size:14px;padding:11px 14px;width:100%}
  nav.tabs button .ic-wrap{width:34px;height:34px;border-radius:11px}
  nav.tabs button.active{background:var(--bg)}
  main{padding:10px 30px 40px 24px}
  .dest-card{flex:0 0 236px;height:414px}
  .more-grid{grid-template-columns:repeat(3,1fr)}
  .paystat{grid-template-columns:repeat(4,1fr)}
  .two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}
  .sheet{border-radius:26px;bottom:auto;top:50%;left:50%;right:auto;width:520px;transform:translate(-50%,-45%) scale(.96);opacity:0;pointer-events:none;max-height:82vh}
  .sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
}
@media (min-width:1280px){
  .dest-card{flex:0 0 252px;height:442px}
}

/* ============================================================
   PEARL · GOLD · CHARCOAL — modern light theme
   ============================================================ */
/* header — soft pearl glass */
header.top{background:rgba(248,243,234,.82);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(70,58,32,.05)}
.compass{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(200,163,76,.2),rgba(255,253,248,.6));box-shadow:0 0 0 1px rgba(176,137,46,.35),0 4px 14px rgba(70,58,32,.12)}
.compass svg{width:34px;height:34px}
.brand .script{color:var(--ink);text-transform:uppercase;font-size:23px;letter-spacing:.06em;font-weight:700}
.brand .script .amp{color:var(--gold)}
.brand .tag{color:var(--gold-deep);opacity:.95;letter-spacing:.22em}
.brand .tag .tag-dates{color:var(--muted);letter-spacing:.14em}
.add-btn{background:transparent;border:1.5px solid var(--gold);color:var(--gold-deep);box-shadow:none}
.add-btn:active{background:rgba(176,137,46,.12)}
/* refined, restrained avatar frame — thin gold ring */
.av-circle{border:1.5px solid rgba(176,137,46,.55);box-shadow:0 0 0 3px #fff,0 4px 14px rgba(70,58,32,.12)}

/* search */
.searchbar input{background:#fff;border:1px solid var(--line);color:var(--ink)}
.searchbar input::placeholder{color:var(--muted)}
.searchbar input:focus{border-color:var(--gold)}
.searchbar .s-ic{color:var(--muted)}
.s-ai{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(176,137,46,.35);background:rgba(200,163,76,.14);color:var(--gold-deep);cursor:pointer;display:flex;align-items:center;justify-content:center}
.s-ai svg{width:17px;height:17px}
.s-ai:active{background:rgba(200,163,76,.28)}
.s-duo{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(176,137,46,.5);background:#fff;padding:0;cursor:pointer;overflow:hidden;box-shadow:0 2px 7px rgba(120,90,20,.16)}
.s-duo img{width:100%;height:100%;object-fit:cover;display:block;animation:tumble 3.8s ease-in-out infinite;transform-origin:50% 50%}
/* the glossy "ball shimmer" sweeping across the bubble */
.s-duo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);transform:translateX(-130%);animation:ballshimmer 3.8s ease-in-out infinite}
.s-duo:active{transform:translateY(-50%) scale(.94)}
/* pig & chicken tumbling like they're in a washing-machine drum: carried up, then dropped, round and round */
@keyframes tumble{
  0%{transform:rotate(0deg) translateY(0)}
  16%{transform:rotate(65deg) translateY(-7%)}
  32%{transform:rotate(150deg) translateY(-11%)}
  46%{transform:rotate(215deg) translateY(-4%)}
  56%{transform:rotate(250deg) translateY(7%)}
  70%{transform:rotate(315deg) translateY(2%)}
  100%{transform:rotate(360deg) translateY(0)}
}
@keyframes ballshimmer{0%,55%{transform:translateX(-130%)}78%{transform:translateX(130%)}100%{transform:translateX(130%)}}
/* greeting duo — a lively little sway + bob so they feel alive even if the video doesn't roll */
@keyframes duosway{
  0%{transform:rotate(0deg) translateY(0)}
  25%{transform:rotate(-5deg) translateY(-3%)}
  50%{transform:rotate(0deg) translateY(1%)}
  75%{transform:rotate(5deg) translateY(-3%)}
  100%{transform:rotate(0deg) translateY(0)}
}
.greet-chars .greet-vid,.greet-chars img{animation:duosway 3.4s ease-in-out infinite;transform-origin:50% 90%}
@media (prefers-reduced-motion:reduce){.s-duo img,.s-duo::after,.greet-chars .greet-vid,.greet-chars img{animation:none}}

/* bottom nav — pearl glass, gold active */
nav.tabs{background:rgba(248,243,234,.86);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(70,58,32,.06)}
nav.tabs button{color:var(--muted)}
nav.tabs button.active{color:var(--gold-deep)}
nav.tabs button.active .ic-wrap{background:rgba(200,163,76,.2)}

/* surfaces (mostly inherit base white cards) */
.sec h2{color:var(--ink)}
.sec-title,.sw-month{color:var(--gold-deep);opacity:.95}
.chip{background:rgba(200,163,76,.14);color:var(--gold-deep)}
.note{background:#FBF3DE;border:1px solid #EBDCB4;color:#6B5A23}
.foot{color:var(--muted)}

/* cost hero — warm pearl gradient */
.cost-hero{background:linear-gradient(150deg,#FFFDF8,#FBF4E4)}
.seg{background:var(--tbc-bg)}
.seg button{color:var(--muted)}
.seg button.active{background:var(--gold);color:#fff}

/* sheets + forms */
.sheet{background:linear-gradient(180deg,#FFFDF8,#F8F3EA);border-top:1px solid var(--line)}
.sheet .grab{background:rgba(176,137,46,.35)}
.dg-cell{background:var(--bg)}
.form-row input,.form-row select,.form-row textarea{background:var(--bg);border-color:var(--line);color:var(--ink)}
.form-row input:focus{border-color:var(--gold);background:#fff}
.act-btn{background:var(--gold);color:#fff}
.act-btn.ghost{background:var(--tbc-bg);color:var(--ink)}
.kind-chip,.fchip{background:#fff;border-color:var(--line);color:var(--ink-soft)}
.kind-chip.active,.fchip.active{background:var(--gold);border-color:var(--gold);color:#fff}
.who-btn{background:#fff;border-color:var(--line);color:var(--ink)}
.who-btn.active{border-color:var(--gold);background:rgba(200,163,76,.14)}

/* countdown — kept as a rich charcoal-navy accent panel (premium contrast on pearl) */
.countdown{background:linear-gradient(140deg,#20242F 0%,#2A3242 55%,#1C2130 100%);border:1px solid rgba(176,137,46,.25);color:#F6EFDD}
.countdown .cd-label{color:var(--gold-soft);opacity:.95}
.countdown .cd-big{color:#F8F3EA}
.countdown .cd-big small,.countdown .cd-sub{color:rgba(246,239,221,.82)}
.cd-arc{position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;border:2px solid rgba(200,163,76,.55);box-shadow:inset 0 0 30px rgba(200,163,76,.14);z-index:1}
.cd-plane{color:var(--gold-soft)}
.cd-itin{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:6px 13px;border:1px solid var(--gold-soft);border-radius:18px;color:var(--gold-soft);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:rgba(200,163,76,.08);cursor:pointer;position:relative;z-index:3}
.cd-itin svg{width:13px;height:13px}

/* ===== countdown card FLIP → shortened itinerary on the back ===== */
.cd-flipwrap{perspective:1600px;margin-bottom:14px;overflow:hidden;border-radius:24px}   /* clip so the absolutely-positioned back face never bleeds over content below when front is shown */
.cd-rot{position:relative;transform-style:preserve-3d;cursor:pointer;
  transition:transform .62s cubic-bezier(.2,.72,.28,1.02),height .42s cubic-bezier(.3,.7,.3,1)}
.cd-rot.flipped{transform:rotateY(180deg)}
.cd-rot > .countdown{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* only the face that's showing is clickable — the invisible one (rotated away) must NOT eat taps,
   otherwise the front swallows clicks meant for the back's ✕/buttons */
.cd-rot > .countdown{pointer-events:auto}
.cd-rot.flipped > .countdown{pointer-events:none}
.cd-back{pointer-events:none}
.cd-rot.flipped .cd-back{pointer-events:auto}
/* the tap-to-flip hint gets a gentle pulse so it reads as interactive */
.cd-flip-hint{animation:cdHint 2.8s ease-in-out infinite}
@keyframes cdHint{0%,100%{opacity:.82}50%{opacity:1;transform:translateX(2px)}}
/* glassy white-oatmeal card; gold accents for Neil, pink wash for Jo; dark text that stands out */
.cd-back{position:absolute;top:0;left:0;right:0;transform:rotateY(180deg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(158deg,rgba(255,253,248,.9) 0%,rgba(248,240,229,.86) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  color:var(--ink);border:1px solid rgba(200,163,76,.4);border-radius:24px;
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.6);padding:18px 20px 16px;min-height:150px}
html[data-pcwho="jo"] .cd-back{background:linear-gradient(158deg,rgba(255,253,251,.92) 0%,rgba(250,238,236,.88) 100%);border-color:rgba(226,150,172,.45)}
.cd-back .cdb-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(120,90,40,.22);background:rgba(255,255,255,.55);color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.cd-back .cdb-close svg{width:15px;height:15px}
.cd-back .cdb-head{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--gold-deep);font-weight:800;margin-bottom:8px}
html[data-pcwho="jo"] .cd-back .cdb-head{color:#B4626D}
.cd-back .cdb-list{display:flex;flex-direction:column}
.cd-back .cdb-more{display:flex;flex-direction:column}
.cd-back .cdb-more[hidden]{display:none}
.cd-back .cdb-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(120,90,40,.13)}
.cd-back .cdb-date{flex:0 0 50px;font-size:11px;font-weight:800;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.03em}
html[data-pcwho="jo"] .cd-back .cdb-date{color:#B4626D}
.cd-back .cdb-ic{flex:0 0 24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.cd-back .cdb-ic .xpi{width:22px;height:22px;filter:brightness(.7) contrast(1.1)}
.cd-back .cdb-ic .cdb-charic{width:26px;height:26px;object-fit:contain;object-position:center top}
.cd-back .cdb-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.cd-back .cdb-main b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25}
.cd-back .cdb-main i{font-size:11.5px;font-style:normal;color:var(--muted)}
.cd-back .cdb-viewmore{margin:10px auto 0;display:block;background:none;border:0;color:var(--gold-deep);
  font-size:12px;font-weight:800;letter-spacing:.05em;cursor:pointer;padding:4px 8px}
html[data-pcwho="jo"] .cd-back .cdb-viewmore{color:#B4626D}
/* Open full itinerary — gold pill, for both accounts */
.cd-back .cdb-full{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border:0;border-radius:16px;cursor:pointer;font-size:14px;font-weight:800;letter-spacing:.02em;
  color:#3A2A08;background:linear-gradient(180deg,#F3D68A,#D6A94A);box-shadow:0 4px 14px rgba(176,137,46,.35)}
.cd-back .cdb-full svg{width:16px;height:16px}
.cd-back .cdb-full:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.cd-rot{transition:height .3s ease}.cd-rot.flipped{transform:none}
  .cd-rot > .countdown{backface-visibility:visible}.cd-back{position:static;transform:none;backface-visibility:visible;margin-top:10px}}

/* greeting — clean pearl card */
.greet{background:linear-gradient(135deg,#FFFDF8,#F7F1E5);border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.greet .txt .hi{color:var(--gold-deep)}
.greet .txt .names{color:var(--ink)}
.lovheart{color:#E23744;display:inline-block;transform-origin:center;animation:beat 1.9s ease-in-out infinite}
@keyframes beat{0%,20%,100%{transform:scale(1)}8%{transform:scale(1.28)}14%{transform:scale(1)}}
.greet .chars{background:linear-gradient(135deg,#FBEFD9,#F6E3EC)}

/* timeline */
.tl-day{background:linear-gradient(var(--bg) 82%,rgba(246,241,231,0))}
.tl-day .d-num{background:var(--ink);color:#F8F3EA}

/* ---------- Face ID lock screen ---------- */
#pc-lock{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#F6F1E7,#EFE6D6);padding:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pc-lock-card{width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.pc-lock-art{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(35,32,40,.15))}
.pc-lock-title{font-family:var(--script,serif);font-style:italic;font-weight:700;font-size:30px;color:var(--ink);letter-spacing:.01em}
.pc-lock-sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-top:-4px}
.pc-lock-input{width:100%;border:1.5px solid rgba(176,137,46,.4);border-radius:14px;padding:13px 15px;font-size:16px;
  font-family:inherit;background:#FFFDF8;color:var(--ink);outline:none;text-align:center}
.pc-lock-input:focus{border-color:var(--gold)}
.pc-lock-btn{width:100%;border:0;border-radius:14px;padding:14px 16px;font-size:16px;font-weight:600;font-family:inherit;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#FFFBF2;cursor:pointer;box-shadow:0 6px 16px rgba(138,107,30,.25)}
.pc-lock-btn:disabled{opacity:.6}
.pc-lock-msg{min-height:18px;font-size:13px;color:var(--ink-soft)}

/* ---------- who-picker (whose device is this) ---------- */
.pc-who-row{display:flex;gap:14px;width:100%}
.pc-who-btn{flex:1;border:1.5px solid rgba(176,137,46,.35);border-radius:18px;background:#FFFDF8;padding:16px 10px 13px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-family:inherit}
.pc-who-btn img{width:64px;height:64px;object-fit:cover;object-position:top;border-radius:50%;background:#FBF6EC}
.pc-who-btn span{font-size:15px;font-weight:700;color:var(--ink)}
.pc-who-btn:active{transform:scale(.97)}

/* ---------- activity symbol picker (add sheet) ---------- */
.act-icon-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 12px}
.act-chip{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;border:1.5px solid var(--line);
  border-radius:13px;cursor:pointer;color:var(--ink-soft);background:var(--bg)}
.act-chip svg{width:24px;height:24px}
.act-chip i{font-style:normal;font-size:10.5px;letter-spacing:.02em}
.act-chip.active{border:2px solid var(--gold);color:var(--gold-deep);background:linear-gradient(180deg,#FFFEFA,#FBF3E0);box-shadow:0 0 0 2px rgba(200,163,76,.30),0 3px 11px rgba(176,137,46,.22)}
/* Jo's account gets the pink shiny frame instead, everywhere these chips show up */
html[data-pcwho="jo"] .act-chip.active{border-color:#E296AC;color:#B4626D;background:linear-gradient(180deg,#FFF9FB,#FDEFF2);
  box-shadow:0 0 0 2px rgba(226,150,172,.38),0 3px 11px rgba(180,98,109,.24)}
html[data-pcwho="jo"] .xp-subs{background:rgba(226,150,172,.09)}
/* v85 — Activity/Transport flip open a second row of specific icons inside the expense sheet */
/* v92 — the sub-menu zooms out of / back into the pressed tab (origin set inline in JS) */
.xp-subs{margin:-6px 0 0;padding:0 9px;background:rgba(200,163,76,.07);border:1px solid transparent;border-radius:14px;
  grid-template-columns:repeat(4,1fr);gap:8px;overflow:hidden;
  max-height:0;opacity:0;transform:scale(.6);
  transition:max-height .3s ease,opacity .2s ease,transform .32s cubic-bezier(.2,.85,.3,1),margin .3s ease,padding .3s ease,border-color .3s ease}
.xp-subs.open{max-height:280px;opacity:1;transform:scale(1);margin-bottom:12px;padding:9px;border-color:var(--line)}
.xp-subs .act-chip{padding:8px 3px 6px}
.xp-subs .act-chip svg,.xp-subs .act-chip .xpi{width:23px;height:23px}
.xp-subs .act-chip i{font-size:9.5px}
@media(prefers-reduced-motion:reduce){.xp-subs{transition-duration:.01s}}
/* v93 — Neil's new raster line icons (dark ink, transparent). Size them per context, and
   flip the coloured chips (which used white glyphs) to a light chip so the dark icons read. */
.xpi{width:100%;height:100%;object-fit:contain;display:block;filter:brightness(.82) contrast(1.12)}
.act-chip .xpi{width:26px;height:26px}
.ev-ic .xpi{width:64%;height:64%}
.tl-item .node .xpi{width:76%;height:76%}
.cal-pill .p-ic .xpi{width:86%;height:86%}
.treat-item .ti-ic .xpi{width:64px;height:64px}
.ev-ic:has(.xpi),.tl-item .node:has(.xpi),.cal-pill .p-ic:has(.xpi){background:var(--chip3d)!important;box-shadow:none}
.ev-ic svg,.bk-ic svg,.sw-ic svg{width:21px;height:21px}

/* ---------- updates feed ---------- */
.upd-list{display:flex;flex-direction:column;gap:8px;padding:0 2px}
.upd-day{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:14px 2px 2px}
.upd-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 13px;box-shadow:var(--shadow)}
.upd-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 36px;background:#FBF6EC;border:1.5px solid rgba(176,137,46,.3);display:flex;align-items:center;justify-content:center}
.upd-av img{width:100%;height:100%;object-fit:cover;object-position:top}
.upd-av-x svg{width:18px;height:18px;color:var(--ink-soft)}
.upd-body{flex:1;min-width:0}
.upd-txt{font-size:14px;line-height:1.35}
.upd-txt b{font-weight:700}
.upd-when{font-size:12px;color:var(--muted);margin-top:1px}
/* remove-this-update button — wipes the log entry from the feed */
.upd-del{flex:0 0 auto;background:none;border:0;color:var(--muted);padding:7px;cursor:pointer;opacity:.5;border-radius:9px;transition:opacity .15s,color .15s,background .15s}
.upd-del:hover,.upd-del:active{opacity:1;color:var(--bad);background:rgba(190,60,60,.1)}
.upd-del svg{width:17px;height:17px;display:block}
.upd-loading{color:var(--muted);font-size:14px;padding:14px 4px}

/* front-screen strip */
.upd-strip{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:13px 15px;margin:12px 0 2px}
.us-head{display:flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:8px}
.us-head svg{width:15px;height:15px}
.us-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px}
.us-row .upd-av{width:28px;height:28px;flex:0 0 28px}
.us-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-when{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.us-more{margin-top:7px;font-size:13px;font-weight:600;color:var(--gold-deep);cursor:pointer}

/* ---------- incoming-change banner (pig snort / chicken cluck) ---------- */
#pc-note{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-140%);
  z-index:9998;display:flex;align-items:center;gap:12px;width:calc(100% - 28px);max-width:440px;
  background:linear-gradient(135deg,#FFFEFB,#F7EFDE);border:1px solid var(--gold-soft);border-radius:18px;
  padding:12px 14px;box-shadow:0 14px 40px rgba(70,58,32,.28);cursor:pointer;
  transition:transform .5s cubic-bezier(.2,1.3,.4,1),opacity .4s;opacity:0}
#pc-note.in{transform:translate(-50%,0);opacity:1}
.pcn-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 44px;background:#FBF6EC;border:2px solid #fff;box-shadow:0 3px 10px rgba(70,58,32,.18);animation:pcnPop .6s cubic-bezier(.2,1.5,.4,1) both}
.pcn-av img{width:100%;height:100%;object-fit:cover;object-position:top}
@keyframes pcnPop{0%{transform:scale(.3) rotate(-18deg)}100%{transform:scale(1) rotate(0)}}
.pcn-body{flex:1;min-width:0}
.pcn-t{font-size:14.5px;line-height:1.3;color:var(--ink)}
.pcn-t b{font-weight:700}
.pcn-s{font-size:11.5px;color:var(--gold-deep);font-weight:600;margin-top:1px}
.pcn-x{flex:0 0 auto;font-size:22px;line-height:1;color:var(--muted);padding:0 4px;font-weight:400}

/* ---------- swipe row → Edit / Delete ---------- */
.sw-wrap{position:relative;overflow:hidden}
.sw-actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:stretch;z-index:0}
.sw-b{border:0;width:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#fff;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.sw-b svg{width:21px;height:21px}
.sw-b i{font-style:normal}
.sw-edit{background:linear-gradient(180deg,var(--gold-soft),var(--gold))}
.sw-del{background:linear-gradient(180deg,#CE6259,#B8443B)}
.sw-row{position:relative;z-index:1;touch-action:pan-y;transform:translateX(0)}
.sw-row.event-row{padding-left:0;padding-right:0}

/* ---------- NEW badge (auto-clears after 48h) ---------- */
.new-badge{display:inline-block;vertical-align:middle;margin-left:6px;background:linear-gradient(135deg,#E0574B,#C33B30);
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:999px;
  box-shadow:0 2px 6px rgba(195,59,48,.4);animation:newPulse 2.4s ease-in-out infinite}
@keyframes newPulse{0%,100%{box-shadow:0 2px 6px rgba(195,59,48,.35)}50%{box-shadow:0 2px 12px rgba(195,59,48,.65)}}

/* ---------- detail sheet: booking-website + character-pin map ---------- */
.sh-link{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-top:10px;background:var(--card);text-decoration:none;color:var(--ink)}
.sh-link .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.sh-link .v{font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-link .go{margin-left:auto;color:var(--gold-deep)}
/* receipt corner sticker — a small photo tucked bottom-right over the open detail sheet;
   tap it and it flips open into a full lightbox (see .receipt-lb below) */
.sh-receipt-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;
  width:60px;height:60px;padding:0;border-radius:10px;overflow:hidden;border:3px solid #fff;
  box-shadow:0 6px 16px rgba(20,20,30,.32);transform:rotate(5deg);cursor:pointer;background:#fff;
  transition:transform .15s ease}
.sh-receipt-fab:active{transform:rotate(5deg) scale(.94)}
.sh-receipt-fab img{display:block;width:100%;height:100%;object-fit:cover}
.sh-receipt-fab::after{content:"📷";position:absolute;right:-4px;bottom:-4px;font-size:13px;
  background:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(20,20,30,.3)}
/* full-screen lightbox — flips open like a card turning face-up */
.receipt-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:28px;background:rgba(10,10,14,0);transition:background .3s ease;perspective:1200px}
.receipt-lb.on{background:rgba(10,10,14,.82)}
.receipt-lb-card{width:100%;max-width:440px;transform:rotateY(-100deg) scale(.9);opacity:0;
  transition:transform .42s cubic-bezier(.2,.7,.3,1.15),opacity .3s ease}
.receipt-lb.on .receipt-lb-card{transform:rotateY(0) scale(1);opacity:1}
.receipt-lb-inner{background:#fff;border-radius:16px;padding:8px 8px 0;box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-height:82vh;overflow:auto}
.receipt-lb-inner img{width:100%;height:auto;display:block;border-radius:10px 10px 0 0}
.receipt-lb-cap{padding:10px 6px;font-size:12.5px;font-weight:700;color:var(--ink-soft);text-align:center}
.receipt-lb-close{position:absolute;top:20px;right:18px;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.16);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.receipt-lb,.receipt-lb-card{transition:none}}
/* v76 — signature event photo: the whole illustration, never cropped — a blurred copy of
   itself fills the letterbox either side, same trick as the detail-sheet hero below */
.has-photo{position:relative;background-color:#000;overflow:hidden}
.has-photo::before{content:"";position:absolute;inset:-12%;background-image:inherit;background-size:cover;
  background-position:center;filter:blur(14px) brightness(.75);z-index:0}
.has-photo::after{content:"";position:absolute;inset:0;background-image:inherit;background-size:contain;
  background-repeat:no-repeat;background-position:center;z-index:1}
.has-photo svg,.has-photo img{display:none}
.sh-hero{position:relative;height:190px;border-radius:18px;overflow:hidden;margin-bottom:14px;
  background-color:#000;box-shadow:inset 0 -70px 60px -30px rgba(0,0,0,.6)}
/* the full illustration, never cropped — a blurred copy of itself fills the letterbox either side */
.sh-hero::before{content:"";position:absolute;inset:-12%;background-image:inherit;background-size:cover;
  background-position:center;filter:blur(26px) brightness(.7);z-index:0}
.sh-hero::after{content:"";position:absolute;inset:0;background-image:inherit;background-size:contain;
  background-repeat:no-repeat;background-position:center;z-index:1}
.sh-hero .sh-hero-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.sh-hero .sh-title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.sh-hero .sh-sub{color:rgba(255,255,255,.92);text-shadow:0 1px 5px rgba(0,0,0,.5)}
/* v74 — detail flips in like the coin when opened from a cost row */
.sh-flipwrap{transform-origin:top center;animation:sheetFlipIn .6s cubic-bezier(.34,1.18,.4,1) both}
@keyframes sheetFlipIn{
  0%{transform:perspective(1300px) rotateX(-88deg);opacity:0}
  55%{opacity:1}
  100%{transform:perspective(1300px) rotateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.sh-flipwrap{animation:none}.treat-card{animation:none}.treat-item{animation:none}}
.map-embed{position:relative;height:190px;border-radius:16px;overflow:hidden;margin-top:10px;border:1px solid var(--line);background:#E8EEF0}
.map-embed iframe{width:100%;height:100%;border:0;pointer-events:none;filter:saturate(1.04)}
.map-pin{position:absolute;left:50%;top:50%;height:60px;width:auto;transform:translate(-50%,-88%);
  filter:drop-shadow(0 5px 7px rgba(35,32,40,.38));animation:pinDrop .5s cubic-bezier(.2,1.4,.4,1) both;z-index:2}
.map-pin.wide{height:58px}
@keyframes pinDrop{0%{transform:translate(-50%,-300%) scale(.4);opacity:0}100%{transform:translate(-50%,-88%) scale(1);opacity:1}}
/* v93 — two map buttons (Google + Apple) share the corner */
.map-opens{position:absolute;right:8px;bottom:8px;z-index:3;display:flex;gap:6px}
.map-open{background:rgba(255,253,248,.95);border:1px solid var(--line);border-radius:10px;display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;font-size:12px;font-weight:700;color:var(--gold-deep);text-decoration:none;box-shadow:0 3px 10px rgba(70,58,32,.18)}
.map-open svg{width:13px;height:13px}
.map-open.apple{color:#2B6CB0}

/* ---------- Journey tab (animated trip map) ---------- */
/* the caption changes on every leg, so it holds a fixed two-line height — the map underneath
   must never jump, and a long "via" has somewhere to go instead of squeezing the date */
.j-cap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 14px;margin:2px 0 10px;
  font-size:14.5px;line-height:1.45;color:var(--ink-soft);box-shadow:var(--shadow);min-height:62px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.j-cap b{color:var(--ink)}
.jc-date{flex:0 0 auto;align-self:center;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);background:rgba(176,137,46,.11);border:1px solid rgba(176,137,46,.24);
  border-radius:8px;padding:4px 8px;white-space:nowrap}
.jc-txt{flex:1 1 auto;min-width:0}
/* full-bleed on a phone: the map is the point of this page, so give it the whole screen width */
.j-wrap{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#DEE9E7}
.j-wrap svg{display:block;width:100%;height:auto}
@media (max-width:560px){
  .j-wrap{margin-left:-18px;margin-right:-18px;border-radius:0;border-left:0;border-right:0;width:auto}   /* = main's side padding */
}
/* every leg, ticked off — this is what fills the bottom of the page */
.j-legs{display:flex;flex-direction:column;gap:8px}
.j-leg{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:10px 13px;box-shadow:var(--shadow)}
.jl-ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--chip3d);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.jl-ic .ic3d{width:36px;height:36px;object-fit:contain;display:block}
.jl-mid{flex:1 1 auto;min-width:0}
.jl-route{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.jl-sub{font-size:12px;color:var(--muted);margin-top:2px}
.jl-end{flex:0 0 auto;display:grid;place-items:center}
.jl-tick{display:grid;place-items:center;width:26px;height:26px;border-radius:99px;background:rgba(63,122,87,.12);color:#3F7A57}
.jl-tick svg{width:17px;height:17px;stroke-width:2.4}
.jl-now{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--gold-deep);border-radius:99px;padding:4px 9px}
.j-leg.done{opacity:.62}
.j-leg.done .jl-route{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:rgba(63,122,87,.5)}
.j-leg.now{border-color:rgba(176,137,46,.5);box-shadow:0 0 0 3px rgba(176,137,46,.1),var(--shadow)}
.j-count{font-size:12.5px;font-weight:700;color:var(--gold-deep)}
.sec-sub{margin-top:20px}
.j-tick{animation:jPop .5s cubic-bezier(.2,1.5,.4,1) both}
.j-lbl{font-size:11px;font-weight:700;fill:#6B6455;text-anchor:middle;font-family:-apple-system,sans-serif;paint-order:stroke;stroke:#FFFDF8;stroke-width:3px;stroke-linejoin:round}
.j-legend{display:flex;gap:14px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap}
.j-legend i{display:inline-block;width:16px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.j-legend .j-note{margin-left:auto;color:var(--muted);font-size:11.5px}
.j-heart{animation:jHeart 1.6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes jHeart{0%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(.2)}30%{opacity:1}100%{opacity:1}}
.j-hotel{animation:jPop .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes jPop{0%{opacity:0}100%{opacity:1}}
.j-veh .j-head{animation:jBob 1.1s ease-in-out infinite alternate}
@keyframes jBob{0%{transform:translateY(0)}100%{transform:translateY(-2.5px)}}
/* 7 tabs need a touch less width on small phones */
@media (max-width:430px){ nav.tabs button{font-size:9.5px;padding:6px 0} nav.tabs .ic-wrap{width:38px} }

/* ---------- version history sheet ---------- */
.upd-hint{color:var(--gold-deep);font-weight:600}
.vh-list{display:flex;flex-direction:column;gap:9px;max-height:56vh;overflow-y:auto;padding:2px}
.vh-row{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:15px;padding:11px 12px;background:var(--card)}
.vh-body{flex:1;min-width:0}
.vh-t{font-size:13.5px}
.vh-when{color:var(--muted);font-size:12px}
.vh-cur{background:#E7F1EA;color:#316548;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;margin-left:4px}
.vh-diff{margin-top:5px;font-size:12px;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.vh-diff i{font-style:normal;color:var(--gold-deep);font-weight:700}
.vh-diff span{color:var(--muted)}
.vh-diff.vh-del{color:#93323C;font-weight:700}
.vh-restore{flex:0 0 auto;border:1.5px solid var(--gold);background:var(--chip3d,#FBF6EC);color:var(--gold-deep);
  font-family:inherit;font-size:12px;font-weight:800;border-radius:11px;padding:7px 12px;cursor:pointer}
.vh-restore:active{transform:scale(.95)}

/* ---------- journey progress bar + "you are here" pulse ---------- */
.j-prog{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 15px;margin-top:10px;box-shadow:var(--shadow)}
/* ── the scrubber above the map: the fill rides the movie; grab the dot to fly the trip yourself ── */
.j-scrub{margin:0 0 10px}
.j-scrub .jp-fill{transition:none}
.js-track{position:relative;height:13px;cursor:pointer;touch-action:none;overflow:visible}
.js-track .jp-fill{position:absolute;left:0;top:0;bottom:0}
.js-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:23px;height:23px;border-radius:50%;
  background:linear-gradient(180deg,#F6DE9B,#C89A3C);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(120,90,40,.42);pointer-events:none}
html[data-pcwho="jo"] .js-dot{background:linear-gradient(180deg,#F3B8C8,#C46B7E);box-shadow:0 2px 8px rgba(170,80,110,.4)}
/* play / pause — bottom-right corner of the bar card; ▶ resumes the movie from wherever the dot sits */
.j-scrub{position:relative;padding-right:64px}
.js-play{position:absolute;right:12px;bottom:10px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);
  background:linear-gradient(180deg,#FFFDF8,#F3EBDB);color:var(--gold-deep);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(120,90,40,.18)}
.js-play:active{transform:scale(.92)}
html[data-pcwho="jo"] .js-play{border-color:rgba(217,138,148,.6);color:#B4626D}
.jp-top{display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.jp-pct{color:var(--ink)}
.jp-track{height:9px;border-radius:99px;background:#ECE5D6;overflow:hidden;margin:8px 0 7px}
.jp-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-soft),var(--gold-deep));transition:width .6s cubic-bezier(.2,1,.3,1);min-width:3px}
.jp-sub{font-size:12.5px;color:var(--ink-soft)}
.jp-sub b{color:var(--ink)}
.j-pulse{transform-box:fill-box;transform-origin:center;animation:jPulse 1.8s ease-out infinite}
@keyframes jPulse{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* ---------- pull-to-refresh indicator ---------- */
.ptr-ind{height:0;opacity:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--gold-deep);font-size:13px;font-weight:700;will-change:height}
.ptr-ind .ptr-ic{display:inline-block;font-size:17px}
.ptr-ind.spin .ptr-ic{animation:ptrSpin .8s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}
.j-cap .j-via{color:var(--gold-deep);font-weight:700;font-size:13px}

/* ============================================================
   v30 — "expensive" hero refinements (Today screen)
   greeting card w/ blended Santorini photo · countdown w/ plane-wing photo
   ============================================================ */
/* ---- GREETING: split card, cutout characters left, destination photo right ---- */
.greet{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;min-height:138px;position:relative;
  background:linear-gradient(135deg,#FFFDF8,#F6EFE1);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);margin:8px 0 14px}
/* ===== greeting → tap opens a full video player (device frame + peeking pig & chick) ===== */
.greet-vidwrap{position:relative;margin:8px 0 14px;cursor:pointer}
/* on-brand play badge, top-left of the greeting card — a clean icon, no pill.
   Chicken: play inside a love-heart · Pig: play inside a thin gold ring (inner white). */
.greet-playtag{position:absolute;left:12px;top:10px;z-index:3;pointer-events:none;
  width:42px;height:42px;filter:drop-shadow(0 4px 10px rgba(120,45,75,.34));
  animation:greetTagPulse 2.2s ease-in-out infinite}
.greet-playtag svg{position:absolute;inset:0;width:100%;height:100%}
.greet-playtag .pt-ring{display:none}          /* default (+ Chicken) = heart */
/* Chicken — love-heart with a white play triangle */
.pt-hshape{fill:#E4739A}
.pt-htri{fill:#fff}
/* Pig — thin gold ring, white inner, gold play triangle */
.pt-rc{fill:#fff;stroke:#B0892E;stroke-width:1.5}
.pt-rtri{fill:#B0892E}
html[data-pcwho="neil"] .greet-playtag{filter:drop-shadow(0 4px 10px rgba(90,65,20,.32))}
html[data-pcwho="neil"] .greet-playtag .pt-heart{display:none}
html[data-pcwho="neil"] .greet-playtag .pt-ring{display:block}
@keyframes greetTagPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
/* the lightbox — app dimmed only ~30%, a floating cream device frame with the video at true 16:9 */
.gvlb{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px 16px;
  background:rgba(12,10,16,0);transition:background .3s ease;overflow:hidden}
.gvlb.on{background:rgba(12,10,16,.3)}
.gvlb.closing{background:rgba(12,10,16,0)}
.gvlb{padding:20px 10px}
.gvlb-stage{position:relative;width:100%;max-width:620px;transform:translateY(14px) scale(.86);opacity:0;
  transition:transform .5s cubic-bezier(.2,.75,.28,1.04),opacity .34s ease}
.gvlb.on .gvlb-stage{transform:none;opacity:1}
.gvlb.closing .gvlb-stage{transform:scale(.8);opacity:0;transition:transform .3s ease,opacity .28s ease}
/* handheld frame — gold body by default (Pig's colour); pink for Chicken */
.gvlb-frame{position:relative;padding:14px 16px 16px;border-radius:34px;
  background:linear-gradient(160deg,#FBEECB 0%,#F4E1A9 55%,#EFD592 100%);
  box-shadow:0 26px 60px rgba(30,20,10,.5),inset 0 2px 3px rgba(255,255,255,.8),inset 0 -6px 14px rgba(150,110,40,.28)}
html[data-pcwho="jo"] .gvlb-frame{background:linear-gradient(160deg,#FDECF2 0%,#F6C7D8 55%,#EFB0C6 100%);
  box-shadow:0 26px 60px rgba(60,20,35,.45),inset 0 2px 3px rgba(255,255,255,.85),inset 0 -6px 14px rgba(180,90,120,.28)}
html[data-pcwho="neil"] .gvlb-frame{box-shadow:0 26px 60px rgba(20,15,5,.55),inset 0 2px 3px rgba(255,255,255,.8),inset 0 0 0 2px rgba(20,18,10,.5),inset 0 -6px 14px rgba(120,90,30,.3)}
/* side buttons — pink for Chicken, black for Pig, hugging the edges */
.gvlb-frame::before,.gvlb-frame::after{content:"";position:absolute;top:44%;transform:translateY(-50%);
  width:8px;height:60px;background:linear-gradient(180deg,#E9C36B,#CFA33F);border-radius:5px;box-shadow:inset 0 1px 2px rgba(255,255,255,.4)}
html[data-pcwho="jo"] .gvlb-frame::before,html[data-pcwho="jo"] .gvlb-frame::after{background:linear-gradient(180deg,#F09BB6,#E27A9C)}
html[data-pcwho="neil"] .gvlb-frame::before,html[data-pcwho="neil"] .gvlb-frame::after{background:linear-gradient(180deg,#3A3630,#141210)}
.gvlb-frame::before{left:-2px}
.gvlb-frame::after{right:-2px}
.gvlb-screen{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0b0b12;
  box-shadow:inset 0 0 0 2px rgba(120,90,30,.35)}
.gvlb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gvlb-tap{position:absolute;inset:0;z-index:2;background:none;border:0;cursor:pointer;padding:0}
/* draggable timeline — a tall invisible hit-zone with a thin track + a playhead knob you can scrub */
.gvlb-bar{position:absolute;left:0;right:0;bottom:0;height:20px;z-index:6;cursor:pointer;touch-action:none}
.gvlb-bar::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.24)}
.gvlb-bar i{position:absolute;left:0;bottom:0;height:4px;width:0;background:#5B7FD6;border-radius:0 3px 3px 0;transition:width .1s linear}
.gvlb-bar i::after{content:"";position:absolute;right:-6px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .12s ease}
.gvlb-bar:active i::after{transform:scale(1.25)}
html[data-pcwho="jo"] .gvlb-bar i{background:#E27A9C}
html[data-pcwho="jo"] .gvlb-bar i::after{background:#FFF0F5}
html[data-pcwho="neil"] .gvlb-bar i{background:#E3B856}
html[data-pcwho="neil"] .gvlb-bar i::after{background:#FFF8E8}
/* Chicken's scrubber handle is a little love-heart instead of a ball */
html[data-pcwho="jo"] .gvlb-bar i::after{background:#F45E93;border-radius:0;box-shadow:none;
  width:17px;height:15px;right:-8px;bottom:1px;
  filter:drop-shadow(0 1px 2px rgba(150,40,80,.55));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21.3l-1.5-1.4C5.1 15.2 2 12.3 2 8.8 2 6 4.2 3.8 7 3.8c1.6 0 3.1.7 4.1 1.9l.9 1 .9-1c1-1.2 2.5-1.9 4.1-1.9 2.8 0 5 2.2 5 5 0 3.5-3.1 6.4-8.5 11.1z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21.3l-1.5-1.4C5.1 15.2 2 12.3 2 8.8 2 6 4.2 3.8 7 3.8c1.6 0 3.1.7 4.1 1.9l.9 1 .9-1c1-1.2 2.5-1.9 4.1-1.9 2.8 0 5 2.2 5 5 0 3.5-3.1 6.4-8.5 11.1z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
/* More → Media list — bordered cards, one per short (future-proof) */
.media-note{margin-top:2px}
/* Chicken gets a soft pink gradient here instead of the oatmeal note */
html[data-pcwho="jo"] .media-note{background:linear-gradient(135deg,#FDE7EF 0%,#F7C9DB 55%,#F1B2CB 100%);
  border-color:#EDB2C7;color:#8A465A}
.media-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.media-card{display:flex;align-items:center;gap:13px;padding:10px;border:1.5px solid var(--line);border-radius:18px;
  background:var(--card);cursor:pointer;box-shadow:0 2px 10px rgba(60,50,30,.06);transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease}
.media-card:active{transform:scale(.985)}
.media-thumb{position:relative;flex:0 0 120px;height:68px;border-radius:12px;background-size:cover;background-position:center;overflow:hidden}
.media-thumb::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16)}
.media-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.media-play svg{width:30px;height:30px;color:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.media-body{flex:1 1 auto;min-width:0}
.media-title{font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.22}
.media-sub{font-size:12px;color:var(--muted);margin-top:3px}
.media-go{flex:0 0 auto;opacity:.4}
.media-go svg{width:20px;height:20px;color:var(--ink)}
html[data-pcwho="jo"] .media-card{border-color:#E6C6D2}
html[data-pcwho="jo"] .media-card:active{border-color:#E296AC}
html[data-pcwho="neil"] .media-card:active{border-color:var(--gold)}
/* when the movie finishes: the "European Holiday" splash fills the screen and the controls band goes away */
.gvlb-end{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;opacity:0;pointer-events:none;transition:opacity .55s ease;cursor:pointer}
.gvlb.ended .gvlb-end{opacity:1;pointer-events:auto}
.gvlb.ended .gvlb-bar{opacity:0}
/* on the splash the band swaps its play + full-screen for a single "Watch again" that pops in
   (it sits BELOW the phone, so it never covers the poster) */
.gvlb.ended .gvlb-play,.gvlb.ended .gvlb-fs{display:none}
.gvlb-replay{display:none;align-items:center;gap:7px;background:none;border:0;cursor:pointer;padding:6px 10px;white-space:nowrap;
  font-size:13px;font-weight:800;letter-spacing:.02em;color:#C05A82}
html[data-pcwho="neil"] .gvlb-replay{color:#6E4A0C}
.gvlb-replay svg{width:17px;height:17px}
.gvlb.ended .gvlb-replay{display:inline-flex;animation:gvlbReplayPop .44s cubic-bezier(.2,.85,.3,1.35) both}
@keyframes gvlbReplayPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
/* the controls pill — sits BELOW the phone, not intruding on it */
.gvlb-notch{position:absolute;left:50%;top:100%;margin-top:12px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:10px;padding:7px 16px 8px;border-radius:22px;
  background:linear-gradient(180deg,#F4E1A9,#E9CE85);
  box-shadow:0 10px 20px rgba(120,90,30,.34),inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 4px rgba(150,110,40,.2)}
html[data-pcwho="jo"] .gvlb-notch{background:linear-gradient(180deg,#FBE2EA,#F3C2D3)}
html[data-pcwho="neil"] .gvlb-notch{background:linear-gradient(180deg,#F4E1A9,#E4C877)}
/* play/pause — gold circle + pink triangle for Chicken; black circle + gold triangle for Pig */
.gvlb-play{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;color:#D4699A;background:#EAC569;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 3px 8px rgba(120,90,30,.4),inset 0 1px 2px rgba(255,255,255,.55)}
html[data-pcwho="neil"] .gvlb-play{background:#1B1813;color:#E9C36B;box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 1px 2px rgba(255,255,255,.2)}
.gvlb-play svg{width:28px;height:28px;margin-left:2px}
.gvlb-fs{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:4px 6px;white-space:nowrap;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#C05A82;animation:gvlbFsPulse 2.6s ease-in-out infinite}
html[data-pcwho="neil"] .gvlb-fs{color:#6E4A0C}
.gvlb-fs svg{width:15px;height:15px}
@keyframes gvlbFsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* the pig & chick peeking over the top — their shelf sits level with the top of the phone frame */
.gvlb-peek{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-8px;
  width:82%;max-width:440px;height:auto;pointer-events:none;z-index:4;
  filter:drop-shadow(0 8px 12px rgba(60,40,20,.28))}
.gvlb-close{position:absolute;top:-2px;right:-2px;z-index:6;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,10,16,.55);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gvlb-close svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.gvlb,.gvlb-stage{transition:opacity .2s ease}.gvlb-stage{transform:none}.greet-playtag,.gvlb-fs{animation:none}}
/* v76 — a love-heart lifts off "adventure awaits" every 4s, flutters like a balloon toward the
   bougainvillea and drifts off into the Santorini distance. Clipped to the banner (greet overflow:hidden). */
.gm-fly{position:absolute;left:64%;top:66%;z-index:3;pointer-events:none;font-size:16px;line-height:1;
  color:#E2495F;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 1px 2px rgba(160,30,60,.35)) drop-shadow(0 0 4px rgba(255,255,255,.6));
  animation:heartFlutter 4s ease-in-out infinite}
@keyframes heartFlutter{
  0%  {transform:translate(0,0) scale(.55) rotate(0deg);opacity:0}
  10% {transform:translate(2px,-8px) scale(1) rotate(-9deg);opacity:1}
  28% {transform:translate(22px,-24px) scale(1.05) rotate(8deg);opacity:1}
  48% {transform:translate(46px,-46px) scale(.95) rotate(-7deg);opacity:.9}
  70% {transform:translate(82px,-72px) scale(.72) rotate(6deg);opacity:.6}
  100%{transform:translate(140px,-104px) scale(.3) rotate(3deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.gm-fly{display:none}}
/* v-hero — no video: the pig & chick cutout gently bobs; the ♥ flutters in the account colour (pink Jo / gold Neil) */
.greet-chars img.greet-still{animation:duobob 3.6s ease-in-out infinite;transform-origin:50% 92%}
@keyframes duobob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.025)}}
@media(prefers-reduced-motion:reduce){.greet-chars img.greet-still{animation:none}}
html[data-pcwho="jo"] .lovheart,html[data-pcwho="jo"] .gm-fly{color:#E86A98}
html[data-pcwho="neil"] .lovheart,html[data-pcwho="neil"] .gm-fly{color:#D9A94E}
html[data-pcwho="neil"] .gm-fly{filter:drop-shadow(0 1px 2px rgba(150,110,20,.42)) drop-shadow(0 0 4px rgba(255,255,255,.6))}
.greet-l{flex:1 1 60%;min-width:0;position:relative;display:flex;align-items:center;
  padding:14px 6px 14px 14px}
.greet-chars{position:absolute;left:4px;bottom:-2px;width:104px;z-index:2}
.greet-chars img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 9px rgba(70,58,32,.18))}
.greet-txt{margin-left:82px;min-width:0;z-index:2}
.gm-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap}
.greet-txt .names{font-family:var(--script);font-style:italic;font-weight:700;font-size:26px;
  line-height:1.03;color:var(--ink);margin:3px 0 3px;white-space:nowrap;text-align:center}
.gm-sub{font-size:12.5px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.greet-photo{flex:0 0 42%;position:relative;align-self:stretch;
  background-size:cover;background-position:50% 30%}
.greet-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#F7F0E2 0%,#F7F0E2 6%,rgba(247,240,226,.62) 32%,rgba(247,240,226,0) 68%)}

/* ---- COUNTDOWN: full sunset photo, text overlaid, plane shoots across ---- */
/* keep FULL WIDTH (matches the greeting card above); trim ~7% of HEIGHT via tighter padding instead of scaling */
.countdown{padding:14px 20px 14px;min-height:150px;overflow:hidden}
.cd-photo{position:absolute;inset:0;width:100%;z-index:0;background-size:cover;background-position:center 44%}
/* v79 — the whole take-off card reads as a soft WHITE gradient (like the mock): a dreamy cream
   veil across all of it, heavier on the left so the black text stays crisp; the sunset/moonlit
   sky + bougainvillea still glow through on the right. */
.cd-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(255,253,248,.86) 0%,rgba(255,253,248,.6) 32%,rgba(255,253,248,.34) 64%,rgba(255,253,248,.2) 100%)}
.countdown::after{display:none}          /* drop the diagonal sheen — cleaner over the photo */
/* the gold plane, shooting across the card on a rising line with a contrail */
.cd-fly{position:absolute;left:-8%;top:40%;width:122%;height:2px;z-index:1;pointer-events:none;
  transform:rotate(-10deg);transform-origin:left center}
.cd-trail{position:absolute;left:0;top:50%;height:2.5px;width:100%;transform-origin:left center;
  transform:translateY(-50%) scaleX(0);border-radius:3px;
  background:linear-gradient(90deg,rgba(255,252,244,0) 0%,rgba(255,250,238,.28) 42%,rgba(255,249,235,.95) 100%);
  box-shadow:0 0 6px rgba(255,247,228,.5);animation:cdTrail 6.6s ease-in-out infinite}
.cd-plane-img{position:absolute;top:50%;left:0;width:33px;height:auto;
  transform:translate(-50%,-50%) rotate(10deg);transform-origin:center;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.4)) drop-shadow(0 0 7px rgba(255,236,180,.5));
  animation:cdPlane 6.6s ease-in-out infinite}
@keyframes cdPlane{0%{left:0%;opacity:0}7%{opacity:1}64%{left:100%;opacity:1}73%{left:100%;opacity:0}100%{left:100%;opacity:0}}
@keyframes cdTrail{0%{transform:translateY(-50%) scaleX(0);opacity:0}7%{opacity:.85}64%{transform:translateY(-50%) scaleX(1);opacity:.85}80%{transform:translateY(-50%) scaleX(1);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cd-trail{display:none}.cd-plane-img{animation:none;left:90%;opacity:.9}}
.countdown .cd-label{color:#E9CE8A;letter-spacing:.18em;opacity:.95;position:relative;z-index:2}
.countdown .cd-big{font-size:50px;line-height:1;margin:2px 0 5px;font-weight:800;
  background:linear-gradient(178deg,#F6DE9B 6%,#DCB65C 52%,#B98F32 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.countdown .cd-big small{font-size:17px;font-weight:800;letter-spacing:.08em;margin-left:7px;
  text-transform:uppercase;-webkit-text-fill-color:#F3EAD6;color:#F3EAD6}
.countdown .cd-sub{color:rgba(243,234,214,.9);font-size:13px;line-height:1.5}
/* v79 — pre/post-trip sits on the soft WHITE take-off card → pink label, gold number, black text
   like the mock. Scoped to :not(.cd-here) so the on-trip weather scene keeps its light-on-dark look. */
.countdown:not(.cd-here){background:linear-gradient(160deg,#FDF7EF 0%,#F5E9DA 100%)}
html[data-pcwho="jo"] .countdown:not(.cd-here){background:linear-gradient(160deg,#FDF6F2 0%,#F6E6DE 100%)}
.countdown:not(.cd-here) .cd-label{color:#B4626D;opacity:1;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.countdown:not(.cd-here) .cd-big{filter:drop-shadow(0 1px 2px rgba(120,80,20,.35))}
.countdown:not(.cd-here) .cd-big small{-webkit-text-fill-color:#1C1C1E;color:#1C1C1E;text-shadow:0 1px 2px rgba(255,255,255,.55)}
.countdown:not(.cd-here) .cd-sub{color:#1C1C1E;text-shadow:0 1px 3px rgba(255,255,255,.6)}
.countdown:not(.cd-here) .cd-itin{color:var(--gold-deep);border-color:var(--gold);background:rgba(255,253,248,.55)}
/* v90 — the 8pm–6am full-night backdrop is dark, so the card flips to WHITE text
   (pink label brightened, gold "28" kept, itinerary button on a solid light fill) */
.countdown.cd-nighttime{background:linear-gradient(160deg,#1B1C30,#2B2540)}
.countdown.cd-nighttime .cd-photo::before{background:linear-gradient(90deg,rgba(16,16,36,.52) 0%,rgba(16,16,36,.3) 42%,rgba(16,16,36,.12) 78%,rgba(16,16,36,0) 100%)}
.countdown.cd-nighttime .cd-label{color:#F2A8BE;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.countdown.cd-nighttime .cd-big{filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.countdown.cd-nighttime .cd-big small{-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.countdown.cd-nighttime .cd-sub{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.countdown.cd-nighttime .cd-itin{color:var(--gold-deep);border-color:var(--gold);background:rgba(255,253,248,.92)}
/* evening / golden-hour: the sunset is bright but warm-dark on the left where the text sits, so
   flip to WHITE text over a soft warm scrim — keeps the sunset glowing on the right */
.countdown.cd-dusk{background:linear-gradient(160deg,#3A2418,#5A2E1C)}
.countdown.cd-dusk .cd-photo::before{background:linear-gradient(90deg,rgba(40,22,10,.6) 0%,rgba(40,22,10,.34) 44%,rgba(40,22,10,.12) 78%,rgba(40,22,10,0) 100%)}
.countdown.cd-dusk .cd-label{color:#FFD6A0;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.countdown.cd-dusk .cd-big{filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))}
.countdown.cd-dusk .cd-big small{-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.countdown.cd-dusk .cd-sub{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.countdown.cd-dusk .cd-itin{color:var(--gold-deep);border-color:var(--gold);background:rgba(255,253,248,.92)}
.countdown .progressbar{max-width:56%}
.cd-itin{margin-top:15px}
/* section header link — gold "Map →" like the reference */
.sec .more-link{color:var(--gold-deep);font-weight:700}
.sec .more-link svg,.sec .more-link .arr{color:var(--gold)}
@media (max-width:360px){
  .greet-txt .names{font-size:23px}
  .greet-photo{flex-basis:37%}
  .countdown .cd-big{font-size:52px}
}

/* ============================================================
   v31 — animated travellers on the journey map
   the pig / chick / both ARE the vehicle; boats at sea
   ============================================================ */
.j-rider{transform-box:fill-box;transform-origin:center;will-change:transform}
.j-rider.fly{animation:jFlyBob 1.5s ease-in-out infinite}
@keyframes jFlyBob{0%,100%{transform:translateY(1.6px) rotate(-2.6deg)}50%{transform:translateY(-2.4px) rotate(2.6deg)}}
.j-rider.sail{animation:jSailRock 2.3s ease-in-out infinite}
@keyframes jSailRock{0%,100%{transform:translateY(1px) rotate(-1.9deg)}50%{transform:translateY(-1px) rotate(1.9deg)}}
.j-shadow{opacity:.16;transform-box:fill-box;transform-origin:center}
.j-shadow.fly{animation:jShadPulse 1.5s ease-in-out infinite}
@keyframes jShadPulse{0%,100%{transform:scaleX(1);opacity:.16}50%{transform:scaleX(.8);opacity:.09}}
@media (prefers-reduced-motion:reduce){.j-rider,.j-shadow{animation:none!important}}

/* arrival sparkle burst + gentle pin glow (journey) */
.j-spark{pointer-events:none}
.j-spk{transform-box:fill-box;transform-origin:center;opacity:0;animation:jSpk .85s ease-out forwards;animation-delay:var(--d,0ms)}
@keyframes jSpk{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(1.05)}}
.j-spk-ring{transform-box:fill-box;transform-origin:center;animation:jSpkRing .85s ease-out forwards}
@keyframes jSpkRing{0%{opacity:.85;transform:scale(.3)}100%{opacity:0;transform:scale(3.2)}}
.j-here image{transform-box:fill-box;transform-origin:center bottom;animation:jPinBounce 1.9s ease-in-out infinite;
  filter:drop-shadow(0 3px 4px rgba(70,58,32,.30))}
@keyframes jPinBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.4px) scale(1.045)}}
.j-fin image{filter:drop-shadow(0 3px 4px rgba(70,58,32,.26))}
@media (prefers-reduced-motion:reduce){.j-spk,.j-spk-ring,.j-here image{animation:none!important}}

/* ============================================================
   v32 — header to match the mockup exactly + countdown plane
   ============================================================ */
/* + button: soft cream-filled disc with a gold plus (was a gold outline) */
.add-btn{background:linear-gradient(180deg,#FFFDF9,#F3EBDB);border:1px solid rgba(176,137,46,.34);
  color:var(--gold-deep);box-shadow:0 3px 10px rgba(70,58,32,.13),inset 0 1px 0 #fff}
.add-btn:active{transform:scale(.92);background:#EFE6D3}
/* small gold dot under NEIL, like the reference */
.av-name::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--gold);
  margin:4px auto 0;box-shadow:0 0 0 2px rgba(200,163,76,.16)}
/* faint wavy paper texture behind the banner */
header.top::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-repeat:repeat;background-size:300px 92px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='92'%3E%3Cg fill='none' stroke='%23C9A34C' stroke-width='1'%3E%3Cpath d='M0 26 Q75 10 150 26 T300 26' opacity='.32'/%3E%3Cpath d='M0 52 Q75 36 150 52 T300 52' opacity='.22'/%3E%3Cpath d='M0 78 Q75 62 150 78 T300 78' opacity='.14'/%3E%3C/g%3E%3C/svg%3E")}
.hdr-logo{position:relative;z-index:1;mix-blend-mode:normal}   /* logo bg is transparent now — no multiply box */

/* train chugging along the rails (journey) */
.j-rider.chug{animation:jChug 1.3s ease-in-out infinite}
@keyframes jChug{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@media (prefers-reduced-motion:reduce){.j-rider.chug{animation:none}}

/* v33 — countdown peekaboo: pig & chick pop in FRONT of the text, from varied spots, ~every 5s, slow retreat */
.cd-peek{position:absolute;z-index:5;pointer-events:none;bottom:0;width:84px;height:auto;
  filter:drop-shadow(0 -2px 7px rgba(0,0,0,.32));will-change:transform}
.cd-peek-pig{right:20px;transform:translateY(112%);animation:cdPeekPig 10s ease-in-out infinite}
.cd-peek-chick{right:2px;width:76px;transform:translateX(130%) translateY(24%);animation:cdPeekChick 10s ease-in-out infinite}
/* pig rises from the bottom-right corner, holds, sinks back slowly */
@keyframes cdPeekPig{
  0%,6%{transform:translateY(112%)}
  11%{transform:translateY(36%)}
  22%{transform:translateY(30%)}
  30%{transform:translateY(34%)}
  46%{transform:translateY(112%)}
  100%{transform:translateY(112%)}}
/* chick slides in from the right edge a bit later, holds, glides back out */
@keyframes cdPeekChick{
  0%,52%{transform:translateX(130%) translateY(24%)}
  58%{transform:translateX(0%) translateY(22%)}
  74%{transform:translateX(-4%) translateY(24%)}
  92%{transform:translateX(130%) translateY(24%)}
  100%{transform:translateX(130%) translateY(24%)}}
@media (prefers-reduced-motion:reduce){.cd-peek{display:none}}

/* v34 — love-heart balloons drifting up & out of the app after the journey finishes */
.j-balloon{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  filter:drop-shadow(0 3px 6px rgba(226,55,68,.30));animation:jBalloon 13s cubic-bezier(.45,0,.55,1) forwards;will-change:transform,opacity}
@keyframes jBalloon{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  9%{opacity:.95;transform:translate(-50%,-62%) scale(1)}
  50%{opacity:.95;transform:translate(-42%,calc(-50% - 46vh)) scale(1.05) rotate(-5deg)}
  100%{transform:translate(-58%,calc(-50% - 120vh)) scale(1.15) rotate(7deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.j-balloon{display:none}}

/* v34 — randomized countdown peekaboo (JS-spawned, in front of the text) */
.cd-peek-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:inherit}
.cd-peeker{position:absolute;height:auto;filter:drop-shadow(0 -2px 7px rgba(0,0,0,.28));will-change:transform}
.pk-bottom{transform:translateY(116%);animation:pkBottom 4.6s ease-in-out forwards}
.pk-right{transform:translateX(122%);animation:pkRight 4.4s ease-in-out forwards}
.pk-top{transform:translateY(-118%) rotate(180deg);animation:pkTop 4.4s ease-in-out forwards}
@keyframes pkBottom{0%{transform:translateY(116%)}13%{transform:translateY(34%)}60%{transform:translateY(38%)}100%{transform:translateY(116%)}}
@keyframes pkRight{0%{transform:translateX(122%)}15%{transform:translateX(5%)}62%{transform:translateX(1%)}100%{transform:translateX(122%)}}
@keyframes pkTop{0%{transform:translateY(-120%) rotate(180deg)}16%{transform:translateY(-50%) rotate(180deg)}62%{transform:translateY(-54%) rotate(180deg)}100%{transform:translateY(-120%) rotate(180deg)}}
.pk-lean-r{animation:pkLeanR 4.8s ease-in-out forwards}
.pk-lean-l{animation:pkLeanL 4.8s ease-in-out forwards}
@keyframes pkLeanR{0%{transform:translateY(116%) rotate(0)}13%{transform:translateY(34%) rotate(0)}36%{transform:translateY(36%) rotate(10deg)}60%{transform:translateY(38%) rotate(10deg)}100%{transform:translateY(116%) rotate(0)}}
@keyframes pkLeanL{0%{transform:translateY(116%) rotate(0)}13%{transform:translateY(34%) rotate(0)}36%{transform:translateY(36%) rotate(-10deg)}60%{transform:translateY(38%) rotate(-10deg)}100%{transform:translateY(116%) rotate(0)}}

/* v35 — greeting characters WAVE (animated video), cream bg melts into the card */
/* the wave clip has a warm-cream bg (~#EBE0CC) baked in — can't key a video, so grade a matching
   halo behind it and dissolve the edges so the box melts into the card */
.greet-chars{background:radial-gradient(ellipse 82% 80% at 50% 50%,#EEE6D6 40%,rgba(238,230,214,.55) 62%,rgba(238,230,214,0) 80%)}
.greet-chars video.greet-vid{width:108%;height:auto;display:block;margin:0 0 -4px -3px;mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(ellipse 68% 74% at 50% 47%,#000 46%,transparent 80%);
  mask-image:radial-gradient(ellipse 68% 74% at 50% 47%,#000 46%,transparent 80%)}

/* ============================================================
   v36 — WEATHER POSTCARDS: animated scene bg + floating live-data panel
   ============================================================ */
.wx-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 12px;margin:0 -18px;scrollbar-width:none}
.wx-strip::-webkit-scrollbar{display:none}
.wx-loading{color:var(--muted);font-size:13px;padding:14px 2px}
.wx-card{flex:0 0 300px;height:176px;border-radius:20px;overflow:hidden;position:relative;scroll-snap-align:start;
  box-shadow:var(--shadow-lift);border:1px solid rgba(231,234,243,.5);background:#e8e2d4}
.wx-bg{position:absolute;inset:0;background-size:cover;background-position:60% center;transform:scale(1.06);
  animation:wxDrift 24s ease-in-out infinite alternate}
@keyframes wxDrift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.13) translate(-2.5%,-1.5%)}}
.wx-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,30,.10),rgba(20,22,30,0) 52%)}
.wx-panel{position:absolute;left:11px;top:11px;bottom:11px;width:43%;border-radius:14px;padding:11px 12px;z-index:2;
  background:rgba(255,255,255,.74);backdrop-filter:blur(10px) saturate(1.35);-webkit-backdrop-filter:blur(10px) saturate(1.35);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 6px 18px rgba(20,20,30,.16);
  display:flex;flex-direction:column;color:#23252c}
.wx-top{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:#3a3d46}
.wx-top .wx-ic{width:19px;height:19px;color:var(--gold-deep);flex:0 0 auto}
.wx-top .wx-ic svg{width:100%;height:100%}
.wx-city{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-temp{font-size:42px;font-weight:800;line-height:1;margin-top:auto;letter-spacing:-.02em}
.wx-desc{font-size:14px;font-weight:700;color:#474a53;margin-top:1px}
.wx-meta{font-size:11px;color:#6a6d76;font-weight:600;margin-top:3px}
/* condition FX — subtle, never competes with the text */
.wx-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.fx-rain::before{content:"";position:absolute;inset:-25%;background-image:repeating-linear-gradient(103deg,rgba(255,255,255,.30) 0 1px,transparent 1px 10px);animation:wxRain .7s linear infinite;opacity:.5}
@keyframes wxRain{from{transform:translateY(-12%)}to{transform:translateY(12%)}}
.fx-snow::before,.fx-snow::after{content:"";position:absolute;inset:-25%;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 62% 68%,#fff,transparent),radial-gradient(1.6px 1.6px at 82% 40%,#fff,transparent),radial-gradient(1.6px 1.6px at 40% 82%,#fff,transparent);background-size:120px 120px;animation:wxSnow 6s linear infinite;opacity:.75}
.fx-snow::after{background-size:88px 88px;animation-duration:9s;opacity:.5}
@keyframes wxSnow{from{transform:translateY(-16%)}to{transform:translateY(16%)}}
.fx-sun::before{content:"";position:absolute;top:-32%;right:-18%;width:72%;height:92%;border-radius:50%;background:radial-gradient(circle,rgba(255,238,175,.5),transparent 62%);animation:wxSun 5s ease-in-out infinite alternate}
@keyframes wxSun{from{opacity:.38;transform:scale(.94)}to{opacity:.74;transform:scale(1.1)}}
.fx-wind::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);background-size:42% 100%;animation:wxWind 4.2s linear infinite}
@keyframes wxWind{from{background-position:-42% 0}to{background-position:142% 0}}
.fx-stars::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 32% 22%,#fff,transparent),radial-gradient(1px 1px at 70% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 52% 16%,#fff,transparent),radial-gradient(1px 1px at 86% 26%,#fff,transparent),radial-gradient(1px 1px at 60% 40%,#fff,transparent);animation:wxTwinkle 3s ease-in-out infinite alternate;opacity:.9}
@keyframes wxTwinkle{from{opacity:.4}to{opacity:.95}}
.fx-flash::after{content:"";position:absolute;inset:0;background:rgba(230,240,255,.55);opacity:0;animation:wxFlash 6.5s steps(1) infinite}
@keyframes wxFlash{0%,92%,100%{opacity:0}93%{opacity:.5}94%{opacity:0}96%{opacity:.35}97%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wx-bg,.wx-fx::before,.wx-fx::after{animation:none!important}}

/* v36.1 — cheeky peeks: a little wiggle/tilt while they hold, like they're up to something */
.pk-bottom.pk-cheeky{animation:pkBottomCheeky 4.8s ease-in-out forwards}
@keyframes pkBottomCheeky{
  0%{transform:translateY(116%) rotate(0)}
  12%{transform:translateY(34%) rotate(0)}
  24%{transform:translateY(36%) rotate(-7deg)}
  36%{transform:translateY(33%) rotate(6deg)}
  48%{transform:translateY(36%) rotate(-4deg)}
  62%{transform:translateY(35%) rotate(0)}
  100%{transform:translateY(116%) rotate(0)}}
.pk-right.pk-cheeky{animation:pkRightCheeky 4.6s ease-in-out forwards}
@keyframes pkRightCheeky{
  0%{transform:translateX(122%) rotate(0)}
  14%{transform:translateX(4%) rotate(0)}
  30%{transform:translateX(0%) rotate(-8deg)}
  46%{transform:translateX(3%) rotate(5deg)}
  62%{transform:translateX(1%) rotate(0)}
  100%{transform:translateX(122%) rotate(0)}}
/* upside-down peek: gentle pendulum sway while hanging (overrides earlier pkTop) */
@keyframes pkTop{
  0%{transform:translateY(-120%) rotate(180deg)}
  16%{transform:translateY(-50%) rotate(180deg)}
  32%{transform:translateY(-52%) rotate(174deg)}
  48%{transform:translateY(-51%) rotate(186deg)}
  62%{transform:translateY(-53%) rotate(180deg)}
  100%{transform:translateY(-120%) rotate(180deg)}}

/* v36.1 — greeting card: oatmeal base (matches the wave clip's box) fading to a white hue,
   then clear over the Santorini photo so it peeks through */
.greet{background:linear-gradient(90deg,#EBE0CC 0%,#EDE4D2 40%,#F3EDE0 58%)}
.greet-chars{background:none}
.greet-chars video.greet-vid{
  -webkit-mask-image:radial-gradient(ellipse 80% 84% at 50% 47%,#000 56%,transparent 90%);
  mask-image:radial-gradient(ellipse 80% 84% at 50% 47%,#000 56%,transparent 90%)}
.greet-photo::before{background:linear-gradient(90deg,#EBE0CC 0%,rgba(250,246,238,.72) 26%,rgba(255,255,255,.30) 48%,rgba(255,255,255,0) 74%)}

/* v37 — weather postcards: smaller, TWO per screen, slide; panel covers any baked art text */
.wx-card{flex:0 0 calc(50% - 6px);height:172px}
.wx-bg{background-position:right center}
.wx-panel{left:8px;top:8px;bottom:8px;width:56%;padding:9px 10px;border-radius:12px;
  background:rgba(255,255,255,.93)}
.wx-top{font-size:11px;gap:5px}
.wx-top .wx-ic{width:16px;height:16px}
.wx-temp{font-size:27px}
.wx-desc{font-size:11.5px;line-height:1.15}
.wx-meta{font-size:9.5px;margin-top:2px}
@media (min-width:700px){.wx-card{flex:0 0 calc(33.33% - 8px)}}

/* v38 — greeting: MORE Santorini + bougainvillea, seamless gradients (no lines anywhere) */
.greet-photo{flex:0 0 50%;background-position:62% 42%}
.greet-photo::before{background:linear-gradient(90deg,#EBE0CC 0%,rgba(243,238,228,.85) 18%,rgba(250,248,242,.35) 42%,rgba(255,255,255,0) 66%)}
/* wave-clip melts fully into the oatmeal — very soft falloff, no visible box edge */
.greet-chars video.greet-vid{
  -webkit-mask-image:radial-gradient(ellipse 66% 72% at 50% 48%,#000 34%,rgba(0,0,0,.55) 58%,transparent 82%);
  mask-image:radial-gradient(ellipse 66% 72% at 50% 48%,#000 34%,rgba(0,0,0,.55) 58%,transparent 82%)}
.greet-l{padding-right:0}
.greet-txt{margin-left:92px;transform:translateY(-5px)}
.greet-txt .names{font-size:24px}

/* ============================================================
   v39 — square weather library · BIG character icons · de-crowded rows
   ============================================================ */
/* weather: square tiles shown whole; live panel sits over the tile's own text block */
.wx-card{flex:0 0 calc(50% - 6px);height:auto;aspect-ratio:1/1}
.wx-bg{background-position:center}
.wx-panel{left:6px;top:6px;bottom:auto;right:auto;width:74%;height:71%;padding:9px 11px;
  background:rgba(253,252,249,.96)}
.wx-temp{margin-top:3px;font-size:30px}
@media (min-width:620px){.wx-card{flex:0 0 calc(33.33% - 8px)}}

/* character icons — at least double, they're the stars */
.ev-ic{width:80px;height:80px;border-radius:20px;flex:0 0 80px}
.bk-ic{width:88px;height:88px;border-radius:22px;flex:0 0 88px}
.sw-ic{width:72px;height:72px;border-radius:18px;flex:0 0 72px}
.alert-ic{width:72px;height:72px;border-radius:18px;flex:0 0 72px}
.ev-ic svg,.sw-ic svg,.bk-ic svg,.alert-ic svg{width:30px;height:30px}

/* rows: pig/chick dots live in the TOP-RIGHT corner; text gets room to breathe */
.event-row{position:relative}
.ev-corner{position:absolute;top:9px;right:34px}
.ev-corner .pax-row{margin:0;gap:4px}
.ev-corner .pax-flag,.ev-corner .air-chip{display:none}   /* corner = characters only */
.ev-title{padding-right:76px}

/* timeline cards: day-part label TOP-LEFT, characters TOP-RIGHT, calmer smaller type */
.tl-card{position:relative;padding:10px 12px 11px}
.tl-corner{position:absolute;top:8px;right:10px}
.tl-corner .pax-row{margin:0;gap:4px}
.tl-corner .pax-flag,.tl-corner .air-chip{display:none}
.tl-time{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);min-height:12px}
.tl-title{font-size:13px;font-weight:700;line-height:1.3;margin-top:3px;display:block;padding-right:80px}
.tl-sub{font-size:11.5px;margin-top:2px;padding-right:80px}
.tl-badges{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
.tl-badges:empty{display:none}
/* timeline cards are STACKED, not flexed — the swipe wrapper's .sw-row flex is for list rows only */
.tl-card.sw-row{display:block}

/* ============================================================
   v40 — destination weather packs: live text INSIDE each tile's frosted box
   ============================================================ */
.wx-strip{align-items:flex-start}
.wx-card{flex:0 0 calc(50% - 6px);height:auto;aspect-ratio:1/1}
.wx-r-isl{aspect-ratio:3/4}                    /* island tiles are portrait */
.wx-inbox{position:absolute;display:flex;flex-direction:column;color:var(--ink);text-align:left;
  left:8%;top:11%;width:31%;height:76%;padding:2px 1px;overflow:hidden}
.wx-r-ath .wx-inbox{left:7%;top:6%;width:37%;height:86%}
.wx-r-isl .wx-inbox{left:7%;top:5%;width:40%;height:54%}
.wx-boxr .wx-inbox{left:auto;right:7%}
.wx-inbox .wx-top{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.02em}
.wx-inbox .wx-top .wx-ic{width:13px;height:13px;flex:0 0 13px}
.wx-inbox .wx-city{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-inbox .wx-temp{font-size:26px;font-weight:800;line-height:1.05;margin-top:4px;letter-spacing:-.02em}
.wx-inbox .wx-desc{font-size:10.5px;font-weight:700;line-height:1.2;margin-top:2px}
.wx-inbox .wx-meta{font-size:9px;color:var(--ink-soft);line-height:1.45;margin-top:3px}
@media (min-width:620px){.wx-card{flex:0 0 calc(33.33% - 8px)}}

/* v41 — weather: smaller, lighter info block so more of the artwork reads through */
.wx-inbox{top:9%;height:auto;padding:1px 0}
.wx-r-ath .wx-inbox{top:7%;height:auto}
.wx-r-isl .wx-inbox{top:6%;height:auto}
.wx-inbox .wx-top{font-size:8px;gap:3px;letter-spacing:.03em}
.wx-inbox .wx-top .wx-ic{width:10px;height:10px;flex:0 0 10px}
.wx-inbox .wx-temp{font-size:18px;margin-top:2px;letter-spacing:-.01em}
.wx-inbox .wx-desc{font-size:8.5px;margin-top:0}
.wx-inbox .wx-meta{font-size:7px;line-height:1.4;margin-top:2px}

/* ============================================================
   v42 — WEATHER, redesigned: compact editorial cards (Apple Weather / Flighty)
   no artwork, no glass panels, no baked text — ivory · navy · muted gold
   ============================================================ */
/* retire every trace of the illustrated tiles */
.wx-bg,.wx-scrim,.wx-fx,.wx-panel,.wx-inbox{display:none!important}

.wx-strip{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:3px 18px 12px;margin:0 -18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch}
.wx-strip::-webkit-scrollbar{display:none}
.wx-card{position:relative;flex:0 0 43%;max-width:186px;aspect-ratio:1/1.04;height:auto;overflow:hidden;
  scroll-snap-align:start;cursor:pointer;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 13px 13px;border-radius:20px;
  background:linear-gradient(168deg,#FFFDF8 0%,#FBF6EC 100%);
  /* v93 — a proper gold frame + a deeper drop shadow so the weather tiles read 3-D and thick */
  border:2.5px solid rgba(176,137,46,.55);
  box-shadow:0 10px 22px -8px rgba(70,58,32,.34),0 2px 5px rgba(70,58,32,.16),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .16s ease,box-shadow .16s ease}
.wx-card:active{transform:scale(.975);box-shadow:0 5px 12px -4px rgba(70,58,32,.3)}
.wx-tint{position:absolute;inset:0;z-index:0;pointer-events:none}
.wx-card>*{position:relative;z-index:1}
.wx-head{display:flex;align-items:center;gap:5px;min-width:0}
.wx-flag{font-size:13px;line-height:1}
.wx-city{font-size:11.5px;font-weight:800;color:var(--ink);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.wx-go{flex:0 0 auto;color:var(--gold);opacity:.5;display:flex}
.wx-go svg{width:13px;height:13px}
.wx-i{width:52px;height:52px;display:block;margin:1px auto 0}
.wx-read{margin-top:auto}
.wx-t{font-size:31px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.wx-t span{font-size:19px;font-weight:700;color:var(--muted);margin-left:1px}
.wx-c{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-s{font-size:10px;font-weight:700;margin-top:2px;opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-rule{display:none}   /* v97 — dropped the little accent line at the bottom of the weather tiles */
.wx-loading{flex:1;padding:16px 2px;font-size:13px;color:var(--muted)}
@media (min-width:620px){.wx-card{flex:0 0 172px}}

/* ---- floating weather card overlay (hovers, flick through countries, swipe-down to shrink) ---- */
.wxov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:22px 14px;
  background:rgba(14,16,22,calc(.5 * var(--wxov-bg,1)));-webkit-backdrop-filter:blur(calc(6px * var(--wxov-bg,1)));
  backdrop-filter:blur(calc(6px * var(--wxov-bg,1)));opacity:0;transition:opacity .3s ease;perspective:1400px}
.wxov.on{opacity:1}
.wxov.closing{opacity:0}
.wxov-card{position:relative;width:100%;max-width:440px;max-height:84vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#FFFDF8,#F6EEE0);border:1px solid rgba(200,163,76,.3);border-radius:26px;
  box-shadow:0 30px 70px rgba(20,22,34,.45);overflow:hidden;
  transform:translateY(40px) scale(.9) rotateX(10deg);opacity:0;
  transition:transform .5s cubic-bezier(.2,.75,.28,1.02),opacity .35s ease}
html[data-pcwho="jo"] .wxov-card{border-color:rgba(226,150,172,.35);background:linear-gradient(160deg,#FFFDFB,#F8EEEC)}
.wxov.on .wxov-card{transform:none;opacity:1}
.wxov.closing .wxov-card{transform:translateY(60px) scale(.72);opacity:0;transition:transform .34s ease,opacity .3s ease}
.wxov-grab{width:40px;height:5px;border-radius:3px;background:rgba(120,90,40,.28);margin:10px auto 2px;flex:0 0 auto}
.wxov-close{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(120,90,40,.22);background:rgba(255,255,255,.7);color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.wxov-close svg{width:15px;height:15px}
.wxov-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1 1 auto}
.wxov-track::-webkit-scrollbar{display:none}
.wxov-panel{flex:0 0 100%;scroll-snap-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 18px 14px;scrollbar-width:none}
.wxov-panel::-webkit-scrollbar{display:none}
.wxov-dots{display:flex;gap:6px;justify-content:center;padding:8px 0 12px;flex:0 0 auto}
.wxov-dots i{width:6px;height:6px;border-radius:50%;background:rgba(120,90,40,.25);transition:all .2s}
.wxov-dots i.on{background:var(--gold);width:18px;border-radius:3px}
html[data-pcwho="jo"] .wxov-dots i.on{background:#E296AC}
@media(prefers-reduced-motion:reduce){.wxov,.wxov-card{transition:opacity .2s ease}.wxov-card{transform:none}}

/* ---- weather detail sheet ---- */
.wxsh{padding:2px 2px 8px}
.wxsh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wxsh-city{font-size:17px;font-weight:800;color:var(--ink)}
.wxsh-cond{font-size:13px;font-weight:600;color:var(--muted);margin-top:2px}
.wxsh-i{width:60px;height:60px;flex:0 0 60px}
.wxsh-temp{font-size:52px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.04em;margin:6px 0 14px}
.wxsh-temp span{font-size:30px;color:var(--muted)}
.wxsh-temp em{font-size:13px;font-weight:600;font-style:normal;color:var(--muted);margin-left:10px;letter-spacing:0}
.wxs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wxs-cell{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:8px 9px}
.wxs-k{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.wxs-v{font-size:15px;font-weight:800;color:var(--ink);margin-top:2px}
.wxsh-lbl{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--wxa,var(--gold-deep));margin:16px 0 7px}
.wxh-strip{display:flex;gap:6px;overflow-x:auto;margin:0 -18px;padding:0 18px 3px;scrollbar-width:none}
.wxh-strip::-webkit-scrollbar{display:none}
.wxh-cell{flex:0 0 54px;text-align:center;background:var(--bg2);border:1px solid var(--line);
  border-radius:13px;padding:7px 3px 6px}
.wxh-t{font-size:9.5px;font-weight:700;color:var(--muted)}
.wxh-i{width:26px;height:26px;margin:3px auto}
.wxh-d{font-size:13.5px;font-weight:800;color:var(--ink)}
.wxh-p{font-size:9px;font-weight:700;color:#4E8FC0;min-height:11px}
.wxd-list{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:2px 11px}
.wxd-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.wxd-row:last-child{border-bottom:0}
.wxd-day{flex:0 0 46px;font-size:12.5px;font-weight:800;color:var(--ink)}
.wxd-i{width:26px;height:26px;flex:0 0 26px}
.wxd-p{flex:0 0 34px;font-size:10.5px;font-weight:700}
.wxd-r{flex:1;display:flex;justify-content:flex-end;gap:9px;font-size:13px}
.wxd-r b{color:var(--ink);font-weight:800}
.wxd-r span{color:var(--muted);font-weight:600}
.wxsh-tip{margin-top:15px;background:#FBF3DE;border:1px solid #EBDCB4;border-radius:13px;
  padding:10px 12px;font-size:12.5px;color:#6B5A23;line-height:1.5}
.wxsh-tip b{color:var(--gold-deep)}
.wxsh-src{margin-top:10px;font-size:10.5px;color:var(--muted);text-align:center}

/* v43 — country pack: real flags, local time, feels-like, themed motifs; cards a touch smaller */
.wx-card{flex:0 0 40%;max-width:168px;aspect-ratio:1/1.16;padding:10px 11px 11px}
/* the country motif is a watermark, not a corner sticker — pulled in off the edge so it can breathe */
.wx-motif{position:absolute;right:9px;bottom:11px;width:50px;height:50px;object-fit:contain;
  opacity:.13;z-index:0;pointer-events:none}
/* v105 — bougainvillea removed from the weather tiles */
.wx-boug{display:none}
.wx-flag{width:26px;height:26px;object-fit:contain;flex:0 0 26px;border-radius:0;box-shadow:none}
.wx-city{font-size:11px}
.wx-time{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-top:1px}
.wx-i{width:58px;height:58px;margin:0 2px 0 auto}   /* bigger, and sits out to the middle-right */
.wx-t{font-size:27px}
.wx-t span{font-size:16px}
.wx-c{font-size:10.5px;margin-top:1px}
.wx-foot{display:flex;flex-direction:column;gap:0;margin-top:2px}
.wx-fl{font-size:9.5px;font-weight:700;color:var(--ink-soft)}
.wx-s{font-size:9.5px;font-weight:700;margin-top:0;opacity:.9}
.wx-rule{left:11px;bottom:0;width:22px}
@media (min-width:620px){.wx-card{flex:0 0 156px}}
/* sheet: flag + stat icons + clothing motif */
/* v88 — the big gold-framed flag beside the city + condition in the weather sheet */
.wxsh-place{display:flex;align-items:center;gap:12px;min-width:0}
.wxsh-flag{width:48px;height:48px;object-fit:contain;flex:0 0 48px;border-radius:0;box-shadow:none}
.wxs-k{display:flex;align-items:center;gap:4px}
.wxs-ic{width:12px;height:12px;object-fit:contain;opacity:.75}
.wxsh-tip{display:flex;align-items:flex-start;gap:9px}
.wxsh-tipic{width:20px;height:20px;object-fit:contain;flex:0 0 20px;margin-top:1px}

/* Sydney rides at the end of the weather strip — flag it as home, not a destination */
.wx-home{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid;border-radius:5px;padding:1px 3px;opacity:.85;margin-left:1px}

/* ============================================================
   v45 — WE'RE THERE: on the trip, the countdown becomes today's stop
   Pig & Chicken weather scene on the right, warm brand wash carrying the text
   ============================================================ */
.countdown.cd-here{padding:0;min-height:0;background:linear-gradient(140deg,#20242F 0%,#2A3242 55%,#1C2130 100%)}
.cdh-scene{position:absolute;inset:0;z-index:0;background-size:cover;background-position:72% center;
  transform:scale(1.04);animation:cdhDrift 26s ease-in-out infinite alternate}
@keyframes cdhDrift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.1) translateX(-2%)}}
/* the art has its own frosted panel baked in on the left — this wash buries it and
   hands the text a brand-cream bed that melts into the scene */
.cdh-wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,#FBF6EC 0%,rgba(251,246,236,.97) 34%,rgba(251,246,236,.72) 50%,rgba(251,246,236,.18) 66%,rgba(251,246,236,0) 80%)}
.cdh-body{position:relative;z-index:3;width:64%;min-width:190px;padding:17px 0 17px 18px;color:var(--ink)}
.cd-here .cd-label{color:var(--gold-deep);opacity:1;font-size:10px;letter-spacing:.17em;font-weight:800}
.cdh-place{font-family:var(--script);font-weight:700;font-size:31px;line-height:1.02;letter-spacing:.01em;
  color:var(--ink);margin-top:3px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdh-where{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdh-wx{display:flex;align-items:center;gap:8px;margin-top:11px}
.cdh-wi{width:38px;height:38px;flex:0 0 38px;object-fit:contain}
.cdh-wt{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.cdh-wc{font-size:11px;font-weight:700;color:var(--ink-soft);line-height:1.25;min-width:0}
.cdh-wc span{display:block;font-size:9.5px;font-weight:700;color:var(--muted)}
.cd-here .progressbar{background:rgba(70,58,32,.14);height:6px;margin-top:12px;width:88%}
.cd-here .progressbar i{background:linear-gradient(90deg,var(--gold-soft),var(--gold-deep))}
.cd-here .cd-itin{margin-top:12px;color:var(--gold-deep);border-color:rgba(176,137,46,.5);
  background:rgba(255,253,248,.75);font-size:11px;padding:8px 13px}
/* the peekers belong to the scene side, in front of the art, clear of the text */
.cd-here .cd-peek-layer{z-index:2}
@media (max-width:400px){
  .cdh-body{width:69%;padding:15px 0 15px 15px}
  .cdh-place{font-size:27px}
  .cdh-wash{background:linear-gradient(96deg,#FBF6EC 0%,rgba(251,246,236,.97) 40%,rgba(251,246,236,.7) 56%,rgba(251,246,236,.15) 72%,rgba(251,246,236,0) 86%)}
}

/* v45 — the top-right avatar is WHO'S LOGGED IN: their character, their name, brand type */
.av-name{font-family:var(--script);font-size:12.5px;font-weight:700;letter-spacing:.15em;
  color:var(--gold-deep);text-transform:uppercase;line-height:1;opacity:1}
.av-name.av-unknown{font-family:var(--font);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.av-circle.is-pig{border-color:rgba(224,142,150,.6)}
.av-circle.is-chick{border-color:rgba(226,182,74,.7)}
.av-circle img{object-position:center 22%}
/* change user — folded into the quick glance, so the glance stays the glance */
.sh-head .gl-swap{margin-left:auto;flex:0 0 auto;align-self:center;background:rgba(200,163,76,.1);
  border:1px solid rgba(176,137,46,.4);border-radius:99px;padding:7px 12px;cursor:pointer;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-deep)}
.sh-head .gl-swap:active{transform:scale(.95)}
/* v80 — the change-user control is a pig+chicken circle button with a label under it */
.sh-head .duo-swap{margin-left:auto;flex:0 0 auto;align-self:center;display:flex;flex-direction:column;
  align-items:center;gap:4px;background:none;border:0;padding:2px;cursor:pointer;color:var(--gold-deep)}
.sh-head .duo-swap .ds-circle{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(180deg,#FFFDF9,#F3EBDB);border:2px solid rgba(176,137,46,.5);
  box-shadow:0 4px 12px rgba(70,58,32,.18),inset 0 1px 0 #fff;animation:duoPulse 2.6s ease-in-out infinite}
.sh-head .duo-swap .ds-circle img{width:58px;height:58px;object-fit:contain;object-position:center bottom}
.sh-head .duo-swap em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.sh-head .duo-swap:active{transform:scale(.94)}
.sh-head .duo-swap:active .ds-circle{animation:none}
html[data-pcwho="jo"] .sh-head .duo-swap{color:#B4626D}
html[data-pcwho="jo"] .sh-head .duo-swap .ds-circle{border-color:rgba(180,98,109,.5);animation-name:duoPulseJo}
/* v106 — the Change-user button gently pulses a soft glow ring so it invites a tap */
@keyframes duoPulse{
  0%{box-shadow:0 4px 12px rgba(70,58,32,.18),inset 0 1px 0 #fff,0 0 0 0 rgba(200,163,76,.55),0 0 10px 2px rgba(200,163,76,.35)}
  70%,100%{box-shadow:0 4px 12px rgba(70,58,32,.18),inset 0 1px 0 #fff,0 0 0 11px rgba(200,163,76,0),0 0 10px 2px rgba(200,163,76,0)}}
@keyframes duoPulseJo{
  0%{box-shadow:0 4px 12px rgba(70,58,32,.18),inset 0 1px 0 #fff,0 0 0 0 rgba(196,111,134,.6),0 0 10px 2px rgba(196,111,134,.4)}
  70%,100%{box-shadow:0 4px 12px rgba(70,58,32,.18),inset 0 1px 0 #fff,0 0 0 11px rgba(196,111,134,0),0 0 10px 2px rgba(196,111,134,0)}}
@media(prefers-reduced-motion:reduce){.sh-head .duo-swap .ds-circle{animation:none}}
.gl-who{display:flex;gap:11px;margin:12px 0 2px}
.gl-who[hidden]{display:none}
.whosh-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 10px;
  background:var(--chip3d);border:1.5px solid var(--line);border-radius:18px;cursor:pointer;
  font-family:var(--script);font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.whosh-btn:active{transform:scale(.97)}
.whosh-btn img{width:54px;height:54px;object-fit:contain}
.whosh-btn.on{border-color:var(--gold);background:rgba(200,163,76,.12);box-shadow:0 0 0 3px rgba(200,163,76,.1)}
/* v81 — the LIVE account (change-user picker only) glows with a pulsing green ring + "live" tag,
   so it's instantly obvious who's signed in. Tapping the other one pops, then opens into it. */
.gl-who .whosh-btn{position:relative}
.gl-who .whosh-btn.on{border-color:#37C77E;background:rgba(47,191,113,.08);box-shadow:none}
.gl-who .whosh-btn.on::after{content:"";position:absolute;inset:-3px;border-radius:20px;border:2.5px solid #37C77E;
  pointer-events:none;animation:liveRing 1.7s ease-in-out infinite}
.gl-who .whosh-btn.on::before{content:"live";position:absolute;top:8px;right:9px;z-index:2;
  font-family:system-ui,-apple-system,sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#178B4E;background:rgba(47,191,113,.18);border:1px solid rgba(47,191,113,.55);border-radius:20px;padding:2px 7px 1px}
@keyframes liveRing{
  0%,100%{box-shadow:0 0 0 0 rgba(47,191,113,.55),0 0 9px rgba(47,191,113,.45);opacity:1}
  50%{box-shadow:0 0 0 7px rgba(47,191,113,0),0 0 18px rgba(47,191,113,.78);opacity:.82}}
.gl-who .whosh-btn.switching{animation:whoPick .55s ease}
@keyframes whoPick{0%{transform:scale(1)}38%{transform:scale(1.06)}70%{transform:scale(.99)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .gl-who .whosh-btn.on::after{animation:none}
  .gl-who .whosh-btn.switching{animation:none}}
.av-circle.lg{width:58px;height:58px;flex:0 0 58px}
/* v98 — the glance-sheet character sits on its own: no white disc, just the cropped-out chick/pig */
.sheet.acct .sh-head .av-circle.lg{width:70px;height:70px;flex:0 0 70px;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.sheet.acct .sh-head .av-circle.lg img{object-fit:contain;object-position:center;filter:drop-shadow(0 3px 6px rgba(70,58,32,.2))}
/* v99 — same for the "next up" event icon in the glance sheet: drop the chip, let the character float free */
.sheet.acct #glance-next .ev-ic{background:none!important;box-shadow:none;overflow:visible}
.sheet.acct #glance-next .ev-ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(70,58,32,.2))}

/* v45 — the 7-day list: fill the dead space between icon and temps with what the
   icon actually means, plus the occasional cheeky aside */
.wxd-row{gap:8px}
.wxd-day{flex:0 0 40px}
.wxd-mid{flex:1;min-width:0;display:flex;align-items:baseline;gap:5px;overflow:hidden}
.wxd-cond{font-size:11.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;flex:0 0 auto}
.wxd-quip{font-size:10px;font-weight:600;font-style:italic;color:var(--gold-deep);opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wxd-p{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--blue);opacity:.9}
.wxd-r{flex:0 0 auto;justify-content:flex-end;gap:7px}
/* very narrow: the condition is the point, the gag is the bonus — drop the bonus */
@media (max-width:360px){.wxd-quip{display:none}}

/* v46 — name clear of the circle; weather icon centred where it was asked for */
.head-avatar{gap:7px}
/* out of flow so it sits exactly where it should, rather than wherever the stack leaves it.
   Beats .wx-card>* {position:relative} on specificity. */
.wx-card>.wx-i{position:absolute;left:62%;top:45%;transform:translate(-50%,-50%);
  width:58px;height:58px;margin:0;z-index:1}

/* v47 — active dot: green and breathing, under whichever of them is signed in */
.av-name::after{background:#3FA65C;box-shadow:0 0 0 2px rgba(63,166,92,.2);animation:avLive 2.4s ease-in-out infinite}
@keyframes avLive{
  0%,100%{box-shadow:0 0 0 2px rgba(63,166,92,.2);opacity:1}
  50%{box-shadow:0 0 0 6px rgba(63,166,92,.04);opacity:.75}}
.av-name.av-unknown::after{background:var(--muted);animation:none;box-shadow:none}   /* nobody signed in = not active */
@media (prefers-reduced-motion:reduce){.av-name::after{animation:none}}

/* v47 — journey: smaller leg type, and the row for the leg on screen lifts gently.
   Deliberately quiet — the map is what you're meant to be watching. */
.jl-route{font-size:13px}
.jl-sub{font-size:11px}
.j-leg{padding:9px 12px;gap:11px}
.jl-ic{width:40px;height:40px;border-radius:12px}
.jl-ic .ic3d{width:33px;height:33px}
.j-leg.live{border-color:rgba(176,137,46,.55);background:linear-gradient(90deg,rgba(200,163,76,.14),var(--card) 62%)}
.j-leg.live .jl-route{color:var(--ink)}
.j-leg.live::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;
  border-radius:0 3px 3px 0;background:var(--gold-deep)}
.j-leg{position:relative;overflow:hidden}

/* v48 — "what is it" glyph in the booking rows: flag-sized, quiet, next to the flag */
.mode-ic{width:17px;height:17px;flex:0 0 17px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);opacity:.7}
.mode-ic svg{width:100%;height:100%;stroke-width:1.9}
/* the timeline/next-up corners were deliberately characters-only — keep them that way */
.ev-corner .mode-ic,.tl-corner .mode-ic{display:none}

/* v49 — the account sheet: the greeting card's oatmeal (#EBE0CC), with pink bloomed up
   through it from the bottom-left so it reads infused rather than tinted. Every other
   sheet stays cream — that's the point of difference. */
.sheet.acct{
  background:
    radial-gradient(120% 62% at 6% 104%, rgba(226,142,152,.42), rgba(226,142,152,0) 66%),
    radial-gradient(90% 48% at 96% 96%, rgba(226,142,152,.2), rgba(226,142,152,0) 70%),
    radial-gradient(80% 40% at 50% -8%, rgba(255,253,248,.9), rgba(255,253,248,0) 70%),
    linear-gradient(168deg,#F4EDE0 0%,#EFE5D3 40%,#EBE0CC 100%);
  border-top-color:rgba(226,142,152,.4)}
.sheet.acct .grab{background:rgba(186,118,126,.4)}
.sheet.acct .sh-sub{color:#6B5A5C}

/* ============================================================
   v57 — peekaboo: PEEK only (torso at best, sometimes just the head),
   in from angles. NO CSS variables in keyframes — iPhone Safari doesn't
   resolve them there, which left the characters stuck ducked at the edge.
   Depth comes from fixed keyframe variants; .pk-head picks the shallower one.
   ============================================================ */
@keyframes pkBottom{
  0%{transform:translateY(116%)}13%{transform:translateY(56%)}
  60%{transform:translateY(59%)}100%{transform:translateY(116%)}}
@keyframes pkBottomHead{
  0%{transform:translateY(116%)}13%{transform:translateY(74%)}
  60%{transform:translateY(77%)}100%{transform:translateY(116%)}}
@keyframes pkBottomCheeky{
  0%{transform:translateY(116%) rotate(0)}12%{transform:translateY(56%) rotate(0)}
  24%{transform:translateY(58%) rotate(-6deg)}36%{transform:translateY(56%) rotate(5deg)}
  48%{transform:translateY(58%) rotate(-3deg)}62%{transform:translateY(57%) rotate(0)}
  100%{transform:translateY(116%) rotate(0)}}
@keyframes pkBottomCheekyHead{
  0%{transform:translateY(116%) rotate(0)}12%{transform:translateY(74%) rotate(0)}
  24%{transform:translateY(76%) rotate(-5deg)}36%{transform:translateY(74%) rotate(4deg)}
  48%{transform:translateY(76%) rotate(-2deg)}62%{transform:translateY(75%) rotate(0)}
  100%{transform:translateY(116%) rotate(0)}}
@keyframes pkLeanR{
  0%{transform:translateY(116%) rotate(0)}13%{transform:translateY(56%) rotate(0)}
  36%{transform:translateY(58%) rotate(10deg)}60%{transform:translateY(59%) rotate(10deg)}
  100%{transform:translateY(116%) rotate(0)}}
@keyframes pkLeanL{
  0%{transform:translateY(116%) rotate(0)}13%{transform:translateY(56%) rotate(0)}
  36%{transform:translateY(58%) rotate(-10deg)}60%{transform:translateY(59%) rotate(-10deg)}
  100%{transform:translateY(116%) rotate(0)}}
@keyframes pkRight{
  0%{transform:translate(122%,30%) rotate(0)}15%{transform:translate(8%,54%) rotate(-12deg)}
  62%{transform:translate(4%,52%) rotate(-10deg)}100%{transform:translate(122%,30%) rotate(0)}}
@keyframes pkRightCheeky{
  0%{transform:translate(122%,30%) rotate(0)}14%{transform:translate(8%,54%) rotate(-12deg)}
  30%{transform:translate(4%,52%) rotate(-16deg)}46%{transform:translate(7%,55%) rotate(-8deg)}
  62%{transform:translate(5%,54%) rotate(-12deg)}100%{transform:translate(122%,30%) rotate(0)}}
@keyframes pkRightCheekyHead{
  0%{transform:translate(122%,30%) rotate(0)}14%{transform:translate(8%,70%) rotate(-12deg)}
  30%{transform:translate(4%,68%) rotate(-15deg)}46%{transform:translate(7%,71%) rotate(-9deg)}
  62%{transform:translate(5%,70%) rotate(-12deg)}100%{transform:translate(122%,30%) rotate(0)}}
/* .pk-head = only the head over the edge (same timing, shallower pose) */
.pk-bottom.pk-head{animation-name:pkBottomHead}
.pk-bottom.pk-cheeky.pk-head{animation-name:pkBottomCheekyHead}
.pk-right.pk-cheeky.pk-head{animation-name:pkRightCheekyHead}

/* ============================================================
   v52 — JO'S BUILD: a pink hue breathed in from the LEFT of the oatmeal,
   plus small pops of pink where the app is otherwise gold.
   Neil's build is untouched (no [data-pcwho="neil"] rules on purpose).
   ============================================================ */
html[data-pcwho="jo"] body{
  background:
    radial-gradient(130% 70% at 0% 0%, rgba(226,142,152,.22), rgba(226,142,152,0) 56%),
    linear-gradient(96deg, rgba(226,142,152,.36) 0%, rgba(226,142,152,.22) 22%, rgba(226,142,152,.11) 44%, rgba(226,142,152,.04) 64%, rgba(226,142,152,0) 82%),
    var(--bg);
  background-attachment:fixed}
/* pops: the moments that are "hers" go dusty rose instead of gold */
html[data-pcwho="jo"] .dest-dots i.on{background:#D98A94}
html[data-pcwho="jo"] .jp-fill,
html[data-pcwho="jo"] .progressbar i{background:linear-gradient(90deg,#E8AEB6,#C96F7B)}
html[data-pcwho="jo"] nav.tabs button.active{background:linear-gradient(180deg,rgba(226,142,152,.16),rgba(226,142,152,.08))}
html[data-pcwho="jo"] .fchip.active{background:#C96F7B;border-color:#C96F7B}
html[data-pcwho="jo"] .add-btn{border-color:rgba(217,138,148,.5)}
html[data-pcwho="jo"] .av-name{color:#B4626D}
html[data-pcwho="jo"] .sec .more-link{color:#B4626D}
html[data-pcwho="jo"] .sec .more-link svg,html[data-pcwho="jo"] .sec .more-link .arr{color:#D98A94}
/* ============================================================
   NEIL'S BUILD: a black hood at the top that melts down through
   antique gold into the oatmeal — content-anchored so the darkness
   stays up top (behind the frosted header) and the page below stays
   readable. A whisper of warm-charcoal tints the whole thing "his". */
/* warm ivory instead of bright white, so cards read premium not cheap — and the base pearl a touch deeper */
html[data-pcwho="neil"]{ --card:#F3ECDB; --bg:#E7DEC9; --line:#D9CFB8; }
html[data-pcwho="neil"] body{
  background:
    linear-gradient(180deg, rgba(15,13,18,.96) 0px, rgba(22,18,12,.9) 128px, rgba(46,37,18,.55) 188px, rgba(120,94,32,.16) 230px, rgba(0,0,0,0) 288px) no-repeat,  /* top hood */
    linear-gradient(90deg, rgba(13,11,16,.52) 0%, rgba(22,18,12,.32) 18%, rgba(44,35,18,.15) 42%, rgba(70,55,26,.05) 62%, rgba(0,0,0,0) 80%),                        /* the black feathering in from the whole left */
    radial-gradient(130% 95% at 0% 50%, rgba(13,11,16,.2), rgba(13,11,16,0) 56%),
    var(--bg);
  background-attachment:scroll, fixed, fixed}
/* section headings: light cream on a soft dark chip so they're crisp on the dark hood AND the light lower bg */
html[data-pcwho="neil"] .sec h2,html[data-pcwho="neil"] main h2{color:#FBEFCF;
  background:rgba(24,17,7,.44);padding:2px 12px;border-radius:9px;box-shadow:0 1px 4px rgba(0,0,0,.22);text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* header goes dark smoked glass — darkest right at the top so it melts into the iPhone status bar &
   the Dynamic Island pill (the padding already reaches into env(safe-area-inset-top)); the cream logo pops */
/* Neil's premium banner header — the extracted gold branding on black, with his own + button & NEIL ring */
html[data-pcwho="neil"] header.top{position:relative;justify-content:flex-end;gap:10px;min-height:128px;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  background:#060505 url("images/header-neil.png?a=43") no-repeat left center / auto 106%;
  border-bottom:1px solid rgba(176,137,46,.4);box-shadow:0 8px 26px rgba(4,3,1,.5)}
/* the compass + wordmark IS the home button — an invisible tap target over the left of the banner */
html[data-pcwho="neil"] .hdr-logo{position:absolute;left:0;top:0;bottom:0;width:64%;max-width:none;height:auto;opacity:0;margin:0;mix-blend-mode:normal;z-index:2}
/* Neil's gold + button */
html[data-pcwho="neil"] .add-btn{width:48px;height:48px;background:url("images/hdr-plus.png?a=36") center/contain no-repeat;border:none;box-shadow:none}
html[data-pcwho="neil"] .add-btn svg{display:none}
/* NEIL avatar framed by the gold ring, gold name, pulsing green "live" dot */
html[data-pcwho="neil"] .head-avatar .av-circle{width:54px;height:54px;background:radial-gradient(circle at 50% 50%,#fff 0 60%,rgba(255,255,255,0) 61%),url("images/hdr-ring.png?a=36") center/contain no-repeat;border:none;box-shadow:none;overflow:visible;display:flex;align-items:center;justify-content:center}
html[data-pcwho="neil"] .head-avatar .av-circle img,html[data-pcwho="neil"] .head-avatar .av-circle video{width:74%;height:74%;border-radius:50%;object-fit:cover;background:#fff}
html[data-pcwho="neil"] .av-name{color:#E7C56B;text-shadow:0 1px 6px rgba(0,0,0,.4);letter-spacing:.12em;margin-top:1px}
html[data-pcwho="neil"] .av-name::after{display:none}   /* Neil uses the .av-live dot instead — kill the duplicate */
html[data-pcwho="neil"] .av-live{display:block;width:8px;height:8px;border-radius:50%;background:#3AD17A;margin:2px auto 0;box-shadow:0 0 0 2px rgba(58,209,122,.22);animation:avLive 2s ease-in-out infinite}
@keyframes avLive{0%,100%{opacity:.45}50%{opacity:1}}
/* the search bar sits on the black hood — keep its field bright & the icon gold so it pops up there */
html[data-pcwho="neil"] .searchbar input{background:#fff}
html[data-pcwho="neil"] .searchbar .s-ic{color:var(--muted)}
/* Neil: the costs legend + month label washed out on the warm gradient — darken, embolden, lift */
html[data-pcwho="neil"] .cost-legend{color:#403929;font-weight:600}
html[data-pcwho="neil"] .sw-month{color:#6E5316;opacity:1;font-weight:800;text-shadow:0 1px 1px rgba(255,251,242,.5)}
/* attachment picker button (both builds) */
.att-btn{display:flex;align-items:center;gap:8px;width:100%;padding:11px 13px;border:1.5px dashed var(--line);
  border-radius:13px;background:var(--bg);color:var(--ink-soft);font-size:13.5px;font-weight:700;cursor:pointer;text-align:left}
.att-btn:active{transform:scale(.985)}
.att-btn svg{width:17px;height:17px;color:var(--gold-deep);flex:0 0 auto}
html[data-pcwho="jo"] .att-btn svg{color:#B4626D}

/* v54 — Queen Jo: the Royal Court event (and all of 23 Aug) crowns the chick */
.pax-dot.queen{background-image:url("images/characters/chick-queen.png");background-size:150%;background-position:50% 12%}
.ev-ic .ic-char,.sw-ic .ic-char,.bk-ic .ic-char,.alert-ic .ic-char{object-fit:contain;padding:4px}
.av-circle img.q{object-position:center 8%}

/* ============================================================
   v58 — WELCOME BACK splash, built to Neil's mockup.
   #F6EEE4 is sampled from the mockup itself, so the crest's own
   background melts into the page with no seam.
   ============================================================ */
#pc-lock.pc-splash{display:block;padding:0;background:#F6EEE4;-webkit-backdrop-filter:none;backdrop-filter:none;
  overflow-y:auto;transition:opacity .4s ease}
#pc-lock.pc-splash.gone{opacity:0;pointer-events:none}
.pc-splash .pcs-top{padding:max(26px,env(safe-area-inset-top)) 20px 0;text-align:center}
.pc-splash .pcs-crest{width:min(78%,330px);height:auto;display:block;margin:0 auto}
.pc-splash .pcs-line{width:min(84%,340px);height:auto;display:block;margin:14px auto 0}
/* hero photo — full bleed, its own sky already fades to cream at the top */
.pc-splash .pcs-hero{position:relative;margin-top:10px;line-height:0}
.pc-splash .pcs-hero img{width:100%;height:auto;display:block}
.pc-splash .pcs-fade{position:absolute;left:0;right:0;top:0;height:22%;
  background:linear-gradient(#F6EEE4,rgba(246,238,228,0))}
.pc-splash .pcs-foot{padding:26px 24px max(30px,env(safe-area-inset-bottom));text-align:center}
.pc-splash .pcs-eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.pc-splash .pcs-head{font-family:var(--script,Georgia,serif);font-size:27px;font-weight:700;color:var(--ink);
  margin-top:7px;letter-spacing:.01em;line-height:1.2}
/* the Face ID badge — pulses while it waits */
.pc-splash .pcs-badge{position:relative;width:112px;height:112px;margin:26px auto 0;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;border-radius:50%;perspective:520px;-webkit-tap-highlight-color:transparent}
.pc-splash .pcs-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(176,137,46,.55);
  background:rgba(255,253,248,.5);animation:pcsPulse 2.4s ease-in-out infinite}
@keyframes pcsPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(176,137,46,.26);transform:scale(1)}
  50%{box-shadow:0 0 0 15px rgba(176,137,46,0);transform:scale(1.045)}}
.pc-splash .pcs-fid{width:46px;height:46px;position:relative;transition:opacity .2s}
.pc-splash .pcs-badge.busy .pcs-ring{animation-duration:.85s}
/* the coin — hidden until Face ID says yes, then it flips: pig, chick, pig, chick… */
.pc-splash .pcs-coin{position:absolute;inset:6px;border-radius:50%;opacity:0;pointer-events:none;
  transform-style:preserve-3d}
.pc-splash .pcs-coin-in{position:absolute;inset:0;transform-style:preserve-3d}
.pc-splash .pcs-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:#FBF3E2;background-repeat:no-repeat;border:2px solid #fff;
  box-shadow:0 6px 20px rgba(70,58,32,.22),inset 0 0 0 1.5px rgba(176,137,46,.5)}
.pc-splash .pcs-pig{background-image:url("images/characters/pig-peek.png");background-size:135%;background-position:50% 14%}
.pc-splash .pcs-chick{background-image:url("images/characters/chick-peek.png");background-size:142%;background-position:50% 12%;
  transform:rotateY(180deg)}
.pc-splash .pcs-badge.spin .pcs-ring,.pc-splash .pcs-badge.spin .pcs-fid{opacity:0;animation:none;transition:opacity .18s}
.pc-splash .pcs-badge.spin .pcs-coin{opacity:1;animation:pcsCoinPop .3s ease-out both}
.pc-splash .pcs-badge.spin .pcs-coin-in{animation:pcsFlip 1.7s cubic-bezier(.3,0,.2,1) both}
@keyframes pcsCoinPop{from{transform:scale(.72)}to{transform:scale(1)}}
@keyframes pcsFlip{                                  /* 5 turns = pig·chick·pig·chick·pig, landing face-on */
  from{transform:rotateY(0)} to{transform:rotateY(1800deg)}}
.pc-splash .pcs-msg{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:16px;min-height:20px}
.pc-splash .pcs-or{display:flex;align-items:center;gap:14px;margin:22px auto 0;max-width:300px;
  color:var(--gold-deep);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.pc-splash .pcs-or::before,.pc-splash .pcs-or::after{content:"";flex:1;height:1px;background:rgba(176,137,46,.45)}
.pc-splash .pcs-pass{margin-top:16px;background:none;border:0;color:var(--ink-soft);font-size:14px;font-weight:600;
  cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,137,46,.5)}
@media (prefers-reduced-motion:reduce){
  .pc-splash .pcs-ring{animation:none}
  .pc-splash .pcs-badge.spin .pcs-coin-in{animation-duration:.6s}}
/* tall screens: let the hero breathe rather than stranding the button */
@media (min-height:860px){.pc-splash .pcs-foot{padding-top:34px}}

/* v58 — Jo's greeting card: the oatmeal→cream hand-off was a hard edge in her build.
   Pink is bled through the middle so the panel and the photo meet in her colour, not a seam.
   Neil's greeting is untouched. */
html[data-pcwho="jo"] .greet{
  background:linear-gradient(94deg,#EFDCD8 0%,#EEDDD6 22%,#EFE3D4 44%,#F3EDE0 60%)}
html[data-pcwho="jo"] .greet-photo::before{
  background:linear-gradient(90deg,#EFDCD8 0%,rgba(240,224,219,.88) 20%,rgba(247,238,232,.42) 44%,rgba(255,255,255,0) 68%)}
html[data-pcwho="jo"] .greet .gm-eyebrow{color:#CB829A}
/* v58.1 — a splash must never scroll: hold it to one screen and let the pieces flex */
/* v89 — slimmer Face-ID entrance: the hero photo is capped so it no longer eats the screen;
   crest a touch smaller; content stacks from the top so the unlock sits comfortably in view */
#pc-lock.pc-splash{display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;height:100dvh}
.pc-splash .pcs-top{padding-top:max(18px,env(safe-area-inset-top));flex:0 0 auto}
.pc-splash .pcs-crest{width:min(56%,230px)}
.pc-splash .pcs-line{margin-top:6px;width:min(66%,270px)}
.pc-splash .pcs-hero{flex:0 0 auto;max-height:30vh;min-height:0;margin-top:8px;border-radius:20px;overflow:hidden}
.pc-splash .pcs-hero img{width:100%;height:100%;max-height:30vh;object-fit:cover;object-position:center 42%}
.pc-splash .pcs-foot{flex:0 0 auto;padding-top:16px}
.pc-splash .pcs-head{font-size:25px}
.pc-splash .pcs-badge{margin-top:20px;width:104px;height:104px}
.pc-splash .pcs-msg{margin-top:13px}
.pc-splash .pcs-or{margin-top:17px}
.pc-splash .pcs-pass{margin-top:11px}
@media (max-height:740px){
  .pc-splash .pcs-crest{width:min(60%,250px)}
  .pc-splash .pcs-line{display:none}
  .pc-splash .pcs-head{font-size:22px}
  .pc-splash .pcs-badge{width:92px;height:92px;margin-top:15px}
  .pc-splash .pcs-foot{padding-top:15px}}

/* v59 — Royal Court day: Queen Jo's carriage fills the here-now tile.
   The art already fades to blank on its left, so this wash only needs to
   carry the text — not manufacture the fade. */
.cdh-scene.cdh-royal{background-position:right center;background-size:cover;animation:none;transform:none}
.cdh-wash-royal{background:linear-gradient(96deg,rgba(251,246,236,.82) 0%,rgba(251,246,236,.5) 28%,rgba(251,246,236,.1) 46%,rgba(251,246,236,0) 62%)}
.cd-royal .cdh-place{color:#6B4A86}            /* her purple, not the house navy */
.cd-royal .cd-label{color:#8A5FA8}
.cd-royal .progressbar i{background:linear-gradient(90deg,#B490D0,#6B4A86)}
.cd-royal .cd-itin{color:#6B4A86;border-color:rgba(107,74,134,.45);background:rgba(255,253,248,.8)}

/* ============================================================
   v60 — the coin spin BECOMES the identity picker.
   Face ID → coin (pig·chick ×5) → the coin splits into two discs,
   tap Neil (pig) or Jo (chick) to sign in as that person.
   ============================================================ */
.pc-splash .pcs-stage{position:relative;display:grid;place-items:center;min-height:112px;width:100%}
/* coin retires when it splits */
.pc-splash .pcs-badge.split{opacity:0;transform:scale(.55);pointer-events:none;
  transition:opacity .32s ease,transform .42s cubic-bezier(.4,0,.6,1)}
/* the two choices, overlapping at the coin's centre until they peel apart */
.pc-splash .pcs-pick{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:40px;pointer-events:none}
.pc-splash .pcs-pick[hidden]{display:none}
.pc-splash .pcs-choice{display:flex;flex-direction:column;align-items:center;gap:9px;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;
  transform:translateX(var(--from,0)) scale(.7);
  transition:opacity .38s ease,transform .5s cubic-bezier(.3,1.35,.4,1)}
.pc-splash .pcs-choice[data-who="Neil"]{--from:56px}   /* born at centre, settles LEFT */
.pc-splash .pcs-choice[data-who="Jo"]{--from:-56px}    /* born at centre, settles RIGHT */
.pc-splash .pcs-pick.on{pointer-events:auto}
.pc-splash .pcs-pick.on .pcs-choice{opacity:1;transform:translateX(0) scale(1)}
.pc-splash .pcs-choice:active{transform:translateX(0) scale(.94)}
.pc-splash .pcs-disc{width:74px;height:74px;border-radius:50%;background-color:#FBF3E2;background-repeat:no-repeat;
  border:2px solid #fff;box-shadow:0 7px 22px rgba(70,58,32,.24),inset 0 0 0 1.5px rgba(176,137,46,.5)}
/* reuse the coin-face art, but discs face forward (undo the coin backface flip on the chick) */
.pc-splash .pcs-disc.pcs-chick{transform:none}
.pc-splash .pcs-choice em{font-style:normal;font-family:var(--script,Georgia,serif);font-size:19px;font-weight:700;
  letter-spacing:.08em;color:var(--ink)}
/* pick one → it settles, the other bows out */
.pc-splash .pcs-pick.locked{pointer-events:none}
.pc-splash .pcs-pick.locked .pcs-choice:not(.chosen){opacity:.28;transform:scale(.82)}
.pc-splash .pcs-choice.chosen .pcs-disc{animation:pcsChosen .55s ease both;
  box-shadow:0 8px 26px rgba(176,137,46,.4),inset 0 0 0 2px var(--gold,#C8A34C)}
@keyframes pcsChosen{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1.07)}}
html[data-pcwho] .pc-splash .pcs-choice[data-who="Jo"].chosen em{color:#B4626D}
@media (max-height:740px){.pc-splash .pcs-disc{width:64px;height:64px}.pc-splash .pcs-choice em{font-size:17px}}
@media (prefers-reduced-motion:reduce){.pc-splash .pcs-choice{transition-duration:.25s}}

/* ============================================================
   v61 — greeting card: NO seam. The old build had two colour systems meeting
   at the photo's edge (the panel's gradient vs the overlay's), and any mismatch
   there prints a vertical line. Now the panel is ONE flat colour, the photo takes
   more of the card, and a single long feather dissolves that exact colour to
   clear — hue under the text only, then photo.
   ============================================================ */
.greet{background:#EBE0CC}
.greet-photo{flex:0 0 58%}
.greet-photo::before{background:linear-gradient(90deg,
  #EBE0CC 0%, #EBE0CC 8%, rgba(235,224,204,.78) 26%, rgba(235,224,204,.4) 45%, rgba(235,224,204,.12) 60%, rgba(235,224,204,0) 74%)}
/* Jo: same single-feather build, in her pink */
html[data-pcwho="jo"] .greet{background:#EFDCD8}
html[data-pcwho="jo"] .greet-photo::before{background:linear-gradient(90deg,
  #EFDCD8 0%, #EFDCD8 8%, rgba(239,220,216,.78) 26%, rgba(239,220,216,.4) 45%, rgba(239,220,216,.12) 60%, rgba(239,220,216,0) 74%)}

/* ============================================================
   v62 — JO'S SEA: the journey map's parchment becomes water on her build —
   pink at the top (meeting her app wash, so the page flows INTO the map)
   deepening to soft Aegean blue. Island artwork untouched; CSS fill beats
   the SVG's presentation attributes, so Neil's parchment stays the default.
   ============================================================ */
html[data-pcwho="jo"] #j-scene .j-sea{fill:url(#jSeaJo)}
html[data-pcwho="jo"] #j-scene .j-sea2{opacity:0}
html[data-pcwho="jo"] #j-scene .j-grid{stroke:#B9CFDA;opacity:.3}
html[data-pcwho="jo"] #j-scene .j-waves{stroke:#9FC2D1;opacity:.55}
html[data-pcwho="jo"] .j-lbl{stroke:#F4EAEA}
html[data-pcwho="jo"] .j-wrap{background:linear-gradient(170deg,#F2DEE1,#C9DDE9);
  border-color:rgba(217,138,148,.35);box-shadow:0 10px 30px rgba(160,120,140,.18)}

/* ============================================================
   v63 — SETTLE UP: pay buttons under the balance, Apple-Pay-ish steppers
   ============================================================ */
.settle-card{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.pay-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 10px;
  border:1.5px solid rgba(176,137,46,.4);border-radius:16px;background:var(--card);cursor:pointer;
  font-size:13.5px;color:var(--ink);box-shadow:var(--shadow)}
.pay-btn b{font-weight:800}
.pay-btn:active{transform:scale(.97)}
.pay-btn .pax-dot{width:26px;height:26px;margin:0}
.settle-log{flex-basis:100%;font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:2px}
.settle-clear{color:var(--gold-deep);font-weight:700;cursor:pointer;margin-left:6px;text-decoration:underline;text-underline-offset:2px}
.pay-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pay-row .ev-ic.sm{width:40px;height:40px;border-radius:12px;flex:0 0 40px}
.pay-row .ev-ic.sm .ic3d{width:32px;height:32px}
.pay-mid{flex:1;min-width:0}
.pay-mid b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-mid span{font-size:11px;color:var(--muted)}
.pay-tick input{width:20px;height:20px;accent-color:var(--gold-deep)}
.stp{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.stp button{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(176,137,46,.45);background:var(--bg);
  color:var(--gold-deep);font-size:17px;font-weight:800;cursor:pointer;line-height:1;display:grid;place-items:center}
.stp button:active{transform:scale(.9);background:rgba(200,163,76,.15)}
.stp .s-amt{font-size:13px;min-width:64px;text-align:center}
.pay-row.done{opacity:.62;border-bottom-style:solid}
.pay-done-tick{width:26px;height:26px;border-radius:50%;background:#3FA65C;color:#fff;display:grid;place-items:center;
  font-size:13px;flex:0 0 26px}
.settle-done-lbl{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.pay-foot{position:sticky;bottom:-24px;background:linear-gradient(180deg,rgba(255,253,248,0),#FFFDF8 26%);
  padding:14px 0 4px;margin-top:8px}
.pay-total{display:flex;justify-content:space-between;font-size:14px;margin-bottom:9px}
.pay-total b{font-size:17px}
/* Jo's build: her pay button pops pink */
html[data-pcwho="jo"] .pay-btn[data-who="Jo"]{border-color:rgba(217,138,148,.55);background:linear-gradient(180deg,#FDF7F6,#F9ECEC)}

/* v64 — Neil's sea goes blue too: oatmeal at the top (meeting his cream page, same
   trick as Jo's pink) deepening to Aegean blue. Jo's pink-topped water still wins on
   her build via the [data-pcwho="jo"] rules above. Islands untouched. */
#j-scene .j-sea{fill:url(#jSeaNeil)}
#j-scene .j-sea2{opacity:0}
#j-scene .j-grid{stroke:#B9CFDA;opacity:.3}
#j-scene .j-waves{stroke:#9FC2D1;opacity:.55}
.j-wrap{background:linear-gradient(170deg,#F0EADC,#C9DDE9)}

/* v65 — who-paid-what expense capture */
.pay-btn.xp-add{flex-basis:100%;justify-content:center;border-style:dashed;background:var(--bg)}
.pay-btn.xp-add span:first-child{font-size:19px;color:var(--gold-deep);font-weight:800}
.xp-who{display:flex;gap:10px;margin-bottom:12px}
.xp-who .whosh-btn{flex-direction:row;gap:9px;padding:10px;font-size:14px;letter-spacing:.04em}
.xp-who .whosh-btn img{width:38px;height:38px}
.xp-conv{font-size:12.5px;color:var(--gold-deep);font-weight:700;min-height:18px;margin:-4px 0 8px;text-align:right}
.xp-split{display:flex;gap:9px;margin:2px 0 12px}
.xp-split-btn{flex:1;padding:10px;border-radius:13px;border:1.5px solid var(--line);background:var(--bg);
  font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.xp-split-btn.on{border-color:var(--gold);background:rgba(200,163,76,.12);color:var(--ink)}

/* ============================================================
   v66 — THE EXPENSE COIN. A minted gold P&C coin lives on the Costs page;
   tap it when someone pays: it jumps, grows, spins over and lands on its
   BACK — and the back of the coin is the who-paid-what form.
   ============================================================ */
.xp-mint{flex-basis:100%;text-align:center;padding:12px 0 6px;order:-1}   /* up top, above the pay buttons */
.xp-coin{width:142px;height:142px;border:0;background:none;padding:0;margin:0 auto;display:block;
  perspective:560px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xp-coin-in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;
  animation:xpIdle 3.4s ease-in-out infinite}
/* one clean cast shadow on the ground — no soft all-around halo (that read as a fake 3D glow) */
.xp-coin::after{content:"";position:absolute;left:50%;bottom:-16px;width:76%;height:20px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(48,34,10,.55),rgba(48,34,10,0) 70%);
  filter:blur(2.5px);
  animation:xpShadow 3.4s ease-in-out infinite;pointer-events:none}
@keyframes xpShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.92}50%{transform:translateX(-50%) scale(.8);opacity:.6}}
@keyframes xpIdle{0%,100%{transform:translateY(0) rotateY(-8deg)}50%{transform:translateY(-3px) rotateY(8deg)}}
.xp-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:grid;place-items:center;background-size:cover;background-position:center}

.xp-front i{font-size:23px;letter-spacing:.01em}
.xp-back{transform:rotateY(180deg)}
.xp-back i{font-size:32px}
.xp-coin.go .xp-coin-in{animation:xpFlip .72s cubic-bezier(.32,.08,.24,1) forwards}
@keyframes xpFlip{
  0%{transform:translateY(0) scale(1) rotateY(0)}
  55%{transform:translateY(-18px) scale(1.32) rotateY(560deg)}
  100%{transform:translateY(-6px) scale(1.2) rotateY(900deg)}}   /* 2.5 turns — lands on the BACK */
/* the Add-an-expense pill under the coin — a gold-framed button */
.xp-add-pill{margin:14px auto 0;display:inline-flex;align-items:center;gap:11px;padding:10px 22px;border-radius:26px;
  background:linear-gradient(180deg,#FFFDF8,#F7EFDD);border:1.5px solid var(--gold);cursor:pointer;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  box-shadow:0 4px 14px rgba(176,137,46,.2),inset 0 1px 0 rgba(255,255,255,.7)}
.xp-add-pill:active{transform:scale(.97)}
.xp-add-pill .xp-spk{font-size:11px;color:var(--gold);font-style:normal}
.xp-add-pill .xp-add-plus{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--gold-deep);font-size:13px;line-height:1;font-weight:400;padding-bottom:1px}
/* the sheet header carries the coin's back, still settling from the spin */
.xp-hcoin{position:relative;width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  background-size:cover;background-position:center;box-shadow:0 4px 10px rgba(70,58,32,.3);
  animation:xpSettle .5s ease-out both}
.xp-hcoin i{font-style:normal;font-weight:700;font-family:var(--script);font-size:24px;color:#6B4F12}
@keyframes xpSettle{from{transform:rotateY(140deg) scale(.86)}to{transform:rotateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .xp-coin-in{animation:none}.xp-hcoin{animation:none}}

/* ============================================================
   v67 — JO'S BOUGAINVILLEA. Her real vine drapes the top-left corner,
   over the header like the mockup, and the page glows a warmer pink
   from exactly where the flowers sit — as if they're giving it off.
   Taps pass straight through. Neil's build: none of this.
   ============================================================ */
/* z-index 55 keeps the spray ABOVE the sticky header (z50) so it trails over the
   top-left corner the way it did before v73 bumped the header up. pointer-events:none
   means it never blocks the logo/＋/avatar taps underneath. */
html[data-pcwho="jo"] body::before{content:"";position:fixed;top:-8px;left:-12px;z-index:55;
  width:min(86vw,540px);aspect-ratio:1100/669;pointer-events:none;
  background:url("images/bougainvillea.png?v=76") no-repeat top left/contain;
  filter:drop-shadow(0 3px 9px rgba(140,40,80,.18))}
html[data-pcwho="jo"] body{background:
  radial-gradient(115% 54% at 10% 0%, rgba(232,120,148,.30), rgba(232,120,148,.14) 36%, rgba(232,120,148,0) 64%),
  linear-gradient(120deg, rgba(226,142,152,.14) 0%, rgba(226,142,152,.06) 44%, rgba(226,142,152,.02) 78%),
  var(--bg);
  background-attachment:fixed}
/* v74 — desktop: bougainvillea trails the WHOLE top, not just one corner.
   Left spray widens + a mirrored right spray drapes from the far corner; both fade
   softly toward the middle so nothing cuts off abruptly (the old capped 540px looked
   very mobile-only). Taps still pass straight through. */
@media (min-width:900px){
  html[data-pcwho="jo"] body::before{
    width:min(46vw,660px);
    -webkit-mask-image:linear-gradient(100deg,#000 52%,rgba(0,0,0,0) 90%);
            mask-image:linear-gradient(100deg,#000 52%,rgba(0,0,0,0) 90%)}
  html[data-pcwho="jo"] body::after{content:"";position:fixed;top:-8px;right:-14px;z-index:55;
    width:min(42vw,600px);aspect-ratio:1100/669;pointer-events:none;
    background:url("images/bougainvillea.png?v=76") no-repeat top left/contain;
    transform:scaleX(-1);
    -webkit-mask-image:linear-gradient(100deg,#000 50%,rgba(0,0,0,0) 88%);
            mask-image:linear-gradient(100deg,#000 50%,rgba(0,0,0,0) 88%);
    filter:drop-shadow(0 3px 9px rgba(140,40,80,.18))}
}

/* Neil's gold bougainvillea was removed by request — his header carries the branding instead.
   (Body background stays the plain dark hood + left feather defined earlier.) */

/* ============================================================
   v71 — Costs page declutter. The coin is its own hero (balance → coin →
   totals). Pay-now buttons drop into the Paid/Still-to-pay row as matching
   tiles. The Neil/Jo/Combined filter moves down to just above the list.
   ============================================================ */
.xp-hero{text-align:center;padding:6px 0 14px;margin-bottom:2px}
.settle-log{text-align:center;font-size:12px;color:var(--ink-soft);margin:-4px 0 12px}
/* the two pay tiles sit in the paystat grid, same size as Paid / Still-to-pay */
.paystat .ps.pay{display:block;text-align:left;border:1.5px solid rgba(176,137,46,.4);background:var(--card);
  cursor:pointer;box-shadow:var(--shadow);color:var(--ink);font:inherit}
.paystat .ps.pay:active{transform:scale(.97)}
.paystat .ps.pay .l{display:flex;align-items:center;gap:7px;color:var(--ink-soft);text-transform:none;letter-spacing:.01em;font-size:13px}
.paystat .ps.pay .l .pax-dot{width:24px;height:24px;margin:0}
.paystat .ps.pay .v{font-size:16px;color:var(--gold-deep)}
html[data-pcwho="jo"] .paystat .ps.pay[data-who="Jo"]{border-color:rgba(217,138,148,.55);background:linear-gradient(180deg,#FDF7F6,#F9ECEC)}
html[data-pcwho="jo"] .paystat .ps.pay[data-who="Jo"] .v{color:#B4626D}

/* ============================================================
   v72 — Jo's handwritten "beautiful" stamp on the greeting; auto-location hint;
   treats keepsake view.
   ============================================================ */
/* the little script endearment — Jo's build only, angled like it was penned on */
.gm-stamp{display:none}
/* real calligraphy: Snell Roundhand / Zapfino ship on iOS & Mac — true flowing script.
   v78 — big & bold like the mock: sits up on the eyebrow line, penned on with a slanted
   edge that follows the letters (b-e-a-u-t-i-f-u-l), on a soft white halo so it pops off the photo. */
html[data-pcwho="jo"] .gm-stamp{display:inline-block;position:relative;
  font-family:"Snell Roundhand","Zapfino","Segoe Script","Brush Script MT",cursive;
  /* v107 — bigger & bolder so "beautiful" pops off the photo */
  font-style:italic;font-weight:500;text-transform:none;letter-spacing:.01em;font-size:22px;line-height:1;
  color:#D17A9A;-webkit-text-stroke:0 transparent;transform:rotate(-12deg);margin-left:6px;vertical-align:baseline;top:-10px;
  /* light cream halo so the pink script stays legible over the bougainvillea photo */
  text-shadow:0 0 2px rgba(255,252,247,.95),0 0 7px rgba(255,251,245,.9),0 1px 3px rgba(120,45,70,.3)}
/* the "little bit of a white hue" behind the script — a soft blurred glow so it lifts off the photo */
html[data-pcwho="jo"] .gm-stamp::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-16%;right:-16%;top:2%;bottom:2%;
  background:radial-gradient(62% 72% at 50% 52%,rgba(255,255,255,.94),rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 80%);
  filter:blur(4px)}
/* v78 — "beautiful" is drawn live like a snake following the strokes: a slanted pen edge sweeps
   left→right (~3.5s), then the whole word HOLDS ~15s, then it writes again. A glowing pink nib rides
   the ink edge. Literal keyframe values (no var() inside keyframes — iOS Safari won't resolve those). */
html[data-pcwho="jo"] .gm-write{display:inline-block;position:relative;z-index:1;line-height:1;   /* line-height:1 (NOT the stamp's 0) so the clip box has height — without it the reveal clips to a zero-height box and "beautiful" vanishes */
  clip-path:polygon(-10% -35%, 124% -35%, 110% 135%, -10% 135%);   /* fail-safe = REVEALED; the animation drives the write from hidden */
  animation:gmWrite 18.5s ease-in-out infinite}   /* ~3.5s to pen it, holds ~15s, writes again */
html[data-pcwho="jo"] .gm-nib{position:absolute;left:0;top:50%;z-index:2;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#FF9FB8,#D3557A 62%,rgba(211,85,122,0) 100%);
  box-shadow:0 0 6px 2px rgba(211,85,122,.55);opacity:0;pointer-events:none;
  transform:translate(-50%,-50%);animation:gmNib 18.5s ease-in-out infinite}
@keyframes gmWrite{
  0%{clip-path:polygon(-10% -35%, -2% -35%, -14% 135%, -10% 135%)}     /* hidden at the far left */
  19%{clip-path:polygon(-10% -35%, 124% -35%, 110% 135%, -10% 135%)}   /* penned across by ~3.5s */
  97%{clip-path:polygon(-10% -35%, 124% -35%, 110% 135%, -10% 135%)}   /* holds fully written ~15s */
  100%{clip-path:polygon(-10% -35%, -2% -35%, -14% 135%, -10% 135%)}}  /* reset, then writes again */
@keyframes gmNib{
  0%{left:3%;opacity:0}
  2%{opacity:1}
  17%{left:99%;opacity:1}
  20%{left:99%;opacity:0}
  100%{left:99%;opacity:0}}
@media(prefers-reduced-motion:reduce){
  html[data-pcwho="jo"] .gm-write{clip-path:none;animation:none;opacity:1}
  html[data-pcwho="jo"] .gm-nib{display:none}}
/* subtle location hint under the Where dropdown */
.geo-hint{display:block;font-size:11px;color:var(--gold-deep);font-weight:700;margin-top:5px;min-height:14px}
/* v74 — 🎁 Treats keepsake card that flips in on tap, then a tap-to-open list */
.treat-flip{perspective:1400px;margin:2px 0 14px}
.treat-card{transform-origin:top center;backface-visibility:hidden;
  animation:treatFlipIn .72s cubic-bezier(.34,1.3,.42,1) both;
  background:linear-gradient(157deg,#FBF3DE,#F6E7C6);border:1px solid rgba(176,137,46,.28);
  border-radius:20px;padding:16px 15px 8px;box-shadow:0 14px 34px -18px rgba(140,90,20,.5),inset 0 1px 0 rgba(255,255,255,.6)}
@keyframes treatFlipIn{
  0%{transform:rotateX(-92deg) translateY(-8px);opacity:0}
  55%{opacity:1}
  100%{transform:rotateX(0) translateY(0);opacity:1}}
.treat-head{display:flex;align-items:center;gap:12px;padding:2px 2px 12px}
.treat-head .th-emoji{font-size:30px;line-height:1;filter:drop-shadow(0 3px 5px rgba(160,100,20,.3));animation:treatBob 3.4s ease-in-out infinite}
@keyframes treatBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
.treat-head .th-ttl{font-family:var(--serif,"Playfair Display",serif);font-size:19px;font-weight:800;color:#6E4A12;letter-spacing:.2px}
.treat-head .th-sub{font-size:12px;color:#9A7530;font-weight:600;margin-top:1px}
.treat-tally{display:flex;gap:9px;margin:0 0 6px}
.treat-tally .tt-cell{flex:1;background:rgba(255,255,255,.5);border:1px solid rgba(176,137,46,.18);border-radius:13px;
  padding:9px 11px;font-size:12px;color:#7A5A18;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.treat-tally .tt-cell b{color:#5E3F0E;font-size:14px}
.treat-tally .tt-cell .tt-n{flex-basis:100%;font-size:10.5px;color:#A98842;font-weight:600}
.treat-tally .pax-dot{width:9px;height:9px;flex:0 0 9px}
/* v75 — who-treats-more donut: BLUE = pig/Neil, PINK = chick/Jo */
.treat-donut{display:flex;align-items:center;gap:16px;margin:2px 0 8px;padding:10px 12px;
  background:rgba(255,255,255,.5);border:1px solid rgba(176,137,46,.18);border-radius:15px}
.treat-donut .td-svg{flex:0 0 auto}
.treat-donut .td-svg circle{stroke-width:15;transition:stroke-dasharray .5s ease}
.treat-donut .td-legend{flex:1;min-width:0}
.treat-donut .td-row{display:flex;align-items:center;gap:7px;font-size:13px;color:#7A5A18;font-weight:600;margin-bottom:4px}
.treat-donut .td-row b{color:#5E3F0E;font-size:14px}
.treat-donut .td-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%}
.treat-donut .td-n{margin-left:auto;font-size:10.5px;color:#A98842;font-weight:600}
.treat-donut .td-lead{margin-top:5px;font-size:12px;font-weight:800;color:#8A6A24}
.treat-list{display:flex;flex-direction:column;gap:7px;padding:8px 0 8px}
.treat-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.62);border:1px solid rgba(176,137,46,.16);border-radius:14px;padding:9px 11px;
  animation:treatRowIn .5s ease both;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.treat-item:active{transform:scale(.98)}
@media(hover:hover){.treat-item:hover{background:#fff;box-shadow:0 8px 20px -12px rgba(140,90,20,.5);transform:translateY(-1px)}}
@keyframes treatRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* v87 — the pig/chick on a treat row is 3× bigger and cropped-out (no oatmeal square) */
.treat-item .ti-ic{width:64px;height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:center;background:none!important}
.treat-item .ti-ic svg,.treat-item .ti-ic img{width:64px;height:64px;object-fit:contain}
.treat-item .ti-body{flex:1;min-width:0}
.treat-item .ti-name{display:block;font-weight:800;font-size:14.5px;color:#4A3208;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.treat-item .ti-meta{display:block;font-size:11.5px;color:#9A7530;font-weight:600;margin-top:1px}
.treat-item .ti-amt{font-weight:800;font-size:14px;color:#6E4A12}
.treat-item .ti-go{color:#C4A45A;font-size:20px;font-weight:700;line-height:1;margin-left:2px}
.treat-empty{text-align:center;padding:22px 14px 26px;color:#8A6A24;font-weight:800;font-size:16px;display:flex;flex-direction:column;gap:7px;align-items:center}
.treat-empty span{font-weight:600;font-size:12.5px;color:#A98842;max-width:250px;line-height:1.5}

/* v73 — cost legend: says plainly what green vs grey means */
.cost-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 2px 12px;font-size:11px;color:var(--ink-soft)}
.cost-legend span{display:flex;align-items:center;gap:6px}
.cost-legend i{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.cost-legend .lg-pos{background:var(--teal)}
.cost-legend .lg-mut{background:var(--muted)}

/* ============ v176 — the Costs tab, rebuilt to the mock: framed hero + PAID/REMAINING cells,
   the two-of-them settle card, white filter bar, stacked legend ============ */
.cost-hero{position:relative;background:#FFFDF8;border-radius:28px;padding:22px 16px 16px;
  border:2px solid rgba(224,150,164,.5);box-shadow:0 10px 26px rgba(150,90,110,.12)}
.cost-hero::before{content:"";position:absolute;inset:7px;border:1.5px solid rgba(200,163,76,.55);border-radius:21px;pointer-events:none}
.cost-hero .lbl{color:#B4536A;font-weight:800;letter-spacing:.16em;font-size:12px;position:relative}
.cost-hero .amt{font-size:41px;font-weight:700;letter-spacing:-.015em;position:relative}
.ch-cells{position:relative;display:flex;border:1.5px solid rgba(200,163,76,.4);border-radius:18px;margin:12px 6px 4px;padding:14px 4px}
.ch-cell{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:0 5px}
.ch-cell+.ch-cell{border-left:1px solid var(--line)}
.ch-ic{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid}
.ch-ic svg{width:18px;height:18px}
.cpaid .ch-ic{color:#3E8E68;border-color:#7DBB98;background:#F1F8F3}
.crem .ch-ic{color:#B0892E;border-color:#D6B45E;background:#FBF6E8}
.ch-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.ch-tx i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cpaid .ch-tx i{color:#3E8E68}.crem .ch-tx i{color:#B0892E}
.ch-tx b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* one white card, two tinted halves — chick pays / pig is owed */
/* a polished gold frame around the settle card */
.paystat{display:flex;gap:0;border-radius:24px;overflow:hidden;margin-bottom:14px;background:#fff;
  box-shadow:0 0 0 2px #E8CC7E,0 0 0 3.5px #B98F32,var(--shadow)}
.paystat .ps.pay{flex:1;border:0;border-radius:0;box-shadow:none;min-height:0;
  flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px 10px 15px}
.paystat .ps.pay .l{flex-direction:column;gap:7px;font-size:15px;font-weight:600;color:var(--ink)}
.ps-av{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#FBF3E2;border:2.5px solid #fff;
  box-shadow:0 0 0 1.5px rgba(200,163,76,.5),0 3px 8px rgba(120,90,40,.18)}
.paystat .ps.pay .v{font-size:19px;justify-content:center}
.paystat .ps.pay + .ps.pay{border-left:1px solid rgba(120,90,40,.16)}
.ps.pay.ower{background:#F7E7EC;border:0}
.ps.pay.ower .v,.ps.pay.ower .ps-go{color:#A6455E}
.ps.pay.owed{background:#F7F1E2;border:0}
.ps.pay.owed .v{color:#8F7326}
/* filter row — white pill bar; icon on top, name beneath, thin dividers between each */
.seg{background:#FFFDF8;border:1px solid var(--line);border-radius:20px;padding:7px 4px;box-shadow:var(--shadow);align-items:stretch}
.seg button.seg-col{flex-direction:column;gap:4px;color:var(--ink-soft);font-weight:800;padding:7px 4px;min-height:78px;justify-content:center}
.seg button.seg-col i{font-style:normal;font-size:12.5px;font-weight:800}
.seg button.seg-col.active{background:#FBF6E8;color:var(--gold-deep);box-shadow:none;border:1.5px solid var(--gold);border-radius:15px}
/* a little divider between every section */
.seg button.seg-col + button.seg-col{position:relative}
.seg button.seg-col + button.seg-col::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--line)}
.seg button.seg-col.active::before,.seg button.seg-col.active + button.seg-col::before{background:transparent}
/* filter icons — real character cutouts, ~double the old avatars */
.seg-ic{height:64px;width:auto;max-width:100%;object-fit:contain;display:block;background:none;border:0;box-shadow:none}
.seg-ic-combo{height:66px}
.seg-ic-treats{height:50px}
/* legend — its own little card, stacked */
.cost-legend{display:flex;flex-direction:column;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px 15px;box-shadow:var(--shadow)}
.cost-legend span{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.cost-legend i{width:16px;height:16px;border-radius:50%;flex:0 0 16px}

/* which-country chip on a to-do list + its little drop-down */
.td-country{position:relative;margin:4px 0 10px}
.td-cty-btn{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.td-cty-menu{position:absolute;left:0;top:112%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 26px rgba(60,45,15,.2);padding:6px;min-width:176px;display:flex;flex-direction:column}
.td-cty-menu[hidden]{display:none}   /* display:flex was overriding the hidden attribute — the menu never closed and "froze" the editor */
.td-cty-menu button{border:0;background:none;text-align:left;padding:9px 11px;border-radius:10px;font-size:14.5px;cursor:pointer;color:var(--ink)}
.td-cty-menu button:active{background:var(--bg)}

/* bougainvillea trailing over the hero's top corners — clear of the label and figures */
/* the strands hug the card's rounded top corners (following the arc) and trail along the top — pulled in from the phone edge */
.ch-boug{position:absolute;top:-14px;width:118px;height:auto;pointer-events:none;z-index:3;transform-origin:top;
  filter:drop-shadow(0 2px 4px rgba(150,60,90,.16))}
.ch-boug.l{left:-4px;transform:rotate(14deg)}          /* curls down the top-left corner arc */
.ch-boug.r{right:-4px;transform:scaleX(-1) rotate(14deg)}
/* roomier spread on wider screens, closer to the mock */
@media (min-width:700px){.ch-cells{margin:14px 22px 6px;padding:16px 8px}.ch-cell{gap:13px}.paystat .ps.pay{padding:20px 14px 18px}}
/* pinned = a SOLID pin in your colour with a ring around it (gold ring for Chicken's pink pin, black ring for Pig's gold pin) */
.nll-pin.on,.note-pin-btn.on{opacity:1;border-radius:50%;padding:5px;width:auto;height:auto}
.nll-pin.on svg path:first-child,.note-pin-btn.on svg path:first-child{fill:currentColor}
.fsheet.own-jo .nll-pin.on,.fsheet.own-jo .note-pin-btn.on{color:#C46B7E;border:2px solid var(--gold);background:#FDF3F5}
.fsheet.own-neil .nll-pin.on,.fsheet.own-neil .note-pin-btn.on{color:var(--gold-deep);border:2px solid #23201A;background:#FBF6E8}

/* v179 follow-ups: black label on Neil's view · green tick on the owed side · Neil|Jo divider · icon-only treats */
.cost-hero .lbl.lbl-ink{color:var(--ink)}
.ps.pay.owed .ps-tick{color:#2E9E5B}
.seg button:first-child{border-right:1px solid var(--line)}
/* the hero-card captions sit on a frosted "cloud" — the art fuzzes behind the text instead of being covered by it */
.dsheet-hero-cap{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);
  background:linear-gradient(0deg,rgba(30,20,26,.36),rgba(30,20,26,.10) 60%,rgba(30,20,26,0));
  -webkit-mask-image:linear-gradient(0deg,#000 58%,transparent);mask-image:linear-gradient(0deg,#000 58%,transparent)}
.sh-hero .sh-hero-cap{backdrop-filter:blur(11px) saturate(1.05);-webkit-backdrop-filter:blur(11px) saturate(1.05);
  background:linear-gradient(0deg,rgba(30,20,26,.5),rgba(30,20,26,.14) 72%,rgba(30,20,26,0));
  -webkit-mask-image:linear-gradient(0deg,#000 70%,transparent);mask-image:linear-gradient(0deg,#000 70%,transparent)}

/* month headings pop off any background — a solid frosted chip so they read clearly on Neil's dark hood */
.sw-month{position:relative;display:inline-block;padding:5px 16px;border-radius:14px;color:var(--gold-deep);opacity:1;
  background:rgba(255,253,248,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(200,163,76,.35);box-shadow:0 3px 10px rgba(60,45,15,.12);text-shadow:0 1px 1px rgba(255,255,255,.7)}
html[data-pcwho="neil"] .sw-month{color:#6E5316}
/* the "still to pay = …" note sits on its own frosted strip so it's legible over the dark background */
.paystat-note{position:relative;display:block;color:var(--ink-soft);opacity:1;padding:8px 14px;border-radius:14px;
  background:rgba(255,253,248,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);box-shadow:0 2px 8px rgba(60,45,15,.08);margin:0 2px 12px;font-size:12.5px}
/* the in-app map overlay — slide up, Back bar on top, live map beneath */
.map-ov{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;transform:translateY(5%);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.72,.3,1)}
.map-ov.open{opacity:1;transform:none}
.map-ov-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 3px 12px rgba(60,45,15,.08)}
.map-ov-back{background:none;border:0;color:var(--gold-deep);font-size:16px;font-weight:800;cursor:pointer;padding:6px 2px}
html[data-pcwho="jo"] .map-ov-back{color:#B4626D}
.map-ov-t{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-ov-ext{font-size:12.5px;font-weight:800;color:var(--blue);text-decoration:none}
.map-ov-frame{flex:1;border:0;width:100%}

/* a to-do's country flag, tucked on the bottom-left of its At-a-glance avatar */
.nl-g-av{position:relative}
.nl-g-flag{position:absolute;left:-5px;bottom:-3px;font-size:15px;line-height:1;background:#fff;border-radius:50%;padding:1px;box-shadow:0 1px 4px rgba(60,45,15,.28)}

/* ===== v187 — cost characters freed from their ring, bigger; thinner settle text; money on the settle card; pulsing + ===== */
/* balance-card characters: no ring, full coin-holding cutout, larger */
.sw-balance .sw-char{box-shadow:none !important;width:118px;height:118px;object-fit:contain;border-radius:0}
html[data-pcwho="neil"] .sw-balance .sw-char{box-shadow:none !important}
/* balance card = the settle card's geometry: characters anchored at 25% / 75% of the width,
   money flying hand → bag on a PERCENTAGE lane between them. (The old version was a fixed-px
   lane plus per-width nudge transforms — it only lined up at the one width it was tuned at.) */
.sw-balance .who:not(.even){position:relative;display:block;height:122px;margin:-2px 0 0}
.sw-balance .who:not(.even) .sw-char{position:absolute;top:50%}
.sw-balance .who:not(.even) .sw-char:first-child{left:25%;transform:translate(-50%,-50%)}
.sw-balance .who:not(.even) .sw-char:last-child{left:75%;transform:translate(-50%,-50%)}
/* lane starts at the chick's outstretched hand (~46px right of her centre) and ends at the
   pig's open bag (~34px left of his centre) — holds at every card width */
.sw-balance .money-lane{position:absolute;left:calc(25% + 46px);right:calc(25% + 34px);top:26px;height:46px;flex:none}
.sw-balance .money-lane .mnote{left:0;top:8px;animation:swFly 2.6s cubic-bezier(.3,.15,.55,1) infinite}
.sw-balance .money-lane .mnote.m2{top:0;animation-delay:.9s}
.sw-balance .money-lane .mnote.m3{top:16px;animation-delay:1.8s}
@keyframes swFly{
  0%{left:0;transform:rotate(-14deg) scale(.9);opacity:0}
  12%{opacity:1}
  50%{transform:rotate(170deg) translateY(-8px) scale(1)}
  88%{opacity:1}
  100%{left:calc(100% - 12px);transform:rotate(346deg) translateY(12px) scale(.88);opacity:0}}
/* settle-card avatars: freed from the ball, ~double size, and the labels/figures thinner */
.ps-av{width:104px;height:104px;border-radius:0;object-fit:contain;background:none;border:0;box-shadow:none;
  filter:drop-shadow(0 5px 9px rgba(70,58,32,.2))}
/* nudge the two apart from the money's fixed spawn/land points: Jo back so the note leaves clean air (not her face), Neil forward a touch to meet it */
.paystat .ps.pay[data-who="Jo"] .ps-av{transform:translateX(-28px)}
.paystat .ps.pay[data-who="Neil"] .ps-av{transform:translateX(-16px)}
.paystat .ps.pay .l{font-weight:500}
.paystat .ps.pay .v{font-weight:600}
/* money thrown across the settle card, chick → pig */
.paystat{position:relative}
.ps-money{position:absolute;left:26%;right:46%;top:24%;height:34px;pointer-events:none;z-index:4}
.ps-money .mnote{position:absolute;top:8px;left:0;width:26px;height:auto;
  filter:drop-shadow(0 2px 3px rgba(30,80,50,.3));animation:psFly 2.6s cubic-bezier(.3,.15,.55,1) infinite}
.ps-money .pm2{animation-delay:.9s;top:0}
.ps-money .pm3{animation-delay:1.8s;top:15px}
@keyframes psFly{
  0%{left:0;transform:rotate(-14deg) scale(.9);opacity:0}
  14%{opacity:1}
  50%{transform:rotate(180deg) translateY(-12px) scale(1)}
  85%{opacity:1}
  100%{left:100%;transform:rotate(346deg) translateY(2px) scale(.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.ps-money{display:none}}
/* the notes-landing + — light centre + themed ring, glowing/pulsing (not solid) like the header button */
.nl-plus{background:radial-gradient(circle at 50% 40%,#fff 0 56%,#FDEFF2 100%);color:#C46B7E;
  border:2px solid #E296AC;box-shadow:0 0 0 3px rgba(226,150,172,.32),0 4px 12px rgba(196,107,126,.2);
  animation:plusPulse 2.2s ease-in-out infinite}
html[data-pcwho="neil"] .nl-plus{background:radial-gradient(circle at 50% 40%,#fff 0 56%,#FBF3DF 100%);color:var(--gold-deep);
  border-color:#D9B24E;box-shadow:0 0 0 3px rgba(217,178,78,.34),0 4px 12px rgba(176,137,46,.2);animation:plusPulseG 2.2s ease-in-out infinite}
@keyframes plusPulse{0%,100%{box-shadow:0 0 0 3px rgba(226,150,172,.4),0 4px 12px rgba(196,107,126,.2)}50%{box-shadow:0 0 0 11px rgba(226,150,172,0),0 4px 16px rgba(196,107,126,.28)}}
@keyframes plusPulseG{0%,100%{box-shadow:0 0 0 3px rgba(217,178,78,.42),0 4px 12px rgba(176,137,46,.2)}50%{box-shadow:0 0 0 11px rgba(217,178,78,0),0 4px 16px rgba(176,137,46,.28)}}
@media(prefers-reduced-motion:reduce){.nl-plus{animation:none}}