/* The weather hour by hour: a widget on a black page whose background is the sky worked out for the hour chosen.
   The writing takes the ink that reads best on the sky behind it: the script picks one of the two inks below. */
:root {
  --page: #000000;            /* the page */
  --ink-light: #ffffff;       /* the writing on a dark sky */
  --ink-dark: #16202f;        /* the writing on a bright sky (fog, haze) */
  --sun: #ffcf5a;             /* the sun in the small icons */
  --moon: #f2ead8;            /* the moon in the small icons */
  --drop: #8fd2ff;            /* the rain in the small icons, and the chance of rain */
  --cloud: #f2f5f9;           /* the clouds in the small icons */
  --radius: 30px;             /* the corners of the widget */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  font-family: 'Onest Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 28px 16px;
}

/* ---------------------------------------------------------------- the widget */
.sky {
  --ink: var(--ink-light);
  --ink-soft: rgba(255, 255, 255, 0.74);
  --shade: 0.22;
  position: relative;
  isolation: isolate;
  width: min(380px, 100%);
  height: 424px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0d1a2c;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sky__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the hour chosen */
.now {
  position: absolute;
  top: 20px;
  left: 22px;
  right: 22px;
  color: var(--ink);
  text-shadow: 0 1px 14px rgba(4, 12, 28, var(--shade));
  pointer-events: none;
}

.now > * {
  margin: 0;
}

.now__place {
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 22px;
}

.now__when {
  margin-top: 1px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 480;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.now__temp {
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
  font-size: 78px;
  font-weight: 210;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.now__deg {
  margin-left: 0.02em;
  font-weight: 210;
}

.now__cond {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 540;
  line-height: 21px;
}

.now__range {
  display: flex;
  gap: 10px;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 480;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the glass under the hours */
.panel {
  --glass: 40, 60, 90;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 22px;
  background: rgba(var(--glass), 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  color: var(--ink);
}

.facts {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 11px 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 13px;
  font-weight: 540;
  line-height: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fact {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fact dt {
  display: flex;
}

.fact dd {
  margin: 0;
}

.fact__icon {
  display: block;
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the hours */
.hours {
  --cell: 52px;
  position: relative;
  height: 88px;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

.hours:active {
  cursor: grabbing;
}

/* the lens over the hour chosen */
.hours__lens {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 50px;
  margin-left: -25px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent) inset;
  pointer-events: none;
}

.hours__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hour {
  display: grid;
  flex: 0 0 var(--cell);
  grid-template-rows: 15px 25px 12px 17px;
  justify-items: center;
  align-content: center;
  row-gap: 3px;
  height: 100%;
  border-radius: 16px;
  color: var(--ink);
  transition: background-color 0.2s ease;
}

/* an hour under the mouse lights up a little: a click takes the sky there */
@media (hover: hover) and (pointer: fine) {
  .hours:not(:active) .hour:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

.hour__label {
  font-size: 12.5px;
  font-weight: 460;
  line-height: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hour__icon {
  display: block;
  width: 25px;
  height: 25px;
  overflow: visible;
}

.hour__rain {
  color: var(--drop);
  font-size: 10.5px;
  font-weight: 640;
  line-height: 12px;
  font-variant-numeric: tabular-nums;
}

.hour__temp {
  font-size: 15px;
  font-weight: 560;
  line-height: 17px;
  font-variant-numeric: tabular-nums;
}

.hour--sun .hour__temp {
  font-size: 12.5px;
  font-weight: 520;
}

/* the drawn icons: lines in the ink, the sun, the moon and the rain in their colours */
.i-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i-cloud {
  fill: var(--cloud);
  stroke: color-mix(in srgb, var(--ink) 38%, transparent);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.i-sun {
  fill: var(--sun);
}

.i-rays {
  fill: none;
  stroke: var(--sun);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.i-moon {
  fill: var(--moon);
}

.i-drop {
  fill: none;
  stroke: var(--drop);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.hours:focus-visible .hours__lens {
  box-shadow: 0 0 0 2px var(--ink) inset;
}

html[data-using='pointer'] .hours:focus-visible .hours__lens {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent) inset;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}