/* winterstormwarning.com: stylesheet for the home page (index.html) and the alert page (alert.html).
   Plain CSS: no framework, no web fonts, no preprocessor. Sizes are in rem/em and scale smoothly
   with clamp(); grids reflow with auto-fit, so there are only a few layout breakpoints.
   Both pages use the dark theme via <body class="feed">. Alert types are colour-coded with the
   classes t-wsw, t-bzw, ... listed in docs/UI-SPEC.md. */

/* 1. Tokens (light values; body.feed switches both pages to the dark theme, section 8) ---- */

:root {
  color-scheme: light dark;

  --paper: #F7F8FA;
  --paper-2: #ECEFF4;
  --paper-3: #E1E6ED;
  --card: #FFFFFF;
  --feed-bg: #ECEFF4;
  --town: #ECEFF4;
  --ink: #0E1A2B;
  --ink-2: #465265;
  --link: #0E1A2B;
  --focus: #1F5FBF;
  --button: #0E1A2B;
  --button-ink: #F7F8FA;

  --track: #D5DCE6;
  --snow: #4E6FA8;
  --day: #F1DC9C;
  --night: #27324A;

  /* Tints: backgrounds of the big band on a warning page. Always dark text on them. */
  --tint-wsw: #F9DCE9;
  --tint-bzw: #FBDFD2;
  --tint-isw: #EADFF6;
  --tint-lew: #D6EFEC;
  --tint-sqw: #F5D8E6;
  --tint-wsa: #DBE7F4;
  --tint-eca: #D8EDED;
  --tint-ecw: #DCE3FA;
  --tint-wwy: #E5E2FB;
  --tint-cwy: #DDF3F1;
  --tint-ended: #E6E9EE;

  /* Marks: small swatches, bars and map shapes. Stronger so they read on paper. */
  --mark-wsw: #C4508A;
  --mark-bzw: #C2621F;
  --mark-isw: #8A5BC6;
  --mark-lew: #2B8A82;
  --mark-sqw: #B8457E;
  --mark-wsa: #3C71AE;
  --mark-eca: #3A8A8C;
  --mark-ecw: #3F5FD0;
  --mark-wwy: #7068CC;
  --mark-cwy: #3B9A96;
  --mark-ended: #7A8594;

  /* Fluid sizes. Each clamp() reads: never smaller than the first value,
     never larger than the last, and in between it grows with the window width. */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-h1: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --fs-h1-big: clamp(2rem, 1.3rem + 3.5vw, 3.25rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --pad: clamp(1rem, 0.6rem + 2vw, 2rem);
  --space-s: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --space-m: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  --space-l: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --row-gap: clamp(0.75rem, 0.5rem + 0.75vw, 1.125rem);
  --cell-y: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  --cell-x: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);

  --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0C1320;
    --paper-2: #141D2E;
    --paper-3: #1C2740;
    --card: #172133;
    --feed-bg: #0C1320;
    --town: #243150;
    --ink: #E9EEF5;
    --ink-2: #A9B4C4;
    --link: #E9EEF5;
    --focus: #8DB6F2;
    --button: #E9EEF5;
    --button-ink: #0C1320;

    --track: #27324A;
    --snow: #93B1E6;
    --day: #CDB56B;
    --night: #34405C;

    --tint-wsw: #3A2233;
    --tint-bzw: #3D2A20;
    --tint-isw: #2F2542;
    --tint-lew: #183532;
    --tint-sqw: #3A2132;
    --tint-wsa: #1C2D44;
    --tint-eca: #1B3536;
    --tint-ecw: #1F2A4D;
    --tint-wwy: #29264A;
    --tint-cwy: #1B3634;
    --tint-ended: #222A37;

    --mark-wsw: #D174A8;
    --mark-bzw: #D08A4E;
    --mark-isw: #A889DA;
    --mark-lew: #4FB0A7;
    --mark-sqw: #CC6FA0;
    --mark-wsa: #6E9BD6;
    --mark-eca: #5DB0B1;
    --mark-ecw: #7B93E8;
    --mark-wwy: #8C85E0;
    --mark-cwy: #5FBDB8;
    --mark-ended: #8B96A6;
  }
}

/* One class per alert type sets its tint and mark. */

.t-wsw { --tint: var(--tint-wsw); --mark: var(--mark-wsw); }

.t-bzw { --tint: var(--tint-bzw); --mark: var(--mark-bzw); }

.t-isw { --tint: var(--tint-isw); --mark: var(--mark-isw); }

.t-lew { --tint: var(--tint-lew); --mark: var(--mark-lew); }

.t-sqw { --tint: var(--tint-sqw); --mark: var(--mark-sqw); }

.t-wsa { --tint: var(--tint-wsa); --mark: var(--mark-wsa); }

.t-eca { --tint: var(--tint-eca); --mark: var(--mark-eca); }

.t-ecw { --tint: var(--tint-ecw); --mark: var(--mark-ecw); }

.t-wwy { --tint: var(--tint-wwy); --mark: var(--mark-wwy); }

.t-cwy { --tint: var(--tint-cwy); --mark: var(--mark-cwy); }

.t-ended { --tint: var(--tint-ended); --mark: var(--mark-ended); }

/* 2. Base elements ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
}

p,
ul,
ol,
dl {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

:focus-visible {
  outline: 0.1875rem solid var(--focus);
  outline-offset: 0.125rem;
}

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: -100rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
}

.skip:focus { left: 0.5rem; }

/* 3. Header, breadcrumbs, footer -------------------------------------------- */

.top {
  padding: 1rem 0;
}

.top .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.name svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding: 0;
  list-style: none;
}

.menu a {
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
}

.menu a:hover { color: var(--ink); }

.menu a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.45em;
}

.foot {
  margin-top: 4rem;
  padding: 2.5rem 0 3rem;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 0;
  list-style: none;
}

.foot p + p { margin-top: 0.5rem; }

/* Small links under the notes: privacy policy, terms, ... (page manager "Show in the footer"). */
.foot .foot-legal { margin: 1.25rem 0 0; font-size: 0.875rem; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
}

.crumbs a { color: var(--ink-2); }

/* 4. Small tags ------------------------------------------------------------- */

.mine {
  padding: 0 0.5rem;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

/* 5. Buttons and forms ------------------------------------------------------ */

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

input,
select,
button {
  font: inherit;
}

input[type="text"],
select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

button {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--button);
  color: var(--button-ink);
  font-weight: 700;
  line-height: 1.75rem;
  text-decoration: none;
  cursor: pointer;
}

