/* Hallmark · genre: editorial · macrostructure: Long Document · theme: brand-anchored (Almanaque del Paraná)
 * design-system: design.md · designed-as-app · nav: N6 masthead · footer: Ft4 colophon
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }

/* Mono almanac label — sits ABOVE its heading, stacked (never a left-margin column) */
.sec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2xs);
}

/* ---------- MASTHEAD (N6) ---------- */
.masthead { border-bottom: var(--rule-bold) solid var(--color-ink); background: var(--color-paper); }
.masthead-inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--space-sm) 22px var(--space-2xs);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl);
  color: var(--color-ink); text-decoration: none; letter-spacing: -0.02em;
}
.masthead-issue {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-muted);
}
.masthead-nav { display: flex; gap: var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); }
.masthead-nav a { color: var(--color-ink-2); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.masthead-nav a:hover { border-bottom-color: var(--color-accent); }
.masthead-rule { height: var(--rule-hair); background: var(--color-ink); max-width: var(--maxw); margin: 0 auto; }

/* ---------- HERO (Long Document opening) ---------- */
.hero { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--space-2xl) 22px var(--space-xl);
  display: grid; grid-template-columns: 1.35fr 0.65fr; gap: var(--space-xl); align-items: center;
}
.hero h1 { font-size: var(--text-display); font-weight: 900; margin: var(--space-xs) 0 var(--space-md); max-width: 15ch; }
.hero .lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 42ch; }
.river-rule { display: block; width: 100%; height: 26px; margin: var(--space-md) 0 0; color: var(--color-accent); opacity: 0.9; }
.hero-cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; margin-top: var(--space-lg); }
.hero-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.hero-art { display: flex; justify-content: center; }
.app-icon { width: 168px; height: 168px; border-radius: 34px; border: var(--rule-hair) solid var(--color-rule); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.02em; padding: 12px 20px; border-radius: var(--radius-btn);
  text-decoration: none; border: var(--rule-hair) solid transparent; cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-2); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-sand); }
.gp-badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  background: var(--color-ink); color: var(--color-paper); padding: 10px 16px;
  border-radius: var(--radius-btn); text-decoration: none;
}
.gp-badge svg { width: 22px; height: 22px; }
.gp-badge small { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.gp-badge b { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }

/* ---------- SECTION RHYTHM ---------- */
.entry { padding: var(--space-2xl) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.entry:first-of-type { border-top: none; }
.sec-head { max-width: var(--measure); margin-bottom: var(--space-lg); }
.sec-head h2 { font-size: var(--text-2xl); margin-bottom: var(--space-xs); }
.sec-head p { font-size: var(--text-md); color: var(--color-ink-2); }
.note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-md); line-height: 1.7; }
.note a { color: var(--color-accent); }

/* ---------- MAP ---------- */
.map-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 0 var(--space-md); }
.map-toggles label {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule); padding: 7px 13px; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
}
.map-toggles input { accent-color: var(--color-accent); width: 15px; height: 15px; cursor: pointer; }
#map {
  height: clamp(380px, 60vh, 560px); width: 100%; border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule); z-index: 0; background: var(--color-sand);
}
.leaflet-popup-content, .leaflet-container { font-family: var(--font-body); }
.leaflet-div-icon { background: transparent; border: none; }
.mk { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid #3A6070; font-size: 14px; line-height: 1; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.cl { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: .82rem; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* ---------- GUIDES (almanac directory) ---------- */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-md); }
.guide {
  /* Surface and text both come from the theme tokens. Defining the background
     here rather than in a system-preference media query is what keeps the card
     readable when the theme toggle disagrees with the operating system. */
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md); padding: var(--space-lg);
  display: flex; flex-direction: column;
}
.guide h3 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.guide-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-bottom: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.guide p { flex: 1; color: var(--color-ink-2); }
.guide-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); }
.guide-link { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent);
  text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 1px;
  /* The card is a flex column, so without this the underline spans its width. */
  align-self: flex-start; }
.guide-cta {
  display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono);
  font-weight: 600; font-size: var(--text-sm); padding: 9px 15px; border-radius: var(--radius-btn);
  text-decoration: none; background: #1EA952; color: #fff;
}
.guide-cta.alt { background: var(--color-accent); color: var(--color-accent-ink); }

