/*
 * Next420 base stylesheet
 * -----------------------
 * This file owns STRUCTURE only: layout, sizing, accessibility and responsive
 * behaviour. Theme authors should normally edit themes/<theme>/theme.css instead.
 *
 * Theme CSS should override custom properties such as --bg, --panel, --text,
 * --accent, etc., and may add theme-specific decorative treatment.
 */
:root {
  --bg:#0d1210; --panel:#151d18; --panel2:#1b2720; --text:#edf7ef;
  --muted:#a9b9ac; --accent:#72e28e; --accent2:#c4ff72; --line:#2d3b31;
  --map-bg:#0a0f0c; --land:#172019; --land-line:#526057; --tip:#111915;
  --radius:13px; --font:Inter,system-ui,sans-serif; --title-font:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);transition:background .3s,color .3s}
button,input,select{font:inherit}
button,select{cursor:pointer}
a{color:var(--accent2)}
.site-header,.offset-section{padding:18px clamp(14px,3vw,36px)}
.site-header{border-bottom:1px solid var(--line)}
.topline{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.title-wrap{min-width:0}
.site-brand{margin:0;line-height:0;flex:none;transform:none;text-shadow:none}
.site-brand>a{display:block;width:fit-content;max-width:100%}
.site-logo{display:block;width:240px;max-width:100%;height:auto}
.site-logo-groovy{display:none}
html[data-theme="groovy"] .site-logo-modern{display:none}
html[data-theme="groovy"] .site-logo-groovy{display:block}
@media(max-width:560px){.site-logo{width:180px}}
h1,h2,h3{font-family:var(--title-font)}
h1{margin:0 0 5px;font-size:clamp(1.7rem,4vw,2.7rem)}
p{margin:0;color:var(--muted)}
.theme-picker{display:grid;gap:5px;font-size:.82rem;color:var(--muted);min-width:145px}
.theme-picker select{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 10px}
.header-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px;min-width:0}
.party-test-control{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:.75rem;color:var(--muted);cursor:pointer}
.party-test-control input{accent-color:var(--accent);margin:0}
.party-card[hidden]{display:none!important}
.party-card{grid-column:1/-1;position:relative;overflow:visible;min-width:0;min-height:80px}
.party-surface{position:relative;overflow:hidden;border-radius:inherit;transform-origin:center}
.party-toolbar{position:absolute;top:8px;right:12px;z-index:3;display:flex;align-items:center;gap:5px}
.party-head{padding-right:68px}
#party-motion-toggle{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--accent)}
#party-motion-toggle svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#party-motion-toggle.motion-off{color:var(--muted)}
.party-motion-menu[hidden]{display:none}
.party-motion-menu{position:absolute;right:0;top:calc(100% + 8px);width:240px;max-width:calc(100vw - 48px);max-height:65vh;overflow-y:auto;padding:12px;border:1px solid var(--accent);border-radius:4px;background:var(--panel);color:var(--text);box-shadow:0 10px 30px #0009;font-size:.78rem;text-align:left}
.party-tempo-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.party-light-controls{padding:0 0 12px;margin:0 0 12px;min-width:0;border:0;border-bottom:1px solid var(--line)}
.party-light-controls legend{padding:0;margin-bottom:8px;color:var(--accent2);font-weight:bold}
.party-light-switch{display:flex;align-items:center;gap:7px;margin-bottom:8px;cursor:pointer}
.party-light-switch input{accent-color:var(--accent);margin:0}
#party-colour-mode{width:100%;min-width:0;margin:5px 0 12px;padding:6px;background:var(--panel2);color:var(--text);border:1px solid var(--line)}
#party-border-speed{display:block;width:100%;margin:4px 0;min-height:28px;accent-color:var(--accent)}
#party-border-speed-value{white-space:nowrap;color:var(--accent2);font-variant-numeric:tabular-nums}
#party-tempo-value{font-variant-numeric:tabular-nums;color:var(--accent2)}
#party-tempo{display:block;width:100%;min-height:36px;margin:6px 0;accent-color:var(--accent);cursor:pointer}
.party-tempo-help,#party-motion-note{font-size:.68rem;color:var(--muted);line-height:1.5}
#party-motion-note{margin-top:6px}
#party-motion-stop{margin-top:9px;padding:6px 9px;border:1px solid var(--line);border-radius:3px;background:var(--panel2);color:var(--text);font-size:.72rem}
.party-pattern-label{display:block;margin:10px 0 5px}
.party-pattern-label span{color:var(--muted);font-size:.68rem}
.party-pattern-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
#party-pattern-help-toggle{width:24px;height:24px;padding:0;border:1px solid var(--accent);border-radius:50%;color:var(--accent);background:var(--panel2);font-weight:bold}
.party-beat-preview{position:relative;display:flex;flex-wrap:wrap;gap:3px;max-height:100px;overflow-y:auto;margin:2px 0 7px;font:14px/1.6 monospace}
.party-beat-preview span{display:inline-block;min-width:1.2em;text-align:center;border:1px solid transparent;border-radius:2px;color:var(--muted)}
.party-beat-preview .beat-current{border-color:var(--muted);color:var(--text)}
.party-beat-preview .beat-on{background:var(--accent);border-color:var(--accent);color:#051412;font-weight:bold;box-shadow:0 0 7px var(--accent)}
.party-pattern-guide[hidden]{display:none}
.party-pattern-guide{padding:10px;margin-top:8px;border:1px solid var(--accent);background:var(--panel2);border-radius:3px;font-size:.72rem;line-height:1.5}
.party-pattern-guide p{margin:7px 0}
.party-pattern-guide ul{padding-left:16px;margin:7px 0}
.party-pattern-guide code{color:var(--accent2)}
#party-pattern-help-close{padding:4px 8px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:3px}
#party-bass-pattern{display:block;width:100%;min-width:0;padding:8px;margin-bottom:6px;border:1px solid var(--line);border-radius:3px;background:var(--panel2);color:var(--text);font-family:monospace}
#party-bass-pattern[aria-invalid="true"]{border-color:#ff85e1}
#party-pattern-error{font-size:.68rem;color:#ffb4e9;margin-top:6px;line-height:1.4}
@media(prefers-reduced-motion:reduce){.party-motion-on .party-surface{animation:none!important;transform:none!important}}
.party-visual{position:absolute;inset:0;pointer-events:none}
.party-visual canvas{display:block;width:100%;height:100%}
.party-stage{position:relative;z-index:1;min-width:0}
.party-head{display:flex;align-items:center;gap:8px}
.party-head h2{flex:1;min-width:0;margin:0;line-height:1.05;font-size:clamp(1.4rem,3vw,2.3rem);color:var(--accent2)}
.party-preview{flex:none;font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
#party-pause{flex:none;width:28px;height:28px;padding:0;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:.85rem}
.party-ticker{overflow:hidden;margin-top:4px;min-width:0;font-size:.78rem;line-height:1.3}
.party-track{display:flex;width:max-content;animation:party-scroll var(--ticker-duration,30s) linear infinite}
.party-town-list{flex:none;white-space:nowrap;padding-right:36px}
.ticker-paused .party-track,.party-ticker:hover .party-track,.party-ticker:focus .party-track{animation-play-state:paused}
@keyframes party-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.party-track{animation:none}.party-ticker{overflow-x:auto}.party-town-list[aria-hidden="true"]{display:none}#party-pause{display:none}}
.hero{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:15px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hero-value{font-size:1.2rem;font-weight:750;margin-top:5px}
.countdown{font-size:clamp(1.7rem,4.5vw,3rem);font-weight:800;color:var(--accent2);font-variant-numeric:tabular-nums}
.sub-countdown{margin-top:4px;color:var(--accent2);font-weight:750;font-variant-numeric:tabular-nums}
.place-search{margin-top:12px}
.place-search>label{display:block;margin-bottom:7px;font-weight:700}
.search-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.search-row input{width:100%;min-width:0;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:10px 12px}
.search-row button,.validator-actions button,.button-link{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:9px 12px;text-decoration:none}
.search-results{display:grid;gap:4px;margin-top:8px}
.search-result{display:flex;justify-content:space-between;gap:10px;text-align:left;border:1px solid transparent;background:transparent;color:var(--text);border-radius:8px;padding:7px 8px}
.search-result:hover,.search-result:focus{border-color:var(--line);background:var(--panel2)}
.search-result small{color:var(--muted)}
.saved-place{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.saved-place-countdown{font-variant-numeric:tabular-nums;color:var(--accent2)}
.text-button{border:0;background:none;color:var(--accent2);padding:0;text-decoration:underline}
.map-wrap{position:relative;border-bottom:1px solid var(--line);background:var(--map-bg);overflow:hidden}
.map-wrap svg{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:62vh}
.sunlight{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;opacity:.72}
.land{fill:var(--land);stroke:var(--land-line);stroke-width:.7;vector-effect:non-scaling-stroke}
.tz-shape{fill:var(--accent2);opacity:0;transition:opacity .45s ease}
.tz-shape.next{opacity:.88}
.city-dot{fill:#dce7df;stroke:var(--bg);stroke-width:1.5;cursor:pointer;transition:fill .3s,stroke-width .3s}
.city-dot.next{fill:var(--accent2);stroke:var(--accent);stroke-width:3}
.city-dot.saved{fill:var(--bg);stroke:var(--accent2);stroke-width:3.5}
.city-dot.saved.next{fill:var(--accent2);stroke:var(--text);stroke-width:3.5}
.tooltip{position:absolute;display:none;pointer-events:none;background:var(--tip);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:210px;box-shadow:0 8px 24px #0008;z-index:3}
.tooltip strong{display:block}.tooltip .eta{color:var(--accent2);font-weight:750;font-variant-numeric:tabular-nums}
.offset-section{padding-bottom:40px}
.offset-section h2{margin:0 0 4px}
.offset-group{margin-top:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.offset-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:6px}
.offset-title{font-weight:750}.offset-status{color:var(--accent2);font-variant-numeric:tabular-nums;text-align:right}
.place-list{margin:0;color:var(--muted);line-height:1.55}.offset-group.lead .offset-title{color:var(--accent2)}
.site-footer{padding:0 clamp(14px,3vw,36px) 34px;color:var(--muted);font-size:.9rem}
.validator-dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);width:min(620px,calc(100vw - 24px));padding:0;box-shadow:0 18px 70px #000a}
.validator-dialog::backdrop{background:#000a}.validator-inner{padding:20px}
.validator-head{display:flex;justify-content:space-between;gap:16px}.validator-head h3{margin:0}.validator-close{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:9px;padding:7px 10px}
.validator-status{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.validator-actions{display:flex;gap:8px;flex-wrap:wrap}.validator-actions .primary{background:var(--accent);color:var(--bg);font-weight:750}
.validator-note{font-size:.88rem;color:var(--muted);line-height:1.45}
@media(max-width:800px){.hero{grid-template-columns:1fr 1fr}.local-card{grid-column:1/-1}}
@media(max-width:650px){.topline{flex-direction:column}.theme-picker{align-self:flex-start}.hero{grid-template-columns:1fr}.local-card{grid-column:auto}.offset-head{align-items:flex-start;flex-direction:column;gap:3px}.offset-status{text-align:left}.search-row{grid-template-columns:1fr}}
.data-provenance{margin-bottom:6px;line-height:1.45}
.brand-time{margin-left:.15em}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:10px clamp(14px,3vw,36px)}
.panel-heading h2{margin:0;font-size:1rem}
.offset-section .panel-heading{padding:0 0 8px}
.live-indicator{font-size:.75rem;color:var(--accent2)}
.map-legend{display:flex;gap:16px;padding:8px clamp(14px,3vw,36px);color:var(--muted);font-size:.75rem}
.map-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.map-legend>span{display:inline-flex;align-items:center;gap:7px}
.legend-marker{width:18px;height:18px;overflow:visible;flex:none;pointer-events:none}
.map-legend .legend-territory{width:14px;height:10px;border-radius:2px;background:var(--accent2);opacity:.86}
.legend-next{background:var(--accent2)}.legend-saved{background:#ff38d1}.legend-night{background:var(--muted)}
.tz-shape{fill:var(--accent2);fill-rule:evenodd;opacity:0;pointer-events:none;transition:opacity .45s ease}
.tz-shape.next{opacity:.86}
/*
 * SEARCH, SAVED TIMEZONE PANEL, AND MAP FRAME
 * --------------------------------------------
 * These are shared structural rules. Theme-specific colour and decoration stay
 * in themes/<theme>/theme.css so new themes remain drop-in modules.
 */
:root{
  --night-rgb:7,10,28;
  --night-alpha:.72;
  --terminator-color:rgba(255,226,132,.92);
}
.search-combobox{position:relative}
.search-combobox>input{
  width:100%;min-width:0;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);border-radius:10px;padding:12px 14px;
}
.search-combobox>input:focus{outline:2px solid var(--accent);outline-offset:2px}
.search-results{
  position:absolute;z-index:12;top:calc(100% + 6px);left:0;right:0;
  display:grid;gap:3px;max-height:min(360px,52vh);overflow:auto;margin:0;padding:6px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  box-shadow:0 18px 45px #0009;
}
.search-results[hidden]{display:none}
.search-result{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;
  gap:12px;text-align:left;border:1px solid transparent;background:transparent;
  color:var(--text);border-radius:8px;padding:10px 11px;
}
.search-result:hover,.search-result:focus,.search-result.active{
  border-color:var(--line);background:var(--panel2);outline:none;
}
.search-result span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.search-result small{color:var(--muted);white-space:nowrap}
.search-message{padding:11px;color:var(--muted)}
.search-help{margin-top:8px;font-size:.82rem;line-height:1.45}
.saved-timezone-panel{
  margin:16px 0 0;padding:15px 17px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel2);
}
.saved-timezone-panel[hidden]{display:none}
.saved-towns[hidden]{display:none}
.saved-towns{margin-top:10px}
.saved-towns>h2{margin:0 0 7px;font-weight:600}
.saved-towns-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px}
.saved-town-card{position:relative;min-width:0}
.saved-town-name{margin:0 30px 4px 0;font-size:1rem;overflow-wrap:anywhere}
.saved-town-location{font-size:.76rem;line-height:1.4;overflow-wrap:anywhere}
.saved-town-clock{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:8px}
.saved-town-time{font-size:1rem;font-variant-numeric:tabular-nums}
.saved-town-zone{font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.saved-town-countdown{font-size:.8rem}
.remove-town{position:absolute;right:4px;top:3px;width:32px;height:32px;border:0;background:transparent;color:var(--muted);font-size:1.3rem;cursor:pointer}
.remove-town:hover,.remove-town:focus-visible{color:var(--text);background:var(--panel2)}
.saved-towns-status{margin:6px 0 0;font-size:.75rem;line-height:1.4;color:var(--muted)}
.saved-towns-status:empty:not(.visually-hidden){display:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.search-help{display:none}
.saved-timezone-panel .offset-head{align-items:flex-start;flex-direction:row}
.saved-timezone-panel .offset-title{margin-top:4px;font-size:1.15rem}
.saved-zone-details{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
}
.saved-zone-details>div{display:grid;gap:4px;min-width:0}
.saved-zone-caption{color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.saved-place-time,.saved-place-zone,.saved-place-countdown{overflow-wrap:anywhere}
.saved-place-time,.saved-place-countdown{color:var(--accent2);font-variant-numeric:tabular-nums}
.map-wrap{
  width:calc(100% - clamp(28px,6vw,72px));margin:18px auto 0;
  border:1px solid var(--line);border-radius:var(--radius);
}
.map-wrap svg{width:100%;height:auto;max-height:none;aspect-ratio:1200/520}
.sunlight{opacity:1}
@media(max-width:650px){
  .saved-zone-details{grid-template-columns:1fr}
  .map-wrap{width:calc(100% - 16px);margin-top:10px}
}