.form {
  display: grid;
  gap: 0.875rem;
  margin-top: 1rem;
}

/* 6. Home page: filters, saved places, alert cards -------------------------- */

/* Square everything. Cards are powdered pastels with dark text in both themes. */

:root {
  --card-wsw: #F3DAE4;
  --card-bzw: #F5DFD4;
  --card-isw: #E5DDF0;
  --card-lew: #D6EAE6;
  --card-sqw: #F0D7E3;
  --card-ecw: #DCE2F4;
  --card-wsa: #DAE4EF;
  --card-eca: #D7E9E9;
  --card-wwy: #E2DFF2;
  --card-cwy: #DBEDEB;
  --card-ended: #E4E7EB;
  --card-ink: #0E1A2B;
  --card-ink-2: #3E4A5C;
  --chip: #FFFFFF;
  --feed-bg: #F4F5F7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chip: #1C2740;
    --feed-bg: #0C1320;
  }
}

.t-wsw { --card: var(--card-wsw); }

.t-bzw { --card: var(--card-bzw); }

.t-isw { --card: var(--card-isw); }

.t-lew { --card: var(--card-lew); }

.t-sqw { --card: var(--card-sqw); }

.t-ecw { --card: var(--card-ecw); }

.t-wsa { --card: var(--card-wsa); }

.t-eca { --card: var(--card-eca); }

.t-wwy { --card: var(--card-wwy); }

.t-cwy { --card: var(--card-cwy); }

.t-ended { --card: var(--card-ended); }

.feed { background: var(--feed-bg); }

.wrap--wide { max-width: 76rem; }

.feed-head { padding-top: var(--space-s); }

.feed-head h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
}

.feed-head .lead {
  margin-top: 0.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.filter-row { margin-top: var(--space-s); }

.filter-label {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--chip);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { text-decoration: underline; }

.chip .n {
  color: var(--ink-2);
  font-weight: 400;
}

.chip[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
}

.chip[aria-current="true"] .n { color: var(--paper-3); }

.more-toggle > summary,
.add-place > summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
  cursor: pointer;
  list-style: none;
}

.more-toggle[open],
.add-place[open] { flex-basis: 100%; }

.more-toggle[open] > summary,
.add-place[open] > summary { margin-bottom: 0.375rem; }

.saved {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-left: 0.75rem;
  background: var(--chip);
  font-size: 0.9375rem;
  font-weight: 600;
}

.saved a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.saved a:hover { text-decoration: underline; }

.saved form { margin: 0; }

.saved .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-height: 2.25rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.saved .x:hover {
  background: var(--paper-3);
  color: var(--ink);
  text-decoration: none;
}

.add-place .form {
  max-width: 28rem;
  margin-top: 0;
  padding: 1rem;
  background: var(--chip);
}

.add-place input[type="text"],
.add-place select { background: var(--feed-bg); }

/* Alert cards: each whole card is one link. */

.acards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.75rem;
  margin-top: var(--space-m);
  padding: 0;
  list-style: none;
}

.acard {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: 100%;
  padding: 1rem;
  background: var(--card);
  color: var(--card-ink);
  text-decoration: none;
}

.acard:hover .acard-title { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }

.acard-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.acard-title {
  font-size: 1.25rem;
  line-height: 1.25;
}

.badge-sev {
  flex: none;
  padding: 0.125rem 0.5rem;
  background: #FFFFFF;
  color: var(--card-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.badge-sev.extreme {
  background: var(--card-ink);
  color: #FFFFFF;
}

.acard-summary { font-size: 1rem; }

.towns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}

.towns li {
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.towns li.mine {
  background: var(--card-ink);
  color: #FFFFFF;
}

.dates {
  display: grid;
  gap: 0.125rem;
  margin-top: auto;
  font-size: 0.9375rem;
}

.dates div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.75rem;
}

.dates dt { color: var(--card-ink-2); }

.dates dd { margin: 0; }

.feed-foot { margin-top: var(--space-m); }

/* 7. Alert page ------------------------------------------------------------- */

.sp-crumbs { padding-top: 0.5rem; }

.sp-hero {
  margin-top: 0.75rem;
  padding: var(--pad);
  background: var(--card);
  color: var(--card-ink);
}

.sp-hero .acard-top { align-items: center; }

.sp-hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.sp-hero .badge-sev { font-size: 0.9375rem; padding: 0.25rem 0.625rem; }

.sp-summary {
  margin-top: 0.75rem;
  font-size: 1.1875rem;
  line-height: 1.45;
}

.sp-headline {
  margin-top: 0.5rem;
  color: var(--card-ink-2);
  font-size: 0.9375rem;
}

.sp-clock { margin-top: 1.5rem; }

.sp-left {
  font-size: 1.375rem;
  font-weight: 700;
}

.sp-track {
  height: 0.75rem;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.7);
}

.sp-track > span {
  display: block;
  height: 100%;
  background: var(--card-ink);
}

.sp-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.sp-ends > span:last-child { text-align: right; }

.sp-ends b { display: block; }

.sp-hero .dates { margin-top: 1.25rem; }

.sp-places { margin-top: 1.25rem; }

