@font-face {
  font-family:Inter; src:url('assets/inter-latin.woff2') format('woff2');
  font-style:normal; font-weight:100 900; font-display:swap;
}
:root {
  color-scheme:dark; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--background); color:var(--text); font-synthesis:none;
  --dial-work-day:#23392d; --dial-work-night:#2b4a37;
  --dial-face:#293341; --dial-night:#11151c; --dial-night-end:#151c26;
  --dial-am-text:#c5d3e5; --dial-pm-text:#f2f4f8; --dial-ink:#f2f4f8; --dial-zone:#8c9fba; --dial-zone-ink:#132238; --dial-zone-edge:#bdcce0; --dial-cap:var(--dial-night);
  --panel-width:390px; --background:#000; --text:#fff; --muted:#9b9ba6;
  --surface:#050505; --surface-alt:#0e0e10; --control:#151518;
  --border:#19191c; --control-border:#303036; --selected:#3d3d43;
  --selected-text:#fff; --button:#272729; --avatar:#28282b;
  --hint:#8e8e9c; --accent:#dce5f0; --accent-text:#13171c;
}
:root[data-theme=light] {
  --dial-work-day:hsl(100,50%,90%); --dial-work-night:hsl(100,50%,70%);
  --dial-face:#fff; --dial-night:hsl(215,40%,90%); --dial-night-end:hsl(215,50%,100%);
  --dial-am-text:#dce5f0; --dial-pm-text:#fff; --dial-ink:#000; --dial-zone:#fff; --dial-zone-ink:hsl(215,20%,60%); --dial-zone-edge:#fff; --dial-cap:var(--dial-night);
  color-scheme:light; --background:#f4f6f9; --text:#1b2028; --muted:#697180;
  --surface:#fff; --surface-alt:#f0f2f6; --control:#f0f2f6;
  --border:#e0e4eb; --control-border:#cfd5de; --selected:#fff;
  --selected-text:#1b2028; --button:#e5e9f0; --avatar:#e0e5ed;
  --hint:#697180; --accent:#dce5f0; --accent-text:#13171c;
}
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; touch-action:pan-y; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { background:var(--background); color:var(--text); }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #90a8c7; outline-offset:4px;
}
[hidden] { display:none!important; }
.text-button { padding:6px 8px; background:transparent; color:var(--text); font-size:13px; }
.muted { color:var(--muted); }
#main {
  position:fixed; top:var(--viewport-top,0px); left:var(--viewport-left,0px);
  width:var(--viewport-width,100vw); height:var(--viewport-height,100dvh);
  display:grid; grid-template-rows:44px minmax(0,1fr) 48px; gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  min-width:0; min-height:0;
}
#clock-settings { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:10%; height:10%; min-width:44px; min-height:44px; padding:0; border-radius:50%; background:transparent; touch-action:none; }
#clock-stage { grid-row:2; grid-column:1; position:relative; min-width:0; min-height:0; }
#clock-wrap {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--clock-size,0px); height:var(--clock-size,0px); aspect-ratio:1;
}
:root[data-theme=light] #clock-wrap { filter:drop-shadow(0 3px 16px #24344a0d); }
#clock {
  display:block; width:100%; height:100%; overflow:visible; touch-action:none;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
