/* The whole page is one sky; the timeline supplies the horizon and sun path. */
:root {
  color-scheme: dark;
  --paper: #172236;
  --ink: #f7eedc;
  --muted: #b7bcc8;
  --line: #f6e7ce22;
  --accent: #f0c48d;
}
body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  background: radial-gradient(ellipse at 50% 8%, #3f3d4b 0, #202c40 44%, #172236 80%);
}
.page-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  filter: blur(28px);
  mask-image: linear-gradient(to bottom,
    #0001 0, #0002 calc(var(--scene-top) - 240px),
    #0004 calc(var(--scene-top) - 70px),
    #000b calc(var(--scene-top) + 60px),
    #000e calc(var(--scene-bottom) - 120px),
    #0005 var(--scene-bottom),
    #0001 calc(var(--scene-bottom) + 230px), transparent 100%);
}
.page-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle, #fff4dc 0 .65px, transparent 1px),
    radial-gradient(circle, #e0e8ff 0 .8px, transparent 1.2px);
  background-size: 173px 211px, 293px 271px;
  background-position: 31px 47px, 91px 121px;
  mask-image: linear-gradient(#000 0, #0005 36%, transparent 75%);
}
header { border: 0; height: 94px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
header > .brand { justify-self: start; }
header > .view-nav { grid-column: 2; justify-self: center; }
.brand { color: #fff4df; }
.header-note { color: #b9bcc7; }
.text-button { color: #e6dfd2; }
.intro { padding: 37px 0 38px; }
.intro .eyebrow { color: #d9c3a8; }
h1 { font-size: 68px; }
h1 em { color: #edcb9d; }
.intro > p:last-child { color: #c3c5ce; }
.explorer { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.toolbar { border: 0; padding: 0 30px; height: 62px; }
.city-control, .date-nav {
  padding: 5px 12px;
  border: 1px solid #fff0d51f;
  border-radius: 30px;
  background: #15223555;
  backdrop-filter: blur(12px);
}
.icon { stroke: #d6bc98; }
.zone-tag { color: #cbc5bb; border-color: #eee3ce33; }
.date-nav > button:not(.today-button) { color: #ddd3c5; }
.today-button { color: #efe1ca; border-color: #eee3ce33; }
.date-nav > button:hover { background: #fff0d51a; }
input { color: #f3e9d8; }
.city-results { background: #202d40; border-color: #c1c6ce40; box-shadow: 0 16px 50px #0b16295c; }
.city-results button { color: #f7efdf; }
.city-results small, .empty-search { color: #bfc4d0; }
.city-results button:hover, .city-results button[aria-selected=true] { background: #fff1d51c; }
.light-summary { padding: 31px 62px 24px; }
.light-total p, .light-total.after p, .selected-moment > .eyebrow { color: #e2d3be; }
.before .duration { color: #e7eaf0; }
.after .duration { color: #ffe0a9; }
.duration small, .after .duration small { color: #cac7c4; }
#selected-time { color: #fff4df; font-size: 40px; }
.moment-controls > button { border-color: #fff2dc40; color: #f4e3c9; background: #1f2b3c25; }
.moment-controls > button:hover { background: #fff0d526; }
.sky-shell { width: min(calc(100vw - 64px), 1440px); margin-left: 50%; transform: translateX(-50%); padding: 0; }
.sky { background: transparent; border-radius: 0; height: 350px; }
/* Feather decorative SVG layers only, keeping timeline endpoints and labels crisp. */
#sky-svg { mask-image: none; }
.sky-grain { display: none; }
.sky-caption { justify-content: center; left: 3%; right: 3%; color: #f9efdc; font-size: 9px; text-shadow: 0 1px 7px #172236; }
/* Center between the SVG skyline base (239) and time rail (288), in a 310-unit view. */
.grab-hint { bottom: 15%; transform: translate(-50%, 50%); color: #fff3db; background: #17223660; border-color: #fff0d529; }
.hour-axis { color: #dad1c4; margin-top: 13px; padding: 0 12px; }
select option { background: #202c40; color: #f5e8cf; }
footer { margin: 0 30px; color: #aab5c7; border-color: #f0e5d41c; }
footer .text-button { color: #c2c8d3; }
dialog { background: #233044; border-color: #e5d9c73d; color: #f1e6d3; }
dialog p, dialog li { color: #c8cdd6; }
dialog::backdrop { background: #101b30a1; }
.dialog-close { color: #d5dce8; }
.skip:focus { color: #172236; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .sky:focus-visible { outline-color: #f8d49b; }
@media(max-width:1050px) {
  h1 { font-size: 58px; }
  .light-summary { padding-left: 30px; padding-right: 30px; }
  .toolbar { padding-left: 0; padding-right: 0; }
  .sky-shell { width: calc(100vw - 30px); }
}
@media(max-width:720px) {
  header { height: 76px; }
  .intro { padding: 27px 10px 27px; }
  h1 { font-size: 45px; }
  .intro > p:last-child { color: #c9cbd4; }
  .toolbar { height: auto; justify-content: center; gap: 10px; padding: 5px 0 12px; }
  .city-control { padding: 3px 10px; }
  .date-nav { padding: 3px 8px; }
  .light-summary { padding: 25px 10px 22px; gap: 22px 0; }
  #selected-time { font-size: 38px; }
  .sky-shell { width: 100vw; }
  .sky { height: 280px; }
  #sky-svg { mask-image: none; }
  .sky-caption { top: 13px; left: 18px; right: 18px; font-size: 7px; }
  .hour-axis { margin: 12px 16px 0; padding: 0; color: #ded7cd; font-size: 8px; }
  footer { margin: 0 4px; }
}
@media(max-width:365px) {
  .city-control { width: auto; }
  .date-nav { width: auto; }
  .sky { height: 255px; }
  .light-summary { padding-left: 3px; padding-right: 3px; }
}

/* A real button opens a modal picker; touch users browse before opening a keyboard. */
.city-control { padding: 0 12px; }
.city-trigger { display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 150px; padding: 0; text-align: left; }
#selected-city { flex: 1; font-size: 13px; font-weight: 550; }
.city-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.city-dialog { width: min(440px, calc(100% - 32px)); padding: 30px 20px 16px; max-height: calc(100dvh - 32px); overflow: hidden; }
.city-dialog h2 { margin: 4px 30px 20px 0; font-size: 32px; }
.city-dialog .dialog-close { min-width: 44px; min-height: 44px; top: 10px; right: 10px; }
#city-search { display: block; width: 100%; min-height: 46px; border: 1px solid #e5d9c73d; background: #13203370; border-radius: 8px; padding: 10px 12px; font-size: 16px; margin-bottom: 12px; }
#city-search::placeholder { color: #b3bdcc; }
.city-dialog .city-results { position: static; width: 100%; max-height: min(370px, calc(100dvh - 230px)); min-height: 80px; overflow-y: auto; overscroll-behavior: contain; border: 0; box-shadow: none; background: transparent; padding: 0; }
.city-dialog .city-results button { min-height: 46px; font-size: 14px; padding: 12px; }
.city-dialog .city-results small { font-size: 11px; }
@media(max-width:720px) { .city-trigger { min-width: 135px; } #selected-city { font-size: 12px; } }

/* Keyboard focus follows the selected moment instead of boxing in the scenery. */
.sky:focus-visible { outline: none; }
.sky:focus-visible #cursor-handle { stroke: #fff7df; stroke-width: 3; }
.sky:focus-visible #cursor-ring { stroke: #fff7df; stroke-opacity: 1; stroke-width: 2; }
.sky:focus-visible #cursor-line { stroke-width: 2; }

/* Keep the current-time shortcut beside the selected moment. */
.moment-status { display: flex; align-items: center; justify-content: center; gap: 8px; }
.now-button { min-height: 44px; min-width: 64px; padding: 8px 18px; font-size: 10px; color: #f4e3c9; border: 1px solid #fff2dc55; background: #1f2b3c25; border-radius: 22px; }
.now-button:hover { background: #fff0d526; }
.explorer { padding-bottom: 30px; }

.view-nav { display: flex; align-items: center; gap: 6px; }
.view-nav a { color: #b7c0cd; font-size: 11px; padding: 12px 16px; border-radius: 22px; text-decoration: none; }
.view-nav a:hover { color: #fff4df; background: #fff0d50d; }
.view-nav a[aria-current="page"] { color: #f3dfbe; background: #fff0d512; }
@media(max-width:900px) {
 header { display: flex; flex-wrap: wrap; height: auto; min-height: 112px; padding-top: 18px; gap: 14px; padding-bottom: 12px; }
 .view-nav { order: 3; width: 100%; justify-content: center; }
 .view-nav a { min-height: 40px; padding: 12px 20px; }
}

/* A quiet annual snapshot connects the selected city to its yearly ranking. */
.city-annual { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 10px 30px 0; min-height: 30px; color: #b7c0cd; font-size: 10px; }
.annual-year { font-size: 8px; letter-spacing: 1.2px; color: #d9c3a8; }
.annual-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.annual-stats strong { color: #f3dfbe; font-weight: 500; font-variant-numeric: tabular-nums; }
.city-annual > a { color: #c9c4ba; text-underline-offset: 4px; padding: 8px 0; }
.city-annual > a:hover { color: #fff0cd; }
@media(max-width:1050px) { .city-annual { margin-left: 0; margin-right: 0; } }
@media(max-width:720px) {
 .city-annual { justify-content: center; gap: 2px 14px; margin-top: 4px; font-size: 9px; }
 .annual-year { flex-basis: 100%; text-align: center; font-size: 7px; margin-bottom: 2px; }
 .annual-stats { gap: 12px; }
 .city-annual > a { min-height: 40px; display: inline-flex; align-items: center; }
}

footer { justify-content: flex-end; }

main { padding-top: 24px; }
@media(max-width:720px) { main { padding-top: 16px; } }

/* Supporting information stays out of the explorer controls. */
footer { flex-wrap: wrap; gap: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer nav a { color: #bbc4d0; text-decoration: none; font-size: 10px; padding: 10px 0; }
footer nav a:hover { color: #fff4df; text-decoration: underline; text-underline-offset: 4px; }

.sky-caption #daylight-total { max-width: none; text-align: center; white-space: nowrap; }