.sp-places h2 {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

/* Sections below the hero sit on plain square panels. */

.sp-section { margin-top: var(--space-s); }

.sp-section > h2 {
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
}

.sp-note {
  margin-top: 0.625rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Key numbers */

.sp-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.375rem;
  margin: 0;
}

.sp-figures div {
  padding: 0.875rem 1rem;
  background: var(--chip);
}

.sp-figures dt {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.sp-figures dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.sp-figures dd small {
  display: block;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 400;
}

/* Map key: coloured squares with words */

.sp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.625rem;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.sp-legend li { display: flex; align-items: center; gap: 0.5rem; }

.sp-sw {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
}

/* When to drive */

.sp-drive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.375rem;
  padding: 0;
  list-style: none;
}

.sp-drive li {
  padding: 1rem;
  background: var(--card);
  color: var(--card-ink);
}

.sp-drive .label {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  background: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 700;
}

.sp-drive .span {
  margin-top: 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.sp-drive .why { margin-top: 0.25rem; color: var(--card-ink-2); }

/* (The "Daylight in {town}" table was removed by the owner on 2026-10-11.) */

/* Map */

.sp-map { margin: 0; padding: 1rem; background: var(--chip); }

.sp-map svg { width: 100%; max-width: 36rem; margin: 0 auto; }

.sp-map .land { fill: var(--sp-land); }

.sp-map .zone { stroke: var(--chip); stroke-width: 2; }

.sp-map .z-wsw { fill: var(--mark-wsw); }

.sp-map .z-bzw { fill: var(--mark-bzw); }

.sp-map .z-wwy { fill: var(--mark-wwy); }

.sp-map .town { fill: var(--ink); stroke: var(--chip); stroke-width: 2; }

.sp-map .you { fill: var(--ink); stroke: var(--chip); stroke-width: 3; }

.sp-map text { fill: var(--ink); font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; }

.sp-map text.halo { fill: var(--chip); stroke: var(--chip); stroke-width: 0.25em; stroke-linejoin: round; }

.sp-map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.sp-map-key li { display: flex; align-items: center; gap: 0.5rem; }

.sp-map-key .k-wsw { background: var(--mark-wsw); }

.sp-map-key .k-bzw { background: var(--mark-bzw); }

.sp-map-key .k-wwy { background: var(--mark-wwy); }

.sp-map-key .k-you { background: var(--ink); }

.sp-map figcaption { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.9375rem; }

/* Lists and text */

.sp-nws { margin: 0; padding: 1rem; background: var(--chip); }

.sp-nws dt { font-weight: 700; }

.sp-nws dd { margin: 0 0 0.875rem; }

.sp-nws dd:last-child { margin-bottom: 0; }

/* Updates timeline: day and clock on the left, then a dot on a line, then what changed.
   The newest update (first in the list) gets a filled dot. */

.sp-history {
  margin: 0;
  padding: 0.25rem 1rem;
  list-style: none;
  background: var(--chip);
}

.sp-history li {
  display: grid;
  grid-template-columns: 6.75rem 1fr;
  column-gap: 0.75rem;
}

@media (min-width: 40rem) {
  .sp-history li { grid-template-columns: 9.5rem 1fr; column-gap: 1rem; }
}

.sp-history .sp-when-col {
  padding: 0.75rem 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.sp-history .sp-when-col b { display: block; color: var(--ink-head, var(--ink)); font-weight: 600; }

.sp-history .sp-what {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  line-height: 1.5rem;
}

/* The line: runs through every row, starting at the first dot and stopping at the last one. */
.sp-history .sp-what::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--track);
}

.sp-history li:first-child .sp-what::after { top: 1.5rem; }

.sp-history li:last-child .sp-what::after { bottom: auto; height: 1.5rem; }

.sp-history li:only-child .sp-what::after { display: none; }

/* The dot, centred on the line and on the first line of text. */
.sp-history .sp-what::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(1.5rem - 6px);
  left: -5px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink-2);
  border-radius: 50%;
  background: var(--chip);
}

.sp-history li:first-child .sp-what::before {
  border-color: var(--accent, var(--ink));
  background: var(--accent, var(--ink));
}

.sp-history .sp-ago {
  display: block;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:root {
  --sp-land: #EEF0F4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sp-land: #243150;
  }
}

.acards--flush { margin-top: 0; }

/* 8. Dark theme for both pages (colours sampled from the reference screenshot) ---- */

/* Taken from the reference screenshot: near-black page, charcoal panels,
   soft gray text, one blue accent, green and red for good and bad.
   Blue fills that carry white text use one shade deeper (#2F74DB) so the text
   clears 4.5:1; the exact screenshot blue (#418AF4) is kept for bars and marks. */

.feed {
  color-scheme: dark;

  --paper: #161617;
  --paper-2: #1B1B1C;
  --paper-3: #2C2C2C;
  --ink: #C9CCCF;
  --ink-head: #E4E6E9;
  --ink-2: #969C9D;
  --link: #5B9BF6;
  --focus: #5B9BF6;
  --accent: #418AF4;
  --accent-fill: #2F74DB;
  --good: #33A03E;
  --bad: #FC5B6B;
  --warn: #F0B04F;
  --button: #2F74DB;
  --button-ink: #FFFFFF;

  --chip: #232324;
  --raised: #2C2C2C;
  --hover: #444445;
  --feed-bg: #161617;
  --track: #444445;
  --snow: #418AF4;
  --sp-land: #2C2C2C;

  --mark-wsw: #D174A8;
  --mark-bzw: #D08A4E;
  --mark-wwy: #8C85E0;

  /* Colours that used to be typed into the rules below; as variables the admin Theme screen can change them. */
  --accent-ink: #FFFFFF;
  --on-color: #161617;
  --dark-row: #1B1B1C;
  --tag-warn: #F3B8CF;

  --strip-wsw: #F3B8CF;
  --strip-bzw: #F4C3A8;
  --strip-isw: #CDB8EC;
  --strip-lew: #A9DDD4;
  --strip-sqw: #EFB0CC;
  --strip-ecw: #B6C4F2;
  --strip-wsa: #B3CBE6;
  --strip-eca: #ABDADA;
  --strip-wwy: #C6BFF0;
  --strip-cwy: #B0E2DD;

  /* Map background (section 15): land outside the US, sea, lakes and rivers, Interstates, US highways,
     state borders (and coastlines: a state's outline follows its coast), the US border with Canada and Mexico. */
  --map-outside: #1E1E1F;
  --map-ocean: #0E1F31;
  --map-water: #2D5B82;
  --map-interstate: #D6B35A;
  --map-road: #C9CCCF;
  --map-border: #7E8CA3;
  --map-nation: #B8C3D3;

  background: var(--feed-bg);
  color: var(--ink);
}

/* Strip color per alert type: powdered pastels, shown as a thin band on top. */

.feed .t-wsw { --strip: var(--strip-wsw); }

.feed .t-bzw { --strip: var(--strip-bzw); }

.feed .t-isw { --strip: var(--strip-isw); }

.feed .t-lew { --strip: var(--strip-lew); }

.feed .t-sqw { --strip: var(--strip-sqw); }

.feed .t-ecw { --strip: var(--strip-ecw); }

.feed .t-wsa { --strip: var(--strip-wsa); }

.feed .t-eca { --strip: var(--strip-eca); }

.feed .t-wwy { --strip: var(--strip-wwy); }

.feed .t-cwy { --strip: var(--strip-cwy); }

.feed h1,
.feed h2,
.feed h3 { color: var(--ink-head); }

.feed a { color: var(--link); }

/* Header bar */

.feed .top { background: var(--chip); }

.feed .name { color: var(--ink-head); }

.feed .menu a { color: var(--ink-2); }

