/* The forecast's own look, shared by every surface that draws it.
   weather-panel.js decides WHAT a day says; this decides how it looks, once, so
   the website and the wall are recognisably the same product rather than two
   teams' idea of a weather widget.

   Everything is sized in em against the panel's own font-size, and every colour
   comes from a variable with a fallback. A surface sets those two things and
   gets a forecast that fits it — the wall makes the font big, the website makes
   it comfortable, the studio canvas makes it tiny. */
.wxPanel{
  --wx-ink:currentColor;
  --wx-dim:color-mix(in srgb, currentColor 62%, transparent);
  --wx-faint:color-mix(in srgb, currentColor 38%, transparent);
  --wx-line:color-mix(in srgb, currentColor 16%, transparent);
  /* A wash a surface can override. The default is drawn from the text colour,
     which is right on a dark panel and wrong over a bright photograph — a faint
     white card on a sunlit picture leaves the sentence unreadable. A surface
     that sits over pictures sets --wx-card dark instead. */
  --wx-card:color-mix(in srgb, currentColor 8%, transparent);
  color:var(--wx-ink);
  /* The panel sets its own scale rather than inheriting the surface's. A website
     body size of 17px made a 2.35em temperature 40px tall, so two cards filled a
     row that should hold five — the panel looked spacious and carried almost
     nothing. Clamped, so it is generous on a television and compact on a page,
     and the day count stops depending on whatever font the surface happens to
     use. */
  font-size:clamp(11px, 1.05vw, 15px);
}

.wxHead{display:flex;align-items:baseline;justify-content:space-between;gap:1em;margin-bottom:.7em}
.wxHead h3{margin:0;font-size:1.35em;font-weight:400;font-family:var(--overlay-font-family,inherit)}
.wxNote{font-size:.62em;letter-spacing:.18em;text-transform:uppercase;color:var(--wx-faint);
  white-space:nowrap}

/* ---- condensed: a weekday and two numbers ---- */
/* A chip reads along the line, because a chip only ever exists in a strip: the
   fitter falls back to these when the box is too short for cards. Stacked in a
   column — day over high over low — it was three lines of type in a 47px bar,
   which looked broken even once it technically fitted. Now: Tue 19°/8°. */
.wxChips{display:flex;gap:1.25em;flex-wrap:wrap;align-items:baseline}
/* Direct child only. deg() writes the degree symbol as <i class="dg">, so a bare
   `.wxChips i` was also turning every ° into a flex container — which silently
   kills the vertical-align that lifts it, because vertical-align does not apply
   to flex items. Latent before this change; fixed rather than inherited. */
.wxChips > i{display:flex;flex-direction:row;align-items:baseline;gap:.34em;
  font-style:normal;flex:none;white-space:nowrap}
.wxChips .dg{display:inline}
.wxChips b{font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:var(--wx-faint);font-weight:700}
.wxChips s{text-decoration:none;font-weight:700;font-size:.95em;font-variant-numeric:tabular-nums}
.wxChips u{text-decoration:none;font-size:.86em;color:var(--wx-faint);font-variant-numeric:tabular-nums}
/* The slash belongs to the pair, not to either number, so it is drawn rather
   than written — the studio canvas also hand-builds these chips, and a separator
   in the markup would have to be remembered in two places. */
.wxChips u::before{content:"/";margin-right:.16em;opacity:.5;font-weight:400}

/* ---- detailed: a card per day ----
   Auto-fit rather than a fixed count: the same markup is five across a website,
   three across a tablet and one on a phone, without any surface being told how
   many it is allowed. minmax(0,...) so a long day name can never push a column
   wider than the box it sits in. */
/* Equal columns, every day the same size — today included. auto-fit with an
   equal fraction, so five days share the width evenly rather than the later ones
   being squeezed. */
/* Left to right, always. This used to be an auto-fit grid, which in a wide short
   box did the opposite of what it looks like it should: each card claimed 9.5em,
   so a narrow panel put one per ROW, the panel grew tall, and the fit pass then
   dropped days to get the height back. A weather holder is nearly always wider
   than it is tall — a strip along the top of a wall — so the days share the width
   and none of them has to leave. */
/* A minimum column width, not minmax(0,1fr). Equal columns that shrink without
   limit look like they fit at any size — five days at 70px each on a phone — and
   worse, they never overflow, so fit() below has nothing to measure and never
   drops a day. With a floor they overflow instead, fit() sees it, and the panel
   loses a day rather than becoming unreadable. */
.wxCards{display:grid;gap:.6em;grid-auto-flow:column;grid-auto-columns:minmax(7.6em,1fr)}
.wxCard{min-width:0;border:1px solid var(--wx-line);border-radius:.55em;
  padding:.9em .95em .95em;background:var(--wx-card);display:flex;flex-direction:column;gap:.1em}