/* ---------- APP FEATURES (numbered almanac entries — not an icon-tile grid) ---------- */
.feature-list { border-top: var(--rule-hair) solid var(--color-rule); }
.feature {
  display: grid; grid-template-columns: 3rem 2.5rem 1fr; gap: var(--space-md); align-items: start;
  padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
}
.feature-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); padding-top: 0.35rem; }
.feature-ico { color: var(--color-accent); }
.feature-ico svg { width: 26px; height: 26px; }
.feature h3 { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.feature p { color: var(--color-ink-2); }

/* ---------- SHOWCASE ---------- */
.showcase { background: var(--color-sand); }
.shots { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; }
.phone { width: 288px; max-width: 100%; margin: 0; }
.phone img { width: 100%; display: block; border-radius: 26px; border: var(--rule-hair) solid var(--color-rule);
  /* The img carries width and height attributes so the layout does not jump
     while it loads. Without this the attribute height wins and the screenshot
     renders stretched. */
  height: auto; }
.phone figcaption { text-align: center; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-muted); padding-top: var(--space-2xs); }

/* ---------- STATIONS (tabular almanac data) ---------- */
.stations ul { list-style: none; padding: 0; margin: var(--space-sm) 0 0;
  /* Wide enough that "Villa Constitución 2.20 m" fits on one line. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0;
  border-top: var(--rule-hair) solid var(--color-rule); border-left: var(--rule-hair) solid var(--color-rule); }
.stations li { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink); font-weight: 600;
  padding: 11px 14px; border-bottom: var(--rule-hair) solid var(--color-rule); border-right: var(--rule-hair) solid var(--color-rule); }

/* ---------- SOURCES / EMERGENCY / FOOTER ---------- */
.sources { background: var(--color-sand); }
.src-grid { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-md); }
.src { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-md); padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); }
.src b { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.src span { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); word-break: break-word; }
.disclaimer { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted);
  border-left: var(--rule-bold) solid var(--color-rule); padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); }
.emergency { display: flex; align-items: center; gap: var(--space-sm); background: var(--color-emergency); color: #fff;
  border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.emergency svg { width: 26px; height: 26px; flex: none; }
.emergency b { font-family: var(--font-display); font-size: var(--text-md); } .emergency span { opacity: .92; font-size: var(--text-sm); }

.colophon { border-top: var(--rule-bold) solid var(--color-ink); background: var(--color-paper); padding: var(--space-xl) 0; }
.colophon-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg); }
.colophon .wordmark { font-size: var(--text-lg); display: block; margin-bottom: var(--space-2xs); }
.colophon p { font-size: var(--text-sm); color: var(--color-muted); max-width: 34ch; }
.colophon h4 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.colophon ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.colophon a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.colophon a:hover { color: var(--color-accent); }
.colophon .fineprint { grid-column: 1 / -1; margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- CONTENT PAGES (guides + legal, Long Document) ---------- */
.doc-top { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) 0 var(--space-xl); }
.crumbs { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-md); }
.crumbs a { color: var(--color-accent); text-decoration: none; }
.doc-top h1 { font-size: var(--text-3xl); font-weight: 900; margin: var(--space-xs) 0 var(--space-sm); max-width: 20ch; }
.doc-top .lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: var(--measure); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.chip { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); padding: 6px 11px; }
.prose { max-width: var(--measure); }
.prose h2, .doc section h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.prose p { margin-bottom: var(--space-sm); }
.facts { list-style: none; padding: 0; margin: var(--space-sm) 0 0; border-top: var(--rule-hair) solid var(--color-rule); max-width: var(--measure); }
.facts li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-md); padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts b { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.facts span { color: var(--color-ink); }
.faq { max-width: var(--measure); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-accent); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.cta-box { max-width: var(--measure); margin-top: var(--space-xl); padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.cta-box h2 { margin: 0 0 var(--space-2xs); font-size: var(--text-xl); }
.cta-box p { color: var(--color-ink-2); margin-bottom: var(--space-md); }
.wa { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-weight: 600;
  font-size: var(--text-sm); padding: 11px 18px; border-radius: var(--radius-btn); text-decoration: none; background: #1EA952; color: #fff; }
.wa.alt { background: var(--color-accent); color: var(--color-accent-ink); }

/* Standalone footer for the legal page */
.site-foot { border-top: var(--rule-bold) solid var(--color-ink); padding: var(--space-lg) 0; margin-top: var(--space-2xl);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.site-foot a { color: var(--color-accent); text-decoration: none; }

.legal { max-width: 800px; margin: 0 auto; padding: var(--space-xl) 22px var(--space-2xl); }
.legal h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2xs); }
.legal .date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-lg); }
.legal h2 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
.legal p { margin-bottom: var(--space-sm); }
.legal ul { margin: 0 0 var(--space-sm); padding-left: var(--space-md); }
.legal li { margin-bottom: var(--space-3xs); }
.legal .contact { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg); margin-top: var(--space-lg); background: var(--color-paper-2); }
.legal a { color: var(--color-accent); }