.feed .menu a:hover,
.feed .menu a[aria-current="page"] { color: var(--ink-head); }

.feed .menu a[aria-current="page"] { text-decoration-color: var(--accent); }

.feed .crumbs a { color: var(--ink-2); }

.feed .feed-head .lead { color: var(--ink-2); }

.feed .filter-label { color: var(--ink-head); }

/* Pills */

.feed .chip {
  background: var(--chip);
  color: var(--ink);
}

.feed .chip:hover {
  background: var(--raised);
  text-decoration: none;
}

.feed .chip .n { color: var(--ink-2); }

.feed .chip[aria-current="true"] {
  background: var(--accent-fill);
  color: var(--accent-ink);
}

.feed .chip[aria-current="true"] .n { color: var(--accent-ink); }

.feed .more-toggle > summary,
.feed .add-place > summary { color: var(--link); }

.feed .saved { background: var(--chip); }

.feed .saved a { color: var(--ink); }

.feed .saved .x { color: var(--ink-2); }

.feed .saved .x:hover { background: var(--hover); color: var(--ink-head); }

.feed .add-place .form { background: var(--chip); }

.feed input[type="text"],
.feed select {
  background: var(--raised);
  color: var(--ink-head);
}

.feed label { color: var(--ink-head); }

/* Alert cards: charcoal panel, pastel band on top */

.feed .acard {
  position: relative;
  padding-top: 1.25rem;
  background: var(--chip);
  color: var(--ink);
}

.feed .acard::before,
.feed .sp-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.25rem;
  background: var(--strip, var(--ink-2));
}

.feed .acard:hover { background: var(--raised); }

.feed .acard-title { color: var(--ink-head); }

/* Severity: red, amber, neutral. Dark text on the colored ones. */

.feed .badge-sev {
  background: var(--warn);
  color: var(--on-color);
}

.feed .badge-sev.extreme {
  background: var(--bad);
  color: var(--on-color);
}

.feed .badge-sev.moderate {
  background: var(--hover);
  color: var(--ink-head);
}

.feed .towns li {
  background: var(--raised);
  color: var(--ink);
}

.feed .acard:hover .towns li { background: var(--hover); }

.feed .towns li.mine,
.feed .acard:hover .towns li.mine {
  background: var(--accent-fill);
  color: var(--accent-ink);
}

.feed .dates dt { color: var(--ink-2); }

/* Single alert page */

.feed .sp-hero {
  position: relative;
  padding-top: calc(var(--pad) + 0.25rem);
  background: var(--chip);
  color: var(--ink);
}

.feed .sp-headline { color: var(--ink-2); }

.feed .sp-left { color: var(--ink-head); }

.feed .sp-track { background: var(--hover); }

.feed .sp-track > span { background: var(--accent); }

.feed .sp-ends b { color: var(--ink-head); }

.feed .sp-places h2 { color: var(--ink-head); }

.feed .sp-figures div,
.feed .sp-map,
.feed .sp-nws,
.feed .sp-history { background: var(--chip); }

.feed .sp-figures dt,
.feed .sp-figures dd small,
.feed .sp-note,
.feed .sp-legend,
.feed .sp-history time,
.feed .sp-map figcaption { color: var(--ink-2); }

.feed .sp-figures dd,
.feed .sp-nws dt { color: var(--ink-head); }

.feed .sp-drive li {
  background: var(--chip);
  color: var(--ink);
}

.feed .sp-drive .span { color: var(--ink-head); }

.feed .sp-drive .why { color: var(--ink-2); }

.feed .sp-drive .t-wsw .label { background: var(--bad); color: var(--on-color); }

.feed .sp-drive .t-lew .label { background: var(--good); color: var(--on-color); }

.feed .sp-map .land { fill: var(--sp-land); }

.feed .sp-map .zone { stroke: var(--chip); }

.feed .sp-map .town,
.feed .sp-map .you { fill: var(--ink-head); stroke: var(--chip); }

.feed .sp-map text { fill: var(--ink-head); }

.feed .sp-map text.halo { fill: var(--chip); stroke: var(--chip); }

.feed .sp-map-key { color: var(--ink); }

.feed .sp-map-key .k-you { background: var(--ink-head); }

/* Footer */

.feed .foot {
  background: var(--chip);
  color: var(--ink-2);
}

.feed .foot a { color: var(--ink); }

/* 9. Home page alert table -------------------------------------------------- */

/* Wide screens: a real table. Narrow screens: each row becomes a labeled block. */

.atable-wrap { margin-top: var(--space-l); }

.atable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--row-gap);
  background: transparent;
  font-size: 0.9375rem;
}

/* Column names stay in the markup for screen readers but are not shown. */

.atable thead {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.atable tbody,
.atable tr,
.atable th,
.atable td { display: block; }

.atable tr {
  position: relative;
  margin-bottom: var(--row-gap);
  padding: var(--cell-y) var(--cell-x);
  background: var(--chip);
}

.atable tr:hover { background: var(--raised); }

.atable th[scope="row"] {
  padding: 0 0 1rem;
  text-align: left;
}

.atable td {
  display: inline-block;
  margin-right: 1rem;
  padding: 0 0 0.75rem;
  vertical-align: middle;
}

/* The towns: their own strip at the bottom of the card, under a thin line. */
.atable td[data-label="Places"] {
  display: block;
  margin-right: 0;
  padding: 1rem 0 0;
  border-top: 0.0625rem solid var(--hover, var(--paper-3));
}

.atable th a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

/* The link covers the whole row. */

.atable th a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.atable th a:focus-visible { outline: none; }

.atable th a:focus-visible::after { outline: 0.1875rem solid var(--focus); outline-offset: -0.1875rem; }

.atable tr:hover th a { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }

.at-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* Shown only when an alert changed after it was first issued. */

.at-upd {
  position: relative;
  z-index: 1;
  padding: 0.0625rem 0.5rem;
  background: var(--accent-fill);
  color: var(--accent-ink, #FFFFFF);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.at-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  background: var(--strip, var(--ink-2));
}

.at-sub {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink);
  font-weight: 400;
}

.atable td .at-sub { color: var(--ink-2); font-size: 0.875rem; }

.atable .badge-sev { justify-self: start; }

.atable .towns { gap: 0.375rem; }

.atable .towns li { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }

.atable tr:hover .towns li { background: var(--hover); }

.atable tr:hover .towns li.mine { background: var(--accent-fill); }

/* Wide screens: each row is a card in two parts. On top: the alert on the left, state and severity
   on the right (same widths on every card, so they line up). Below: every town, across the full width. */
@media (min-width: 64em) {
  .atable tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem 7rem;
    grid-template-areas:
      "alert state severity"
      "places places places";
    column-gap: 1.5rem;
    align-items: start;
  }

  /* The alert cell spans the whole top row, so its summary and dates use the full width (owner's request 2026-10-11).
     State and severity sit on top of it at the right; the name line stops before them (padding = both
     columns + both gaps: 11rem + 7rem + 2 x 1.5rem), so they never overlap. */
  .atable th[scope="row"] { grid-column: 1 / -1; grid-row: 1; }

  .atable th[scope="row"] .at-head { padding-right: 21rem; }

  /* The "no alerts" row has a single cell: it takes the whole card. */
  .atable th[colspan] { grid-column: 1 / -1; }

  .atable td[data-label="State"] { grid-column: 2; grid-row: 1; margin: 0; }

  .atable td[data-label="Severity"] { grid-column: 3; grid-row: 1; margin: 0; white-space: nowrap; }

  .atable td[data-label="Places"] { grid-area: places; }

  .atable th a { font-size: 1rem; }
}