.wxCard header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5em}
.wxCard header b{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wx-dim);font-weight:500;white-space:nowrap}
.wxCard .ico{flex:none;width:1.5em;height:1.5em;opacity:.85}
.wxCard .ico svg{width:100%;height:100%;display:block}
/* What it is right now, on today's card. */
.wxCard .now{font-size:2.15em;font-weight:700;line-height:1;letter-spacing:-.02em;
  font-family:var(--overlay-font-family,inherit);margin:.06em 0 .02em}
.wxCard.today{border-color:color-mix(in srgb, currentColor 34%, transparent)}
.wxCard.today header b{color:var(--wx-ink);opacity:1}
.wxCard .t{display:flex;align-items:baseline;gap:.3em;margin:.45em 0 .55em}
.wxCard .t s{text-decoration:none;font-size:2.1em;font-weight:600;line-height:.9;
  letter-spacing:-.02em}
.wxCard .t u{text-decoration:none;font-size:.95em;color:var(--wx-faint);font-weight:500}
.wxCard .ms{display:flex;flex-wrap:wrap;gap:.15em .8em}
.wxCard .m{display:inline-flex;align-items:center;gap:.3em;font-size:.68em;color:var(--wx-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wxCard .m svg{width:1.1em;height:1.1em;flex:none;opacity:.75}
.wxCard .say{margin:.45em 0 0;font-size:.68em;line-height:1.35;color:var(--wx-dim)}

/* A card with no room for a sentence keeps the numbers. Set by a surface that
   has measured its box (see fitForecast on the television). */
.wxPanel.t2 .say{display:none}
.wxPanel.t1 .say,.wxPanel.t1 .ms{display:none}

/* Humidity and tides — the two things the old card left out and a coastal venue
   actually gets asked about. Set as labelled values rather than icon soup: an
   icon of a water droplet at three metres is a smudge, and the word is shorter
   to read than the picture is to decode. */
.wxCard .hum{display:flex;align-items:baseline;gap:.45em;margin-top:.2em;
  font-size:.78em;font-weight:600;color:var(--wx-ink)}
.wxCard .hum em{font-style:normal;font-size:.82em;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--wx-faint)}
.wxCard .tide{display:flex;flex-wrap:wrap;gap:.1em .55em;margin-top:.42em;padding-top:.42em;
  border-top:1px solid var(--wx-line)}
.wxCard .tide span{display:flex;align-items:baseline;gap:.3em;font-size:.8em;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--wx-ink);white-space:nowrap}
.wxCard .tide em{font-style:normal;font-size:.78em;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--wx-faint)}
/* High water carries the accent; low water is quieter. On a coast the high is
   the one that changes what you can do. */
.wxCard .tide .high em{color:var(--wx-ink);opacity:.75}

/* High tide / Low tide, set as a label and a time on one line — the shape the
   wind and sunset rows used to have, which is what made that card readable. */
.wxCard .tl{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;
  font-size:.82em;line-height:1.75}
.wxCard .tl em{font-style:normal;color:var(--wx-dim);font-weight:500}
.wxCard .tl b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--wx-ink)}

/* The degree mark: smaller, raised a little, and never carrying the number's
   weight. A full-size ° beside a 2em figure reads as a separate object. */
.wxPanel .dg{font-style:normal;font-size:.42em;font-weight:500;vertical-align:.9em;
  margin-left:.06em;opacity:.8}
.wxChips .dg{font-size:.6em;vertical-align:.35em}

/* ---- rows: a day per line, down a tall box --------------------------------
   The column layout. .wxCards lays days out ACROSS with grid-auto-flow:column,
   which is right in a wide block and wrong in a holder drawn down one side of a
   wall — four cards sharing 18% of the screen width is a forecast three
   characters wide. Down the box each day gets the full width and there is room
   for the weekday, the sky and both numbers on one readable line. */
.wxRows{display:flex;flex-direction:column;gap:.42em}
.wxRows > i{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
  gap:.55em;font-style:normal;padding:.34em .1em;border-top:1px solid var(--wx-rule,rgba(255,255,255,.14))}
.wxRows > i:first-child{border-top:0}
.wxRows b{font-size:.78em;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wx-faint);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.wxRows .ico{display:flex;width:1.15em;height:1.15em;opacity:.85}
.wxRows .ico svg{width:100%;height:100%}
.wxRows s{text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.wxRows u{text-decoration:none;font-size:.88em;color:var(--wx-faint);
  font-variant-numeric:tabular-nums}
.wxRows u::before{content:"/";margin-right:.18em;opacity:.5;font-weight:400}
.wxRows > i.today b{color:inherit}