/* ---------- GUIDE PAGES · .doc scope (preserves legacy .top / .eyebrow markup) ---------- */
.doc .top { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) 0 var(--space-xl); }
.doc .eyebrow { display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2xs); }
.doc .top h1 { font-size: var(--text-3xl); font-weight: 900; margin: var(--space-xs) 0 var(--space-sm); max-width: 20ch; }
.doc .top .lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: var(--measure); }
.doc main { padding: var(--space-xl) 0 var(--space-2xl); }
.doc main section h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
  color: var(--color-ink); margin: var(--space-xl) 0 var(--space-sm); }
.doc .prose:first-child h2 { margin-top: 0; }
.doc footer { border-top: var(--rule-bold) solid var(--color-ink); padding: var(--space-lg) 0; margin-top: var(--space-2xl); }
.doc footer .wrap { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); }
.doc footer a { color: var(--color-accent); text-decoration: none; }

/* ---------- MOTION ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, label:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: opacity 150ms linear; }
  * { scroll-behavior: auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero-art { justify-content: flex-start; }
  .colophon-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .hero-inner { padding-top: var(--space-xl); }
  .guides { grid-template-columns: 1fr; }
  .guide, .guide:nth-child(even) { padding: var(--space-md) 0; border-right: none; }
  .feature { grid-template-columns: 2.2rem 1fr; }
  .feature-ico { display: none; }
  .src { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .colophon-inner { grid-template-columns: 1fr; }
  .masthead-inner { gap: var(--space-2xs); }
  .facts li { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

/* CSS-only compatibility layer for the original guide and legal-page DOM. */
.top { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) 0 var(--space-xl); }
.top .eyebrow { display:block; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-accent); margin:0 0 var(--space-2xs); }
.top h1 { font-size:var(--text-3xl); font-weight:900; margin:var(--space-xs) 0 var(--space-sm); max-width:20ch; }
.top .lede { font-size:var(--text-lg); color:var(--color-ink-2); max-width:var(--measure); }
.top + main { padding:var(--space-xl) 0 var(--space-2xl); }
.top + main section h2 { font-size:var(--text-xl); margin:var(--space-xl) 0 var(--space-sm); }
.container { max-width:800px; margin:0 auto; padding:var(--space-xl) 22px var(--space-2xl); }
.container h1 { font-size:var(--text-3xl); margin-bottom:var(--space-2xs); }
.container h2 { font-size:var(--text-lg); margin:var(--space-lg) 0 var(--space-xs); }
.container p { margin-bottom:var(--space-sm); }
.container ul { margin:0 0 var(--space-sm); padding-left:var(--space-md); }
.container li { margin-bottom:var(--space-3xs); }
.container .date { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-muted); margin-bottom:var(--space-lg); }

/* ---------- LIVE STATION LEVELS ---------- */
/* Names are static so they stay indexable; the heights arrive from the API. */
.stations li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.st-level { font-variant-numeric: tabular-nums; color: var(--color-muted); font-weight: 600;
  /* The reading is one unit: never break "2.20" away from "m". */
  white-space: nowrap; flex: none; }
.st-level[data-state="live"] { color: var(--color-accent); }
.st-level[data-state="near-alert"] { color: var(--color-emergency); }
.st-level[data-state="alert"],
.st-level[data-state="evacuation"] { color: #fff; background: var(--color-emergency);
  border-radius: var(--radius-sm, 4px); padding: 1px 6px; }
.stations-note { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-muted); }

/* ---------- LOCALITY DIRECTORY ---------- */
.river-now { border-top: var(--rule-bold) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md) 0; margin: var(--space-lg) 0; }
.river-now h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted); margin: 0 0 var(--space-2xs); }
.river-figure { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl);
  color: var(--color-ink); font-variant-numeric: tabular-nums; }
.river-figure .st-level[data-state="near-alert"] { color: var(--color-emergency); }

