/* Wayfinder — looks, and the phone layout that every look shares.
 *
 * Three layers, in this order, each one only adding to the last:
 *
 *   1. The phone. Rules for both looks below 900px: five tabs instead of
 *      eight, fields that do not make iOS zoom, content clear of the notch,
 *      presses that answer. Nothing here changes a colour.
 *   2. The picker and the More sheet, drawn in whatever look is on.
 *   3. Holiday. Tokens first, so everything app.css draws from a token turns
 *      warm on its own; then the handful of components whose *shape* changes
 *      too — rounder, softer, lifted by shadow instead of outlined.
 *
 * Classic sets no data-theme at all, so with this file's third layer removed
 * the original look is exactly what app.css already drew.
 */

/* ================================================================ 1. phone */

/* The tabs took the browser's default button face while everything around
   them used the app's, so a label set in Arial sat in a row of Ubuntu. */
.navbtn{font-family:inherit}

/* The More button is drawn exactly like a nav tab. It is not a .navbtn —
   see the comment on it in index.html — so it borrows the look here. */
.navmore{
  flex:1; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; height:var(--nav); background:none; border:0; cursor:pointer; position:relative;
  color:var(--ink-3); font-size:11px; letter-spacing:.02em; font-family:inherit;
  -webkit-tap-highlight-color:transparent; transition:color .15s;
}
.navmore svg{width:22px;height:22px;fill:currentColor}
.navmore:focus-visible{outline:2px solid var(--datum);outline-offset:-3px}
/* Lit while you are on a screen that is not in the bar, so the bar never
   shows no tab selected. navmenu.js sets the class. */
.navmore.is-active{color:var(--magenta)}

