/* air-map.html - layout and the measured/modelled/calculated tag system.
   Tags are the load-bearing part of this file: the three categories must
   never be able to read as one another, in any theme, so each gets its own
   colour AND its own word, never colour alone. */

.am-wrap { max-width: 1280px; }
/* Two columns on a wide screen, stacked below it. The lede is first in
   the DOM so in RTL it takes the right-hand column and the forecast sits
   to its left, which is what the page is read as: the standing explanation,
   then this week. Neither carries a max-width any more - the column is the
   measure, and capping it again is what left the left half of the page
   blank and broke both blocks into stubby lines. */
.am-intro {
  display: grid; gap: 1rem 1.6rem; align-items: start; margin: .4rem 0 .9rem;
}
@media (min-width: 1060px) {
  .am-intro { grid-template-columns: 1fr 1fr; }
}
.am-lede { font-size: 1.02rem; line-height: 1.7; margin: 0; }
.am-status {
  font-size: .9rem; padding: .5rem .8rem; margin-bottom: .9rem;
  border: 1px solid var(--line, #d7d7dc); border-radius: 8px;
  background: var(--card, #fafafa);
}
.am-stale { color: #b3261e; font-weight: 600; }

.am-shell { display: grid; grid-template-columns: 290px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .am-shell { grid-template-columns: 1fr; } }

.am-side { display: flex; flex-direction: column; gap: .8rem; }
.am-panel {
  border: 1px solid var(--line, #d7d7dc); border-radius: 10px;
  background: var(--card, #fff); padding: .7rem .8rem;
}
.am-panel h2 { font-size: .82rem; text-transform: none; letter-spacing: .02em;
  margin: 0 0 .55rem; opacity: .72; font-weight: 700; }

/* ---- layer list ---- */
.am-layers { display: flex; flex-direction: column; gap: .1rem; }
.am-layer {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: .18rem .45rem;
  align-items: center; padding: .34rem .2rem; border-radius: 6px; cursor: pointer;
  font-size: .9rem;
}
.am-layer:hover { background: rgba(0,0,0,.04); }
.am-layer-empty { opacity: .42; cursor: default; }
.am-layer input { margin: 0; }
.am-l-sym { font-weight: 700; }
.am-l-he { grid-column: 3; opacity: .7; font-size: .82rem; }
.am-l-n { font-size: .72rem; opacity: .55; white-space: nowrap; }
.am-l-rng { grid-column: 2 / -1; font-size: .71rem; opacity: .58;
  font-variant-numeric: tabular-nums; }
.am-sw {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.25); flex: none;
}

/* ---- toggles ---- */
.am-toggle { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem;
  align-items: start; padding: .35rem 0; cursor: pointer; font-size: .9rem; }
.am-toggle input { margin: .25rem 0 0; }
.am-toggle small { grid-column: 2; opacity: .62; font-size: .76rem; line-height: 1.4; }
.am-field { display: block; margin-top: .5rem; font-size: .85rem; }
.am-field span { display: block; margin-bottom: .25rem; opacity: .72; }
.am-field select { width: 100%; padding: .35rem; border-radius: 6px;
  border: 1px solid var(--line, #d7d7dc); background: var(--bg, #fff); color: inherit; }

/* ---- map ---- */
.am-mapwrap { position: relative; }
#amMap {
  height: min(74vh, 760px); min-height: 460px; width: 100%;
  border: 1px solid var(--line, #d7d7dc); border-radius: 10px; overflow: hidden;
  background: #eef0f2;
}
.am-hint { font-size: .8rem; opacity: .65; margin: .45rem 0 0; }
.am-field, canvas.am-field { image-rendering: auto; }
.leaflet-container .am-station { cursor: pointer; }
.am-city-outline { pointer-events: none; }

/* ---- legend ---- */
.am-legend { display: flex; flex-direction: column; gap: .7rem; }
.am-leg-row { font-size: .82rem; }
.am-leg-head { display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; }
.am-leg-head span { opacity: .65; }
.am-leg-bar { height: 10px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); }
.am-leg-scale { display: flex; justify-content: space-between; font-size: .7rem;
  opacity: .6; margin-top: .18rem; }
.am-leg-meta { font-size: .72rem; opacity: .62; margin-top: .2rem; }
.am-leg-empty { font-size: .82rem; opacity: .6; }

/* ---- the tag system ---- */
.am-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; padding: .1rem .38rem;
  border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.5;
}
.am-obs  { color: #0b6b3a; background: rgba(11,107,58,.09); }
.am-mod  { color: #8a5a00; background: rgba(138,90,0,.10); }
.am-calc { color: #2a4c8f; background: rgba(42,76,143,.10); }

/* ---- popup ---- */
.am-popup .leaflet-popup-content { margin: .7rem .8rem; min-width: 270px; }
.am-pop-head { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.am-pop-score { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.am-pop-score span { font-size: .8rem; font-weight: 500; opacity: .55; }
.am-pop-title { font-weight: 700; font-size: .92rem; }
.am-pop-band { font-size: .78rem; opacity: .75; }
.am-good   { color: #1a7f37; } .am-mid    { color: #9a6700; }
.am-high   { color: #bc4c00; } .am-vhigh  { color: #b3261e; }
.am-severe { color: #7d1a1a; } .am-na     { color: #666; }

.am-pop-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.am-pop-tbl td { padding: .2rem .25rem; border-top: 1px solid rgba(0,0,0,.07); vertical-align: middle; }
.am-pop-tbl td:first-child { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
.am-num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: left; }
.am-unit { font-weight: 400; opacity: .6; font-size: .72rem; }
.am-win { font-size: .68rem; opacity: .6; }

.am-meas { margin-top: .6rem; padding-top: .5rem; border-top: 2px solid rgba(0,0,0,.14); }
.am-meas-h { font-size: .82rem; font-weight: 700; display: flex; align-items: center;
  gap: .35rem; flex-wrap: wrap; }
.am-meas-sub { font-size: .74rem; opacity: .68; margin: .12rem 0 .3rem; }
.am-far .am-meas-h { color: #8a5a00; }
.am-prov { margin-top: .55rem; font-size: .7rem; opacity: .6; line-height: 1.5; }

/* ---- methodology ---- */
.am-method { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line, #d7d7dc); }
.am-method h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.am-method h3 { font-size: .95rem; margin: 1.1rem 0 .35rem; }
.am-method p { line-height: 1.7; max-width: 72ch; margin: .4rem 0; }
.am-method code { font-size: .85em; background: rgba(0,0,0,.06); padding: .05em .35em;
  border-radius: 4px; direction: ltr; display: inline-block; }
.am-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .7rem; margin: .8rem 0 1.2rem; }
.am-mcard { border: 1px solid var(--line, #d7d7dc); border-radius: 9px; padding: .7rem .8rem; }
.am-mcard h3 { margin: 0 0 .35rem; }
.am-mcard p { font-size: .84rem; margin: 0; }
.am-obs-card  { border-inline-start: 3px solid #0b6b3a; }
.am-mod-card  { border-inline-start: 3px solid #8a5a00; }
.am-calc-card { border-inline-start: 3px solid #2a4c8f; }
.am-note { background: rgba(0,0,0,.035); border-radius: 8px; padding: .6rem .75rem;
  font-size: .88rem; }
.am-limits { line-height: 1.7; max-width: 72ch; font-size: .9rem; }
.am-limits li { margin: .3rem 0; }
.am-src { font-size: .82rem; opacity: .75; margin-top: 1.1rem; }

/* ---- dark themes: the site sets data-theme on <html> ---- */
[data-theme="fashion"] .am-panel,
[data-theme="fashion"] .am-status { background: rgba(255,255,255,.04); }
[data-theme="fashion"] .am-layer:hover { background: rgba(255,255,255,.07); }
[data-theme="fashion"] .am-obs  { color: #6ee7a8; background: rgba(110,231,168,.12); }
[data-theme="fashion"] .am-mod  { color: #f0c060; background: rgba(240,192,96,.12); }
[data-theme="fashion"] .am-calc { color: #8fb4ff; background: rgba(143,180,255,.12); }
[data-theme="fashion"] .am-method code,
[data-theme="fashion"] .am-note { background: rgba(255,255,255,.07); }
[data-theme="fashion"] #amMap { background: #1b1e22; }

/* ---- the h1 standfirst ---- */
.am-h1-sub { font-size: .8rem; opacity: .72; display: block; }
@media (min-width: 720px) { .am-h1-sub { display: inline; margin-inline-start: .6rem; } }

/* ---- the weekly forecast ---- */
.am-forecast {
  border: 1px solid var(--line, #d7d7dc); border-radius: 10px;
  background: var(--card, #fff); padding: .85rem 1rem; margin: 0;
  font-size: .95rem; line-height: 1.75;
}
.am-forecast b { font-weight: 700; }
.am-nb { white-space: nowrap; }
.am-fc-caveat { display: block; margin-top: .5rem; font-size: .8rem; opacity: .62; }
[data-theme="fashion"] .am-forecast { background: rgba(255,255,255,.04); }

/* ---- basemap picker ---- */
.am-base-pick { display: flex; flex-wrap: wrap; gap: .3rem; }
.am-base-btn {
  font: inherit; font-size: .78rem; padding: .25rem .55rem; cursor: pointer;
  border: 1px solid var(--line, #d7d7dc); border-radius: 6px;
  background: transparent; color: inherit;
}
.am-base-btn:hover { background: rgba(0,0,0,.05); }
.am-base-btn.is-on { background: #1f2937; color: #fff; border-color: #1f2937; }
[data-theme="fashion"] .am-base-btn:hover { background: rgba(255,255,255,.08); }
[data-theme="fashion"] .am-base-btn.is-on { background: #e5e7eb; color: #111; border-color: #e5e7eb; }

/* ---- the product claim, above everything ---- */
.am-purpose {
  font-size: .93rem; line-height: 1.7; margin: .2rem 0 .9rem;
  padding: .6rem .85rem; border-inline-start: 3px solid #8a5a00;
  background: rgba(138,90,0,.06); border-radius: 0 8px 8px 0;
}
[data-theme="fashion"] .am-purpose { background: rgba(240,192,96,.09); border-color: #f0c060; }

/* ---- validation ---- */
.am-validation h4 { font-size: .88rem; margin: 1.1rem 0 .4rem; }
.am-val-lede { font-size: .95rem; line-height: 1.75; }
.am-tbl-wrap { overflow-x: auto; }
.am-val-tbl { border-collapse: collapse; font-size: .85rem; min-width: 380px; }
.am-val-tbl th, .am-val-tbl td { padding: .25rem .7rem; text-align: start;
  border-bottom: 1px solid rgba(0,0,0,.08); }
.am-val-tbl th { font-weight: 700; opacity: .7; font-size: .78rem; }
.am-val-tbl .am-num { text-align: start; font-variant-numeric: tabular-nums; }
.am-val-warn { color: #b3261e; font-weight: 700; }
.am-val-note { font-size: .9rem; line-height: 1.75; max-width: 74ch; }
.am-val-meta { font-size: .78rem; opacity: .62; margin-top: .8rem; }
[data-theme="fashion"] .am-val-tbl th,
[data-theme="fashion"] .am-val-tbl td { border-color: rgba(255,255,255,.12); }
[data-theme="fashion"] .am-val-warn { color: #ff8a80; }

/* ---- the multi-year animation ---- */
.am-history { margin-top: 1.8rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line, #d7d7dc); }
.am-history h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.ah-lede { font-size: .95rem; line-height: 1.75; max-width: 80ch; margin: 0 0 1rem; }
.ah-tag { margin-inline-start: .3rem; }

.ah-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-end;
  margin-bottom: .9rem; }
.ah-group { display: flex; flex-direction: column; gap: .3rem; }
.ah-lbl { font-size: .75rem; opacity: .65; font-weight: 600; }
.ah-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ah-chip { font: inherit; font-size: .8rem; padding: .25rem .55rem; cursor: pointer;
  border: 1px solid var(--line, #d7d7dc); border-radius: 6px; background: transparent;
  color: inherit; display: inline-flex; align-items: center; gap: .3rem; }
.ah-chip:hover { background: rgba(0,0,0,.05); }
.ah-chip.is-on { background: #1f2937; color: #fff; border-color: #1f2937; }
.ah-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(255,255,255,.35); }
.ah-place select { padding: .3rem; border-radius: 6px; border: 1px solid var(--line, #d7d7dc);
  background: var(--bg, #fff); color: inherit; font: inherit; font-size: .85rem; }

.ah-stage { border: 1px solid var(--line, #d7d7dc); border-radius: 10px;
  padding: .9rem 1rem 1.1rem; background: var(--card, #fff); }
.ah-yearline { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .5rem; }
.ah-year { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; }
.ah-stat { font-size: .82rem; opacity: .8; }
.ah-canvaswrap { width: 100%; overflow-x: auto; }
.ah-canvaswrap canvas { display: block; }

.ah-transport { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; }
.ah-play { font: inherit; font-size: .85rem; padding: .4rem .8rem; cursor: pointer;
  border: 1px solid var(--line, #d7d7dc); border-radius: 7px; background: transparent;
  color: inherit; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.ah-play:hover { background: rgba(0,0,0,.05); }
.ah-glyph { font-size: .8em; }
.ah-scrub, .ah-speedrow input { flex: 1; min-width: 100px; }
.ah-speedrow { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }

.ah-key { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin-top: .9rem;
  font-size: .72rem; opacity: .75; }
.ah-key-stop { display: inline-flex; align-items: center; gap: .3rem; }
.ah-key-stop i { width: 14px; height: 10px; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(0,0,0,.15); }
.ah-stackhead { margin-top: 1.2rem; display: block; }

[data-theme="fashion"] .ah-stage { background: rgba(255,255,255,.04); }
[data-theme="fashion"] .ah-chip:hover, [data-theme="fashion"] .ah-play:hover
  { background: rgba(255,255,255,.08); }
[data-theme="fashion"] .ah-chip.is-on { background: #e5e7eb; color: #111; border-color: #e5e7eb; }

/* ---- the per-settlement table (air-cities.html) ---- */
.ac-toolbar { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-end;
  margin: 1rem 0 .8rem; }
.ac-search { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; }
.ac-search span { opacity: .65; font-weight: 600; }
.ac-search input { padding: .35rem .5rem; border-radius: 6px; font: inherit;
  border: 1px solid var(--line, #d7d7dc); background: var(--bg, #fff); color: inherit;
  min-width: 200px; }
.ac-group { display: flex; flex-direction: column; gap: .3rem; }
.ac-srcbtns { display: flex; gap: .3rem; flex-wrap: wrap; }
.ac-count { font-size: .8rem; opacity: .7; margin-inline-start: auto; }

.ac-tablewrap { overflow-x: auto; border: 1px solid var(--line, #d7d7dc);
  border-radius: 10px; }
.ac-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.ac-table th, .ac-table td { padding: .4rem .7rem; text-align: start;
  border-bottom: 1px solid rgba(0,0,0,.07); white-space: nowrap; }
.ac-table thead th { position: sticky; top: 0; background: var(--card, #fff);
  font-size: .76rem; font-weight: 700; opacity: .85; cursor: pointer;
  border-bottom: 2px solid rgba(0,0,0,.14); z-index: 1; }
.ac-table th[data-sort]:hover { background: rgba(0,0,0,.04); }
.ac-table th[aria-sort]::after { content: ' ▾'; opacity: .55; }
.ac-table th[aria-sort="ascending"]::after { content: ' ▴'; }
.ac-table tbody tr:hover { background: rgba(0,0,0,.03); }
.ac-name a { font-weight: 600; text-decoration: none; }
.ac-name a:hover { text-decoration: underline; }
.ac-num { font-variant-numeric: tabular-nums; }
.ac-sub { font-size: .72em; opacity: .58; font-weight: 400; display: block; }
td .ac-sub, .ac-near .ac-sub { display: inline; margin-inline-start: .25rem; }

.ac-pill { display: inline-block; min-width: 2.4em; text-align: center;
  padding: .1rem .4rem; border-radius: 5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.ac-good   { background: rgba(26,127,55,.14);  color: #14601f; }
.ac-mid    { background: rgba(154,103,0,.15);  color: #7a5200; }
.ac-high   { background: rgba(188,76,0,.16);   color: #8f3a00; }
.ac-severe { background: rgba(179,38,30,.17);  color: #8c1d18; }
.ac-na     { background: rgba(0,0,0,.06);      color: #666; }

.ac-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px; }
.ac-spark i { width: 2px; display: block; border-radius: 1px; }
.ac-sp.ac-good { background: #1a7f37; } .ac-sp.ac-mid { background: #9a6700; }
.ac-sp.ac-high { background: #bc4c00; } .ac-sp.ac-severe { background: #b3261e; }
.ac-sp-na { height: 2px; background: rgba(0,0,0,.15); width: 2px; }
.ac-worse { color: #b3261e; font-weight: 700; }
.ac-better { color: #1a7f37; font-weight: 700; }

[data-theme="fashion"] .ac-table thead th { background: #1b1e22; }
[data-theme="fashion"] .ac-table th, [data-theme="fashion"] .ac-table td
  { border-color: rgba(255,255,255,.12); }
[data-theme="fashion"] .ac-table tbody tr:hover { background: rgba(255,255,255,.05); }
[data-theme="fashion"] .ac-good   { color: #6ee7a8; }
[data-theme="fashion"] .ac-mid    { color: #f0c060; }
[data-theme="fashion"] .ac-high   { color: #ffab70; }
[data-theme="fashion"] .ac-severe { color: #ff8a80; }

.am-tolist { font-size: .92rem; margin: 0 0 .9rem; padding: .5rem .8rem;
  border-inline-start: 3px solid #2a4c8f; background: rgba(42,76,143,.06);
  border-radius: 0 8px 8px 0; }
[data-theme="fashion"] .am-tolist { background: rgba(143,180,255,.1); border-color: #8fb4ff; }