/* Sun at any address (/sun/at) — the page's own dress, after styles.css.
   The scene is the sky: the 3D block fills the sky section and the answer rides over
   the dark of space above the board, as the window page's answer rides its painted
   sky. Every container that begins a line stands on var(--edge). The words let a hand
   through to the scene beneath them; only the controls take it. */

.block-sky, .block-sky.roomy { height: max(660px, min(96dvh, 1000px)); min-height: 660px; max-height: none; background: #05080f; }
.bl-stage { position: absolute; inset: 0; z-index: 1; }
.bl-stage canvas.bl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; }
.bl-stage canvas.bl-canvas:active { cursor: grabbing; }
.bl-stage canvas.bl-canvas:focus-visible { outline: 2px solid var(--ink-2); outline-offset: -4px; }
/* the dark lies under the words, not over the city: down the left beside the column of words.
   Its own element, because the section's ::after is motion.js's dimming once the sky is pinned. */
.sky-section.block-sky::after { background: none; }
.bl-shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(5,8,15,.72), rgba(5,8,15,.36) 34%, transparent 52%); }
.bl-labels, .bl-views, .bl-status, .bl-credit { z-index: 3; }

/* the words over the scene pass a hand through; the controls in them do not */
.block-sky .sky-ui > .answer { pointer-events: none; max-width: 560px; }
.block-sky .answer a, .block-sky .answer button, .block-sky .answer input, .block-sky .answer .first-frame,
.block-sky .answer .bl-field, .block-sky .answer .answer-chips > * { pointer-events: auto; }
.block-sky .answer .answer-chips { pointer-events: none; }

#bl-answer .answer-eyebrow { margin-bottom: 10px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bl-answer .answer-measure { font-size: clamp(40px, 4.2vw, 58px); }
#bl-answer .answer-caption { margin-top: 10px; font-size: 19px; max-width: 30ch; min-height: 2.5em; }
.block-sky .answer-place { margin: 14px 0 20px; min-height: 1.65em; font-variant-numeric: tabular-nums; }
.bl-nowrap { white-space: nowrap; }
.bl-ico { width: 15px; height: 15px; flex: none; display: block; }

/* ---- the place: one chip, then a search that reaches anywhere (the planner's pattern) */
.bl-find { position: relative; }
#bl-find-open { max-width: min(320px, calc(100vw - 150px)); }
#bl-find-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-find.is-open #bl-find-open { visibility: hidden; }   /* it keeps its box, so nothing beside it moves */
.bl-field {
  position: absolute; z-index: 8; top: 0; left: 0; width: min(390px, calc(100vw - 2 * var(--gutter, 20px)));
  background: var(--night-2); border-radius: 22px; padding: 8px; box-shadow: 0 20px 52px rgba(0,0,0,.6);
}
.bl-field-row { display: flex; align-items: center; gap: 6px; margin: 0; }
.bl-search {
  flex: 1; min-width: 0; height: 42px; padding: 0 15px; border: 0; border-radius: 999px;
  background: var(--lift-08); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; outline: none;
}
.bl-search::placeholder { color: rgba(244,247,252,.55); font-weight: 400; }
.bl-search:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.bl-field-close {
  flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer;
}
.bl-field-close:hover { background: var(--lift-08); color: var(--ink); }
.bl-pop-note { margin: 10px 9px 6px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: rgba(244,247,252,.62); }
.bl-options { list-style: none; margin: 2px 0 0; padding: 0; max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; }
.bl-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 15px; min-height: 44px; border-radius: 13px; cursor: pointer; }
.bl-opt[aria-selected="true"], .bl-opt:hover { background: var(--lift-08); }
.bl-opt-name { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-opt-meta { flex: none; font-size: 12px; font-weight: 500; line-height: 1.35; color: rgba(244,247,252,.6); white-space: nowrap; }

/* ---- the view's own controls: closer, further, back to rest */
.bl-views { position: absolute; right: var(--edge); bottom: 118px; display: flex; flex-direction: column; gap: 8px; }
.bl-round {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 0; border-radius: 999px; color: var(--ink); cursor: pointer;
  /* dark glass: these stand over the white city as often as over the dark around it */
  background: rgba(5,8,15,.52); box-shadow: inset 0 0 0 1px rgba(244,247,252,.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .18s;
}
.bl-round:hover { background: rgba(5,8,15,.7); }
.bl-round[aria-pressed="true"] { background: rgba(244,247,252,.2); }
.bl-round:disabled { opacity: .4; cursor: default; }
.bl-round:disabled:hover { background: rgba(5,8,15,.52); }

/* ---- the status: a sentence while the buildings arrive, or why they did not */
.bl-status {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); margin: 0; max-width: min(420px, 80vw);
  text-align: center; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-2);
}
.bl-status button { font: inherit; color: var(--ink); background: var(--lift-08); border: 0; border-radius: 999px; padding: 6px 14px; margin-left: 6px; cursor: pointer; }
.bl-status:empty { display: none; }

