/* One small stylesheet for every page (same-origin, no inline styles, so a
   strict Content-Security-Policy works). */
:root {
  /* Light theme, "linen": parchment, brown-green ink, forest green. */
  --bg: #f4efe4; --card: #fbf8f1; --soft: #ece5d6; --row-alt: #f6f1e7; --line: #e0d7c4;
  --ink: #2a2b20; --muted: #5f5a4a; --faint: #756e5b;
  --leaf: #2f5d3a; --group: #2f5d3a;
  --header-bg: #1f3d2a; --header-ink: #f4efe4;
  --key-bg: #2f5d3a; --key-ink: #fbf8f1; --key-sub: #cfe0c8;
  --btn-bg: #2f5d3a; --btn-ink: #fbf8f1; --btn-hover: #244a2e;
  --input-bg: #fffdf8; --input-border: #d6ccb6; --warn: #9a4a12;
  --indoor: #8e74c4; --outdoor: #4c8a4f; --fall: #c8743a;
  color-scheme: light;
}
/* Dark theme, "forest at night": deep green, warm beige text, wheat accent.
   Used when the device prefers dark (unless the visitor picked light), or
   when the visitor picked dark with the header toggle (theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #13201a; --card: #1b2c23; --soft: #22362b; --row-alt: #1e3127; --line: #2f4537;
  --ink: #ece4d2; --muted: #b5b09c; --faint: #959280;
  --leaf: #a7cf8e; --group: #a7cf8e;
  --header-bg: #0d1712; --header-ink: #ece4d2;
  --key-bg: #d8b36a; --key-ink: #1b2219; --key-sub: #4a3d1f;
  --btn-bg: #8fbf72; --btn-ink: #13201a; --btn-hover: #a6d08b;
  --input-bg: #13201a; --input-border: #3a5242; --warn: #e6a660;
  --indoor: #b7a1e3; --outdoor: #7fbf6e; --fall: #e3a256;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13201a; --card: #1b2c23; --soft: #22362b; --row-alt: #1e3127; --line: #2f4537;
  --ink: #ece4d2; --muted: #b5b09c; --faint: #959280;
  --leaf: #a7cf8e; --group: #a7cf8e;
  --header-bg: #0d1712; --header-ink: #ece4d2;
  --key-bg: #d8b36a; --key-ink: #1b2219; --key-sub: #4a3d1f;
  --btn-bg: #8fbf72; --btn-ink: #13201a; --btn-hover: #a6d08b;
  --input-bg: #13201a; --input-border: #3a5242; --warn: #e6a660;
  --indoor: #b7a1e3; --outdoor: #7fbf6e; --fall: #e3a256;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; transition: background-color .2s, color .2s; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
.wrap { max-width: 50rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-bottom: 3rem; }
a { color: var(--leaf); }

/* Header and footer */
header.site { background: var(--header-bg); }
header.site .wrap { padding-top: .6rem; padding-bottom: .6rem; display: flex; align-items: center; justify-content: space-between; }
.theme-toggle { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .85rem; color: var(--header-ink); background: transparent; border: 1px solid color-mix(in srgb, var(--header-ink) 35%, transparent); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
.theme-toggle:hover { background: color-mix(in srgb, var(--header-ink) 12%, transparent); }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .sun, :root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: inline; }
:root[data-theme="dark"] .theme-toggle svg.sun { display: block; }
.theme-toggle svg.moon { display: block; }
:root[data-theme="dark"] .theme-toggle svg.moon { display: none; }
.brand { color: var(--header-ink); font-weight: 700; text-decoration: none; letter-spacing: .01em; }
footer.site { border-top: 1px solid var(--line); color: var(--faint); font-size: .85rem; }
footer.site .wrap { padding-top: 1.2rem; padding-bottom: 2rem; }
footer.site p { margin: 0 0 .4rem; }
footer.site a { color: var(--muted); }
/* Frost watch (forecast.js) */
.forecast { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .2rem 1rem .6rem; margin-top: 1.4rem; }
.forecast h2 { margin-top: .8rem; }
.fc-summary { font-weight: 600; margin: 0 0 .6rem; }
.fc-summary.frost { color: var(--warn); }
.fc-nights { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; }
.fc-nights li { background: var(--soft); border-radius: 8px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .1rem; border: 1px solid transparent; }
.fc-nights li.frost { border-color: var(--warn); }
.fc-nights li.maybe { border-style: dashed; border-color: var(--warn); }
.fc-name { font-size: .8rem; color: var(--muted); }
.fc-low { font-size: 1.35rem; font-weight: 700; }
.fc-nights li.frost .fc-low, .fc-nights li.maybe .fc-low { color: var(--warn); }
.fc-text { font-size: .78rem; color: var(--muted); line-height: 1.25; }
.prose { max-width: 42rem; }
.prose h1 { margin-top: 1.6rem; }
.prose li { margin-bottom: .4rem; }

