/* Semak — "community noticeboard" design system.
   s137 Season A (directive seq 80): consolidated to ONE token layer.
   s125 + s130 + s133 values win; s40 survivors kept where never
   redefined. The dark blocks are one hand-synced pair. */

/* s137: Inter lands for real (fable C4) — subset TTFs served from
   /fonts/. font-display: optional keeps G7: no layout shift on load. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

:root {
  color-scheme: light;
  --paper: #faf9f5;
  --sheet: #ffffff;
  --paper-tint: #f1efe8;
  --ink: #26292f;
  --ink-2: #545960;
  --ink-3: #6e7076;
  --line: #e8e4d9;
  --line-strong: #8f8a7c;
  --navy: #164590;
  --navy-deep: #10336d;
  --link: var(--navy);
  --accent: var(--navy);
  --on-accent: #ffffff;
  --focus: #164590;
  --alert: #c31c2c;
  --verify: #0c7a43;
  --pending: #9a6b00;
  --text-2: var(--ink-2);
  --border: var(--line);
  --bg-1: var(--sheet);
  --bg-2: var(--paper-tint);
  --shadow-1: 0 1px 2px rgb(38 41 47 / 5%), 0 10px 28px -14px rgb(38 41 47 / 12%);
  --shadow-2: 0 2px 4px rgb(38 41 47 / 6%), 0 18px 40px -18px rgb(38 41 47 / 18%);
  --st-verified-bg: #e3f2e7; --st-verified-fg: #0c6a3d;
  --st-debunked-bg: #fde9ec; --st-debunked-fg: #9c2434;
  --st-unverified-bg: #fff1ce; --st-unverified-fg: #7a5000;
  --st-frozen-bg: #e9eef3; --st-frozen-fg: #465365;
  --google-bg: #ffffff; --x-bg: #1c1f26;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-caption: 0.875rem;
  --text-xs: 0.75rem;
  --text-stat: 1.75rem;
  --track-caps: 0.06em;
  --text-body-sm: 0.875rem;
  --text-body: 1rem;
  --text-heading: 1.25rem;
  --text-title: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --board-max: 880px;
  --measure: 720px;
  /* s130 line hues (MyRapid route data, semak hexes). s146 closes the
     SPEC A gate: the s130 dead-block value is gone, the s133 live value
     survives (fable census: one live block, #c22a30). */
  --ln-kj: #c22a30; --ln-ag: #d97316; --ln-sp: #8a3d99; --ln-kgl: #3d9a4e;
  --ln-pyl: #c9a00a; --ln-mr: #7a2040; --ln-seremban: #2e6cb0; --ln-klang: #1f5f7a;
  /* --panel-pad is scheme-independent: base 20px, 28px from 40rem up,
     for both schemes (s137 fixes the F4 dark 20px/28px drift by keeping
     it out of the dark blocks). */
  --panel-pad: 20px;
}
@media (min-width: 40rem) {
  :root { --panel-pad: 28px; }
}

/* ---- dark scheme: ONE hand-synced pair. The two blocks carry identical
   values -- keep them in sync. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #171511; --sheet: #1f1d18; --paper-tint: #292620;
    --ink: #ede9e0; --ink-2: #b3aea1; --ink-3: #8d887b;
    --line: #34312a; --line-strong: #5a554a;
    --navy: #a8c8ff; --navy-deep: #c7dcff;
    --link: var(--navy); --accent: var(--navy); --on-accent: #11161c;
    --focus: #a8c8ff;
    --alert: #ff7b7b; --verify: #4ade80; --pending: #fbbf24;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -16px rgb(0 0 0 / 50%);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 36%), 0 20px 44px -18px rgb(0 0 0 / 55%);
    --st-verified-bg: #12291c; --st-verified-fg: #6ee7a0;
    --st-debunked-bg: #3b222c; --st-debunked-fg: #ffa4ad;
    --st-unverified-bg: #382c14; --st-unverified-fg: #ffce73;
    --st-frozen-bg: #242f3b; --st-frozen-fg: #c0cad6;
    --google-bg: #171c24; --x-bg: #10131a;
    --ln-kj: #ff9096; --ln-ag: #ffa262; --ln-sp: #cd9bd8; --ln-kgl: #82cf90;
    --ln-pyl: #e8c65c; --ln-mr: #e09ab2; --ln-seremban: #8ab6ea; --ln-klang: #7cc0d8;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171511; --sheet: #1f1d18; --paper-tint: #292620;
  --ink: #ede9e0; --ink-2: #b3aea1; --ink-3: #8d887b;
  --line: #34312a; --line-strong: #5a554a;
  --navy: #a8c8ff; --navy-deep: #c7dcff;
  --link: var(--navy); --accent: var(--navy); --on-accent: #11161c;
  --focus: #a8c8ff;
  --alert: #ff7b7b; --verify: #4ade80; --pending: #fbbf24;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -16px rgb(0 0 0 / 50%);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 36%), 0 20px 44px -18px rgb(0 0 0 / 55%);
  --st-verified-bg: #12291c; --st-verified-fg: #6ee7a0;
  --st-debunked-bg: #3b222c; --st-debunked-fg: #ffa4ad;
  --st-unverified-bg: #382c14; --st-unverified-fg: #ffce73;
  --st-frozen-bg: #242f3b; --st-frozen-fg: #c0cad6;
  --google-bg: #171c24; --x-bg: #10131a;
  --ln-kj: #ff9096; --ln-ag: #ffa262; --ln-sp: #cd9bd8; --ln-kgl: #82cf90;
  --ln-pyl: #e8c65c; --ln-mr: #e09ab2; --ln-seremban: #8ab6ea; --ln-klang: #7cc0d8;
}

* { box-sizing: border-box; }
html { font-family: var(--font-sans); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- header: the notice-sheet masthead ---- */