#clock.dragging { cursor:grabbing; }
#clock:focus,#clock:focus-visible { outline:none; }
.shadow { filter:drop-shadow(0 .2px .65px #0002); }
.zone-text { font-size:2px; letter-spacing:.13px; font-weight:750; fill:var(--dial-zone-ink); }
.numeral { font-size:5px; font-weight:400; fill:var(--dial-ink); }
.zone-hit { cursor:pointer; }
#travel-actions { position:absolute; left:50%; top:calc(var(--clock-bottom,50%) + 12px); transform:translateX(-50%); display:flex; gap:8px; max-width:calc(100% - 32px); }
.pill { border-radius:30px; padding:10px 14px; background:var(--text); color:var(--background); font-size:14px; font-weight:400; white-space:nowrap; }
.pill.blue { background:var(--accent); color:var(--accent-text); }
.pill:hover { filter:brightness(.9); }
#settings {
  position:fixed; left:calc(var(--viewport-left,0px) + 12px + env(safe-area-inset-left,0px)); top:calc(var(--viewport-top,0px) + 12px + env(safe-area-inset-top,0px));
  width:calc(var(--viewport-width,100vw) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); max-width:var(--panel-width);
  height:calc(var(--viewport-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  z-index:12; background:var(--surface); border:1px solid var(--control-border); border-radius:28px;
  display:flex; flex-direction:column; overflow:hidden; min-width:0; box-shadow:0 24px 100px #0003;
}
#settings>.panel-header { position:relative; top:0; flex-shrink:0; background:var(--surface); min-height:70px; padding:14px 20px; }
#settings>.panel-header .done,#settings>.panel-header .text-button { min-height:44px; }
#settings-body { flex:1; min-height:0; min-width:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:var(--control-border) transparent; }
.settings-tab-bar { display:flex; flex-shrink:0; gap:3px; margin:16px 16px 0; padding:3px; border-radius:13px; background:var(--control); }
.settings-tab-bar button { flex:1; min-width:0; min-height:40px; padding:8px 4px; font-size:12px; font-weight:600; color:var(--muted); background:none; border-radius:10px; }
.settings-tab-bar button[aria-selected=true] { color:var(--selected-text); background:var(--selected); box-shadow:0 1px 4px #0002; }
@media(min-width:600px) { #settings { left:auto; right:calc(12px + env(safe-area-inset-right,0px)); } }
.panel-header {
  position:sticky; top:0; z-index:2; background:var(--background); min-height:57px;
  display:flex; align-items:center; justify-content:space-between; padding:14px 24px;
  border-bottom:1px solid var(--border); gap:8px;
}
.panel-header h2 { font-size:18px; line-height:24px; margin:0; font-weight:700; letter-spacing:-.3px; }
.panel-header>div { display:flex; align-items:center; gap:2px; }
.done { font-size:12px; font-weight:650; padding:7px 12px; border-radius:20px; background:var(--button); color:var(--text); }
.panel-body { padding:24px 16px; }
.section { margin-bottom:32px; }
.section h3,.dialog-body h3 { color:var(--muted); font-size:12px; font-weight:700; margin:0 12px 6px; line-height:16px; }
.group { border:1px solid var(--border); border-radius:13px; overflow:hidden; background:var(--surface); }
.row {
  display:flex; align-items:center; justify-content:space-between; min-height:45px;
  padding:12px; gap:10px; min-width:0; flex-wrap:wrap; border-bottom:1px solid var(--border);
  font-size:14px; font-weight:600; letter-spacing:-.2px;
}
.row:last-child { border-bottom:0; }
.row.tall { min-height:56px; }
.row.with-description { flex-wrap:wrap; gap:5px 10px; }
.row .hint { flex-basis:100%; font-size:12px; font-weight:400; margin:0; color:var(--hint); line-height:18px; letter-spacing:0; }
.switch {
  appearance:none; -webkit-appearance:none; cursor:pointer; background:lab(48.4493 77.4328 61.5452);
  border-radius:20px; width:36px; height:20px; margin:0; position:relative; flex-shrink:0;
}
.switch:before { content:''; position:absolute; background:#d4d4d8; width:16px; height:16px; border-radius:50%; left:2px; top:2px; transition:transform .15s; }
.switch:checked { background:lab(59.0978 -58.6621 41.2579); }
.switch:checked:before { transform:translateX(16px); background:#fff; }
.segmented { display:flex; background:var(--control); border-radius:8px; padding:2px; min-width:0; max-width:100%; flex-shrink:1; margin-left:auto; }
.segmented button { color:var(--muted); background:none; border-radius:6px; padding:7px 12px; min-height:28px; font-size:12px; line-height:14px; font-weight:650; }
.segmented button.active { color:var(--selected-text); background:var(--selected); box-shadow:0 1px 3px #0002; }
.zone-list { background:var(--surface-alt); }
.zone-item { display:flex; align-items:center; padding:13px 20px; gap:9px; min-height:64px; }
.zone-edit { display:flex; align-items:center; gap:9px; flex:1; min-width:0; padding:0; background:none; text-align:left; color:var(--text); }
.zone-avatar { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--avatar); color:var(--muted); font-size:18px; font-weight:650; }
.zone-meta { min-width:0; }
.zone-name { display:block; overflow-wrap:anywhere; font-size:14px; font-weight:650; margin-bottom:2px; }
.zone-id { display:block; overflow-wrap:anywhere; font-size:12px; line-height:16px; color:var(--hint); overflow:hidden; text-overflow:ellipsis; }
.remove-zone { padding:8px; background:none; color:var(--muted); font-size:20px; font-weight:300; }
.add-zone { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; background:var(--surface-alt); color:var(--text); width:100%; font-size:14px; border-top:1px solid var(--border); }
.hours-range { display:flex; align-items:center; gap:12px; padding:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); border-top:1px solid var(--border); }
.hours-range label { display:flex; align-items:center; gap:6px; flex:1; }
.hours-range select { width:100%; padding:7px; font-size:12px; min-width:82px; }
.settings-footer { display:flex; flex-wrap:wrap; justify-content:center; column-gap:16px; color:var(--muted); font-size:10px; line-height:16px; }
.settings-footer a { display:inline-flex; align-items:center; min-height:44px; }
.info-layout { display:flex; flex-direction:column; height:100%; min-height:0; }
.legal-copy { font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.legal-copy h1 { font-size:23px; line-height:1.25; }
.legal-copy h2 { font-size:17px; margin-top:24px; }
.legal-copy a { text-decoration:underline; text-underline-offset:3px; }
.legal-copy pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.6; }
.backdrop { position:fixed; inset:0; z-index:11; background:#0007; }
input:not([type=checkbox]),select { width:100%; min-width:0; background:var(--control); color:var(--text); border:1px solid var(--control-border); border-radius:12px; padding:12px; font-size:16px; min-height:46px; }
.hint { font-size:12px; line-height:19px; color:var(--hint); margin:0 0 18px; }
.primary-button { width:100%; border-radius:15px; padding:14px; min-height:50px; background:var(--accent); color:var(--accent-text); font-size:15px; font-weight:650; }
.primary-button:disabled { cursor:default; opacity:.35; }
dialog.app-sheet {
  position:fixed; inset:auto; left:calc(var(--viewport-left,0px) + env(safe-area-inset-left,0px) + 12px); top:calc(var(--viewport-top,0px) + env(safe-area-inset-top,0px) + 12px);
  margin:0; padding:0; width:calc(var(--viewport-width,100vw) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
  height:calc(var(--viewport-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); max-width:520px; max-height:850px;
  border:1px solid var(--control-border); border-radius:28px; overflow:hidden; background:var(--surface); color:var(--text); box-shadow:0 24px 100px #0005;
}
dialog::backdrop { background:#0008; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.app-sheet form { height:100%; min-height:0; display:flex; flex-direction:column; }
.app-sheet .panel-header { position:relative; flex-shrink:0; min-height:70px; padding:14px 22px; background:var(--surface); }
.app-sheet .panel-header h2 { font-size:20px; letter-spacing:-.6px; }
.app-sheet .done { min-height:44px; padding:10px 15px; font-size:13px; }
.sheet-body { flex:1; min-height:0; min-width:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--control-border) transparent; scroll-padding:18px; padding:20px; }
.sheet-footer { flex-shrink:0; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface); }
.footer-hint { color:var(--muted); font-size:10px; line-height:16px; text-align:center; margin:9px 0 0; }
#download-status:empty,#meeting-error:empty { display:none; }
#download-status { font-size:12px; }
.eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:1.1px; font-weight:650; color:var(--muted); }
.meeting-fields { border:1px solid var(--border); background:var(--surface-alt); border-radius:18px; overflow:hidden; }
.meeting-fields label { display:block; min-width:0; padding:10px 12px; min-height:58px; }
.meeting-fields .meeting-title-field,.meeting-date-row label { display:flex; align-items:center; gap:12px; }
.meeting-fields .meeting-title-field input,.meeting-date-row input { min-width:0; flex:1; width:0; }
.meeting-fields label>span { display:block; flex-shrink:0; min-width:66px; margin:0; font-size:12px; font-weight:600; }
.meeting-fields small { display:inline; color:var(--muted); font-size:9px; font-weight:400; margin-left:4px; }
.meeting-fields input,.meeting-fields select { background:var(--surface); border-color:var(--border); border-radius:10px; min-width:0; max-width:100%; min-height:40px; padding:8px; }
.meeting-date-row { display:grid; grid-template-columns:minmax(0,1fr); border-block:1px solid var(--border); }
.meeting-date-row label+label { border-top:1px solid var(--border); }
.meeting-fields input[type=date],.meeting-fields input[type=time] { padding-inline:8px; min-height:40px; -webkit-appearance:none; appearance:none; }
.meeting-fields input::-webkit-date-and-time-value { text-align:left; }
.meeting-fields .duration-field { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.duration-field select { width:auto; max-width:68%; font-size:16px; }
.local-zone { margin:8px 2px 14px; font-size:11px; overflow-wrap:anywhere; }
.meeting-summary { padding:12px 14px; background:var(--control); border-radius:16px; margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.meeting-summary strong { font-size:17px; font-weight:600; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.meeting-summary span { font-size:12px; line-height:18px; color:var(--muted); }
.meeting-world-heading { margin:0 2px 10px; }
.meeting-zones { border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.meeting-zone { padding:9px 13px; display:flex; gap:12px; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
.meeting-zone:last-child { border-bottom:0; }
.meeting-zone>span { font-size:13px; min-width:0; overflow-wrap:anywhere; }
.meeting-zone>div { display:flex; flex-direction:column; gap:4px; text-align:right; flex-shrink:0; max-width:72%; }
.meeting-zone strong { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.meeting-zone small { font-size:10px; line-height:15px; color:var(--muted); }
.field-error { font-size:12px; line-height:19px; color:#ef837b; margin:10px 0 18px; }
:root[data-theme=light] .field-error { color:#a5352a; }
.occurrence-field { display:block; font-size:12px; line-height:18px; margin-bottom:16px; }
.occurrence-field select { margin-top:8px; }
.calendar-actions { display:flex; align-items:center; gap:10px; }
.calendar-actions .primary-button { flex:1; }
.calendar-fallback { display:grid; place-items:center; width:50px; height:50px; min-height:50px; border:1px solid var(--border); border-radius:15px; background:var(--control); color:var(--text); margin:0; flex-shrink:0; }
.meeting-zones>p { padding:16px; font-size:13px; color:var(--muted); line-height:20px; margin:0; }
@media(min-width:600px) {
  dialog.app-sheet { left:calc(var(--viewport-left,0px) + var(--viewport-width,100vw)/2); top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh)/2); transform:translate(-50%,-50%); width:min(520px,calc(var(--viewport-width,100vw) - 32px)); }
  dialog.meeting-sheet { max-height:780px; }
  .sheet-body { padding:24px; } .sheet-footer { padding:16px 24px; }
}
@media(max-width:360px) {
  .app-sheet .panel-header { padding:10px 16px; min-height:64px; }
  .app-sheet .panel-header h2 { font-size:18px; }
  .sheet-body,.sheet-footer { padding:14px; }
  .meeting-fields label { padding:10px; }
  .meeting-fields input { font-size:16px; padding-inline:4px!important; }
}
#toast { position:fixed; bottom:calc(25px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--button); color:var(--text); padding:10px 16px; border-radius:22px; font-size:12px; z-index:30; opacity:0; pointer-events:none; transition:opacity .2s; }
@media(min-width:1000px) {
  body.settings-open #main { width:calc(var(--viewport-width,100vw) - var(--panel-width) - 24px); }
  .backdrop { background:transparent; right:calc(var(--panel-width) + 24px); }
}
@media(max-width:600px) { .pill { font-size:12px; padding:10px 12px; } }
@media(max-width:360px) {
  .segmented button { padding:7px 9px; }
  .row.tall { flex-wrap:wrap; } .row { gap:6px; } .segmented { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
/* City picker: a globe for discovery, search for precision. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
input:not([type=checkbox]),select { font-size:16px; }
.city-sheet-main { padding-top:0; }
.city-search { display:flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--control); border-radius:13px; padding:0 11px; }
.city-search>span { font-size:25px; line-height:1; color:var(--muted); }
.city-search input { background:none; border:0; padding:11px 0; min-width:0; min-height:44px; }
.city-search input:focus-visible { outline:0; }
.city-search:focus-within { outline:2px solid #7aabdf; outline-offset:2px; }
.globe-stage { position:relative; width:100%; height:190px; margin:7px 0 0; }
#city-globe { display:block; width:100%; height:100%; touch-action:none; cursor:grab; border-radius:16px; }
#city-globe:active { cursor:grabbing; }
.globe-zoom { position:absolute; right:0; bottom:12px; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--control); }
.globe-zoom button { width:44px; height:44px; font-size:20px; background:transparent; color:var(--muted); }
.globe-zoom button+button { border-top:1px solid var(--border); }
#globe-hint { text-align:center; margin:0 0 14px; font-size:11px; color:var(--muted); letter-spacing:.1px; }
#city-selection { min-height:56px; border:1px solid var(--border); border-radius:14px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); margin-bottom:12px; }
#city-selection.has-selection { border-color:#6c9cc24d; background:var(--control); }
.city-selected-copy { display:flex; flex-direction:column; min-width:0; gap:4px; }
.city-selected-name { font-size:17px; font-weight:650; letter-spacing:-.3px; }
.city-selected-location { font-size:11px; color:var(--muted); }
.city-selected-time { font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.city-empty-selection { color:var(--muted); font-size:12px; line-height:18px; }
#city-results-heading { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:0 2px 8px; }
.city-sheet #zone-results { height:auto; overflow:visible; border:1px solid var(--border); border-radius:14px; margin-bottom:16px; background:var(--surface); }
.city-sheet #zone-results button.city-result { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 13px; min-height:55px; }
.city-result-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.city-result-copy strong { font-size:14px; font-weight:600; }
.city-result-copy>span { color:var(--muted); font-size:11px; line-height:15px; }
.city-result-detail { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-variant-numeric:tabular-nums; font-size:12px; white-space:nowrap; }
.city-result-detail>span+span { color:var(--muted); font-size:10px; }
.city-label-row { display:flex; align-items:center; gap:12px; margin:8px 0; }
.city-label-row>label { font-size:12px; color:var(--muted); flex-shrink:0; }
.city-label-row>input { min-width:0; border-radius:10px; }
#city-custom { font-size:11px; line-height:18px; color:var(--muted); }
#city-custom summary { cursor:pointer; padding:3px 0; }
#city-custom select { margin-top:10px; font-size:16px; }
#city-custom .hint { margin:8px 0 0; font-size:11px; }
.city-status { color:var(--muted); font-size:10px; line-height:16px; margin:12px 0 0; }

.city-sheet-footer .primary-button { border-radius:14px; min-height:50px; font-size:15px; }
.city-attribution { text-align:center; font-size:9px; color:var(--muted); margin:9px 0 0; line-height:14px; }
.city-attribution a { text-decoration:underline; text-underline-offset:2px; }

#zone-results { margin-bottom:16px; }
#zone-results .hint { padding:14px; }
#zone-results button { width:100%; text-align:left; background:var(--surface); color:var(--text); border-bottom:1px solid var(--border); }
#zone-results button:last-child { border-bottom:0; }
#zone-results button[aria-selected=true] { background:var(--button); }
#zone-results button:hover { background:var(--control); }
.city-options { color:var(--muted); font-size:12px; margin:0 2px 20px; }
.city-options summary { cursor:pointer; padding:10px 0; min-height:40px; }
@media(max-height:600px) {
  .globe-stage { height:130px; }
  .app-sheet .panel-header { min-height:58px; padding-block:7px; }
  .sheet-footer { padding-block:10px; }
}
html[data-keyboard=true] .city-sheet .globe-stage,html[data-keyboard=true] .city-sheet #globe-hint { display:none; }

.hours-range select { font-size:16px; }

.city-selected-name,.city-result-copy strong { overflow-wrap:anywhere; }

 .city-search-bar { flex-shrink:0; padding:14px 20px 0; }
.meeting-body { padding:16px 20px 14px; }
@media(max-width:360px) {
  .city-search-bar { padding-inline:14px; }
  .meeting-body { padding:14px; }
}

@media(max-height:400px) {
  .app-sheet .panel-header { min-height:52px; padding-block:4px; }
  .sheet-footer { padding-block:8px; }
  .sheet-footer .primary-button { min-height:44px; padding:10px; }
  .city-sheet-footer #city-selection,.city-attribution,.meeting-footer .footer-hint:empty,.meeting-footer #calendar-help { display:none; }
  .city-search-bar { padding-top:8px; }
}

:root[data-theme=dark] .dial-map { filter:brightness(.4) saturate(.6); }
.city-sheet-main { padding-top:0; }
.city-search-bar { padding:0; margin:16px 0 0; position:sticky; top:-1px; z-index:1; background:var(--surface); }
.city-search { box-shadow:0 0 0 6px var(--surface); }
.globe-stage { height:clamp(180px,29dvh,260px); margin-top:8px; }
.city-prompt { text-align:center; color:var(--muted); font-size:12px; line-height:19px; margin:20px 10px 0; }
#city-results-heading { margin:22px 2px 10px; }
.city-options { margin:14px 2px 0; }
#city-custom { margin:24px 2px 0; }
#city-status { display:none; }
#city-selection { border:0; border-radius:0; background:transparent!important; margin-bottom:12px; padding:0; }
.city-selected-name { font-size:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.city-selected-location { font-size:11px; line-height:16px; }
.city-selected-time { font-size:14px; }
#zone-results { overflow:hidden!important; }
#zone-results button:focus-visible { outline-offset:-3px; }
@media(hover:none) { #zone-results button:hover { background:var(--surface); } #zone-results button[aria-selected=true]:hover { background:var(--button); } }
@media(max-width:380px) {
  #settings>.panel-header { padding-inline:16px; }
  .row { font-size:13px; }
  .row.tall { gap:10px; }
  .row.tall>span { width:100%; }
  .row.tall .segmented { width:100%; margin:0; }
  .row.tall .segmented button { flex:1; min-width:0; }
}
@media(max-height:600px) { .globe-stage { height:150px; } }
html[data-keyboard=true] .city-sheet .globe-stage,html[data-keyboard=true] .city-sheet #globe-hint { display:none; }
@media(max-height:400px) { .globe-stage { height:120px; } #settings>.panel-header { min-height:54px; padding-block:4px; } .settings-tab-bar { margin-top:8px; } }

/* Keep the city task compact; expand only the results area when searching. */
dialog.city-sheet { height:min(700px,calc(var(--viewport-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh)/2); transform:translateY(-50%); }
@media(min-width:600px) { dialog.city-sheet { transform:translate(-50%,-50%); } }
@media(pointer:coarse) { .city-sheet:has(#zone-search:focus) .globe-stage,.city-sheet:has(#zone-search:focus) #globe-hint { display:none; } }

/* The globe is the primary surface; other controls sit quietly beneath it. */
dialog.city-sheet { height:min(820px,calc(var(--viewport-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); }
.globe-stage { height:clamp(200px,45dvh,400px); width:calc(100% + 16px); margin:0 -8px; }
.globe-zoom { right:6px; bottom:22px; border-radius:24px; background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 4px 20px #0000000d; }
.globe-zoom button { color:var(--text); }
#globe-hint { font-size:10px; letter-spacing:.2px; margin:0 0 18px; }
.city-prompt { margin-top:18px; }
.city-sheet-footer #city-selection { min-height:28px; }
.polar-land { fill:var(--map-land); opacity:var(--map-land-opacity); }
.polar-borders { fill:none; stroke:var(--map-line); stroke-width:.065; opacity:.28; }
.polar-guide { fill:none; stroke:var(--map-line); stroke-width:.08; opacity:.14; }
.polar-label { fill:var(--map-label); font-size:1.8px; font-weight:500; letter-spacing:0; opacity:.76; }
:root { --map-land:#53657f; --map-land-opacity:.4; --map-line:#8ca0bb; --map-label:#9aabc0; }
:root[data-theme=light] { --map-land:#cbd6e3; --map-land-opacity:.5; --map-line:#8a9cb2; --map-label:#697d95; }
@media(max-height:650px) { .globe-stage { height:210px; } }
@media(max-height:400px) { .globe-stage { height:145px; } }