/* ==========================================================================
   weather-screen-modern-narrow.css
   Standalone modern stylesheet for the Saratoga/WD template (ny.php only).
   Pure ASCII on purpose (site charset is ISO-8859-1).
   ========================================================================== */

:root {
  color-scheme: light dark;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #e9eff6;
  --text: #15202b;
  --muted: #5a6b7c;
  --border: #d9e1ea;
  --accent: #0b5cab;
  --accent-soft: #e1eefb;
  --shadow: 0 1px 2px rgba(15, 30, 45, .06), 0 6px 18px rgba(15, 30, 45, .06);
  --radius: 14px;
  --wx-max: 1250px;
  --ext: #c2570c;
  --ext-soft: #fdeede;
}
/* Theme: follows the browser/OS setting unless the visitor picked light or dark with the button
   in the header (stored in the browser, attribute data-theme on <html>). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
    --bg: #0d141b;
    --surface: #151f29;
    --surface-2: #1b2835;
    --text: #e6edf4;
    --muted: #9bb0c4;
    --border: #263646;
    --accent: #66b1f5;
    --accent-soft: #17334d;
    --shadow: none;
    --ext: #f5a45a;
    --ext-soft: #3a2a1a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d141b;
    --surface: #151f29;
    --surface-2: #1b2835;
    --text: #e6edf4;
    --muted: #9bb0c4;
    --border: #263646;
    --accent: #66b1f5;
    --accent-soft: #17334d;
    --shadow: none;
    --ext: #f5a45a;
    --ext-soft: #3a2a1a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, body.wx {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { border: 0; max-width: 100%; }
a { color: var(--accent); }
small { font-size: .8em; color: var(--muted); font-weight: 400; }
.wx-wrap { max-width: var(--wx-max); margin: 0 auto; padding: 0 16px; }

/* ---------- header ---------- */
.wx-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.wx-top { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.wx-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--text); margin-right: auto; min-width: 0; }
.wx-brand-name { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.wx-brand-loc { font-size: .85rem; color: var(--muted); }
.wx-livetemp { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }

/* site name next to the logo ('both') */
.wx-brand-text { display: flex; flex-direction: column; min-width: 0; }
.wx-brand-logo .wx-brand-text { margin-left: 14px; }
@media (max-width: 560px) { .wx-brand-logo .wx-brand-loc { display: none; } .wx-brand-logo .wx-brand-name { font-size: 1.05rem; } }

/* banner as a rounded box, as wide as the content below ('background'): name and controls on top */
.wx-header-bg { background: transparent; border-bottom: 0; padding: 16px 16px 0; }
.wx-header-bg .wx-top {
  position: relative; max-width: calc(var(--wx-max) - 32px); min-height: 96px; margin: 0 auto; padding: 0 24px;
  border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border);
  background-image: var(--wxbg); background-size: cover; background-position: left center; background-repeat: no-repeat;
}
.wx-header-bg .wx-top::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .08) 65%, rgba(0, 0, 0, .30)); }
.wx-header-bg .wx-top > * { position: relative; z-index: 1; }
:root[data-theme="dark"] .wx-header-bg .wx-top { background-image: var(--wxbgd); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wx-header-bg .wx-top { background-image: var(--wxbgd); } }
.wx-header-bg .wx-brand, .wx-header-bg .wx-brand-name, .wx-header-bg .wx-brand-loc, .wx-header-bg .wx-livetemp { color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, .7); }
.wx-header-bg .wx-brand-loc { opacity: .9; }
.wx-header-bg .wx-theme, .wx-header-bg .wx-burger, .wx-header-bg .wx-lang summary { color: #fff; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .55); }
.wx-header-bg .wx-burger span { background: #fff; }
@media (max-width: 860px) {
  .wx-header-bg { padding: 12px 12px 0; }
  .wx-header-bg .wx-top { min-height: 78px; padding: 0 16px; background-position: 72% center; }
}

/* logo in the header: scales down with the screen, never wider than the space it has */
.wx-brand-logo { flex: 0 1 auto; flex-direction: row; align-items: center; min-width: 0; margin-right: auto; }
.wx-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 72px; }
.wx-logo-dark { display: none; }
:root[data-theme="dark"] .wx-logo-light + .wx-logo-dark { display: block; }
:root[data-theme="dark"] .wx-logo-dark ~ .wx-logo-light, :root[data-theme="dark"] .wx-logo-light:has(+ .wx-logo-dark) { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wx-logo-light + .wx-logo-dark { display: block; }
  :root:not([data-theme="light"]) .wx-logo-light:has(+ .wx-logo-dark) { display: none; }
}
@media (max-width: 860px) { .wx-logo { max-height: 56px; } }
@media (max-width: 420px) { .wx-logo { max-height: 44px; } .wx-top { gap: 8px; } }

.wx-lang { position: relative; }
.wx-lang summary { list-style: none; cursor: pointer; font-size: 1.3rem; padding: 4px 8px; border-radius: 8px; }
.wx-lang summary::-webkit-details-marker { display: none; }
.wx-lang summary:hover { background: var(--accent-soft); }
.wx-lang-list {
  position: absolute; right: 0; top: 100%; z-index: 70; width: 260px; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 10px; font-size: .9rem;
}

/* light/dark button */
.wx-theme { background: none; border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; cursor: pointer; color: var(--text); font-size: 1.15rem; line-height: 1; padding: 0; }
.wx-theme:hover { background: var(--accent-soft); }
.wx-theme::before { content: "\263E\FE0E"; }
:root[data-theme="dark"] .wx-theme::before { content: "\2600\FE0E"; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wx-theme::before { content: "\2600\FE0E"; } }

/* burger (mobile only) */
.wx-burger { display: none; background: none; border: 1px solid var(--border); border-radius: 10px; width: 44px; height: 40px; padding: 0 10px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.wx-burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; }

/* ---------- layout: left sidebar + content ---------- */
.wx-layout {
  max-width: var(--wx-max); margin: 0 auto; padding: 16px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start;
}

/* ---------- navigation (left sidebar, flyouts to the right) ---------- */
.wx-nav { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 6px 10px; }
.wx-navtitle { margin: 8px 10px 4px; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.wx-nav ul { list-style: none; margin: 0; padding: 0; }
.wx-nav li { position: relative; }
.wx-nav a { display: block; padding: .45rem .7rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .93rem; line-height: 1.35; }
.wx-nav a:hover, .wx-nav a:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.wx-nav a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.wx-nav li.sub > a::after { content: "\25B8"; float: right; margin-left: .5em; opacity: .6; }
.wx-nav li ul {
  display: none; position: absolute; left: calc(100% - 2px); top: -6px; z-index: 60; min-width: 250px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 6px;
}
.wx-nav li:hover > ul, .wx-nav li:focus-within > ul { display: block; }
/* external links: own colour, flyout opens upwards (it is the last item) */
.wx-nav li.ext { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.wx-nav li.ext > a { color: var(--ext); font-weight: 600; }
.wx-nav li.ext > a:hover, .wx-nav li.ext > a:focus-visible { background: var(--ext-soft); color: var(--ext); }
.wx-nav li.ext > ul { top: auto; bottom: -6px; }
.wx-nav li.ext ul a { color: var(--ext); }
.wx-nav li.ext ul a:hover, .wx-nav li.ext ul a:focus-visible { background: var(--ext-soft); color: var(--ext); }
.wx-nav li.ext ul a::after { content: "\2197"; margin-left: .35em; font-size: .85em; opacity: .8; }

/* ---------- main + dashboard ---------- */
.wx-main { min-width: 0; }
.wx-dash { container-type: inline-size; container-name: dash; }
.wx-updated { margin: 0 0 14px; text-align: center; color: var(--muted); font-size: .88rem; }
.wx-updated b { font-weight: 500; }
.wx-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.wx-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); min-width: 0;
}
.wx-title { margin: 0 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.wx-sub { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.wx-note { margin: 10px 0 0; color: var(--muted); font-size: .88rem; }
.wx-credit { text-align: center; color: var(--muted); font-size: .78rem; }

/* key/value rows */
.wx-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: .95rem; }
.wx-title + .wx-kv, .wx-almtimes > .wx-kv:first-child { border-top: 0; }
.wx-kv .k { color: var(--muted); }
.wx-kv .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wx-kv .v img { vertical-align: middle; }

/* temperature */
.wx-cond { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wx-condicon img { display: block; height: 52px; width: auto; }
.wx-condtext { font-size: 1.1rem; font-weight: 600; }
.wx-bigrow { display: flex; align-items: center; gap: 22px; }
.wx-thermo img { display: block; height: 128px; width: auto; }
.wx-t { font-size: clamp(2.8rem, 10vw, 4.4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wx-arrow { margin-left: 4px; }
.wx-word { margin: 6px 0 4px; font-weight: 600; }
.wx-minmax { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .9rem; }
.wx-minmax th, .wx-minmax td { padding: 7px 8px; text-align: center; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.wx-minmax th { color: var(--muted); font-weight: 600; }
.wx-minmax td small { display: block; }

/* wind */
.wx-windrow { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.wx-rose { flex: 0 0 auto; }
.wx-rose img { display: block; height: auto; max-width: 110px; }
.wx-dir { font-size: .95rem; color: var(--muted); }
.wx-speed { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-speed small { margin-left: 4px; font-size: .4em; }

/* UV / solar */
.wx-big2 { font-size: 2rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wx-uvword { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: 6px; }

/* almanac + moon */
.wx-almrow { display: flex; flex-direction: column; gap: 10px; }
.wx-almtimes { min-width: 0; }
.wx-kv .k { white-space: nowrap; }
.wx-moon { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.wx-moon img { flex: 0 0 auto; width: 48px; height: 48px; }
.wx-moon > div { min-width: 0; }
.wx-moonname { font-size: .9rem; font-weight: 600; line-height: 1.25; }

/* forecast */
.wx-fc { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.wx-title + .wx-fc { border-top: 0; padding-top: 4px; }
.wx-fc-icon { flex: 0 0 104px; text-align: center; font-size: .8rem; line-height: 1.3; }
.wx-fc-icon img { height: auto; max-width: 64px; }
.wx-fc-text { min-width: 0; font-size: .95rem; }
.wx-vp { color: #2e8b57; }

/* air quality: compact card */
.wx-airbody { display: block; }
.wx-airhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wx-airbadge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-airtext { font-size: .98rem; font-weight: 600; line-height: 1.25; }
.wx-airsub { font-size: .8rem; color: var(--muted); }
.wx-airoffline { color: var(--ext); font-weight: 600; }
.wx-airtable { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.wx-airtable th, .wx-airtable td { padding: 3px 4px; text-align: left; border-top: 1px solid var(--border); }
.wx-airtable tr:first-child th { border-top: 0; color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .04em; }
.wx-airtable th[scope="row"] { color: var(--muted); font-weight: 500; }
.wx-aqdot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em; vertical-align: .05em; }
.wx-airnote { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }

/* air quality page (wxair.php) */
.wx-aq-wide { grid-column: 1 / -1; }
.wx-airbadge.wx-aqbig { width: 84px; height: 84px; font-size: 1.9rem; }
.wx-aq-sub2 { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .95rem; }
.wx-tablewrap { overflow-x: auto; }
#main-copy .wx-aqtable { width: 100%; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
#main-copy .wx-aqtable th, #main-copy .wx-aqtable td { padding: 7px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
#main-copy .wx-aqtable thead th { border-top: 0; color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#main-copy .wx-aqtable tbody th { font-weight: 600; white-space: nowrap; }
#main-copy .wx-aqtable thead th.nocap { text-transform: none; letter-spacing: 0; }
#main-copy .wx-aqtable tr.sep th, #main-copy .wx-aqtable tr.sep td { border-top: 2px solid var(--border); }
#main-copy .wx-aqtable td.num { text-align: right; white-space: nowrap; }
#main-copy .wx-aqlevels tr.cur th, #main-copy .wx-aqlevels tr.cur td { background: var(--accent-soft); }
@container dash (min-width: 860px) { .wx-aq-status, .wx-aq-sensor { grid-column: span 2; } }
@container dash (max-width: 559px) {
  .wx-lk { display: none; }
  #main-copy .wx-aqtable th, #main-copy .wx-aqtable td { padding: 6px 5px; }
  /* explanation table: one block per level instead of five columns */
  #main-copy .wx-aqlevels thead { display: none; }
  #main-copy .wx-aqlevels, #main-copy .wx-aqlevels tbody, #main-copy .wx-aqlevels tr { display: block; width: 100%; }
  #main-copy .wx-aqlevels tr { padding: 8px 4px; border-top: 1px solid var(--border); }
  #main-copy .wx-aqlevels th, #main-copy .wx-aqlevels td { display: block; padding: 1px 0; border: 0; text-align: left; white-space: normal; }
  #main-copy .wx-aqlevels td.num { display: inline-block; margin-right: 14px; }
  #main-copy .wx-aqlevels td.num::before { content: attr(data-l) ": "; color: var(--muted); }
  #main-copy .wx-aqlevels tr.cur { background: var(--accent-soft); border-radius: 8px; }
  #main-copy .wx-aqlevels tr.cur th, #main-copy .wx-aqlevels tr.cur td { background: transparent; }
}

/* layer buttons above the Windy map (wxmaprader.php) */
.wx-layers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
#main-copy .wx-layers button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 600; cursor: pointer; }
#main-copy .wx-layers button:hover { border-color: var(--accent); }
#main-copy .wx-layers button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* train board (tog.php) */
.wx-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid transparent; vertical-align: middle; white-space: nowrap; }
.wx-badge.ok { background: rgba(16, 185, 129, .14); color: #0e9f6e; border-color: rgba(16, 185, 129, .35); }
.wx-badge.late { background: rgba(245, 158, 11, .15); color: #c27c0e; border-color: rgba(245, 158, 11, .4); }
.wx-badge.cancel { background: rgba(244, 63, 94, .14); color: #e11d48; border-color: rgba(244, 63, 94, .4); }
:root[data-theme="dark"] .wx-badge.ok { color: #5eead4; } :root[data-theme="dark"] .wx-badge.late { color: #fbbf24; } :root[data-theme="dark"] .wx-badge.cancel { color: #fb7185; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wx-badge.ok { color: #5eead4; } :root:not([data-theme="light"]) .wx-badge.late { color: #fbbf24; } :root:not([data-theme="light"]) .wx-badge.cancel { color: #fb7185; }
}
.wx-tog .wx-card { margin-bottom: 14px; }
.wx-tsearchrow { display: flex; gap: 10px; align-items: flex-start; }
.wx-tbox { position: relative; flex: 1 1 auto; min-width: 0; }
#main-copy .wx-tbox input { display: block; width: 100%; padding: 10px 38px 10px 12px; font-size: .95rem; }
#main-copy .wx-tclear { display: none; position: absolute; right: 6px; top: 6px; padding: 2px 9px; background: transparent; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1.4; cursor: pointer; }
.wx-tauto { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.wx-tautoitem { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: .92rem; border-top: 1px solid var(--border); }
.wx-tautoitem:first-child { border-top: 0; }
.wx-tautoitem:hover { background: var(--accent-soft); }
.wx-tautoitem small { color: var(--muted); white-space: nowrap; }
.wx-tshort { margin: 12px 0 0; align-items: center; }
.wx-tlabel { font-size: .8rem; font-weight: 600; color: var(--muted); }
.wx-troute { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.wx-trouteins { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
#main-copy .wx-trouteins button { height: 42px; }
@media (max-width: 700px) { .wx-trouteins { grid-template-columns: 1fr; } #main-copy .wx-trouteins button { width: 100%; } }
.wx-talert { border-left: 4px solid #f5b700; }
.wx-talertitem { padding: 8px 0; border-top: 1px solid var(--border); }
.wx-talertitem:first-of-type { border-top: 0; padding-top: 0; }
.wx-talertdesc { margin-top: 3px; font-size: .88rem; color: var(--muted); white-space: pre-line; }
.wx-talertvalid { margin-top: 3px; font-size: .78rem; color: var(--muted); }
.wx-tlinetag { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--surface-2); font-size: .72rem; font-weight: 700; }
.wx-tboardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wx-tstation { font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; }
.wx-tclock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; color: var(--accent); }
.wx-ttabs { margin: 0 0 8px; }
.wx-thead, .wx-trow { display: grid; grid-template-columns: 110px 64px minmax(0, 1fr) 60px 130px; gap: 6px 12px; align-items: center; }
.wx-thead { padding: 8px 12px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); }
.wx-thead .ctr { text-align: center; } .wx-thead .rgt { text-align: right; }
.wx-trow { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.wx-trow:hover { background: var(--accent-soft); }
.wx-trow .c-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.02rem; }
.wx-trow .c-time s { color: var(--muted); font-weight: 400; font-size: .85em; margin-right: 4px; }
.wx-trow .late { color: #c27c0e; }
:root[data-theme="dark"] .wx-trow .late { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wx-trow .late { color: #fbbf24; } }
.wx-trainline { display: inline-block; min-width: 46px; text-align: center; padding: 4px 8px; border-radius: 8px; background: #0a9b63; color: #fff; font-weight: 700; font-size: .88rem; }
.wx-trow .c-dest { font-weight: 600; min-width: 0; }
.wx-trow .hint { display: block; margin-top: 1px; font-size: .72rem; font-weight: 400; color: var(--muted); }
.wx-trow .c-track { text-align: center; }
.wx-ttrack { display: inline-block; min-width: 32px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.wx-trow .c-status { text-align: right; white-space: nowrap; }
.wx-twarn { color: #f5b700; cursor: help; }
.wx-tdetails { padding: 12px 14px; margin: 0 0 4px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.wx-tcallalert { margin-bottom: 8px; padding: 8px 10px; border-left: 4px solid #f5b700; background: rgba(245, 183, 0, .12); border-radius: 6px; font-size: .9rem; }
.wx-tstops { max-height: 300px; overflow-y: auto; }
.wx-tstop { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--border); font-size: .9rem; }
.wx-tstop:first-child { border-top: 0; }
.wx-tstop .tm { font-variant-numeric: tabular-nums; color: var(--muted); }
.wx-tstop.here { font-weight: 700; }
.wx-tleg { padding: 4px 0; font-size: .9rem; font-weight: 600; }
.wx-tleg + .wx-tleg { margin-top: 8px; }
.wx-tleg.rail { color: var(--accent); } .wx-tleg.bus { color: #0e9f6e; }
.wx-tbusy { color: var(--muted); } .wx-terr { color: #e11d48; } .wx-tmuted { color: var(--muted); font-size: .9rem; }
.wx-tfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: .82rem; color: var(--muted); }
@media (max-width: 640px) {
  .wx-thead { display: none; }
  .wx-trow { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "time line status" "dest dest track"; padding: 10px 6px; }
  .wx-trow .c-time { grid-area: time; } .wx-trow .c-line { grid-area: line; } .wx-trow .c-status { grid-area: status; }
  .wx-trow .c-dest { grid-area: dest; } .wx-trow .c-track { grid-area: track; text-align: right; }
}

/* 3-day forecast */
.wx-3day { grid-column: 1 / -1; }
.wx-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wx-day { text-align: center; font-size: .82rem; line-height: 1.3; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 4px; }
.wx-day-icon img { max-width: 52px; height: auto; }
.wx-day-temp { font-weight: 600; margin-top: 2px; }
@container dash (min-width: 560px) { .wx-days { grid-template-columns: repeat(6, 1fr); } }

/* weather warnings (MET Norway) */
.wx-alerts { display: grid; gap: 10px; margin: 0 0 14px; }
.wx-alert { background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--wxa, #e0b400); border-radius: var(--radius); box-shadow: var(--shadow); }
.wx-alert summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.wx-alert summary::-webkit-details-marker { display: none; }
.wx-alert summary::after { content: "\25BE"; margin-left: 4px; opacity: .6; }
.wx-alert[open] summary::after { content: "\25B4"; }
.wx-alert-ico svg { display: block; width: 30px; height: 30px; }
.wx-alert-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; margin-right: auto; }
.wx-alert-main b { font-size: 1rem; }
.wx-alert-main small { color: var(--muted); font-size: .82rem; }
.wx-alert-time { font-size: .8rem; color: var(--muted); text-align: right; }
.wx-alert-body { padding: 0 16px 12px 60px; font-size: .92rem; }
.wx-alert-body p { margin: .45em 0; }
.wx-alert-resp { font-weight: 600; }
.wx-alert-src { color: var(--muted); font-size: .78rem; }
@media (max-width: 560px) {
  .wx-alert summary { flex-wrap: wrap; }
  .wx-alert-time { order: 3; flex-basis: 100%; text-align: left; padding-left: 42px; }
  .wx-alert-body { padding-left: 16px; }
}

/* ---------- footer ---------- */
.wx-footer { margin-top: 24px; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .85rem; text-align: center; padding: 14px 0; }
.wx-footer p { margin: 4px 0; }
.wx-disclaimer { font-size: .8rem; }
.wx-ad { margin: 12px auto; max-width: 100%; overflow: hidden; text-align: center; }
.wx-mobilelink { font-size: .85rem; }

/* ==========================================================================
   Legacy sub pages (everything inside #main-copy that is not the new dashboard)
   ========================================================================== */
#main-copy { overflow-x: auto; }
#main-copy:not(.wx-home) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow);
}
#main-copy.wx-home { overflow: visible; }
#main-copy h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .6em; }
#main-copy h2 { font-size: 1.25rem; line-height: 1.3; margin: 1.4em 0 .5em; }
#main-copy h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
#main-copy p { margin: .6em 0; }
#main-copy img, #main-copy video { max-width: 100%; height: auto; }
#main-copy iframe { max-width: 100%; border: 0; }
#main-copy table { border-collapse: collapse; max-width: 100%; }
#main-copy th, #main-copy td { padding: 6px 10px; vertical-align: top; }
#main-copy table[border="1"] th, #main-copy table[border="1"] td,
#main-copy .data1, #main-copy .datahead { border: 1px solid var(--border); }
#main-copy .datahead { background: var(--surface-2); font-weight: 600; text-align: center; }
#main-copy .column-dark, #main-copy .column-light { margin: 0; padding: 0; background: none; border: 0; }
#main-copy pre, #main-copy code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
#main-copy pre { overflow-x: auto; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
#main-copy input, #main-copy select, #main-copy textarea, #main-copy button {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
}
#main-copy button, #main-copy input[type="submit"] { cursor: pointer; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#main-copy hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }

/* embeds (iframes and webcam images) fill the content width in the modern design */
#main-copy .wx-embed { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 10px; }
#main-copy img.wx-embed { height: auto; }
#main-copy iframe.wx-embed { height: clamp(520px, 82vh, 1000px); }
/* iframe that fits its own content (only for pages on this same site, e.g. the train board) */
#main-copy iframe.wx-embed.wx-autoheight { height: 900px; }

/* legacy blocks with a fixed width made for the old narrow layout (tables, maps) fill the content width */
#main-copy table[width="600"],
#main-copy div[style*="width: 600px"],
#main-copy div[style*="width:600px"],
#main-copy table[width="610"],
#main-copy div[style*="width: 610px"],
#main-copy div[style*="width:610px"],
#main-copy table[width="620"],
#main-copy div[style*="width: 620px"],
#main-copy div[style*="width:620px"],
#main-copy table[width="630"],
#main-copy div[style*="width: 630px"],
#main-copy div[style*="width:630px"],
#main-copy table[width="640"],
#main-copy div[style*="width: 640px"],
#main-copy div[style*="width:640px"],
#main-copy table[width="650"],
#main-copy div[style*="width: 650px"],
#main-copy div[style*="width:650px"],
#main-copy table[width="655"],
#main-copy div[style*="width: 655px"],
#main-copy div[style*="width:655px"],
#main-copy table[width="660"],
#main-copy div[style*="width: 660px"],
#main-copy div[style*="width:660px"],
#main-copy table[width="670"],
#main-copy div[style*="width: 670px"],
#main-copy div[style*="width:670px"],
#main-copy table[width="680"],
#main-copy div[style*="width: 680px"],
#main-copy div[style*="width:680px"],
#main-copy #map,
#main-copy #map_canvas,
#main-copy #map-canvas {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- legacy pages follow the theme ----------
   The pages that come with the Saratoga template are shown in the same card colours as the rest of the site
   (dark in dark mode). Parts of those pages that were painted white by inline style / bgcolor become transparent. */
#main-copy [style*="background:#fff;" i],
#main-copy [style$="background:#fff" i],
#main-copy [style*="background:#ffffff;" i],
#main-copy [style$="background:#ffffff" i],
#main-copy [style*="background:white;" i],
#main-copy [style$="background:white" i],
#main-copy [style*="background: #fff;" i],
#main-copy [style$="background: #fff" i],
#main-copy [style*="background: #ffffff;" i],
#main-copy [style$="background: #ffffff" i],
#main-copy [style*="background: white;" i],
#main-copy [style$="background: white" i],
#main-copy [style*="background-color:#fff;" i],
#main-copy [style$="background-color:#fff" i],
#main-copy [style*="background-color:#ffffff;" i],
#main-copy [style$="background-color:#ffffff" i],
#main-copy [style*="background-color:white;" i],
#main-copy [style$="background-color:white" i],
#main-copy [style*="background-color: #fff;" i],
#main-copy [style$="background-color: #fff" i],
#main-copy [style*="background-color: #ffffff;" i],
#main-copy [style$="background-color: #ffffff" i],
#main-copy [style*="background-color: white;" i],
#main-copy [style$="background-color: white" i],
#main-copy [bgcolor="#fff" i],
#main-copy [bgcolor="#ffffff" i],
#main-copy [bgcolor="white" i] {
  background: transparent !important;
  color: var(--text) !important;
}
#main-copy font[color="black" i], #main-copy font[color="#000000" i], #main-copy font[color="#000" i] { color: var(--text) !important; }
/* boxes that keep their own colour (alerts, yellow notes ...) keep dark text unless the page sets its own text colour,
   as the original design assumed dark text everywhere */
#main-copy [style*="background"]:not([style*="transparent" i]):not([style*="none" i]), #main-copy [bgcolor] { color: #15202b; }

/* pages whose tables are painted by their own script (for example wxwuhistory.php):
   write <div id="main-copy" class="wx-flat"> on that page and every box/table cell gets the card colours */
#main-copy.wx-flat table, #main-copy.wx-flat tr, #main-copy.wx-flat td, #main-copy.wx-flat th, #main-copy.wx-flat div, #main-copy.wx-flat span, #main-copy.wx-flat p {
  background: transparent !important; color: var(--text) !important;
}
#main-copy.wx-flat table, #main-copy.wx-flat td, #main-copy.wx-flat th { border-color: var(--border) !important; }
#main-copy.wx-flat th, #main-copy.wx-flat thead td { background: var(--surface-2) !important; }
#main-copy.wx-flat a, #main-copy.wx-flat a * { color: var(--accent) !important; }

/* pictures drawn on a white background (Weather-Display graphs): turned dark in dark mode.
   Add class="wx-invert" to any other picture that needs the same treatment. */
:root[data-theme="dark"] #main-copy .wx-invert,
:root[data-theme="dark"] #main-copy img[src*="hourgraph"],
:root[data-theme="dark"] #main-copy img[src*="monthtodate"] { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #main-copy .wx-invert,
  :root:not([data-theme="light"]) #main-copy img[src*="hourgraph"],
  :root:not([data-theme="light"]) #main-copy img[src*="monthtodate"] { filter: invert(1) hue-rotate(180deg); }
}

/* ---------- breakpoints ---------- */
/* dashboard grid follows the width of its own container (sidebar takes space on desktop) */
@container dash (min-width: 560px) {
  .wx-grid { grid-template-columns: repeat(2, 1fr); }
  .wx-temp, .wx-forecast { grid-column: 1 / -1; }
}
@container dash (min-width: 860px) {
  .wx-grid { grid-template-columns: repeat(4, 1fr); }
  .wx-temp { grid-column: span 2; }
  .wx-forecast { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .wx-layout { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .wx-burger { display: inline-flex; }
  .wx-nav { display: none; }
  .wx-layout.open .wx-nav { display: block; max-height: 75vh; overflow: auto; }
  .wx-nav a { padding: .65rem .6rem; }
  .wx-nav li ul, .wx-nav li ul li ul { position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; background: transparent; min-width: 0; }
  .wx-nav li:hover > ul, .wx-nav li:focus-within > ul { display: none; }
  .wx-nav li.open > ul { display: block; }
  .wx-nav li.sub > a::after { content: "\25BE"; }
  .wx-nav li.open > a::after { content: "\25B4"; }
}
@media (max-width: 420px) {
  .wx-bigrow { gap: 14px; }
  .wx-thermo img { height: 108px; }
  .wx-fc { flex-direction: column; gap: 8px; }
  .wx-fc-icon { flex-basis: auto; text-align: left; }
}

/* air card layout per container width (must stay last) */
@container dash (min-width: 560px) and (max-width: 859px) {
  .wx-air { grid-column: 1 / -1; }
  .wx-airbody { display: flex; align-items: center; gap: 24px; }
  .wx-airhead { flex: 0 0 210px; margin-bottom: 0; }
  .wx-airtable { flex: 1 1 auto; }
}
@container dash (min-width: 860px) {
  .wx-forecast-w { grid-column: span 3; }
}