header {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-6);
  flex-wrap: wrap;
  background: var(--sheet);
  border-bottom: 3px double var(--navy);
}
.controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 72rem;
  margin-inline: auto;
  padding: 0.5rem 1rem;
}
.theme-toggle {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--paper-tint);
  color: var(--ink-2);
}
.theme-toggle:hover { color: var(--navy); border-color: var(--navy); }
.theme-toggle-icon { width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; }
.theme-toggle-icon svg { display: block; }
.controls-disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sheet); padding: 0.75rem 1rem; }
.controls-disclosure summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: var(--text-body-sm); color: var(--ink-2); list-style: none; }
.controls-disclosure summary::-webkit-details-marker { display: none; }
.controls-disclosure summary::before { content: "▸ "; color: var(--ink-3); }
.controls-disclosure[open] summary::before { content: "▾ "; }
.controls-disclosure[open] { padding-bottom: 1rem; }
.controls-disclosure form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 0; }
/* s134 lane a2: board line/station facet row. */
.board-facets { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.board-facets .station-facet { display: flex; align-items: center; gap: 0.375rem; margin: 0; }
.board-head { flex-basis: 100%; margin: 0; }
.board-title { margin: 0; font-size: var(--text-title); line-height: 1.2; font-weight: 700; color: var(--ink); }
#search-count { font-size: var(--text-body-sm); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* s130 transit surface: line rows as bordered cards, tabular counts,
   bordered summaries. One definition per selector (s137 merge). */
.line-list { display: grid; gap: 12px; }
.line-row { padding: 1rem 1.25rem; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sheet); box-shadow: none; }
.line-head { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.line-main { flex: 1 1 10rem; min-width: 0; }
.line-name { font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--ink); }
.line-name::before { content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 8px; border-radius: 2px; vertical-align: 0.18em; background: var(--ln, var(--ink-3)); }
.line-count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: normal; }
.line-count > span { display: block; font-size: var(--text-caption); font-weight: 400; color: var(--ink-3); }
.line-issues > summary { display: flex; width: fit-content; min-height: 44px; margin-top: 0.5rem; padding: 0.25rem 0.875rem; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--sheet); color: var(--link); font-size: var(--text-body-sm); }
.line-issues > summary::after { flex: none; }
.issue-list { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.issue-group { padding: 16px 0 0; }
.issue-group + .issue-group { margin-top: 16px; border-top: 1px solid var(--line); }
.issue-name { color: var(--ink-2); font-size: var(--text-body-sm); font-weight: 700; }
.post-row { padding: 0.625rem 0; font-size: 1rem; line-height: 1.6; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; color: var(--ink-3); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.post-link { display: block; min-height: 44px; padding-block: 4px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); overflow-wrap: anywhere; }
.post-link:hover { color: var(--link); }
/* s162 lane a1 (R6): the official-notice badge — operator-sourced, so it
   carries the verified palette, distinct from rider post-row markup and
   the R12 planned/crowding classes. */
.official-notice .post-meta { margin-bottom: 4px; }
.official-badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: var(--radius-pill); background: var(--st-verified-bg); color: var(--st-verified-fg); font-size: var(--text-caption); font-weight: 700; line-height: 1.4; }
[data-line="kj"] { --ln: var(--ln-kj); }
[data-line="ag"] { --ln: var(--ln-ag); }
[data-line="sp"] { --ln: var(--ln-sp); }
[data-line="kgl"] { --ln: var(--ln-kgl); }
[data-line="pyl"] { --ln: var(--ln-pyl); }
[data-line="mr"] { --ln: var(--ln-mr); }
[data-line="ktm-seremban"] { --ln: var(--ln-seremban); }
[data-line="ktm-klang"] { --ln: var(--ln-klang); }
[data-line=""] { --ln: var(--ink-3); }
/* s128: shared theme button lives in the site header; hidden in markup,
   revealed by the controller after its handler attaches. 44px target
   comes from the shared button rule. */
.site-header .theme-toggle { margin-left: auto; }
.muted-signin { color: var(--ink-3); font-size: var(--text-caption); }

.brand {
  margin: 0;
  font-size: var(--text-title);
  line-height: 1.1;
  font-weight: 700;
  color: var(--navy);
}
.brand a { color: inherit; text-decoration: none; }
.brand a::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--alert);
  margin-left: 4px;
}

.tagline { color: var(--ink-2); font-size: var(--text-body-sm); line-height: 1.5; }
nav.site { margin-left: auto; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
nav.site a { color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--track-caps); }
nav.site a:hover { color: var(--navy); }
@media (max-width: 900px) { .tagline { display: none; } }

/* ---- buttons ---- */

button {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.5;
  min-height: 44px;
}
button:hover { border-color: var(--navy); }
button.google { background: var(--sheet); border-color: var(--line-strong); }
button.x { background: var(--ink); color: var(--sheet); }
button.vote { padding: var(--space-1) var(--space-3); }
button.voted { outline: 2px solid var(--navy); outline-offset: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- layout: the notice column ---- */

main { padding: var(--space-6) var(--space-6) var(--space-7); max-width: var(--board-max); margin: 0 auto; }

h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-heading);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
}
h2:first-child { margin-top: 0; }

/* wide notice rows: one incident, one full-width sheet */
.grid { display: flex; flex-direction: column; gap: var(--space-4); }

/* s64 lane a2: date timeline. A left rail with a node dot per card turns
   the incident list into a chronological spine. Cards keep their anatomy;
   the rail and dots are the timeline affordance. */
.timeline { position: relative; padding-left: var(--space-6); }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}
.timeline .card { position: relative; }
.timeline .card::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) + 4px);
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--sheet);
}

/* ---- incident notice cards ---- */

