/* Lexington Brief - meteogram diagram (the /weather chart).
   Load AFTER app.css and typography.css, alongside weather-dateline.css:
     <link rel="stylesheet" href="/static/meteogram.css?v=1">

   Variables are namespaced --wx-* so they cannot collide with the generated
   app.css. This layer is hand-written and NOT processed by the Tailwind build,
   which is deliberate: editing app/web/src/app.css would change the sha256 in
   docs/cleanup/baseline/static-app.css.sha256 and require regenerating a
   protected baseline for no benefit (SPEC C-4).

   --wx-cold is the one colour this feature adds. The brand palette is entirely
   warm and contains no blue, and a reader must be able to tell snow from rain at
   a glance on a phone in February. It is defined in all three theme blocks,
   matching weather-dateline.css; defining it in fewer would break dark mode.

   Every other colour resolves to an existing design-system token, so a rebrand
   moves the chart with the rest of the site (SPEC FR-30). */

:root {
  --wx-cold: #3E6E8E;
  --wx-rail-bg: transparent;
  --wx-text: var(--ink);
  --wx-dim: var(--muted);
  --wx-hair: var(--line);
  --wx-border: var(--border-strong);
  --wx-now: var(--developing);
  --wx-chip-bg: transparent;
  --wx-chip-border: #b9c6bd;
  /* DESIGN.md 5.6: text on a brand surface comes from --on-brand, never a literal
     white, because --brand inverts between themes and #fff fails in dark. The global
     token is not in app.css yet (AGENTS.md backlog item, fix requires regenerating
     the protected static-app.css baseline), so this resolves it when it lands and
     carries the documented value until then. */
  --wx-on-brand: var(--on-brand, #FFFFFF);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wx-cold: #8FB8D0;
    --wx-rail-bg: var(--paper-raised);
    --wx-hair: var(--line);
    --wx-chip-border: var(--border-strong);
    --wx-on-brand: var(--on-brand, #121A15);
  }
}

:root[data-theme="dark"] {
  --wx-cold: #8FB8D0;
  --wx-rail-bg: var(--paper-raised);
  --wx-hair: var(--line);
  --wx-chip-border: var(--border-strong);
  --wx-on-brand: var(--on-brand, #121A15);
}

/* --- page frame ------------------------------------------------------------ */

.wx {
  max-width: 1180px;
}

.wx-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 28px;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--ink);
}

.wx-lede__temp {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.wx-lede__temp sup {
  font-size: 0.4em;
  vertical-align: super;
  color: var(--muted);
}

.wx-lede__body {
  padding-bottom: 6px;
}

.wx-lede__summary {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 6px;
}

.wx-lede__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wx-lede__link {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.wx-notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--developing);
  background: var(--paper-raised);
  font-size: 0.875rem;
}

.wx-notice p { margin: 0; }
.wx-notice a { color: var(--green); }

/* --- window control -------------------------------------------------------- */

.wx-windows {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 16px 0 4px;
}

.wx-windows__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

/* Reuse the site's own chip language so the control looks native (SPEC FR-31),
   and .active rather than aria-current, which no public template uses. */
.wx-chip {
  background: var(--wx-chip-bg);
  color: var(--green);
  border: 1px solid var(--wx-chip-border);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 99px;
  font: 600 0.875rem/1.2 var(--font-sans);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wx-chip:hover { border-color: var(--green); }

.wx-chip.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--wx-on-brand);
}

.wx-chip:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* A paging control is a toggle, so it carries the same 30px floor as a chip. */
.wx-step {
  border: 0;
  background: none;
  color: var(--green);
  font: 700 1.05rem/1 var(--font-sans);
  min-height: 30px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
}

.wx-step:hover { background: var(--paper-raised); }
.wx-step:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.wx-span-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- the diagram ---------------------------------------------------------- */

.wx-pairs { position: relative; }

/* Exactly one pair is visible at any width (SPEC FR-33, FR-34). The hidden one is
   display:none, which also removes it from the accessibility tree, so a screen
   reader is never offered two diagrams (AC-11b). */
.wx-pair--wide { display: none; }

@media (min-width: 701px) {
  .wx-pair--compact { display: none; }
  .wx-pair--wide { display: block; }
}

.wx-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0 0;
  overflow: visible;
}

.wx-row-name {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 14px;
  font-weight: 580;
  fill: var(--wx-text);
}

.wx-row-unit,
.wx-tick,
.wx-extreme,
.wx-day,
.wx-band-label,
.wx-now-label {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--wx-dim);
  font-variant-numeric: tabular-nums;
}

