/* 1LinkTrip · "Field Map", Lagoon palette: Lagoon #0F4A50 · Seafoam #8FBDB6 · Route #E35B47 · Contour #C5DDD8 · Paper #EDF4F1.
   Old var names kept: --fog = page paper, --ink = lagoon text, --gate = the primary action color (lagoon),
   --forest = the brand color (now lagoon; the name predates the palette switch).
   Route coral is for marks and large type only; small coral text uses --route-ink (AA on paper). */
:root {
  --forest: #0F4A50; --sage: #8FBDB6; --route: #E35B47; --route-ink: #B4402F; --contour: #C5DDD8;
  --fog: #EDF4F1; --ink: #0F4A50; --slate: #41655F; --paper: #FFFFFF; --gate: #0F4A50; --rule: #CCDDD9;
  --field: #F8FBFA; --tint: #DDEBE7; --well: #D4E3DF;
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --brand: 'Newsreader', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 14px; --btn-r: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fog); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent, var(--gate)); outline-offset: 2px; }
.muted { color: var(--slate); } .small { font-size: .85rem; }
.lbl { font: 600 .68rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 42px; padding: .55em 1.05em; border-radius: var(--btn-r); border: 1.5px solid currentColor; background: transparent; text-decoration: none; font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: transform .12s ease, background .15s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent, var(--gate)); border-color: var(--accent, var(--gate)); color: var(--on-accent, #fff); }
.btn.ghost { border-color: transparent; }
.btn.sm { min-height: 36px; padding: .35em .9em; font-size: .88rem; }
.btn.big { min-height: 52px; padding: .7em 1.4em; font-size: 1.05rem; }
.btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.toast, #toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: .7em 1.2em; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 9999; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* brand lockup: the chain-link mark + the wordmark "1LinkTrip" in heavy Public Sans with a coral 1 (brand/1linktrip, direction B).
   The 1 is Route coral only where the wordmark is >= 18.67px bold (WCAG AA large text, 3.2:1 on paper); smaller lockups use --route-ink. */
.brand { display: inline-flex; align-items: center; gap: .31em; font: 760 1.17rem/1 var(--sans); text-decoration: none; letter-spacing: -.035em; color: var(--ink); }
.brand.sm { font-size: 1.05rem; }
.brand-mark { width: 25px; height: 25px; flex: none; color: var(--forest); }
.brand.sm .brand-mark { width: 22px; height: 22px; }
.brand .wm { white-space: nowrap; }
.brand .wm .one { color: var(--route); margin-right: .035em; }
.brand.sm .wm .one { color: var(--route-ink); }

/* ================= landing ================= */
.land { max-width: 1160px; margin: 0 auto; padding: 0 20px 40px; }
.land-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.land-hero { display: grid; gap: 40px; padding: 28px 0 56px; align-items: center; }
.land-copy h1 { font: 500 clamp(2.6rem, 10vw, 5.2rem)/.98 var(--brand); letter-spacing: -.025em; margin: 0 0 .4em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.lede { font-size: 1.13rem; color: #2A5852; max-width: 34em; margin: 0 0 1.6em; }
.land-copy .btns { margin-bottom: 1em; }
.land-ex h2, .land-what h2 { font: 600 1.5rem var(--brand); letter-spacing: -.02em; margin: 0 0 18px; }
.ex-grid { display: grid; gap: 14px; }
.ex-card { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 14px; text-decoration: none; background: var(--paper); border-radius: var(--r); padding: 10px 16px 10px 10px; transition: transform .15s, box-shadow .15s; }
.ex-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(15,74,80,.4); }
.ex-img { width: 92px; height: 92px; border-radius: 10px; background: #ccd center/cover; }
.ex-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-body b { font: 700 1.2rem/1.15 var(--display); }
.ex-body span:last-child { font-size: .88rem; color: var(--slate); }
.ex-code { font: 600 1.3rem var(--mono); color: var(--accent); }
.land-what { margin-top: 56px; }
.land-what dl { display: grid; gap: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.land-what dl > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.land-what dt { font: 600 1rem var(--brand); }
.land-what dd { margin: 0; color: #2A5852; }
.land-foot { margin-top: 40px; color: var(--slate); font-size: .85rem; }
.broken { padding: 60px 0; } .broken h1 { font: 500 2.4rem/1 var(--brand); }
@media (min-width: 860px) {
  .land-hero { grid-template-columns: 1.15fr 1fr; padding: 48px 0 80px; }
  .ex-grid { grid-template-columns: repeat(3, 1fr); }
  .ex-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 10px 16px 16px 10px; }
  .ex-img { grid-column: 1 / -1; width: 100%; height: 150px; }
  .ex-body { padding-left: 6px; }
  .land-what dl { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* ================= event page ================= */
.ev { --bg: #F2F3F6; --card: #FFFFFF; --ink: #12141B; --muted: #5D6372; --line: #E1E4EA; --chip: #EEF0F4;
  container-type: inline-size; background: var(--bg); color: var(--ink); min-height: 100vh; padding-bottom: 30px; }
.ev.dark { --bg: #0F1116; --card: #181B22; --ink: #EDEFF3; --muted: #9AA1AF; --line: #2A2E37; --chip: #22262E; }
.ev { --btn-r: 999px; }
/* Default theme ("Field Map"): pages whose accent is Lagoon get the paper/contour palette, a contour-line hero and
   coral route dots. Any other accent an organizer picks keeps the neutral look above, so custom colors and older
   links render as before. The match is on the inline style themeStyle() writes; `i` makes it case-insensitive.
   Pages saved with the earlier Forest default (#1F3A2E) are mapped to Lagoon in normalize(). */
.ev[style*="--accent:#0F4A50" i] { --bg: #EDF4F1; --card: #FFFFFF; --ink: #0F4A50; --muted: #41655F; --line: #D3E3DF; --chip: #DDEBE7;
  --tear: #E35B47; --btn-r: 10px; }
.ev.dark[style*="--accent:#0F4A50" i] { --bg: #0B1E20; --card: #12292C; --ink: #EDF4F1; --muted: #A3C1BC; --line: #23403F; --chip: #1C3638;
  --accent: #8FBDB6 !important; --on-accent: #0F4A50 !important; }
.ev[style*="--accent:#0F4A50" i] .ev-hero:not(.has-cover) { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360' preserveAspectRatio='xMaxYMin slice' fill='none' stroke='%238FBDB6' stroke-width='1.3' opacity='.38'%3E%3Cpath d='M330 0c18 70 140 96 270 74'/%3E%3Cpath d='M270 0c12 108 168 142 330 120'/%3E%3Cpath d='M206 0c6 150 208 196 394 172'/%3E%3Cpath d='M140 0c-8 196 248 256 460 224'/%3E%3Cpath d='M74 0c-26 246 290 318 526 280'/%3E%3Cpath d='M8 0c-40 290 330 382 592 340'/%3E%3Cpath d='M520 0c-6 24 22 40 80 30'/%3E%3C/svg%3E") right top/auto 100% no-repeat, var(--accent); }
.ev[style*="--accent:#0F4A50" i] .sec-h::before { width: 10px; height: 10px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2.5px var(--route); }
.ev[style*="--accent:#0F4A50" i] .ev-title { font-weight: 500; letter-spacing: -.02em; }
.ev[style*="--accent:#0F4A50" i] .sec-h { font-weight: 600; }
.ev .lbl { color: var(--muted); }
.ev .muted { color: var(--muted); }
.ev-hero { position: relative; min-height: 300px; display: flex; align-items: flex-end; background: var(--accent); color: var(--on-accent); overflow: hidden; }
.ev-hero.has-cover { color: #fff; min-height: 380px; }
.ev-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-hero.has-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,14,.05) 20%, rgba(8,10,14,.72) 100%); }
.ev-hero-in { position: relative; z-index: 1; padding: 28px 20px 64px; max-width: 760px; margin: 0 auto; width: 100%; }
.ev-kicker { font: 600 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; opacity: .92; }
.ev-title { font: 700 clamp(2.4rem, 11cqi, 4.6rem)/.98 var(--display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.ev-tagline { font-size: 1.12rem; margin: 12px 0 0; max-width: 32em; opacity: .95; }

/* the event summary card (date, venue, code): a dotted route line separates the code */
.stub { position: relative; z-index: 2; max-width: 720px; margin: -40px 14px 0; background: var(--card); border-radius: 16px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.45); display: grid; grid-template-columns: 1fr 104px; }
.stub-main { padding: 18px 18px 14px; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.stub-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stub-cell.wide { grid-column: 1 / -1; }
.stub-cell b { font-weight: 650; font-size: 1.02rem; line-height: 1.25; }
.stub-cell small { color: var(--muted); font-size: .86rem; }
.stub-tear { position: absolute; top: 14px; bottom: 14px; right: 104px; width: 4px; margin-right: -2px; background: radial-gradient(circle, var(--tear, color-mix(in srgb, var(--muted) 55%, transparent)) 1.4px, transparent 1.9px) center top/4px 8px repeat-y; }
.stub-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 6px; text-align: center; grid-row: 1 / 3; grid-column: 2; }
.stub-side .code { font: 600 2rem/1 var(--mono); color: var(--accent); letter-spacing: .02em; margin: 4px 0; }
.ev.dark .stub-side .code { filter: brightness(1.15); }
.stub-side small { color: var(--muted); font-size: .74rem; }
.stub-actions { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.stub-actions .btn { min-height: 38px; padding: .35em .9em; font-size: .88rem; }
@container (min-width: 600px) {
  .stub { margin: -48px auto 0; grid-template-columns: 1fr 140px; }
  .stub-tear { right: 140px; }
  .stub-main { grid-template-columns: 1.1fr .9fr 1.6fr; padding: 22px 24px 16px; }
  .stub-cell.wide { grid-column: auto; }
  .stub-actions { padding: 0 24px 22px; }
  .stub-side .code { font-size: 2.6rem; }
  .ev-hero-in { padding: 40px 24px 84px; }
  .ev-hero { min-height: 340px; } .ev-hero.has-cover { min-height: 460px; }
}

.ev-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 14px; margin: 14px auto 0; max-width: 760px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ev-nav::-webkit-scrollbar { display: none; }
.ev-nav a { flex: none; text-decoration: none; font-size: .86rem; font-weight: 600; padding: .4em .85em; border-radius: 999px; background: var(--chip); }
.ev-nav a:hover { background: var(--accent); color: var(--on-accent); }
/* minmax(0,1fr): an implicit auto track grows to its widest child's min-content (e.g. the 7-day weather scroller), which widened the page past the screen on phones */
.ev-body { max-width: 760px; margin: 0 auto; padding: 4px 14px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ev-body > * { min-width: 0; }
.ev-sec { background: var(--card); border-radius: 16px; padding: 20px 18px; scroll-margin-top: 64px; }
.sec-h { font: 700 1.45rem/1.1 var(--display); letter-spacing: -.01em; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.sec-h::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }
.sub-h { font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.sec-b > :first-child, .tgroup:first-child .sub-h { margin-top: 0; }
.stub + .ev-body { margin-top: 16px; }
.airports + p { margin-top: 8px !important; }
.sec-b p { margin: 0 0 .8em; } .sec-b p:last-child { margin-bottom: 0; }
.host { display: flex; gap: .6em; align-items: baseline; flex-wrap: wrap; }
.ev .btn { border-color: var(--line); color: var(--ink); }
.ev .btn:hover { border-color: var(--accent); }
.ev .btn.primary { border-color: var(--accent); color: var(--on-accent); }

/* schedule */
.day + .day { margin-top: 16px; }
.day-h { font: 600 .95rem var(--sans); margin: 0 0 6px; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 5.6em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.tl time { font: 600 .86rem/1.5 var(--mono); color: var(--accent); }
.ev.dark .tl time { filter: brightness(1.2); }
.tl b { display: block; font-weight: 600; } .tl span { color: var(--muted); font-size: .9rem; }

/* links/notes */
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.links a, .links .note { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 16px; border-radius: 12px; background: var(--chip); text-decoration: none; }
.links a b, .links .note b { font-weight: 650; }
.links a span { grid-column: 1; color: var(--muted); font-size: .86rem; }
.links .note { grid-template-columns: 1fr; } .links .note span { color: var(--ink); opacity: .85; font-size: .94rem; }
.links .arr { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; color: var(--accent); }
.links a:hover { outline: 1.5px solid var(--accent); }

/* weather */
.wx-head { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; flex: 1 1 auto; min-width: 0; }
.wx-top { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.wx-units { flex: none; display: inline-flex; background: var(--chip, #EEF1F4); padding: 3px; border-radius: 999px; }
.wx-units button { all: unset; box-sizing: border-box; cursor: pointer; min-width: 40px; min-height: 32px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; font: 600 .85rem var(--sans, system-ui); color: var(--muted, #5B6472); }
.wx-units button[aria-pressed="true"] { background: var(--card, #fff); color: var(--ink, #12141B); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.wx-units button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wx { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.wx-d { scroll-snap-align: start; background: var(--chip); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.wx-date { font-weight: 650; display: flex; flex-direction: column; line-height: 1.2; } .wx-date small { color: var(--muted); font-weight: 400; }
.wx-ic { width: 34px; height: 34px; color: var(--accent); }
.ev.dark .wx-ic { filter: brightness(1.2); }
.wx-t { display: flex; align-items: baseline; gap: 6px; } .wx-t b { font: 650 1.5rem var(--sans); } .wx-t span { color: var(--muted); font-size: .9rem; }
.wx-x { font: 500 .78rem var(--mono); color: var(--ink); }
.wx-l { font-size: .8rem; color: var(--muted); }

/* map */
.map-wrap { margin: 0 -18px -20px; position: relative; }
.map { height: 340px; border-radius: 0 0 16px 16px; background: var(--chip); z-index: 1; }
.map-legend { position: absolute; top: 10px; left: 10px; right: 60px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 500; pointer-events: none; }
.map-legend .chip { pointer-events: auto; background: rgba(255,255,255,.94); color: #12141B; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.map-legend .chip:not(.on) { opacity: .55; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; }
.leaflet-container { font: inherit; }
.pin span { display: block; width: 30px; height: 40px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M15 0C6.7 0 0 6.6 0 14.8 0 25.6 15 40 15 40s15-14.4 15-25.2C30 6.6 23.3 0 15 0zm0 20a5.6 5.6 0 1 1 0-11.2A5.6 5.6 0 0 1 15 20z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M15 0C6.7 0 0 6.6 0 14.8 0 25.6 15 40 15 40s15-14.4 15-25.2C30 6.6 23.3 0 15 0zm0 20a5.6 5.6 0 1 1 0-11.2A5.6 5.6 0 0 1 15 20z'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* trip inputs */
.trip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.trip .origin { grid-column: 1 / -1; }
.trip-2 .narrow { grid-column: 1 / -1; max-width: 8em; }
@container (min-width: 600px) { .trip-2 { grid-template-columns: 1fr 1fr 6em; } .trip-2 .narrow { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.ev input, .ev select { width: 100%; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); padding: .5em .7em; font-size: 16px; }
.ev input:focus { border-color: var(--accent); outline: none; }
.ev.dark input { color-scheme: dark; }
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.35); }
.ac-list button { width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; display: block; }
.ac-list button:hover { background: var(--chip); }
.ac-list b { font-family: var(--mono); color: var(--accent); margin-right: 4px; } .ac-list span { display: block; color: var(--muted); font-size: .82rem; }

.airports { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.airports li { display: grid; grid-template-columns: 4.2em 1fr; gap: 4px 12px; padding: 12px; border-radius: 12px; background: var(--chip); }
.ap-code { font: 600 1.6rem/1 var(--mono); color: var(--accent); grid-row: 1 / 3; padding-top: 4px; }
.ev.dark .ap-code { filter: brightness(1.2); }
.ap-info { display: flex; flex-direction: column; } .ap-info b { font-weight: 600; font-size: .95rem; } .ap-info span { color: var(--muted); font-size: .84rem; }
.airports .btns { gap: 6px; margin-top: 6px; } .airports .btn { min-height: 36px; font-size: .84rem; padding: .3em .8em; background: var(--card); }
.row-links { display: grid; gap: 8px; }
.row-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: var(--chip); text-decoration: none; font-weight: 600; font-size: .95rem; }
.row-link small { font: 500 .72rem var(--mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.row-link:hover { outline: 1.5px solid var(--accent); }

/* places */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { border: 0; border-radius: 999px; padding: .4em .85em; font-size: .85rem; font-weight: 600; background: var(--chip, #EEF0F4); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.chip span { opacity: .6; font-weight: 500; }
.chip.on { background: var(--accent, var(--gate)); color: var(--on-accent, #fff); }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.plist li:first-child { border-top: 0; }
.plist b { display: block; font-weight: 620; } .plist span { color: var(--muted); font-size: .86rem; text-transform: none; }
.plist .dist { font: 600 .9rem var(--mono); text-align: right; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.plist .dist small { font: 400 .74rem var(--sans); color: var(--muted); }
.mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mini-b { font-size: .78rem; font-weight: 600; text-decoration: none; padding: .32em .7em; border-radius: 999px; border: 1.3px solid var(--line); }
.mini-b:first-child { border-color: var(--accent); }
.mini-b:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.mode { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: var(--chip); text-decoration: none; }
.mode span { font-weight: 650; } .mode small { font-size: .72rem; color: var(--muted); }
.mode:hover { outline: 1.5px solid var(--accent); }
.tgroup .plist li { padding: 9px 0; }
@container (min-width: 600px) { .tgroups { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .modes { grid-template-columns: repeat(6, 1fr); } }

.cal p { margin-bottom: 12px !important; }
.skel { display: grid; gap: 8px; } .skel span { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 0%, var(--line) 50%, var(--chip) 100%); background-size: 200% 100%; animation: sk 1.2s infinite linear; }
.skel span:nth-child(2) { width: 80%; } .skel span:nth-child(3) { width: 60%; } .skel em { font-style: normal; font-size: .8rem; color: var(--muted); }
.skel .slow { opacity: 0; animation: show 0s 8s forwards; } @keyframes show { to { opacity: 1; } }
@keyframes sk { to { background-position: -200% 0; } }
.ev-foot { max-width: 760px; margin: 22px auto 0; padding: 0 20px; color: var(--muted); font-size: .8rem; text-align: center; }
.ev-foot a { color: var(--muted); }

/* viewer chrome */
.vbar { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.vbar > * { pointer-events: auto; }
.own-stale { position: fixed; z-index: 1000; left: 10px; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 52px); max-width: 740px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: #FFF4E5; color: #7C2D12; font: 600 .86rem/1.3 var(--sans, system-ui); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.own-stale .btn { flex: none; }
.vbar .brand { background: rgba(255,255,255,.92); padding: 6px 12px 6px 9px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); }
.vbar .btn { background: rgba(255,255,255,.92); border-color: transparent; color: var(--ink); }
.vbar-note { white-space: nowrap; margin-left: auto; font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 5px 9px; border-radius: 999px; }
.viewer .ev-hero-in { padding-top: 76px; }

/* ================= builder ================= */
.builder { min-height: 100vh; }
.b-top { position: sticky; top: 0; z-index: 1001; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--fog); border-bottom: 1px solid var(--rule); }
.seg { display: inline-flex; background: var(--well); padding: 3px; border-radius: 999px; }
.seg button { border: 0; background: none; padding: .35em 1em; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.b-form { padding: 14px 14px 80px; max-width: 560px; margin: 0 auto; }
.b-note { background: var(--paper); border-left: 4px solid var(--gate); padding: 10px 14px; border-radius: 8px; font-size: .9rem; margin: 0 0 12px; }
fieldset { border: 0; margin: 0 0 12px; padding: 16px; background: var(--paper); border-radius: var(--r); display: grid; gap: 12px; }
legend { float: left; font: 600 1.1rem var(--brand); padding: 0; margin-bottom: 2px; width: 100%; }
.b-form input, .b-form select, .b-form textarea { width: 100%; min-height: 44px; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; background: var(--field); font-size: 16px; }
.b-form textarea { resize: vertical; line-height: 1.45; }
.b-form input:focus, .b-form select:focus, .b-form textarea:focus { border-color: var(--gate); outline: none; background: #fff; }
.b-form input[type="color"] { width: 44px; padding: 3px; }
.hint { margin: 0; font-size: .82rem; color: var(--slate); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.search { display: flex; gap: 8px; } .search input { flex: 1; }
.vres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vres:empty { display: none; }
.vres button { width: 100%; text-align: left; background: var(--tint); border: 1.5px solid transparent; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.vres button:hover { border-color: var(--gate); }
.vres b { display: block; } .vres span { font-size: .82rem; color: var(--slate); }
.venue-sel { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--tint); border-radius: 10px; padding: 12px; }
.venue-sel div { display: flex; flex-direction: column; min-width: 0; } .venue-sel span { font-size: .85rem; color: var(--slate); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--rule); cursor: pointer; }
.sw.on { box-shadow: 0 0 0 2.5px var(--ink); }
.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.fontb { border: 1.5px solid var(--rule); background: var(--field); border-radius: 10px; padding: 10px; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.fontb.on, .seg2 button.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg2 { display: flex; gap: 6px; } .seg2 button { flex: 1; border: 1.5px solid var(--rule); background: var(--field); border-radius: 10px; padding: 10px; font-weight: 600; cursor: pointer; }
.secs { list-style: none; margin: 0; padding: 0; }
.secs li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid #EDEFF3; }
.secs li:first-child { border-top: 0; }
.secs label { display: flex; align-items: center; gap: 10px; font-weight: 550; cursor: pointer; }
.secs input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--gate); }
.ic { border: 1.5px solid var(--rule); background: #fff; border-radius: 8px; min-width: 36px; height: 36px; cursor: pointer; font-weight: 700; margin-left: 4px; }
.ic:disabled { opacity: .3; cursor: default; }
.ic.del { font-size: .8rem; font-weight: 600; padding: 0 10px; justify-self: start; color: #A3272D; }
.rowed { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--tint); }
.b-end { display: flex; gap: 10px; }
.b-preview { display: none; }
.builder[data-tab="preview"] .b-form { display: none; }
.builder[data-tab="preview"] .b-preview { display: block; }
.b-preview .ev { min-height: auto; }
dialog { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(15,74,80,.5); }
.pub { padding: 22px; display: grid; gap: 12px; }
.pub h2 { font: 600 1.4rem var(--brand); margin: 0; } .pub p { margin: 0; }
.pub textarea { width: 100%; font: .78rem/1.4 var(--mono); border: 1.5px solid var(--rule); border-radius: 10px; padding: 10px; background: var(--field); word-break: break-all; resize: none; }
@media (min-width: 980px) {
  .builder { display: grid; grid-template-columns: minmax(380px, 460px) 1fr; grid-template-rows: auto 1fr; height: 100vh; }
  .b-top { grid-column: 1 / -1; }
  .seg { display: none; }
  .b-form, .builder[data-tab="preview"] .b-form { display: block; overflow-y: auto; max-width: none; margin: 0; padding: 16px 16px 60px; }
  .b-preview, .builder[data-tab] .b-preview { display: block; overflow-y: auto; padding: 18px; background: var(--well); }
  .b-frame { max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px -30px rgba(0,0,0,.5); }
  .b-frame .ev-nav { position: static; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 380px) { .vbar-note { display: none; } }
.stub-side .big-day { font: 600 1.5rem/1 var(--mono); color: var(--ink); }

/* travel mode filter */
.mode-bar { margin-bottom: 14px; }
.ev [hidden] { display: none !important; }

/* type-specific details */
.secs li[hidden] { display: none; }
.course-img { display: block; margin-bottom: 10px; } .course-img img { width: 100%; border-radius: 12px; display: block; }
.tpin span { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font: 700 .72rem var(--mono, monospace); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: #12141B; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* my itinerary */
.itin-ev { opacity: .6; }
.tl.itin .mini { margin-top: 6px; }
.itin-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.itin-form { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--chip); }
.itin-form .trip { margin: 10px 0 12px; }
.itin-form .wide { grid-column: 1 / -1; }
.itin-form .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ev textarea { width: 100%; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: inherit; padding: .6em .7em; font: inherit; font-size: 16px; resize: vertical; }
.ev textarea:focus, .ev select:focus { border-color: var(--accent); outline: none; }
.ev select { color: inherit; }
.ev input { color: inherit; }
.tl.itin span { display: block; }
button.mini-b { background: transparent; font-family: inherit; color: inherit; cursor: pointer; }

/* packing list */
.pack { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
@container (min-width: 600px) { .pack { grid-template-columns: 1fr 1fr; column-gap: 10px; } }
.pack li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--chip); }
.pack label { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.pack input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
.pack li.done span { text-decoration: line-through; color: var(--muted); }
.pack-x { border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; width: 32px; height: 32px; border-radius: 999px; cursor: pointer; flex: none; }
.pack-x:hover { background: var(--line); color: var(--ink); }
.pack-add { display: flex; gap: 8px; margin-top: 10px; }
.pack-add input { flex: 1; }

/* ================= v2 ================= */
/* shared form controls for the editor sheet and setup */
.sheet-in input, .sheet-in select, .sheet-in textarea, .setup input, .setup select { width: 100%; min-height: 44px; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; background: var(--field); font-size: 16px; font-family: inherit; color: var(--ink); }
.sheet-in textarea { resize: vertical; line-height: 1.45; }
.sheet-in input:focus, .sheet-in textarea:focus, .setup input:focus { border-color: var(--gate); outline: none; background: #fff; }
.sheet-in input[type="color"] { width: 44px; padding: 3px; }

/* example bar scrolls away instead of covering the page */
.vbar { position: absolute; }
.viewer { position: relative; }
.viewer .tab-h { padding-top: 70px; }

/* guest tabs: bottom bar on phones, top bar on wider screens and in previews */
.ev-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; z-index: 900; background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ev-tabs button { border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 600; font-size: .72rem; font-family: inherit; cursor: pointer; padding: 8px 4px; }
.ev-tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ev-tabs button[aria-selected="true"] { color: var(--accent); }
.ev.dark .ev-tabs button[aria-selected="true"] { filter: brightness(1.25); }
.ev:not(.is-preview) .ev-tabs { position: fixed; left: 0; right: 0; bottom: 0; padding: 4px 6px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.ev.has-tabs:not(.is-preview) { padding-bottom: 84px; }
.ev.is-preview .ev-tabs { position: sticky; top: 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .ev:not(.is-preview) .ev-tabs { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); padding: 0 calc(50% - 300px); }
  .ev.has-tabs:not(.is-preview) { padding-bottom: 0; }
  .ev-tabs button { flex-direction: row; justify-content: center; gap: 8px; font-size: .9rem; padding: 14px 6px; border-bottom: 2.5px solid transparent; }
  .ev-tabs svg { width: 20px; height: 20px; }
  .ev-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); }
  .viewer .ev:not(.is-preview) .ev-tabs { order: 0; }
}
.viewer .ev.has-tabs .ev-tabs { z-index: 1001; }
.tab-h { max-width: 760px; margin: 0 auto; padding: 22px 16px 6px; }
.tab-h h1 { font: 700 2rem/1.05 var(--display); margin: 2px 0 0; letter-spacing: -.01em; }
.ev-panel > .ev-body { padding-top: 10px; }
.stub + .ev-body { margin-top: 16px; }

/* pop-up menus */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; z-index: 950; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); display: grid; }
.menu-pop a, .menu-pop button { text-align: left; border: 0; background: none; padding: 11px 12px; border-radius: 9px; font-weight: 600; font-size: .92rem; font-family: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--chip); }

/* schedule with the guest's bookings mixed in */
.sched-seg { margin-bottom: 12px; max-width: 280px; }
.ev .seg2 button { background: var(--chip); border-color: transparent; color: var(--ink); font-size: .85rem; padding: 8px; }
.ev .seg2 button.on { background: var(--ink); color: var(--bg); }
.tl li.mine { background: color-mix(in srgb, var(--accent) 9%, var(--card)); border-top-color: transparent; border-radius: 12px; padding: 10px 10px; margin: 4px -10px; }
.tl li.mine + li { border-top-color: transparent; }
.tl li.mine time { color: var(--ink); }
.yours { font: 600 .62rem var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 5px; vertical-align: 2px; margin-left: 4px; }
.tl .tl-link { display: inline-block; margin-top: 4px; font-weight: 600; font-size: .86rem; color: var(--accent); text-decoration: none; }

/* travel tab */
.trip-sec { padding: 16px; }
.tripbar { display: grid; grid-template-columns: 1fr 1fr 5.5em; gap: 10px; }
.tripbar .origin { grid-column: 1 / -1; }
.tripbar + .mode-bar { margin: 14px 0 0; }
@container (min-width: 600px) { .tripbar { grid-template-columns: 1.4fr 1fr 1fr 5.5em; } .tripbar .origin { grid-column: auto; } }
.block-row { margin-bottom: 8px; }
.row-link.hl { border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.row-link .badge { font: 600 .62rem var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 5px; vertical-align: 2px; margin-left: 4px; }
.row-link .sub { display: block; font-weight: 400; font-size: .82rem; font-family: inherit; letter-spacing: 0; text-transform: none; color: var(--muted); text-align: left; margin-top: 2px; }
.plist .more { display: none; }
.plist .more-li { display: block; border: 0; padding-top: 10px; }

/* my trip */
.bookings { margin-bottom: 12px; }
.pack-wrap > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pack-wrap > summary::-webkit-details-marker { display: none; }
.pack-wrap > summary .sec-h { margin: 0; }
.pack-wrap[open] > summary { margin-bottom: 14px; }
.pack-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .84rem; color: var(--muted); white-space: nowrap; }
.pack-sum i { display: block; width: 120px; height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.pack-sum i b { display: block; height: 100%; background: var(--accent); }

/* editor */
.acc { background: var(--paper); border-radius: var(--r); margin-bottom: 8px; }
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 16px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary b { font: 600 1.02rem var(--brand); }
.acc > summary small { margin-left: auto; color: var(--slate); font-size: .82rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.acc-b { padding: 0 16px 16px; display: grid; gap: 12px; }
.st { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule); flex: none; display: grid; place-items: center; }
.st.ok { background: #2E7D32; border-color: #2E7D32; }
.st.ok::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.b-h { font: 500 1.45rem var(--brand); letter-spacing: -.02em; margin: 22px 2px 4px; }
.grp { font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin: 14px 2px 8px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acard { position: relative; text-align: left; background: var(--paper); border: 1.5px solid transparent; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-height: 104px; cursor: pointer; font: inherit; color: inherit; }
.acard:hover { border-color: var(--gate); }
.acard b { font-size: .95rem; margin-top: 4px; } .acard span { font-size: .78rem; color: var(--slate); line-height: 1.3; }
.aic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--tint); color: var(--gate); }
.aic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acard .plus { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--gate); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .95rem; }
.acard.on .plus { background: #2E7D32; font-size: .75rem; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 999px; padding: 7px 12px 7px 8px; font-size: .86rem; font-weight: 600; cursor: pointer; }
.tool input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool .sw { width: 30px; height: 18px; border-radius: 9px; background: #B9CFCA; position: relative; transition: background .15s; flex: none; }
.tool .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.tool input:checked + .sw { background: #2E7D32; } .tool input:checked + .sw::after { left: 14px; }
.tool input:focus-visible + .sw { outline: 2px solid var(--gate); outline-offset: 2px; }
.b-form .b-end { margin-top: 22px; }
dialog.sheet { width: min(560px, 100vw); max-height: min(88vh, 900px); }
.sheet-in { padding: 10px 20px 22px; display: grid; gap: 12px; }
.sheet-in h2 { font: 500 1.4rem var(--brand); margin: 6px 0 0; display: flex; justify-content: space-between; align-items: center; }
.sheet-in .x { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--slate); cursor: pointer; padding: 4px 8px; }
.sheet-b { display: grid; gap: 12px; }
.sheet-b .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--contour); margin: 0 auto; display: none; }
@media (max-width: 640px) {
  dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; max-height: 92vh; }
  .grab { display: block; }
}

/* setup */
.setup { min-height: 100vh; background: var(--fog); }
.su-main { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 18px 18px max(22px, env(safe-area-inset-bottom)); }
.prog { display: flex; gap: 5px; margin-bottom: 16px; } .prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--contour); } .prog i.on { background: var(--gate); }
.su-top { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.link { border: 0; background: none; font-weight: 600; font-size: .95rem; font-family: inherit; color: var(--slate); cursor: pointer; padding: 4px 0; } .link.strong { color: var(--gate); }
.su-main h1 { font: 500 clamp(1.8rem, 6vw, 2.5rem)/1.06 var(--brand); letter-spacing: -.025em; margin: 10px 0 20px; }
.su-body { display: grid; gap: 12px; }
.grow { flex: 1; min-height: 12px; }
.su-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.su-type { text-align: left; background: var(--paper); border: 2px solid transparent; border-radius: 16px; padding: 14px; min-height: 108px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: inherit; }
.su-type:hover, .su-type.on { border-color: var(--gate); }
.su-type i { width: 28px; height: 28px; border-radius: 8px; display: block; margin-bottom: 6px; }
.su-type b { font-size: 1.02rem; } .su-type span { font-size: .8rem; color: var(--slate); line-height: 1.3; }
.su-type:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
.su-res { background: var(--paper); border-radius: 14px; overflow: hidden; display: grid; }
.su-res button { text-align: left; border: 0; border-top: 1px solid var(--rule); background: none; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.su-res button:first-child { border-top: 0; }
.su-res button.on { background: var(--tint); } .su-res b { display: block; } .su-res span { font-size: .82rem; color: var(--slate); }
.su-ticket { display: grid; grid-template-columns: 1fr 80px; background: var(--paper); border-radius: 14px; border-left: 5px solid var(--acc); box-shadow: 0 10px 26px -14px rgba(0,0,0,.35); margin: 12px 0 14px; overflow: hidden; }
.su-ticket > div { padding: 11px 13px; display: flex; flex-direction: column; } .su-ticket .r { border-left: 0; background: radial-gradient(circle, var(--route) 1.4px, transparent 1.9px) left top/4px 7px repeat-y; align-items: center; justify-content: center; }
.su-ticket b { font: 600 1.05rem/1.15 var(--brand); } .su-ticket span { font-size: .82rem; color: var(--slate); }
.su-ticket .r b { font: 600 1.25rem var(--mono); color: var(--acc); }
.su-ticket .lbl { font: 600 .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ghost:not(.btn) { color: #A3BAB5 !important; }
.su-main .btn.big { width: 100%; }
.su-main .btn:disabled { opacity: .4; cursor: default; }
.su-done { width: 60px; height: 60px; border-radius: 50%; background: #2E7D32; color: #fff; display: grid; place-items: center; font-size: 1.8rem; }
.su-link { display: flex; gap: 8px; align-items: center; background: var(--paper); border-radius: 12px; padding: 6px 6px 6px 12px; }
.su-link input { border: 0; background: none; min-height: 36px; padding: 0; font: .8rem var(--mono); color: var(--slate); }
.su-share .btn { width: 100%; }
.su-later { background: var(--paper); border-radius: 14px; overflow: hidden; display: grid; }
.su-later button { display: flex; justify-content: space-between; align-items: center; border: 0; border-top: 1px solid var(--rule); background: none; padding: 13px 14px; font-weight: 600; font-size: .95rem; font-family: inherit; color: var(--ink); cursor: pointer; }
.su-later button:first-child { border-top: 0; } .su-later b { color: var(--gate); }
.su-preview { display: none; }
@media (min-width: 980px) {
  .setup { display: grid; grid-template-columns: minmax(440px, 560px) 1fr; height: 100vh; overflow: hidden; }
  .su-main { max-width: none; margin: 0; padding: 32px 44px; overflow-y: auto; height: 100vh; }
  .su-ticket { display: none; }
  .su-preview { display: block; position: relative; overflow-y: auto; height: 100vh; padding: 22px; background: var(--well); }
  .su-tag { position: absolute; top: 34px; right: 36px; z-index: 950; font: 600 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.9); padding: 4px 8px; border-radius: 6px; color: var(--slate); }
  .su-preview .b-frame { border-radius: 18px; overflow: hidden; }
}
.b-frame { overflow: clip !important; }
.vbar { z-index: 1002; }
@media (min-width: 760px) { .ev:not(.is-preview) .ev-tabs { padding: 0 max(calc(50% - 300px), 200px); } }
.su-tag { top: auto !important; bottom: 34px; }
@media (min-width: 760px) { .viewer .tab-h { padding-top: 28px; } }

/* phase B */
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qr-dlg { text-align: center; }
.qr-box { background: #fff; border-radius: 12px; padding: 8px; }
.qr-box svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.qr-dlg .btns { justify-content: center; display: flex; flex-wrap: wrap; gap: 8px; }
.lang-row { margin: 0 0 10px; }
.lang-sel { font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); color: var(--ink); }
#print-card { display: none; }
@media print {
  @page { size: 4in 6in; margin: 0; }
  body { background: #fff !important; }
  body > *:not(#print-card) { display: none !important; }
  #print-card { display: flex !important; width: 4in; height: 6in; box-sizing: border-box; padding: .35in; border-top: .18in solid var(--accent); font-family: var(--sans); color: #12141B; }
  .pc-in { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
  .pc-k { font: 600 8pt var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #5D6372; margin: 0 0 6pt; }
  #print-card h1 { font: 700 24pt/1.05 var(--display); margin: 0 0 8pt; }
  .pc-when { font-size: 11pt; font-weight: 600; margin: 0; } .pc-where { font-size: 10pt; color: #5D6372; margin: 2pt 0 0; }
  .pc-qr { margin: auto 0 6pt; width: 2.6in; } .pc-qr svg { width: 100%; height: auto; display: block; }
  .pc-cta { font-size: 9pt; color: #5D6372; margin: 0; }
}

/* dates with optional times (setup + editor) */
.when { display: grid; gap: 12px; }
.when-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.when.timed .when-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.when label small { font: inherit; text-transform: none; letter-spacing: 0; opacity: .75; margin-left: 4px; }
.when input[type="date"], .when input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; line-height: 1.3; }
.when input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.when input::-webkit-datetime-edit { padding: 0; }
.when-tg { justify-self: start; padding: 4px 0; font-weight: 600; }
.stub-cell .cd { display: block; margin-top: 2px; font: 600 .72rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

/* phase C: hosted pages */
.land-nav { display: flex; align-items: center; gap: 14px; }
.pub-host { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--fog, #EDF4F1); font-size: .92rem; }
.pub-host p { margin: 0 0 8px; } .pub-host.ok { background: #E3F2E5; } .pub-host .signin .search input { min-width: 0; }
.pub-host input { width: 100%; min-height: 44px; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; font-size: 16px; background: #fff; }
.mono { font-family: var(--mono, monospace); }
.chk { display: flex; gap: 10px; align-items: center; font-weight: 600; } .chk input { width: 20px; height: 20px; min-height: 0; accent-color: var(--gate); }
.rsvp { display: grid; gap: 12px; } .rsvp .lbl-s { font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.rsvp input, .rsvp textarea { width: 100%; min-height: 44px; border: 1.5px solid var(--line, var(--rule)); border-radius: 10px; padding: .5em .7em; font: inherit; font-size: 16px; background: var(--card, #fff); color: var(--ink); box-sizing: border-box; }
.rsvp .seg2 button { font: inherit; font-weight: 600; color: var(--ink); background: var(--card, #fff); border-color: var(--line, var(--rule)); }
.rsvp .seg2 button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rsvp-msg { margin: 0; min-height: 1em; font-size: .9rem; } .rsvp-done p { margin: 0 0 10px; }
.ann { border-left: 4px solid var(--accent); }
.ann-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ann-list time { font: 600 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.ann-list p { margin: 2px 0 0; white-space: pre-wrap; }
.mine { max-width: 820px; margin: 0 auto; padding: 0 18px 60px; }
.mine-nav { display: flex; gap: 14px; align-items: center; } .mine-nav a:not(.btn) { font-weight: 600; color: inherit; }
.mine .land-top { gap: 10px; } .mine-nav a { white-space: nowrap; } @media (max-width: 359px) { .mine .land-top .brand .wm { display: none; } } /* fits one row down to 320px */
.mine-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.mine-h h1 { font: 500 clamp(1.6rem, 5vw, 2.2rem)/1.1 var(--brand); margin: 10px 0; }
.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mine-list li { background: var(--paper, #fff); border-radius: 14px; padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.mine-list li > div:first-child { display: grid; gap: 2px; } .mine-list span { color: var(--slate); font-size: .9rem; }
.mine-sec { background: var(--paper, #fff); border-radius: 14px; padding: 16px; margin: 14px 0; }
.mine-sec h2 { font: 600 1.15rem var(--brand); margin: 0 0 6px; }
.mine-sec textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; font: inherit; font-size: 16px; margin: 6px 0; }
.mine .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.mine .signin .search input { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; font-size: 16px; }
.tbl-wrap { overflow-x: auto; } .rs-tbl { border-collapse: collapse; width: 100%; font-size: .9rem; }
.rs-tbl th, .rs-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.rs-tbl th { font: 600 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.gl-list { margin: 0; padding-left: 1.1em; columns: 2; } @media (max-width: 560px) { .gl-list { columns: 1; } }

/* friendly date fields: readable text on top, the native picker underneath */
.datef { position: relative; }
.datef-txt { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; width: 100%; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; background: var(--field); font-size: 16px; color: var(--ink, #12141B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datef-txt.ph { color: var(--slate); }
.datef-txt::after { content: ''; margin-left: auto; width: 18px; height: 18px; flex: none; opacity: .55; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat; }
.when .datef input[type="date"], .datef input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .011; cursor: pointer; border: 0; padding: 0; margin: 0; min-height: 0; -webkit-appearance: none; appearance: none; }
.datef:focus-within .datef-txt { border-color: var(--gate); background: #fff; }

/* setup type tiles: icons instead of color blocks */
.su-type i.ti { background: none !important; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fog, #EEF0F4) !important; color: var(--ink, #12141B); }
.su-type i.ti svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.su-type.on i.ti { background: var(--gate) !important; color: #fff; }

/* editor Design section */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.preset { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule); background: #fff; border-radius: 12px; padding: 9px 10px; cursor: pointer; font-size: 1rem; font-weight: 700; color: #12141B; text-align: left; }
.preset.dark { background: #15171E; color: #fff; border-color: #15171E; }
.preset i { width: 18px; height: 18px; border-radius: 50%; background: var(--pa); flex: none; }
.preset.on { box-shadow: 0 0 0 2.5px var(--ink); }
.custom-c { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem inherit; cursor: pointer; }
.custom-c input[type="color"] { width: 34px !important; height: 34px; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: none; cursor: pointer; }
.hex { width: 92px !important; min-height: 36px !important; font-family: var(--mono, monospace) !important; font-size: 15px !important; text-transform: uppercase; }
.cover-row { display: flex; gap: 10px; align-items: center; } .cover-row img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; } .cover-row input { flex: 1; min-width: 0; }
.order { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.order li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--field); border: 1.5px solid var(--rule); border-radius: 10px; padding: 6px 8px 6px 12px; }
.order li.off { opacity: .6; } .order .chk { font-weight: 600; }
.order .mv { display: flex; gap: 4px; } .order .mv button { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--rule); background: #fff; font-size: 1rem; cursor: pointer; }
.order .mv button:disabled { opacity: .3; cursor: default; }

/* new version available */
.upd { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--forest); color: #fff; font: 600 .9rem var(--sans); box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; }
.datef input[type="date"] { color: transparent !important; background: transparent !important; -webkit-text-fill-color: transparent; }
.datef input[type="date"]::-webkit-datetime-edit, .datef input[type="date"]::-webkit-date-and-time-value, .datef input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }

/* trips: day-by-day builder */
.plan-day { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; display: grid; gap: 8px; }
.plan-day:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.plan-day h3 { margin: 0; font: 600 1rem var(--brand); } .dayn { font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gate, var(--accent)); margin-right: 4px; }
.plan-day .btn.sm { justify-self: start; }
.plan-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.plan-top .mv { display: flex; gap: 4px; } .plan-top .mv button { width: 36px; height: 40px; border-radius: 8px; border: 1.5px solid var(--rule); background: #fff; cursor: pointer; } .plan-top .mv button:disabled { opacity: .3; }
.tl em.kind { font: 600 .62rem var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--accent); border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; margin-left: 4px; vertical-align: 2px; }
.tl li.k-note b { font-weight: 600; font-style: italic; }

/* phase D: in-app places with filters */
.pf { display: grid; gap: 8px; margin-bottom: 6px; }
.pf .chips { margin: 0; }
.pf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-sel select { font: inherit; font-size: .9rem; min-height: 38px; border: 1.5px solid var(--line, var(--rule)); border-radius: 999px; padding: 6px 30px 6px 12px; background: var(--card, #fff); color: var(--ink); max-width: 210px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-count { margin: 4px 0 8px; }
.places li { padding: 0; }
.place-row { all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; }
.place-row > div { display: grid; gap: 2px; min-width: 0; } .place-row b { font-weight: 650; } .place-row span { color: var(--muted, var(--slate)); font-size: .88rem; }
.place-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.tags em { font-style: normal; font-size: .72rem; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.tags em.open, .pc-hours .open { color: #1B7F3B; background: #E3F2E5; } .tags em.closed, .pc-hours .closed { color: #9A3412; background: #FDECE3; }
.pc-hours .open, .pc-hours .closed { padding: 1px 8px; border-radius: 999px; font-size: .8rem; }
dialog.place-sheet { padding: 0; border: 0; border-radius: 20px 20px 0 0; width: min(560px, 100vw); max-height: 86vh; margin: auto auto 0; background: var(--card, #fff); color: var(--ink, #12141B); }
@media (min-width: 760px) { dialog.place-sheet { border-radius: 20px; margin: auto; } }
dialog.place-sheet::backdrop { background: rgba(10, 12, 18, .45); }
.pc { position: relative; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.pc h2 { margin: 0; font: 700 1.5rem/1.15 var(--display, inherit); padding-right: 36px; } .pc .lbl { margin: 0; }
.pc .x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fog, #EEF0F4); font-size: 1.3rem; cursor: pointer; color: inherit; }
.pc-dist, .pc-addr { margin: 0; color: var(--muted, var(--slate)); }
.pc-hours ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: .92rem; }
.pc .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 600px) { .pf-cats, .pf-diet { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 2px; } .pf-cats::-webkit-scrollbar, .pf-diet::-webkit-scrollbar { display: none; } .pf-cats .chip, .pf-diet .chip { flex: none; } }

/* Google ratings and photos (only with a key) */
.rt { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; font-size: .86rem; }
.stars { color: #B8860B; font-weight: 700; } .rt small { color: var(--muted, var(--slate)); }
.place-row .rt { color: inherit; }
.pc-photo { margin: 0 0 4px; border-radius: 14px; overflow: hidden; background: var(--fog, #EEF0F4); }
.pc-photo img { display: block; width: 100%; height: 190px; object-fit: cover; }
.pc-photo figcaption { font-size: .7rem; color: var(--muted, var(--slate)); padding: 4px 8px; }
.g-attr { margin-top: 6px; }
.oauth { display: grid; gap: 8px; margin-bottom: 4px; } .oauth .btn { width: 100%; justify-content: center; } .or { text-align: center; margin: 4px 0 8px; }

/* home: My pages and samples */
.ex-card { position: relative; color: inherit; }
.ex-hit { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.ex-acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (min-width: 760px) { .ex-acts { grid-column: 1 / -1; justify-content: flex-start; padding-left: 6px; } }
@media (max-width: 759px) { .ex-card { grid-template-columns: 76px 1fr; } .ex-img { width: 76px; height: 76px; } .ex-acts { grid-column: 1 / -1; justify-content: flex-start; } }
.land-mine { margin: 10px 0 40px; } .land-mine h2 { font: 600 1.5rem var(--brand); letter-spacing: -.02em; margin: 0 0 14px; } .land-mine h2 small { font: 500 .9rem var(--sans, inherit); }
.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-list li { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; background: var(--paper); border-radius: var(--r); padding: 12px 14px; }
.mp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.mp-t { display: grid; gap: 2px; min-width: 0; } .mp-t b { font: 700 1.05rem/1.2 var(--display); } .mp-t span { color: var(--slate); font-size: .86rem; }
.mp-b { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 760px) { .mp-list li { grid-template-columns: auto 1fr auto; } .mp-b { grid-column: auto; } }
/* in-app "are you sure?" dialog (confirmDlg) */
dialog.confirm-dlg { width: min(400px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); }
.cf-in { padding: 22px 20px 18px; display: grid; gap: 8px; }
.cf-in h2 { font: 600 1.3rem/1.25 var(--brand); letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.cf-in p { margin: 0; color: var(--slate); }
.cf-b { justify-content: flex-end; margin-top: 12px; }
.cf-b .btn { min-height: 44px; min-width: 96px; }
.btn.danger { background: var(--route-ink); border-color: var(--route-ink); color: #fff; }

/* add to itinerary + the guest's own itinerary */
.plan-add { display: grid; gap: 8px; margin: 4px 0; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.plan-add .btns { margin: 0; } .plan-have { margin: 0; font-weight: 650; }
.plan-form { display: grid; gap: 8px; } .plan-form .field span { font: 600 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.plan-form input, .plan-form select, .plan-ctl select, .plan-conf { font: inherit; font-size: 16px; min-height: 40px; border: 1.5px solid var(--line, var(--rule)); border-radius: 10px; padding: 6px 10px; background: var(--card, #fff); color: var(--ink); width: 100%; box-sizing: border-box; }
.pc .sec-acts .btn { font-size: .9rem; }
.plan-tools { display: grid; gap: 8px; margin-bottom: 6px; } .plan-tools .seg2 { max-width: 280px; }
.plan-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.plan-row { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line, var(--rule)); background: var(--card, #fff); }
.plan-row.booked { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.plan-row.bk { background: transparent; border-style: dashed; }
.plan-main { display: grid; gap: 2px; min-width: 0; } .plan-name { font-weight: 700; font-size: 1rem; text-align: left; color: var(--ink); padding: 0; }
.plan-book { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; } .plan-conf { max-width: 200px; min-height: 36px; }
.plan-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .plan-ctl select { width: auto; min-height: 36px; font-size: .9rem; }
.plan-ctl .mv { display: flex; gap: 4px; } .plan-ctl .mv button { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--line, var(--rule)); background: var(--card, #fff); color: var(--ink); }
.spin { display: grid; place-items: center; } .spin span { width: 28px; height: 28px; border-radius: 50%; background: #E8A100; color: #fff; display: grid; place-items: center; font-size: 15px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.gp-search { position: relative; display: flex; gap: 8px; margin-bottom: 10px; }
.gp-search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; min-height: 44px; border: 1.5px solid var(--line, var(--rule)); border-radius: 999px; padding: 6px 16px; background: var(--card, #fff); color: var(--ink); }
.gp-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: var(--card, #fff); color: var(--ink); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.gp-sugg button { all: unset; box-sizing: border-box; display: grid; width: 100%; padding: 9px 10px; border-radius: 10px; cursor: pointer; } .gp-sugg button:hover, .gp-sugg button:focus-visible { background: var(--fog, #EEF0F4); }
.gp-sugg b { font-weight: 650; } .gp-sugg span { font-size: .82rem; color: var(--muted, var(--slate)); }
.gp-q { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; font-weight: 650; }
.ac-wrap { position: relative; flex: 1; min-width: 0; } .ac-wrap > input { width: 100%; box-sizing: border-box; }
.gp-sugg button { grid-template-columns: 22px 1fr; gap: 10px; align-items: center; }
.ac-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted, var(--slate)); }
.ac-t { display: grid; gap: 1px; min-width: 0; } .ac-t b, .ac-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-by { text-align: right; font-size: .68rem; color: var(--muted, var(--slate)); padding: 2px 8px 0; }
.su-ai { margin: -6px 0 16px; } .su-ai-form { display: grid; gap: 8px; margin-top: 8px; padding: 14px; background: var(--paper, #fff); border-radius: 14px; }
.su-ai-form .search input { flex: 1; min-width: 0; }
.ai-read { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }

/* multi-city route */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.route-stop { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line, var(--rule)); cursor: pointer; }
.route-stop b { display: block; } .route-stop small { color: var(--muted, var(--slate)); }
.route-n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; flex: none; }
/* trip Itinerary: everything left-aligned — city line (tap → Nearby), then "Day 3 · Thu, Apr 3" in the accent, then the
   items as a plain list: a narrow muted time column, the title, details behind a tap */
.legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .legs + .day, .legs + .docs { margin-top: 18px; }
.leg-h { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 2px 0 6px; border-bottom: 2px solid var(--ink, #12141B); }
button.leg-h { cursor: pointer; } button.leg-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leg-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.leg-t b { font: 700 1.05rem var(--sans); } .leg-t small { color: var(--muted, var(--slate)); font-size: .88rem; }
.leg-go { font-style: normal; color: var(--muted, var(--slate)); font-size: 1.2rem; line-height: 1; }
.leg-days { margin: 10px 0 0; min-width: 0; }
#sec-schedule.itin .day-h { color: var(--accent); font: 700 .95rem var(--sans); }
#sec-schedule.itin .day-h .day-city { font: 500 .85rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted, var(--slate)); margin-left: 4px; }
.legs ~ .day .day-h, .leg-days .day-h { margin-bottom: 2px; }
.ev.dark #sec-schedule.itin .day-h { filter: brightness(1.25); }
.itin .tl li { grid-template-columns: 4.4em 1fr; gap: 10px; padding: 9px 0; }
.itin .tl time { color: var(--muted, var(--slate)); font: 500 .8rem/1.6 var(--mono); }
.itin .tl b { font-weight: 600; }
.itin .tl li.mine { margin: 4px 0; padding: 9px 8px; }
.route-ed { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.stop-chips { margin-bottom: 8px; } .day-city { font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, var(--slate)); margin-left: 6px; }
.inbox-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); margin-bottom: 10px; }
.bk-ask { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); margin: 8px 0; }
.bk-ask p { margin: 0 0 4px; } .bk-ask p:first-child { font-weight: 600; } .bk-ask .btns { margin-top: 8px; }
.tl li.co b { font-weight: 500; opacity: .8; }
.pc .btn.book { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.airline-pick { display: grid; gap: 8px; margin-top: 12px; } .airline-pick .pf-sel { display: grid; gap: 4px; } .airline-pick .pf-sel span { font-size: .85rem; color: var(--muted, var(--slate)); }
.airline-pick .al-h { margin: 6px 0 0; }
.al-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .al-chips .more { display: none; }
.al-chips .chip { min-height: 36px; text-decoration: none; color: inherit; max-width: 100%; } .al-chips .al-more { background: transparent; box-shadow: inset 0 0 0 1px var(--rule, #D9DCE3); }
.ai-edit { display: grid; gap: 6px; background: var(--paper); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; border: 1.5px dashed color-mix(in srgb, var(--gate) 45%, transparent); }
.ai-edit > label { font: 600 .95rem var(--brand); } .ai-edit textarea { flex: 1; min-width: 0; font: inherit; font-size: 16px; border: 1.5px solid var(--rule); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.ai-edit .search { align-items: flex-start; }
.ai-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.ai-diff li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 10px; background: var(--field); border-radius: 10px; }
.ai-diff .was { color: #9A3412; text-decoration: line-through; } .ai-diff .now { color: #1B7F3B; font-weight: 600; } .ai-diff .arr { display: none; }
@media (min-width: 560px) { .ai-diff li { grid-template-columns: 1.2fr 1fr auto 1fr; align-items: baseline; gap: 8px; } .ai-diff .arr { display: inline; color: var(--slate); } }
.ai-diff li.rm { background: color-mix(in srgb, #9A3412 7%, var(--field)); } .ai-diff .rm-t { color: #9A3412; font-weight: 700; }
@media (min-width: 560px) { .ai-diff li.rm { grid-template-columns: 1.2fr 2fr auto; } }
.vbar .lang-sel { max-width: 120px; padding: 5px 10px; background: rgba(255,255,255,.92); border-color: transparent; color: var(--ink); min-height: 34px; }
.tr-langs .chip { cursor: pointer; } .tr-review { border-top: 1px solid var(--rule); padding: 8px 0; } .tr-review summary { cursor: pointer; }
.tr-row { display: grid; gap: 4px; margin: 8px 0; } .tr-src { font-size: .85rem; color: var(--slate); } .tr-row textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; border: 1.5px solid var(--rule); border-radius: 8px; padding: 6px 8px; }
.tr-note { font-size: .85rem; color: var(--slate); margin-top: 4px; }
[dir="rtl"] .ev { text-align: right; }
/* hosted/demo pages: the language picker sits beside "Edit a copy", so the desktop tab row leaves room for both */
.vbar .lang-sel { max-width: 104px; }
@media (min-width: 760px) { body:has(.vbar .lang-sel) .ev:not(.is-preview) .ev-tabs { padding: 0 max(calc(50% - 300px), 250px); } }
/* the viewer bar must fit the screen: brand, "Example page", the edit button and the language picker
   were all non-shrinking and needed ~524px, so on phones the bar ran off the right edge and widened the page.
   The edit button and picker keep their size; the note drops out first, then the brand collapses to its mark. */
.vbar > * { flex: none; min-width: 0; }
.vbar .brand { flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
.vbar .brand-mark { flex: none; }
.vbar-note { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 559px) { .vbar:has(.lang-sel) .vbar-note { display: none; } }
@media (max-width: 429px) { .vbar:has(.lang-sel) .brand { font-size: 0; gap: 0; padding-right: 9px; } }
/* builder header (brand, Edit/Preview, Publish) needs ~380px; on narrower phones the brand shows just its mark */
@media (max-width: 419px) { .b-top .brand { font-size: 0; gap: 0; } .b-top .brand-mark { flex: none; } }
/* "Flying into" pick: chosen airport row, pickers in Rental car and My trip, Add to my trip */
.airports li.on { box-shadow: inset 0 0 0 2px var(--accent); }
.airports .chip.ap-pick { min-height: 36px; font-size: .84rem; background: var(--card); }
.airports .chip.ap-pick.on { background: var(--accent, #0E4B50); color: var(--on-accent, #fff); }
.airports .btns .mini-b { align-self: center; }
.ap-transfer { margin-top: 10px; }
.ap-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.ap-sel > span { font-size: .85rem; color: var(--muted, var(--slate)); }
.ap-sel select { max-width: 100%; }
.ap-mine { margin-bottom: 12px; }
.add-trip { display: flex; justify-content: flex-end; }
.airports li .btns { grid-column: 1 / -1; }
/* Add a booking sheet */
.itin-sheet { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--chip); display: grid; gap: 10px; }
.itin-sheet textarea { width: 100%; box-sizing: border-box; }
.add-choices { display: grid; gap: 8px; }
.add-choice { font: inherit; font-weight: 600; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line, var(--rule)); background: var(--card, #fff); color: var(--ink); cursor: pointer; }
.add-choice:hover { border-color: var(--accent); }
.file-pick { cursor: pointer; justify-self: start; } .file-pick.busy { opacity: .55; pointer-events: none; }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-card { padding: 12px; border-radius: 12px; background: var(--card, #fff); }
.rv-card .trip { margin: 0 0 8px; }
.rv-card .wide { grid-column: 1 / -1; }
.bk-signin .signin { margin-top: 6px; }
.add-bk { margin-top: 10px; }

/* ---------- messages: guest ↔ host threads, groups, Send to ---------- */
.msg-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; background: var(--chip, #EEF0F4); justify-self: start; }
.msg.out { justify-self: end; background: color-mix(in srgb, var(--accent, #3048F0) 14%, var(--card, #fff)); }
.msg .who { display: block; font: 600 .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-compose { display: flex; gap: 8px; align-items: flex-end; }
.msg-compose textarea { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--line, var(--rule)); border-radius: 10px; padding: .5em .7em; font: inherit; font-size: 16px; background: var(--card, #fff); color: var(--ink); box-sizing: border-box; resize: vertical; }
[data-gm-msg] { min-height: 1em; margin-top: 4px; }
.gm-anns { margin-bottom: 14px; }
.ev-tabs button.has-new span::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: top; }
.inbox { display: grid; gap: 8px; margin-top: 12px; }
.thr { border-radius: 12px; background: var(--chip, #F1F2F5); padding: 10px 12px; }
.thr summary { cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; list-style: none; }
.thr summary::-webkit-details-marker { display: none; }
.thr-who { min-width: 0; overflow-wrap: anywhere; } .thr-last { grid-column: 1 / -1; color: var(--slate); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr[open] summary { margin-bottom: 10px; } .thr[open] .thr-last { display: none; }
.thr .dot, .badge { align-self: center; }
.thr .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gate, #3048F0); }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--gate, #3048F0); color: #fff; }
.gm-on { margin: 4px 0 2px; }
.grp-ed { display: grid; gap: 10px; }
.grp-card { border-radius: 12px; background: var(--chip, #F1F2F5); padding: 10px 12px; display: grid; gap: 8px; }
.grp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .grp-h b { overflow-wrap: anywhere; }
.grp-card .tool { justify-self: start; background: var(--card, #fff); }
.grp-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.grp-more textarea { width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; font-size: 16px; border: 1.5px solid var(--rule); border-radius: 10px; padding: .5em .7em; }
.grp-more .btns { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.grp-mem { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; }
.grp-mem li { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .grp-mem span { overflow-wrap: anywhere; min-width: 0; }
.grp-mem .link { font-size: 1.1rem; padding: 0 6px; }
.send-to { margin: 10px 0 2px; } .send-to .lbl-s { display: block; font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.send-to .chips { margin-bottom: 0; }
/* review cards in "Add a booking": date-and-time fields get the full row so the time isn't clipped on a phone */
.rv-card .field.when-f { grid-column: 1 / -1; }
.rv-card input[type="datetime-local"], .rv-card input[type="date"] { width: 100%; min-width: 0; box-sizing: border-box; }
.thr .msg.in { background: var(--card, #fff); }
/* custom sections */
.ev-sec.cs .cs-img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 0 0 12px; }
.ev-sec.cs .links { margin-top: 12px; } .ev-sec.cs .sec-b > .links:first-child { margin-top: 0; }
/* documents: guest list + "Upload a document" in the builder */
.docs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sec-b > .docs:first-child { margin-top: 0; }
.docs li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--chip); }
.docs .doc-main { display: flex; align-items: center; gap: 10px; flex: 1 1 140px; min-width: 0; text-decoration: none; color: inherit; }
.docs .doc-main b { font-weight: 650; overflow-wrap: anywhere; }
.doc-ic { flex: none; font: 700 .62rem var(--mono, monospace); letter-spacing: .04em; padding: 5px 6px; border-radius: 6px; background: var(--accent, #0E4B50); color: var(--on-accent, #fff); }
.docs .doc-a { display: flex; gap: 6px; margin-left: auto; }
.docs .doc-a a { color: inherit; }
.doc-up { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule, #E1E4EA); }
.doc-up [hidden] { display: none !important; }
.doc-up .hint:empty { display: none; }
.doc-main-up { margin: 0 0 14px; padding: 0; border: 0; }
.cs-row .doc-up { margin-top: 4px; }
.doc-h { margin: 0; font-weight: 600; font-size: .9rem; }
.doc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-drop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px; border: 1.5px dashed var(--rule, #C9D3D1); border-radius: 12px; }
.doc-drop.over { border-color: var(--accent, #0F4A50); background: var(--field, #F8FBFA); }
@media (hover: none) { .doc-drop { padding: 0; border: 0; } .doc-or { display: none; } }
body.doc-dragging::after { content: 'Drop to upload a document'; position: fixed; inset: 10px; z-index: 9999; display: grid; place-items: center; border: 2px dashed var(--accent, #0F4A50); border-radius: 16px; background: rgba(255, 255, 255, .82); color: var(--accent, #0F4A50); font: 600 1.1rem/1.3 system-ui, sans-serif; pointer-events: none; }
.doc-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-files li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.doc-files a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name { margin: 0; overflow-wrap: anywhere; }
.dr { display: grid; gap: 8px; }
.dr .sub-h { margin: 10px 0 0; }
.dr-item { padding: 10px; border-radius: 12px; background: var(--field, #F8FBFA); border: 1px solid var(--rule, #E1E4EA); display: grid; gap: 6px; min-width: 0; }
.dr-top { display: flex; gap: 8px; align-items: center; }
.dr-top select { flex: 1; min-width: 0; }
.dr-k { flex: 1; font-weight: 600; font-size: .9rem; }
.dr-x { font-size: 1.2rem; line-height: 1; padding: 4px 10px; }
.dr-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 8px; min-width: 0; }
.dr-f .wide { grid-column: 1 / -1; }
.dr-f .field { margin: 0; min-width: 0; }
.dr-f input, .dr-f textarea, .dr-f select { width: 100%; box-sizing: border-box; min-width: 0; }
.dr-ro { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.dr-lead { margin: 0; font-size: .9rem; color: var(--slate, #5B6472); }
.dr-gs { display: grid; border: 1px solid var(--rule, #E1E4EA); border-radius: 12px; overflow: hidden; }
.dr-g + .dr-g { border-top: 1px solid var(--rule, #E1E4EA); }
.dr-gh { display: flex; align-items: center; gap: 10px; padding: 0 0 0 12px; }
.dr-gh .dr-on { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--accent, #0F4A50); margin: 0; }
.dr-gt { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 13px 12px 13px 0; cursor: pointer; }
.dr-gt:focus-visible { outline: 2px solid var(--accent, #0F4A50); outline-offset: -2px; }
.dr-gn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dr-gn small { display: block; font-size: .8rem; }
.dr-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; margin-right: 4px; transition: transform .15s; }
.dr-g.open .dr-chev { transform: rotate(-135deg); }
.dr-g.off .dr-gn { opacity: .5; text-decoration: line-through; }
.dr-lines { list-style: none; margin: 0; padding: 0 12px 10px 42px; display: grid; gap: 2px; }
.dr-line { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 7px 8px; border-radius: 8px; font-size: .9rem; overflow-wrap: anywhere; cursor: pointer; }
.dr-line:hover, .dr-line:focus-visible { background: var(--field, #F8FBFA); }
.dr-line:focus-visible { outline: 2px solid var(--accent, #0F4A50); }
.dr-done { justify-self: start; }
@media (max-width: 360px) { .dr-lines { padding-left: 12px; } }
/* map: "Search this area" after the guest pans or zooms */
.area-btn { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500; font: inherit; font-size: .86rem; font-weight: 650; padding: .55em 1.1em; border-radius: 999px; border: 0; background: var(--card, #fff); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.22); cursor: pointer; white-space: nowrap; }
.area-btn[hidden] { display: none; }
/* compact search + chips + sort on long guest lists (rental counters, hotels, sights) */
.lf { display: grid; gap: 8px; margin-bottom: 6px; }
.lf .gp-search { margin: 0; }
.lf .gp-search input { min-height: 40px; }
.lf-chips { margin: 0; align-items: center; }
.lf-sort { margin-left: auto; }
.lf-sort select { min-height: 34px; font-size: .85rem; }
.cars b a { color: inherit; text-decoration: none; } .cars b a:hover { text-decoration: underline; }
.cars li > div > span { display: block; } .cars .tags { margin-top: 4px; }
/* Design: one dropdown per setting with a small preview; cover / section photo upload with drop zone */
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.dgrid .field { min-width: 0; }
.dsel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dsel select { flex: 1; min-width: 0; }
.dprev { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 1rem; background: var(--pa, var(--field, #F8FBFA)); color: var(--pc, #12141B); border: 1px solid var(--rule, #E1E4EA); }
.dprev.dark { box-shadow: inset 0 -8px 0 #12141B; }
.ddot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.ddot.lt { background: #fff; } .ddot.dk { background: #12141B; }
.custom-row { align-items: center; }
@media (max-width: 340px) { .dgrid { grid-template-columns: 1fr; } }
.ph-up { display: grid; gap: 8px; }
.ph-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; display: block; }
.ph-drop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px; border: 1.5px dashed var(--rule, #C9D3D1); border-radius: 12px; }
.ph-drop.over { border-color: var(--accent, #0F4A50); background: var(--field, #F8FBFA); }
.ph-or { display: none; }
@media (hover: hover) and (pointer: fine) { .ph-or { display: inline; } }
.ph-up input[type="url"] { width: 100%; box-sizing: border-box; }
.ph-up .hint:empty { display: none; }
.field .ph-up label.file-pick, .field .brand-up label.file-pick, .field .brand-m label.chk { font-family: inherit; font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--ink, inherit); margin: 0; }

/* Nearby: the guest's hotel (bar above the map, deep-blue bed pin, on top; its name + dates on hover / in the tap popup) and saved spots (gold stars) */
.hotel-bar { margin: 0 0 12px; }
.hb { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, #1E3A8A 40%, transparent); background: color-mix(in srgb, #1E3A8A 6%, var(--card, #fff)); }
.hb-ic { width: 30px; height: 38px; flex: none; }
.hb-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .hb-t b { overflow-wrap: anywhere; } .hb-t .lbl { margin: 0; }
.hb-set { display: grid; gap: 6px; } .hb-set label { font-weight: 600; font-size: .92rem; } .hb-set .link { justify-self: start; }
.hb-set .search { display: flex; gap: 8px; } .hb-set .search input, .hb-set .ac-wrap { flex: 1; min-width: 0; }
.hpin { overflow: visible; } .hpin img { width: 32px; height: 40px; display: block; }
.gmap-lbl { background: #fff; padding: 2px 7px; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .gmap-lbl.hotel { border: 1.5px solid #1E3A8A; }
.leaflet-tooltip.map-tip { font: 700 11px/1.2 var(--sans, system-ui, sans-serif); color: #12141B; background: #fff; padding: 2px 7px; border: 0; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.35); white-space: nowrap; }
.leaflet-tooltip.map-tip::before { display: none; } .leaflet-tooltip.map-tip.hotel { font-size: 12px; border: 1.5px solid #1E3A8A; }
.spin img { width: 34px; height: 34px; display: block; }
.spin span { display: none; }
.map-key { position: absolute; left: 10px; bottom: 30px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); pointer-events: none; }
.map-key:empty { display: none; }
.mk, .mk-go { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--sans, system-ui, sans-serif); background: #fff; color: #12141B; border-radius: 999px; padding: 4px 9px 4px 5px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.mk img { width: 16px; height: 20px; object-fit: contain; }
.mk-go { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; font: 700 12px/1 var(--sans, system-ui, sans-serif); background: #1E3A8A; color: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; pointer-events: auto; }
.mk-go:focus-visible { outline: 2px solid #12141B; outline-offset: 2px; }
.places li.has-star { display: flex; align-items: center; gap: 4px; }
.places li.has-star .place-row { flex: 1; min-width: 0; }
.star-b { all: unset; box-sizing: border-box; flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.35rem; color: var(--muted, #5B6472); cursor: pointer; border-radius: 50%; }
.star-b.on { color: #E8A100; }
.star-b:focus-visible { outline: 2px solid var(--accent); }
.spots li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spots li > div { display: grid; gap: 2px; min-width: 0; } .spots li b { overflow-wrap: anywhere; } .spots li span { color: var(--muted, var(--slate)); font-size: .88rem; }
.spots .mini-b { flex: none; }

/* My trip: shopping list (same look as packing) */
.shop-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.shop-add [data-shop-text] { flex: 2 1 160px; min-width: 0; } .shop-add [data-shop-note] { flex: 2 1 140px; min-width: 0; } .shop-add select { flex: 1 1 110px; min-width: 0; }
.shop-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } .shop-t > span { overflow-wrap: anywhere; }
.shop-t small { flex-basis: 100%; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.shop-city { font: 600 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.pack.shop li.done .shop-t > span { text-decoration: line-through; color: var(--muted); }

/* trip itinerary: one line per item, details behind a tap */
.tl-d summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.tl-d summary::-webkit-details-marker { display: none; }
.tl-d summary b { display: inline; }
.tl-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--chip, #EEF1F4); position: relative; top: 3px; }
.tl-dot::before { content: '···'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--sans, system-ui); color: var(--muted, #5B6472); letter-spacing: -.5px; }
.tl-d[open] .tl-dot { background: var(--accent); } .tl-d[open] .tl-dot::before { color: var(--on-accent, #fff); }
.tl-d > span { display: block; margin-top: 4px; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.tl-d summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* builder: save status in the top bar */
.b-top { flex-wrap: wrap; }
.b-save { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: .78rem; color: var(--slate, #5B6472); min-height: 0; }
.b-save:empty { display: none; }
.b-save small { font-size: inherit; opacity: .8; } .b-save .ok { color: #1B7F3B; font-weight: 600; }
.b-save.dirty span { color: #9A3412; font-weight: 600; }
.b-save .btn.sm { padding: 4px 10px; font-size: .78rem; }

/* offline: an "Offline" tag at the top, a Save for offline switch in My trip, and Nearby's list instead of the map */
html.is-offline body::before { content: 'Offline'; position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1002; font: 700 .72rem/1 var(--sans, system-ui, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #5B6472; padding: 6px 10px; border-radius: 999px; pointer-events: none; }
.off-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; }
.off-row .tool { background: var(--chip, #EEF1F4); }
.off-row small { font-size: .8rem; }
.map-off:empty { display: none; } .map-off { margin-bottom: 12px; }
.off-msg b { color: var(--ink, #12141B); }

/* guest tabs: collapse / hide any section; booked Travel parts fold to a one-line summary */
.cx-sec { position: relative; }
.cx-sec > .sec-h { cursor: pointer; padding-right: 96px; }
.cx { display: flex; align-items: center; gap: 4px; }
.cx-sec > .cx { position: absolute; top: 14px; right: 10px; }
.cx-part { margin: 14px 0 4px; flex-wrap: wrap; } .cx-part .cx-t { flex: 1 1 auto; min-width: 0; font: 600 .95rem var(--sans); }
.cx-part .cx-sum { order: 5; flex-basis: 100%; } .cx-part .cx-sum:empty { display: none; }
.cx-sum { font-size: .84rem; font-weight: 600; color: #1B7F3B; overflow-wrap: anywhere; }
.cx-sec > .cx .cx-sum { display: none; }
.cx-sumline { display: none; margin: 2px 0 0; font-size: .86rem; font-weight: 600; color: #1B7F3B; overflow-wrap: anywhere; }
.cx-sec.cx-col > .cx-sumline:not(:empty) { display: block; }
.cx-hide, .cx-tog { all: unset; box-sizing: border-box; cursor: pointer; min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--muted, #5B6472); font: 600 .78rem var(--sans, system-ui); }
.cx-hide { padding: 0 8px; }
.cx-hide:hover, .cx-tog:hover { background: var(--chip, #EEF1F4); }
.cx-hide:focus-visible, .cx-tog:focus-visible { outline: 2px solid var(--accent); }
.cx-tog i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translate(-2px, -2px); transition: transform .15s; }
.cx-tog[aria-expanded="false"] i { transform: rotate(45deg) translate(-2px, -2px); }
.cx-sec.cx-col > :not(.sec-h):not(.cx):not(.cx-sumline) { display: none !important; }
.cx-sec.cx-col { padding-bottom: 14px; }
[data-mode].cx-col { display: none !important; }
.cx-hid { display: none !important; }
.cx-hidden { margin: 16px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--chip, #EEF1F4); }
.cx-hidden summary { cursor: pointer; font-weight: 600; font-size: .9rem; min-height: 28px; display: flex; align-items: center; }
.cx-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bookings .bk-via { display: block; color: var(--muted, var(--slate)); font-size: .86rem; }
.gp-none { margin: 10px 0 0; }
.hotel-chips { margin: 0 0 8px; } .hotel-chips .chip small { font-weight: 500; opacity: .75; margin-left: 2px; }
.dr-dates { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--field, #F8FBFA); border: 1px solid var(--rule, #E1E4EA); }
.dr-dates .dr-lines { padding: 0; width: 100%; }
/* viewer bar (brand, Example page, Edit a copy): part of the page, not floating — it scrolls away with the cover on
   phones and sits above the tabs on wide screens, so it never covers the header, the tabs or the content */
.vbar { position: absolute; }
@media (min-width: 760px) { .vbar { position: relative; top: 0; left: 0; right: 0; padding: 10px 14px; background: var(--fog, #F3F5F4); } .vbar .brand, .vbar .btn { background: #fff; } .viewer .ev-hero-in { padding-top: 40px; } }
.tr-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--chip, #EEF1F4); font-size: .86rem; color: var(--muted, #5B6472); }
/* on-page editing in the builder preview: dashed outline per editable section, a pencil on its header, + buttons */
.onp-bar { display: flex; justify-content: flex-end; padding: 8px 12px; }
@media (min-width: 980px) { .onp-bar { max-width: 900px; margin: -8px auto 0; padding: 0 0 10px; } }
.ev.onp [data-ed] { cursor: pointer; }
.ev.onp .onp-sec { outline: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; }
.ev.onp .onp-sec li[data-ed], .ev.onp .onp-sec .leg-h[data-ed], .ev.onp .onp-sec .day-h[data-ed], .ev.onp .onp-sec ul[data-ed], .ev.onp .onp-sec a[data-ed] { border-radius: 8px; transition: background .12s; }
@media (hover: hover) { .ev.onp .onp-sec li[data-ed]:hover, .ev.onp .onp-sec .leg-h[data-ed]:hover, .ev.onp .onp-sec .day-h[data-ed]:hover, .ev.onp .onp-sec ul[data-ed]:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } }
.ev.onp .onp-sec li[data-ed]:active, .ev.onp .onp-sec .leg-h[data-ed]:active, .ev.onp .onp-sec .day-h[data-ed]:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.onp-pen { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: color-mix(in srgb, var(--accent) 13%, var(--card)); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.onp-pen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ev-hero > .onp-pen { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255,255,255,.92); color: #12141B; }
.onp-box { position: relative; padding-right: 54px !important; }
.onp-box > .onp-pen { position: absolute; top: 10px; right: 8px; }
.onp-add { display: inline-flex; align-items: center; min-height: 44px; margin: 10px 8px 0 0; padding: 0 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; background: none; color: var(--accent); font: inherit; font-weight: 650; font-size: .9rem; cursor: pointer; }
.day > .onp-add { min-height: 40px; margin: 2px 0 6px; padding: 0 12px; font-size: .84rem; }
.onp-adds { display: flex; flex-wrap: wrap; }
.ev.dark .onp-add, .ev.dark .onp-pen { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.onp-more { display: flex; justify-content: center; width: 100%; min-height: 56px; margin: 0; border-radius: 16px; font-size: 1rem; }
.onp-foot { display: grid; gap: 10px; justify-items: start; }
.onp-secctl { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule); width: 100%; }
.onp-secctl .mv { display: flex; gap: 4px; } .onp-secctl .mv button { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--rule); background: #fff; font-size: 1.05rem; cursor: pointer; } .onp-secctl .mv button:disabled { opacity: .3; cursor: default; }
.sheet-b .cards { margin: 0; }
/* desktop: the on-page sheet docks over the form column, so the page stays visible beside it while it updates */
@media (min-width: 980px) {
  dialog.sheet.onp:not(:modal) { position: fixed; inset: var(--onp-top, 60px) auto 0 0; margin: 0; width: var(--onp-w, 460px); max-width: none; height: auto; max-height: none; border-radius: 0; z-index: 60; overflow-y: auto; box-shadow: 12px 0 40px -24px rgba(0,0,0,.45); }
}
#undo { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 1000; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); background: var(--ink, #12141B); color: #fff; padding: 6px 6px 6px 18px; border-radius: 999px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; }
#undo.show { opacity: 1; transform: translate(-50%, 0); }
#undo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#undo .btn { color: #fff; border-color: rgba(255,255,255,.5); flex: none; }
/* Share sheet: the link box + its buttons hide until there's a link (signing in, creating the short link, an error) */
.pub [hidden] { display: none !important; }
.pub-alt { margin: 10px 0 0 !important; } .pub-host .link { font-size: inherit; }
.b-long { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .b-long small { flex-basis: 100%; }
/* setup: Start from a website / Start from a document */
.su-ai-starts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.su-doc-form { display: grid; gap: 8px; margin-top: 8px; padding: 14px; background: var(--paper, #fff); border-radius: 14px; }
.su-doc-drop { display: grid; gap: 4px; place-items: center; text-align: center; min-height: 96px; padding: 14px; border: 1.5px dashed var(--rule); border-radius: 12px; cursor: pointer; }
.su-doc-drop span { font-size: .88rem; color: var(--slate, #556); } .su-doc-drop.over { border-color: var(--gate, #155); background: var(--fog, #EDF4F1); }
.su-doc-drop.busy { opacity: .6; pointer-events: none; }
.su-ai [hidden] { display: none !important; } /* the website / document forms open on tap */
/* guest languages: the host's languages as a pill switch at the top of the page */
.lang-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.92); }
.lang-pill { font: inherit; font-size: .85rem; font-weight: 600; border: 0; border-radius: 999px; padding: 5px 11px; min-height: 30px; background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; }
.lang-pill.on { background: var(--ink, #123); color: #fff; }
.vbar:has(.lang-pills) .lang-sel { max-width: 44px; padding: 5px 6px; } /* other languages: still one tap away */
@media (max-width: 429px) { .vbar:has(.lang-pills) .lang-sel { display: none; } }
/* builder: Guest languages card status + Preview in */
.tr-status { display: grid; gap: 6px; margin: 4px 0 8px; } .tr-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; background: var(--field); border-radius: 10px; }
.tr-lang b { min-width: 6em; } .tr-st { font-size: .9rem; color: var(--slate); } .tr-st.ok { color: #1B7F3B; font-weight: 600; } .tr-st.busy { font-style: italic; } .tr-lang .link { margin-left: auto; font-size: .88rem; }
.pv-lang { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 12px; } .pv-l { font: inherit; font-size: .82rem; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; background: var(--card, #fff); cursor: pointer; } .pv-l.on { background: var(--ink, #123); color: #fff; border-color: transparent; }
/* booking / place details + photos (folded behind the item) */
details.det { margin: 6px 0 2px; font-size: .88rem; }
details.det > summary { cursor: pointer; color: var(--accent, var(--gate)); font-weight: 600; font-size: .82rem; list-style: none; }
details.det > summary::-webkit-details-marker { display: none; }
details.det > summary::after { content: ' ›'; } details.det[open] > summary::after { content: ' ⌄'; }
.det-l { list-style: none; padding: 0; margin: 6px 0 4px; display: grid; gap: 2px; } .det-l > span { display: block; font-size: .85rem; }
.det-am { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .det-am .tag { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--chip, #EEF0F4); }
.det-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .det-f .wide { grid-column: 1 / -1; } .det-f .field { min-width: 0; } .det-f input, .det-f select { width: 100%; min-width: 0; }
.det-f .lbl-s { display: block; font-size: .8rem; margin-bottom: 4px; color: var(--muted, var(--slate)); }
.chips.amen { display: flex; flex-wrap: wrap; gap: 6px; } .chips.amen .chip { font-size: .78rem; padding: .3em .7em; }
.more-f { margin: 0 0 12px; } .more-f > summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.gal { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.gal figure { position: relative; margin: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--fog, #EEF0F4); }
.gal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal .ph-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 22px; padding: 0; cursor: pointer; }
.gal .ph-add { width: 72px; height: 72px; border-radius: 10px; border: 1.5px dashed var(--rule, #CBD0DA); display: grid; place-content: center; text-align: center; cursor: pointer; color: var(--muted, var(--slate)); }
.gal .ph-add span { font-size: 1.3rem; line-height: 1; } .gal .ph-add small { font-size: .7rem; } .gal .ph-add.busy { opacity: .5; pointer-events: none; }
.rv-det { margin: 6px 0; }
/* See prices: one button → Google / Expedia / Booking.com with the nights filled in */
details.sp-menu { display: inline-block; } .mini details.sp-menu { vertical-align: top; }
details.sp-menu > summary.mini-b::after { content: ' ▾'; font-size: .8em; }
.sp-menu .menu-pop { min-width: 200px; display: grid; } .sp-menu .menu-pop small.muted { font-weight: 500; }
.sp-menu .sp-when { display: block; padding: 6px 12px 4px; font-size: .75rem; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-row .menu-pop { left: auto; right: 0; }

/* ---- City × Category bar: [City ▾] [Category ▾] [Filters n] + search, pills under it, sub-filters in a bottom sheet ---- */
.ccb { display: grid; gap: 8px; }
.ccb-wrap:empty, .ccb-wrap:has(> .map-cats:only-child:empty) { display: none; }
.ccb-wrap.in-sec { margin: 2px 0 12px; }
[data-slot="near-cc"] .ccb, [data-slot="trip-cc"] .ccb { background: var(--card, #fff); border-radius: 16px; padding: 12px; }
.ccb-row { display: grid; gap: 8px; min-width: 0; }
.ccb-row[hidden] { display: none; }
.ccb .gp-search { margin: 0; flex: 1 1 auto; min-width: 0; }
.ccb-row2 { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ccb-fs { display: contents; }
/* city tabs: one segmented row, scrolls sideways when the trip has many cities */
.cc-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--chip, #EEF0F4); overflow-x: auto; scrollbar-width: none; }
.cc-tabs::-webkit-scrollbar, .cc-chips::-webkit-scrollbar { display: none; }
.cc-tab { flex: 1 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--muted, var(--slate)); font: inherit; font-weight: 650; font-size: .95rem; white-space: nowrap; cursor: pointer; }
.cc-tab[aria-selected="true"] { background: var(--card, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
/* category chips: icon + short label in the category's color */
.cc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.cc-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 8px; border: 1.5px solid var(--line, var(--rule)); border-radius: 999px; background: var(--card, #fff); color: var(--ink); font: inherit; font-weight: 650; font-size: .9rem; white-space: nowrap; cursor: pointer; }
.cc-chip small { color: var(--muted, var(--slate)); font-weight: 500; }
.cc-chip[aria-pressed="true"] { background: var(--cc); border-color: var(--cc); color: #fff; }
.cc-chip[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.cc-chip[aria-pressed="true"] .cci { background: rgba(255,255,255,.22); }
.cc-chip .cci { width: 28px; height: 28px; }
.ccb-f { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line, var(--rule)); border-radius: 999px; background: var(--card, #fff); color: var(--ink); font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; }
.ccb-f.set { border-color: color-mix(in srgb, var(--accent) 55%, var(--line, #ddd)); }
.ccb-f:disabled { opacity: .45; cursor: default; }
.ccb-f svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ccb-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: .75rem; }
@media (max-width: 520px) { .ccb-f .dd-l { display: none; } .ccb-f { padding: 0 11px; gap: 4px; } }
.cci { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cc, #5C6370); }
.cci svg { width: 16px; height: 16px; }
.ccb-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ccb-pills[hidden], .ccb-pills:empty { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--card, #fff)); color: var(--ink); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.pill i { font-style: normal; font-size: 1.15em; line-height: 1; opacity: .65; }
.pill-clear { font-size: .85rem; }
dialog.cc-sheet { padding: 0; border: 0; border-radius: 20px 20px 0 0; width: min(560px, 100vw); max-width: 100vw; max-height: 86vh; margin: auto auto 0; background: var(--card, #fff); color: var(--ink, #12141B); }
dialog.cc-sheet::backdrop { background: rgba(10, 12, 18, .45); }
@media (min-width: 760px) { dialog.cc-sheet { border-radius: 20px; margin: auto; } }
.cc-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 86vh; }
.cc-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 4px 20px; }
.cc-top h2 { margin: 0; font-size: 1.15rem; }
.cc-top .x { border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--muted, var(--slate)); cursor: pointer; width: 44px; height: 44px; }
.cc-body { overflow-y: auto; padding: 4px 20px 14px; display: grid; gap: 16px; }
.cc-g h3 { margin: 0 0 8px; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.cc-g .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cc-g .chip { min-height: 40px; padding: .45em 1em; font-size: .92rem; }
.cc-sels { display: grid; gap: 12px; }
.cc-sels .field { display: grid; gap: 8px; } .cc-sels .field > span { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, var(--slate)); }
.cc-sels select { width: 100%; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line, var(--rule)); background: var(--bg, #fff); color: var(--ink); padding: .4em .7em; font-size: 16px; }
.cc-foot { display: flex; gap: 10px; padding: 12px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line, var(--rule)); }
.cc-foot .btn { flex: 1; min-height: 46px; }
.place-row > .cci { margin-top: 1px; }
.place-row > div { flex: 1 1 auto; }
.plan-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.plan-t .cci { width: 24px; height: 24px; } .plan-t .cci svg { width: 15px; height: 15px; }
.plan-t > span { min-width: 0; overflow-wrap: anywhere; }
.spot-star { font-style: normal; color: #E8A100; }
.map-cats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 6px 8px; font-size: .78rem; font-weight: 600; color: var(--muted, var(--slate)); }
.map-cats:empty { display: none; }
.map-cats > span { display: inline-flex; align-items: center; gap: 5px; }
.map-cats .cci { width: 18px; height: 18px; } .map-cats .cci svg { width: 12px; height: 12px; }
.ccpin { background: none; border: 0; }
.ccpin img { display: block; width: 36px; height: 36px; transition: transform .15s; }
.map[data-zb="mid"] .ccpin img { transform: scale(.82); }
.map[data-zb="far"] .ccpin img { transform: scale(.66); }
.lf-row .gp-search { flex: 1; }
.lf .ccb-f { min-height: 40px; }

/* Design → Match your brand: preview of the proposed theme, then Apply / Cancel, Undo after */
.brand-m .search { margin-bottom: 8px; }
.brand-m .brand-up { display: flex; }
.brand-prev { margin-top: 10px; display: grid; gap: 10px; justify-items: start; padding: 16px; border-radius: 14px; background: #F2F3F6; color: var(--pi); box-shadow: inset 0 0 0 1px #E1E4EA; }
.brand-prev.dark { background: #0F1116; box-shadow: inset 0 0 0 1px #2A2E37; }
.brand-prev .bp-logo { max-height: 44px; max-width: min(200px, 70%); width: auto; height: auto; object-fit: contain; }
.brand-prev .bp-title { font-size: 1.5rem; line-height: 1.1; color: var(--pi); overflow-wrap: anywhere; }
.brand-prev .bp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.brand-prev .bp-btn { background: var(--pa); color: var(--po); border-radius: 999px; padding: .5em 1em; font-weight: 600; font-size: .9rem; }
.brand-prev .bp-link { color: var(--pa); font-weight: 600; font-size: .9rem; text-decoration: underline; }
.bp-facts { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.bp-facts li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-m .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.logo-row { display: flex; align-items: center; gap: 12px; } .logo-row img { max-height: 40px; max-width: 160px; object-fit: contain; background: #F2F3F6; border-radius: 8px; padding: 4px; }
.ev-logo { display: block; max-height: 56px; max-width: min(220px, 60%); width: auto; height: auto; object-fit: contain; margin: 0 0 12px; }