.card {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card.st-community-verified { border-left-color: var(--verify); }
.card.st-debunked { border-left-color: var(--alert); }
.card.st-unverified, .card.st-open, .card.st-frozen { border-left-color: var(--pending); }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }

.cat {
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-2);
}

.card-title {
  margin: 0;
  font-size: var(--text-heading);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--navy); text-decoration: underline; }

.sum { margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--ink-2); }

.meta {
  color: var(--ink-3);
  font-size: var(--text-caption);
  line-height: 1.4;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); flex-wrap: wrap; }
.actions a { color: var(--navy); font-size: var(--text-body-sm); font-weight: 600; }

/* ---- status stamps ---- */

.badge {
  display: inline-block;
  max-width: 100%;
  padding: 0.2rem 0.7rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  background: var(--sheet);
}
.st-community-verified { color: var(--st-verified-fg); border-color: var(--st-verified-fg); background: var(--st-verified-bg); }
.st-debunked { color: var(--st-debunked-fg); border-color: var(--st-debunked-fg); background: var(--st-debunked-bg); }
.st-unverified { color: var(--st-unverified-fg); border-color: var(--st-unverified-fg); background: var(--st-unverified-bg); }
.st-frozen, .st-open { color: var(--st-frozen-fg); border-color: var(--st-frozen-fg); background: var(--st-frozen-bg); }

/* ---- source chips: plain linked citations ---- */

.sources { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.chip {
  display: inline-block;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--text-caption);
  line-height: 1.4;
}
.chip a { color: var(--navy); text-decoration: none; font-weight: 600; }
.chip a:hover { text-decoration: underline; }
.chip.follow {
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.chip.follow[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  .chip.follow { transition: none; }
}
.more-sources {
  background: none;
  border: 1px dashed var(--line-strong);
  color: var(--navy);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.more-sources:hover { text-decoration: underline; }

/* ---- forms ---- */

#search-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-3) 0 var(--space-4); }
#search-form input[type="search"],
#search-form input[type="date"],
#search-form select {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  min-height: 44px;
}
#search-form input[type="search"] { flex: 1 1 220px; min-width: 180px; }
#search-form input[type="search"]::placeholder { color: var(--ink-3); }
#search-form option { background: var(--sheet); color: var(--ink); }
#search-form button[type="submit"] { background: var(--navy); color: var(--on-accent); border-color: var(--navy); }
/* s102: alerts subscribe box (directive seq 67) */
#alerts-box { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--space-4); }
#alerts-box select,
#alerts-box input[type="text"] { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; }
#alerts-box input[type="text"] { flex: 1 1 220px; min-width: 180px; }
#alerts-box button { padding: var(--space-2) var(--space-3); border: 1px solid var(--navy); border-radius: 8px; background: var(--navy); color: var(--on-accent); font: inherit; cursor: pointer; }

/* ---- misc ---- */

.muted { color: var(--ink-3); }
a { color: var(--navy); }

footer {
  padding: 1.5rem max(1rem, calc((100% - 68rem) / 2));
  color: var(--ink-2);
  font-size: var(--text-body-sm);
  border-top: 1px solid var(--line);
}
footer a { color: var(--navy); }

#vouches ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
#vouches li { font-size: var(--text-body-sm); line-height: 1.5; }

/* ---- air quality strip ---- */

/* ---- prose pages (trust, docs, digest) ---- */

main.prose { max-width: var(--measure); }
main.prose section { margin-bottom: var(--space-4); }
main.prose p { margin: var(--space-2) 0; }
main.prose ol, main.prose ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
main.prose li { margin: var(--space-1) 0; line-height: 1.6; }

main.prose code {
  background: var(--paper-tint);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

main.prose pre {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  line-height: 1.5;
}

main.prose pre code { background: none; border: none; padding: 0; font-size: var(--text-body-sm); }

/* ---- share page (/i/{id}) ---- */

main.share {
  max-width: none;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.share-card { max-width: 560px; padding: var(--space-6); gap: var(--space-3); border-radius: var(--radius-lg); }
.share-card .card-title { font-size: var(--text-title); line-height: 1.2; }
.meta-line { margin: 0; color: var(--ink-2); font-size: var(--text-body-sm); line-height: 1.5; }

.share-sources ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-1); }
.share-sources li { font-size: var(--text-body-sm); line-height: 1.5; }
.src-date { color: var(--ink-3); font-size: var(--text-caption); margin-left: var(--space-2); }

.share-section { border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-2); }
.share-section .cat { font-size: var(--text-caption); letter-spacing: var(--track-caps); text-transform: uppercase; }
.share-section .empty { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); color: var(--ink-3); }

ol.timeline { list-style: none; padding: 0; margin: var(--space-2) 0 0; border-left: 2px solid var(--line-strong); }
.timeline .tl-item { position: relative; padding: 0 0 var(--space-3) var(--space-4); font-size: var(--text-body-sm); line-height: 1.5; }
.timeline .tl-item:last-child { padding-bottom: 0; }
.timeline .tl-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
}
.tl-date { display: block; color: var(--ink-3); font-size: var(--text-caption); }
.tl-snip { display: block; color: var(--ink-3); margin-top: var(--space-1); }

.tally { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); color: var(--ink-2); }
.vote-list, .settle-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-1); }
.vote-list li, .settle-list li { font-size: var(--text-body-sm); line-height: 1.6; }
.vote-user { color: var(--ink); }
.vote-val { font-variant-numeric: tabular-nums; }
.vote-true { color: var(--verify); font-weight: 700; }
.vote-false { color: var(--alert); font-weight: 700; }

.btn-primary {
  display: inline-block;
  background: var(--navy);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  min-height: 44px;
}

/* ---- mobile tap targets (44px) ---- */

nav.site a, .brand a, footer a, #authbox a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  margin: 0 -10px;
}