/* Headings and text */
.crumbs { color: var(--muted); font-size: .88rem; margin: 1.2rem 0 .2rem; }
.crumbs a { color: var(--muted); }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15; margin: .2rem 0 .5rem; letter-spacing: -.01em; }
.lede { color: var(--muted); margin: 0 0 1.4rem; }
h2 { font-size: 1.3rem; margin: 2.6rem 0 .6rem; letter-spacing: -.005em; }
h3 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
.note, .source, .muted { color: var(--muted); font-size: .9rem; }
.caution { color: var(--warn); }
.towns, .zips { font-size: .95rem; }
.zips { word-spacing: .2rem; color: var(--muted); }

/* At-a-glance cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.card p { margin: 0; }
.card .label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.card .value { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: .15rem 0; }
.card .hint { font-size: .82rem; color: var(--faint); }
.card.key { background: var(--key-bg); border-color: var(--key-bg); }
.card.key .label, .card.key .hint { color: var(--key-sub); }
.card.key .value { color: var(--key-ink); }

/* Lookup box */
.lookup { margin: 1.6rem 0 0; background: var(--soft); border-radius: 10px; padding: .9rem 1rem; }
.lookup[hidden] { display: none; }
.lookup label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.lookup-row { display: flex; gap: .5rem; }
.lookup input { flex: 1; min-width: 0; font: inherit; padding: .5rem .7rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--ink); }
.lookup input:focus { outline: 2px solid var(--btn-bg); outline-offset: 1px; }
.lookup button { font: inherit; font-weight: 600; padding: .5rem 1.1rem; border: 0; border-radius: 8px; background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; }
.lookup button:hover { background: var(--btn-hover); }
.lookup-msg { color: var(--warn); margin: .35rem 0 0; font-size: .88rem; }
.lookup-msg:empty { display: none; }
.lookup-msg a { white-space: nowrap; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .93rem; }
th, td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--soft); white-space: nowrap; }
tbody th { font-weight: 600; }
.plant-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.plant-table tbody th[scope="row"] { position: sticky; left: 0; background: var(--card); white-space: nowrap; }
.plant-table td.muted { white-space: normal; font-style: italic; }
.plant-table .group th { background: var(--bg); color: var(--group); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .9rem; }
.plant-table tbody + tbody .group th { border-top: 1px solid var(--line); }
.none { color: var(--faint); }
.odds td { font-variant-numeric: tabular-nums; }

/* Colour dots (table headers and legend) */
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; vertical-align: .02rem; }
.dot.indoor, .bar.indoor { background: var(--indoor); }
.dot.outdoor, .bar.outdoor { background: var(--outdoor); }
.dot.fall, .bar.fall { background: var(--fall); }
.legend { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; }
.legend .dot { margin-left: .9rem; }
.legend .dot:first-child { margin-left: 0; }