@media (max-width:899px){
  .navbtn.nav-overflow{display:none}
  .navmore{display:flex}

  /* Five tabs have room for real labels again: undo app.css's squeeze for
     eight, which shrank the type to 10 px and hid it altogether below 360. */
  .navbtn,.navmore{font-size:11.5px;letter-spacing:.01em;gap:3px}
  .navbtn span,.navmore span{display:inline}

  /* The active tab gets a pill behind its icon, not just a colour change.
     A tint alone is easy to miss in sunlight and says nothing to anyone who
     cannot tell magenta from grey. Every icon carries the padding, lit or
     not, so selecting one does not nudge the row. */
  .navbtn svg,.navmore svg{
    width:22px; height:22px; padding:4px 16px; box-sizing:content-box;
    border-radius:999px; transition:background-color .18s ease;
  }
  .navbtn.is-active svg,
  .navmore.is-active svg{
    background:color-mix(in srgb,var(--magenta) 16%,transparent);
  }
  .navbtn.is-active span,
  .navmore.is-active span{font-weight:650}
  .nav-badge{top:5px;left:calc(50% + 8px)}

  /* The views sit under the status bar in an installed app (viewport-fit=
     cover), and a heading behind the clock is the first thing anybody sees. */
  .pad{padding-top:max(26px,calc(env(safe-area-inset-top,0px) + 16px))}
  .view-head-wrap{padding-top:max(18px,calc(env(safe-area-inset-top,0px) + 10px))}
  .view-head-wrap .pad{padding-top:8px}

  /* Arriving on a view: a short rise, so a tab change reads as moving
     somewhere rather than a repaint. Not the map — it is a canvas, and
     sliding it would only make MapLibre redraw twice. The global
     reduced-motion rule in app.css switches this off with every other
     animation. `backwards`, not `both`: holding the last frame leaves an
     identity transform on the view, and any transform makes the view the
     box its position:fixed children are placed in — the billing bar
     scrolled away with the page (09-29). */
  .view.is-active:not(#view-map){animation:wf-view-in .22s ease-out backwards}
}
@keyframes wf-view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (pointer:coarse){
  /* iOS zooms the whole page into any field under 16 px when it takes focus,
     and does not zoom back out. Every text field in the app was 14–15 px, so
     tapping the search box threw the layout sideways on every iPhone. */
  input[type=text],input[type=search],input[type=email],input[type=password],
  input[type=number],input[type=date],input[type=time],input:not([type]),
  select,textarea,#place-search,#adv-search{font-size:16px}

  /* A button that does not move when pressed feels like it did not work. */
  .btn,.chip,.toolcell,.ag-card,.tools-btn,.more-tile,.tp-opt,.fab{
    transition:transform .12s ease, background-color .15s ease;
  }
  .btn:active,.chip:active,.tools-btn:active,.more-tile:active,.tp-opt:active{transform:scale(.97)}
  .toolcell:active,.ag-card:active{transform:scale(.98)}
  .btn{min-height:44px}
  .btn.sm{min-height:36px}
}

@media (min-width:900px){
  .navmore{display:none}
}

/* The traveller's own bar (navmenu.js, 10-04). The real nav buttons stay in
   the page for every `.navbtn[data-view=…]` the code clicks, but the bar on
   screen is #nav-bar's copies: Map, the three chosen, then More. The wrapper
   is display:contents so its buttons lay out as the nav's own children. */
html.has-navmenu #nav > .navbtn{display:none}
.nav-bar{display:contents}
.navslot-edit{display:none}
.navslot-locked{opacity:.7}
@media (max-width:899px){
  .navslot-rest{display:none}
}
@media (min-width:1200px){
  /* The sidebar lists every screen; the editor is a quiet line under them. */
  .navslot-edit{display:block;margin:6px 8px 0;padding:8px 18px;background:none;border:0;
    color:var(--ink-3);font:inherit;font-size:.8rem;text-align:left;cursor:pointer;border-radius:9px}
  .navslot-edit:hover,.navslot-edit:focus-visible{color:var(--datum);background:var(--panel-2)}
}

/* The editor (Pop "Your menu"). */
.nm-lede{margin:0 0 12px}
.nm-preview{display:flex;gap:4px;padding:8px 6px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.nm-cell{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;
  color:var(--ink);font-size:.72rem;text-align:center;background:color-mix(in srgb,var(--magenta) 10%,transparent)}
.nm-cell span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-cell svg{width:20px;height:20px;fill:currentColor}
.nm-cell.is-fixed{background:none;color:var(--ink-3)}
.nm-cell.is-empty{justify-content:center;background:none;border:1.5px dashed var(--line);color:var(--ink-3)}
.nm-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin:18px 2px 8px}
.nm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;border-radius:12px}
.nm-list.is-flash{animation:nm-flash .9s ease}
@keyframes nm-flash{0%,60%{box-shadow:0 0 0 2px var(--magenta)}100%{box-shadow:0 0 0 0 transparent}}
.nm-row{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.nm-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-ico{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--datum) 16%,transparent);color:var(--datum)}
.nm-ico svg{width:18px;height:18px;fill:currentColor}
.nm-ctl{display:flex;gap:4px}
.nm-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font:inherit;font-size:1.1rem;line-height:1;cursor:pointer}
.nm-btn:disabled{opacity:.35;cursor:default}
.nm-x{color:var(--magenta)}
.nm-sos{margin:8px 2px 0}
.nm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nm-tile{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:48px}
.nm-tile.is-on{border-color:var(--magenta);background:color-mix(in srgb,var(--magenta) 8%,var(--panel-2))}
.nm-mark{font-weight:700;color:var(--ink-3)}
.nm-tile.is-on .nm-mark{color:var(--magenta)}
.nm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}
.more-head-a{display:flex;align-items:center;gap:6px}

/* ============================================= 2. picker and More sheet */

