/* Phoenixville townfeed. Mobile first, system fonts, no frameworks, <10 KB.
   Three visual weights, decided in app.js and styled here:
     .alert  boxed, full width, big lead — impossible to scroll past
     .row    headline + one line of detail + meta — the workhorse
     .amb    one quiet grey line — the eye crosses it and moves on   */

:root {
  /* --faint is ambient text: readable, deliberately recessive.
     --link is rust: the iron/foundry note, and legible on white. */
  --bg: #fbfaf8; --card: #ffffff; --ink: #16181d;
  --muted: #5c6270; --faint: #767c8a; --line: #e2e0dc; --link: #8a4b1e;
  --sev1: #8a6d1f; --sev2: #a8541c; --sev3: #a11b1b;
  --sev2-bg: #fdf6f0; --sev3-bg: #fdf2f2;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --card: #1c1f25; --ink: #e8e6e3;
    --muted: #9aa1ae; --faint: #838a97; --line: #2c313a; --link: #e0a878;
    --sev1: #d8b45c; --sev2: #e59355; --sev3: #ff8a83;
    --sev2-bg: #2a1e17; --sev3-bg: #2b1a1a;
  }
}

* { box-sizing: border-box; }

/* A class that sets `display` outbids the UA [hidden] rule and silently
   un-hides collapsed ambient runs. Make hiding win. */
[hidden] { display: none !important; }

body {
  margin: 0 auto; padding: 0 1rem 3rem; max-width: 44rem;
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;   /* no iOS landscape inflation */
}

a { color: var(--link); } a:hover { text-decoration: none; }

/* A button that has to read as prose (inline "unmute" affordances). */
button.linkish {
  border: 0; padding: 0; background: none; font: inherit;
  color: var(--link); text-decoration: underline; cursor: pointer;
}
button.linkish[disabled] { color: var(--muted); text-decoration: none; }


/* --- header --- */
header { padding: 1.75rem 0 0.75rem; }

h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.sub   { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--muted); }
.stats { margin: 0.35rem 0 0; font-size: 0.8rem;  color: var(--muted); }

/* --- mute toggles --- */
#filters {
  display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
  /* Let the row bleed to the screen edges so it's clear it scrolls. */
  margin: 0 -1rem; padding: 0.85rem 1rem;
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
#filters::-webkit-scrollbar { display: none; }

#filters button {
  flex: 0 0 auto; padding: 0.45rem 0.85rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 0.875rem; cursor: pointer;
  min-height: 2.4rem;   /* 44px touch target: used one-handed, outdoors */
}

/* Muted state: strike-through + opacity, never colour alone. */
#filters button.muted {
  color: var(--muted); border-style: dashed;
  text-decoration: line-through; opacity: 0.62;
}
#filters button.on {
  background: var(--ink); border-color: var(--ink);
  color: var(--bg); font-weight: 600;
}
.mutenote { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--muted); }

/* --- day spine --- */
.daybreak {
  position: sticky;
  top: 3.4rem;               /* clears the sticky filter bar */
  margin: 1.4rem 0 0.4rem; padding: 0.3rem 0;
  background: var(--bg); color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 4;
}

/* --- weight 1: ALERT --- */
/* Boxed, full width, instruction above the headline. Severity is spelled out
   in words as well as drawn, so nothing here needs colour. */

.alert {
  border: 1px solid var(--line); border-left: 5px solid var(--sev2);
  border-radius: var(--radius); background: var(--sev2-bg);
  padding: 0.85rem 1rem 0.9rem; margin: 0.7rem 0;
}
.alert.sev3 { border-left-color: var(--sev3); background: var(--sev3-bg); }

.alert-eyebrow {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--muted); text-transform: uppercase;
}

.sev-tag {
  display: inline-block; border: 1px solid currentColor; border-radius: 3px;
  padding: 0 0.3em; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--sev2);
}
.alert.sev3 .sev-tag { color: var(--sev3); }
.sev-tag-low { color: var(--sev1); }

.alert-lead, .alert-title { overflow-wrap: anywhere; font-weight: 600; }
.alert-lead {
  margin: 0.4rem 0 0; font-size: 1.15rem; line-height: 1.32; color: var(--ink);
}
.alert-title {
  margin: 0.45rem 0 0; font-size: 0.92rem; line-height: 1.35;
  color: var(--muted);
}
.alert-detail {
  margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted);
  overflow-wrap: anywhere; -webkit-line-clamp: 5; line-clamp: 5;
}