/* Timeline: 24 half-month columns, bars placed with gs-/ge- classes */
.timeline-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .6rem .8rem .8rem 0; }
.timeline { min-width: 38rem; font-size: .82rem; }
.tl-head, .tl-row { display: grid; grid-template-columns: 8.3rem 1fr; align-items: center; }
.tl-head { grid-template-columns: 8.3rem repeat(12, 1fr); color: var(--faint); font-size: .75rem; padding-bottom: .3rem; }
.tl-month { text-align: center; }
.tl-row { min-height: 1.75rem; }
.tl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .6rem 0 .8rem; position: sticky; left: 0; background: var(--card); z-index: 1; align-self: stretch; display: flex; align-items: center; }
.tl-track {
  display: grid; grid-template-columns: repeat(24, 1fr); align-items: center; height: 1.75rem;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  border-right: 1px solid var(--line);
}
.tl-row:nth-child(even) .tl-track { background-color: var(--row-alt); }
.bar { grid-row: 1; height: .8rem; border-radius: 999px; margin: 0 1px; }
.gs-1 { grid-column-start: 1; }
.gs-2 { grid-column-start: 2; }
.gs-3 { grid-column-start: 3; }
.gs-4 { grid-column-start: 4; }
.gs-5 { grid-column-start: 5; }
.gs-6 { grid-column-start: 6; }
.gs-7 { grid-column-start: 7; }
.gs-8 { grid-column-start: 8; }
.gs-9 { grid-column-start: 9; }
.gs-10 { grid-column-start: 10; }
.gs-11 { grid-column-start: 11; }
.gs-12 { grid-column-start: 12; }
.gs-13 { grid-column-start: 13; }
.gs-14 { grid-column-start: 14; }
.gs-15 { grid-column-start: 15; }
.gs-16 { grid-column-start: 16; }
.gs-17 { grid-column-start: 17; }
.gs-18 { grid-column-start: 18; }
.gs-19 { grid-column-start: 19; }
.gs-20 { grid-column-start: 20; }
.gs-21 { grid-column-start: 21; }
.gs-22 { grid-column-start: 22; }
.gs-23 { grid-column-start: 23; }
.gs-24 { grid-column-start: 24; }
.ge-2 { grid-column-end: 2; }
.ge-3 { grid-column-end: 3; }
.ge-4 { grid-column-end: 4; }
.ge-5 { grid-column-end: 5; }
.ge-6 { grid-column-end: 6; }
.ge-7 { grid-column-end: 7; }
.ge-8 { grid-column-end: 8; }
.ge-9 { grid-column-end: 9; }
.ge-10 { grid-column-end: 10; }
.ge-11 { grid-column-end: 11; }
.ge-12 { grid-column-end: 12; }
.ge-13 { grid-column-end: 13; }
.ge-14 { grid-column-end: 14; }
.ge-15 { grid-column-end: 15; }
.ge-16 { grid-column-end: 16; }
.ge-17 { grid-column-end: 17; }
.ge-18 { grid-column-end: 18; }
.ge-19 { grid-column-end: 19; }
.ge-20 { grid-column-end: 20; }
.ge-21 { grid-column-end: 21; }
.ge-22 { grid-column-end: 22; }
.ge-23 { grid-column-end: 23; }
.ge-24 { grid-column-end: 24; }
.ge-25 { grid-column-end: 25; }

@media (max-width: 34rem) {
  body { font-size: 16px; }
  .card .value { font-size: 1.3rem; }
  th, td { padding: .5rem .55rem; }
  .plant-table { font-size: .85rem; }
}

/* Home page: popular places as tiles, states as a list in columns */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.tiles a { display: flex; flex-direction: column; gap: .1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; text-decoration: none; height: 100%; box-sizing: border-box; }
.tiles a:hover { border-color: var(--leaf); }
.tile-name { font-weight: 600; }
.tile-hint { font-size: .82rem; color: var(--muted); }
.states { list-style: none; padding: 0; margin: 0; columns: 3 11rem; column-gap: 1.5rem; }
.states li { break-inside: avoid; padding: .15rem 0; }
.states .count { color: var(--faint); font-size: .8rem; }
.state-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
main.wrap > h1:first-child { margin-top: 1.6rem; }