/* Dark is the default palette; light is applied when the OS asks for it.
   Flag colours are tuned per theme: the same green that reads well on a dark
   card is too pale on white, and a yellow card always needs dark text. */
:root {
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-sticky: #0d1117f2;
  --fg: #e6edf3;
  --fg-dim: #9198a1;
  --border: #30363d;
  --accent: #58a6ff;

  --green-bg: #1a7f37;
  --green-fg: #ffffff;
  --yellow-bg: #d9a800;
  --yellow-fg: #1a1400;
  --red-bg: #c92a2a;
  --red-fg: #ffffff;
  --none-bg: #21262d;
  --none-fg: #9198a1;

  --warn-bg: #4d3800;
  --warn-fg: #ffdf5d;
  --warn-border: #9e7700;
  --err-bg: #4d1a1a;
  --err-fg: #ffb0b0;
  --err-border: #a33;
  --calm-bg: #1b2733;
  --calm-fg: #a9c4e0;
  --calm-border: #2f4a63;

  --radius: 10px;
  --gap: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-elev: #f6f8fa;
    --bg-sticky: #fffffff2;
    --fg: #1f2328;
    --fg-dim: #59636e;
    --border: #d1d9e0;
    --accent: #0969da;

    --green-bg: #197b30;
    --green-fg: #ffffff;
    --yellow-bg: #f2c200;
    --yellow-fg: #241c00;
    --red-bg: #c62828;
    --red-fg: #ffffff;
    --none-bg: #eaeef2;
    --none-fg: #59636e;

    --warn-bg: #fff8c5;
    --warn-fg: #4a3800;
    --warn-border: #d4a72c;
    --err-bg: #ffebe9;
    --err-fg: #8b1a1a;
    --err-border: #e5534b;
    --calm-bg: #eef4fb;
    --calm-fg: #33475b;
    --calm-border: #b6d0e8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 14px 8px;
  background: var(--bg-sticky);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* ---------- season countdown ---------- */

/* Sits at the right end of the title row, opposite the heading, and is the only
   thing there. Built only from the palette tokens, so the light palette below
   needs no rule of its own: an extra colour here would be one more thing to
   keep in sync. */
.season {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  line-height: 1.1;
}
/* A class setting `display` outranks the user agent's `[hidden] { display: none }`,
   so without this the hidden attribute that the markup and paintSeason rely on
   does nothing: an empty frame would sit in the bar until the first response,
   and stay there against a server that sends no season_countdown. .banner and
   .search-clear get away with plain `hidden` only because they never set
   display. */
.season[hidden] { display: none; }

.season-days {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.season-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  /* Letting the caption wrap would add a third line and push the sticky bar
     down over the cards. */
  white-space: nowrap;
}

/* At ~360px the title and the countdown share the row, so the title gives up
   the space rather than the number. */
@media (max-width: 380px) {
  h1 { font-size: 1rem; }
  .season { padding: 2px 6px; }
  .season-days { font-size: 1.05rem; }
  .season-label { font-size: 0.55rem; letter-spacing: 0.02em; }
}

/* ---------- banners ---------- */

.banner {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.86rem;
}
.banner[data-kind="stale"] { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); font-weight: 600; }
.banner[data-kind="error"] { background: var(--err-bg);  color: var(--err-fg);  border-color: var(--err-border); font-weight: 600; }
.banner[data-kind="off"]    { background: var(--calm-bg); color: var(--calm-fg); border-color: var(--calm-border); }

/* ---------- search ---------- */

.search {
  position: relative;
  margin-top: 8px;
}

.search input {
  width: 100%;
  padding: 8px 30px 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font-size: max(0.9rem, 16px);
}
.search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
/* Safari draws its own clear button; ours is the one that stays in sync. */
.search input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-dim);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.search-clear:hover { color: var(--fg); background: var(--border); }

/* ---------- filter chips ---------- */

.chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip .count { opacity: 0.65; font-weight: 500; }
.chip.is-active { border-color: var(--accent); color: var(--accent); }
.chip-red.is-active    { background: var(--red-bg);    color: var(--red-fg);    border-color: var(--red-bg); }
.chip-yellow.is-active { background: var(--yellow-bg); color: var(--yellow-fg); border-color: var(--yellow-bg); }
.chip-green.is-active  { background: var(--green-bg);  color: var(--green-fg);  border-color: var(--green-bg); }
.chip-none.is-active   { background: var(--none-bg);   color: var(--fg);        border-color: var(--fg-dim); }

/* ---------- areas ---------- */

main { padding: 12px 14px 0; }

.area { margin-bottom: 20px; }

/* The pinned section is the reason the page exists on a normal morning, so it
   gets an accent rail and sits above every area. */
.area[data-pinned="1"] {
  padding-left: 9px;
  border-left: 3px solid var(--accent);
}
.area[data-pinned="1"] .area-head { color: var(--accent); border-bottom-color: var(--accent); }

.area-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 7px 2px;
  background: var(--bg-sticky);
  backdrop-filter: blur(8px);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.area-head .caret { font-size: 0.7rem; transition: transform 0.12s; }
.area[data-collapsed="1"] .caret { transform: rotate(-90deg); }
.area[data-collapsed="1"] .grid { display: none; }
.area-head .tally { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  main { padding: 10px 10px 0; }
}

/* ---------- cards ---------- */

.card {
  border-radius: var(--radius);
  padding: 9px 11px;
  border: 1px solid transparent;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card[data-flag="green"]   { background: var(--green-bg);  color: var(--green-fg); }
.card[data-flag="yellow"]  { background: var(--yellow-bg); color: var(--yellow-fg); }
.card[data-flag="red"]     { background: var(--red-bg);    color: var(--red-fg); }
.card[data-flag="none"],
.card[data-flag="unknown"] { background: var(--none-bg); color: var(--none-fg); border-color: var(--border); }

/* A stale card must not look like a confident reading. */
.card[data-stale="1"] {
  background: var(--none-bg);
  color: var(--none-fg);
  border: 1px dashed var(--fg-dim);
}

.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.card-name { font-weight: 700; font-size: 0.95rem; }
.card-flag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgb(0 0 0 / 0.22);
}
.card[data-flag="none"] .card-flag,
.card[data-flag="unknown"] .card-flag,
.card[data-stale="1"] .card-flag { background: rgb(128 128 128 / 0.25); }

.card-muni { font-size: 0.76rem; opacity: 0.8; }
.card-meta { font-size: 0.78rem; opacity: 0.92; display: flex; flex-wrap: wrap; gap: 4px 9px; }
.card-jelly {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgb(0 0 0 / 0.22);
  align-self: flex-start;
}
.card[data-flag="none"] .card-jelly,
.card[data-stale="1"] .card-jelly { background: rgb(128 128 128 / 0.25); }
.card-age { font-size: 0.72rem; opacity: 0.72; margin-top: auto; }
.card-reason { font-size: 0.76rem; opacity: 0.85; font-style: italic; }

/* ---------- empty / skeleton ---------- */

.empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--fg-dim);
  font-size: 0.86rem;
  text-align: center;
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-elev) 25%, var(--border) 50%, var(--bg-elev) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius);
}
.skeleton-text { display: inline-block; width: 9rem; height: 0.9rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- no-JavaScript fallback ---------- */

.noscript-main {
  max-width: 44rem;
  font-size: 0.92rem;
}
.noscript-main h2 { font-size: 1.05rem; margin: 6px 0 10px; }
.noscript-main p { margin: 0 0 10px; color: var(--fg-dim); }
.noscript-main strong { color: var(--fg); }

/* ---------- footer ---------- */

.foot {
  margin-top: 8px;
  padding: 14px;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 0.78rem;
}
.foot p { margin: 0 0 4px; }
.foot .fine { opacity: 0.8; }