.share-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.board-link { color: var(--navy); font-size: var(--text-body-sm); }

/* ---- aqi strip (light) ---- */
.aqi-spark { margin-left: auto; flex: none; color: var(--ink); opacity: 0.9; max-width: 100%; height: auto; }
.aqi-spark-link { color: inherit; text-decoration: none; }
.aqi-hit { pointer-events: all; }
.aqi-hit:hover { fill: var(--ink-2); opacity: 0.3; }

.aqi-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 14px;
}
.aqi-city { color: var(--ink-2); }
.aqi-num { font-weight: 700; font-size: var(--text-stat); }

/* s61: visitor memory - the divider and the new banner */
.new-divider { display: flex; align-items: center; gap: 12px; margin: var(--space-2) 0 var(--space-4); color: var(--navy); font-weight: 700; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--track-caps); }
.new-divider::before, .new-divider::after { content: ""; flex: 1; height: 2px; background: var(--navy); opacity: .55; }
.new-banner { background: var(--sheet); border: 1px solid var(--navy); border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: 14px; font-weight: 600; }
/* s66: change badges (change_kind vocabulary from /api/changes) */
.cb-new { color: var(--st-unverified-fg); border-color: var(--st-unverified-fg); background: var(--st-unverified-bg); }
.cb-updated { color: var(--st-frozen-fg); border-color: var(--st-frozen-fg); background: var(--st-frozen-bg); }
.cb-verified { color: var(--st-verified-fg); border-color: var(--st-verified-fg); background: var(--st-verified-bg); }
.cb-debunked { color: var(--st-debunked-fg); border-color: var(--st-debunked-fg); background: var(--st-debunked-bg); }
.cb-new, .cb-updated, .cb-verified, .cb-debunked { margin-left: 4px; }

/* s56: capped source lists */
.src-more > summary { cursor: pointer; color: var(--link); font-size: var(--text-caption); font-weight: 600; }
.src-more > summary:hover { text-decoration: underline; }
.src-more[open] > summary { margin-bottom: var(--space-2); }
.digest-item .src-more > summary { font-size: var(--text-caption); }

#trends {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--space-3);
  box-shadow: none;
  position: static;
}
#trends:not([hidden]) { display: block; margin-top: var(--space-4); }
#trends h2 { margin: 0 0 var(--space-3); font-size: var(--text-body-sm, 14px); }
#trends-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#trends-list a { color: var(--navy); text-decoration: none; font-weight: 700; }
#trends-list a:hover { text-decoration: underline; }
.trends-x { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.trends-x-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-2); margin-bottom: var(--space-2); }
.trends-x-list { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.trends-x-list a { font-size: var(--text-xs); color: var(--ink-2); text-decoration: none; }
.trends-x-list a:hover { color: var(--link, var(--navy)); text-decoration: underline; }

/* s69 lane a2: evidence section on incident detail and share pages.
   OG cards per the s69 pinned contract, plain-link fallback, submit
   form. Uses the share-section token family. */
.evidence-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.evidence-item { border: 1px solid var(--line); border-radius: 8px; padding: var(--space-3); }
.evidence-item .og-card { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); text-decoration: none; color: inherit; }
.evidence-item .og-card.no-img { grid-template-columns: 1fr; }
.evidence-item .og-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.og-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.og-title { font-weight: 600; font-size: var(--text-body-sm); line-height: 1.4; color: var(--link); }
.og-desc { font-size: var(--text-caption); line-height: 1.4; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.og-host { font-size: var(--text-caption); color: var(--ink-3); }
.og-url { font-size: var(--text-caption); color: var(--link); word-break: break-all; }
.ev-meta { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--ink-3); }
.evidence-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.evidence-form label { font-size: var(--text-caption); color: var(--ink-3); }
.evidence-form input[type="url"], .evidence-form input[type="file"] {
  border: 1px solid var(--line-strong); border-radius: 6px; padding: var(--space-2);
  font-size: var(--text-body-sm); background: var(--bg-1); width: 100%;
}
.evidence-form input[type="url"]:focus, .evidence-form input[type="file"]:focus {
  outline: 2px solid var(--line-strong); outline-offset: 1px;
}
.evidence-form .ev-submit {
  align-self: flex-start; border: 1px solid var(--line-strong); border-radius: 6px;
  padding: var(--space-2) var(--space-3); background: var(--bg-2);
  font-size: var(--text-body-sm); cursor: pointer;
}
.evidence-error { margin: 0; font-size: var(--text-body-sm); }
.evidence-signin { margin: var(--space-3) 0 0; font-size: var(--text-body-sm); }

/* s70 lane a2: news coverage group (board cards + share pages).
   Outlet text links only, no favicon dependency. */
