/* Four skies stacked, and a ruler under your thumb.
   Almost every colour on this page is set from script, because almost every
   colour on this page is a function of where the sun is. */

:root {
  --night: #0B0F1A;
  --edge: rgba(255, 255, 255, .09);
  --quiet: #7E8698;
  --dial-h: 118px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: #EDEFF5;
  color-scheme: dark;
  font: 16px/1.3 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

main {
  height: 100%;
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- header ------------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .95rem .45rem;
  flex: 0 0 auto;
}
#mark {
  margin: 0;
  flex: 1;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: var(--quiet);
}
#now {
  border: 1px solid rgba(255, 214, 140, .45);
  background: rgba(255, 214, 140, .12);
  color: #FFD68C;
  border-radius: 999px;
  padding: .3rem .8rem;
  min-height: 30px;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .14em;
  cursor: pointer;
}
#now[hidden] { display: none; }
#cog {
  border: 0;
  background: none;
  color: var(--quiet);
  padding: .3rem;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
#cog:hover, #cog:focus-visible { color: #EDEFF5; }

/* ---- the four skies ----------------------------------------------------- */

#bands {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 5px;
  padding: 0 .55rem;
}

.band {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%);
  /* No transition while dragging: the sky must track the thumb exactly. */
}
.band.home { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, .5); }

/* The stars. Twice the band's width so they can drift across a night without
   running out, and only over the sky half — none below the horizon. Every one
   twinkles on its own CSS animation, so nothing has to run a timer for them. */
.band .stars {
  position: absolute;
  left: 0;
  width: 200%;
  top: 0;
  height: 74%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.band .stars i {
  position: absolute;
  border-radius: 50%;
  background: var(--tone);
  opacity: var(--dim);
  animation: twinkle var(--slow) ease-in-out var(--wait) infinite alternate;
}
.band .stars i.bright {
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--tone) 55%, transparent);
}
@keyframes twinkle {
  from { opacity: var(--dim); }
  to   { opacity: 1; }
}

.band .arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.band .arc path { fill: none; stroke: currentColor; }
.band .arc .track { opacity: .17; stroke-width: 1.2; stroke-dasharray: 2.5 4; }
.band .arc .lit { opacity: .32; stroke-width: 1.8; }

.band .horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  height: 1px;
  background: currentColor;
  opacity: .25;
}
.band .ground {
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  bottom: 0;
  background: rgba(0, 0, 0, .16);
}

/* Sized off the band's own height rather than in fixed pixels, so the room
   kept clear for it at the top and bottom of the sky holds whatever size the
   band ends up. Centred by its own dimensions, not by a hardcoded margin. */
.band .sun {
  position: absolute;
  height: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 12px 3px var(--glow);
}
.band .sun.down { height: 11%; opacity: .85; }

.band .info {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .95rem;
  color: var(--ink);
}
.band .where { min-width: 0; }
.band h2 {
  margin: 0;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band .sub {
  margin: .12rem 0 0;
  font-size: .68rem;
  letter-spacing: .04em;
  opacity: .72;
  white-space: nowrap;
}
.band .when { text-align: right; flex: 0 0 auto; }
.band .time {
  margin: 0;
  font-size: clamp(1.6rem, 7.6vw, 2.15rem);
  font-weight: 640;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.band .meta {
  margin: .2rem 0 0;
  font-size: .68rem;
  letter-spacing: .05em;
  opacity: .78;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.band .meta .tomorrow { opacity: 1; font-weight: 600; }

/* ---- the dial ----------------------------------------------------------- */

#dialwrap {
  position: relative;
  flex: 0 0 auto;
  height: var(--dial-h);
  margin: .5rem .55rem .1rem;
  border-radius: 14px;
  overflow: hidden;
  background: #11151f;
  border: 1px solid var(--edge);
  touch-action: none;
  cursor: grab;
}
#dialwrap:active { cursor: grabbing; }
#dial { display: block; width: 100%; height: 100%; }

#needle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #FFD68C;
  box-shadow: 0 0 10px rgba(255, 214, 140, .55);
  pointer-events: none;
}
#needle::before, #needle::after {
  content: "";
  position: absolute;
  left: 50%;
  border: 5px solid transparent;
  margin-left: -5px;
}
#needle::before { top: 0; border-top-color: #FFD68C; }
#needle::after { bottom: 0; border-bottom-color: #FFD68C; }