.theme-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 6px}
.tp-opt{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:10px 10px 12px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer; text-align:left; font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.tp-opt strong{font-size:.95rem;margin-top:8px}
.tp-opt .fine{margin:0;font-size:.78rem;line-height:1.35}
.tp-opt.is-on{border-color:var(--datum);box-shadow:0 0 0 3px color-mix(in srgb,var(--datum) 22%,transparent)}
.tp-opt:focus-visible{outline:2px solid var(--datum);outline-offset:2px}
.tp-tick{
  position:absolute; top:16px; left:16px; width:22px; height:22px; border-radius:50%;
  background:var(--datum); display:none; place-items:center;
}
.tp-tick::after{
  content:""; width:10px; height:5px; margin-top:-2px;
  border:solid var(--on-accent); border-width:0 0 2.5px 2.5px; transform:rotate(-45deg);
}
.tp-opt.is-on .tp-tick{display:grid}

/* The miniature. Its colours come in from theme.js as inline styles — they
   are the *other* look's colours, so no token of the current one will do. */
.tp-mock{
  position:relative; display:block; width:100%; aspect-ratio:16/11; border-radius:10px;
  border:1px solid; overflow:hidden;
}
.tp-mock i{position:absolute;display:block}
.tp-sun{width:18%;aspect-ratio:1;border-radius:50%;top:9%;right:9%}
.tp-card{left:9%;right:9%;top:24%;height:40%;border-radius:7px;border:1px solid}
.tp-line{position:absolute;left:10%;top:18%;width:62%;height:9%;border-radius:4px;opacity:.75}
.tp-line.short{top:38%;width:40%;opacity:.35}
.tp-btn{position:absolute;left:10%;bottom:14%;width:46%;height:22%;border-radius:999px}
.tp-nav{left:0;right:0;bottom:0;height:17%;border-top:1px solid;display:flex!important;
  align-items:center;justify-content:space-around}
.tp-nav i{position:static;width:9%;aspect-ratio:1;border-radius:50%}

.more-sheet{padding:8px 16px 18px}
.more-sheet[open]{animation:wf-sheet-up .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes wf-sheet-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.more-head{display:flex;align-items:center;justify-content:space-between;margin:0 -6px 6px 2px}
.more-head h2{margin:0;font-size:1.2rem}
.more-sheet h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin:18px 2px 0}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.more-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink); cursor:pointer; font:inherit; min-height:112px;
  -webkit-tap-highlight-color:transparent;
}
.more-tile strong{font-size:.98rem;margin-top:8px}
.more-tile .fine{margin:0;font-size:.78rem;line-height:1.35}
.more-tile.is-on{border-color:var(--magenta)}
.more-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--datum) 16%,transparent);color:var(--datum)}
.more-ico svg{width:22px;height:22px;fill:currentColor}
.more-vault .more-ico{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.more-family .more-ico{background:color-mix(in srgb,var(--magenta) 16%,transparent);color:var(--magenta)}
.more-settings .more-ico{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.more-who{margin:16px 2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The grab bar: says "this is a sheet, it goes down" before anyone reads it. */
@media (max-width:520px){
  .more-sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;
    background:var(--line);margin:0 auto 8px}
}

/* ============================================================ 3. Holiday
 *
 * Bright, warm and unhurried — the look of a travel app you open on the
 * beach rather than in a crisis. Cream paper, sunset coral, lagoon teal and
 * a little sunshine; rounder corners and soft shadows instead of hairlines.
 *
 * Contrast was measured, not guessed (WCAG, on the cream ground):
 * ink 12.5:1, ink-2 5.4:1, coral text 3.8:1 and white-on-coral 4.0:1 —
 * coral is only ever a fill under bold text or a large accent, never body
 * copy. The deeper ok / warn / rose shades are the ones that reach 4.2–4.4:1.
 */
html[data-theme="holiday"]{
  --ground:#FFF7EE;
  --panel:#FFFFFF;
  --panel-2:#FFF0E3;
  --line:#F3E0CF;
  --ink:#3D2C26;
  --ink-2:#76625A;
  --ink-3:#7A665D;
  --datum:#D9532F;          /* sunset coral: the primary action */
  --magenta:#D63B72;        /* rose: the active tab, and cautions */
  --ok:#1A8457;
  --warn:#A86400;
  --orange:#C45A12;
  --on-accent:#FFFFFF;
  --on-magenta:#FFFFFF;
  --shadow:rgb(150 92 56 / .38);
  --scrim:rgba(61,44,38,.38);
  --sea:#0B8278;
  --sun:#FFC53D;
  --peach:#FFD9BF;
  --coral-grad:linear-gradient(135deg,#FF9466 0%,#F0673F 55%,#E4574A 100%);
  --font:"Nunito","Quicksand","SF Pro Rounded",ui-rounded,"Varela Round",
         "Hiragino Maru Gothic ProN","M PLUS Rounded 1c","PingFang SC","Apple SD Gothic Neo",
         system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:16px;
  color-scheme:light;
}

/* ---- the page: warm paper with the sun coming up in one corner ---- */
html[data-theme="holiday"] body{background:var(--ground)}
html[data-theme="holiday"] .view:not(#view-map){
  background:
    radial-gradient(120% 42% at 100% 0%, #FFE0C6 0%, rgba(255,224,198,0) 62%),
    radial-gradient(80% 30% at 0% 0%, #FFF1C9 0%, rgba(255,241,201,0) 60%),
    var(--ground);
  background-attachment:local;
}
html[data-theme="holiday"] h1{font-weight:800;letter-spacing:-.015em}
html[data-theme="holiday"] h3{font-weight:750}

/* ---- surfaces: lifted, not outlined ---- */
html[data-theme="holiday"] .card{
  border:1px solid var(--line); border-left:1px solid var(--line); border-radius:20px;
  box-shadow:0 6px 20px -8px var(--shadow);
}
/* The stripe that marked a card in Classic becomes a soft coloured cap:
   the same "this one matters" signal, in a friendlier shape. */
html[data-theme="holiday"] .card.warn{
  background:linear-gradient(180deg,#FFF3DC 0%,#FFFFFF 46px);
  border-color:#F7DDA8;
}
html[data-theme="holiday"] .ag-card,
html[data-theme="holiday"] .fam-group,
html[data-theme="holiday"] .ag-sys,
html[data-theme="holiday"] .more-tile{
  border-radius:20px; box-shadow:0 6px 18px -10px var(--shadow);
}
html[data-theme="holiday"] .ag-ico,
html[data-theme="holiday"] .more-ico{border-radius:14px}
html[data-theme="holiday"] .more-tile{background:var(--panel)}

/* ---- buttons: pills, and the primary one is a little sunset ---- */
html[data-theme="holiday"] .btn{border-radius:999px;font-weight:600;padding-left:18px;padding-right:18px}
html[data-theme="holiday"] .btn.primary{
  background:var(--coral-grad); border-color:transparent; color:#fff; font-weight:700;
  box-shadow:0 6px 16px -6px rgb(232 96 60 / .55);
  text-shadow:0 1px 1px rgb(150 50 20 / .25);
}
html[data-theme="holiday"] .btn.danger{background:#FFF0F2}
html[data-theme="holiday"] .chip.is-on,
html[data-theme="holiday"] .fd-chip.is-on,
html[data-theme="holiday"] .pager-btn.is-on{background:var(--coral-grad);border-color:transparent;color:#fff}
html[data-theme="holiday"] .livechip{border-color:transparent}

/* ---- fields ---- */
html[data-theme="holiday"] input[type=text],
html[data-theme="holiday"] input[type=search],
html[data-theme="holiday"] input[type=email],
html[data-theme="holiday"] input[type=password],
html[data-theme="holiday"] input[type=number],
html[data-theme="holiday"] input[type=date],
html[data-theme="holiday"] input:not([type]),
html[data-theme="holiday"] select,
html[data-theme="holiday"] textarea,
html[data-theme="holiday"] #adv-search{
  border-radius:14px; background:#FFFCF8; font-family:inherit;
}
html[data-theme="holiday"] input:focus-visible,
html[data-theme="holiday"] select:focus-visible,
html[data-theme="holiday"] textarea:focus-visible,
html[data-theme="holiday"] #adv-search:focus-visible{
  outline:none; border-color:#F2A07F; box-shadow:0 0 0 4px rgb(255 148 102 / .22);
}
html[data-theme="holiday"] label{letter-spacing:.06em;color:var(--ink-2);font-weight:600}

/* ---- segmented tabs: a peach track with a white, lifted thumb ---- */
html[data-theme="holiday"] .gate-tabs,
html[data-theme="holiday"] .sos-tabs,
html[data-theme="holiday"] #set-tabs{
  background:var(--panel-2); border-color:transparent; border-radius:999px; padding:5px;
}
html[data-theme="holiday"] .gate-tab,
html[data-theme="holiday"] .sos-tab,
html[data-theme="holiday"] .set-tab{border-radius:999px;color:var(--ink-2);font-weight:600}
html[data-theme="holiday"] .gate-tab.is-on,
html[data-theme="holiday"] .sos-tab.is-on,
html[data-theme="holiday"] .set-tab.is-on{
  background:#fff; color:var(--ink); box-shadow:0 3px 10px -4px var(--shadow);
}
@media (min-width:900px){
  /* On a desktop the settings tabs are a vertical list, not a track. */
  html[data-theme="holiday"] #set-tabs{background:transparent;border-radius:0;padding:6px}
  html[data-theme="holiday"] .set-tab{border-radius:12px}
}

/* ---- the nav: a floating white tray ---- */
html[data-theme="holiday"] #nav{
  background:rgb(255 255 255 / .94); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:0; box-shadow:0 -6px 24px -12px var(--shadow);
}
@media (max-width:899px){
  html[data-theme="holiday"] #nav{border-radius:22px 22px 0 0}
}
@media (min-width:900px){
  html[data-theme="holiday"] #nav{border-right:1px solid var(--line);box-shadow:none}
}
html[data-theme="holiday"] .navbtn,
html[data-theme="holiday"] .navmore{color:#A8948A}
html[data-theme="holiday"] .navbtn.is-active{color:var(--datum)}
html[data-theme="holiday"] .navmore.is-active{color:var(--datum)}
@media (max-width:899px){
  html[data-theme="holiday"] .navbtn.is-active svg,
  html[data-theme="holiday"] .navmore.is-active svg{
    background:linear-gradient(135deg,#FFE3D2,#FFD2C2);
  }
}
/* SOS keeps a colour of its own in every look. Warm is not the same as soft,
   and the emergency card must never blend into the tabs beside it. */
html[data-theme="holiday"] .navbtn-sos{color:#D96B7F}
html[data-theme="holiday"] .navbtn-sos.is-active{color:var(--magenta)}
@media (max-width:899px){
  html[data-theme="holiday"] .navbtn-sos.is-active svg{background:#FFE0E8}
}

/* ---- the map's own chrome ---- */
html[data-theme="holiday"] #sheet{
  border-top:0; border-radius:24px 24px 0 0; box-shadow:0 -10px 30px -12px var(--shadow);
}
@media (min-width:900px){
  html[data-theme="holiday"] #sheet{border-radius:22px;border:1px solid var(--line)}
}
html[data-theme="holiday"] .sheet-handle span{background:#EBD3C0}
html[data-theme="holiday"] .tools-btn{background:var(--coral-grad);color:#fff;border-color:transparent;
  box-shadow:0 5px 14px -6px rgb(232 96 60 / .6)}
html[data-theme="holiday"] .tools-btn svg{opacity:1}
html[data-theme="holiday"] #place-search{border-color:transparent;box-shadow:0 6px 20px -8px var(--shadow)}
html[data-theme="holiday"] #place-results{border-radius:18px}
html[data-theme="holiday"] .fab{border-color:transparent;box-shadow:0 6px 18px -6px var(--shadow)}
html[data-theme="holiday"] #hud,
html[data-theme="holiday"] #btn-src{border-color:transparent;box-shadow:0 4px 14px -6px var(--shadow)}
html[data-theme="holiday"] #btn-src{font-family:inherit;font-weight:700;letter-spacing:.04em}
html[data-theme="holiday"] #toast{background:#fff;border-color:transparent;box-shadow:0 8px 24px -8px var(--shadow)}

/* The tool grid, as a box of pastel sweets: each cell takes a colour from a
   repeating set of five, so a grid of a dozen tools is easy to find your way
   back to by colour. The lit state still wins over the pastel. */
html[data-theme="holiday"] .toolcell{border-radius:18px;border-color:transparent;font-weight:600}
html[data-theme="holiday"] .toolcell:nth-child(5n+1){background:#FFEDE3}
html[data-theme="holiday"] .toolcell:nth-child(5n+1) svg{fill:#E0643E}
html[data-theme="holiday"] .toolcell:nth-child(5n+2){background:#E3F6F1}
html[data-theme="holiday"] .toolcell:nth-child(5n+2) svg{fill:#0B8278}
html[data-theme="holiday"] .toolcell:nth-child(5n+3){background:#FFF5D6}
html[data-theme="holiday"] .toolcell:nth-child(5n+3) svg{fill:#B97A00}
html[data-theme="holiday"] .toolcell:nth-child(5n+4){background:#E8F1FF}
html[data-theme="holiday"] .toolcell:nth-child(5n+4) svg{fill:#3F74C9}
html[data-theme="holiday"] .toolcell:nth-child(5n+5){background:#F6E9FB}
html[data-theme="holiday"] .toolcell:nth-child(5n+5) svg{fill:#9150B0}
html[data-theme="holiday"] .toolcell.is-on{background:#fff;border-color:var(--datum);
  box-shadow:0 0 0 3px rgb(217 83 47 / .16)}
html[data-theme="holiday"] .toolcell.is-on svg{fill:var(--datum)}

/* ---- the emergency card: warm, but unmistakable ---- */
html[data-theme="holiday"] .sos-num{
  border:0; border-radius:20px; background:linear-gradient(160deg,#FFF1F4 0%,#FFFFFF 70%);
  box-shadow:0 6px 18px -10px rgb(214 59 114 / .45), inset 0 0 0 1px #F8D5DF;
}
html[data-theme="holiday"] .sos-num .num{color:#B8264F}

/* ---- dialogs and sheets ---- */
html[data-theme="holiday"] .app-dialog{border:0;border-radius:24px;box-shadow:0 20px 50px -18px var(--shadow)}
@media (max-width:520px){
  html[data-theme="holiday"] .app-dialog{border-radius:26px 26px 0 0}
}
html[data-theme="holiday"] .sheet-inner{border-radius:24px 24px 0 0}
html[data-theme="holiday"] .tp-opt{border-radius:18px}
html[data-theme="holiday"] .tp-opt.is-on{box-shadow:0 0 0 4px rgb(217 83 47 / .16)}
html[data-theme="holiday"] .tp-tick{background:var(--coral-grad)}

/* ---- a few map-side colours tuned for a light ground ---- */
html[data-theme="holiday"] .wx-verdict.is-wet{color:#2F6FC0}
html[data-theme="holiday"] .back-btn{border-radius:50%}

/* ---- sign-in and the boot splash: the first thing anybody sees ---- */
html[data-theme="holiday"] #boot,
html[data-theme="holiday"] #gate{
  background:
    radial-gradient(70% 38% at 88% 4%, #FFD9A8 0%, rgba(255,217,168,0) 70%),
    radial-gradient(90% 40% at 0% 100%, #D9F2EC 0%, rgba(217,242,236,0) 70%),
    linear-gradient(180deg,#FFE9D6 0%,#FFF7EE 48%);
}
html[data-theme="holiday"] .gate-card{
  background:rgb(255 255 255 / .82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:28px; padding:26px 22px 24px; box-shadow:0 18px 44px -20px var(--shadow);
}
html[data-theme="holiday"] .gate-brand h1{font-weight:800}