:root {
  color-scheme: dark;

  --ink: #fbf7ff;
  --ink-2: #dccfe9;
  --ink-3: #b9a8ca;
  --card: rgb(36 17 56 / .62);
  --card-line: rgb(255 255 255 / .1);
  --well: rgb(255 255 255 / .1);
  --sheet: #2b1842;
  --accent: #f6c453;
  --accent-ink: #2b1842;
  --danger: #ffb4ab;

  --sun: #f6c453;
  --moon: #e8e1ff;
  --cloud: #f1ecf8;
  --cloud-dark: #a99bbe;
  --rain: #7cc4ff;
  --snow: #ffffff;

  --sky-1: #2a1748;
  --sky-2: #472468;
  --sky-3: #5f2f7a;

  --radius: 1.25rem;
  --gap: .75rem;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

[data-sky="day"] { --sky-1: #3d2a7c; --sky-2: #7b3f9a; --sky-3: #b0567f; }
[data-sky="night"] { --sky-1: #140d2b; --sky-2: #2a1748; --sky-3: #44235c; }
[data-sky="cloud"] { --sky-1: #2e2640; --sky-2: #4a3a5e; --sky-3: #6a5670; }
[data-sky="rain"] { --sky-1: #1d2140; --sky-2: #33305c; --sky-3: #4f4470; }
[data-sky="storm"] { --sky-1: #140f2a; --sky-2: #2f1d52; --sky-3: #5a2a6e; }
[data-sky="snow"] { --sky-1: #3a3a6a; --sky-2: #5a5a8a; --sky-3: #7d749c; }

* { box-sizing: border-box; }

html { background: var(--sky-1); }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background: linear-gradient(170deg, var(--sky-1), var(--sky-2) 55%, var(--sky-3)) fixed;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding:
    max(.5rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(.5rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

/* Wall-display mode. All sizing below is in rem, so scaling the root font to the
   screen scales the whole dashboard to fit, with no page scroll on any tablet.
   Phones are too small for this and keep a normal scrolling page. */
@media (min-width: 600px) and (min-height: 500px) {
  html { overscroll-behavior: none; }
  body { height: 100dvh; overflow: hidden; }
  #app { height: 100dvh; overflow-y: auto; }
}

@media (min-width: 600px) and (min-height: 500px) and (orientation: landscape) {
  html { font-size: min(1.5625vw, 2.28vh); font-size: min(1.5625vw, 2.28dvh); }
}

@media (min-width: 600px) and (min-height: 500px) and (orientation: portrait) {
  html { font-size: min(2.083vw, 1.5625vh); font-size: min(2.083vw, 1.5625dvh); }
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
small { font-size: .72em; color: var(--ink-2); font-weight: 500; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.glyph { width: 1em; height: 1em; flex: none; }
.wx-icon { display: block; width: 100%; height: 100%; }

/* Header */

.top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.75rem;
  margin-bottom: .375rem;
}

.place {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  font-size: 1.25rem;
  font-weight: 650;
}
.place span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.top-right { display: flex; align-items: center; gap: .5rem; flex: none; }
.battery { font-size: .85rem; color: var(--ink-2); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.3rem;
}
.icon-btn:hover { background: var(--well); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .2rem .625rem;
  border-radius: 99px;
  background: var(--well);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill-live i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #7fe08a;
  animation: pulse 2.4s ease-in-out infinite;
}
.pill-warn { color: var(--sun); }

@keyframes pulse { 50% { opacity: .35; } }

.notice {
  flex: none;
  margin: 0 0 .75rem;
  padding: .625rem .875rem;
  border-radius: .75rem;
  background: rgb(246 196 83 / .18);
  font-size: .92rem;
}

/* Layout */

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "forecast" "inst";
}

@media (min-width: 600px) and (min-height: 500px) {
  .grid { flex: 1; min-height: 0; }
}

@media (min-width: 600px) and (min-height: 500px) and (orientation: portrait) {
  .grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "hero inst" "forecast forecast";
  }
}

@media (min-width: 600px) and (min-height: 500px) and (orientation: landscape) {
  .grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "hero forecast inst";
  }
}

.card {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Current conditions */

.hero { grid-area: hero; display: flex; flex-direction: column; min-height: 0; padding: 1.25rem; }

.hero-main { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.hero-icon { width: 5rem; height: 5rem; flex: none; }

.hero-temp {
  font-size: 5.25rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.03em;
}
.hero-temp sup { font-size: .55em; vertical-align: .42em; line-height: 0; margin-left: .02em; }

.hero-conditions { margin: .75rem 0 .125rem; font-size: 1.4rem; font-weight: 600; }
.hero-feels { margin: 0; color: var(--ink-2); }

.hero-range {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  font-weight: 600;
}

.range { position: relative; height: .375rem; border-radius: 99px; background: var(--well); }
.range-fill { position: absolute; inset: 0; }
.range-dot {
  position: absolute;
  top: 50%;
  width: .75rem;
  height: .75rem;
  margin: -.375rem 0 0 -.375rem;
  border: 2px solid var(--sheet);
  border-radius: 50%;
  background: #fff;
}

.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-3); }
.stat-value { font-size: 1.05rem; font-weight: 600; white-space: nowrap; }

.hero-today {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
}
.hero-today > div {
  display: grid;
  justify-items: center;
  gap: .125rem;
  padding: .625rem .25rem;
  border-radius: .875rem;
  background: var(--well);
  text-align: center;
  font-weight: 600;
  font-size: .95rem;
}
.hero-today svg { width: 1.5rem; height: 1.5rem; }
.hero-today small { font-size: .68rem; color: var(--ink-3); line-height: 1.15; }

/* 7-day forecast */

.forecast { grid-area: forecast; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.25rem .625rem; }
.forecast h2 { margin: 0 0 .25rem; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.forecast ol { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; padding: 0; list-style: none; }

.day {
  display: grid;
  flex: 1;
  grid-template-columns: 3.1rem 2rem 2.3rem 2.1rem minmax(2.25rem, 1fr) 2.1rem;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  border-top: 1px solid var(--card-line);
}
.day:first-child { border-top: 0; }

.day-name { display: flex; flex-direction: column; line-height: 1.15; }
.day-name b { font-weight: 650; }
.day-name small { font-size: .7rem; color: var(--ink-3); white-space: nowrap; }
.day-icon { width: 2rem; height: 2rem; }
.day-pop { font-size: .78rem; font-weight: 600; color: var(--rain); text-align: center; }
.day-low { color: var(--ink-3); text-align: right; font-weight: 600; }
.day-high { font-weight: 650; }

/* Instruments */

.instruments {
  grid-area: inst;
  display: grid;
  gap: var(--gap);
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
  container-type: inline-size;
}

.inst {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas: "media main" "stats stats";
  align-items: center;
  align-content: center;
  gap: .375rem .875rem;
  min-height: 0;
  padding: .625rem 1rem;
}

@container (min-width: 24.5rem) {
  .inst {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    grid-template-areas: "media main stats";
  }
  .inst-stats { padding-left: .875rem; border-left: 1px solid var(--card-line); }
}

.inst-media { grid-area: media; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
.inst-media .wx-icon { width: 2.625rem; height: 2.625rem; }

.inst-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.inst-label { font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-3); }
.inst-value { font-size: 1.5rem; line-height: 1.2; }
.inst-value b { font-weight: 550; }
.inst-value small { font-size: .78rem; }
.inst-value .now { display: block; font-size: .78rem; font-style: normal; font-weight: 600; color: var(--rain); }

.inst-stats { grid-area: stats; display: flex; gap: 1rem; }
.inst-stats:empty { display: none; }
.inst-stats .stat-value { font-size: .95rem; }
.inst-stats .stat-value small { font-size: .7rem; }

.trend { display: grid; place-items: center; font-size: 2.2rem; color: var(--ink); transition: transform .4s; }

.compass {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
}
.compass-n { position: absolute; top: -.5rem; padding: 0 .125rem; font-size: .58rem; font-weight: 700; color: var(--ink-2); background: #2f1c47; border-radius: 3px; }
.compass-needle { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s cubic-bezier(.3, .9, .3, 1); }
.compass-speed { font-size: .85rem; font-weight: 650; }

/* Footer and empty states */

.foot { flex: none; margin-top: .5rem; text-align: center; font-size: .78rem; color: var(--ink-2); }

.empty { display: grid; justify-items: center; gap: .75rem; padding: 4.5rem 1rem; text-align: center; }
.empty p { margin: 0; color: var(--ink-2); }

.btn {
  min-height: 2.875rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: .875rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.btn[disabled] { opacity: .6; }

.btn-quiet {
  min-height: 2.75rem;
  padding: 0 .875rem;
  border: 1px solid var(--card-line);
  border-radius: .75rem;
  background: var(--well);
  font-weight: 600;
}
.danger { color: var(--danger); }

.welcome {
  display: grid;
  justify-items: center;
  gap: .75rem;
  width: 100%;
  max-width: 26.25rem;
  margin: 6vh auto 0;
  text-align: center;
}
.welcome-icon { width: 6rem; height: 6rem; }
.welcome h1 { margin: 0; font-size: 1.8rem; font-weight: 650; }
.welcome p { margin: 0; color: var(--ink-2); }

.token-form { display: grid; gap: .5rem; width: 100%; margin: .5rem 0; text-align: left; }
.token-form label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.token-form .btn { margin-top: .25rem; }

input[type="password"], input[type="search"] {
  width: 100%;
  min-height: 2.875rem;
  padding: 0 .875rem;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: .75rem;
  background: rgb(0 0 0 / .22);
  /* 16px stops iOS zooming the page on focus. */
  font-size: 16px;
}

.form-error { margin: .125rem 0; color: var(--danger) !important; font-size: .9rem; }
.hint { margin: .375rem 0; font-size: .86rem; color: var(--ink-2); }

/* Sheets */

.sheet {
  width: min(28.75rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100dvh - 3rem));
  padding: .5rem 1.125rem 1.25rem;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
}
.sheet::backdrop { background: rgb(10 4 20 / .6); }

.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
.sheet h3 { margin: 1rem 0 .375rem; font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.sheet ul { margin: .375rem 0 0; padding: 0; list-style: none; }

.sheet-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 3rem;
  padding: .375rem .625rem;
  border: 0;
  border-radius: .75rem;
  background: none;
  text-align: left;
  font-weight: 600;
}
.sheet-row:hover { background: var(--well); }
.sheet-row[disabled] { opacity: .6; }
.sheet-row .glyph { color: var(--accent); font-size: 1.15rem; }
.sheet-row span { display: flex; flex-direction: column; min-width: 0; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; border-radius: .875rem; background: var(--well); }
.segmented button { min-height: 2.625rem; border: 0; border-radius: .625rem; background: none; font-size: .9rem; font-weight: 600; }
.segmented [aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .pill-live i { animation: none; }
  .compass-needle, .trend { transition: none; }
}