/* On a pill, because the dial behind it is painted with daylight and a plain
   grey caption vanishes into a bright afternoon. */
#reading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: .45rem;
  margin: 0;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(8, 11, 20, .62);
  white-space: nowrap;
  font-size: .68rem;
  letter-spacing: .12em;
  color: #D6DAE6;
  pointer-events: none;
  text-transform: uppercase;
}

/* ---- footer bits -------------------------------------------------------- */

#lab-offline-status:empty { display: none; }
#lab-offline-status {
  margin: 0;
  padding: .1rem .95rem;
  font-size: .66rem;
  color: var(--quiet);
  text-align: center;
}
#lab-install-open {
  flex: 0 0 auto;
  align-self: center;
  border: 0;
  background: none;
  color: #4A5164;
  font: inherit;
  font-size: .62rem;
  letter-spacing: .18em;
  padding: .25rem .6rem;
  min-height: 26px;
  cursor: pointer;
}
#lab-install-open:hover, #lab-install-open:focus-visible { color: var(--quiet); }

/* ---- dialogs ------------------------------------------------------------ */

dialog {
  width: min(27rem, 92vw);
  max-height: 86vh;
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 1.1rem 1.1rem .9rem;
  background: #161B27;
  color: #EDEFF5;
  font-size: 15px;
  overflow: hidden;
}
dialog::backdrop { background: rgba(4, 6, 12, .72); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 .8rem; font-size: 1.02rem; font-weight: 650; }
dialog .hint { margin: .8rem 0 .2rem; font-size: .72rem; color: var(--quiet); }
dialog button {
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #1F2634;
  color: #EDEFF5;
  font: inherit;
  cursor: pointer;
}
dialog button.plain {
  width: 100%;
  margin-top: .6rem;
  background: none;
  color: var(--quiet);
  letter-spacing: .12em;
  font-size: .74rem;
  text-transform: lowercase;
}

/* The offer nobody should have to hunt for. The tiny one under the dial is
   easy to miss, and inside an installed app there is no address bar to share
   from either — so both live here, at a size you can hit with a thumb. */
.actions { display: grid; gap: .45rem; margin-top: .9rem; }
dialog button.offer {
  width: 100%;
  justify-content: center;
  font-size: .92rem;
  font-weight: 600;
  padding: .8rem 1rem;
}
dialog button.offer.accent {
  background: #FFD68C;
  border-color: #FFD68C;
  color: #1A1408;
}
dialog button.offer[hidden] { display: none; }
#shared:empty { display: none; }
#shared { text-align: center; }

#slotlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
#slotlist button {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-align: left;
  padding: .7rem .85rem;
}
#slotlist .rank {
  font-size: .64rem;
  letter-spacing: .16em;
  color: var(--quiet);
  flex: 0 0 2.6rem;
  text-transform: uppercase;
}
#slotlist .pick { font-weight: 600; }
#slotlist .zone { margin-left: auto; font-size: .7rem; color: var(--quiet); }

#searchcity {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #0F131D;
  color: inherit;
  font: inherit;
  margin-bottom: .55rem;
}
#searchcity:focus { outline: 2px solid rgba(255, 214, 140, .5); outline-offset: 1px; }
#results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#results li { border-bottom: 1px solid var(--edge); }
#results button {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  text-align: left;
  padding: .65rem .3rem;
}
#results .country { font-size: .72rem; color: var(--quiet); }
#results .clock { margin-left: auto; font-size: .78rem; color: var(--quiet);
                  font-variant-numeric: tabular-nums; }
#results .none { padding: 1rem .3rem; color: var(--quiet); font-size: .84rem; }

@media (prefers-reduced-motion: reduce) {
  dialog::backdrop { backdrop-filter: none; }
  /* Still a night sky, just a still one. */
  .band .stars i { animation: none; opacity: .85; }
}