/* app.css — structural layout for the Wait Times rewrite.
   All COLOR and TYPE decisions come from the active theme file via CSS
   custom properties; this file owns geometry, density, and behavior.

   Theme contract (every theme must define):
     --bg --card --ink --muted --line --accent --accent-ink
     --head-bg --head-ink
     --font-body --font-head --font-num
     --radius (corner rounding; retro themes set 0)
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.35;
	-webkit-text-size-adjust: 100%;
}

/* ---- shell ---- */
.topbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px;
	padding: max(8px, env(safe-area-inset-top)) 12px 8px;
	background: var(--head-bg); color: var(--head-ink);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: .4px; white-space: nowrap; }
/* 16px minimum on ALL form controls (iOS focus-zoom rule) */
select, input, textarea, button { font-size: 16px; font-family: var(--font-body); }
.resort-sel {
	background: transparent; color: var(--head-ink);
	border: 1px solid color-mix(in srgb, var(--head-ink) 40%, transparent);
	border-radius: var(--radius); padding: 3px 6px; max-width: 46vw;
}
.resort-sel option { color: #000; }
.iconbtn {
	background: none; border: none; color: var(--head-ink);
	font-size: 20px; cursor: pointer; padding: 2px 6px; line-height: 1;
}

.tabs {
	display: flex; gap: 2px;
	background: var(--head-bg);
	padding: 0 8px 6px;
	overflow-x: auto; scrollbar-width: none;
}
.tabs a {
	color: var(--head-ink); text-decoration: none;
	padding: 6px 12px; border-radius: var(--radius);
	font-size: 13px; font-weight: 600; white-space: nowrap;
	opacity: .75;
}
.tabs a.active { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.tabs a.ext { margin-left: auto; }

.main { max-width: 1080px; margin: 0 auto; padding: 10px 10px 60px; }
.loading { color: var(--muted); padding: 30px 8px; text-align: center; }
.err { color: var(--muted); padding: 20px 8px; text-align: center; }

/* ---- conditions bar (Today view) ---- */
.condbar {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 6px 9px; margin: 0 0 8px;
	font-size: 12.5px; line-height: 1.6; color: var(--ink);
}
.condbar .condclock { font-weight: 800; font-variant-numeric: tabular-nums; }
.condbar .condfeels, .condbar .condsmoke { color: var(--muted); }
.tempbtn {
	background: var(--accent); color: var(--accent-ink);
	border: none; border-radius: var(--radius);
	padding: 1px 8px; font-size: 13px; font-weight: 800; cursor: pointer;
}

/* ---- date nav (Today view) ---- */
.date-nav { display: flex; align-items: center; gap: 4px; margin: 2px 0 10px; }
.date-nav button {
	background: var(--card); border: 1px solid var(--line); color: var(--ink);
	border-radius: var(--radius); padding: 2px 14px; font-size: 20px; cursor: pointer; line-height: 1.3;
}
.date-nav button:disabled { opacity: .3; }
.date-label { flex: 1; text-align: center; font-weight: 600; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; }

/* ---- park cards (Today) ---- */
/* The CARD ITSELF is park-colored; only the hours section (.park-body)
   sits on the light card background (Bill, 2026-08-11: "the color of the
   background of the bubble... should extend to the bottom of the bubble
   ... Parks that have no events strip still need to switch back to their
   color after the park hours line if it ever shows"). In the 2-across
   desktop grid a row's cards stretch to equal height — any slack below
   the hours line (or below the .specs strip) now shows park color
   instead of white, with or without an events strip. Flex column keeps
   children at natural height so the colored card background is what
   fills the remainder. */
.park-card { background: var(--pc, var(--accent)); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; overflow: hidden; display: flex; flex-direction: column; }
.park-card h3 {
	margin: 0; padding: 5px 10px; font-size: 14px; letter-spacing: .5px;
	font-family: var(--font-head); color: #fff; background: var(--pc, var(--accent));
}
.park-body { padding: 7px 10px; background: var(--card); }
.hours-line { margin: 0; font-weight: 700; font-size: 15px; color: var(--pc, var(--ink)); }
.hours-line .xtra { font-weight: 400; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ap { font-size: .72em; }
.specs { background: var(--pc, var(--accent)); color: #fff; padding: 5px 10px; }
.specs p { margin: 2px 0; font-size: 12.5px; }
.specs .nm { font-weight: 700; text-decoration: underline; }
.specs .pre { text-decoration: none; font-weight: 400; }
.specs .next { font-weight: 800; }
.specs .past { opacity: .75; }

/* ---- park tab strip (Waits/Shows) ---- */
.parkstrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.parkstrip button {
	flex: 0 0 auto; background: var(--card); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.parkstrip button.active { background: var(--pc, var(--accent)); color: #fff; border-color: var(--pc, var(--accent)); }

/* ---- category colors ----
   Semantic, park-agnostic palette: every row is color-coded by WHAT it is,
   not where it is. One color per category, tuned per theme; food and
   retail are reserved for later. The category checkboxes carry matching
   dots and accents, so the controls double as the legend. */
:root {
	--c-rides: #2e6fd0; --c-theaters: #7a4fc9; --c-stage: #a03fae;
	--c-parades: #d84315; --c-fireworks: #c28b00; --c-street: #2e7d32;
	--c-meets: #d63d8f; --c-exhibits: #0f8f82;
	--c-food: #d97706; --c-retail: #a16207;
}
html[data-theme="lite"][data-mode="dark"] {
	--c-rides: #6ea8ff; --c-theaters: #b08dff; --c-stage: #d67ae0;
	--c-parades: #ff8a65; --c-fireworks: #ffd166; --c-street: #81c784;
	--c-meets: #ff7ac2; --c-exhibits: #38c9b9;
	--c-food: #ffab4a; --c-retail: #e3b341;
}
@media (prefers-color-scheme: dark) {
	html[data-theme="lite"][data-mode="auto"] {
		--c-rides: #6ea8ff; --c-theaters: #b08dff; --c-stage: #d67ae0;
		--c-parades: #ff8a65; --c-fireworks: #ffd166; --c-street: #81c784;
		--c-meets: #ff7ac2; --c-exhibits: #38c9b9;
		--c-food: #ffab4a; --c-retail: #e3b341;
	}
}
html[data-theme="1995"] {   /* loud web-safe, period-correct */
	--c-rides: #0000ff; --c-theaters: #9900cc; --c-stage: #cc00cc;
	--c-parades: #cc3300; --c-fireworks: #cc9900; --c-street: #009900;
	--c-meets: #ff0099; --c-exhibits: #009999;
	--c-food: #ff6600; --c-retail: #999900;
}
html[data-theme="1998-times-guide"] {   /* muted printed-ink tones */
	--c-rides: #23527c; --c-theaters: #5d3a7e; --c-stage: #7a3b74;
	--c-parades: #a3402a; --c-fireworks: #8a6d1f; --c-street: #3b6b3f;
	--c-meets: #a03565; --c-exhibits: #206b5d;
	--c-food: #a85b00; --c-retail: #7d6a1f;
}
/* (row stripe rules live BELOW the .wrow/.srow card definitions — their
   border: shorthand resets left width/color, so order matters) */
.typedot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: 2px; vertical-align: baseline;
}
.td-rides     { background: var(--c-rides); }
.td-theaters  { background: var(--c-theaters); }
.td-stage     { background: var(--c-stage); }
.td-parades   { background: var(--c-parades); }
.td-fireworks { background: var(--c-fireworks); }
.td-street    { background: var(--c-street); }
.td-meets     { background: var(--c-meets); }
.td-exhibits  { background: var(--c-exhibits); }
.td-food      { background: var(--c-food); }
.td-retail    { background: var(--c-retail); }
.meetstoggle.c-rides input     { accent-color: var(--c-rides); }
.meetstoggle.c-theaters input  { accent-color: var(--c-theaters); }
.meetstoggle.c-stage input     { accent-color: var(--c-stage); }
.meetstoggle.c-parades input   { accent-color: var(--c-parades); }
.meetstoggle.c-fireworks input { accent-color: var(--c-fireworks); }
.meetstoggle.c-street input    { accent-color: var(--c-street); }
.meetstoggle.c-meets input     { accent-color: var(--c-meets); }
.meetstoggle.c-exhibits input  { accent-color: var(--c-exhibits); }

/* ---- sort row (Waits/Shows) ---- */
.sortrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.sortrow label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.sortrow select {
	background: var(--card); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 6px 8px; max-width: 240px;
}
.meetstoggle {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
/* Only the first toggle pushes right; with both showing on a narrow phone
   the pair wraps to its own right-aligned line instead of overflowing. */
.sortrow select + .meetstoggle { margin-left: auto; }
.meetstoggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.meetstoggle .meetcount { color: var(--muted); font-weight: 400; }

/* ---- land group headers (By land sort) ---- */
.landhead {
	grid-column: 1 / -1;
	font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
	color: var(--muted); border-bottom: 1px solid var(--line);
	padding: 8px 2px 3px; margin-top: 2px;
}
.landhead:first-child { margin-top: 0; }
.sublandhead {
	grid-column: 1 / -1;
	font-size: 10px; font-weight: 700; letter-spacing: .6px;
	color: var(--muted); padding: 5px 2px 1px 14px;
}
.set-sub { font-size: 12px !important; color: var(--muted); margin-top: 4px; }

/* ---- waits list ---- */
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; align-items: start; }
.wrow {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 6px 9px;
}
/* 700 to match .srow .nm — the Waits view mixes both row kinds in one
   grid, and at 600 the ride names read lighter than the show/meet names
   beside them (Bill, 2026-08-11: "some of the names in the bubbles are
   in a stronger bold than others"). One weight everywhere. */
.wrow .nm { font-size: 13px; font-weight: 700; min-width: 0; }
.closes { display: block; font-size: 10.5px; font-weight: 400; color: #b06a00; }
/* Character-meet location caption ("Princess Jasmine Agrabah", the second
   word smaller/lighter) — same-line treatment like .len, not a new line
   like .closes: Bill (2026-08-06) wanted the location riding right after
   the name, not dropped below it. */
.loc { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 5px; }
/* Admin-only "show data sources" overlay (Bill, 2026-08-04, see srcMark() in
   app.js) — a fixed violet accent deliberately independent of --accent
   (each theme's own primary color) so it reads as a debug flag, not part of
   the site's normal visual language, across all three themes. color-mix
   keeps the background readable in both light and dark mode without a
   separate override per theme. */
.src-flag {
	background: color-mix(in srgb, #7c3aed 20%, var(--card));
	color: #7c3aed; border: 1px solid color-mix(in srgb, #7c3aed 45%, transparent);
	border-radius: 4px; padding: 0 3px; cursor: help; font-weight: 600;
}
.len { color: var(--muted); font-size: 10.5px; font-weight: 400; margin-left: 6px; white-space: nowrap; }
.wrow .wt { font-family: var(--font-num); font-size: 17px; font-weight: 800; white-space: nowrap; }
.wrow .wt.next-time { font-size: 13.5px; }
/* Bold to match .srow.perfline .st (Bill, 2026-08-06) — small and
   muted-colored, but the same weight as the title, not thin/normal. */
.wrow .st { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* Titles stay full-weight/full-color even when closed — only the status
   word (and showtimes, in the perfline card below) are small/muted (Bill,
   2026-08-06: "the title of the thing should remain in the black bold
   lettering the same as open things"). A .wrow.closed/.down rule dimming
   .nm too used to live here; removed rather than left unused. */
.w-hot  { color: #c62828; }
.w-warm { color: #b06a00; }
.w-cool { color: #2e7d32; }

/* today's crowd forecast (per-row toggle strip, Waits view) */
.fc-toggle { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0 2px; opacity: .55; line-height: 1; }
.fc-toggle:hover { opacity: 1; }
/* .wlist is a CSS grid — display:none keeps a closed strip from reserving
   its own cell; .open spans every column so it reads as a full-width bar
   directly under the row that opened it, not a stray narrow cell. */
.fcstrip {
	display: none; grid-column: 1 / -1;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	margin-top: -3px; padding: 6px 8px; gap: 12px; overflow-x: auto;
}
.fcstrip.open { display: flex; }
.fcpt { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex: 0 0 auto; }
.fcpt .fct { font-size: 10px; color: var(--muted); white-space: nowrap; }
.fcpt .fcw { font-family: var(--font-num); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.fcpt .fcl { font-size: 9px; color: var(--muted); white-space: nowrap; }
.refreshed { color: var(--muted); font-size: 11px; margin: 8px 2px; text-align: right; }
.donenote { color: var(--muted); font-size: 12.5px; padding: 14px 6px; text-align: center; }
.btn.danger { color: #c62828; border-color: #c62828; }
.linky { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }

/* pull-to-refresh indicator */
.ptr {
	position: fixed; top: -40px; left: 50%; transform: translateX(-50%);
	background: var(--card); color: var(--ink); border: 1px solid var(--line);
	border-radius: 20px; padding: 6px 14px; font-size: 12px; z-index: 60;
	transition: top .15s ease; pointer-events: none;
}
.ptr.show { top: 10px; }

/* ---- section heading (Today view: Character Meet & Greets) ---- */
.section-head {
	font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
	color: var(--muted); margin: 14px 2px 8px; padding-top: 6px; border-top: 1px solid var(--line);
}

/* ---- shows list ---- */
.slist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; align-items: start; }
.srow { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 9px; }
.srow .nm { font-weight: 700; font-size: 13px; }
.srow .times { font-size: 12.5px; color: var(--muted); }
/* Lagoon-show smoke-drift line, inside the show's own entry (Bill,
   2026-08-10) — Shows/Waits row cards and the Today card's spec lines.
   .rowsmoke sits on the normal card background, so muted grey is right;
   .specsmoke lives INSIDE .specs — white text on the park-color strip
   (blue for EPCOT) — where grey was unreadable (Bill, 2026-08-10):
   white like the rest of the strip, slightly dimmed for hierarchy, same
   de-emphasis idea as .specs .past above. */
.rowsmoke { font-size: 12px; color: var(--muted); margin-top: 2px; }
.specsmoke { display: block; font-size: 12px; color: #fff; opacity: .88; margin-top: 1px; }
/* Disneyland fireworks wind-risk line (Bill, 2026-08-11) — same two homes
   as the smoke line: .rowrisk on card background (amber/red per tier —
   it's a WARNING, not ambience like smoke), .specrisk inside the Today
   card's park-color strip, where colored text must stay light enough to
   read on blue/red/green: warm amber for elevated, near-white warm red
   for high. Only elevated/high ever render (frontend gate). */
.rowrisk { font-size: 12px; margin-top: 2px; font-weight: 600; }
.rowrisk.risk-elevated { color: #b26b00; }
.rowrisk.risk-high { color: #b3261e; }
.specrisk { display: block; font-size: 12px; margin-top: 1px; font-weight: 600; }
.specrisk.risk-elevated { color: #ffd9a0; }
.specrisk.risk-high { color: #ffc4bd; }
/* Umbrella meet event's nested character breakdown (Bill, 2026-08-11;
   "meet_group" admin flag): sub-location headers, then character + set
   times per line. Compact and muted so the umbrella row's own title
   stays the visual anchor; times reuse the same .next/.past semantics
   as everywhere else via meetTimesStr(). */
.mgroup { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.mgloc { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.mgloc:first-child { margin-top: 0; }
.mgchar { display: flex; gap: 6px; align-items: baseline; font-size: 12px; margin-top: 1px; }
.mgchar .mgname { font-weight: 700; white-space: nowrap; }
.mgchar .mgtimes { color: var(--muted); font-size: 11.5px; min-width: 0; }
/* Waits-tab performance card: same .srow/.times two-line shape as Shows, but
   line 1 is a flex row so the "Next X" label can sit on the right like a
   wait number would (Bill, 2026-08-06). Used by every Waits row with real
   showtimes — meets, stage shows, street acts, parades, spectaculars — as
   of 2026-08-04; scoped to .perfline so Shows' plain .nm is untouched. */
.srow.perfline .nm { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.srow.perfline .nm > span:first-child { min-width: 0; }
.srow.perfline .wt { font-family: var(--font-num); font-weight: 800; white-space: nowrap; font-size: 13.5px; }
/* Bold only, no color change (Bill, 2026-08-06) — the current/next entry
   in a times list stays the same small grey as the rest of the list;
   ink-coloring it made it read as the same visual weight as the row
   title. Shared by meetTimesStr() (Waits perfline caption) and Shows'
   own schedule-list rendering below — both use this exact class. */
.srow .times .next { font-weight: 800; }
/* perfline card once the show is done/closed for the day: the name stays
   full-weight/full-color (Bill, 2026-08-06 — see the .wrow.closed note
   above, same rule); the status label is small and muted-colored but
   BOLD, same weight as the title — Bill's explicit correction 2026-08-06
   after a screenshot: "Done for Day" (bold, inherited from the nested
   .nm ancestor by accident) was the look he wanted, not a bug — an
   earlier pass here misread it as unwanted inheritance and reset it to
   font-weight:400, which was backwards. Declared explicitly now instead
   of relying on inheriting from .nm, so it can't drift again if the
   markup nesting ever changes. Kept in sync with .wrow .st below. */
.srow.perfline .st { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ---- category color stripes ----
   MUST follow the .wrow/.srow rules above: their border: shorthand resets
   border-left, so these override it by order. */
.wrow, .srow { border-left-width: 3px; }
.t-rides     { border-left-color: var(--c-rides); }
.t-theaters  { border-left-color: var(--c-theaters); }
.t-stage     { border-left-color: var(--c-stage); }
.t-parades   { border-left-color: var(--c-parades); }
.t-fireworks { border-left-color: var(--c-fireworks); }
.t-street    { border-left-color: var(--c-street); }
.t-meets     { border-left-color: var(--c-meets); }
.t-exhibits  { border-left-color: var(--c-exhibits); }
.t-food      { border-left-color: var(--c-food); }
.t-retail    { border-left-color: var(--c-retail); }

/* ---- monthly calendar (retro printed-guide structure) ---- */
.cal-month-nav { display: flex; align-items: center; gap: 4px; margin: 2px 0 10px; }
.cal-month-nav button { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); padding: 2px 14px; font-size: 20px; cursor: pointer; }
.park-cal { margin: 0 0 16px; }
.park-cal-header {
	display: flex; justify-content: space-between; align-items: center;
	color: #fff; padding: 5px 10px; background: var(--pc, var(--accent));
	font-family: var(--font-head);
}
.park-cal-name { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.park-cal-month { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.park-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--card); }
.park-cal-grid th {
	font-size: 8px; font-weight: 700; padding: 3px 1px 2px;
	border-bottom: 1px solid var(--ink); color: var(--ink);
	text-align: center; text-transform: uppercase;
	overflow: hidden; white-space: nowrap;
}
.park-cal-grid td {
	width: 14.28%; height: 46px; vertical-align: top;
	padding: 2px 3px; border: 1px solid var(--line); text-align: left;
	position: relative;
}
.park-cal-grid td.not-in-month { background: color-mix(in srgb, var(--muted) 8%, var(--card)); border-color: color-mix(in srgb, var(--line) 50%, transparent); }
.park-cal-grid td.is-past .day-num, .park-cal-grid td.is-past .day-hours { color: var(--muted); opacity: .6; }
.park-cal-grid td.clickable { cursor: pointer; }
.park-cal-grid td.clickable:hover { background: color-mix(in srgb, var(--pc, var(--accent)) 12%, var(--card)); }
.day-cell-inner { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; row-gap: 1px; }
.day-num { font-size: 21px; line-height: 1; font-family: var(--font-num); transform: scaleX(.8); transform-origin: top left; }
.day-hours { font-size: 10.5px; color: var(--pc, var(--ink)); font-weight: 700; line-height: 1.15; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.day-hours.est { color: var(--muted); font-weight: 400; }
.day-events { position: absolute; top: 3px; right: 1px; display: flex; gap: 2px; font-size: 12px; line-height: 1; pointer-events: none; }
.has-events .day-cell-inner { padding-right: 16px; }
.has-multi-event .day-cell-inner { padding-right: 30px; }
td.banner-cell { background: var(--pc, var(--accent)); border: 1px solid var(--ink); padding: 3px 4px; vertical-align: top; height: auto; }
td.empty-span { height: auto; }
.banner-cell-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.banner-block { color: #fff; line-height: 1.18; min-width: 0; }
.banner-title { display: block; margin-bottom: 1px; font-size: 9px; letter-spacing: .5px; }
.banner-name { font-weight: 700; text-decoration: underline; }
.banner-line { font-size: 8px; display: block; white-space: nowrap; }
.banner-dates { font-style: italic; }
td.park-cal-key { padding: 4px 6px 6px; border: 1px solid var(--line); height: auto; }
.park-cal-key-inner { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10px; color: var(--muted); }
.park-cal-key-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.key-emoji { font-size: 12px; }

/* ---- settings sheet ---- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }
.sheet {
	position: fixed; z-index: 50; right: 0; top: 0; bottom: 0;
	width: min(320px, 88vw);
	background: var(--card); color: var(--ink);
	border-left: 1px solid var(--line);
	padding: 16px; overflow-y: auto;
}
.sheet h2 { margin: 0 0 12px; font-family: var(--font-head); font-size: 18px; }
.set-row { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.set-row label { font-size: 13px; font-weight: 700; }
.set-row select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button { flex: 1; background: var(--bg); color: var(--ink); border: none; padding: 8px 0; cursor: pointer; }
.seg button.active { background: var(--accent); color: var(--accent-ink); }
.set-note { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.set-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400 !important; cursor: pointer; }
.set-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.set-note.dim { opacity: .7; }
.btn {
	display: block; text-align: center; text-decoration: none;
	background: var(--accent); color: var(--accent-ink);
	border: none; border-radius: var(--radius); padding: 10px; cursor: pointer; font-weight: 700;
}
.btn.close { background: var(--bg); color: var(--ink); border: 1px solid var(--line); margin-top: 8px; width: 100%; }

@media (min-width: 720px) {
	.brand-name { font-size: 19px; }
	.main { padding-top: 14px; }
	.park-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.park-cards .park-card { margin: 0; }
}
@media (min-width: 1000px) {
	.cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}