/* Time block under the alert name: status, progress, the two ends, then updates. */

/* Issued and expires on one compact line, in a slim strip. */

.at-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--raised);
  font-size: 0.875rem;
  font-weight: 400;
}

.atable tr:hover .at-dates { background: var(--hover); }

.at-dates div {
  display: flex;
  gap: 0.375rem;
  white-space: nowrap;
}

.at-dates dt { color: var(--ink-2); }

.at-dates dd {
  margin: 0;
  color: var(--ink-head);
  font-weight: 700;
}

/* 10. Saved places and hearts ----------------------------------------------- */

/* The icon sheet is kept off screen; hearts reference it with <use>. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.atable .towns li {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding-left: 0.125rem;
}

/* Heart button: sits above the row link so it can be tapped on its own. */

.heart {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  line-height: 1;
  cursor: pointer;
}

.heart:hover {
  color: var(--bad);
  text-decoration: none;
}

.heart svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.heart[aria-pressed="true"] { color: var(--bad); }

.heart[aria-pressed="true"] svg { fill: currentColor; }

/* On a saved (blue) pill the heart is white. */

.towns li.mine .heart,
.towns li.mine .heart:hover { color: var(--accent-ink, #FFFFFF); }

.heart:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0;
}


/* 11. Owner forms (installer, admin panel) ----------------------------------- */

/* Same look as the "Add place" form: a card with the page's input style. */

.panel-form {
  max-width: 28rem;
  padding: 1rem;
  background: var(--chip);
}

.panel-form input[type="text"],
.panel-form input[type="password"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: var(--raised);
  color: var(--ink-head);
}

.panel-form small {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-2);
}

.panel-form input:focus-visible,
.panel-form button:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0;
}

.notice {
  max-width: 40rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--chip);
  color: var(--ink);
  border-left: 0.25rem solid var(--ink-2);
}

.notice p,
.notice ul { margin: 0; }

.notice ul { padding-left: 1.25rem; }

.notice--good { border-left-color: var(--good); }

.notice--bad { border-left-color: var(--bad); }

/* 12. Map colours for every alert type (the design only drew wsw, bzw and wwy) ---------- */

.sp-map .z-isw { fill: var(--mark-isw); }

.sp-map .z-lew { fill: var(--mark-lew); }

.sp-map .z-sqw { fill: var(--mark-sqw); }

.sp-map .z-wsa { fill: var(--mark-wsa); }

.sp-map .z-eca { fill: var(--mark-eca); }

.sp-map .z-ecw { fill: var(--mark-ecw); }

.sp-map .z-cwy { fill: var(--mark-cwy); }

.sp-map-key .k-isw { background: var(--mark-isw); }

.sp-map-key .k-lew { background: var(--mark-lew); }

.sp-map-key .k-sqw { background: var(--mark-sqw); }

.sp-map-key .k-wsa { background: var(--mark-wsa); }

.sp-map-key .k-eca { background: var(--mark-eca); }

.sp-map-key .k-ecw { background: var(--mark-ecw); }

.sp-map-key .k-cwy { background: var(--mark-cwy); }


/* 13. Contact form fields and written pages (same tokens as the forms above) ----- */

.panel-form input[type="email"],
.panel-form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: var(--raised);
  color: var(--ink-head);
  font: inherit;
}

.panel-form textarea { min-height: 10rem; resize: vertical; }

.page-text { max-width: 42rem; margin-top: 1rem; color: var(--ink); }

.page-text h2 { margin: 1.75rem 0 0.5rem; color: var(--ink-head); }

.page-text p,
.page-text ul { margin: 0 0 1rem; }

.page-text ul { padding-left: 1.25rem; }

/* 14. (Snow chart - removed by the owner on 2026-10-08.) ---- */

/* 15. Alert map with its background (drawn by app/geo/map.php) --------------------- */

/* Layers from the bottom: outside the US, states (the page's state brighter), lakes, other alerts,
   this alert, state borders, highways, squall arrow, then labels with a halo.
   The map fits any width, so the page never scrolls sideways. The shapes simply get smaller with
   the box; the words, dots, signs, arrow and scale bar come in four sets (one per box width, made
   by map_sets() in app/geo/map.php) and the box shows the one that fits. --f says how much bigger
   than on a wide screen the words and lines are drawn, so they stay readable when the map shrinks. */

.feed .sp-map { container: map / inline-size; }

.feed .sp-map svg {
  --f: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 8 / 5;
}