.wx-row-unit { font-size: 11px; }

/* Legend: every series in a row is named in the rail, so nothing is identified by
   colour alone (FR-10). This is also what makes the chart readable in dark mode,
   where three lines of similar weight were previously told apart by hue. */
.wx-legend-label {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--wx-dim);
}
.wx-extreme { fill: var(--wx-text); font-weight: 600; }
.wx-day { font-family: var(--font-serif, Georgia, serif); font-style: italic; }
.wx-rule { stroke: var(--wx-hair); stroke-width: 1; }
.wx-baseline { stroke: var(--wx-border); stroke-width: 1; }

/* Gridlines run only at labelled times, in the recessive --line token: enough to
   trace a value down to its hour, not the dense grid a plotting tool would draw. */
.wx-gridline { stroke: var(--line); stroke-width: 1; }

/* Value scale: solid on the step, dotted and fainter on the half step. */
.wx-y { stroke: var(--line); stroke-width: 1; }
.wx-y-minor { stroke-opacity: 0.55; stroke-dasharray: 1 3; stroke-linecap: round; }

/* The value at each row's top and bottom edge, so a line can be read rather than
   only seen. */
.wx-axis-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--wx-dim);
}
.wx-tick-mark { stroke: var(--wx-border); stroke-width: 1; }
.wx-now { stroke: var(--wx-now); stroke-width: 1; opacity: 0.4; }
.wx-now-label { fill: var(--wx-now); opacity: 0.75; font-size: 10px; }
.wx-barb { stroke: var(--masthead); stroke-width: 1; }
.wx-bar { fill: var(--green); }

/* Band depth is an opacity ramp of the type's own colour token (D-17). Colour
   never carries the meaning alone: the left-rail name and the band label do, so
   the ramp is decorative rather than load-bearing (SPEC FR-10). */
.wx-band-label { font-size: 11px; }

/* The unqualified state (empty coverage) gets a second channel, because opacity
   alone cannot separate it from "likely" and translucency reads differently
   against light paper than dark green (SPEC BR-3, D-17). */
/* BR-3: the unqualified state gets a solid marker rather than only a different
   opacity, because the two are otherwise hard to tell apart (D-17). */
.wx-band-edge { fill: currentColor; opacity: 1; }

/* The compact pair only renders below 700px, where the rail takes a larger share
   of the width and the type must be smaller to hold FR-7's longest label. */
/* "Humidity, rain & cloud" overruns the narrower compact rail at 12px, so the
   name steps down instead. Still clear of the 10px absolute floor, and it keeps the
   plot wider than shrinking the rail would. */
.wx-pair--compact .wx-row-name { font-size: 11px; }
.wx-pair--compact .wx-row-unit { font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .wx-chip { transition: background-color 0.15s ease, border-color 0.15s ease; }
}

/* --- prose ---------------------------------------------------------------- */

/* The summary now reads as part of what a reader lands on, ahead of the diagram. */
.wx-prose {
  margin: 0 0 6px;
  padding: 0 0 4px;
}

.wx-prose h2 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 580;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.wx-prose p {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 68ch;
}

/* --- table ---------------------------------------------------------------- */

.wx-table {
  margin: 22px 0 0;
  font-size: 0.8125rem;
}

.wx-table > summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 600;
  padding: 6px 0;
}

.wx-table > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.wx-table__scroll { overflow-x: auto; }

.wx-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.wx-table th,
.wx-table td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wx-table th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wx-table th:first-child,
.wx-table td:first-child { text-align: left; }
.wx-table td.wx-until { color: var(--muted); font-size: 0.72rem; }
.wx-table td.wx-absent { color: var(--line); }

/* --- credit --------------------------------------------------------------- */

.wx-credit {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

.wx-credit p { margin: 0 0 6px; max-width: 62ch; }

.wx-credit a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

@media (max-width: 700px) {
  /* DESIGN.md 7: body and summary text is 16px on mobile. */
  .wx-prose p { font-size: 1rem; }
  .wx-lede { padding: 16px 0 14px; gap: 4px 18px; }
  .wx-lede__summary { font-size: 1.15rem; }
  .wx-windows { padding: 12px 0 2px; gap: 5px; }
  .wx-windows__label { width: 100%; margin-bottom: 2px; }
  .wx-chip { padding: 6px 10px; font-size: 0.8125rem; }
  .wx-prose { margin-top: 20px; }
}