/* MostHost · Alpine paper collection. Functional type stays clean and upright. */
:root {
  --board:#e8edea; --board-2:#dce6e5; --paper:#fffef8; --manila:#edf1eb;
  --surface:#f5f4ed; --paper-edge:#d4dcd5; --rule:#dce1d9;
  --ink:#203d42; --ink-2:#53676a; --ink-3:#637776;
  --moss:#2f6451; --amber:#93541f; --navy:#25677d; --mustard:#c69349; --red:#ac4839;
  --accent-ink:#fffef8; --blue-soft:#e0edf0; --green-soft:#e6eddf;
  --tape:rgba(199,171,112,.32); --radius:8px;
  --shadow-flat:0 2px 2px #274c4410,0 7px 16px -12px #183d4555;
  --shadow-lift:0 4px 0 -2px var(--paper),0 5px 0 -2px var(--paper-edge),0 14px 28px -18px #173c4570;
  --fx:.2s cubic-bezier(.2,.7,.3,1);
  --body-font:"Karla",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-font:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --board:#142c32;--board-2:#10272d;--paper:#233e43;--manila:#29484a;--surface:#1b3339;
  --paper-edge:#456160;--rule:#3c5658;--ink:#f4f4e8;--ink-2:#c7d5ce;--ink-3:#adc2bf;
  --moss:#a2cfb0;--amber:#ebbd7b;--navy:#a3d5e3;--mustard:#e0b46d;--red:#f3a18c;
  --accent-ink:#15333c;--blue-soft:#294b57;--green-soft:#314d40;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --board:#142c32;--board-2:#10272d;--paper:#233e43;--manila:#29484a;--surface:#1b3339;
  --paper-edge:#456160;--rule:#3c5658;--ink:#f4f4e8;--ink-2:#c7d5ce;--ink-3:#adc2bf;
  --moss:#a2cfb0;--amber:#ebbd7b;--navy:#a3d5e3;--mustard:#e0b46d;--red:#f3a18c;
  --accent-ink:#15333c;--blue-soft:#294b57;--green-soft:#314d40;color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-padding-top:100px}
body{margin:0;min-height:100dvh;background:var(--board);color:var(--ink);font:400 16px/1.55 var(--body-font);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.075;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0;touch-action:manipulation}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
img{max-width:100%;display:block}
a{color:var(--navy);text-underline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
svg.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{position:relative;min-height:100dvh;background:var(--surface);max-width:1600px;margin:auto;box-shadow:0 0 80px #153a3810}
.topbar{height:84px;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:16px 32px;background:var(--paper);border-bottom:1px solid var(--paper-edge)}
.brand{margin:0;font:800 28px/1 var(--display-font);letter-spacing:-1.2px;color:var(--ink)}
.brand span{color:var(--navy)}
.topbar .brand{order:-1;min-width:177px}
.topbar .tb-context{border-left:1px solid var(--rule);padding-left:28px;font-size:14px;color:var(--ink-2)}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.tb-right .todo-label{font-size:14px;font-weight:700;margin-left:7px}
.icon-btn{position:relative;min-width:44px;height:44px;display:inline-flex;justify-content:center;align-items:center;flex:none;border-radius:7px;color:var(--ink-2);transition:background var(--fx),color var(--fx)}
.icon-btn:hover{background:var(--manila);color:var(--navy)}
#btnTodo{width:auto;padding:0 12px;background:var(--green-soft);color:var(--moss)}
.badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:50%;border:2px solid var(--paper);background:var(--amber);color:var(--accent-ink);font-size:12px;font-weight:700;line-height:18px;text-align:center}
main{padding:34px 44px 115px;margin-left:228px;min-width:0}
.tabbar{position:fixed;z-index:35;top:84px;bottom:0;left:max(0px,calc((100vw - 1600px)/2));width:228px;background:var(--paper);border-right:1px solid var(--paper-edge);padding:32px 18px;display:flex;flex-direction:column;gap:8px}
.tabbar::before{content:"YOUR WORKSPACE";font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--ink-3);padding:0 16px 13px}
.tabbar::after{content:"Good company.\A A great stay.";white-space:pre-line;margin-top:auto;padding:26px 16px 2px;border-top:1px solid var(--rule);font:600 20px/1.4 var(--display-font);letter-spacing:-.5px;color:var(--ink-3)}
.tabbar button{position:relative;display:flex;align-items:center;gap:13px;padding:14px 16px;text-align:left;color:var(--ink-2);font-weight:600;font-size:15px;border:1px solid transparent;border-radius:6px;min-height:51px}
.tabbar button:hover{background:var(--manila)}
.tabbar button[aria-current="true"]{color:var(--navy);background:var(--blue-soft);border-color:var(--paper-edge);box-shadow:var(--shadow-flat);font-weight:700}
.tabbar button[aria-current="true"]::after{content:"";position:absolute;right:-1px;top:-1px;width:13px;height:13px;background:linear-gradient(45deg,var(--paper-edge) 49%,var(--paper) 50%);border-bottom-left-radius:3px}
.page-intro{position:relative;display:flex;justify-content:space-between;gap:24px;align-items:center;margin:0 0 28px;min-height:94px}
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--moss);margin:0 0 8px}
.page-intro h2{font:700 clamp(30px,3vw,42px)/1.12 var(--display-font);letter-spacing:-1.5px;margin:0 0 10px}
.page-intro p{margin:0;color:var(--ink-2);font-size:16px;max-width:480px}
.page-intro .btn{flex:none}
.collection-banner{display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--paper-edge);box-shadow:var(--shadow-lift);border-radius:10px 10px 2px 10px;margin-bottom:30px;min-height:240px}
.collection-banner .page-intro{margin:0;padding:30px;display:block;align-self:center;z-index:1}
.collection-banner .page-intro p{max-width:320px}
.collection-banner .page-intro .btn{margin-top:22px}
.collection-art{min-width:0;overflow:hidden;position:relative;background:#f7f5ed}
.collection-art img{width:100%;height:100%;min-height:240px;object-fit:cover;object-position:center}
.collection-art::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,var(--paper),transparent 17%);pointer-events:none}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:30px 0 14px}
.section-head:first-child{margin-top:0}
.section-head h2{font:700 21px/1.3 var(--display-font);letter-spacing:-.6px;margin:0}
.section-head .count{font-size:13px;color:var(--ink-3);font-weight:500}
.card,.row,.plan-head,.day,.todo{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--radius);box-shadow:var(--shadow-flat)}
.card{position:relative}
.list{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:15px;align-items:center;padding:15px;width:100%;text-align:left;transition:transform var(--fx),box-shadow var(--fx),border-color var(--fx)}
.row:hover{border-color:color-mix(in srgb,var(--navy) 50%,var(--paper-edge));box-shadow:var(--shadow-lift)}
.row:active{transform:translateY(1px)}
.row-body{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px}
.row-title{display:block;font:700 17px/1.35 var(--body-font);color:var(--ink);overflow-wrap:anywhere}
.row-sub{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}
.dot{opacity:.5;padding:0 6px}
.thumb{width:64px;height:64px;flex:none;border-radius:5px;overflow:hidden;background:var(--blue-soft);border:1px solid var(--paper-edge);display:grid;place-items:center;color:var(--navy);position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb img.papercraft-ph{object-fit:contain;padding:5px}
.thumb .ph{position:relative;font-size:24px}
.thumb.has-photo{border:4px solid var(--paper);box-shadow:0 1px 5px #193c4030;transform:rotate(-2deg)}
.thumb-btn{display:block;flex:none;border-radius:5px}
.thumb-btn:hover .thumb{outline:2px solid var(--navy);outline-offset:3px}
.visit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.itin-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 38px;gap:14px;padding:22px!important;min-height:167px;border-radius:8px 2px 8px 8px;box-shadow:var(--shadow-lift)}
.itin-row::after{content:"";position:absolute;right:-1px;top:-1px;width:20px;height:20px;background:linear-gradient(45deg,var(--paper-edge) 48%,var(--surface) 51%);border-bottom-left-radius:4px;pointer-events:none}
.itin-row .row-title{font:700 22px/1.25 var(--display-font);letter-spacing:-.6px}
.itin-row .thumb{width:64px;height:76px}
.itin-row .row-body{align-self:stretch}
.itin-row .more-btn{width:38px;min-width:38px}
.visit-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px;color:var(--ink-2);margin-top:8px}
.visit-status{display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--moss);padding:3px 9px;border-radius:3px;font-weight:700}
.itin-row[data-bucket="upcoming"] .visit-status{background:var(--blue-soft);color:var(--navy)}
.itin-row[data-bucket="past"] .visit-status{background:var(--manila);color:var(--ink-2)}
.date-paper{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:7px;width:100%;height:100%;background:var(--blue-soft);color:var(--navy)}
.date-paper small{font:700 12px/1 var(--body-font);letter-spacing:.12em;text-transform:uppercase}
.date-paper strong{font:700 30px/1 var(--display-font)}
.st-none{color:var(--ink-3)}.st-booked{color:var(--moss);font-weight:700}.st-needs{color:var(--amber);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;min-height:46px;border-radius:5px;border:1px solid transparent;font-size:15px;font-weight:700;background:var(--navy);color:var(--accent-ink);text-decoration:none;box-shadow:0 3px 0 color-mix(in srgb,var(--navy) 60%,#092631);transition:transform var(--fx),filter var(--fx)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn:active{transform:translateY(2px);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--paper-edge);box-shadow:none}
.btn.quiet{background:var(--manila);color:var(--ink);border-color:var(--paper-edge);box-shadow:0 2px 0 var(--paper-edge)}
.btn.danger{background:var(--red);color:var(--accent-ink)}.btn.wide{width:100%}.btn svg{width:18px;height:18px}.btn[disabled]{opacity:.45;pointer-events:none}
.fab{position:fixed;right:max(30px,calc((100vw - 1600px)/2 + 30px));bottom:28px;z-index:45;display:flex;align-items:center;gap:9px;padding:16px 20px;min-height:56px;border-radius:7px;background:var(--navy);color:var(--accent-ink);font-size:15px;font-weight:700;box-shadow:0 4px 0 color-mix(in srgb,var(--navy) 60%,#092631),0 12px 24px #173c4530;transition:transform var(--fx)}
.fab svg{width:22px;height:22px}.fab:hover{transform:translateY(-3px)}
.empty{text-align:center;padding:40px 24px;border:1px dashed var(--paper-edge);background:var(--paper);border-radius:var(--radius);color:var(--ink-2)}
.empty h3{font:700 22px/1.3 var(--display-font);color:var(--ink);margin:0 0 8px}.empty p{margin:0 auto;font-size:16px;max-width:440px}.empty .btn{margin-top:20px}
.plan-head{display:flex;gap:18px;align-items:center;padding:24px;margin:0 0 18px;border-top:4px solid var(--navy)}
.plan-head h2{font:700 27px/1.2 var(--display-font);letter-spacing:-.8px;margin:0 0 7px}
.plan-head .row-sub{font-size:15px}
.days-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;margin-top:24px}
.day{position:relative;margin-top:20px;padding:0 20px 20px 32px;overflow:hidden}
.days-grid>.day{margin:0}
.day::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:1px;background:var(--rule)}
.day .holes{display:none}
.day-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 20px 16px 32px;margin:0 -20px 12px -32px;border-bottom:1px solid var(--rule);font:700 19px/1.3 var(--display-font);background:var(--manila);letter-spacing:-.4px}
.day-title small{font:400 13px/1.3 var(--body-font);color:var(--ink-2);margin-left:auto}
.day.is-today{border-color:var(--navy)}.day.is-today .day-title{background:var(--blue-soft)}
.day.is-today .day-title::after{content:"Today";padding:3px 8px;border-radius:3px;font:700 12px/1.4 var(--body-font);background:var(--navy);color:var(--accent-ink)}
.slot{padding:10px 0;border-bottom:1px dashed var(--rule)}.slot:last-child{border-bottom:0;padding-bottom:0}
.slot-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}.slot-name{font-size:14px;font-weight:700;color:var(--ink-2)}
.slot-add{display:inline-flex;align-items:center;gap:4px;color:var(--navy);font-size:14px;font-weight:700;padding:7px 8px;min-height:36px;border-radius:4px}.slot-add:hover{background:var(--blue-soft)}.slot-add svg{width:15px;height:15px}
.slot-items{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.entry{display:flex;gap:10px;align-items:center;width:100%;padding:12px 10px;background:var(--manila);border:1px solid var(--paper-edge);border-radius:5px;text-align:left}
.entry:hover{border-color:var(--navy)}
.entry .kind,.pickbtn .kind{width:34px;height:34px;flex:none;border-radius:5px;display:grid;place-items:center;background:var(--paper);color:var(--navy);border:1px solid var(--paper-edge)}
.entry .kind svg{width:18px;height:18px}.entry .kind.photo{padding:0;overflow:hidden}.entry .kind.photo img{width:100%;height:100%;object-fit:cover}
.entry-body{min-width:0;flex:1;display:block}.entry>.i{width:16px;color:var(--ink-3)}
.entry-title{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:15px;font-weight:700;line-height:1.4;min-width:0}
.entry-title .tt{overflow-wrap:anywhere}.entry-sub{display:block;font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:4px}.entry-sub .time{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tag{display:inline-block;flex:none;font-size:12px;line-height:1.4;font-weight:700;padding:2px 6px;border-radius:3px;background:var(--paper);border:1px solid var(--paper-edge);color:var(--ink-2)}
.tag.flag{background:var(--green-soft);color:var(--moss);border-color:transparent}
.entry.ghosted{background:var(--paper);border-style:dashed}.entry.ghosted .entry-title{font-weight:500;color:var(--ink-2)}
.entry.travel{background:var(--blue-soft)}.flight{font-weight:700}
.entry-note,.note{display:block;font:400 15px/1.55 var(--body-font);color:var(--ink-2);margin-top:6px}
.note{padding:9px 12px;border-left:3px solid var(--mustard);background:color-mix(in srgb,var(--mustard) 9%,transparent);border-radius:0 3px 3px 0}
/* A place's own notes inside the Host Plan (v1.6.0): guest notes in mustard, like the guest link; host-only notes in slate so the two can't be mixed up. */
.item-note{font-size:14px;line-height:1.45;padding:6px 10px;text-align:left}
.item-note.host-only{border-left-color:var(--ink-3);background:color-mix(in srgb,var(--ink-3) 9%,transparent)}
.note-who{display:block;font:700 10.5px/1.3 var(--body-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
.daytitle{width:100%;padding:10px 8px;font:600 16px/1.4 var(--body-font);border:0;border-bottom:1px dashed var(--rule);background:transparent;color:var(--ink);margin:0 0 8px;border-radius:0}
.daytitle::placeholder{font:400 14px/1.5 var(--body-font);color:var(--ink-3)}
.stay-card{display:flex;gap:12px;align-items:flex-start;padding:13px;background:var(--green-soft);border:1px solid var(--paper-edge);border-radius:5px;margin:8px 0 4px}
.travel-bar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:18px;padding:16px;background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;font-size:15px;font-weight:600;box-shadow:var(--shadow-flat)}
.travel-bar svg{color:var(--navy)}.travel-bar .go{margin-left:auto}
.pending-bar{position:sticky;top:94px;z-index:30;display:flex;align-items:center;gap:12px;margin:18px 0;padding:14px 16px;background:var(--navy);color:var(--accent-ink);border-radius:6px;font-size:14px;box-shadow:var(--shadow-lift)}
.pending-bar b{display:block;font-size:16px}.pending-bar .cancel{margin-left:auto;padding:8px 12px;border:1px solid currentColor;border-radius:4px;font-size:14px;font-weight:700}
.slot.drop-ok,.day.drop-ok{background:var(--green-soft);outline:2px dashed var(--moss);outline-offset:3px;border-radius:4px}
.swipe{position:relative;display:flex;overflow:hidden;border-radius:5px}.swipe-del{position:absolute;inset:0 0 0 auto;width:76px;background:var(--red);color:var(--accent-ink);display:grid;place-items:center}.swipe-del svg{width:22px;height:22px}
.swipe-front{position:relative;flex:1;min-width:0;background:var(--paper);transition:transform var(--fx);will-change:transform}.swipe.dragging .swipe-front{transition:none}.swipe.lifted{opacity:.3}
.drag-ghost{position:fixed;z-index:95;pointer-events:none;width:250px;opacity:.95;transform:rotate(-2deg);box-shadow:0 20px 34px #143a4560}body.dragging-entry{touch-action:none;user-select:none}
.libbar{display:flex;gap:10px;align-items:center;margin:0 0 26px;padding:14px;background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px}
.libbar .btn{font-size:14px;padding:9px 14px;min-height:42px}.libbar .btn .n{padding:0 6px;border-radius:3px;margin-left:3px;font-size:12px;background:var(--navy);color:var(--accent-ink)}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lib-row{padding:18px!important;flex-wrap:wrap;gap:12px;min-height:126px}.lib-row .row-body{flex-basis:calc(100% - 100px)}.lib-row .heart{margin-left:auto}
.lib-row .more-btn{margin-left:0}.lib-row .thumb{background:var(--green-soft);color:var(--moss)}
.heart{display:grid;place-items:center;width:44px;height:40px;color:var(--ink-3);flex:none;border-radius:5px;transition:color var(--fx),transform var(--fx)}.heart svg{width:20px;height:20px}.heart:hover{background:var(--manila)}.heart[aria-pressed="true"]{color:var(--red)}.heart[aria-pressed="true"] svg{color:var(--red)}.heart:active{transform:scale(.9)}
.hero{width:100%;height:210px;object-fit:cover;background:var(--manila)}.filter-note{font-size:14px;color:var(--ink-2);margin:0 0 14px}
.scrim{position:fixed;inset:0;z-index:60;background:#122e3866;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .16s ease both}
.sheet{width:100%;max-width:570px;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--paper-edge);border-radius:10px;box-shadow:0 4px 0 -1px var(--paper-edge),0 30px 100px #102c4666;padding-bottom:20px;animation:rise .22s ease both}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;gap:12px;align-items:flex-start;background:var(--paper);padding:24px 24px 20px;border-bottom:1px solid var(--rule)}
.sheet-head h2{flex:1;margin:0;font:700 26px/1.2 var(--display-font);letter-spacing:-.7px}.sheet-head p{margin:7px 0 0;font-size:15px;color:var(--ink-2);line-height:1.5}
.sheet-body{padding:22px 24px 4px}.sheet-foot{display:flex;gap:12px;padding:18px 24px 4px}.sheet-foot .btn{flex:1}.grabber{display:none}
.field{margin-bottom:18px}.field>label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.field .hint,.hint{font-size:13px;color:var(--ink-2);margin-top:7px;line-height:1.5;overflow-wrap:anywhere}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=url],input[type=tel],input[type=number],select,textarea{width:100%;min-width:0;padding:12px 13px;min-height:48px;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);border-radius:5px;box-shadow:inset 0 2px 3px #173e4510;appearance:none;font-size:16px;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--navy)}
select{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23637776%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207.5Q7.4%2011.6%2012%2016.5Q16.5%2011.9%2021%207.5%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
textarea{min-height:100px;resize:vertical}input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.check{display:flex;align-items:center;gap:12px;padding:13px;background:var(--manila);border:1px solid var(--paper-edge);border-radius:5px;font-size:15px;cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--navy);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}.chip{padding:8px 12px;min-height:38px;border-radius:4px;font-size:14px;font-weight:600;background:var(--manila);border:1px solid var(--paper-edge);color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--accent-ink);border-color:var(--navy)}.chip.add{border-style:dashed;color:var(--navy)}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--manila);border:1px solid var(--paper-edge);border-radius:5px;padding:4px;gap:4px}.seg button{padding:8px 12px;min-height:38px;font-size:14px;font-weight:600;color:var(--ink-2);border-radius:3px}.seg button[aria-pressed="true"]{background:var(--paper);color:var(--navy);box-shadow:var(--shadow-flat)}
.pickbtn{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:16px;background:var(--manila);border:1px solid var(--paper-edge);border-radius:6px;margin-bottom:12px}.pickbtn:hover{border-color:var(--navy)}.pickbtn b{display:block;font-size:16px;font-weight:700;color:var(--ink)}.pickbtn span{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}.pickbtn .kind{display:grid}
.detail-hero{height:200px;background:var(--manila);position:relative}.detail-hero img{width:100%;height:100%;object-fit:cover}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--ink-2);margin:0 0 16px}.stars{display:inline-flex;align-items:center;gap:5px;color:var(--amber);font-weight:700}.stars .n{color:var(--ink)}.stars .c{color:var(--ink-2);font-weight:400}
.dl{display:flex;flex-direction:column;margin:16px 0}.dl a,.dl div.i-row{display:flex;gap:12px;align-items:flex-start;padding:13px 2px;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}.dl a:last-child,.dl div.i-row:last-child{border:0}.dl svg{color:var(--navy);margin-top:2px}.dl a span u{text-decoration:none;color:var(--navy);font-weight:600}
.hours{font-size:14px;margin:5px 0 0}.hours div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--rule)}.hours div:last-child{border:0}.hours .d{color:var(--ink-2)}.hours .t{font-variant-numeric:tabular-nums}.hours .today{font-weight:700}
.todo{display:flex;align-items:flex-start;gap:13px;padding:15px}.bubble{display:grid;place-items:center;flex:none;width:26px;height:26px;border:2px solid var(--ink-3);border-radius:5px;color:transparent;margin-top:1px}.bubble[aria-pressed="true"]{background:var(--moss);border-color:var(--moss);color:var(--accent-ink)}.bubble svg{width:16px;height:16px;stroke-width:1.8}
.todo-text{font-size:16px;line-height:1.45}.todo-sub{font-size:13px;color:var(--ink-2);margin-top:5px}.todo.done .todo-text{text-decoration:line-through;color:var(--ink-3)}.auto-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent);padding:2px 7px;border-radius:3px;margin-left:6px}
.drawer{position:fixed;inset:0 auto 0 0;z-index:70;overflow:auto;width:min(360px,88vw);background:var(--paper);border-right:1px solid var(--paper-edge);box-shadow:14px 0 40px #102c4640;padding:calc(env(safe-area-inset-top) + 28px) 24px 28px;animation:slidein .2s ease both;display:flex;flex-direction:column}
.drawer h2{margin:0 0 10px;font:800 30px/1 var(--display-font);letter-spacing:-1px}.drawer .tagline{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 28px}.drawer nav{display:flex;flex-direction:column;gap:7px}.drawer nav button{display:flex;gap:12px;align-items:center;padding:14px 10px;border-radius:5px;font-size:16px;font-weight:600;text-align:left}.drawer nav button:hover{background:var(--manila)}.drawer nav button small{margin-left:auto;font-size:12px;font-weight:400;color:var(--ink-2)}.drawer .foot{margin-top:auto;padding-top:28px;font-size:13px;color:var(--ink-2);line-height:1.6}
.ctx{width:min(330px,88vw);background:var(--paper);border:1px solid var(--paper-edge);border-radius:8px;box-shadow:0 14px 40px #102c4660;overflow:hidden;animation:pop .15s ease both}.ctx button{display:flex;gap:12px;align-items:center;width:100%;padding:16px 18px;border-bottom:1px solid var(--rule);font-size:15px;font-weight:600;text-align:left}.ctx button:last-child{border:0}.ctx button:hover{background:var(--manila)}.ctx button.danger{color:var(--red)}.ctx .ctx-title{padding:14px 18px;background:var(--manila);font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.toast{position:fixed;left:50%;translate:-50% 0;bottom:100px;z-index:90;max-width:min(550px,90vw);background:var(--ink);color:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;padding:14px 20px;font-size:15px;font-weight:600;box-shadow:var(--shadow-lift);text-align:center;animation:rise .18s ease both}
.share-band{padding:18px 22px;background:var(--blue-soft);border-left:4px solid var(--navy);color:var(--ink);border-radius:5px;margin-bottom:22px;font-size:15px;line-height:1.6}.share-band b{font:700 20px/1.3 var(--display-font);display:block;margin-bottom:6px}
.linkbox{display:flex;gap:10px;align-items:center;padding:13px;background:var(--manila);border:1px solid var(--paper-edge);border-radius:5px;font:13px/1.5 ui-monospace,monospace;word-break:break-all;max-height:120px;overflow:auto;color:var(--ink-2)}
.gate{position:fixed;inset:0;z-index:80;overflow-y:auto;background:var(--surface);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr);min-height:100dvh}
.gate-scene{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:52px 48px;background:#f7f5ed;color:#203d42;border-right:1px solid #d4dcd5;overflow:hidden}
.gate-scene .brand{position:relative;z-index:1;font-size:34px;color:#203d42}.gate-scene .brand span{color:#25677d}.gate-scene>img{width:calc(100% + 64px);max-width:none;align-self:center;margin:16px -32px;mix-blend-mode:multiply}
.gate-scene-copy{position:relative;max-width:450px;margin-top:auto}.gate-scene-copy h2{font:700 clamp(30px,3.2vw,48px)/1.12 var(--display-font);letter-spacing:-1.6px;margin:0 0 15px}.gate-scene-copy p{font-size:17px;line-height:1.6;color:#53676a;margin:0}
.gate-panel{padding:64px 48px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0}
.gate-panel>h1,.gate-panel>.lede,.gate-card,.gate-panel>.skip,.gate-kicker{width:100%;max-width:390px}
.gate-panel h1{font:700 37px/1.15 var(--display-font);letter-spacing:-1.2px;text-align:left;margin:0 0 14px}.gate .lede{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 30px}
.gate-kicker{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--moss);margin:0 0 12px;text-transform:uppercase}
.gate-card{position:relative;background:var(--paper);padding:28px;border:1px solid var(--paper-edge);border-radius:8px 2px 8px 8px;box-shadow:var(--shadow-lift)}
.gate-card::after{content:"";position:absolute;right:-1px;top:-1px;width:21px;height:21px;background:linear-gradient(45deg,var(--paper-edge) 49%,var(--surface) 51%);border-bottom-left-radius:4px}
.gate .skip{display:block;margin-top:22px;text-align:center;font-size:15px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;padding:12px;min-height:48px}.gate .skip:hover{color:var(--navy)}
.guest-app main{margin-left:0;max-width:1000px;margin-right:auto;margin-left:auto;padding:32px 28px 70px!important}.guest-app .topbar{justify-content:center}.guest-app .brand{min-width:0}
/* Regular text remains legible even in older inline templates. */
.row-sub[style],.sheet p[style],.sheet .hint[style]{font-size:max(.875rem,14px)!important}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes slidein{from{transform:translateX(-100%)}to{transform:none}}@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@media(min-width:1400px){main{padding-left:56px;padding-right:56px}.collection-banner{grid-template-columns:1fr 1.15fr}.collection-art img{max-height:310px}}
@media(max-width:1150px){main{padding:28px 28px 110px;margin-left:204px}.tabbar{width:204px;padding:30px 12px}.topbar{padding-left:24px;padding-right:24px}.topbar .brand{min-width:160px}.visit-grid,.days-grid{grid-template-columns:1fr}.itin-row{min-height:140px}.collection-banner .page-intro{padding:26px}.collection-banner .page-intro h2{font-size:34px}.gate-scene{padding:40px 30px}.gate-panel{padding:48px 32px}.library-grid{grid-template-columns:1fr}.lib-row{flex-wrap:nowrap;min-height:100px}.lib-row .row-body{flex-basis:auto}}
@media(max-width:800px){
 .topbar{height:72px;padding:14px 20px}.topbar .brand{font-size:26px;min-width:0}.topbar .tb-context{display:none}.tb-right .todo-label{display:none}#btnTodo{padding:0;width:44px}
 main{margin-left:0;padding:26px 24px 124px}.tabbar{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 10px calc(env(safe-area-inset-bottom) + 9px);gap:4px;border-right:0;border-top:1px solid var(--paper-edge);box-shadow:0 -6px 28px #123b3e10}
 .tabbar::before,.tabbar::after{display:none}.tabbar button{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:9px 2px;min-height:60px;font-size:12px;line-height:1.15;text-align:center}.tabbar button svg{width:21px;height:21px}.tabbar button[aria-current="true"]::after{width:9px;height:9px}
 .fab{right:22px;bottom:calc(env(safe-area-inset-bottom) + 98px);padding:15px 19px}.toast{bottom:calc(env(safe-area-inset-bottom) + 167px)}.pending-bar{top:82px}.collection-banner{min-height:225px}.collection-art img{min-height:225px}.page-intro h2{font-size:34px}.visit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.itin-row{grid-template-columns:54px minmax(0,1fr);padding:19px!important;gap:12px}.itin-row .thumb{width:54px;height:68px}.itin-row .more-btn{position:absolute;bottom:12px;right:8px}.itin-row .visit-meta{padding-right:26px}.itin-row .row-title{font-size:20px}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lib-row{flex-wrap:wrap}.lib-row .row-body{flex-basis:calc(100% - 90px)}
 .gate{grid-template-columns:1fr}.gate-scene{padding:24px 28px;min-height:250px;max-height:285px;display:block;border-right:0;border-bottom:1px solid #d4dcd5}.gate-scene .brand{font-size:28px}.gate-scene>img{position:absolute;width:400px;right:-5px;top:-15px;margin:0;opacity:.9}.gate-scene-copy{padding-top:48px;max-width:230px}.gate-scene-copy h2{font-size:30px}.gate-scene-copy p{display:none}.gate-panel{padding:32px 24px 24px;justify-content:flex-start}.gate-panel h1{font-size:30px}.gate .lede{margin-bottom:22px}.gate-card{padding:24px}.gate-panel .gate-kicker{display:none}
}
@media(max-width:540px){
 .topbar{padding:12px 14px;gap:8px;height:68px}.topbar .brand{font-size:25px}.tb-right{gap:3px}.icon-btn{min-width:40px;width:40px;height:40px}#btnTodo{width:40px}
 main{padding:22px 16px 128px}.page-intro{align-items:flex-start;gap:12px;margin-bottom:22px}.page-intro h2{font-size:32px;letter-spacing:-1px}.page-intro p{font-size:15px}.page-intro>.btn{font-size:14px;padding:10px 12px}.collection-banner{display:block;min-height:0;margin-bottom:27px}.collection-banner .page-intro{padding:22px 22px 18px;max-width:none}.collection-banner .page-intro h2{font-size:34px}.collection-banner .page-intro p{max-width:285px}.collection-banner .page-intro .btn{margin-top:17px}.collection-art{height:170px}.collection-art img{height:255px;min-height:0;object-fit:cover;object-position:center;position:relative;top:-60px}.collection-art::before{background:linear-gradient(180deg,var(--paper),transparent 22%)}
 .section-head{margin-top:26px}.section-head h2{font-size:20px}.visit-grid,.library-grid{grid-template-columns:1fr}.itin-row{grid-template-columns:57px minmax(0,1fr) 32px;min-height:143px;padding:19px 14px 19px 18px!important;gap:12px}.itin-row .thumb{width:57px;height:74px}.itin-row .row-title{font-size:22px}.itin-row .more-btn{position:static;min-width:32px;width:32px}.itin-row .visit-meta{padding-right:0}.row{gap:12px}.row-sub{font-size:14px}.lib-row{padding:15px!important;gap:9px;flex-wrap:nowrap}.lib-row .thumb{width:48px;height:54px}.lib-row .row-body{flex-basis:auto}.lib-row .heart{width:32px}.lib-row .more-btn{width:32px;min-width:32px}.lib-row .row-title{font-size:16px}.lib-row .row-sub{font-size:14px}.libbar{padding:10px;gap:8px;margin-bottom:22px}.libbar .btn{flex:1;min-width:0;padding:9px 10px}.thumb{width:55px;height:55px}
 .fab{padding:15px 18px;right:18px}.fab span{font-size:14px}.tabbar{padding-left:5px;padding-right:5px;gap:2px}.tabbar button{font-size:12px;letter-spacing:-.3px}
 .plan-head{padding:18px 15px;gap:12px}.plan-head h2{font-size:24px}.plan-head .row-sub{font-size:14px}.plan-head .thumb-btn .thumb{width:48px;height:48px}.plan-head .thumb-btn .thumb svg.ph{width:26px;height:26px}.days-grid{gap:16px;margin-top:20px}.day{padding-left:24px;padding-right:14px}.day::before{left:11px}.day-title{padding-left:24px;padding-right:14px;margin-left:-24px;margin-right:-14px;font-size:18px}.day-title small{font-size:13px}.pending-bar{top:78px}.entry-title{font-size:15px}.slot-name{font-size:14px}.entry .kind{width:29px;height:29px}
 .scrim{padding:0;align-items:flex-end}.sheet{max-height:91dvh;border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}.sheet-head{padding:18px 20px 16px}.sheet-head h2{font-size:24px}.sheet-body{padding:19px 20px 4px}.sheet-foot{padding:16px 20px 4px;gap:10px}.grabber{display:block;width:40px;height:4px;border-radius:3px;background:var(--paper-edge);margin:9px auto 0}.two{gap:10px}.sheet .row{padding:12px}.sheet .row .thumb{width:48px;height:48px}
 .gate-scene{min-height:200px;max-height:200px;padding:22px 24px}.gate-scene>img{width:295px;right:-35px;top:3px;opacity:.9}.gate-scene-copy{padding-top:32px;max-width:190px}.gate-scene-copy h2{font-size:26px;letter-spacing:-.9px}.gate-scene .brand{font-size:26px}.gate-panel{padding-top:27px}.gate-panel h1{font-size:29px}.gate-card{padding:22px}.gate-panel>.skip{margin-top:14px}.guest-app main{padding:22px 16px 50px!important}
}
@media(max-width:360px){.topbar{gap:5px;padding-left:10px;padding-right:10px}.topbar .brand{font-size:23px}.tabbar button{font-size:12px;letter-spacing:-.6px}.tabbar button svg{width:19px;height:19px}.itin-row{grid-template-columns:48px minmax(0,1fr) 26px;gap:9px}.itin-row .thumb{width:48px}.itin-row .row-title{font-size:20px}.lib-row{flex-wrap:wrap}.lib-row .row-body{flex-basis:calc(100% - 70px)}.sheet-foot{flex-wrap:wrap}.sheet-foot .btn{min-width:120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


.nav-short{display:none}
@media(max-width:800px){.nav-wide{display:none}.nav-short{display:inline}.tabbar button{font-size:14px;letter-spacing:-.3px}}
@media(max-width:540px){.page-intro{flex-wrap:wrap}.gate-scene>img{mask-image:linear-gradient(90deg,transparent,#000 25%)}}
@media(max-width:360px){.tabbar button{font-size:14px;letter-spacing:-.5px}.tabbar{padding-left:2px;padding-right:2px}}

/* Second edition: folded paper identity and functional icon family. */
.brand-lockup{display:flex;align-items:center;gap:11px}
.brand-logo{width:48px;height:48px;flex:none;object-fit:cover;border-radius:8px;background:#163b50;box-shadow:0 2px 3px #142e3820}
.brand-name{color:var(--ink)!important;white-space:nowrap}
.brand-name>span{color:var(--navy)}
.gate-scene .brand-logo{width:68px;height:68px;border-radius:10px}
.gate-scene .brand-name{color:#203d42!important}
.gate-scene .brand-name>span{color:#25677d}
.topbar .brand{min-width:177px;font-size:25px}
.topbar{gap:18px}
.topbar .tb-context{padding-left:20px}
.drawer .brand-logo{width:44px;height:44px}
.collection-art img{object-fit:contain;object-position:center;background:#f7f5ed}
.gate-scene>img{object-fit:contain;max-height:52dvh}
/* v1.15.0: the icons are hand-drawn outlines (tools/make-icons.py), so the
   cut-paper fill that used to be set here is gone and `svg.i` near the top
   of this file draws them: no fill, a round-ended stroke in the text colour. */
svg.i{overflow:visible}
.tabbar button svg{width:27px;height:27px}
.icon-btn svg{width:23px;height:23px}
.thumb svg.ph{width:32px;height:32px}
@media(max-width:1150px){.topbar .brand{min-width:0}.topbar .tb-context{border:0;padding-left:8px}}
@media(max-width:800px){.topbar{gap:12px}.topbar .brand-logo{width:42px;height:42px}.topbar .brand{font-size:24px}.gate-scene .brand-logo{width:52px;height:52px}.gate-scene-copy{padding-top:30px}.gate-scene>img{height:auto;max-height:none;right:-10px;top:18px;width:345px;mask-image:linear-gradient(90deg,transparent,#000 24%)}.tabbar button svg{width:26px;height:26px}}
@media(max-width:540px){.topbar{gap:8px}.topbar .brand{font-size:22px;gap:8px}.topbar .brand-logo{width:38px;height:38px;border-radius:6px}.gate-scene .brand{font-size:26px;gap:10px}.gate-scene .brand-logo{width:48px;height:48px}.gate-scene>img{width:250px;top:37px;right:-30px}.gate-scene-copy{padding-top:20px;max-width:225px}.gate-scene-copy h2{font-size:clamp(18px,6vw,23px)}.collection-art img{height:170px;top:0;object-fit:contain}.collection-art::before{background:linear-gradient(180deg,var(--paper),transparent 12%)}.tabbar{padding-top:6px}.tabbar button{gap:4px}}
@media(max-width:360px){.topbar .brand{font-size:20px;gap:6px}.topbar .brand-logo{width:32px;height:32px}.topbar{gap:5px}.topbar .tb-right{gap:0}.topbar .icon-btn{min-width:34px;width:34px}.gate-scene>img{right:-50px;opacity:.8}}

.mealfilter{margin:0 0 14px}
.kindtag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--paper-edge);border-radius:3px;padding:0 5px;margin-right:7px}
.tab-scene{min-height:220px}
.tab-scene .collection-art{display:flex;align-items:center;justify-content:center}
.tab-scene .collection-art img{width:100%;height:250px;min-height:0;object-fit:contain;position:static}
.tab-scene .page-intro{padding:26px 30px}
@media(max-width:800px){.tab-scene .collection-art img{height:220px}}
@media(max-width:540px){.tab-scene .page-intro{padding:22px 22px 18px}.tab-scene .collection-art,.tab-scene .collection-art img{height:170px}}

/* v1.0.5: compact tab banners, visit photos, and keyboard-safe search. */
.tab-scene,.collection-banner{min-height:200px}
.tab-scene .page-intro,.collection-banner .page-intro{padding-top:22px;padding-bottom:22px}
.has-visit-photo .collection-art img{object-fit:cover;height:100%;min-height:220px}
.has-visit-photo .collection-art::before{display:none}
.search-layer{align-items:flex-start!important;padding:12px!important;overflow:hidden}
.search-sheet{display:flex;flex-direction:column;height:min(650px,var(--search-height,calc(100dvh - 24px)));max-height:var(--search-height,calc(100dvh - 24px));min-height:0;overflow:hidden;padding-bottom:0;animation:none}
.search-sheet .grabber{display:none}
.search-sheet .sheet-head{position:static;flex:none;padding:18px 20px 14px}
.search-sheet .sheet-head p{font-size:14px}
.search-sheet .sheet-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:16px 20px 0}
.search-field{flex:none;margin-bottom:12px}
.search-results{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 3px max(20px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.search-field input{font-size:16px}.search-row{display:flex;gap:8px}.search-row input{flex:1}.search-row .btn{flex:none;min-height:48px;padding:12px 16px}
@media(max-width:540px){.collection-banner,.tab-scene{min-height:0}.has-visit-photo .collection-art img{height:170px;min-height:0}.search-sheet{border-radius:10px;border:1px solid var(--paper-edge)}.search-sheet .sheet-head{padding:14px 16px 12px}.search-sheet .sheet-body{padding:12px 16px 0}.search-sheet .sheet-head h2{font-size:22px}}

/* v1.1.6: on phones and small tablets the tab banners take about a quarter of the
   screen. The words sit over the left of the picture, which fades out behind them,
   the way the sign-in screen does it. */
@media(max-width:800px){
 .collection-banner,.tab-scene{display:block;position:relative;min-height:180px;height:auto;margin-bottom:22px}
 .collection-banner .page-intro,.tab-scene .page-intro{position:relative;z-index:2;max-width:55%;padding:20px 0 20px 20px;margin:0}
 .collection-banner .page-intro h2{font-size:30px;letter-spacing:-.9px;margin:0 0 6px;text-shadow:0 0 12px var(--paper)}
 .collection-banner .page-intro p{font-size:14px;line-height:1.4;max-width:none;margin:0;color:var(--ink-2);text-shadow:0 0 6px var(--paper),0 0 12px var(--paper)}
 .collection-banner .page-intro .eyebrow{font-size:10.5px;letter-spacing:.1em;margin-bottom:6px;white-space:nowrap}
 .collection-banner .collection-art,.tab-scene .collection-art{position:absolute;inset:0 0 0 36%;height:auto;display:block;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 55%);mask-image:linear-gradient(90deg,transparent 12%,#000 55%)}
 .collection-banner .collection-art::before{display:none}
 .collection-banner .collection-art img,.tab-scene .collection-art img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:center;background:transparent}
}

/* v1.1.7: the "Get the app" pop-up. It sits above the tab bar and lifts the
   add button and toasts out of its way while it's showing. */
.getapp{position:fixed;z-index:44;left:calc(max(0px,(100vw - 1600px)/2) + 258px);bottom:24px;max-width:min(430px,calc(100vw - 290px));display:flex;align-items:center;gap:9px;padding:6px 4px 6px 9px;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);border-radius:8px 8px 2px 8px;box-shadow:var(--shadow-lift);animation:rise .18s ease both}
.getapp img{width:30px;height:30px;border-radius:6px;flex:none}
.getapp-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.getapp-copy b{font:700 13.5px/1.2 var(--display-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* Amber, not navy, so it isn't mistaken for the add buttons. */
.getapp .getapp-go{flex:none;margin:0;padding:7px 11px;min-height:0;font-size:13px;background:var(--amber);color:var(--accent-ink);box-shadow:0 2px 0 color-mix(in srgb,var(--amber) 60%,#2a1606)}
.getapp .getapp-x{flex:none;min-width:32px;width:32px;height:32px}
.getapp .getapp-x .i{width:14px;height:14px}
.getapp-steps{margin:0 0 14px;padding-left:22px;line-height:1.6}
.getapp-steps li{margin-bottom:6px}
.getapp-steps .i{width:18px;height:18px;vertical-align:-3px}
body.has-getapp .fab{bottom:var(--getapp-top,108px)}
body.has-getapp .toast{bottom:calc(var(--getapp-top,108px) + 70px)}
@media(max-width:1150px){.getapp{left:232px;max-width:min(500px,calc(100vw - 262px))}}
@media(max-width:800px){.getapp{left:12px;right:12px;max-width:none}}
/* Phones: the logo goes so the heading fits on one line. */
@media(max-width:540px){.getapp-copy b{font-size:13.5px}.getapp{gap:8px;padding-left:12px}.getapp img{display:none}}
@media(max-width:380px){.getapp-copy b{font-size:13px}.getapp{gap:6px;padding-left:10px}.getapp .getapp-go{padding:7px 9px;font-size:12.5px}.getapp .getapp-x{min-width:28px;width:28px}}
@media(max-width:340px){.getapp-copy b{font-size:12.5px}.getapp{gap:5px;padding-left:9px}.getapp .getapp-go{padding:6px 8px;font-size:12px}}

/* v1.2.0–v1.2.4: a guest link opens as an invitation envelope (js/invite.js).
   The envelope, card and paper decorations use fixed paper colours so they
   read as paper in light and dark mode alike; only the backdrop follows the theme. */
.invite{--inv-top:#f3e4d6;--inv-mid:#eef0e6;--inv-bottom:#dfe9ea;--inv-glow:#fffaf0;--inv-warm:#ffd9a36b;--inv-hint:#53676a;
 position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;
 background:radial-gradient(75% 32% at 50% 0%,var(--inv-warm),transparent 72%),radial-gradient(55% 40% at 50% 50%,var(--inv-glow),transparent 72%),linear-gradient(165deg,var(--inv-top),var(--inv-mid) 52%,var(--inv-bottom));
 animation:inv-in .3s ease both}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .invite{--inv-top:#1d3439;--inv-mid:#162d33;--inv-bottom:#1d2a3a;--inv-glow:#2f4d52;--inv-warm:#e3a45a3d;--inv-hint:#c7d5ce}}
[data-theme="dark"] .invite{--inv-top:#1d3439;--inv-mid:#162d33;--inv-bottom:#1d2a3a;--inv-glow:#2f4d52;--inv-warm:#e3a45a3d;--inv-hint:#c7d5ce}
body.inviting{overflow:hidden}

/* The backdrop: a leafy garland (hearth and home, not party bunting — v1.2.5),
   confetti and leaf sprigs over a faint paper grain and a warm firelight glow. */
.inv-backdrop{position:absolute;inset:0;pointer-events:none}
.inv-backdrop::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#0000000a 3px 4px)}
.inv-confetti{position:absolute;left:-4%;top:-4%;width:108%;height:108%;opacity:.6;filter:drop-shadow(0 1px 1px #0000002e)}
.inv-garland{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:50%;width:min(520px,104vw);height:auto;translate:-50% 0;transform-origin:50% 0;filter:drop-shadow(0 3px 3px #00000029)}
.inv-leaves{position:absolute;bottom:-14px;width:min(170px,40vw);height:auto;filter:drop-shadow(0 3px 4px #00000033)}
.inv-leaves-l{left:-18px;transform-origin:0 100%}
/* Mirrored about its own centre: mirroring about the right edge threw it off screen. */
.inv-leaves-r{right:-18px;transform:scaleX(-1);transform-origin:50% 100%}
.invite:not(.is-still) .inv-confetti{animation:inv-drift 16s ease-in-out infinite alternate}
.invite:not(.is-still) .inv-garland{animation:inv-sway 6s ease-in-out infinite alternate}
.invite:not(.is-still) .inv-leaves-l{animation:inv-leaf 7s ease-in-out infinite alternate}
.invite:not(.is-still) .inv-leaves-r{animation:inv-leaf-r 8s ease-in-out infinite alternate}

/* The envelope: white paper, shaded at the folds. It is a button, so it opens by tap, click or keyboard. */
.inv-stage{--w:min(330px,82vw);position:relative;width:var(--w);display:flex;flex-direction:column;align-items:center;perspective:1400px;transition:transform .85s cubic-bezier(.25,.8,.25,1) .9s}
.inv-envelope{all:unset;box-sizing:border-box;position:relative;display:block;width:var(--w);height:calc(var(--w)*.66);border-radius:6px;cursor:pointer;animation:inv-drop .65s cubic-bezier(.2,.9,.3,1.12) both}
.inv-envelope:focus-visible{outline:3px solid #25677d;outline-offset:8px}
.inv-back,.inv-front,.inv-pocket,.inv-flap,.inv-flap i{position:absolute;inset:0;display:block}
.inv-back{border-radius:6px;background:linear-gradient(180deg,#e9e4d9,#f2eee6);box-shadow:0 28px 46px -20px #1b2a3085,0 2px 0 #d8d0c1}
.inv-card{position:absolute;left:12px;right:12px;top:10px;height:calc(100% - 18px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 16px;text-align:center;color:#203d42;border-radius:3px;background:#fbf5e6 repeating-linear-gradient(0deg,transparent 0 3px,#0000000a 3px 4px);box-shadow:inset 0 0 0 1px #e6dcc4,inset 0 0 0 5px #fbf5e6,inset 0 0 0 6px #dcc49a,0 2px 6px #0000001f}
.inv-hello{font:600 29px/1 "Caveat","Bradley Hand","Segoe Print",cursive;color:#93541f;margin-top:4px}
.inv-title{font:700 20px/1.2 var(--display-font);letter-spacing:-.4px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inv-when{font:500 13px/1.35 var(--body-font);color:#53676a}
/* Shapes are cut with clip-path, which also cuts any shadow on the same
   element, so the shadow sits on an unclipped wrapper. */
.inv-front{z-index:2;filter:drop-shadow(0 -1px 1px #6b5a3a33) drop-shadow(0 -3px 6px #6b5a3a1c)}
.inv-pocket{border-radius:0 0 6px 6px;background:linear-gradient(0deg,#fffefb,#f6f3ec);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.inv-pocket::before,.inv-pocket::after{content:"";position:absolute;inset:0}
.inv-pocket::before{background:linear-gradient(90deg,#ebe6dc,#f7f4ee);clip-path:polygon(0 0,50% 56%,0 100%)}
.inv-pocket::after{background:linear-gradient(270deg,#ebe6dc,#f7f4ee);clip-path:polygon(100% 0,50% 56%,100% 100%)}
.inv-flap{z-index:3;transform-origin:50% 0;filter:drop-shadow(0 2px 1px #6b5a3a3d) drop-shadow(0 6px 8px #6b5a3a21)}
.inv-flap i{background:linear-gradient(180deg,#efebe2,#faf8f3);clip-path:polygon(0 0,100% 0,50% 60%)}
.inv-seal{position:absolute;z-index:4;left:50%;top:60%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#cf6d40,#9b4322 72%);box-shadow:0 0 0 3px #a54b26,0 0 0 5px #9b432255,0 4px 8px #3a1a0a66,inset 0 -3px 6px #0000004d}
.inv-seal img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #e7a57f66}
.inv-hint{margin:34px 0 0;min-height:1.3em;font:600 15px/1.3 var(--body-font);letter-spacing:.02em;text-align:center;color:var(--inv-hint);animation:inv-hint .5s ease .5s both}

/* Waiting to be opened: the hint breathes and the seal gives a small nudge. */
.invite.is-ready:not(.is-open):not(.is-still) .inv-hint{animation:inv-hint .5s ease .5s both,inv-breathe 2.4s ease-in-out 1s infinite}
.invite.is-ready:not(.is-open):not(.is-still) .inv-seal{animation:inv-nudge 2.6s ease-in-out 1.2s infinite}

/* Opening. */
.invite.is-open .inv-seal{animation:inv-seal .4s ease-in both}
.invite.is-open .inv-flap{animation:inv-flap .6s cubic-bezier(.4,0,.2,1) .3s both}
.invite.is-open .inv-flap i{animation:inv-lining .6s linear .3s both}
.invite.is-open .inv-card{animation:inv-rise .85s cubic-bezier(.25,.8,.25,1) .9s both}
.invite.is-open .inv-stage{transform:translateY(calc(var(--w)*.2))}
.invite.is-done{animation:inv-out .5s ease both;pointer-events:none}
.invite.is-done .inv-stage{transition-delay:0s;transition-duration:.5s}
.invite.is-done.is-open .inv-stage{transform:translateY(calc(var(--w)*.2)) scale(1.06)}

@keyframes inv-in{from{opacity:0}}
@keyframes inv-out{to{opacity:0}}
@keyframes inv-hint{from{opacity:0;transform:translateY(6px)}}
@keyframes inv-breathe{50%{opacity:.55}}
@keyframes inv-nudge{0%,70%,100%{transform:none}78%{transform:rotate(-9deg) scale(1.06)}86%{transform:rotate(7deg) scale(1.06)}93%{transform:rotate(-3deg)}}
@keyframes inv-drift{to{transform:translate(-10px,-18px) rotate(1.5deg)}}
@keyframes inv-sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
@keyframes inv-leaf{to{transform:rotate(3deg)}}
@keyframes inv-leaf-r{from{transform:scaleX(-1)}to{transform:scaleX(-1) rotate(3deg)}}
@keyframes inv-drop{from{transform:translateY(-44px) rotate(-5deg) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes inv-seal{to{transform:translateY(-16px) scale(1.25) rotate(14deg);opacity:0}}
@keyframes inv-flap{
 0%{transform:rotateX(0);z-index:3}
 49%{z-index:3}
 50%{z-index:0}
 100%{transform:rotateX(180deg);z-index:0}}
/* Past halfway the flap shows its inside: a patterned lining. */
@keyframes inv-lining{
 0%,49%{background:linear-gradient(180deg,#efebe2,#faf8f3)}
 50%,100%{background:repeating-linear-gradient(45deg,#25677d 0 6px,#2e7890 6px 12px)}}
@keyframes inv-rise{to{transform:translateY(-72%) rotate(-1.5deg)}}

/* Reduce Motion (v1.2.3): the same two pictures, sealed then opened, joined by
   fades instead of movement. Nothing drifts, sways or nudges. */
.invite.is-still .inv-envelope{animation:none}
.invite.is-still .inv-stage{transition:opacity .26s ease}
.invite.is-still.is-fading .inv-stage{opacity:0}
.invite.is-still.is-open .inv-seal{animation:none;opacity:0}
.invite.is-still.is-open .inv-flap{animation:none;transform:rotateX(180deg);z-index:0}
.invite.is-still.is-open .inv-flap i{animation:none;background:repeating-linear-gradient(45deg,#25677d 0 6px,#2e7890 6px 12px)}
.invite.is-still.is-open .inv-card{animation:none;transform:translateY(-72%) rotate(-1.5deg)}
.invite.is-still.is-open .inv-stage,.invite.is-still.is-done .inv-stage{transform:translateY(calc(var(--w)*.2))}

/* v1.3.0: soundtracks (js/sound.js). The picker in the visit form, the guest
   page's round speaker button, and the credit line under the plan. */
.sound-row{display:flex;gap:9px;align-items:center}
.sound-row select{flex:1;min-width:0}
.sound-row .sound-prev{flex:none;min-height:0;margin:0;padding:10px 14px;font-size:14px}
.sound-toggle{position:fixed;z-index:150;right:max(16px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 18px);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);box-shadow:var(--shadow-lift)}
.sound-toggle svg{width:22px;height:22px}
.sound-toggle[aria-pressed="false"]{color:var(--ink-2)}
body.has-envbadge .sound-toggle{bottom:calc(env(safe-area-inset-bottom) + 36px)}
.sound-credit{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--ink-2)}
.sound-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* v1.4.5: the fixed speaker button (48px, 16px from the right) covered the end
   of long credits. Keep the text out of that corner, and leave room below so
   scrolling to the bottom lifts the credit above the button. */
.sound-credit{padding:0 64px;margin-bottom:64px}

/* v1.4.2: on guest links the day headings, the day's own title and the slot
   names are hand-lettered, loaded by renderShared. Satisfy since v1.4.6 (was
   Patrick Hand; the owner wanted warmer and less like a child's hand). It has
   one weight, so it's set regular and larger instead of bolded, with no extra
   letter-spacing because its letters join. */
.guest-app .day-title,.guest-app .day-note,.guest-app .slot-name{font-family:"Satisfy","Caveat","Bradley Hand","Segoe Print",cursive;font-weight:400;letter-spacing:0}
.guest-app .day-title{font-size:26px;line-height:1.2}
.guest-app .day-note{font-size:21px;line-height:1.35;color:var(--ink)}
.guest-app .slot-name{font-size:20px;line-height:1.2;color:var(--ink-2)}
@media(max-width:540px){.guest-app .day-title{font-size:25px}.guest-app .slot-name{font-size:19px}}
/* v1.4.3: every other title on a guest link too: the visit's name, "Plans for
   your stay", place names, arrival/departure and the Stay line (all .tt).
   Subtext keeps Karla. The visit name's size is set inline, hence !important. */
/* v1.4.7–1.4.8: every title inside a day entry (restaurants, activities,
   meals, arrival/departure, Stay) went back to the plain bold Karla at the
   owner's request. The hand is kept for the visit name and "Plans for your
   stay" here, plus the day headings, day titles and slot names above. */
.guest-app .plan-head h2,.guest-app .share-band b{font-family:"Satisfy","Caveat","Bradley Hand","Segoe Print",cursive;font-weight:400;letter-spacing:0}
.guest-app .plan-head h2{font-size:35px!important;line-height:1.15}
.guest-app .share-band b{font-size:27px;line-height:1.2}
@media(max-width:540px){.guest-app .plan-head h2{font-size:32px!important}}

/* ── which copy am I looking at? ── */
.envbadge{position:fixed;left:0;right:0;bottom:0;z-index:120;pointer-events:none;
  text-align:center;font:700 10.5px/1.9 "Karla",sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:#2A2823;background:repeating-linear-gradient(
    45deg,#E7B33F,#E7B33F 10px,#d9a63a 10px,#d9a63a 20px);
  box-shadow:0 -2px 8px -4px rgba(0,0,0,.5)}
body.has-envbadge .tabbar{padding-bottom:calc(env(safe-area-inset-bottom) + 26px)}

/* Guest preview (v1.6.1): a phone-sized window on wide screens, the whole screen on phones. */
.scrim.preview-layer{align-items:center}
.preview-panel{display:flex;flex-direction:column;width:min(440px,100%);height:min(880px,100%);background:var(--paper);border:1px solid var(--paper-edge);border-radius:10px;overflow:hidden;box-shadow:0 4px 0 -1px var(--paper-edge),0 30px 100px #102c4666;animation:rise .22s ease both}
.preview-panel .sheet-head{padding:16px 16px 14px 20px}
.preview-panel .sheet-head h2{font-size:22px}
.preview-panel .sheet-head p{font-size:14px;margin-top:4px}
.preview-frame{flex:1;width:100%;min-height:0;border:0;background:var(--board)}
.preview-panel .empty{margin:20px}
@media(max-width:540px){.scrim.preview-layer{padding:0!important}.preview-panel{width:100%;height:100dvh;border:0;border-radius:0;padding-top:env(safe-area-inset-top)}}

/* To-do tab (v1.6.2): the checklists moved from the top bar to a fifth tab. */
.tabbar .tab-icon{position:relative;display:inline-flex;flex:none}
.tabbar .tab-icon .badge{top:-7px;right:-11px;min-width:20px;height:20px;font-size:11px;line-height:16px}
.todo-page{max-width:760px}
.todo-page .list{display:flex;flex-direction:column;gap:9px}
.todo-add{display:flex;flex-wrap:wrap;gap:9px;padding:12px;margin:0 0 12px}
.todo-add input{flex:2 1 220px}.todo-add select{flex:1 1 180px}.todo-add .btn{flex:none}
/* "Example" on the samples the app ships with (v1.11.0) */
.ex-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 7px;border-radius:3px;background:var(--manila);border:1px dashed var(--paper-edge);color:var(--ink-2);font:700 11px/1.5 var(--body-font);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.plan-head h2 .ex-tag{font-size:12px;vertical-align:5px}
/* The standard checklist, now on the To-do tab (v1.10.0) */
.std-box{margin-top:22px}
.std-box>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:15px 16px;cursor:pointer;list-style:none}
.std-box>summary::-webkit-details-marker{display:none}
.std-box>summary::after{content:"+";margin-left:auto;font-size:19px;font-weight:700;color:var(--ink-2);line-height:1}
.std-box[open]>summary::after{content:"\2212"}
.std-box>summary b{font-size:16px}.std-box>summary span{font-size:13px;color:var(--ink-2)}
.std-box .std-body{padding:0 16px 16px}
/* "Save this itinerary" on a guest link (v1.9.2). It rides along under the
   top bar, which is itself sticky and changes height at each width. */
.save-band{position:sticky;top:84px;z-index:30;display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:9px 12px;background:var(--manila);border:1px dashed var(--paper-edge);border-radius:6px;box-shadow:var(--shadow-flat)}
.save-band .kind{width:32px;height:32px;flex:none;border-radius:5px;display:grid;place-items:center;background:var(--paper);color:var(--mustard);border:1px solid var(--paper-edge)}
.save-band .btn{font-size:14px;padding:9px 15px;min-height:40px}
@media(max-width:800px){.save-band{top:72px}}
@media(max-width:540px){.save-band{top:68px}}
/* A switch that can't be used says so, and looks it (v1.8.1) */
.check:has(input:disabled){opacity:.55;cursor:not-allowed}.check input:disabled{cursor:not-allowed}
/* Profile (v1.7.0): the round picture top right, its menu and form */
.avatar-btn{flex:none;display:grid;place-items:center;width:46px;height:46px;margin-left:4px;border-radius:50%}
.avatar{--av:40px;width:var(--av);height:var(--av);flex:none;display:inline-grid;place-items:end center;overflow:hidden;border-radius:50%;background:var(--manila);color:var(--navy);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--paper-edge),var(--shadow-flat)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;align-self:stretch}
.avatar svg.i{width:82%;height:82%;filter:none;overflow:hidden}
.avatar-btn:hover .avatar{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--navy),var(--shadow-flat)}.avatar-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.drawer.drawer-right{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--paper-edge);box-shadow:-14px 0 40px #102c4640;animation-name:slideinright}
@keyframes slideinright{from{transform:translateX(100%)}to{transform:none}}
.profile-head{display:flex;align-items:center;gap:16px;margin:4px 0 18px}.profile-head .avatar{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--paper-edge),var(--shadow-flat)}
.drawer .profile-head h2{margin:0 0 4px;font:800 24px/1.1 var(--display-font);letter-spacing:-.6px;overflow-wrap:anywhere}.profile-head p{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.drawer-right>.btn{margin-bottom:18px}.drawer nav button{white-space:nowrap}.drawer nav button small{white-space:normal;text-align:right;padding-left:10px}
.profile-photo{display:flex;align-items:center;gap:18px;margin:4px 0 18px}.profile-photo .avatar{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--paper-edge),var(--shadow-flat)}.profile-photo-btns{display:flex;flex-wrap:wrap;gap:8px}.profile-photo-btns [hidden]{display:none}
.profile-danger{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}.btn.danger-text{color:var(--red)}.profile-danger .hint{margin-top:6px}
@media(max-width:360px){.avatar-btn{width:40px;height:40px;margin-left:0}.avatar-btn .avatar{--av:34px!important}}
/* Guest replies in the Host Plan (v1.6.6) */
.replies-bar{margin-top:10px}.replies-bar .replies-new{margin-left:auto;padding:2px 8px;border-radius:3px;background:var(--amber);color:var(--accent-ink);font-size:12px;font-weight:700}.replies-bar .replies-new+.go{margin-left:0}
.reply-card{padding:14px 16px;margin-bottom:10px}.reply-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:6px}.reply-head b{font-size:16px}
.reply-notes{margin:0 0 8px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.reply-card .row-sub svg{width:14px;height:14px;vertical-align:-2px;color:var(--navy)}
@media(max-width:800px){.tabbar{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:400px){.tabbar button{font-size:12px!important;letter-spacing:-.4px!important}}

/* v1.13.3: the button that offers the tour sits at the top of the Visits
   tab, above the "Your visits" banner, until it's closed. */
.tourpill{display:flex;align-items:center;gap:2px;width:fit-content;max-width:100%;margin:0 0 18px;padding:4px;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);border-radius:8px 8px 8px 2px;box-shadow:var(--shadow-flat)}
.tourpill-go{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 12px 9px 9px;border-radius:6px;font:700 15px/1.1 var(--body-font);color:var(--ink);text-align:left}
.tourpill-go:hover{background:var(--manila)}
.tourpill-go .i{flex:none;width:22px;height:22px;color:var(--amber)}
.tourpill .tourpill-x{min-width:34px;width:34px;height:34px}.tourpill .tourpill-x .i{width:13px;height:13px}
.tp-short{display:none}
@media(max-width:540px){.tourpill{margin-bottom:14px}.tp-long{display:none}.tp-short{display:inline}}

/* The tour itself: everything but the part being explained is dimmed, and
   the page can't be tapped until the tour closes. The dimming is light on
   purpose (v1.15.8: 40% in light mode, 55% in dark; it was 64% and 80%), so
   the rest of the tab can still be read behind it. The gold ring and the
   card's own shadow are what make them stand out. */
.tour{position:fixed;inset:0;z-index:85}
.tour-hole{position:fixed;border-radius:9px;pointer-events:none;box-shadow:0 0 0 3px var(--mustard),0 0 0 200vmax #0f272f66}
.tour.no-hole{background:#0f272f66}.tour.no-hole .tour-hole{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tour-hole{box-shadow:0 0 0 3px var(--mustard),0 0 0 200vmax #030b0e8c}:root:not([data-theme="light"]) .tour.no-hole{background:#030b0e8c}}
[data-theme="dark"] .tour-hole{box-shadow:0 0 0 3px var(--mustard),0 0 0 200vmax #030b0e8c}[data-theme="dark"] .tour.no-hole{background:#030b0e8c}
.tour.tour-moving .tour-hole,.tour.tour-moving .tour-card{transition:top .32s cubic-bezier(.2,.7,.3,1),left .32s cubic-bezier(.2,.7,.3,1),width .32s cubic-bezier(.2,.7,.3,1),height .32s cubic-bezier(.2,.7,.3,1)}
/* v1.13.1: the tab bar rises above the dimming, so the tab being explained
   shows as the current one. Its own background is dimmed to match, and the
   other tabs fade; it can't be tapped until the tour ends. */
body.touring .tabbar{z-index:86;pointer-events:none;box-shadow:inset 0 0 0 200vmax #0f272f66}
body.touring .tabbar button:not([aria-current="true"]),body.touring .tabbar::before,body.touring .tabbar::after{opacity:.72}
body.touring .tabbar button[aria-current="true"]{outline:3px solid var(--mustard);outline-offset:1px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body.touring .tabbar{box-shadow:inset 0 0 0 200vmax #030b0e8c}}
[data-theme="dark"] body.touring .tabbar{box-shadow:inset 0 0 0 200vmax #030b0e8c}
.tour-card{position:fixed;max-height:calc(100dvh - 24px);overflow:auto;padding:14px 18px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);border-radius:8px;box-shadow:var(--shadow-lift),0 20px 44px -14px #07181e99;animation:pop .2s ease both}
.tour-card::before{content:"";position:absolute;top:-1px;left:50%;width:78px;height:16px;margin-left:-39px;background:var(--tape);transform:rotate(-2deg)}
.tour-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -8px 2px 0}
.tour-where{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.tour-card .tour-x{min-width:32px;width:32px;height:32px}.tour-card .tour-x .i{width:13px;height:13px}
.tour-card h2{margin:0 0 6px;font:800 23px/1.15 var(--display-font);letter-spacing:-.5px}
.tour-text{font-size:15.5px;line-height:1.5;color:var(--ink-2)}.tour-text b{color:var(--ink)}
.tour-bar{height:4px;margin:14px 0 13px;border-radius:2px;background:var(--rule);overflow:hidden}
.tour-bar i{display:block;height:100%;background:var(--navy);transition:width .3s ease}
.tour-card.is-center .tour-bar{visibility:hidden;margin:8px 0 6px}
.tour-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.tour-foot .btn{min-height:42px;padding:10px 16px}
.tour-foot .btn svg{width:16px;height:16px}
@media(max-width:540px){.tour-card{padding:12px 16px 14px}.tour-card h2{font-size:21px}.tour-text{font-size:15px}.tour-foot .btn{flex:1 1 auto;padding:10px 12px}}

/* v1.14.0 */
/* Cover photo: the button under the visit's name in the Host Plan, and the
   picker in the visit form. */
.plan-head .cover-btn{min-height:0;margin-top:11px;padding:7px 12px;font-size:13.5px}
.plan-head .cover-btn svg{width:16px;height:16px}
.plan-head .thumb-btn .thumb{cursor:pointer}
.cover-pick{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
/* Pictures for home-cooked meals */
.meal-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.meal-icon{display:grid;place-items:center;height:46px;border-radius:6px;border:1px solid var(--paper-edge);background:var(--green-soft);color:var(--moss)}
.meal-icon svg{width:28px;height:28px}
.meal-icon:hover{border-color:var(--moss)}
.meal-icon[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);background:var(--blue-soft);color:var(--navy)}
/* A note for this visit or every visit */
.note-scope{margin-top:8px}
/* Notes can run over several lines now that they can be added to */
.note,.entry-note{white-space:pre-line}
/* "Enter it by hand" under the search */
.byhand-hint{margin-right:auto;align-self:center}

/* v1.14.1: the note at the end of each day, and Things to bring */
.daynote{display:block;width:100%;min-height:44px;margin:12px 0 0;padding:9px 11px;border:1px dashed var(--paper-edge);border-radius:5px;background:transparent;font:400 15px/1.5 var(--body-font);color:var(--ink);resize:none;overflow:hidden}
.daynote::placeholder{color:var(--ink-3);font-size:14px}
.daynote:focus{border-style:solid;border-color:var(--navy);outline:none}
.day-endnote{margin:12px 0 0}
.bring-card{padding:18px 18px 16px;margin-top:22px}
.bring-card .section-head{margin-top:0}
.bring-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.bring-item{align-items:center;padding:10px 12px}
.bring-item .icon-btn{margin:-8px -6px -8px auto}
button.bring-item{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.bring-item.done .bubble{background:var(--moss);border-color:var(--moss);color:var(--accent-ink)}
.bring-add{display:flex;gap:9px}.bring-add input{flex:1;min-width:0}.bring-add .btn{flex:none}
.guest-app .bring-card h2{font-family:"Satisfy","Caveat","Bradley Hand","Segoe Print",cursive;font-weight:400;letter-spacing:0;font-size:28px}

/* v1.15.0 ───────────────────────────────────────── */
/* Filled where an outline wouldn't read: a favourite's heart, rating stars. */
.heart[aria-pressed="true"] svg.i,.stars svg.i{fill:currentColor}
.tabbar button[aria-current="true"] svg.i{stroke-width:1.55}
.tabbar button img.tab-art{width:27px;height:27px;object-fit:contain;flex:none}
.tabbar .tab-icon img.tab-art{display:block}
@media(max-width:1150px){.tabbar button img.tab-art{width:26px;height:26px}}
@media(max-width:800px){.tabbar button img.tab-art{width:21px;height:21px}}
@media(max-width:360px){.tabbar button img.tab-art{width:19px;height:19px}}
.fab svg.i,.btn svg.i{stroke-width:1.55}

/* The logo is a button back to Visits. */
.brand-home{font:inherit;letter-spacing:inherit;color:inherit;padding:0;border-radius:8px;cursor:pointer}
.brand-home:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* Visits: pencil and Share side by side on each visit; the Examples group. */
.itin-row{grid-template-columns:64px minmax(0,1fr) auto}
.row-actions{display:flex;align-items:flex-start;gap:2px}
.itin-row .more-btn,.itin-row .share-btn{width:38px;min-width:38px}
.examples-group .section-head{flex-wrap:wrap;gap:8px 12px}
.clear-ex{min-height:0;padding:7px 12px;font-size:13.5px}
.clear-ex svg{width:15px;height:15px}
@media(max-width:800px){
  .itin-row{grid-template-columns:54px minmax(0,1fr)}
  .itin-row .row-actions{position:absolute;bottom:10px;right:8px}
  .itin-row .more-btn{position:static}
  .itin-row .visit-meta{padding-right:74px}
}
@media(max-width:540px){
  .itin-row{grid-template-columns:57px minmax(0,1fr)}
  .itin-row .row-actions{bottom:12px;right:10px}
  .itin-row .more-btn,.itin-row .share-btn{width:38px;min-width:38px;height:38px}
  .itin-row .visit-meta{padding-right:80px}
}
@media(max-width:360px){.itin-row{grid-template-columns:48px minmax(0,1fr)}}

/* Host Plan: the visit picker sits above the visit's name. */
.plan-switch{margin:0 0 14px}

/* A day: parts of the day appear once they hold something; the add buttons
   sit under them. */
.slot.part .slot-head{min-height:26px}
.slot.part .slot-name{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.day-add{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;border-bottom:1px dashed var(--rule)}
.day-add-btn{flex:1 1 150px;min-height:42px;padding:9px 12px;font-size:14.5px}
.day-add-btn.here{flex:1 1 100%;background:var(--moss);box-shadow:0 3px 0 color-mix(in srgb,var(--moss) 60%,#092631)}
.day-add-btn svg{width:16px;height:16px}
.tag.meal-tag{background:var(--blue-soft);color:var(--navy);border-color:transparent}

/* Ideas: the holding area above the days. */
.ideas-card{padding:18px 18px 6px;margin:18px 0 0;border-style:dashed}
.ideas-card .section-head{margin-top:0}
.ideas-card .day-add{border-bottom:0;padding-top:4px}
.ideas-list{margin:0 0 10px}
.entry.idea{cursor:grab;flex-wrap:wrap;user-select:none;-webkit-user-select:none}
.entry.idea .entry-body{flex:1 1 140px;min-width:0}
.idea-go{min-height:0;padding:7px 11px;font-size:13.5px;flex:none}

/* Choosing an activity or meal: Google's results, then adding by hand. */
.pick-head{margin:16px 0 8px}.pick-head h2{font-size:15px}
.byhand{margin:14px 0 6px;padding-top:12px;border-top:1px dashed var(--rule);display:flex;flex-direction:column;gap:8px}
.byhand .hint{margin:0 0 2px}
#hits:empty{display:none}

/* v1.15.10: a search result Google lists as closed says so */
.closed-note{color:var(--amber);font-weight:700;font-size:12.5px}

/* v1.16.0: tick boxes and plus buttons on plan entries and library rows,
   Google ratings, the bar that appears while things are ticked, the
   "Clear this itinerary" button, and Ideas beside the days on wide screens. */
.pick-box{display:grid;place-items:center;flex:none;width:24px;height:24px;cursor:pointer}
.pick-box input{width:19px;height:19px;margin:0;accent-color:var(--navy);cursor:pointer}
.entry.picked,.lib-row.picked{outline:2px solid var(--navy);outline-offset:-2px}

.swipe-front.entry{gap:8px;padding-left:7px;padding-right:4px}
.entry-open{display:flex;gap:10px;align-items:center;flex:1;min-width:0;text-align:left}
.entry-copy{min-width:36px;width:36px;height:36px;color:var(--ink-3)}
.entry-copy svg{width:18px;height:18px}

.tag.rating-tag{display:inline-flex;align-items:center;gap:3px;color:var(--ink)}
.rating-tag svg{width:12px;height:12px;color:var(--mustard);fill:currentColor}
.row-title .rating-tag{margin-left:8px;vertical-align:2px;font-family:var(--body-font)}

/* Library rows as a grid: tick, picture, name, then plus / heart / pencil,
   which drop to a second line where the row is narrow. */
.lib-row{display:grid!important;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"pick thumb body" "acts acts acts";column-gap:12px;row-gap:2px}
.lib-row .pick-box{grid-area:pick}.lib-row .thumb{grid-area:thumb}.lib-row .row-body{grid-area:body}
.lib-acts{grid-area:acts;display:flex;justify-content:flex-end;align-items:center;gap:2px}
.lib-row .lib-acts .heart{margin-left:0}
.lib-row .add-btn{color:var(--ink-3)}.lib-row .add-btn svg{width:20px;height:20px}
@media(max-width:1150px) and (min-width:541px){
  .lib-row{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"pick thumb body acts"}
}
@media(max-width:540px){.lib-row{column-gap:10px}.lib-row .add-btn{min-width:36px;width:36px;height:38px}}

.sel-bar{position:fixed;z-index:46;left:calc(max(0px,(100vw - 1600px)/2) + 258px);right:max(30px,calc((100vw - 1600px)/2 + 30px));bottom:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px 12px 18px;background:var(--ink);color:var(--paper);border-radius:8px;box-shadow:var(--shadow-lift)}
.sel-n{font-weight:700;font-size:15px}
.sel-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.sel-bar .sel-x{order:3}
.sel-bar .btn{min-height:40px;padding:8px 14px;font-size:14px}
.sel-bar .btn svg{width:16px;height:16px}
.sel-bar .btn.ghost{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 45%,transparent)}
body:has(.sel-bar) main{padding-bottom:230px}
@media(max-width:1150px){.sel-bar{left:232px;right:24px}}
@media(max-width:800px){
  .sel-bar{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 92px);padding:10px 12px;gap:8px}
  .sel-n{flex:1}
  .sel-bar .sel-x{order:0;min-height:34px;padding:5px 10px;font-size:13px}
  .sel-acts{flex:1 1 100%;margin-left:0;flex-wrap:nowrap}
  .sel-acts .btn{flex:1 1 auto;padding:8px 10px}
}

.clear-plan{display:flex;justify-content:center;margin:28px 0 0}
.clear-plan .btn{color:var(--red)}

@media(min-width:1151px){
  .plan-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:24px}
  .plan-side{grid-column:2;grid-row:1;position:sticky;top:100px;max-height:calc(100dvh - 116px);overflow-y:auto;overscroll-behavior:contain;border-radius:6px}
  .plan-main{grid-column:1;grid-row:1;min-width:0}
  .plan-side .ideas-card{margin:0}
  .plan-main .days-grid{grid-template-columns:1fr;margin-top:0}
  body:has(.pending-bar) .plan-side{top:172px;max-height:calc(100dvh - 188px)}
}
@media(min-width:1500px){.plan-main .days-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.17.0: the search box on the Activities and Meals tabs with its ways
   out under the list, and the gap an entry is being dragged into. */
.lib-search{margin:0 0 16px}
.lib-search input{width:100%}
.lib-row[hidden]{display:none!important}
.lib-more{align-items:flex-start;margin-top:18px}
.lib-more[hidden]{display:none}
.lib-more .btn{min-width:min(100%,280px)}
.swipe.drop-before{box-shadow:0 -4px 0 0 var(--moss)}
.swipe.drop-after{box-shadow:0 4px 0 0 var(--moss)}

/* v1.17.1: the plus beside Morning, Afternoon or Evening */
.slot.part .slot-head{justify-content:flex-start;gap:4px}
.part-add{min-width:30px;width:30px;height:30px;color:var(--ink-3)}
.part-add svg{width:16px;height:16px}

/* v1.17.4: Morning, Afternoon and Evening always show in the Host Plan */
.slot.part.is-empty{padding-bottom:6px;border-bottom:1px dashed var(--rule)}

/* v1.17.5: beside each part of the day, a plain plus then a small button
   each for an activity, a meal and a note */
.part-plus{display:inline-grid;place-items:center;width:18px;height:30px;margin-left:4px;color:var(--ink-3)}
.part-plus svg{width:13px;height:13px}
.slot.part .slot-head{gap:1px}

/* v1.17.6: a bin on each plan entry, left of its plus */
.entry-del{min-width:36px;width:36px;height:36px;color:var(--ink-3)}
.entry-del svg{width:17px;height:17px}
.entry-del:hover{color:var(--red)}
.entry-del+.entry-copy{margin-left:-6px}
@media(max-width:540px){.entry-del,.entry-copy{min-width:30px;width:30px}}

/* v1.17.11: room under the last row for the floating add button. Scrolled right
   to the bottom of Visits, Activities or Meals, the button used to sit on
   top of the last listing; now the page runs on far enough for the listing
   to clear it. The button is 56px tall and sits 28px up on a wide screen,
   98px (above the tab bar) on a narrow one, and at --getapp-top when the
   "Get the app" pop-up is under it. Only where the button is showing. */
body:has(#fabHost .fab:not([hidden])) main{padding-bottom:132px}
@media(max-width:800px){body:has(#fabHost .fab:not([hidden])) main{padding-bottom:calc(env(safe-area-inset-bottom) + 182px)}}
body.has-getapp:has(#fabHost .fab:not([hidden])) main{padding-bottom:calc(var(--getapp-top,108px) + 84px)}

/* v1.17.12: pull down to refresh. The browser's own pull-to-reload is turned
   off so ours runs instead: it syncs before it reloads anything. */
html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;left:50%;z-index:39;display:flex;align-items:center;gap:8px;padding:9px 15px;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);border-radius:999px;box-shadow:var(--shadow-lift);font-size:14px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-60px);transition:opacity .15s}
.ptr.on{opacity:1}
.ptr.busy{transition:opacity .15s,transform .2s}
.ptr-ic{display:grid;place-items:center;width:18px;height:18px;color:var(--navy);transition:transform .2s}
.ptr-ic svg{width:18px;height:18px}
.ptr.ready .ptr-ic{transform:rotate(180deg)}
.ptr.busy .ptr-ic{border:2px solid var(--paper-edge);border-top-color:var(--navy);border-radius:50%;animation:ptr-spin .7s linear infinite}
.ptr.busy .ptr-ic svg{display:none}
@keyframes ptr-spin{to{transform:rotate(360deg)}}

/* v1.17.14: the details sheet. Rating in the heading beside the tags line, and
   the row saying when it's planned for. */
.head-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.head-stars{font-size:14px}
.when-row{margin:0 0 16px}

/* v1.17.16: hosting mode. The bar under the visit's name that switches between
   the trimmed plan and the full editing view, and the plan without its
   Ideas column. */
.mode-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 0}
.mode-bar .btn{min-height:42px;padding:9px 14px;font-size:14.5px}
.mode-bar .btn svg{width:16px;height:16px}
.mode-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--green-soft);color:var(--moss);font-size:13.5px;font-weight:700}
.mode-tag svg{width:15px;height:15px}
.mode-tag.editing{background:var(--blue-soft);color:var(--navy)}
.plan-cols.hosting{display:block}
.plan-cols.hosting .days-grid{margin-top:24px}
.plan-cols.hosting .swipe-front.entry{padding-left:10px;padding-right:10px}
@media(min-width:1151px){.plan-cols.hosting .days-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.17.18: pictures on plan entries big enough to make out, in the Host
   Plan and on guest links (they were 34px, 29px on a phone). Notes and
   travel rows keep the small square. */
.swipe .entry:not(.ghosted) .kind,
.guest-app .day .entry:not(.ghosted):not(.travel) .kind{width:88px;height:88px;border-radius:7px}
.swipe .entry:not(.ghosted) .kind svg,
.guest-app .day .entry:not(.ghosted):not(.travel) .kind svg{width:40px;height:40px}
@media(max-width:540px){
  .swipe .entry:not(.ghosted) .kind,
  .guest-app .day .entry:not(.ghosted):not(.travel) .kind{width:72px;height:72px}
  .swipe .entry:not(.ghosted) .kind svg,
  .guest-app .day .entry:not(.ghosted):not(.travel) .kind svg{width:34px;height:34px}
}
/* v1.17.18: the tag chooser's search box and "More tags" */
.tagpick .tag-q{margin-bottom:9px}
.tagpick .chips{margin-bottom:0}
.chip[hidden]{display:none}
.tag-more{min-height:0;margin-top:9px;padding:7px 12px;font-size:13.5px}
.tag-more[hidden]{display:none}

/* v1.17.19: holding a tag opens its menu, so it mustn't start selecting text or the phone's own callout */
.tagpick .chip{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* v1.17.21: chosen tags lead the row and can be dragged into order; the two
   that show in plans wear a yellow outline. */
.tagpick .chip.chosen{cursor:grab;touch-action:none}
.tagpick .chip.shows{outline:3px solid var(--mustard);outline-offset:2px}
.tagpick .chip.lifting{opacity:.6;cursor:grabbing}
.tagpick .chips{row-gap:11px}