/* The background is the sea; other countries' land is painted over it (Stage 20). */
.feed .sp-map .m-out { fill: var(--map-ocean, #0E1F31); }

.feed .sp-map .m-foreign { fill: var(--map-outside, #1E1E1F); }

/* Other states: 60 % of the land colour on the outside-land grey, as one solid colour (the sea must not
   show through). Browsers without color-mix() use the land colour itself. */
.feed .sp-map .m-land { fill: var(--sp-land); fill: color-mix(in srgb, var(--sp-land) 60%, var(--map-outside, #1E1E1F)); }

.feed .sp-map .m-home { fill: var(--sp-land); }

.feed .sp-map .m-water { fill: var(--map-water, #2D5B82); }

.feed .sp-map .m-river {
  fill: none;
  stroke: var(--map-water, #2D5B82);
  stroke-width: calc(1px * var(--f));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed .sp-map .m-river-big { stroke-width: calc(2px * var(--f)); }

.feed .sp-map .zone { stroke-width: calc(2px * var(--f)); }

.feed .sp-map .m-other { fill-opacity: 0.45; stroke: none; }

.feed .sp-map .m-faint { fill-opacity: 0.3; stroke: none; }

.feed .sp-map .m-this { fill-opacity: 0.85; }

.feed .sp-map .m-drawn { stroke: var(--ink-head); stroke-width: calc(3px * var(--f)); stroke-linejoin: round; }

/* State borders (and coastlines), US highways (grey-white) and Interstates (gold, wider): Stage 21. */
.feed .sp-map .m-border {
  fill: none;
  stroke: var(--map-border, #7E8CA3);
  stroke-width: calc(1px * var(--f));
  stroke-linejoin: round;
}

/* The US border with Canada and Mexico: wider, lighter and dashed, drawn over the state borders. */
.feed .sp-map .m-nation {
  fill: none;
  stroke: var(--map-nation, #B8C3D3);
  stroke-width: calc(2.5px * var(--f));
  stroke-dasharray: calc(9px * var(--f)) calc(5px * var(--f));
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.feed .sp-map .m-road {
  fill: none;
  stroke: var(--map-road, #C9CCCF);
  stroke-width: calc(1.3px * var(--f));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed .sp-map .m-interstate { stroke: var(--map-interstate, #D6B35A); stroke-width: calc(2.2px * var(--f)); }

.feed .sp-map .m-arrow { fill: none; stroke: var(--ink-head); stroke-width: calc(4px * var(--f)); stroke-linecap: round; }

.feed .sp-map .m-arrow-head { fill: var(--ink-head); }

.feed .sp-map .m-sign { fill: var(--chip); stroke: var(--map-road, #C9CCCF); stroke-width: calc(1.2px * var(--f)); }

.feed .sp-map .m-sign-i { stroke: var(--map-interstate, #D6B35A); }

.feed .sp-map .town { stroke-width: calc(2px * var(--f)); }

.feed .sp-map .you { stroke-width: calc(3px * var(--f)); }

/* Text sizes are in drawing units (the drawing is 800 wide); app/geo/map.php spaces the labels for them. */

.feed .sp-map text { font-size: calc(18px * var(--f)); }

.feed .sp-map .m-sign-text { fill: var(--ink-head); font-size: calc(14px * var(--f)); }

.feed .sp-map .m-state-name { fill: var(--ink-2); font-size: calc(16px * var(--f)); font-weight: 600; letter-spacing: 0.12em; }

.feed .sp-map .m-lake-name { fill: var(--ink-2); font-size: calc(15px * var(--f)); font-weight: 600; font-style: italic; }

.feed .sp-map .m-arrow-text { font-size: calc(16px * var(--f)); }

.feed .sp-map .m-scale { fill: none; stroke: var(--ink-2); stroke-width: calc(2px * var(--f)); }

.feed .sp-map .m-scale-text { fill: var(--ink-2); font-size: calc(15px * var(--f)); }

.feed .sp-map-key .k-drawn { background: transparent; outline: 0.1875rem solid var(--ink-head); outline-offset: -0.1875rem; }

.feed .sp-map-key .k-road { height: 0.1875rem; background: var(--map-road, #C9CCCF); }

.feed .sp-map-key .k-interstate { height: 0.25rem; background: var(--map-interstate, #D6B35A); }

.feed .sp-map-key .k-nation { height: 0; border-top: 0.1875rem dashed var(--map-nation, #B8C3D3); background: transparent; }

.feed .sp-map-key .k-arrow { height: 0.25rem; background: var(--ink-head); }

/* Key items only for phones (the squall's speed and direction, which wider maps write next to the arrow). */

.feed .sp-map-key .k-phone { display: none; }

/* One label set per box width (names and sizes as in map_sets()). Wide boxes: set l.
   Under 30rem (phones) the box gets the 4:3 shape and shows the middle of the picture. */

.feed .sp-map .m-set-m,
.feed .sp-map .m-set-s,
.feed .sp-map .m-set-xs { display: none; }

@container map (width < 40rem) {
  .feed .sp-map svg { --f: 1.25; }
  .feed .sp-map .m-set-l { display: none; }
  .feed .sp-map .m-set-m { display: inline; }
}

@container map (width < 30rem) {
  .feed .sp-map svg { --f: 1.4; aspect-ratio: 4 / 3; }
  .feed .sp-map .m-set-m { display: none; }
  .feed .sp-map .m-set-s { display: inline; }
  .feed .sp-map-key .k-phone { display: flex; }
}

@container map (width < 22rem) {
  .feed .sp-map svg { --f: 2; }
  .feed .sp-map .m-set-s { display: none; }
  .feed .sp-map .m-set-xs { display: inline; }
}

/* 16. Alert rows: "129 places" before the towns and, on archive rows, "and 152 more" after the
   first towns (plain words, not town pills) ---- */
.feed .towns li.towns-count,
.feed .atable tr:hover .towns li.towns-count,
.feed .towns li.towns-more,
.feed .atable tr:hover .towns li.towns-more {
  background: none;
  color: var(--ink-2);
  font-weight: 400;
}

/* 17. Page-number bar under long lists: "First 1 2 3 4 5 Last" (blocks/pager.php; same pills as the locations) ---- */
.pager { margin-top: var(--space-m); }

.pager .bar {
  padding: 0;
  list-style: none;
}

.pager .chip { justify-content: center; min-width: 2.25rem; }

.feed .pager .chip[aria-current="page"] {
  background: var(--accent-fill);
  color: var(--accent-ink);
}

.feed .pager .chip--off,
.feed .pager .chip--off:hover {
  background: none;
  color: var(--ink-2);
  text-decoration: none;
}

/* Small phones: slimmer pills so "First 1 2 3 4 5 Last" stays on one line. */
@media (max-width: 30em) {
  .pager .bar { gap: 0.375rem; }
  .pager .chip { min-width: 2rem; padding: 0.25rem 0.5rem; }
}

/* 18. Town links and town pages (/winter-storm-warning/{town}) ------------------------- */
/* The town name in a pill opens its town page, the state name on a card its state page; like the
   heart they sit above the row's link layer. */
.atable a.state,
.towns a.town {
  position: relative;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

.atable a.state:hover,
.atable a.state:focus-visible,
.towns a.town:hover,
.towns a.town:focus-visible { text-decoration: underline; }

.atable a.state:focus-visible,
.towns a.town:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0.125rem;
}

/* 19. In effect / ended: a word badge next to the alert name, and a band in the type's colour
   down the left side of alerts still in effect (ended ones stay plain grey) ---------------- */
.at-status {
  padding: 0.0625rem 0.5rem;
  background: var(--strip, var(--accent-fill));
  color: var(--on-color, #161617);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.at-status--ended {
  padding: 0 0.4375rem;
  border: 0.0625rem solid var(--ink-2);
  background: none;
  color: var(--ink-2);
}

/* The band sits on the card's left edge, all the way down past the towns (every screen size). */
.atable tr:not(.t-ended) { box-shadow: inset 0.3125rem 0 0 var(--strip, var(--accent-fill)); }

/* 20. Quiet home page (no alert in effect anywhere): the archive button (blocks/home/quiet.php) ---- */
.quiet-cta { margin-top: var(--space-m); }

.quiet-button,
.feed .quiet-button {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  background: var(--accent-fill, var(--button));
  color: var(--accent-ink, var(--button-ink));
  font-weight: 700;
  line-height: 1.75rem;
  text-decoration: none;
}

.quiet-button:hover,
.feed .quiet-button:hover { filter: brightness(1.1); text-decoration: none; }

/* 21. Small state flag in front of a state's name: alert cards and Locations pills (state_flag() in app/helpers/alerts.php) ---- */
.flag {
  display: inline-block;
  width: 1.25rem;
  height: auto;
  margin-right: 0.375rem;
  vertical-align: -0.125em;
  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.15);   /* thin edge, so white flags do not melt into white pills */
}

/* 22. Rankings page per winter season (/rankings; app/views/pages/rankings.php + blocks/rankings/list.php) ----
   Stage 40 (owner's pick 2026-10-12: "D tiles, same as others, no card"): the rankings one under the other,
   full width, without a grey card. Each one: title, grey note, a thin line, then the entries as small square
   tiles side by side (as many per line as fit, one per line on narrow phones). In a tile: the rank on the left;
   name, grey state line and count on the right. Rank 1 looks like the others. A tile with an address
   (class "rank-go") is one big link: the name's link stretches over the whole tile, like the home alert cards. */
.rank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--row-gap);
  margin-top: var(--space-s);
  padding-bottom: var(--space-m);
}

.rank-card { padding: var(--cell-y) 0; }

.rank-card h2 { color: var(--ink-head, var(--ink)); font-size: 1.25rem; }

.rank-note,
.rank-empty { margin-top: 0.25rem; color: var(--ink-2); font-size: 0.875rem; }

/* The thin line between the title and the tiles (or the "None yet" words). */
.rank-list,
.rank-empty { margin-top: 1rem; padding-top: 1rem; border-top: 0.0625rem solid var(--hover, var(--paper-3)); }

.rank-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.375rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.rank-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "n who"
    "n count";
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--raised, var(--chip));
}

.rank-list li.rank-go:hover { background: var(--hover, var(--paper-3)); }

.rank-n { grid-area: n; color: var(--ink-2); font-size: 1.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

.rank-who { grid-area: who; font-weight: 600; overflow-wrap: anywhere; }

.rank-who a { color: var(--ink-head, var(--ink)); text-decoration: none; }

/* The link covers the whole tile. */
.rank-who a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.rank-who a:focus-visible { outline: none; }

.rank-who a:focus-visible::after { outline: 0.1875rem solid var(--focus); outline-offset: -0.1875rem; }

.rank-go:hover .rank-who a { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }

.rank-sub { display: block; color: var(--ink-2); font-size: 0.875rem; font-weight: 400; }

.rank-count { grid-area: count; color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* 23. Bigger text on the home page (owner's request 2026-10-10: every text size + 0.5rem;
   2026-10-11: brought back down by 0.2rem, so now the original + 0.3rem) ----
   The home page's <body> has the extra class "home" (app/views/pages/home.php). Since 2026-10-11 every public page
   has it too (app/views/layout/page-start.php; section 23b below), so the whole site shares these sizes.
   Every rule here starts with .home; a page built with body_class '' keeps the original sizes. Each text size is the original + 0.3rem,
   except the town pills (original size) and the saved-place pills (still original + 0.5rem, owner's choice 2026-10-11);
   the gaps, paddings, icons and fixed widths around the text stay at their +0.5rem sizes, so nothing gets cramped. */

/* Base text (was 1 to 1.125rem), big heading (was 1.75 to 3rem) and the spaces between the parts. */
.home {
  --fs-body: clamp(1.3rem, 1.25rem + 0.25vw, 1.425rem);
  --fs-h1: clamp(2.05rem, 1.55rem + 2.5vw, 3.3rem);
  --space-s: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  --space-m: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --space-l: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --row-gap: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  --cell-y: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --cell-x: clamp(1.25rem, 1rem + 0.75vw, 1.875rem);
}

/* Header: site name and menu. */
.home .top { padding: 1.25rem 0; }

.home .top .wrap { gap: 0.75rem 2rem; }

.home .name { gap: 0.625rem; font-size: 1.425rem; }

.home .name svg { width: 1.625rem; height: 1.625rem; }

.home .menu ul { gap: 0.5rem 1.75rem; }

/* Footer. */
.home .foot { margin-top: 4.5rem; padding: 3rem 0 3.5rem; font-size: 1.2375rem; }

.home .foot ul { gap: 0.75rem 2rem; margin-bottom: 1.75rem; }

.home .foot p + p { margin-top: 0.75rem; }

.home .foot .foot-legal { margin: 1.75rem 0 0; font-size: 1.175rem; }

/* "Checked 5 minutes ago" under the heading. */
.home .feed-head .lead { margin-top: 0.5rem; font-size: 1.2375rem; }

/* Locations pills, saved places and the "Add place" form. */
.home .filter-label { margin-bottom: 1rem; font-size: 1.2375rem; }

.home .bar { gap: 0.75rem; }

.home .chip { gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 1rem; font-size: 1.2375rem; }

.home .flag { width: 1.75rem; margin-right: 0.5rem; }

.home .more-toggle > summary,
.home .add-place > summary { min-height: 2.75rem; padding: 0.375rem 0.75rem; font-size: 1.2375rem; }

.home .more-toggle[open] > summary,
.home .add-place[open] > summary { margin-bottom: 0.5rem; }

.home .saved { min-height: 2.75rem; padding-left: 1rem; font-size: 1.4375rem; }

.home .saved .x { width: 2.75rem; min-height: 2.75rem; margin-left: 0.375rem; font-size: 1.75rem; }

.home .add-place .form { max-width: 36rem; gap: 1.25rem; padding: 1.5rem; }

.home label { margin-bottom: 0.375rem; }

.home input[type="text"],
.home select { min-height: 3.5rem; padding: 0.625rem 1rem; }

.home .add-place .form button { min-height: 3.5rem; padding: 0.625rem 1.5rem; line-height: 2.25rem; }

/* Alert cards (section 9). */
.home .atable { font-size: 1.2375rem; }

.home .atable th[scope="row"] { padding-bottom: 1.25rem; }

.home .atable td { margin-right: 1.5rem; padding-bottom: 1rem; }

.home .atable td[data-label="Places"] { margin-right: 0; padding: 1.25rem 0 0; }

.home .atable th a { gap: 0.75rem; font-size: 1.425rem; }

.home .at-head { gap: 0.625rem 1rem; }

.home .at-dot { width: 1rem; height: 1rem; }

.home .at-status,
.home .at-upd { padding: 0.125rem 0.625rem; font-size: 1.05rem; }

.home .at-status--ended { padding: 0.0625rem 0.5625rem; }

.home .at-sub { margin-top: 0.75rem; }

.home .at-dates { gap: 0.375rem 1.75rem; margin-top: 1.25rem; padding: 0.625rem 1rem; font-size: 1.175rem; }

/* On narrow phones the date may drop under "Expires" instead of running out of the card. */
.home .at-dates div { flex-wrap: wrap; gap: 0 0.5rem; }

.home .badge-sev { padding: 0.1875rem 0.75rem; font-size: 1.1125rem; }

/* The town pills and their hearts keep their original size (owner's choice, 2026-10-10).
   The saved-place pills (.saved and its "×" above) keep their +0.5rem size (owner's choice, 2026-10-11). */

/* Wide screens: wider state and severity columns for the bigger words. */
@media (min-width: 64em) {
  .home .atable tr { grid-template-columns: minmax(0, 1fr) 15rem 9rem; column-gap: 2rem; }

  /* The name line stops before the wider state and severity columns: 15rem + 9rem + 2 x 2rem (section 9). */
  .home .atable th[scope="row"] .at-head { padding-right: 28rem; }

  .home .atable td[data-label="State"],
  .home .atable td[data-label="Severity"] { margin: 0; }

  .home .atable th a { font-size: 1.3rem; }
}

/* The archive button shown when no alert is in effect anywhere. */
.home .quiet-button { min-height: 3.5rem; padding: 0.625rem 1.5rem; line-height: 2.25rem; }

/* 23b. The same sizes on every other public page (owner's request 2026-10-11: "make all of them match").
   Since then every public page has the class "home" (app/views/layout/page-start.php), so the rules above
   already cover the header, footer, pills and alert cards there. The rules below are for the parts only
   those pages have; each text size is again the original + 0.3rem. Map labels inside the map picture and
   the town pills keep their size. */

/* Breadcrumb ("Home / Colorado / Denver") on town, state and alert pages. */
.home .crumbs ol { font-size: 1.2375rem; }

/* Small grey line inside a card's state or severity box. */
.home .atable td .at-sub { font-size: 1.175rem; }

/* Single alert page: the top card. */
.home .sp-hero .badge-sev { padding: 0.25rem 0.625rem; font-size: 1.2375rem; }

.home .sp-summary { font-size: 1.4875rem; }

.home .sp-headline { font-size: 1.2375rem; }

.home .sp-left { font-size: 1.675rem; }

.home .sp-ends { font-size: 1.2375rem; }

.home .dates { font-size: 1.2375rem; }

.home .sp-places h2 { font-size: 1.2375rem; }

/* Single alert page: the sections under the top card. */
.home .sp-section > h2 { font-size: 1.55rem; }

.home .sp-note { font-size: 1.2375rem; }

.home .sp-figures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.home .sp-figures dt { font-size: 1.2375rem; }

.home .sp-figures dd { font-size: 1.8rem; }

.home .sp-figures dd small { font-size: 1.2375rem; }

.home .sp-legend { font-size: 1.2375rem; }

.home .sp-drive .label { font-size: 1.1125rem; }

.home .sp-drive .span { font-size: 1.425rem; }

.home .sp-map-key { font-size: 1.2375rem; }

.home .sp-map figcaption { font-size: 1.2375rem; }

/* "Also in effect" cards at the bottom of an alert page. */
.home .acard-title { font-size: 1.55rem; }

.home .acard-summary { font-size: 1.3rem; }

/* Updates timeline: taller lines for the bigger text, a wider date column, and the dot and line moved
   down to stay in the middle of the first line (0.75rem padding + half of the 2rem line = 1.75rem). */
.home .sp-history li { grid-template-columns: 8.5rem 1fr; }

@media (min-width: 40rem) {
  .home .sp-history li { grid-template-columns: 12rem 1fr; }
}

.home .sp-history .sp-when-col { font-size: 1.2375rem; line-height: 2rem; }

.home .sp-history .sp-what { line-height: 2rem; }

.home .sp-history .sp-what::before { top: calc(1.75rem - 6px); }

.home .sp-history li:first-child .sp-what::after { top: 1.75rem; }

.home .sp-history li:last-child .sp-what::after { height: 1.75rem; }

.home .sp-history .sp-ago { font-size: 1.175rem; line-height: 1.625rem; }

/* Rankings page (Stage 40 tiles): the sizes the owner picked in the demo; the tiles keep a calmer size than
   the other +0.3rem texts so 4 fit side by side on a computer. */
.home .rank-card h2 { font-size: 1.3rem; }

.home .rank-note,
.home .rank-empty { margin-top: 0.5rem; font-size: 1.175rem; }

.home .rank-list,
.home .rank-empty { margin-top: 1.25rem; padding-top: 1.25rem; }

.home .rank-n { font-size: 1.3rem; }

.home .rank-who,
.home .rank-sub { font-size: 1rem; }

/* Contact form: every field and the Send button as tall as the "Add place" form's. */
.home .panel-form input[type="email"],
.home .panel-form textarea { padding: 0.625rem 1rem; }

.home .panel-form input[type="email"] { min-height: 3.5rem; }

.home .panel-form button { min-height: 3.5rem; padding: 0.625rem 1.5rem; line-height: 2.25rem; }