/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Park Signage v3 (design_handoff_ptp_v3): Archivo, variable from weight 400 to 900 and width 62% to 125%, and Atkinson
   Hyperlegible 400 and 700, from Google Fonts (SIL Open Font License), latin and latin-ext. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Base presentation from the supplied export; the design-document shell is excluded. */
html, body, #app { width:100%; min-height:100%; }
/* A double tap does not zoom the page (issue #17): manipulation keeps scrolling, swiping and pinch zoom and only drops
   the double-tap zoom of mobile browsers (iOS Safari and Edge, Android Chrome). The viewport keeps user scaling, and
   the map takes every gesture itself (.park-map, touch-action none). Since the owner of 25 October 2026 ("er is nog
   steeds een irritante zoom als je perongeluk ergens dubbel klikt ... voor alle views") every element has it: iOS
   Safari does not carry it from html into the scrolling parts of the page, where almost all of the app is. :where()
   keeps its weight at 0, so a part with gestures of its own (the map, a swipe card, pan-y) still sets its own. */
:where(*) { touch-action:manipulation; }
/* iOS zooms into a field whose text is under 16px when you tap it (the search of Live, the name of your own item):
   there (and only there: -webkit-touch-callout is iOS) a field writes at 16px. */
@supports (-webkit-touch-callout: none) { input, select, textarea { font-size:16px !important; } }
body { margin:0; background:#F5F7FA; font-family:Figtree,system-ui,sans-serif; color:#111827; overflow:hidden; }
button { font-family:inherit; cursor:pointer; }

/* The brand, kept out of the way (public/assets/brand/). While the planner loads, its mark breathes in the middle of
   the page; it only fades in when loading takes a moment, so a quick load never shows it. */
.app-splash { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#F5F7FA; }
.app-splash img { width:64px; height:64px; opacity:0; animation:app-splash-in .45s ease-out .3s forwards, app-splash-breathe 2.4s ease-in-out .75s infinite; }
@keyframes app-splash-in { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes app-splash-breathe { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .app-splash img { animation:app-splash-in .01s linear .3s forwards; } }
/* Pull to refresh (bootstrap.js): the round button of Close in the sheets comes down with the finger, turns blue
   once letting go refreshes, and turns while the page reloads; the orange box says when there is no connection. */
.pull-refresh { position:fixed; top:0; left:50%; z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:env(safe-area-inset-top, 0px); transform:translate(-50%, calc(var(--pull, 0px) - 44px)); pointer-events:none; }
.pull-refresh[hidden], .pull-refresh-text[hidden] { display:none !important; }
.pull-refresh-dot { width:40px; height:40px; box-sizing:border-box; border-radius:50%; border:2px solid #BFCBDC; background:#fff; color:#0066FF; box-shadow:0 1px 3px rgba(17,24,39,.14); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, border-color .15s; }
.pull-refresh-dot svg { transform:rotate(var(--turn, 0deg)); }
.pull-refresh.is-ready .pull-refresh-dot { background:#0066FF; border-color:#0066FF; color:#FFFFFF; }
.pull-refresh.is-busy .pull-refresh-dot svg { animation:pull-refresh-turn .8s linear infinite; }
.pull-refresh-text { max-width:min(320px, calc(100vw - 32px)); padding:9px 11px; border-radius:12px; background:#FFE1CC; color:#111827; font:600 12.5px/1.4 Figtree, sans-serif; text-align:center; box-shadow:0 1px 3px rgba(17,24,39,.14); }
@keyframes pull-refresh-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pull-refresh.is-busy .pull-refresh-dot svg { animation:none; } }
body:has(.planner-app.theme-dark) .pull-refresh-dot { background:#1E293B; border-color:#475569; color:#93C5FD; }
body:has(.planner-app.theme-dark) .pull-refresh.is-ready .pull-refresh-dot { background:#0066FF; border-color:#0066FF; color:#FFFFFF; }
/* The signature at the end of Account: the logo as a watermark, in the colour of the text (so it works in both themes). */
.account-signature { display:flex; justify-content:center; padding:14px 0 2px; }
.account-signature svg { width:138px; height:auto; opacity:.42; filter:grayscale(1); transition:opacity .3s, filter .3s; }
.account-signature:hover svg { opacity:1; filter:none; }

/* Park Signage v3 (design_handoff_ptp_v3): Archivo for headings, buttons and numbers, Atkinson Hyperlegible for text,
   for the start screen, the onboarding, the card of paying, Nav v2 and the universal card (the @font-face rules above).
   The views use the two variables; the system fonts stand in while the files load. */
.planner-app { --ptp-display:Archivo, 'Arial Narrow', Arial, system-ui, sans-serif; --ptp-text:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
/* Their buttons show where the keyboard is; the heading that takes the focus at every step does not need a ring. */
.planner-app .ptp-v3 button:focus-visible,
.planner-app .main-navigation > span:focus-visible,
.planner-app .filter-tray button:focus-visible,
.planner-app .filter-sheet button:focus-visible,
.planner-app .upgrade-sheet button:focus-visible { outline:3px solid #6EA8FF; outline-offset:2px; }
.planner-app .ptp-v3 h2:focus { outline:none; }
.planner-app .ptp-v3 button:disabled { cursor:not-allowed; }
.noscroll::-webkit-scrollbar { display:none; }

/* The original app fills the real viewport instead of a simulated device. */
.planner-app { width:100%; height:100vh; height:100dvh; box-sizing:border-box; padding-top:env(safe-area-inset-top, 0px); background:#F5F7FA; overflow:hidden; position:relative; display:flex; flex-direction:column; }
/* Phones: a little room above the first bar, clear of the blurred edge that Safari (iOS 26) draws below the status bar. */
@media (max-width:767px) { .planner-app { padding-top:calc(env(safe-area-inset-top, 0px) + 12px); } }

/* Original view declarations. Dynamic values remain bound through CSS variables. */
.planner-001 { flex: none; padding: 14px 18px 10px; background: #F5F7FA; }
.planner-002 { display: flex; align-items: center; gap: 2px; background: #EEF3FB; border: 1px solid #BFCBDC; border-radius: 12px; padding: 3px; }
.planner-003 { flex: none; width: 44px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: #475569; display: flex; align-items: center; justify-content: center; padding: 0; }
.planner-004 { flex: 1; min-width: 0; height: 36px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(17,24,39,.16); display: flex; align-items: center; justify-content: center; font: 800 13px Figtree; color: #0066FF; white-space: nowrap; }
.planner-005 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; background: #EEF3FB; border: 1px solid #BFCBDC; border-radius: 12px; padding: 3px; }
.planner-006 { min-width: 0; height: 36px; border: 0; border-radius: 9px; padding: 0 6px; background: var(--planner-006-background); box-shadow: var(--planner-006-box-shadow); color: var(--planner-006-color); font: var(--planner-006-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-007 { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: var(--planner-007-padding); }
.planner-008 { background: #111827; color: #F5F7FA; border-radius: 20px; padding: 14px 16px; margin-bottom: 14px; }
.planner-009 { font: 700 15px 'Bricolage Grotesque'; }
.planner-010 { font: 400 13px/1.45 Figtree; margin: 4px 0 10px; color: rgba(245,247,250,.85); }
.planner-011 { display: flex; gap: 8px; }
.planner-012 { border: 0; border-radius: 99px; padding: 7px 14px; font: 700 12px Figtree; background: #FFD600; color: #111827; }
.planner-013 { border: 1.5px solid rgba(245,247,250,.5); border-radius: 99px; padding: 7px 14px; font: 600 12px Figtree; background: transparent; color: #F5F7FA; }
.planner-014 { display: flex; flex-direction: column; gap: 8px; }
.planner-015 { background: #fff; color: #111827; border: 2px solid #0066FF; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px rgba(0,102,255,.14); margin-bottom: 4px; }
.planner-016 { background: #CCE0FF; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.planner-017 { flex: 1; min-width: 0; }
.planner-018 { font: 700 10.5px Figtree; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.planner-019 { font: 800 17px/1.15 'Bricolage Grotesque'; margin-top: 3px; }
.planner-020 { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.planner-021 { flex: 1; min-width: 0; font: 600 12px Figtree; opacity: .75; }
.planner-022 { flex: none; border: 2px solid #0066FF; border-radius: 99px; padding: 7px 14px; font: 800 12.5px 'Bricolage Grotesque'; background: #0066FF; color: #FFFFFF; box-shadow: 0 1px 3px rgba(17,24,39,.14); white-space: nowrap; cursor: pointer; }
.planner-023 { width: 100%; margin-bottom: 4px; border: 2px solid #BFCBDC; border-radius: 18px; padding: 5px; background: #fff; box-shadow: 0 1px 3px rgba(17,24,39,.14); cursor: pointer; color: #111827; }
.planner-024 { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 9px 12px; background: var(--planner-024-background); color: var(--planner-024-color); }
.planner-025 { flex: 1; text-align: left; font: 800 15px 'Bricolage Grotesque'; }
.planner-026 { flex: none; font: 700 11px Figtree; opacity: .85; }
.planner-027 { background: #fff; color: #111827; border: var(--planner-027-border); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.planner-028 { background: var(--planner-028-background); padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.planner-029 { font: 700 10.5px Figtree; letter-spacing: .06em; text-transform: uppercase; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-030 { font: 800 20px/1.1 'Bricolage Grotesque'; margin-top: 3px; }
.planner-031 { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #BFCBDC; background: #fff; box-shadow: 0 1px 3px rgba(17,24,39,.14); padding: 0; display: flex; align-items: center; justify-content: center; font: 800 19px/1 'Bricolage Grotesque'; color: #111827; font-style: italic; }
.planner-032 { padding: 10px 14px 12px; }
.planner-033 { display: flex; align-items: center; gap: 8px; }
.planner-034 { flex: 1; min-width: 0; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.planner-035 { font: 600 11.5px Figtree; opacity: .8; padding: 4px 0; }
.planner-036 { flex: none; border: 2px solid #BFCBDC; border-radius: 99px; padding: 7px 12px; font: 800 12.5px 'Bricolage Grotesque'; background: var(--planner-036-background); color: var(--planner-036-color); box-shadow: 0 1px 3px rgba(17,24,39,.14); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.planner-037 { transform: var(--planner-037-transform); }
.planner-038 { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin: 10px -14px 0; padding: 10px 14px 2px; border-top: 1.5px dashed #BFCBDC; }
.planner-039 { flex: none; width: 42px; border: 1.5px solid #BFCBDC; border-radius: 12px; padding: 5px 0; background: var(--planner-039-background); color: var(--planner-039-color); opacity: var(--planner-039-opacity); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.planner-040 { font: 700 9px Figtree; text-transform: uppercase; }
.planner-041 { font: 800 15px/1 'Bricolage Grotesque'; }
.planner-042 { width: 100%; text-align: left; background: #fff; border-radius: 18px; border: 2px dashed #BFCBDC; padding: 0; overflow: hidden; cursor: pointer; color: #111827; }
.planner-043 { background: #FFD600; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px dashed #BFCBDC; }
.planner-044 { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #BFCBDC; background: #fff; box-shadow: 0 1px 3px rgba(17,24,39,.14); display: flex; align-items: center; justify-content: center; }
.planner-045 { padding: 10px 14px 12px; font: 600 12px Figtree; opacity: .7; }
.planner-046 { background: #fff; color: #111827; border: 2px solid #0066FF; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px rgba(0,102,255,.14); margin-bottom: 12px; }
.planner-047 { width: 100%; margin-bottom: 12px; border: 2px solid #BFCBDC; border-radius: 18px; padding: 5px; background: #fff; box-shadow: 0 1px 3px rgba(17,24,39,.14); cursor: pointer; color: #111827; }
.planner-048 { display: flex; flex-direction: column; }
.planner-049 { display: flex; opacity: var(--planner-049-opacity); background: #fff; color: #111827; border-radius: 18px; border: var(--planner-049-border); overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.planner-050 { width: 68px; flex: none; background: var(--planner-050-background); border-right: 2px dashed #BFCBDC; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0; }
.planner-051 { font: 800 19px/1 'Bricolage Grotesque'; }
.planner-052 { font: 600 11px Figtree; margin-top: 4px; }
.planner-053 { flex: 1; min-width: 0; padding: 11px 14px; }
.planner-054 { font: 800 18px/1.15 'Bricolage Grotesque'; }
.planner-055 { font: 500 12.5px Figtree; opacity: .7; margin-top: 3px; }
.planner-056 { padding: 0 0 2px; }
.planner-057 { font: 600 11.5px Figtree; color: #D14900; margin-top: 6px; }
.planner-058 { font: 600 11.5px Figtree; color: #00A862; margin-top: 6px; }
.planner-059 { font: 700 11.5px Figtree; color: #111827; background: #FFD600; border-radius: 8px; padding: 4px 8px; margin-top: 6px; display: inline-block; }
.planner-060 { font: 600 11.5px Figtree; opacity: .8; margin-top: 6px; }
.planner-061 { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.planner-062 { opacity: var(--planner-062-opacity); border: 2px solid #BFCBDC; background: #F5F7FA; border-radius: 99px; padding: 6px 11px; font: 800 12.5px 'Bricolage Grotesque'; color: #111827; cursor: pointer; }
.planner-063 { opacity: var(--planner-063-opacity); border: 2px solid #BFCBDC; background: #F5F7FA; border-radius: 99px; padding: 6px 11px; font: 800 12.5px 'Bricolage Grotesque'; color: #111827; cursor: pointer; }
.planner-064 { border: 2px solid #BFCBDC; background: var(--planner-064-background); border-radius: 99px; padding: 6px 11px; font: 800 12.5px 'Bricolage Grotesque'; color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); cursor: pointer; }
.planner-065 { border: 2px solid #BFCBDC; background: #F5F7FA; border-radius: 99px; padding: 6px 11px; font: 800 12.5px 'Bricolage Grotesque'; color: #111827; cursor: pointer; }
.planner-066 { border: 0; background: transparent; padding: 6px 6px; font: 800 12.5px 'Bricolage Grotesque'; color: #D14900; cursor: pointer; }
.planner-067 { font: 500 11px Figtree; opacity: .75; padding: 5px 0 5px 78px; }
.planner-068 { text-align: center; padding: 28px 16px 18px; }
.planner-069 { font: 800 20px 'Bricolage Grotesque'; }
.planner-070 { font: 500 13px/1.45 Figtree; opacity: .7; margin-top: 4px; }
.planner-071 { display: flex; gap: 8px; margin-top: 6px; }
.planner-072 { flex: 1; border: 2px dashed #BFCBDC; background: transparent; border-radius: 16px; padding: 12px; font: 700 13px Figtree; color: #111827; }
.planner-073 { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.planner-074 { position: absolute; inset: 0; z-index: 31; background: rgba(17,24,39,.45); display: flex; flex-direction: column; justify-content: flex-end; }
.planner-075 { flex: 1; }
.planner-076 { background: #F5F7FA; border-top: 3px solid #BFCBDC; border-radius: 28px 28px 0 0; overflow: hidden; color: #111827; }
.planner-077 { background: #FFD600; padding: 12px 18px 16px; border-bottom: 2px solid #BFCBDC; }
.planner-078 { width: 40px; height: 4px; border-radius: 2px; background: rgba(17,24,39,.3); margin: 0 auto 12px; }
.planner-079 { display: flex; align-items: flex-start; gap: 10px; }
.planner-080 { font: 800 26px/1.05 'Bricolage Grotesque'; margin-top: 4px; }
.planner-081 { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #BFCBDC; background: #fff; font: 700 20px/1 Figtree; color: #111827; padding: 0; cursor: pointer; }
.planner-082 { padding: 14px 18px 22px; }
.planner-083 { background: #fff; border: 2px solid #BFCBDC; border-radius: 18px; padding: 4px 14px; }
.planner-084 { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: var(--planner-084-border-top); }
.planner-085 { width: 22px; height: 22px; flex: none; border-radius: 7px; background: #0066FF; display: flex; align-items: center; justify-content: center; }
.planner-086 { font: 700 13.5px Figtree; }
.planner-087 { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.planner-088 { display: flex; align-items: center; gap: 12px; text-align: left; border: var(--planner-088-border); border-radius: 18px; padding: 12px 14px; background: #fff; box-shadow: var(--planner-088-box-shadow); color: #111827; cursor: pointer; }
.planner-089 { width: 20px; height: 20px; flex: none; border-radius: 50%; border: var(--planner-089-border); background: var(--planner-089-background); box-sizing: border-box; }
.planner-090 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.planner-091 { font: 800 17px/1.1 'Bricolage Grotesque'; }
.planner-092 { font: 700 9.5px Figtree; letter-spacing: .04em; text-transform: uppercase; background: #FFD600; border: 1.5px solid #BFCBDC; border-radius: 6px; padding: 2px 6px; }
.planner-093 { display: block; font: 500 11.5px Figtree; opacity: .7; margin-top: 2px; }
.planner-094 { flex: none; text-align: right; }
.planner-095 { display: block; font: 800 17px/1 'Bricolage Grotesque'; }
.planner-096 { display: block; font: 700 9.5px Figtree; letter-spacing: .03em; text-transform: uppercase; margin-top: 3px; opacity: .7; }
.planner-097 { width: 100%; margin-top: 14px; border: 2px solid #0066FF; border-radius: 99px; padding: 13px; font: 800 15px 'Bricolage Grotesque'; background: #0066FF; color: #FFFFFF; box-shadow: 0 1px 3px rgba(17,24,39,.14); cursor: pointer; }
.planner-098 { text-align: center; font: 600 11.5px Figtree; opacity: .65; margin-top: 10px; }
.planner-099 { position: absolute; inset: 0; z-index: 32; background: rgba(17,24,39,.45); display: flex; flex-direction: column; justify-content: flex-end; }
.planner-100 { background: #00D6E8; padding: 12px 18px 16px; border-bottom: 2px solid #BFCBDC; }
.planner-101 { font: 500 12px Figtree; opacity: .8; margin-top: 4px; }
.planner-102 { font: 700 10.5px Figtree; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.planner-103 { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 4px; }
.planner-104 { flex: none; width: 42px; border: var(--planner-104-border); border-radius: 12px; padding: 6px 0; background: var(--planner-104-background); color: var(--planner-104-color); opacity: var(--planner-104-opacity); display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; }
.planner-105 { background: #fff; border: 2px solid #BFCBDC; border-radius: 18px; padding: 12px 14px; margin-top: 12px; }
.planner-106 { font: 800 18px/1.15 'Bricolage Grotesque'; margin-top: 3px; }
.planner-107 { font: 500 11.5px Figtree; opacity: .7; margin-top: 3px; }
.planner-108 { width: 100%; margin-top: 6px; border: 0; background: transparent; padding: 10px; font: 700 13px Figtree; color: #111827; opacity: .75; cursor: pointer; }
.planner-109 { position: absolute; inset: 0; z-index: 30; background: rgba(17,24,39,.45); display: flex; flex-direction: column; justify-content: flex-end; }
.planner-110 { background: #F5F7FA; border-top: 3px solid #BFCBDC; border-radius: 28px 28px 0 0; overflow: hidden; }
.planner-111 { background: var(--planner-111-background); padding: 12px 18px 16px; border-bottom: 2px solid #BFCBDC; }
.planner-112 { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #BFCBDC; background: #fff; font: 700 20px/1 Figtree; color: #111827; padding: 0; }
.planner-113 { padding: 14px 18px 24px; }
.planner-114 { display: flex; gap: 6px; }
.planner-115 { flex: 1; min-width: 0; background: #fff; border-radius: 12px; border: 2px solid #BFCBDC; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; }
.planner-116 { font: 800 18px/1 'Bricolage Grotesque'; white-space: nowrap; }
.planner-117 { font: 700 9.5px Figtree; margin-top: 4px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.planner-118 { font: 400 14px/1.55 Figtree; margin-top: 14px; text-wrap: pretty; }
.planner-119 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.planner-120 { font: 700 11.5px Figtree; border: 1.5px solid #BFCBDC; border-radius: 99px; padding: 4px 10px; }
.planner-121 { display: flex; gap: 8px; margin-top: 18px; }
.planner-122 { flex: 1; border: 2px solid #BFCBDC; border-radius: 99px; padding: 13px; font: 800 15px 'Bricolage Grotesque'; background: #FFD600; color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.planner-123 { flex: 1; border: 2px solid #BFCBDC; border-radius: 99px; padding: 13px; font: 800 15px 'Bricolage Grotesque'; background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.planner-124 { background: #F5F7FA; border-top: 3px solid #BFCBDC; border-radius: 28px 28px 0 0; padding: 10px 18px 26px; }
.planner-125 { width: 40px; height: 4px; border-radius: 2px; background: rgba(17,24,39,.25); margin: 0 auto 10px; }
.planner-126 { display: flex; justify-content: space-between; align-items: center; }
.planner-127 { font: 800 23px/1.1 'Bricolage Grotesque'; }
.planner-128 { border: 0; background: transparent; font: 700 22px Figtree; color: #111827; padding: 0 4px; }
.planner-129 { font: 700 11px Figtree; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin: 14px 2px 6px; }
.planner-130 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.planner-131 { border: var(--planner-131-border); background: var(--planner-131-background); border-radius: 12px; padding: 9px 0; font: 700 11.5px Figtree; color: #111827; white-space: nowrap; }
.planner-132 { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 2px; }
.planner-133 { flex: none; width: 44px; border: 2px solid #BFCBDC; border-radius: 12px; padding: 5px 0; background: var(--planner-133-background); color: var(--planner-133-color); opacity: var(--planner-133-opacity); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.planner-134 { font: 800 16px/1 'Bricolage Grotesque'; }
.planner-135 { width: 100%; box-sizing: border-box; border: 2px solid #BFCBDC; border-radius: 12px; padding: 11px 12px; font: 600 14px Figtree; color: #111827; background: #fff; outline: none; }
.planner-136 { display: flex; align-items: center; gap: 12px; margin-top: 14px; background: #fff; border: 2px solid #BFCBDC; border-radius: 14px; padding: 11px 12px; cursor: pointer; }
.planner-137 { font: 700 14px Figtree; }
.planner-138 { font: 500 11.5px/1.35 Figtree; opacity: .65; margin-top: 2px; }
.planner-139 { width: 46px; height: 28px; flex: none; border-radius: 99px; background: var(--planner-139-background); border: 2px solid #BFCBDC; position: relative; box-sizing: border-box; }
.planner-140 { position: absolute; top: 2px; left: var(--planner-140-left); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #BFCBDC; box-sizing: border-box; transition: left .15s; }
.planner-141 { display: flex; gap: 10px; }
.planner-142 { flex: 1; min-width: 0; opacity: var(--planner-142-opacity); }
.planner-143 { display: flex; align-items: center; border: 2px solid #BFCBDC; border-radius: 12px; background: #fff; overflow: hidden; }
.planner-144 { border: 0; background: transparent; width: 36px; height: 40px; font: 800 18px Figtree; color: #111827; }
.planner-145 { flex: 1; text-align: center; font: 800 15px 'Bricolage Grotesque'; white-space: nowrap; }
.planner-146 { flex: none; }
.planner-147 { display: flex; gap: 3px; }
.planner-148 { width: 30px; height: 44px; border: 2px solid #BFCBDC; border-radius: 10px; background: var(--planner-148-background); color: var(--planner-148-color); font: 700 11px Figtree; padding: 0; }
.planner-149 { width: 100%; margin-top: 18px; border: 2px solid #BFCBDC; border-radius: 99px; padding: 14px; font: 800 16px 'Bricolage Grotesque'; background: #0066FF; color: #FFFFFF; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.planner-150 { flex: none; padding: 10px 18px 12px; background: #F5F7FA; }
.planner-151 { display: flex; gap: 6px; background: #fff; border: 2px solid #BFCBDC; border-radius: 18px; padding: 5px; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.planner-152 { flex: 1; border: var(--planner-152-border); border-radius: 12px; padding: 9px 0; font: 800 15px 'Bricolage Grotesque'; background: var(--planner-152-background); color: var(--planner-152-color); box-shadow: var(--planner-152-box-shadow); }
.planner-153 { display: flex; justify-content: space-around; padding: 10px 10px 22px; background: #fff; border-top: 2px solid #BFCBDC; font: 700 11px Figtree; align-items: center; }
.planner-154 { cursor: pointer; color: var(--planner-154-color); text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.planner-155 { width: 56px; height: 44px; box-sizing: border-box; border-radius: 14px; background: #FF4FC4; border: var(--planner-155-border); box-shadow: var(--planner-155-box-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #111827; }
.planner-156 { font: 800 9px/1 Figtree; letter-spacing: .08em; }
.planner-157 { font: 800 20px/1 'Bricolage Grotesque'; margin-top: 1px; }
.planner-158 { width: 2px; height: 40px; border-radius: 1px; background: rgba(17,24,39,.15); flex: none; align-self: flex-start; margin-top: 2px; }
.planner-159 { cursor: pointer; color: var(--planner-159-color); text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.planner-160 { width: 56px; height: 44px; box-sizing: border-box; border-radius: 14px; background: #0066FF; border: var(--planner-160-border); box-shadow: var(--planner-160-box-shadow); display: flex; align-items: center; justify-content: center; position: relative; }
.planner-161 { cursor: pointer; color: var(--planner-161-color); text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.planner-162 { width: 56px; height: 44px; box-sizing: border-box; border-radius: 14px; background: #00D6E8; border: var(--planner-162-border); box-shadow: var(--planner-162-box-shadow); display: flex; align-items: center; justify-content: center; position: relative; }
.planner-163 { cursor: pointer; color: var(--planner-163-color); text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.planner-164 { width: 56px; height: 44px; box-sizing: border-box; border-radius: 14px; background: #FFD600; border: var(--planner-164-border); box-shadow: var(--planner-164-box-shadow); display: flex; align-items: center; justify-content: center; position: relative; }
.planner-165 { cursor: pointer; color: var(--planner-165-color); text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.planner-166 { width: 56px; height: 44px; box-sizing: border-box; border-radius: 14px; background: #7830FF; border: var(--planner-166-border); box-shadow: var(--planner-166-box-shadow); display: flex; align-items: center; justify-content: center; position: relative; }
.tabs-167 { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--tabs-167-color); font-family: Figtree,sans-serif; }
.tabs-168 { flex: none; padding: 14px 18px 10px; background: var(--tabs-168-background); }
.tabs-169 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; background: #EEF3FB; border: 1px solid #BFCBDC; border-radius: 12px; padding: 3px; }
.tabs-170 { min-width: 0; height: 36px; border: 0; border-radius: 9px; padding: 0 6px; background: var(--tabs-170-background); box-shadow: var(--tabs-170-box-shadow); color: var(--tabs-170-color); font: var(--tabs-170-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs-171 { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: var(--tabs-171-padding); box-sizing: border-box; }
.tabs-172 { margin: 4px 0 4px; font: 800 30px/1.05 'Bricolage Grotesque'; letter-spacing: -.02em; }
.tabs-173 { font: 500 13px Figtree; opacity: .7; margin-bottom: 14px; }
.tabs-174 { background: var(--tabs-174-background); color: #111827; border: 2px solid #BFCBDC; border-radius: 22px; padding: 14px 12px; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.tabs-175 { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; text-align: center; font: 700 10.5px Figtree; opacity: .8; margin-bottom: 6px; }
.tabs-176 { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.tabs-177 { aspect-ratio: 1; border: var(--tabs-177-border); border-radius: 12px; background: var(--tabs-177-background); color: var(--tabs-177-color); font: 800 14px 'Bricolage Grotesque'; padding: 0; opacity: var(--tabs-177-opacity); visibility: var(--tabs-177-visibility); box-shadow: var(--tabs-177-box-shadow); }
.tabs-178 { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 2px 0; font: 600 12px Figtree; }
.tabs-179 { display: flex; align-items: center; gap: 6px; }
.tabs-180 { width: 12px; height: 12px; border-radius: 4px; background: #00D6E8; }
.tabs-181 { width: 12px; height: 12px; border-radius: 4px; background: #FFD600; }
.tabs-182 { width: 12px; height: 12px; border-radius: 4px; background: #FF6A00; }
.tabs-183 { margin-top: 16px; background: var(--tabs-183-background); color: #111827; border: 2px solid #BFCBDC; border-radius: 18px; padding: 12px 14px; }
.tabs-184 { font: 800 17px 'Bricolage Grotesque'; }
.tabs-185 { font: 500 12.5px Figtree; opacity: .7; margin-top: 3px; }
.tabs-186 { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.tabs-187 { position: relative; flex: 1; min-height: 300px; border-radius: 24px; background: #CCF6E4; border: 2px solid #BFCBDC; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.tabs-188 { position: absolute; left: var(--tabs-188-left); top: var(--tabs-188-top); width: var(--tabs-188-width); height: var(--tabs-188-height); background: var(--tabs-188-background); border-radius: var(--tabs-188-border-radius); }
.tabs-189 { position: absolute; left: var(--tabs-189-left); top: var(--tabs-189-top); font: 800 8.5px Figtree; letter-spacing: .08em; text-transform: uppercase; color: #111827; opacity: .8; white-space: nowrap; }
.tabs-190 { position: absolute; inset: 0; width: 100%; height: 100%; }
.tabs-191 { position: absolute; left: 58%; top: 92%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #0066FF; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(0,102,255,.32); }
.tabs-192 { position: absolute; left: var(--tabs-192-left); top: var(--tabs-192-top); width: var(--tabs-192-width); height: var(--tabs-192-height); transform: translate(-50%,-50%); border-radius: 50%; background: var(--tabs-192-background); border: var(--tabs-192-border); box-shadow: var(--tabs-192-box-shadow); display: flex; align-items: center; justify-content: center; font: 800 11px 'Bricolage Grotesque'; color: #111827; cursor: pointer; box-sizing: border-box; z-index: var(--tabs-192-z-index); }
.tabs-193 { text-align: center; padding: 40px 20px; }
.tabs-194 { font: 800 20px 'Bricolage Grotesque'; }
.tabs-195 { font: 500 13px/1.45 Figtree; opacity: .7; margin-top: 4px; }
.tabs-196 { background: var(--tabs-196-background); color: #111827; border: 2px solid #BFCBDC; border-radius: 18px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.14); opacity: var(--tabs-196-opacity); }
.tabs-197 { background: var(--tabs-197-background); padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.tabs-198 { flex: 1; min-width: 0; }
.tabs-199 { font: 700 10.5px Figtree; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.tabs-200 { font: 800 20px/1.1 'Bricolage Grotesque'; margin-top: 3px; }
.tabs-201 { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #BFCBDC; background: var(--tabs-201-background); box-shadow: 0 1px 3px rgba(17,24,39,.14); padding: 0; display: var(--tabs-201-display); align-items: center; justify-content: center; cursor: pointer; }
.tabs-202 { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #BFCBDC; background: #fff; box-shadow: 0 1px 3px rgba(17,24,39,.14); padding: 0; display: flex; align-items: center; justify-content: center; }
.tabs-203 { padding: 10px 14px 12px; }
.tabs-204 { display: flex; gap: 6px; }
.tabs-205 { flex: 1; min-width: 0; background: var(--tabs-205-background); border-radius: 12px; border: 2px solid #BFCBDC; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tabs-206 { font: 800 21px/1 'Bricolage Grotesque'; }
.tabs-207 { font: 700 9.5px Figtree; margin-top: 3px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.tabs-208 { flex: 1; min-width: 0; background: #F5F7FA; border-radius: 12px; border: 2px solid #BFCBDC; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tabs-209 { flex: 1; min-width: 0; background: var(--tabs-209-background); border-radius: 12px; border: 2px solid #BFCBDC; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tabs-210 { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid rgba(17,24,39,.12); }
.tabs-211 { font: 700 10.5px Figtree; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.tabs-212 { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs-213 { flex: 1 1 auto; min-width: 0; border: 2px solid #BFCBDC; border-radius: 12px; padding: 8px 10px; font: 800 13.5px 'Bricolage Grotesque'; background: var(--tabs-213-background); color: #111827; cursor: pointer; }
.tabs-214 { font: 600 11.5px Figtree; color: #B45309; margin-top: 8px; }
.tabs-215 { font: 600 11.5px Figtree; color: #00A862; margin-top: 8px; }
.tabs-216 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tabs-217 { flex: none; margin-top: 10px; border: 2px solid #BFCBDC; border-radius: 99px; padding: 7px 12px; font: 800 12.5px 'Bricolage Grotesque'; background: var(--tabs-217-background); color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); white-space: nowrap; }
.tabs-218 { background: var(--tabs-218-background); color: #111827; border: 2px solid #BFCBDC; border-radius: 18px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.tabs-219 { background: var(--tabs-219-background); padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.tabs-220 { flex: none; font: 700 12px Figtree; background: #fff; border: 2px solid #BFCBDC; border-radius: 10px; padding: 5px 9px; }
.tabs-221 { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs-222 { border: 2px solid #BFCBDC; border-radius: 12px; padding: 8px 12px; font: 800 14px 'Bricolage Grotesque'; background: var(--tabs-222-background); color: #111827; }
.tabs-223 { background: var(--tabs-223-background); padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.tabs-224 { flex: none; width: 44px; height: 40px; border-radius: 12px; border: 2px solid #BFCBDC; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tabs-225 { font: 800 16px/1 'Bricolage Grotesque'; }
.tabs-226 { font: 700 9px Figtree; }
.tabs-227 { padding: 10px 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tabs-228 { font: 600 12px Figtree; opacity: .7; min-width: 0; }
.tabs-229 { flex: none; border: 2px solid #BFCBDC; border-radius: 99px; padding: 7px 12px; font: 800 12.5px 'Bricolage Grotesque'; background: var(--tabs-229-background); color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); white-space: nowrap; }
.tabs-230 { display: flex; flex-direction: column; gap: 12px; }
.tabs-231 { background: var(--tabs-231-background); color: #111827; border: 2px solid #BFCBDC; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.tabs-232 { background: #74A4FF; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.tabs-233 { width: 48px; height: 48px; flex: none; border-radius: 14px; background: #FFFFFF; border: 2px solid #BFCBDC; display: flex; align-items: center; justify-content: center; font: 800 22px 'Bricolage Grotesque'; }
.tabs-234 { font: 500 11.5px Figtree; opacity: .8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs-235 { padding: 10px 14px 12px; display: flex; gap: 6px; }
.tabs-236 { flex: 1; min-width: 0; background: #F5F7FA; border-radius: 12px; border: 2px solid #BFCBDC; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; }
.tabs-237 { background: var(--tabs-237-background); padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.tabs-238 { font: 500 11.5px Figtree; opacity: .75; margin-top: 2px; }
.tabs-239 { flex: none; font: 700 12px Figtree; background: #fff; border: 2px solid #BFCBDC; border-radius: 10px; padding: 5px 9px; white-space: nowrap; }
.tabs-240 { padding: 10px 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tabs-241 { flex: none; border: var(--tabs-241-border); border-radius: 99px; padding: 7px 14px; font: 800 12.5px 'Bricolage Grotesque'; background: var(--tabs-241-background); color: var(--tabs-241-color); box-shadow: 0 1px 3px rgba(17,24,39,.14); white-space: nowrap; cursor: pointer; }
.tabs-242 { background: #FFF3B3; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; }
.tabs-243 { padding: 12px 14px 4px; }
.tabs-244 { min-width: 0; height: 36px; border: 0; border-radius: 9px; padding: 0 6px; background: var(--tabs-244-background); box-shadow: var(--tabs-244-box-shadow); color: var(--tabs-244-color); font: var(--tabs-244-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tabs-245 { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: var(--tabs-245-border-top); cursor: pointer; }
.tabs-246 { font: 700 14px Figtree; }
.tabs-247 { font: 500 11.5px Figtree; opacity: .65; margin-top: 1px; }
.tabs-248 { width: 46px; height: 28px; flex: none; border-radius: 99px; background: var(--tabs-248-background); border: 2px solid #BFCBDC; position: relative; box-sizing: border-box; }
.tabs-249 { position: absolute; top: 2px; left: var(--tabs-249-left); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #BFCBDC; box-sizing: border-box; transition: left .15s; }
.tabs-250 { background: #E4D6FF; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #BFCBDC; cursor: pointer; }
.tabs-251 { width: 46px; height: 28px; flex: none; border-radius: 99px; background: var(--tabs-251-background); border: 2px solid #BFCBDC; position: relative; box-sizing: border-box; }
.tabs-252 { position: absolute; top: 2px; left: var(--tabs-252-left); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #BFCBDC; box-sizing: border-box; transition: left .15s; }
.tabs-253 { padding: 4px 14px 12px; opacity: var(--tabs-253-opacity); }
.tabs-254 { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: var(--tabs-254-border-top); }
.tabs-255 { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--tabs-255-background); border: 2px solid #BFCBDC; display: flex; align-items: center; justify-content: center; font: 800 16px 'Bricolage Grotesque'; }
.tabs-256 { font: 800 15px/1.15 'Bricolage Grotesque'; }
.tabs-257 { font: 500 11.5px Figtree; opacity: .65; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs-258 { flex: none; border: 2px solid #BFCBDC; border-radius: 99px; padding: 7px 12px; font: 800 12.5px 'Bricolage Grotesque'; background: var(--tabs-258-background); color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); white-space: nowrap; cursor: pointer; }
.tabs-259 { width: 100%; margin-top: 6px; border: 2px solid #BFCBDC; border-radius: 12px; padding: 10px 0; font: 800 14px 'Bricolage Grotesque'; background: #FFD600; color: #111827; box-shadow: 0 1px 3px rgba(17,24,39,.14); cursor: pointer; }
.tabs-260 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-top: var(--tabs-260-border-top); font: 700 14px Figtree; cursor: pointer; }
.tabs-261 { font: 800 16px Figtree; opacity: .6; }
.tabs-262 { display: flex; background: var(--tabs-262-background); border: 2px solid #BFCBDC; border-radius: 18px; padding: 5px; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.tabs-263 { flex: 1; border: 2px solid #0066FF; border-radius: 12px; padding: 9px 0; font: 800 15px 'Bricolage Grotesque'; background: #0066FF; color: #FFFFFF; box-shadow: 0 1px 3px rgba(17,24,39,.14); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.tabs-264 { flex: none; padding: 10px 18px 12px; background: var(--tabs-264-background); }
.tabs-265 { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 10px; }
.tabs-266 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px Figtree; opacity: .75; }
.tabs-267 { flex: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tabs-268 { font: 700 12.5px Figtree; white-space: nowrap; }
.tabs-269 { width: 46px; height: 28px; flex: none; border-radius: 99px; background: var(--tabs-269-background); border: 2px solid #BFCBDC; position: relative; box-sizing: border-box; }
.tabs-270 { position: absolute; top: 2px; left: var(--tabs-270-left); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #BFCBDC; box-sizing: border-box; transition: left .15s; }
.tabs-271 { display: flex; gap: 6px; background: var(--tabs-271-background); border: 2px solid #BFCBDC; border-radius: 18px; padding: 5px; box-shadow: 0 1px 3px rgba(17,24,39,.14); }
.tabs-272 { flex: 1; border: var(--tabs-272-border); border-radius: 12px; padding: 9px 0; font: 800 15px 'Bricolage Grotesque'; background: var(--tabs-272-background); color: var(--tabs-272-color); box-shadow: var(--tabs-272-box-shadow); }
.tabs-273 { flex: none; position: relative; display: flex; }
.tabs-274 { position: absolute; right: -5px; bottom: calc(100% + 12px); width: 200px; background: #FFFFFF; border: 1px solid #BFCBDC; border-radius: 14px; box-shadow: 0 8px 24px rgba(17,24,39,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 5; }
.tabs-275 { font: 700 10.5px Figtree; letter-spacing: .06em; text-transform: uppercase; color: #475569; padding: 6px 10px 4px; }
.tabs-276 { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; padding: 10px; background: var(--tabs-276-background); color: var(--tabs-276-color); font: 700 14px Figtree; text-align: left; }
.tabs-277 { width: 10px; height: 10px; border-radius: 3px; background: var(--tabs-277-background); flex: none; }
.tabs-278 { flex: 1; }
.tabs-279 { font: 800 13px Figtree; opacity: var(--tabs-279-opacity); }
.tabs-280 { width: 52px; border: var(--tabs-280-border); border-radius: 12px; padding: 0; background: var(--tabs-280-background); box-shadow: var(--tabs-280-box-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--tabs-280-color); }
.tabs-281 { font: 700 9px Figtree; white-space: nowrap; }
.tabs-282 { display: flex; align-items: center; gap: 6px; font: 600 12px Figtree; opacity: .75; }
.tabs-283 { width: 8px; height: 8px; border-radius: 50%; background: #00A862; box-shadow: 0 0 0 4px rgba(0,210,122,.3); }
.tabs-284 { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tabs-285 { font: 700 12.5px Figtree; }
.tabs-286 { width: 46px; height: 28px; flex: none; border-radius: 99px; background: var(--tabs-286-background); border: 2px solid #BFCBDC; position: relative; box-sizing: border-box; }
.tabs-287 { position: absolute; top: 2px; left: var(--tabs-287-left); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #BFCBDC; box-sizing: border-box; transition: left .15s; }
.tabs-288 { flex: none; width: 52px; border: var(--tabs-288-border); border-radius: 12px; padding: 0; background: var(--tabs-288-background); box-shadow: var(--tabs-288-box-shadow); display: flex; align-items: center; justify-content: center; }

.plan-button {
  appearance:none;
  box-sizing:border-box;
  flex:none;
  min-width:104px;
  min-height:48px;
  padding:10px 18px;
  border:2px solid #111827;
  border-radius:14px;
  box-shadow:0 3px 0 #111827;
  font:800 15px/1.2 'Bricolage Grotesque', sans-serif;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease, box-shadow .12s ease;
}
.plan-button svg { flex:none; pointer-events:none; }
.plan-button:focus-visible {
  outline:3px solid #0066FF;
  outline-offset:4px;
}
@media (hover:hover) {
  .plan-button:hover { transform:translateY(-1px); box-shadow:0 4px 0 #111827; }
}
.plan-button:active { transform:translateY(2px); box-shadow:0 1px 0 #111827; }
.plan-button[aria-expanded="true"] { box-shadow:none; }
@media (prefers-reduced-motion:reduce) {
  .plan-button { transition:none; }
}

/* Adaptations for the real device viewport and its safe area. Like the top, the tab bar keeps 12px of air above the
   safe area at the bottom: a tap low on a tab next to the home indicator of an iPhone opened Siri (the owner, 25 October
   2026). !important beats the 22px of the inline style of navigation.php. */
.planner-app .main-navigation { padding-bottom:max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important; }
/* Buy stays off until the email address is valid, Use code until the code looks like one too (app.js, buyer, gift). */
.planner-app .buy-button:disabled, .planner-app .gift-button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none !important; }
/* In the upgrade sheet of the quiet design a button that is off is grey instead (the colours of the theme come with the
   sheet, app.js upQ), and a field you type in has the blue ring of a chosen box. */
.planner-app .upgrade-sheet .buy-button:disabled, .planner-app .upgrade-sheet .gift-button:disabled { opacity:1; background:var(--up-off-bg) !important; color:var(--up-off-fg) !important; }
.planner-app .upgrade-sheet input:focus { outline:none; box-shadow:inset 0 0 0 2px #0B63FF !important; }
/* A sheet taller than the screen scrolls (its inline overflow:hidden only rounds the corners). */
.planner-app .responsive-sheet { flex-shrink:1; min-height:0; max-height:100%; overflow-y:auto !important; }
@media (max-width:360px) {
  .planner-app .main-navigation,
  .planner-app .filter-tray { padding-left:4px !important; padding-right:4px !important; }
}

/* Account add-on theme: keep the supplied accent colours and change only the
   neutral surfaces, text and borders when the user chooses Dark. */
.planner-app.theme-dark {
  background:#0B1220;
  color:#F5F7FA;
}
/* Wide screens show the page beside the planner (max 1600px): it takes the planner's dark background too. */
html:has(.planner-app.theme-dark),
html:has(.planner-app[data-theme="dark"]),
body:has(.planner-app.theme-dark),
body:has(.planner-app[data-theme="dark"]) { background:#0B1220; }
.planner-app.theme-dark .planner-001,
.planner-app.theme-dark .planner-007,
.planner-app.theme-dark .main-navigation { background:#10203D !important; border-top-color:#2A3A5C !important; }
.planner-app.theme-dark [style*="background:#F5F7FA"],
.planner-app.theme-dark [style*="background:#fff"],
.planner-app.theme-dark [style*="background:#FFFFFF"] { background:#1E293B !important; }
.planner-app.theme-dark [style*="background:#EEF3FB"] { background:#243244 !important; }
.planner-app.theme-dark [style*="color:#111827"] { color:#F5F7FA !important; }
.planner-app.theme-dark [style*="color:#475569"] { color:#CBD5E1 !important; }
.planner-app.theme-dark [style*="border:1px solid #BFCBDC"],
.planner-app.theme-dark [style*="border:2px solid #BFCBDC"],
.planner-app.theme-dark [style*="border:1.5px solid #BFCBDC"],
.planner-app.theme-dark [style*="border-bottom:2px solid #BFCBDC"],
.planner-app.theme-dark [style*="border-top:2px solid #BFCBDC"],
.planner-app.theme-dark [style*="border-top:1.5px solid rgba(17,24,39,.12)"],
.planner-app.theme-dark [style*="border-top:1.5px dashed #BFCBDC"] { border-color:#475569 !important; }
.planner-app.theme-dark [style*="background:#FFD600"][style*="color:#111827"],
.planner-app.theme-dark [style*="background:#00D6E8"][style*="color:#111827"] { color:#111827 !important; }
.planner-app.theme-dark svg [stroke="#111827"] { stroke:#F5F7FA !important; }
.planner-app.theme-dark svg [fill="#111827"] { fill:#F5F7FA !important; }
.planner-app.theme-dark .noscroll { scrollbar-color:#475569 #0F172A; }

/* The data attribute is the stable hook during the first root render. */
.planner-app[data-theme="dark"] {
  background:#0B1220;
  color:#F5F7FA;
}
.planner-app[data-theme="dark"] .planner-001,
.planner-app[data-theme="dark"] .planner-007,
.planner-app[data-theme="dark"] .main-navigation { background:#10203D !important; border-top-color:#2A3A5C !important; }
.planner-app[data-theme="dark"] [style*="background:#F5F7FA"],
.planner-app[data-theme="dark"] [style*="background:#fff"],
.planner-app[data-theme="dark"] [style*="background:#FFFFFF"] { background:#1E293B !important; }
.planner-app[data-theme="dark"] [style*="background:#EEF3FB"] { background:#243244 !important; }
.planner-app[data-theme="dark"] [style*="color:#111827"] { color:#F5F7FA !important; }
.planner-app[data-theme="dark"] [style*="color:#475569"] { color:#CBD5E1 !important; }
.planner-app[data-theme="dark"] [style*="border:1px solid #BFCBDC"],
.planner-app[data-theme="dark"] [style*="border:2px solid #BFCBDC"],
.planner-app[data-theme="dark"] [style*="border:1.5px solid #BFCBDC"],
.planner-app[data-theme="dark"] [style*="border-bottom:2px solid #BFCBDC"],
.planner-app[data-theme="dark"] [style*="border-top:2px solid #BFCBDC"],
.planner-app[data-theme="dark"] [style*="border-top:1.5px solid rgba(17,24,39,.12)"],
.planner-app[data-theme="dark"] [style*="border-top:1.5px dashed #BFCBDC"] { border-color:#475569 !important; }
.planner-app[data-theme="dark"] [style*="background:#FFD600"][style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#00D6E8"][style*="color:#111827"] { color:#111827 !important; }
.planner-app[data-theme="dark"] [style*="background:#FFFFFF"][style*="color:#0066FF"] { color:#93C5FD !important; }
.planner-app[data-theme="dark"] .info-action { color:#F5F7FA !important; }
.planner-app[data-theme="dark"] svg [stroke="#111827"] { stroke:#F5F7FA !important; }
.planner-app[data-theme="dark"] svg [fill="#111827"] { fill:#F5F7FA !important; }
.planner-app[data-theme="dark"] .noscroll { scrollbar-color:#475569 #0F172A; }

/* Bright accent panels still use the original palette in Dark. Their labels
   need the original ink colour instead of inheriting the dark-surface text. */
.planner-app[data-theme="dark"] [style*="background:#74A4FF"],
.planner-app[data-theme="dark"] [style*="background:#FF6A00"],
.planner-app[data-theme="dark"] [style*="background:#FFD600"],
.planner-app[data-theme="dark"] [style*="background:#FF4FC4"],
.planner-app[data-theme="dark"] [style*="background:#00D6E8"],
.planner-app[data-theme="dark"] [style*="background:#00D27A"],
.planner-app[data-theme="dark"] [style*="background:#E4D6FF"],
.planner-app[data-theme="dark"] [style*="background:#FFF3B3"],
.planner-app[data-theme="dark"] [style*="background:#CCF6E4"],
.planner-app[data-theme="dark"] [style*="background:#CCE0FF"],
.planner-app[data-theme="dark"] [style*="background:#BFF5FA"],
.planner-app[data-theme="dark"] [style*="background:#CCF7FA"],
.planner-app[data-theme="dark"] [style*="background:#FFE1CC"] { color:#111827 !important; }

/* Inline ink colours are also used by labels and pins inside the map/pastel
   panels. Keep those descendants dark after the surface rule above. */
.planner-app[data-theme="dark"] [style*="background:#74A4FF"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#FF6A00"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#FFD600"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#FF4FC4"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#00D6E8"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#00D27A"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#E4D6FF"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#FFF3B3"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#CCF6E4"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#CCE0FF"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#BFF5FA"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#CCF7FA"] [style*="color:#111827"],
.planner-app[data-theme="dark"] [style*="background:#FFE1CC"] [style*="color:#111827"] { color:#111827 !important; }

.planner-app[data-theme="dark"] .accent-surface { color:#111827 !important; }
.planner-app[data-theme="dark"] .accent-surface [style*="color:#111827"] { color:#111827 !important; }
.planner-app[data-theme="dark"] .accent-surface[style*="background:#EEF3FB"] { color:#F5F7FA !important; }
.planner-app[data-theme="dark"] .accent-surface [style*="background:#fff"],
.planner-app[data-theme="dark"] .accent-surface [style*="background:#FFFFFF"],
.planner-app[data-theme="dark"] .accent-surface [style*="background:#F5F7FA"],
.planner-app[data-theme="dark"] .accent-surface [style*="background:#EEF3FB"] { color:#F5F7FA !important; }
.planner-app[data-theme="dark"] .map-canvas .map-land-label,
.planner-app[data-theme="dark"] .map-canvas .map-pin { color:#111827 !important; }

/* Warning copy remains legible on the dark neutral surfaces. */
.planner-app[data-theme="dark"] [style*="color:#B45309"] { color:#FBBF24 !important; }
.planner-app[data-theme="dark"] [style*="color:#D14900"] { color:#FB923C !important; }

/* Bottom-sheet drag handles use the same light-palette black translucency. */
.planner-app[data-theme="dark"] [style*="background:rgba(17,24,39,.3)"],
.planner-app[data-theme="dark"] [style*="background:rgba(17,24,39,.25)"] { background:#94A3B8 !important; }

/* Explicit theme tokens for Account's small neutral controls. These values
   are deliberately local so an accent header cannot make a nested badge or
   avatar inherit the wrong ink colour. The quiet Account keeps the navy of its tinted avatar tile in both themes. */
.account-avatar,
.plan-price { color:#111827; }
.planner-app[data-theme="dark"] .account-avatar,
.planner-app[data-theme="dark"] .plan-price { color:#F5F7FA !important; }
.planner-app[data-theme="dark"] .account-view-quiet .account-avatar { color:#10203D !important; }

/* This extra specificity wins over the accent-panel ink rule for the close
   glyph, including when the sheet header is yellow or cyan. */
body .planner-app.theme-dark .sheet-close,
body .planner-app[data-theme="dark"] .sheet-close {
  background:#1E293B !important;
  color:#F5F7FA !important;
  -webkit-text-fill-color:#F5F7FA !important;
  border-color:#CBD5E1 !important;
}

/* Responsive application shell. The base styles intentionally match the
   narrow phone viewport; these rules add breathing room and bounded reading
   widths without changing the view order or the supplied accent palette. */
.planner-topbar,
.planner-content-host,
.park-tabs-header,
.park-tabs-scroll,
.planner-timeline,
.planner-bottombar,
.park-tabs-footer {
  box-sizing:border-box;
  min-width:0;
}
.planner-content-host { width:100%; }
.park-tabs-root { min-width:0; }
.planner-plan-list { width:min(100%, 1100px); margin-inline:auto; }
.map-view { width:min(100%, 1180px); margin-inline:auto; }
.account-view,
.account-addon-view { width:min(100%, 920px); margin-inline:auto; }
.account-identity { font-size:clamp(15px, 1.8vw, 18px) !important; }
.queue-timer { max-width:100%; box-sizing:border-box; }
.queue-timer-complete { border:1.5px solid #008A4C; }

@media (min-width:768px) {
  .planner-app {
    max-width:1600px;
    margin:0 auto;
  }
  .planner-topbar,
  .planner-content-host,
  .planner-timeline,
  .planner-bottombar {
    width:min(1180px, 100%);
    margin-left:auto;
    margin-right:auto;
  }
  .planner-content-host,
  .planner-timeline { flex:1 1 auto !important; }
  .planner-topbar { padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
  .planner-timeline { padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
  .park-tabs-header { padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
  .park-tabs-scroll { padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
  /* The bottom bars of Plan, Map and Live line up with the content above them. */
  .planner-bottombar,
  .park-tabs-footer { padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
  /* So do the tips above the navigation (the tip of a second visit and the tips of the demo) and the offline notice. */
  .install-tip,
  .demo-tip,
  .offline-notice { box-sizing:border-box; width:calc(min(1180px, 100%) - 2 * clamp(24px, 4vw, 48px)); margin-left:auto !important; margin-right:auto !important; }
  .main-navigation {
    justify-content:center !important;
    gap:clamp(18px, 4vw, 56px) !important;
    padding:10px 24px max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
  }
  .main-navigation > span:not(.main-nav-divider) { flex:0 1 132px !important; min-width:88px; }
  /* The tray of filters keeps a filter above every tab of the centred navigation: the same padding, gap and cells. */
  .filter-tray { padding-left:24px !important; padding-right:24px !important; }
  .filter-tray-row { justify-content:center; gap:clamp(18px, 4vw, 56px); }
  .filter-tray-cell { box-sizing:border-box; flex:0 1 132px !important; min-width:88px; }
  .overlay-sheet { padding:24px; box-sizing:border-box; }
  .filter-sheet,
  .swipe-magic-sheet,
  .upgrade-sheet { width:min(100%, 520px); margin:0 auto; border-radius:28px !important; }
  .sheet-panel {
    width:min(100%, 840px);
    max-height:calc(100dvh - 48px);
    margin:0 auto;
    border-radius:28px !important;
    overflow-y:auto !important;
  }
  .overlay-sheet-info .sheet-panel { width:min(100%, 760px); }
  .overlay-sheet-custom .sheet-panel { width:min(100%, 700px); }
  .map-canvas { min-height:clamp(320px, 48vh, 720px) !important; }
}

@media (min-width:1024px) {
  /* The Rides/Shows bar of Plan shares the content column, like the bottom bars of Map and Live. */
  .planner-topbar,
  .planner-content-host,
  .planner-timeline,
  .planner-bottombar {
    width:min(1180px, calc(100% - 220px));
    margin-left:190px;
    margin-right:auto;
  }
  .planner-topbar { padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
  .planner-content-host { flex:1 1 auto; }
  .planner-timeline { padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
  /* Swipe to choose (its questions and its cards) sits beside the side navigation too, as a column of a phone's width
     in the middle of the content */
  .plan-swipe { margin-left:190px; }
  .plan-swipe > :not(.overlay-sheet) { box-sizing:border-box; width:min(600px, calc(100% - 32px)); margin-left:auto !important; margin-right:auto !important; }
  .park-tabs-header { padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
  .park-tabs-scroll { padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
  .planner-bottombar,
  .park-tabs-footer { padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
  .install-tip,
  .demo-tip,
  .offline-notice { width:calc(min(1180px, 100% - 220px) - 2 * clamp(28px, 3vw, 56px)); margin-left:calc(190px + clamp(28px, 3vw, 56px)) !important; margin-right:auto !important; }
  /* Beside the side navigation the tray of filters ends the column of the content, under a line like the one of the
     bar it sits on on phones. */
  .filter-tray { box-sizing:border-box; width:min(1180px, calc(100% - 220px)); margin-left:190px; border-top:2px solid var(--tray-line); padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
  .filter-tray-row { gap:12px; }
  .main-navigation {
    position:absolute;
    z-index:20;
    inset:0 auto 0 0;
    width:176px;
    height:auto;
    box-sizing:border-box;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:12px !important;
    padding:28px 16px 24px !important;
    border-top:0 !important;
    border-right:2px solid #10203D;
  }
  .main-navigation > span:not(.main-nav-divider) {
    width:100%;
    min-width:0;
    flex:0 0 auto !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:12px !important;
    text-align:left !important;
    white-space:nowrap;
  }
  .main-navigation > span:not(.main-nav-divider) > span:first-child {
    flex:none;
  }
  .planner-app[data-theme="dark"] .main-navigation,
  .planner-app.theme-dark .main-navigation { border-right-color:#2A3A5C; border-top-color:transparent !important; }
  /* The side navigation ends in the logo mark: grey and quiet at the bottom, in colour while the pointer is on the bar. */
  .main-navigation::after { content:""; flex:none; margin:auto 0 0 8px; width:30px; height:30px; background:url("../brand/ptp-logo-mark.svg") center / contain no-repeat; opacity:.4; filter:grayscale(1); transition:opacity .3s, filter .3s; }
  .main-navigation:hover::after { opacity:1; filter:none; }
}

@media (max-width:420px) {
  .custom-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .queue-timer { display:flex !important; width:100%; }
  .overlay-sheet-info .sheet-panel { max-height:calc(100dvh - 8px); }
}

/* The park map (public/assets/js/park-map.js) on base maps drawn from OpenStreetMap data (public/assets/map/,
   bin/build-park-map.php). The layers of the SVGs take their colours from these tokens; the dark theme swaps the
   tokens and keeps the hues of the lands. */
.map-canvas {
  --pm-ground:#E9EFF5; --pm-park:#F4F7FB; --pm-builtup:#E1E8F0; --pm-parking:#DCE3EC; --pm-sand:#F6ECCD; --pm-rock:#EBDDC8;
  --pm-grass:#C6EDD9; --pm-wood:#A9E0C2; --pm-water:#AFD6FF; --pm-path:#FFFFFF; --pm-road:#FFFFFF; --pm-rail:#A3B0C2;
  --pm-track:#B9C4D3; --pm-building:#D9E1EC; --pm-building-edge:#C2CDDC; --pm-roof:#E6ECF3; --pm-roof-edge:#CFD8E4;
  --pm-land:.85; --pm-land-active:1; --pm-paths:.66;
  background:var(--pm-ground);
}
.planner-app[data-theme="dark"] .map-canvas,
.planner-app.theme-dark .map-canvas {
  --pm-ground:#0E1627; --pm-park:#142036; --pm-builtup:#1A2538; --pm-parking:#1C273A; --pm-sand:#3A3424; --pm-rock:#3B3127;
  --pm-grass:#12382E; --pm-wood:#0F3127; --pm-water:#143A63; --pm-path:#2C3D57; --pm-road:#334760; --pm-rail:#5B6B82;
  --pm-track:#4B5B72; --pm-building:#22304A; --pm-building-edge:#33445F; --pm-roof:#1D2A40; --pm-roof-edge:#2B3A52;
  --pm-land:.2; --pm-land-active:.34; --pm-paths:.8;
}
.map-host { position:absolute; inset:0; display:block; }
.park-map {
  position:absolute; inset:0; overflow:hidden; outline:none; cursor:grab;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.park-map:focus-visible { box-shadow:inset 0 0 0 3px #0066FF; }
.park-map.is-dragging { cursor:grabbing; }
.park-map [hidden] { display:none !important; }
.park-map .pm-world { position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
.park-map .pm-world.is-moving { will-change:transform; }
.park-map .pm-world > svg { position:absolute; display:block; overflow:hidden; }
.park-map .pm-svg .pm-bg { fill:var(--pm-ground); }
.park-map .pm-svg .pm-park { fill:var(--pm-park); }
.park-map .pm-svg .pm-builtup { fill:var(--pm-builtup); }
.park-map .pm-svg .pm-parking { fill:var(--pm-parking); }
.park-map .pm-svg .pm-sand { fill:var(--pm-sand); }
.park-map .pm-svg .pm-rock { fill:var(--pm-rock); }
.park-map .pm-svg .pm-land { fill-opacity:var(--pm-land); }
.park-map .pm-svg .pm-land.is-active { fill-opacity:var(--pm-land-active); }
.park-map .pm-svg .pm-grass { fill:var(--pm-grass); }
.park-map .pm-svg .pm-wood { fill:var(--pm-wood); }
.park-map .pm-svg .pm-hedge,
.park-map .pm-svg .pm-tree { stroke:var(--pm-wood); }
.park-map .pm-svg .pm-water { fill:var(--pm-water); }
.park-map .pm-svg .pm-stream { stroke:var(--pm-water); }
/* Walkways and plazas let the colour of their land show through. */
.park-map .pm-svg .pm-paths { opacity:var(--pm-paths); }
.park-map .pm-svg .pm-plaza { fill:var(--pm-path); }
.park-map .pm-svg .pm-walk,
.park-map .pm-svg .pm-steps,
.park-map .pm-svg .pm-service { stroke:var(--pm-path); }
.park-map .pm-svg .pm-road { stroke:var(--pm-road); }
.park-map .pm-svg .pm-rail { stroke:var(--pm-rail); }
.park-map .pm-svg .pm-track { stroke:var(--pm-track); }
.park-map .pm-svg .pm-building { fill:var(--pm-building); stroke:var(--pm-building-edge); }
.park-map .pm-svg .pm-roof { fill:var(--pm-roof); stroke:var(--pm-roof-edge); }
/* The app draws its own land labels in screen pixels; the SVG keeps its labels for viewing the file on its own. */
.park-map .pm-svg .pm-labels { display:none; }
.park-map .pm-tags,
.park-map .pm-pins,
.park-map .pm-clusters { position:absolute; inset:0; pointer-events:none; }
.park-map .pm-tags { z-index:1; }
.park-map .pm-pins { z-index:3; }
.park-map .pm-clusters { z-index:4; }
.park-map .pm-tag {
  position:absolute; left:0; top:0; height:18px; padding:0 7px; border-radius:99px; box-sizing:border-box; white-space:nowrap;
  font:800 8.5px/18px Figtree; letter-spacing:.08em; text-transform:uppercase; color:rgba(17,24,39,.8);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75); pointer-events:none; z-index:1;
}
.park-map .pm-route-tag { z-index:2; background:#FFFFFF; color:#111827; box-shadow:0 0 0 1.5px #BFCBDC; }
.park-map .pm-route { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2; }
.park-map .pm-route-halo { stroke:transparent; }
.planner-app[data-theme="dark"] .park-map .pm-route-halo,
.planner-app.theme-dark .park-map .pm-route-halo { stroke:rgba(147,197,253,.5); }
.park-map .pm-you {
  position:absolute; left:0; top:0; z-index:2; width:14px; height:14px; border-radius:50%;
  background:#0066FF; border:3px solid #fff; box-shadow:0 0 0 6px rgba(0,102,255,.32); pointer-events:none;
}
/* Which way you face (issue #16): a soft cone of the blue of the dot, under the dot, turned by park-map.js around its
   middle; the map itself stays north up. */
.park-map .pm-cone { position:absolute; left:0; top:0; z-index:2; width:88px; height:88px; color:#0066FF; pointer-events:none; transform-origin:44px 44px; }
.park-map .pm-cone svg { display:block; }
.park-map.is-quiet .pm-cone { color:#0B63FF; }
.park-map .map-pin {
  position:absolute; left:0; top:0; margin:0; padding:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:2px solid #111827; box-sizing:border-box; font:800 11px 'Bricolage Grotesque'; color:#111827;
  cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent;
}
.park-map .map-pin.is-approx { border-style:dashed; }
.park-map .pm-cluster {
  position:absolute; left:0; top:0; width:34px; height:34px; margin:0; padding:0; border-radius:50%; box-sizing:border-box;
  border:2px solid #111827; background:#FFFFFF; color:#111827; font:800 12px 'Bricolage Grotesque'; cursor:pointer; pointer-events:auto;
  box-shadow:3px 3px 0 -1px #FFFFFF, 3px 3px 0 1px #111827, 0 1px 3px rgba(17,24,39,.14);
}
.park-map .map-pin:focus-visible,
.park-map .pm-cluster:focus-visible,
.park-map .pm-control:focus-visible,
.park-map .pm-list-item:focus-visible,
.park-map .pm-credit a:focus-visible { outline:3px solid #0066FF; outline-offset:3px; }
.park-map .pm-controls { position:absolute; top:10px; right:10px; z-index:6; display:flex; flex-direction:column; gap:6px; }
.park-map .pm-control {
  width:44px; height:44px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  border:2px solid #BFCBDC; border-radius:12px; background:#FFFFFF; color:#111827; font:800 22px/1 'Bricolage Grotesque';
  box-shadow:0 1px 3px rgba(17,24,39,.14); cursor:pointer;
}
.park-map .pm-control:disabled { opacity:.45; cursor:default; }
/* Back to the route (issue #27, park-map.js recentreState): while its button shows, the six controls of the classic
   map stay inside its card of 300px. */
.park-map:not(.is-quiet) .pm-controls:has(.pm-recentre:not([hidden])) { gap:4px; }
/* Where am I: the button is blue while the map follows the device, and you get a wider ring there. */
.park-map .pm-control.is-on { background:#0066FF; border-color:#0066FF; color:#FFFFFF; }
.park-map .pm-you.is-gps { box-shadow:0 0 0 6px rgba(0,102,255,.32), 0 0 0 14px rgba(0,102,255,.14); }
.park-map .pm-credit {
  position:absolute; left:8px; bottom:8px; z-index:6; padding:3px 9px; border-radius:99px;
  background:rgba(255,255,255,.9); color:#475569; font:600 11px/16px Figtree; cursor:auto;
}
.park-map .pm-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.park-map .pm-message {
  position:absolute; left:50%; top:12px; z-index:6; transform:translateX(-50%); max-width:calc(100% - 120px); box-sizing:border-box;
  padding:6px 12px; border-radius:12px; background:#FFFFFF; color:#111827; border:1.5px solid #BFCBDC; font:700 12px Figtree; text-align:center;
}
.park-map .pm-list {
  position:absolute; left:0; top:0; z-index:7; display:flex; flex-direction:column; gap:2px; max-height:60%; overflow-y:auto; box-sizing:border-box;
  padding:6px; background:#FFFFFF; border:1px solid #BFCBDC; border-radius:14px; box-shadow:0 8px 24px rgba(17,24,39,.18); cursor:auto;
}
.park-map .pm-list-head { padding:6px 10px 4px; color:#475569; font:700 10.5px Figtree; letter-spacing:.06em; text-transform:uppercase; }
.park-map .pm-list-item {
  display:flex; align-items:center; gap:10px; margin:0; padding:10px; border:0; border-radius:10px;
  background:transparent; color:#111827; font:700 13px Figtree; text-align:left; cursor:pointer;
}
.park-map .pm-list-item:hover { background:#EEF3FB; }
.park-map .pm-list-dot { width:10px; height:10px; flex:none; border-radius:3px; border:1.5px solid #111827; }
.park-map .pm-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.planner-app[data-theme="dark"] .park-map .pm-control,
.planner-app.theme-dark .park-map .pm-control { background:#1E293B; border-color:#475569; color:#F5F7FA; }
.planner-app[data-theme="dark"] .park-map .pm-control.is-on,
.planner-app.theme-dark .park-map .pm-control.is-on { background:#0066FF; border-color:#0066FF; color:#FFFFFF; }
.planner-app[data-theme="dark"] .park-map .pm-credit,
.planner-app.theme-dark .park-map .pm-credit { background:rgba(15,23,42,.88); color:#CBD5E1; }
.planner-app[data-theme="dark"] .park-map .pm-message,
.planner-app.theme-dark .park-map .pm-message,
.planner-app[data-theme="dark"] .park-map .pm-list,
.planner-app.theme-dark .park-map .pm-list { background:#1E293B; border-color:#475569; color:#F5F7FA; }
.planner-app[data-theme="dark"] .park-map .pm-list-item,
.planner-app.theme-dark .park-map .pm-list-item { color:#F5F7FA; }
.planner-app[data-theme="dark"] .park-map .pm-list-head,
.planner-app.theme-dark .park-map .pm-list-head { color:#CBD5E1; }
.planner-app[data-theme="dark"] .park-map .pm-list-item:hover,
.planner-app.theme-dark .park-map .pm-list-item:hover { background:#243244; }
.planner-app[data-theme="dark"] .park-map .pm-route-tag,
.planner-app.theme-dark .park-map .pm-route-tag { background:#1E293B; color:#F5F7FA; box-shadow:0 0 0 1.5px #475569; }
.planner-app[data-theme="dark"] .park-map .pm-tag,
.planner-app.theme-dark .park-map .pm-tag { box-shadow:0 0 0 1.5px rgba(15,23,42,.6); }

/* Icons (public/assets/icons/): one set for the pins, the list, the search and the category sheet. Each draws in the
   colour of its text, so it follows the theme; the size is the font size. */
.ptp-icon { display:inline-block; flex:none; width:1em; height:1em; background-color:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.ptp-icon[data-icon="aed"] { -webkit-mask-image:url("../icons/aed.svg"); mask-image:url("../icons/aed.svg"); }
.ptp-icon[data-icon="all"] { -webkit-mask-image:url("../icons/all.svg"); mask-image:url("../icons/all.svg"); }
.ptp-icon[data-icon="atm"] { -webkit-mask-image:url("../icons/atm.svg"); mask-image:url("../icons/atm.svg"); }
.ptp-icon[data-icon="chevron"] { -webkit-mask-image:url("../icons/chevron.svg"); mask-image:url("../icons/chevron.svg"); }
.ptp-icon[data-icon="closed"] { -webkit-mask-image:url("../icons/closed.svg"); mask-image:url("../icons/closed.svg"); }
.ptp-icon[data-icon="food"] { -webkit-mask-image:url("../icons/food.svg"); mask-image:url("../icons/food.svg"); }
.ptp-icon[data-icon="gate"] { -webkit-mask-image:url("../icons/gate.svg"); mask-image:url("../icons/gate.svg"); }
.ptp-icon[data-icon="info"] { -webkit-mask-image:url("../icons/info.svg"); mask-image:url("../icons/info.svg"); }
.ptp-icon[data-icon="list"] { -webkit-mask-image:url("../icons/list.svg"); mask-image:url("../icons/list.svg"); }
.ptp-icon[data-icon="map"] { -webkit-mask-image:url("../icons/map.svg"); mask-image:url("../icons/map.svg"); }
.ptp-icon[data-icon="ride"] { -webkit-mask-image:url("../icons/ride.svg"); mask-image:url("../icons/ride.svg"); }
.ptp-icon[data-icon="search"] { -webkit-mask-image:url("../icons/search.svg"); mask-image:url("../icons/search.svg"); }
.ptp-icon[data-icon="shop"] { -webkit-mask-image:url("../icons/shop.svg"); mask-image:url("../icons/shop.svg"); }
.ptp-icon[data-icon="show"] { -webkit-mask-image:url("../icons/show.svg"); mask-image:url("../icons/show.svg"); }
.ptp-icon[data-icon="smoking"] { -webkit-mask-image:url("../icons/smoking.svg"); mask-image:url("../icons/smoking.svg"); }
.ptp-icon[data-icon="star"] { -webkit-mask-image:url("../icons/star.svg"); mask-image:url("../icons/star.svg"); }
.ptp-icon[data-icon="water"] { -webkit-mask-image:url("../icons/water.svg"); mask-image:url("../icons/water.svg"); }
.ptp-icon[data-icon="wc"] { -webkit-mask-image:url("../icons/wc.svg"); mask-image:url("../icons/wc.svg"); }
.ptp-icon[data-icon="add"] { -webkit-mask-image:url("../icons/add.svg"); mask-image:url("../icons/add.svg"); }
/* The icons of Park Signage v3: the situations, the answers of step 3, the start screen (app.js, V3_INTENT, V3_DETAIL_ICON). */
.ptp-icon[data-icon="stopwatch"] { -webkit-mask-image:url("../icons/stopwatch.svg"); mask-image:url("../icons/stopwatch.svg"); }
.ptp-icon[data-icon="route"] { -webkit-mask-image:url("../icons/route.svg"); mask-image:url("../icons/route.svg"); }
.ptp-icon[data-icon="buggy"] { -webkit-mask-image:url("../icons/buggy.svg"); mask-image:url("../icons/buggy.svg"); }
.ptp-icon[data-icon="spotlight"] { -webkit-mask-image:url("../icons/spotlight.svg"); mask-image:url("../icons/spotlight.svg"); }
.ptp-icon[data-icon="compass"] { -webkit-mask-image:url("../icons/compass.svg"); mask-image:url("../icons/compass.svg"); }
.ptp-icon[data-icon="wave"] { -webkit-mask-image:url("../icons/wave.svg"); mask-image:url("../icons/wave.svg"); }
.ptp-icon[data-icon="hourglass"] { -webkit-mask-image:url("../icons/hourglass.svg"); mask-image:url("../icons/hourglass.svg"); }
.ptp-icon[data-icon="footsteps"] { -webkit-mask-image:url("../icons/footsteps.svg"); mask-image:url("../icons/footsteps.svg"); }
.ptp-icon[data-icon="standing"] { -webkit-mask-image:url("../icons/standing.svg"); mask-image:url("../icons/standing.svg"); }
.ptp-icon[data-icon="back-forth"] { -webkit-mask-image:url("../icons/back-forth.svg"); mask-image:url("../icons/back-forth.svg"); }
.ptp-icon[data-icon="coffee"] { -webkit-mask-image:url("../icons/coffee.svg"); mask-image:url("../icons/coffee.svg"); }
.ptp-icon[data-icon="gauge"] { -webkit-mask-image:url("../icons/gauge.svg"); mask-image:url("../icons/gauge.svg"); }
.ptp-icon[data-icon="quiet"] { -webkit-mask-image:url("../icons/quiet.svg"); mask-image:url("../icons/quiet.svg"); }
.ptp-icon[data-icon="coaster"] { -webkit-mask-image:url("../icons/coaster.svg"); mask-image:url("../icons/coaster.svg"); }
.ptp-icon[data-icon="smile"] { -webkit-mask-image:url("../icons/smile.svg"); mask-image:url("../icons/smile.svg"); }
.ptp-icon[data-icon="tiles"] { -webkit-mask-image:url("../icons/tiles.svg"); mask-image:url("../icons/tiles.svg"); }
.ptp-icon[data-icon="check"] { -webkit-mask-image:url("../icons/check.svg"); mask-image:url("../icons/check.svg"); }
.ptp-icon[data-icon="order"] { -webkit-mask-image:url("../icons/order.svg"); mask-image:url("../icons/order.svg"); }
.ptp-icon[data-icon="mobile-order"] { -webkit-mask-image:url("../icons/mobile-order.svg"); mask-image:url("../icons/mobile-order.svg"); }
.ptp-icon[data-icon="clock"] { -webkit-mask-image:url("../icons/clock.svg"); mask-image:url("../icons/clock.svg"); }
.ptp-icon[data-icon="replan"] { -webkit-mask-image:url("../icons/replan.svg"); mask-image:url("../icons/replan.svg"); }
.ptp-icon[data-icon="dots"] { -webkit-mask-image:url("../icons/dots.svg"); mask-image:url("../icons/dots.svg"); }
.ptp-icon[data-icon="install"] { -webkit-mask-image:url("../icons/install.svg"); mask-image:url("../icons/install.svg"); }
.ptp-icon[data-icon="plan"] { -webkit-mask-image:url("../icons/plan.svg"); mask-image:url("../icons/plan.svg"); }
.ptp-icon[data-icon="share"] { -webkit-mask-image:url("../icons/share.svg"); mask-image:url("../icons/share.svg"); }
/* The icons of the tray of filters and its sheet that the set did not have yet (app.js, FILTER_CATS). */
.ptp-icon[data-icon="ticket"] { -webkit-mask-image:url("../icons/ticket.svg"); mask-image:url("../icons/ticket.svg"); }
.ptp-icon[data-icon="meet"] { -webkit-mask-image:url("../icons/meet.svg"); mask-image:url("../icons/meet.svg"); }
.ptp-icon[data-icon="filters"] { -webkit-mask-image:url("../icons/filters.svg"); mask-image:url("../icons/filters.svg"); }

/* Pins: a wait with "min" under it, or an icon; a show's next time under the pin; a star for a favourite. */
.park-map .map-pin { flex-direction:column; line-height:1; }
.park-map .map-pin .pm-pin-label { font:800 12.5px/1 'Bricolage Grotesque'; }
.park-map .map-pin .pm-pin-unit { font:800 8.5px/1 Figtree; margin-top:1px; letter-spacing:.02em; }
.park-map .map-pin .pm-pin-icon { font-size:16px; }
.park-map .map-pin .pm-pin-note {
  position:absolute; left:50%; top:100%; transform:translate(-50%, 3px); padding:1px 5px; border-radius:6px; white-space:nowrap;
  background:#FFFFFF; color:#111827; border:1.5px solid #BFCBDC; font:800 10px/14px Figtree; box-shadow:0 1px 3px rgba(17,24,39,.14);
}
.park-map .map-pin .pm-pin-badge {
  position:absolute; right:-7px; top:-7px; width:17px; height:17px; box-sizing:border-box; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:#FFD600; color:#111827; border:2px solid #111827; font-size:9px;
}
/* The search, top left in the map: its results drop down under it. */
.park-map .pm-search { position:absolute; left:10px; right:64px; top:10px; z-index:7; }
.park-map .pm-search-icon { position:absolute; left:13px; top:13px; font-size:18px; color:#475569; pointer-events:none; }
.park-map .pm-search-input {
  width:100%; height:44px; box-sizing:border-box; margin:0; padding:0 12px 0 38px; border:2px solid #BFCBDC; border-radius:12px;
  background:#FFFFFF; color:#111827; font:600 14px Figtree; box-shadow:0 1px 3px rgba(17,24,39,.14); -webkit-appearance:none; appearance:none;
}
.park-map .pm-search-input::placeholder { color:#475569; opacity:1; }
.park-map .pm-search-input:focus-visible { outline:3px solid #0066FF; outline-offset:2px; }
.park-map .pm-search-results {
  margin-top:6px; max-height:min(300px, 55vh); overflow-y:auto; box-sizing:border-box; padding:6px; display:flex; flex-direction:column; gap:2px;
  background:#FFFFFF; border:1px solid #BFCBDC; border-radius:14px; box-shadow:0 8px 24px rgba(17,24,39,.18);
}
.park-map .pm-search-item {
  display:flex; align-items:center; gap:10px; margin:0; padding:8px; border:0; border-radius:10px; background:transparent; color:#111827;
  text-align:left; cursor:pointer; font:inherit;
}
.park-map .pm-search-item:hover,
.park-map .pm-search-item[aria-selected="true"] { background:#EEF3FB; }
.park-map .pm-search-face {
  width:30px; height:30px; flex:none; box-sizing:border-box; border-radius:50%; border:2px solid #111827; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#111827; line-height:1;
}
.park-map .pm-search-face .pm-pin-label { font:800 11px/1 'Bricolage Grotesque'; }
.park-map .pm-search-face .pm-pin-unit { font:800 7.5px/1 Figtree; }
.park-map .pm-search-face .pm-pin-icon { font-size:14px; }
.park-map .pm-search-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.park-map .pm-search-name { font:800 14px/1.2 'Bricolage Grotesque'; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.park-map .pm-search-sub { font:600 11.5px/1.3 Figtree; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.park-map .pm-search-none { padding:10px; font:600 13px Figtree; color:#475569; }
/* Messages sit under the search. */
.park-map .pm-message { top:62px; }
.planner-app[data-theme="dark"] .park-map .pm-search-input,
.planner-app.theme-dark .park-map .pm-search-input { background:#1E293B; border-color:#475569; color:#F5F7FA; }
.planner-app[data-theme="dark"] .park-map .pm-search-input::placeholder,
.planner-app.theme-dark .park-map .pm-search-input::placeholder,
.planner-app[data-theme="dark"] .park-map .pm-search-icon,
.planner-app.theme-dark .park-map .pm-search-icon,
.planner-app[data-theme="dark"] .park-map .pm-search-sub,
.planner-app.theme-dark .park-map .pm-search-sub,
.planner-app[data-theme="dark"] .park-map .pm-search-none,
.planner-app.theme-dark .park-map .pm-search-none { color:#CBD5E1; }
.planner-app[data-theme="dark"] .park-map .pm-search-results,
.planner-app.theme-dark .park-map .pm-search-results { background:#1E293B; border-color:#475569; }
.planner-app[data-theme="dark"] .park-map .pm-search-item,
.planner-app.theme-dark .park-map .pm-search-item { color:#F5F7FA; }
.planner-app[data-theme="dark"] .park-map .pm-search-item:hover,
.planner-app.theme-dark .park-map .pm-search-item:hover,
.planner-app[data-theme="dark"] .park-map .pm-search-item[aria-selected="true"],
.planner-app.theme-dark .park-map .pm-search-item[aria-selected="true"] { background:#243244; }
/* A pin's face outside the map (the list and the card of the picked pin): the colour comes in --face, so the dark theme
   keeps it, with dark ink on it in both themes. */
.map-face {
  width:40px; height:40px; flex:none; box-sizing:border-box; border-radius:50%; border:2px solid #111827; background:var(--face, #FFFFFF);
  color:#111827 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; position:relative;
}
.map-face .map-face-label { font:800 14px/1 'Bricolage Grotesque'; }
.map-face .map-face-unit { font:800 9px/1 Figtree; margin-top:1px; }
.map-face .ptp-icon { font-size:18px; }

/* The quiet design (/8-10, the owner's handoff of 8 October 2026). The filter bar (FilterBar of the owner's design
   system PTP, 15 October 2026) scrolls sideways without a scrollbar and fades at its right edge, so you see there is
   more; beside the content on wide screens the navigation keeps its 1px line. */
.q-chips::-webkit-scrollbar { display:none; }
.q-filterbar { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.q-filterbar button:focus-visible { outline:2px solid #0B63FF; outline-offset:-2px; border-radius:12px; }
/* Live since the owner's Stitch screens Home1 and Filter_new (19 October 2026): the tile with the wait on the right of
   the card, before the star (park-tabs/ride-card.php); the search of Live hides what it does not find
   (park-tabs.js findLive), also a section with nothing left; the bar of chips under the search scrolls sideways. */
.card-top[data-wait="right"] > .card-level,
.card-top[data-wait="right"] > .card-tile { order:1; }
.card-top[data-wait="right"] > .card-star { order:2; }
/* The level tile of Live keeps 16px from the tile of the wait; the star of 44px moves 4px towards the tile and 8px
   into the padding of the card, its icon still 15px from the edge (the owner's review of 25 October 2026: "de ruimtes
   tussen Wachttijdtegel en Niveautegel vind ik te dicht op elkaar ... bij de favorietenster ruimte over") */
.card-top[data-wait="right"] > .card-level { margin-right:6px; }
.card-top[data-wait="right"] > .card-star { margin:0 -8px 0 -4px; }
.live-sec.is-unfound, .live-find.is-unfound { display:none !important; }
.live-search:focus-visible, .live-filters button:focus-visible { outline:2px solid #0B63FF; outline-offset:2px; }
/* --- Live and Account after the owner's Figma (20 October 2026) --- */
/* Easier to read (Account › Settings, park-tabs.js display): the steps 1 to 4 of the Figma collection Readability, as
   the class read-1 to read-4 of .planner-app (app.js themeClass, prefs.readability; step 0 has none). The quiet
   navigation takes the sizes of the step over the inline ones of navigation.php: its icons, the box around them, its
   labels, the month and day of Planner and the stroke of its icons. The classic navigation and the filter bar grow as
   a whole (zoom), a quarter at step 4 as Larger buttons did. The contrast of each step is in Q (app.js lookQ). */
.planner-app.read-1 { --read-icon:24px; --read-box-w:54px; --read-box-h:34px; --read-label:12px; --read-month:8.5px; --read-day:17.5px; --read-stroke:1.8; --read-zoom:1.06; }
.planner-app.read-2 { --read-icon:26px; --read-box-w:56px; --read-box-h:36px; --read-label:13px; --read-month:9px; --read-day:19px; --read-stroke:1.95; --read-zoom:1.12; }
.planner-app.read-3 { --read-icon:28px; --read-box-w:58px; --read-box-h:38px; --read-label:14px; --read-month:9.5px; --read-day:20.5px; --read-stroke:2.1; --read-zoom:1.19; }
.planner-app.read-4 { --read-icon:30px; --read-box-w:60px; --read-box-h:40px; --read-label:15px; --read-month:10px; --read-day:22px; --read-stroke:2.25; --read-zoom:1.25; }
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .main-navigation.is-quiet > span { font-size:var(--read-label) !important; }
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .main-navigation.is-quiet > span > span:first-child { width:var(--read-box-w) !important; height:var(--read-box-h) !important; border-radius:calc(var(--read-box-h) / 2) !important; }
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .main-navigation.is-quiet > span > span:first-child > svg { width:var(--read-icon); height:var(--read-icon); stroke-width:var(--read-stroke); }
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .main-navigation.is-quiet > span:first-child > span:first-child > span:first-child > span:first-child { font-size:var(--read-month) !important; }
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .main-navigation.is-quiet > span:first-child > span:first-child > span:first-child > span:nth-child(2) { font-size:var(--read-day) !important; }
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .main-navigation:not(.is-quiet),
.planner-app:is(.read-1, .read-2, .read-3, .read-4) .q-filterbar { zoom:var(--read-zoom); }
/* The Filters sheet, Account › Support and the quiet Settings: a blue ring around what has the focus of the keyboard. */
.filter-chip button:focus-visible, .account-support-view button:focus-visible, .account-support-view a:focus-visible,
.account-settings-quiet button:focus-visible, .account-page-head button:focus-visible { outline:2px solid #0B63FF; outline-offset:2px; }
/* --- end Live and Account after the owner's Figma --- */
/* The three plans (planner/plan-picker.php) where there is little room, as on the free day of Day beside its time
   column (the owner, 16 October 2026: the boxes went out of bounds): rows, the days and the name left, the price right */
.plan-picker { container-type:inline-size; }
@container (max-width: 320px) {
  .plan-picker-list { grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
  .plan-picker-box { flex-direction:row !important; align-items:center !important; gap:8px !important; min-height:52px !important; padding:12px !important; }
  .plan-picker-box .pp-name { order:2; }
  .plan-picker-box .pp-price { order:3; margin-left:auto; }
}
@media (min-width:768px) {
  .planner-app > .q-chips { box-sizing:border-box; width:min(1180px, 100%); margin-left:auto; margin-right:auto; padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
  /* The filter bar of Live and Map lines up with the cards above it, like the scroll area. */
  .park-tabs-root .q-chips { padding-left:clamp(24px, 4vw, 48px) !important; padding-right:clamp(24px, 4vw, 48px) !important; }
}
@media (min-width:1024px) {
  .main-navigation.is-quiet { border-right-width:1px; border-right-color:#E3E8EF; }
  .planner-app.theme-dark .main-navigation.is-quiet { border-right-color:#2A3A5C; }
  .planner-app > .q-chips { width:min(1180px, calc(100% - 220px)); margin-left:190px; margin-right:auto; padding-left:clamp(28px, 3vw, 56px) !important; padding-right:clamp(28px, 3vw, 56px) !important; }
}
/* Plan (issue #13): the card of Undo after a swipe off a day lines up with the chips under it; the card that left the
   day fades back into the list, without the fade for reduced motion. */
@media (min-width:768px) {
  .planner-app > .plan-undo { box-sizing:border-box; width:calc(min(1180px, 100%) - 2 * clamp(24px, 4vw, 48px)); margin-left:auto !important; margin-right:auto !important; }
}
@media (min-width:1024px) {
  .planner-app > .plan-undo { width:calc(min(1180px, 100% - 220px) - 2 * clamp(28px, 3vw, 56px)); margin-left:calc(190px + clamp(28px, 3vw, 56px)) !important; margin-right:auto !important; }
}
@keyframes plan-card-back { from { opacity:0; } to { opacity:1; } }
.planner-app .plan-card-back { animation:plan-card-back .3s ease-out; }
@media (prefers-reduced-motion:reduce) { .planner-app .plan-card-back { animation:none; } }

/* --- quiet map (/8-10) --- */
/* The Map of the quiet design (option 1b Quiet cards of the owner's handoff of 8 October 2026; park-map.js in its
   quiet mode, templates/park-tabs/map.php {{ quiet }}): the map full-bleed from the park switcher to the navigation,
   the search as a white pill with the list button, 28px pins with a white border and the wait alone, white clusters,
   bare land labels with a halo. Since the owner's Figma page Map (20 October 2026): + and − at the top right, where
   am I at the bottom right over the credit or the card of the picked pin, and the search of the map also over the
   list. The dark theme keeps the signage colours of the pins and takes the cards and inks of Q.dark. */
.park-tabs-root.is-quiet-map .park-tabs-scroll { padding:0 !important; }
.park-tabs-root.is-quiet-map .map-view-quiet { width:100%; }
.park-tabs-root.is-quiet-map .map-canvas { min-height:0 !important; }
/* The search bar: a 46px pill with the icon, the field, a divider and the list button. Its rules go by the search
   itself (.pm-search.is-quiet, park-map.js), because the list view of Map borrows it (.is-lent, map.php
   <park-map-search>) outside the map. */
.park-map.is-quiet .pm-search { left:12px; right:12px; top:8px; }
.pm-search.is-quiet {
  height:46px; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:0 5px 0 16px;
  border-radius:23px; background:#FFFFFF; box-shadow:0 2px 10px rgba(16,32,61,.14);
}
.pm-search.is-quiet .pm-search-icon { position:static; flex:none; font-size:18px; color:#475569; }
.pm-search.is-quiet .pm-search-input {
  flex:1; min-width:0; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  color:#10203D; font:400 14.5px var(--ptp-text);
}
.pm-search.is-quiet .pm-search-input::placeholder { color:#475569; }
.pm-search.is-quiet .pm-search-input:focus-visible { outline:none; }
.pm-search.is-quiet:focus-within { box-shadow:0 0 0 2px #0B63FF, 0 2px 10px rgba(16,32,61,.14); }
.pm-search.is-quiet .pm-search-divider { flex:none; width:1px; height:22px; background:#E3E8EF; }
.pm-search.is-quiet .pm-search-list {
  flex:none; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:18px; background:transparent; color:#10203D;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pm-search.is-quiet .pm-search-list:focus-visible { outline:3px solid #0B63FF; outline-offset:2px; }
.pm-search.is-quiet .pm-search-results {
  position:absolute; left:0; right:0; top:52px; margin:0; border:0; border-radius:14px; background:#FFFFFF;
  box-shadow:0 0 0 1px #E3E8EF, 0 8px 24px rgba(16,32,61,.14);
}
.pm-search.is-quiet .pm-search-item { color:#10203D; }
.pm-search.is-quiet .pm-search-item:hover,
.pm-search.is-quiet .pm-search-item[aria-selected="true"] { background:#F1F4F8; }
.pm-search.is-quiet .pm-search-face { border-color:#FFFFFF; color:#10203D; box-shadow:0 1px 4px rgba(16,32,61,.3); }
.pm-search.is-quiet .pm-search-face .pm-pin-label { font:800 12px/1 var(--ptp-display); }
.pm-search.is-quiet .pm-search-name { font:800 14px/1.2 var(--ptp-display); }
.pm-search.is-quiet .pm-search-sub { font:400 11.5px/1.3 var(--ptp-text); color:#475569; }
.pm-search.is-quiet .pm-search-none { font:400 13px var(--ptp-text); color:#475569; }
/* The Map tab (the owner's Figma frame Map — light · Default, 19 October 2026; map.php .map-top-band): the search sits
   on a strip of the page over the top of the map, with a 1px ring and no shadow, beside the star and Filters; as in
   the component Search and filters of the owner's Figma (20 October 2026), 12px in, the icon and 8px, then the word in
   15px. */
.map-view-quiet .park-map.is-quiet .pm-search { left:16px; right:112px; top:8px; height:44px; padding-left:12px; gap:8px; border-radius:22px; box-shadow:0 0 0 1px #E3E8EF; }
.map-view-quiet .park-map.is-quiet .pm-search:focus-within { box-shadow:0 0 0 2px #0B63FF; }
.map-view-quiet .park-map.is-quiet .pm-search-input,
.map-list-search .pm-search-input { font-size:15px; }
.map-view-quiet .park-map.is-quiet .pm-controls,
.map-view-quiet .park-map.is-quiet .pm-message { top:72px; }
/* The list view (map.php .map-list-top): the search borrowed from the map fills the row beside the star and Filters,
   with what the map's own rules give it there. */
.map-list-search { display:block; flex:1; min-width:0; position:relative; }
.pm-search.is-lent { position:relative; z-index:7; height:44px; padding-left:12px; gap:8px; border-radius:22px; box-shadow:0 0 0 1px #E3E8EF; }
.pm-search.is-lent:focus-within { box-shadow:0 0 0 2px #0B63FF; }
.pm-search.is-lent [hidden] { display:none !important; }
.pm-search.is-lent .pm-search-input { margin:0; -webkit-appearance:none; appearance:none; }
.pm-search.is-lent .pm-search-results {
  max-height:min(300px, 55vh); overflow-y:auto; box-sizing:border-box; padding:6px; display:flex; flex-direction:column; gap:2px;
}
.pm-search.is-lent .pm-search-item {
  display:flex; align-items:center; gap:10px; margin:0; padding:8px; border:0; border-radius:10px; background:transparent;
  text-align:left; cursor:pointer; font:inherit;
}
.pm-search.is-lent .pm-search-face {
  width:30px; height:30px; flex:none; box-sizing:border-box; border-radius:50%; border:2px solid #FFFFFF; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1;
}
.pm-search.is-lent .pm-search-face .pm-pin-icon { font-size:14px; }
.pm-search.is-lent .pm-search-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pm-search.is-lent .pm-search-name,
.pm-search.is-lent .pm-search-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-search.is-lent .pm-search-none { padding:10px; }
/* The controls (the owner's Figma page Map, components Zoom and Where am I, 20 October 2026; park-map.js arrange()):
   + and − as two round 44px buttons on the card with a 1px ring and a soft shadow, 12px from the top and the right of
   the map, and where am I alone at the bottom right, with its blue arrow: just over the credit, or 12px above the card
   of the picked pin (--pm-card, park-map.js measureCard()), and the recentre button above it. No button for the whole
   park. */
.park-map.is-quiet .pm-controls { top:62px; right:12px; gap:8px; }
.park-map.is-quiet .pm-controls.pm-dock { top:auto; right:12px; bottom:32px; }
.park-map.is-quiet.has-card .pm-controls.pm-dock { bottom:calc(var(--pm-card, 0px) + 12px); }
.park-map.is-quiet .pm-control {
  border:0; border-radius:22px; background:#FFFFFF; color:#10203D; font:800 22px/1 var(--ptp-display);
  box-shadow:inset 0 0 0 1px #E3E8EF, 0 2px 8px rgba(16,32,61,.16);
}
.park-map.is-quiet .pm-control svg { display:block; }
/* At the end of its zoom a button stays in view (the Figma frames show both) and only its sign turns faint. */
.park-map.is-quiet .pm-control:disabled { opacity:1; color:#7F8EA3; }
.park-map.is-quiet .pm-locate { color:#0B63FF; }
.park-map.is-quiet .pm-control.is-on { background:#0B63FF; color:#FFFFFF; box-shadow:0 2px 8px rgba(16,32,61,.16); }
.park-map.is-quiet .pm-message { top:62px; border:0; border-radius:14px; background:#FFFFFF; color:#10203D; font:700 12px var(--ptp-text); box-shadow:0 0 0 1px #E3E8EF, 0 2px 10px rgba(16,32,61,.14); }
/* The picked pin lies over the clusters (park-map.js pickLayer). */
.park-map .pm-picked { z-index:5; }
/* The pins: the wait alone in Archivo on the signage colour, a white border in both themes (park-tabs.js, pinsQ: bd);
   a dot says nothing and takes no tap. A place known only roughly keeps a solid rim: the quiet design has no dashed cue. */
.park-map.is-quiet .map-pin { border-color:#FFFFFF; color:#10203D; }
.park-map.is-quiet .map-pin.is-approx { border-style:solid; }
.park-map.is-quiet .map-pin .pm-pin-label { font:800 12px/1 var(--ptp-display); font-variant-numeric:tabular-nums; }
.park-map.is-quiet .map-pin .pm-pin-icon { font-size:16px; }
.park-map.is-quiet .map-pin.is-dot { pointer-events:none; cursor:default; }
.park-map.is-quiet .map-pin:focus-visible,
.park-map.is-quiet .pm-cluster:focus-visible,
.park-map.is-quiet .pm-control:focus-visible { outline-color:#0B63FF; }
.park-map.is-quiet .pm-cluster {
  width:28px; height:28px; border:0; background:#FFFFFF; color:#475569; font:800 12px/28px var(--ptp-display); box-shadow:0 1px 4px rgba(16,32,61,.28);
}
/* The names of the lands and the parks, bare on the map with a halo. */
.park-map.is-quiet .pm-tag {
  height:18px; padding:0; background:transparent; box-shadow:none; font:700 10.5px/18px var(--ptp-text); letter-spacing:.1em; color:#475569;
  text-shadow:0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 3px #FFFFFF;
}
.park-map.is-quiet .pm-route-tag { padding:0 7px; background:#FFFFFF; color:#10203D; box-shadow:0 0 0 1px #E3E8EF; text-shadow:none; }
/* The walk to a picked pin (the quiet redesign of 11 October 2026, section 4): blue dots of 4.5px on a white casing of
   9px, along the walkways (park-map.js refreshRoute). */
.park-map .pm-route.is-pick polyline:last-child { stroke:#0B63FF; stroke-width:4.5px; stroke-dasharray:0.1 8; }
.park-map .pm-route.is-pick .pm-route-halo { stroke:#FFFFFF; stroke-opacity:.85; stroke-width:9px; stroke-dasharray:none; }
.park-map.is-quiet .pm-you { background:#0B63FF; box-shadow:0 0 0 6px rgba(11,99,255,.32); }
.park-map.is-quiet .pm-you.is-gps { box-shadow:0 0 0 6px rgba(11,99,255,.32), 0 0 0 14px rgba(11,99,255,.14); }
/* The credit at the bottom right (the quiet redesign of 11 October 2026, section 4). With the card of a picked pin
   it stays in view at the left, 12px above the card (the owner's Figma page Map has where am I on the right there; the
   card used to cover the credit, which OpenStreetMap asks to show). */
.park-map.is-quiet .pm-credit { left:auto; right:10px; bottom:10px; padding:2px 7px; background:rgba(255,255,255,.85); color:#475569; font:400 10.5px/15px var(--ptp-text); }
.park-map.is-quiet.has-card .pm-credit { left:16px; right:auto; bottom:calc(var(--pm-card, 0px) + 12px); }
.park-map.is-quiet .pm-credit a { text-decoration:none; }
.park-map.is-quiet .pm-list { border:0; border-radius:14px; background:#FFFFFF; color:#10203D; box-shadow:0 0 0 1px #E3E8EF, 0 8px 24px rgba(16,32,61,.14); }
.park-map.is-quiet .pm-list-head { font:700 10.5px var(--ptp-text); color:#475569; }
.park-map.is-quiet .pm-list-item { color:#10203D; font:700 13px var(--ptp-text); }
.park-map.is-quiet .pm-list-item:hover { background:#F1F4F8; }
.park-map.is-quiet .pm-list-dot { border-radius:50%; border-color:#FFFFFF; box-shadow:0 0 0 1px #D5DCE6; }
/* Dark theme: cards, controls and inks of Q.dark; the pins keep the signage colours and their white border, and the
   clusters stay white. The classic dark rule above forces the ink of every pin to #111827 with !important, so the quiet
   pins take theirs from --pin-ink, which park-map.js writes per pin (updatePins). */
.planner-app[data-theme="dark"] .map-canvas .park-map.is-quiet .map-pin,
.planner-app.theme-dark .map-canvas .park-map.is-quiet .map-pin { color:var(--pin-ink, #F5F7FA) !important; }
.planner-app[data-theme="dark"] .pm-search.is-quiet,
.planner-app.theme-dark .pm-search.is-quiet,
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-results,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-results,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-control,
.planner-app.theme-dark .park-map.is-quiet .pm-control,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-message,
.planner-app.theme-dark .park-map.is-quiet .pm-message,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-list,
.planner-app.theme-dark .park-map.is-quiet .pm-list,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-route-tag,
.planner-app.theme-dark .park-map.is-quiet .pm-route-tag { background:#142645; color:#F5F7FA; }
.planner-app[data-theme="dark"] .park-map .pm-route.is-pick polyline:last-child,
.planner-app.theme-dark .park-map .pm-route.is-pick polyline:last-child { stroke:#5B9BFF; }
.planner-app[data-theme="dark"] .park-map .pm-route.is-pick .pm-route-halo,
.planner-app.theme-dark .park-map .pm-route.is-pick .pm-route-halo { stroke:#10203D; }
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-results,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-results,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-message,
.planner-app.theme-dark .park-map.is-quiet .pm-message,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-list,
.planner-app.theme-dark .park-map.is-quiet .pm-list { box-shadow:0 0 0 1px #2A3A5C, 0 8px 24px rgba(0,0,0,.4); }
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-control.is-on,
.planner-app.theme-dark .park-map.is-quiet .pm-control.is-on { background:#0B63FF; color:#FFFFFF; }
.planner-app[data-theme="dark"] .map-view-quiet .park-map.is-quiet .pm-search,
.planner-app.theme-dark .map-view-quiet .park-map.is-quiet .pm-search { box-shadow:0 0 0 1px #2A3A5C; }
.planner-app[data-theme="dark"] .map-view-quiet .park-map.is-quiet .pm-search:focus-within,
.planner-app.theme-dark .map-view-quiet .park-map.is-quiet .pm-search:focus-within { box-shadow:0 0 0 2px #6EA8FF; }
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-input,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-input { background:transparent; color:#F5F7FA; }
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-input::placeholder,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-input::placeholder,
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-icon,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-icon,
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-sub,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-sub,
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-none,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-none,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-list-head,
.planner-app.theme-dark .park-map.is-quiet .pm-list-head { color:#A9B6CC; }
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-divider,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-divider { background:#2A3A5C; }
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-list,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-list,
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-item,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-item,
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-list-item,
.planner-app.theme-dark .park-map.is-quiet .pm-list-item { color:#F5F7FA; }
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-item:hover,
.planner-app.theme-dark .pm-search.is-quiet .pm-search-item:hover,
.planner-app[data-theme="dark"] .pm-search.is-quiet .pm-search-item[aria-selected="true"],
.planner-app.theme-dark .pm-search.is-quiet .pm-search-item[aria-selected="true"],
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-list-item:hover,
.planner-app.theme-dark .park-map.is-quiet .pm-list-item:hover { background:#1C3158; }
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-cluster,
.planner-app.theme-dark .park-map.is-quiet .pm-cluster { background:#FFFFFF; color:#475569; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-tag,
.planner-app.theme-dark .park-map.is-quiet .pm-tag { color:#A9B6CC; box-shadow:none; text-shadow:0 0 3px #10203D, 0 0 3px #10203D, 0 0 3px #10203D; }
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-credit,
.planner-app.theme-dark .park-map.is-quiet .pm-credit { background:rgba(16,32,61,.85); color:#A9B6CC; }
/* Dark: the controls on the card with the ring of Q.dark, where am I in the light blue of the dark theme; the
   borrowed search of the list with the same ring as on the map. */
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-control:not(.is-on),
.planner-app.theme-dark .park-map.is-quiet .pm-control:not(.is-on) { box-shadow:inset 0 0 0 1px #2A3A5C, 0 2px 8px rgba(0,0,0,.4); }
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-locate:not(.is-on),
.planner-app.theme-dark .park-map.is-quiet .pm-locate:not(.is-on) { color:#6EA8FF; }
.planner-app[data-theme="dark"] .park-map.is-quiet .pm-control:disabled,
.planner-app.theme-dark .park-map.is-quiet .pm-control:disabled { color:#7D8BA6; }
.planner-app[data-theme="dark"] .pm-search.is-lent,
.planner-app.theme-dark .pm-search.is-lent { box-shadow:0 0 0 1px #2A3A5C; }
.planner-app[data-theme="dark"] .pm-search.is-lent:focus-within,
.planner-app.theme-dark .pm-search.is-lent:focus-within { box-shadow:0 0 0 2px #6EA8FF; }
/* --- end quiet map --- */