.svc-list { list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.svc-list li { padding: 10px 0; border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: var(--text-sm); }

.stations-grid { list-style: none; padding: 0; margin: var(--space-md) 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0;
  border-top: var(--rule-hair) solid var(--color-rule); border-left: var(--rule-hair) solid var(--color-rule); }
.stations-grid li { padding: 11px 14px; font-family: var(--font-mono); font-size: var(--text-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule); border-right: var(--rule-hair) solid var(--color-rule); }

.muted { color: var(--color-muted); }

.river-nav { display: flex; justify-content: space-between; gap: var(--space-md);
  margin: var(--space-xl) 0; padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: var(--text-sm); }

.stations li .st-name { color: var(--color-ink); text-decoration: none; }
.stations li .st-name:hover { color: var(--color-accent); text-decoration: underline;
  text-underline-offset: 3px; }

/* Seven-day river trend. Ships hidden and is revealed by the page script only
   when there are two readings to join, so a station with no history looks the
   same as it did before the chart existed. */
.river-trend { border-top: var(--rule-hair) solid var(--color-rule-2);
  padding: var(--space-md) 0; margin-top: var(--space-md); }
.river-trend h2 { font-size: var(--text-sm); text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-muted); margin: 0 0 var(--space-2xs); }
.trend-summary { font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--color-ink); margin: 0 0 var(--space-sm); }
.trend-chart { width: 100%; max-width: 40rem; }
/* The viewBox carries the aspect ratio; height is fixed so the curve keeps a
   readable slope on a phone instead of collapsing into a flat line. */
.trend-svg { display: block; width: 100%; height: 150px; overflow: visible; }
.trend-line { fill: none; stroke: var(--color-accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.trend-area { fill: var(--color-accent-bg); stroke: none; }
.trend-alert { stroke: var(--color-emergency); stroke-width: 1;
  stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.trend-scale { font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; color: var(--color-ink-2);
  margin: var(--space-2xs) 0 0; }
.river-trend .trend-range { margin-top: var(--space-3xs); }

/* What the river did since yesterday — the question people arrive with. The
   arrow is drawn from data-dir so the script only sets an attribute. */
.trend-day { display: flex; align-items: baseline; gap: var(--space-2xs);
  margin: 0 0 var(--space-2xs); font-family: var(--font-display);
  font-size: var(--text-xl); color: var(--color-ink); }
.trend-arrow { font-size: var(--text-md); line-height: 1; }
.trend-day[data-dir="up"] .trend-arrow::before { content: "▲"; }
.trend-day[data-dir="down"] .trend-arrow::before { content: "▼"; }
.trend-day[data-dir="flat"] .trend-arrow::before { content: "—"; }
/* A rising river is the direction that carries risk, so it takes the accent.
   Falling and still stay quiet rather than borrowing the alert red, which is
   reserved for actually nearing the alert height. */
.trend-day[data-dir="up"] .trend-arrow,
.trend-day[data-dir="up"] .trend-day-text { color: var(--color-accent); }
.trend-day[data-dir="down"] .trend-arrow,
.trend-day[data-dir="down"] .trend-day-text { color: var(--color-ink-2); }
.trend-day[data-dir="flat"] .trend-arrow,
.trend-day[data-dir="flat"] .trend-day-text { color: var(--color-muted); }
.trend-day-detail { font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-muted); }
/* With the day badge carrying the headline, the week steps down to context. */
.trend-summary { font-size: var(--text-md); color: var(--color-ink-2); }

/* Share. Hidden until the script confirms the browser can share or copy, so a
   button that would do nothing is never painted. */
.river-actions { margin-top: var(--space-sm); }
.share-btn { background: transparent; }
.share-icon { width: 1em; height: 1em; display: inline-block;
  /* Drawn in CSS so the button costs no request and inherits the text colour. */
  background: currentColor;
  -webkit-mask: var(--share-glyph) center / contain no-repeat;
  mask: var(--share-glyph) center / contain no-repeat; }
:root {
  --share-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="10.5" x2="15.4" y2="6.5"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/></svg>');
}

/* Install bar. Slim, sticky at the bottom, dismissible — the shape Google's
   guidance allows. It appears only after the reader has gone a quarter down
   the page, and never again once closed. */
.app-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
  background: var(--color-paper-2);
  border-top: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.10);
}
.app-bar-icon { width: 44px; height: 44px; border-radius: 10px; flex: none;
  border: var(--rule-hair) solid var(--color-rule); }
.app-bar-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
  line-height: 1.25; }
.app-bar-copy b { font-family: var(--font-display); font-size: var(--text-base);
  color: var(--color-ink); }