/* ---- the deck: the day, then the hour */
.bl-deck {
  position: absolute; left: var(--edge); right: var(--edge); bottom: 34px;
  display: flex; align-items: center; gap: 14px 22px; pointer-events: none;
}
.bl-deck > * { pointer-events: auto; }
.bl-days {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: none; border-radius: 999px;
  background: rgba(255,255,255,.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bl-day {
  position: relative; border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  min-height: 36px; padding: 0 13px; border-radius: 999px; display: inline-flex; align-items: center; white-space: nowrap;
  transition: background .18s, color .18s;
}
.bl-day:hover { color: var(--ink); background: var(--lift-08); }
.bl-day[aria-pressed="true"] { background: var(--lift-14); color: var(--ink); }
.bl-date { padding: 0 6px 0 8px; }
.bl-date input[type="date"] { background: transparent; border: 0; color: inherit; font: inherit; font-size: 13px; font-weight: 600; min-height: 32px; width: 124px; color-scheme: dark; cursor: pointer; }
.bl-date.is-set { background: var(--lift-14); color: var(--ink); }
.bl-time { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
/* a fixed width: the sun's words change with every step of the scrub, and a clock that grew with
   them would move the track under the finger (a layout shift, measured 0.0081 before this) */
.bl-clock {
  flex: none; width: 15.5em; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; line-height: 1.3; color: rgba(244,247,252,.92);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bl-clock small { display: block; font-size: 12.5px; font-weight: 500; color: rgba(244,247,252,.62); }
.bl-track { position: relative; flex: 1; min-width: 0; height: 40px; }
.bl-band { position: absolute; left: 10px; right: 10px; top: 17px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.bl-band i { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.bl-band i.day { background: rgba(244,247,252,.16); }
.bl-band i.lit { background: rgba(244,247,252,.78); top: 1px; height: 4px; }
.bl-track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 40px; margin: 0; background: transparent; z-index: 2; }
.bl-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 6px; }
.bl-track input[type="range"]::-moz-range-track { background: transparent; height: 6px; }
.bl-track input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; background: var(--ink); border: 0; box-shadow: 0 0 0 5px rgba(255,255,255,.1), 0 1px 10px rgba(5,8,15,.5); }
.bl-track input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink); border: 0; }

.bl-credit {
  position: absolute; right: var(--edge); bottom: 8px; margin: 0; font-size: 11.5px; font-weight: 500; line-height: 1.3;
  color: rgba(244,247,252,.58);
}
.bl-credit a { color: inherit; text-decoration: none; }
.bl-credit a:hover { color: var(--ink); text-decoration: underline; }

/* ---- the words on the scene: the compass on the rim, a building's name, the pin */
.bl-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.bl-label {
  position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  color: rgba(244,247,252,.64); text-shadow: 0 1px 10px rgba(5,8,15,.85);
}
.bl-label.name { font-size: 11.5px; letter-spacing: .1em; color: rgba(244,247,252,.82); }
.bl-label.pin {
  font-size: 12.5px; letter-spacing: .02em; text-transform: none; font-weight: 500; color: rgba(244,247,252,.92);
  background: rgba(5,8,15,.62); border-radius: 7px; padding: 6px 10px; text-shadow: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.bl-label[hidden] { display: none; }

/* ---- the ground: the spot's day, drawn */
.bl-figure .fig-head { margin: 0 0 18px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
/* the answer's figure takes no margin under its drawing (styles.css, .fig.fig-answer .fig-draw); this
   one's caption is a sentence under three bars, and needs the air */
.fig.fig-answer .bl-days-draw { min-height: 168px; margin: 0 0 20px; }
.bl-days-draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.bl-days-draw .bl-row-name { font-family: var(--round); font-size: 13px; font-weight: 500; fill: rgba(244,247,252,.82); }
.bl-days-draw .bl-row-dur { font-family: var(--round); font-size: 13px; font-weight: 500; fill: rgba(244,247,252,.82); font-variant-numeric: tabular-nums; }
.bl-days-draw .bl-hour { font-family: var(--round); font-size: 12px; font-weight: 400; fill: rgba(244,247,252,.6); font-variant-numeric: tabular-nums; }
.bl-fig-cap { font-size: 14px; line-height: 1.6; color: var(--ink-2); min-height: 3.2em; }
.bl-share-state { align-self: center; font-size: 13px; color: var(--ink-2); }
.bl-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 44px; padding: 8px 0 12px; }
.bl-how h2 { margin: 0 0 10px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.bl-how p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.bl-noscript { padding: 24px var(--edge); color: var(--ink-2); }

@media (max-width: 900px) {
  .bl-how { grid-template-columns: 1fr; }
}
/* BELOW 900 THE WORDS STAND ABOVE THE SCENE, not over it: a phone's column of words is half its
   screen, and white words cannot be read over a white city. The section becomes a column — the
   words, the scene, the deck — and is not pinned, since a section taller than the screen that
   sticks would hide its own deck under the ground. */
@media (max-width: 899px) {
  .block-sky, .block-sky.roomy { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; padding-bottom: 18px; }
  html.m-pinned .block-sky { position: relative; }
  html.m-pinned .block-sky > .sky-ui { transform: none; }
  html.m-pinned .block-sky::after { content: none; }
  .block-sky > .sky-ui { display: contents; }
  .block-sky .sky-ui > .answer { position: relative; order: 1; top: auto; left: auto; right: auto; margin: 104px var(--edge) 0; max-width: 640px; pointer-events: auto; }
  .bl-stage { position: relative; order: 2; inset: auto; height: max(440px, 62svh); margin-top: 6px; }
  .bl-shade { display: none; }
  .bl-deck { position: relative; order: 3; left: auto; right: auto; bottom: auto; margin: 10px var(--edge) 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .bl-days { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .bl-days::-webkit-scrollbar { display: none; }
  .bl-views { bottom: 34px; }
  .bl-time { flex-wrap: wrap; row-gap: 2px; }
  .bl-track { flex: 1 1 100%; order: 3; margin-top: 8px; }
  .bl-clock { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 760px) {
  #bl-answer .answer-measure { font-size: 40px; }
  #bl-answer .answer-caption { font-size: 16.5px; }
  .block-sky .answer-place { margin: 10px 0 14px; font-size: 13.5px; }
  .bl-day { padding: 0 10px; font-size: 12.5px; }
  .bl-date input[type="date"] { width: 104px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .bl-day { padding: 0 8px; }
  .bl-date input[type="date"] { width: 96px; }
}