.news-group { margin-top: var(--space-2); }
.news-label {
  font-size: var(--text-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.news-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.news-list li { font-size: var(--text-body-sm); line-height: 1.6; }
.news-list a { color: var(--navy); font-weight: 600; text-decoration: none; }
.news-list a:hover { text-decoration: underline; }
.news-date { color: var(--ink-3); font-size: var(--text-caption); margin-left: var(--space-2); }

/* s96 lane a2: profile + leaderboard (directive seq 64). */
.profile-head { display: flex; gap: var(--space-3); align-items: center; margin: var(--space-3) 0; }
.profile-head img, .profile-avatar-fallback { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink-3); }
.lb-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); margin-top: var(--space-3); }
.lb-table th { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); font-weight: 600; }
.lb-table th, .lb-table td { padding: var(--space-2); border-bottom: 1px solid var(--line); text-align: left; }
.lb-table .num { text-align: right; }
.lb-avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); vertical-align: middle; margin-right: var(--space-2); }
.score-rules { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.score-rules li { font-size: var(--text-body-sm); }
.score-note { font-size: var(--text-caption); color: var(--ink-3); margin: var(--space-2) 0 0; }
.connect-btn { margin: var(--space-2) var(--space-2) 0 0; border: 1px solid var(--line-strong); border-radius: 6px; padding: var(--space-2) var(--space-3); background: var(--bg-2); font-size: var(--text-body-sm); cursor: pointer; }
.auth-name { margin-right: var(--space-2); }

select.aqi-city { font: inherit; font-size: var(--text-caption); background: var(--sheet); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 6px; }

/* ---- s125: shared Board-Trackers header + trackers index (astra.md) ---- */
.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 4rem;
  padding: 0.5rem max(1rem, calc((100% - 68rem) / 2));
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  position: relative;
  z-index: 40;
}
.site-masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.site-header .brand a { margin: 0; padding: 0; }
.site-header nav.site {
  margin: 0;
  margin-left: auto;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.site-header nav.site a {
  min-height: 44px;
  padding: 0 8px;
  margin: 0;
  font-size: 14px;
  text-transform: none;
}
.site-header nav.site a[aria-current="page"],
.site-header nav.site a.is-section {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
main.prose.tracker-index { max-width: 720px; padding: 16px; }
.tracker-index h1 { margin: 0; font-size: var(--text-title); }
.tracker-list { list-style: none; padding: 0; margin: 0; }
.tracker-list li { border-bottom: 1px solid var(--line); }
main.tracker-index .tracker-list a {
  display: block;
  min-height: 44px;
  padding: 12px 0;
  margin: 0;
  text-decoration: none;
}
.tracker-list strong { display: block; text-decoration: underline; }
.tracker-list span { display: block; color: var(--ink-2); font-size: 14px; }
main.tracker-index .tracker-list a.tracker-resource {
  padding-top: 4px;
  font-size: 14px;
  text-decoration: underline;
}
.site-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; }
footer .site-meta a { margin: 0; padding: 0; min-height: 44px; }
.skip-link {
  position: absolute;
  top: 8px;
  left: 16px;
  transform: translateY(-200%);
  padding: 8px;
  background: var(--sheet);
  z-index: 10;
}
.skip-link:focus { transform: translateY(0); }
/* UI review (s125): six page layouts. Tokens live in the one layer up top. */

[hidden] { display: none !important; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.site-header .brand { font-size: 1.625rem; }
.site-header .tagline { margin: 0; }
.site-header nav.site a { padding-inline: 0.75rem; }
.site-header nav.site a[aria-current="page"],
.site-header nav.site a.is-section { text-decoration-thickness: 2px; }

main#main.board-page,
main#main.tracker-page {
  display: block;
  width: 100%;
  max-width: 52rem;
  padding: 1.5rem 1rem 3rem;
  margin-inline: auto;
  min-width: 0;
}
main#main.tracker-page { max-width: 64rem; }
.tracker-page .digest-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.tracker-page .digest-wrap > * { min-width: 0; }
.tracker-page.prose p { margin: 0; }
:is(.board-page, .tracker-page) h1 {
  margin: 0 0 0.75rem;
  font-size: var(--text-title);
  line-height: 1.2;
  color: var(--ink);
}
:is(.board-page, .tracker-page) h2 {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
}
.tracker-page h3 { font-size: 1.125rem; line-height: 1.4; }
.page-head { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.page-head > p { max-width: 65ch; }
.page-section { margin-top: 2rem; }
.digest-sub, .freshness, .meta, .line-quote, .line-count, .issue-n {
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
}
.digest-stats { font-size: 1rem; color: var(--ink); }
.national-totals { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.national-totals dt { font-size: 0.875rem; color: var(--ink-2); }
.national-totals dd { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.freshness { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.freshness > * { min-width: 0; }
.board-tabs { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
/* s152 (Season H): the selector takes buttons too — the /transit
   My-lines | All-lines view toggle reuses the board segmented control,
   aria-pressed in place of aria-current. */
.board-tabs a, .board-tabs button { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.375rem 1rem; font-size: 0.875rem; text-decoration: none; color: var(--ink-3); min-height: 44px; display: inline-flex; align-items: center; background: none; font-weight: 400; transition: border-color 150ms ease, color 150ms ease; }
.board-tabs a.on, .board-tabs a[aria-current="true"], .board-tabs button[aria-pressed="true"] { background: var(--paper-tint); color: var(--navy); font-weight: 600; }
.notice {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-tint);
  color: var(--ink-2);
}
.notice--warning { border-color: var(--st-unverified-fg); color: var(--ink); }
.grid, #incidents { display: grid; gap: 1rem; }
#incidents.timeline { padding-left: 0; }
#incidents.timeline::before, #incidents.timeline .card::before { content: none; }
.feed-group { display: grid; gap: 1rem; margin-block: 2rem; }
.feed-group > h2 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); }
.feed-pagination, #timeline-end { margin-top: 1.5rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.board-page #board { grid-area: board; min-width: 0; }
.board-page #trends { grid-area: trends; }
.board-page #vouch-section { grid-area: vouch; }

:is(.board-page, .tracker-page) .card {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  gap: 0.75rem;
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.card-head { align-items: flex-start; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.card-head .cat { flex: 1 1 12rem; }
.cat { font-size: 0.875rem; text-transform: none; }
.card-title { font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; }
.sum { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.card .sum {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
}
main .actions a, main .sources .chip a, main a.chip,
main .attachments a, main .feed-pagination a, main .table-scroll td a,
main #trends-list a, main .trends-x-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  margin: 0;
}
.sources .chip { padding: 0; background: transparent; }
.actions { gap: 0.5rem 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; }
summary { min-height: 44px; padding-block: 0.625rem; cursor: pointer; color: var(--link); }
.report-details, .translation { border-top: 1px solid var(--line); }
.history-row { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.history-row > summary { color: var(--ink); font-weight: 600; }
.history-row > summary > span { margin-inline-end: 0.75rem; }
.history-row[open] { background: var(--sheet); }
.history-row .history-body { display: grid; gap: 0.75rem; padding-block: 0.75rem; }
.history-row .badge { vertical-align: middle; }
.cuaca-section { display: grid; gap: 1rem; }
.warn-window { color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.warn-text, .warn-text-en { max-width: 65ch; white-space: pre-line; color: var(--ink-2); }
.warn-instr { font-weight: 700; color: var(--ink); }
.badge.cuaca-active { color: var(--st-debunked-fg); background: var(--st-debunked-bg); }
.badge.cuaca-upcoming, .badge.elektrik-active { color: var(--st-unverified-fg); background: var(--st-unverified-bg); }
.badge.cuaca-notice, .badge.cuaca-past,
.badge.elektrik-upcoming, .badge.elektrik-ended { color: var(--st-frozen-fg); background: var(--st-frozen-bg); }
.window-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0; }
.window-facts dt { color: var(--ink-3); }
.window-facts dd { margin: 0; overflow-wrap: anywhere; }
.date-group { margin-block: 1.5rem; }

.line-row:last-child { border-bottom: 0; }
.issue-row { padding-block: 0.5rem; font-size: 0.875rem; }
.issue-n { margin-left: 0.5rem; }
.issue-quote { display: block; min-height: 44px; padding-block: 0.5rem; margin: 0; overflow-wrap: anywhere; }
.line-issues { margin-top: 0.75rem; }
/* s-pick (operator, 2026-09-23): hover dropdown on the Trackers nav item.
   Pure CSS hover + focus-within; touch devices tap through to /trackers.
   The ::before bridge keeps the pointer inside the hover across the gap
   between the link and the panel. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-panel { display: none; position: absolute; top: 100%; right: 0;
  z-index: 50; width: 18rem; max-width: calc(100vw - 2rem);
  padding: 0.375rem 0; margin: 0;
  background: var(--sheet); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.nav-drop-panel::before { content: ""; position: absolute; top: -10px;
  left: 0; right: 0; height: 10px; }
@media (hover: hover) and (pointer: fine) {
  .nav-drop:hover .nav-drop-panel { display: grid; }
}
.nav-drop:not(.dismissed):has(> a:focus-visible) .nav-drop-panel,
.nav-drop:not(.dismissed):has(.nav-drop-panel:focus-within) .nav-drop-panel {
  display: grid; }
.nav-drop.dismissed .nav-drop-panel { display: none; }
@media (hover: none) {
  .nav-drop.tap-open .nav-drop-panel { display: grid; }
}
.site-header nav.site .nav-drop-panel > a { display: flex; align-items: center;
  justify-content: flex-start; min-height: 44px; padding: 0 0.75rem; margin: 0;
  font-size: 0.875rem; color: var(--ink); white-space: nowrap;
  text-transform: none; }
.nav-drop-panel > a:hover { background: var(--paper-tint, #e9eef3); }

.table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sheet); }
.banjir-official { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.banjir-official caption { text-align: left; padding: 0.75rem; color: var(--ink-2); }
.banjir-official th, .banjir-official td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.banjir-official thead th { background: var(--paper-tint); color: var(--ink-2); font-weight: 700; }
.banjir-official tbody th { font-weight: 600; }
.banjir-official tbody tr:nth-child(even) { background: var(--paper-tint); }
.banjir-official tbody tr:hover { background: var(--paper-tint); }
.banjir-official :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.banjir-official tfoot :is(th, td) { border-top: 2px solid var(--line-strong); font-weight: 700; background: var(--paper-tint); }
.banjir-page .banjir-official { min-width: 38rem; }
.banjir-page .jkm-table { min-width: 40rem; }
.denggi-table { table-layout: fixed; }
.denggi-table :is(th, td):first-child { width: 44%; }
.denggi-table .column-date { display: block; white-space: normal; font-size: 0.875rem; font-weight: 400; }
.table-hint { font-size: 0.875rem; color: var(--ink-3); }
/* s137 (fable C2): water-level pills ride the measured status pairs.
   normal=verified, alert/warning=amber, danger=debunked,
   unclassified=frozen grey. The word carries the difference. */
.lvl { display: inline-block; border-radius: var(--radius-pill); padding: 0.25rem 0.625rem; font-weight: 700; }
.lvl-normal { background: var(--st-verified-bg); color: var(--st-verified-fg); }
.lvl-alert, .lvl-warning { background: var(--st-unverified-bg); color: var(--st-unverified-fg); }
.lvl-danger { background: var(--st-debunked-bg); color: var(--st-debunked-fg); }
.lvl-unclassified { background: var(--st-frozen-bg); color: var(--st-frozen-fg); }
.banjir-filter, .banjir-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.banjir-filter [aria-current="true"] { outline: 2px solid var(--focus); outline-offset: 1px; }

button, .btn-primary, .theme-toggle, #authbox button {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea,
#search-form input[type], #search-form select,
#alerts-box select, #alerts-box input[type="text"],
#report-form select, #report-form textarea, select.aqi-city {
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
textarea { display: block; min-height: 8rem; resize: vertical; }
button:disabled { cursor: not-allowed; background: var(--paper-tint); color: var(--ink-3); }
#main :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--st-debunked-fg); }
.field-error, .evidence-error { color: var(--st-debunked-fg); }
#report-form { max-width: 40rem; display: grid; gap: 0.5rem; }
#report-form label, .filter-form label, .elektrik-picker label { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
#report-form label { margin-top: 0.5rem; }
#report-form :is(select, textarea, button) { width: 100%; }
#report-form button[type="submit"] { margin-top: 0.5rem; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.filter-form, .elektrik-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: end; }
.filter-form label, .elektrik-picker label { display: grid; gap: 0.25rem; }
.filter-form select, .elektrik-picker select { width: 100%; }
#search-form > *, #alerts-box > * { min-width: 0; max-width: 100%; }
#search-count, #alerts-status { flex-basis: 100%; }

@media (min-width: 40rem) {
  main#main.board-page, main#main.tracker-page { padding: 2rem 2rem 3rem; }
  .filter-form, .elektrik-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@media (min-width: 48rem) {
  .table-hint { display: none; }
}
@media (min-width: 72rem) {
  main#main.board-page:has(> #trends:not([hidden])) {
    max-width: 72rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 2rem;
    grid-template-areas: "board trends" "vouch trends";
  }
  .board-page #trends:not([hidden]) { margin-top: 0; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}
/* ---- s130 rebrand (glm.md): panel grammar. Tokens live in the one
   layer up top; dark twins are folded into the hand-synced pair. ---- */
/* s130: panel + head pattern (glm.md sections 3-4). */
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--panel-pad); box-shadow: var(--shadow-1); min-width: 0; }
.panel-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.kicker { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.panel-title { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--text-xs); font-weight: 700; font-style: italic; color: var(--ink-3); }
.info-i:hover { color: var(--ink); border-color: var(--ink-2); }
#trends h2.panel-title { font-size: 1.25rem; margin: 0; }
/* s130: surface (glm.md section 2). */
.grid, #incidents { gap: 1.25rem; }
@media (min-width: 40rem) { :is(.board-page, .tracker-page) .card { padding: 1.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color 120ms ease, box-shadow 160ms ease; }
  .card:hover { box-shadow: var(--shadow-2); }
}
/* s130: transit components (glm.md section 5.1-5.2); merged into the
   single definitions above (s137). */
.line-issues summary:hover { border-color: var(--line-strong); color: var(--ink); }
/* s130: bare incident cards inside a panel (glm.md section 5.3); status
   left borders keep coloring the edge. */
.panel > .grid .card { border: 0; box-shadow: none; border-radius: 0; border-left: 4px solid var(--line-strong); padding: 0.75rem 0 0.75rem 1rem; background: transparent; }
.panel > .grid .card + .card { border-top: 1px solid var(--line); }
.panel > .grid .card.st-community-verified { border-left-color: var(--verify); }
.panel > .grid .card.st-debunked { border-left-color: var(--alert); }
.panel > .grid .card.st-unverified, .panel > .grid .card.st-open, .panel > .grid .card.st-frozen { border-left-color: var(--pending); }
/* s130: chips, badges, buttons (glm.md section 5.4-5.5, 5.7). */
.btn-primary, #search-form button[type="submit"], #alerts-box button, #report-form button[type="submit"] { border-radius: var(--radius-pill); }
/* s130: tables (glm.md section 5.6). */
:is(.banjir-official, .jkm-table, .denggi-table, .lb-table) :is(th, td) { padding: 0.875rem 1rem; }
:is(.banjir-official, .jkm-table, .denggi-table, .lb-table) thead th { background: transparent; border-bottom: 1px solid var(--line-strong); font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
:is(.banjir-official, .jkm-table, .denggi-table, .lb-table) tbody tr:nth-child(even) { background: transparent; }
:is(.banjir-official, .jkm-table, .denggi-table, .lb-table) tbody tr:hover { background: var(--paper-tint); }
/* s130: heat strip (glm.md section 5.8). */
.heat-strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; margin-top: 0.75rem; }
.heat-cell { height: 26px; border-radius: 6px; background: var(--paper-tint); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; color: var(--ink-2); }
.heat-cell[data-level="1"] { background: color-mix(in srgb, var(--navy) 18%, var(--sheet)); border-color: color-mix(in srgb, var(--navy) 18%, var(--line)); }
.heat-cell[data-level="2"] { background: color-mix(in srgb, var(--navy) 34%, var(--sheet)); border-color: color-mix(in srgb, var(--navy) 34%, var(--line)); }
.heat-cell[data-level="3"] { background: color-mix(in srgb, var(--navy) 55%, var(--sheet)); border-color: color-mix(in srgb, var(--navy) 55%, var(--line)); color: var(--sheet); }
.heat-cell[data-level="4"] { background: color-mix(in srgb, var(--navy) 82%, var(--sheet)); border-color: color-mix(in srgb, var(--navy) 82%, var(--line)); color: #ffffff; }
.heat-cell[data-level="0"] .heat-n { visibility: hidden; }
.heat-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: var(--text-xs); color: var(--ink-3); }
.heat-legend .ramp { display: inline-flex; gap: 2px; }
.heat-legend .ramp i { width: 12px; height: 8px; border-radius: 2px; }
@media (max-width: 47.99rem) { .heat-cell .heat-n { display: none; } }
/* s133: rollup grammar (fable.md 5.3-5.5): status pill, grade badge, stat trio. */
.status-pill { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; background: var(--st-frozen-bg); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--st-frozen-fg); }
.status-pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status-pill.is-ok { background: var(--st-verified-bg); color: var(--st-verified-fg); }
.status-pill.is-warn { background: var(--st-unverified-bg); color: var(--st-unverified-fg); }
.status-pill.is-bad { background: var(--st-debunked-bg); color: var(--st-debunked-fg); }
.grade-badge { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.25rem; font-weight: 700; }
.grade-a, .grade-b { background: var(--st-verified-bg); color: var(--st-verified-fg); }
.grade-c, .grade-d { background: var(--st-unverified-bg); color: var(--st-unverified-fg); }
.grade-e { background: var(--st-debunked-bg); color: var(--st-debunked-fg); }
.stat-num { font-size: var(--text-stat); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; }
.stat p { margin: 0; }
/* s133: /review page glue. */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 0.25rem; }
.review-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem; background: var(--sheet); }
.review-card .card-head { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; margin: 0 0 0.5rem; }
.stat-cap { font-size: var(--text-xs); color: var(--ink-3); }
.grade-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.grade-note { font-size: var(--text-body-sm); color: var(--ink-2); }
.review-guard { font-size: var(--text-body-sm); color: var(--ink-2); margin: 0; }


/* s138 Season G: unstyled shippers get clothes. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--sheet);
  color: var(--link);
  font-size: var(--text-caption);
  font-weight: 700;
  text-decoration: none;
}
.nav-live-chip {
  background: var(--st-unverified-bg);
  border-color: var(--st-unverified-fg);
  color: var(--st-unverified-fg);
  font-weight: 700;
}
.nav-live-chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
.panel-help { position: relative; display: inline-flex; }
.panel-help summary.info-i { list-style: none; cursor: help; min-width: 44px; min-height: 44px; }
.panel-help summary.info-i::-webkit-details-marker { display: none; }
.panel-help[open] .panel-help-text {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: 260px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 10px);
  background: var(--sheet);
  box-shadow: var(--shadow-2, 0 4px 14px rgba(38, 41, 47, 0.12));
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}
.ramp { display: inline-flex; gap: 2px; }
.ramp i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.ramp-1 { background: var(--paper-tint); }
.ramp-2 { background: color-mix(in srgb, var(--navy) 18%, var(--sheet)); }
.ramp-3 { background: color-mix(in srgb, var(--navy) 34%, var(--sheet)); }
.ramp-4 { background: color-mix(in srgb, var(--navy) 55%, var(--sheet)); }
.ramp-5 { background: color-mix(in srgb, var(--navy) 82%, var(--sheet)); }
/* s151 Season G (spine move 3): every non-prose route opens on one
   .panel.page-head — kicker, h1, freshness, tabs or stats where present.
   Share-layout pages stack the head above the single card. The tracker
   digest-wrap stays a plain grid — one frame per opening, no wrap frame. */
.digest-wrap > .page-head { margin-bottom: 0; }
main.share { flex-direction: column; }
main.share > * { width: 100%; max-width: 560px; }
main.share .page-head h1 { margin: 0; font-size: var(--text-title); line-height: 1.2; }
.chipset { display: inline-flex; }
.chipset .chip:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); border-right: 0; }
.chipset .chip:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; padding: 2px 8px; font-weight: 700; color: var(--navy); }
.chip b { margin-left: 4px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* s138: the auth cluster wears the navbar pill treatment. */
#authbox button {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-tint);
  color: var(--ink-2);
  font-size: var(--text-caption);
  font-weight: 700;
  cursor: pointer;
}
#authbox button:hover { color: var(--navy); border-color: var(--navy); }
#authbox .auth-name {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-caption);
  text-decoration: none;
}
#authbox .auth-name:hover { color: var(--navy); }
.muted-signin { color: var(--ink-3); font-size: var(--text-caption); }
.nav-actions { flex-wrap: nowrap; }
@media (min-width: 64rem) {
  .site-header { flex-wrap: nowrap; }
}