.app-bar-copy span { font-size: var(--text-sm); color: var(--color-muted);
  /* One line on a phone: the bar has to stay slim to stay allowed. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-cta { flex: none; padding: 9px 16px; }
.app-bar-close { flex: none; background: none; border: 0; cursor: pointer;
  color: var(--color-muted); font-size: var(--text-lg); line-height: 1;
  /* A 44px target: the close has to be as easy to hit as the install. */
  width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; }
.app-bar-close:hover { color: var(--color-ink); }

/* The bar floats over the footer, so give the page somewhere to end. */
body:has(.app-bar:not([hidden])) { padding-bottom: 76px; }

@media (max-width: 30rem) {
  .app-bar-icon { width: 36px; height: 36px; }
  .app-bar-copy b { font-size: var(--text-sm); }
  .app-bar-copy span { font-size: var(--text-xs); }
  .app-bar-cta { padding: 8px 12px; font-size: var(--text-xs); }
}

/* ---------- RIVER GAUGE ---------- */
/* "2.42 m" answers nothing alone. Against the heights at which Prefectura
   declares alert and evacuation, the same number answers at a glance. */
.river-figure .st-level { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.river-figure .unit { font-size: .42em; font-weight: 600; color: var(--color-muted);
  letter-spacing: 0; }
.st-level[data-state="normal"] { color: var(--color-accent); }
.st-level[data-state="near-alert"], .st-level[data-state="alert"],
.st-level[data-state="evacuation"] { color: var(--color-emergency); }

/* Room above and below for the two labels, which sit on opposite sides because
   alert and evacuation are only centimetres apart and would otherwise collide. */
.gauge { margin: var(--space-xl) 0; max-width: 34rem; }
.gauge-track { position: relative; height: 14px; border-radius: 7px;
  background: var(--color-sand); }
.gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 7px;
  background: var(--color-accent); }
.gauge-fill[data-state="near-alert"], .gauge-fill[data-state="alert"],
.gauge-fill[data-state="evacuation"] { background: var(--color-emergency); }
.gauge-mark { position: absolute; top: 0; bottom: 0; }
.gauge-mark i { position: absolute; top: -5px; bottom: -5px; left: 0; width: 2px;
  background: var(--color-ink); opacity: .5; }
.gauge-mark b { position: absolute; bottom: 24px; left: 0; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; color: var(--color-muted); }
.gauge-mark-evac i { background: var(--color-emergency); opacity: .75; }
.gauge-mark-evac b { bottom: auto; top: 24px; color: var(--color-emergency); }

.river-margin { font-size: var(--text-md); color: var(--color-ink-2);
  margin-top: var(--space-sm); }

/* ---------- SPACING ---------- */
/* p { margin: 0 } and an unstyled <section> left the intro touching the heading
   below it. Sections on a locality page carry their own rhythm. */
main > section + section { margin-top: var(--space-lg); }
.intro .lede { max-width: var(--measure); }

/* ---------- SERVICE GROUPS ---------- */
.svc-head { display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-lg); }
.svc-ico { width: 1.05em; height: 1.05em; flex: none; color: var(--color-accent); }
.svc-list li a { text-decoration: none; }
.svc-list li a:hover { text-decoration: underline; }

/* ---------- SHARE ---------- */
.river-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  margin-top: var(--space-md); }
.wa-icon { width: 1.05em; height: 1.05em; display: inline-block; background: currentColor;
  -webkit-mask: var(--wa-glyph) center / contain no-repeat;
  mask: var(--wa-glyph) center / contain no-repeat; }
:root {
  --wa-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm5.8 14.16c-.24.68-1.42 1.31-1.96 1.35-.5.05-.99.24-3.4-.71-2.87-1.13-4.69-4.06-4.83-4.25-.14-.19-1.15-1.53-1.15-2.92s.73-2.07 1-2.35c.26-.29.57-.36.76-.36h.55c.18 0 .41-.03.64.49.24.57.81 1.97.88 2.11.07.14.12.31.02.5-.09.19-.14.31-.28.48l-.42.49c-.14.14-.28.29-.12.57.14.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.28.14.44.12.6-.07.17-.19.69-.8.87-1.08.19-.28.37-.24.62-.14.26.09 1.65.78 1.93.92.28.14.47.21.54.33.07.12.07.68-.17 1.36Z"/></svg>');
}
/* Alert sits near the top of the scale by construction, so its label is
   anchored to the mark rather than centred on it, which would overflow. */
.gauge-mark-end b { transform: translateX(-100%); padding-right: 4px; }