.alert .meta { margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }
.alert .meta a { color: inherit; }
#alerts { margin-top: 1rem; }

/* --- weight 2: EVENT --- */
/* The gutter carries a kind glyph and a clock, so the eye can skim for fire
   calls without reading every line. */

.row {
  display: flex; gap: 0.7rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.gutter {
  flex: 0 0 3.5rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.15rem; padding-top: 0.1rem;
}

.glyph {
  display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: 0.9rem; line-height: 1;
  background: var(--line); color: var(--muted);
}

/* Kind colour is a skim aid; severity is carried by text and a border. */
.k-alert    { background: #a11b1b; color: #fff; }
.k-incident { background: #a8541c; color: #fff; }
.k-water    { background: #2b6f8a; color: #fff; }
.k-power    { background: #8a6d1f; color: #fff; }
.k-traffic  { background: #6b5ea8; color: #fff; }

.clock, .amb-t {
  font-size: 0.68rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.clock { color: var(--muted); }

.row .body { flex: 1 1 auto; min-width: 0; }

.row h3 {
  margin: 0; font-size: 0.97rem; font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere;
}
.row p {
  margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.45;
  color: var(--muted); overflow-wrap: anywhere;
}

/* One line of detail. The rest is behind the source link. */
.row p.detail { -webkit-line-clamp: 2; line-clamp: 2; }

/* Shared clamp mechanics for the truncating paragraphs above. */
.alert-detail, .row p.detail {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

.row .meta { margin-top: 0.3rem; font-size: 0.74rem; color: var(--muted); }
.row .meta a { color: inherit; }
.row .meta .sev-tag { font-size: 0.64rem; }

.row.sev1 { border-left: 2px solid var(--sev1); padding-left: 0.5rem; }
.row.sev2 { border-left: 3px solid var(--sev2); padding-left: 0.5rem; }

/* Scheduled-but-not-yet-happened: the date is the point. */
.row p.when, .alert p.when {
  color: var(--link);
  font-weight: 600;
  font-size: 0.85rem;
}

/* --- weight 3: AMBIENT --- */
/* Time, glyph, one clause. No headline, no body, no source link. The clock
   column lines up with the event gutter, so the river keeps one spine. */

.amb {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.16rem 0;
  font-size: 0.82rem; line-height: 1.45; color: var(--faint);
}
.amb-t { flex: 0 0 3.5rem; text-align: center; }
.amb-g { flex: 0 0 auto; width: 1rem; text-align: center; opacity: 0.75; }
.amb-c {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Runs of one ambient kind collapse behind this. No network call. */
.amb-more {
  display: block; margin: 0.1rem 0 0.25rem 4rem; padding: 0.25rem 0;
  border: 0; background: none; font: inherit; font-size: 0.78rem;
  color: var(--muted); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.amb-more:hover { color: var(--ink); }

/* --- "since you last looked": timestamp lives in localStorage --- */

.since {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0;
  font-size: 0.73rem; color: var(--link);
}
.since::before, .since::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: currentColor; opacity: 0.45;
}
.since::before { flex-grow: 0; flex-basis: 1.5rem; }
.since-text {
  flex: 0 0 auto; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.since-when { flex: 0 0 auto; color: var(--muted); }

/* --- notices --- */
.loading { color: var(--muted); padding: 1.5rem 0; }

.empty, .quiet {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 0.8rem 0.9rem; margin: 1rem 0;
  font-size: 0.85rem; line-height: 1.5; color: var(--muted);
}
.empty strong, .quiet strong { color: var(--ink); }

.stale {
  border: 1px solid var(--sev3); border-radius: var(--radius);
  background: var(--sev3-bg); padding: 0.7rem 0.9rem;
  margin-top: 1rem; font-size: 0.85rem;
}

/* A brief tint on new rows. Honours prefers-reduced-motion, below. */
.fresh { animation: arrive 2.5s ease-out; }
@keyframes arrive {
  from { background: rgba(138, 75, 30, 0.13); }
  to   { background: transparent; }
}

/* --- footer --- */
footer {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--muted);
}

footer p { margin: 0 0 0.6rem; }
footer .attrib { font-size: 0.75rem; }

/* --- status page --- */
table.status { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.status th, table.status td {
  text-align: left; vertical-align: top;
  padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--line);
}

table.status th { color: var(--muted); font-weight: 600; }
td.ok { color: var(--sev1); }
td.bad { color: var(--sev3); font-weight: 600; }

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}