/* s156 lane a1 (R10): delay certificates print alone. Site chrome (nav
   header, footer) drops out of the print tree so the printed page is the
   certificate sheet itself. */
@media print {
  .cert-page .site-header,
  .cert-page footer { display: none; }
  .cert-page main { margin: 0; max-width: none; }
}

/* s167 R11: corroboration chip + reliability labels (verification layer). */
.chip-corr { font-weight: 600; border-color: var(--navy); }
.tl-rel { font-size: 11px; color: var(--ink-3); margin-right: 6px; }
.corr-group { margin-bottom: 8px; }
.corr-plat { font-weight: 700; }
.panduan-context { margin: 0.25rem 0 0; font-size: var(--text-caption); color: var(--ink-2); }
.panduan-assumes { margin: 0.25rem 0 0; font-size: var(--text-caption); color: var(--ink-3); }

/* s139 mobile containment (operator overflow report): wide components
   scroll inside their own boxes instead of pushing the page sideways. */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  .heat-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
  .board-tabs, .board-facets { flex-wrap: wrap; }
  .chipset { max-width: 100%; }
  .chipset .chip:first-child { white-space: normal; }
  .meta { flex-wrap: wrap; }
  .meta > span { max-width: 100%; }
  .digest-wrap, .panel, .page-head { min-width: 0; max-width: 100%; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .new-banner a { white-space: normal; }
  .panduan-card { padding: var(--space-3); }
}
  .station-facet { flex-wrap: wrap; }
  .station-facet select { max-width: 100%; flex: 1 1 140px; }
.panduan-investigate { margin: 0.25rem 0 0; font-size: var(--text-caption); color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 0.5rem; }
.panduan-spark { width: 100%; max-width: 280px; height: 36px; display: block; margin: 0.25rem 0 0.5rem; color: var(--navy); opacity: 0.85; }
.panduan-legend { margin: 0 0 0.25rem; font-size: var(--text-caption); color: var(--ink-2); }
.panduan-verdict { font-weight: 700; color: var(--ink); }
.panduan-thr { margin: 0.25rem 0 0; font-size: var(--text-caption); padding: 0.35rem 0.6rem; border-radius: var(--radius-md); background: var(--paper-tint); }
.panduan-thr.above { background: var(--st-unverified-bg); }
.tl-meta { display: inline; color: var(--ink-2); font-size: var(--text-caption); }
.tl-meta::before { content: " — "; }
.corr-list { list-style: none; padding-left: 0.75rem; margin: 0.25rem 0; }
.corr-list::before { content: none; }
.corr-list li { padding: 0.2rem 0; border: 0; }