/* FishCue — round-7 production stylesheet ("First Light on Contour Paper").
 *
 * Locked design (kanban t_a1dc0302; sources docs/design/mockups/round7/):
 *   - contour-paper canvas (round-3 base) on every page
 *   - header: text-only serif "FishCue" (WM1 typography) over a 2-layer
 *     mountain dawn scene (sun rising from behind the 2nd ridge), title →
 *     scene gap 6px, pad-top 12px (10px ≤480px), scene 140px / 56px ≤480px
 *   - NO logo, NO badge, NO bell (Ray, 2026-09-01 — logo work deferred)
 *   - system fonts only; serif appears in the wordmark + one H1 accent word
 *
 * This file is served with a cache-busting ?v=<hash> (mobile fix #3 —
 * app.py computes it from this file's bytes; bumping the CSS changes the URL).
 */

:root {
  --paper: #f4f0e3;
  --card: #fffdf6;
  --card-raised: #fffef9;
  --ink: #1f3527;
  --green: #2d5a3d;
  --green-deep: #24482f;
  --terra: #c2542e;
  --terra-deep: #a8481f;   /* deep terracotta: 5.69:1 on card — AA at 12.5px */
  --haze: #e9edd9;
  --muted: #656b57;
  --border: #ddd4bf;
  --divider: #f0ead9;
  --placeholder: #b3a98f;
  --ok: #2d5a3d;
  --ok-soft: #e7efe4;
  --ok-border: #cbddc7;
  --danger: #a33820;
  --danger-soft: #f9e8e2;
  --danger-border: #ecc3b4;
  --radius: 14px;
  --radius-control: 10px;
  --maxw: 620px;
  --maxw-admin: 960px;
  /* Serif stack hardened for Android/Linux: "Noto Serif" named explicitly so
     the fallback is a chosen, verified font. */
  /* t_6322a20c lane's server-side chart SVG hardcodes this legacy var name in
     its fill attribute; aliased to the r7 brand green so the chart follows the
     re-skin without touching their app.py code. */
  --color-water: var(--green);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231f3527' stroke-opacity='.06' stroke-width='1.1'%3E%3Cpath d='M96 190 C 96 128 150 84 216 88 C 292 93 340 140 330 204 C 320 268 258 312 184 304 C 118 297 96 252 96 190 Z'/%3E%3Cpath d='M140 196 C 138 150 180 116 232 120 C 290 124 316 162 308 210 C 300 258 252 288 198 282 C 154 277 142 236 140 196 Z'/%3E%3Cpath d='M180 200 C 179 168 208 144 244 147 C 284 151 300 178 294 208 C 288 238 254 256 220 251 C 196 247 181 226 180 200 Z'/%3E%3Cpath d='M216 204 C 215 184 232 170 254 172 C 276 175 286 192 281 208 C 276 224 254 232 236 227 C 223 223 217 215 216 204 Z'/%3E%3Cpath d='M336 330 C 320 316 318 300 330 286 C 342 272 340 256 326 244'/%3E%3Cpath d='M40 52 C 56 40 82 42 94 54 C 106 66 100 84 82 88 C 62 92 42 84 38 70 C 36 63 37 57 40 52 Z'/%3E%3Cpath d='M56 60 C 64 54 76 55 82 61 C 87 67 84 74 76 76 C 67 78 58 74 56 68 Z'/%3E%3Cpath d='M330 352 C 348 344 372 350 380 364 C 387 377 378 390 362 391 C 345 392 332 383 330 370 C 329 363 329 357 330 352 Z'/%3E%3C/g%3E%3C/svg%3E");
  --contour-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231f3527' stroke-opacity='.09' stroke-width='1.1'%3E%3Cpath d='M96 190 C 96 128 150 84 216 88 C 292 93 340 140 330 204 C 320 268 258 312 184 304 C 118 297 96 252 96 190 Z'/%3E%3Cpath d='M180 200 C 179 168 208 144 244 147 C 284 151 300 178 294 208 C 288 238 254 256 220 251 C 196 247 181 226 180 200 Z'/%3E%3Cpath d='M40 52 C 56 40 82 42 94 54 C 106 66 100 84 82 88 C 62 92 42 84 38 70 C 36 63 37 57 40 52 Z'/%3E%3C/g%3E%3C/svg%3E");
  --focus-ring: 0 0 0 3px rgba(45, 90, 61, 0.12);
}

/* ── Page shell ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  /* Contour Paper: faint topographic sheet — a lake basin and two ponds,
     1px ink lines at 6% opacity (round-3 canvas). */
  background-image: var(--contour);
  background-size: 420px 420px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--green); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
main { flex: 1; padding: 8px 0 40px; }

/* ── Header: wordmark in the dawn sky, lake scene under it ────────────────
 * Round-7 (D5): text-only serif wordmark (WM1 "First Rise" typography) —
 * no logo, no badge, no bell. Tightened spacing: pad-top 12px (10 ≤480),
 * title → scene gap 6px, scene 140px (56 ≤480). Header @375 ≈ 100px. */
.site-header { padding: 12px 0 0; background: linear-gradient(to bottom, #f4f0e3 0%, #e9edd9 100%); }
.brand { font-family: var(--serif); color: var(--ink); text-decoration: none;
  display: block; width: fit-content; line-height: 1.08; }
.brand .word { font-size: 1.62rem; font-weight: 700; letter-spacing: -0.012em; }
.brand .cue { color: var(--terra); }
.brand .beta { color: var(--terra); font-size: 0.73rem; font-weight: 600;
  letter-spacing: 0.03em; margin-left: 0.28em; }
.scene { display: block; width: 100%; height: 140px; margin-top: 6px; }
.scene svg { display: block; width: 100%; height: 100%; }

/* ── Headings ───────────────────────────────────────────────────────────── */
h1 { font-family: var(--sans); font-size: 1.98rem; line-height: 1.22;
  letter-spacing: -0.028em; margin: 16px 0 12px; font-weight: 750; }
h1 em { font-family: var(--serif); font-style: italic; font-weight: 700;
  color: var(--green-deep); padding-right: 0.05em; letter-spacing: 0; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 520px; margin-bottom: 12px; }
.sub { color: var(--muted); margin-bottom: 14px; }
.sub strong { color: var(--ink); font-weight: 600; }
h2.section { font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 22px 0 10px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; margin: 26px 0;
  box-shadow: 0 1px 0 #fff inset, 0 14px 30px rgba(60, 50, 30, 0.07);
  position: relative;
}
.step-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--terra-deep); margin-bottom: 4px; }
.card h2 { font-family: var(--sans); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.card .card-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; }
/* D12 (t_1e2cb391): muted region-scope line under the Step-1 card-sub. */
.bc-note { margin: -8px 0 16px; font-size: 0.8rem; color: var(--muted); }

/* ── Chips (sort control uses these too; t_90783eff) ────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ── Sort control (t_90783eff) — chip-styled GET links, JS-off safe ────── */
.sort-chips { align-items: center; }
.sort-label { font-size: 0.88rem; font-weight: 650; color: var(--ink-soft); margin-right: 2px; }
.chip.sort-chip { text-decoration: none; display: inline-block; }
.chip.sort-chip.active { cursor: default; }

.chip {
  background: var(--card); color: var(--green);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 15px; font-size: 0.92rem; font-weight: 550; cursor: pointer; font-family: inherit;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.chip:hover { border-color: var(--green); }
.chip.active { background: var(--green); border-color: var(--green); color: #fdfbf2; }
/* D12 (t_1e2cb391): direction mini-chips beside the active sort chip —
   same r7 chip language, smaller. */
.chip.mini { padding: 3px 10px; font-size: 0.78rem; font-weight: 600; }

/* ── Search + count ─────────────────────────────────────────────────────── */
/* D10 (t_344f98d6): region selector row — same control language as the
   search box (border, radius, card-raised), label matches .sort-label. */
.region-row { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
.region-label { font-size: 0.88rem; font-weight: 650; color: var(--ink-soft); }
#region-select {
  flex: 1 1 auto; max-width: 260px; padding: 9px 12px; font-size: 0.95rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-control);
  background: var(--card-raised); color: var(--ink); cursor: pointer;
}
#region-select:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.region-go { padding: 8px 14px !important; }
.searchbar { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
.searchbox { position: relative; flex: 1 1 auto; }
.searchbox svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbox input {
  width: 100%; padding: 12px 14px 12px 38px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-control); background: var(--card-raised); color: var(--ink);
}
.searchbox input:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.searchbox input::placeholder { color: var(--placeholder); }
.count { font-size: 0.9rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.count strong { color: var(--green); }
.count-mobile { display: none; font-size: 0.9rem; color: var(--muted); margin: 0 0 8px; }

/* ── List / map segmented control ───────────────────────────────────────── */
.modes { display: flex; gap: 6px; margin-bottom: 12px; }
.modes button {
  flex: 1; padding: 9px 10px; font-size: 0.92rem; font-weight: 600; font-family: inherit;
  background: var(--card-raised); color: var(--muted);
  border: 1.5px solid var(--border); border-radius: var(--radius-control); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.modes button svg { flex: none; }
.modes button.active { background: var(--green); border-color: var(--green); color: #fdfbf2; }

/* ── Lake list ───────────────────────────────────────────────────────────── */
.lake-list {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  max-height: 460px; overflow-y: auto; margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.lake-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--divider); }
.lake-row:last-child { border-bottom: none; }
.lake-row:hover { background: #faf6ea; }
.lake-row input[type="checkbox"] { accent-color: var(--green); width: 18px; height: 18px; flex: none; cursor: pointer; }
.lake-name { font-size: 0.98rem; flex: 1 1 auto; min-width: 0; }
.lake-region { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.lake-pin { flex: none; color: var(--green); display: inline-flex; }
.lake-row.hidden { display: none; }
.no-match { display: none; padding: 14px 16px; color: var(--muted); font-size: 0.9rem; }
.no-match.show { display: block; }
.list-note { font-size: 0.8rem; color: var(--muted); text-align: center; padding: 8px 0 2px; }
.zero-hint { display: none; margin: 10px 0 0; font-size: 0.88rem; color: var(--muted); }
.zero-hint.show { display: block; }

/* ── Map panel (progressive enhancement; search works JS-off) ───────────── */
.map-panel { display: none; margin-bottom: 4px; }
.map-panel.show { display: block; }
#map { height: 300px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--haze); z-index: 0; }
.map-fallback {
  height: 300px; border-radius: var(--radius); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 20px;
  background-color: var(--haze);
  background-image: var(--contour-strong);
  background-size: 420px 420px;
}
.map-fallback p { font-size: 0.9rem; color: var(--muted); max-width: 300px; }
.map-fallback .btn-secondary, .btn-secondary {
  display: inline-block; padding: 9px 16px; font-size: 0.9rem; font-weight: 650; font-family: inherit;
  background: var(--card); color: var(--green); border: 1.5px solid var(--border); border-radius: var(--radius-control); cursor: pointer;
}
.map-note { font-size: 0.8rem; color: var(--muted); text-align: center; padding: 8px 0 2px; }

/* ── Selected tray ───────────────────────────────────────────────────────── */
.tray { border: 1px dashed var(--border); border-radius: var(--radius-control); padding: 10px 12px; margin-top: 14px; background: var(--card-raised); }
.tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tray-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.tray-hint { font-size: 0.8rem; color: var(--muted); }
.tray-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tray-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green); color: #fdfbf2; border-radius: 999px;
  padding: 5px 7px 5px 13px; font-size: 0.86rem; font-weight: 600;
}
.tray-chip button {
  width: 19px; height: 19px; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(253, 251, 242, 0.22); color: #fdfbf2; font-size: 0.72rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
}
.tray-chip button:hover { background: rgba(253, 251, 242, 0.35); }
.tray-empty { font-size: 0.86rem; color: var(--muted); }

/* ── Picks summary (email card + check-email page) ───────────────────────── */
.picks-summary { border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px 14px; margin-bottom: 16px; background: var(--card-raised); }
.picks-summary .sum-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.picks-summary .sum-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.picks-summary .sum-edit { font-size: 0.86rem; font-weight: 600; color: var(--green); text-decoration: none; }
.picks-summary .sum-edit:hover { text-decoration: underline; }
.sum-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sum-chip { background: var(--haze); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 0.84rem; font-weight: 600; }
.sum-none { font-size: 0.88rem; color: var(--muted); }

/* ── Form fields + buttons ───────────────────────────────────────────────── */
.field { margin-bottom: 4px; }
.field label { display: block; font-weight: 650; font-size: 0.95rem; margin-bottom: 8px; color: var(--ink); }
.field input {
  width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-control); background: var(--card-raised); color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.field input::placeholder { color: var(--placeholder); }
.btn-primary {
  display: block; width: 100%; margin-top: 16px;
  padding: 14px 18px; font-size: 1.02rem; font-weight: 700; font-family: inherit;
  background: var(--green); color: #fdfbf2; border: none; border-radius: var(--radius-control); cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--green-deep); }
.trust-note { margin-top: 14px; font-size: 0.87rem; color: var(--muted); text-align: center; }
.small-line { margin-top: 16px; font-size: 0.87rem; color: var(--muted); text-align: center; }
.small-line a, .trust-note a { color: var(--green); }

/* sticky save bar — gradient fade so rows scrolling under never collide hard */
.save-row { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--paper) 78%, rgba(244, 240, 227, 0)); }
.save-row .btn-primary { margin-top: 0; }

/* ── Flashes ─────────────────────────────────────────────────────────────── */
.flash { border-radius: var(--radius-control); padding: 12px 14px; margin: 14px 0; font-size: 0.95rem; }
.flash.success { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-border); }
.flash.error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); }

/* ── D12 (t_1e2cb391): the .whats-next box was removed — the Step-2
   card-sub now carries the message inline. ──────────────────────────── */

/* ── Steps trail (home) ──────────────────────────────────────────────────── */
.how { margin: 6px 0 32px; }
.how h2 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 14px; }
.steps { list-style: none; border-left: 2px solid var(--border); margin-left: 9px; padding: 0 0 0 4px; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0 9px 6px; position: relative; font-size: 0.94rem; color: var(--muted); }
.step::before {
  content: ""; position: absolute; left: -16px; top: 16px; width: 20px; height: 20px;
  background: var(--haze); border: 2px solid var(--paper); border-radius: 999px;
}
.step .glyph { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--haze);
  display: flex; align-items: center; justify-content: center; color: var(--green); }
.step strong { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 1px; }

/* ── Manage page bits ────────────────────────────────────────────────────── */
.unsub { margin-top: 20px; font-size: 0.92rem; color: var(--muted); text-align: center; }
.unsub a { color: var(--muted); text-decoration: underline; }
.forget-form { margin-top: 10px; text-align: center; }
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; color: var(--muted);
  text-decoration: underline;
}
.linklike:hover { color: var(--green); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ────────────────────────────────────────────────────────────────
 * Attribution lives on /credits only (A3 sweep rule; footer copy matches
 * the current production footer). */
.site-footer { border-top: 1px solid var(--border); padding: 22px 0 34px; color: var(--muted); font-size: 0.88rem; }
.site-footer p { margin: 4px 0; }
.site-footer a { color: var(--green); }

/* ── Leaflet (progressive enhancement) ───────────────────────────────────── */
.leaflet-tile { filter: grayscale(0.3) sepia(0.16) brightness(1.03) saturate(0.9); }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { font-size: 0.62rem !important; background: rgba(255, 253, 246, 0.85) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--green) !important; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { font-family: var(--sans); font-size: 0.9rem; margin: 10px 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Admin (internal tool) — quiet round-3 contour-paper skin, no dawn scene.
 * The admin pages share the same tokens; layout is wider and data-first.
 * ═══════════════════════════════════════════════════════════════════════ */
.admin { max-width: var(--maxw-admin); margin: 0 auto; width: 100%; padding: 0 20px; }
.admin h1 { margin: 18px 0 14px; font-size: 1.5rem; }
.admin h2 { margin: 22px 0 10px; font-size: 1.05rem; }

.admin-back { display: inline-block; margin-top: 14px; font-size: 0.95rem; text-decoration: none; }

/* stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; text-align: center;
  box-shadow: 0 1px 0 #fff inset, 0 8px 18px rgba(60, 50, 30, 0.05);
}
.stat-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.82rem; color: var(--muted); }

/* admin action row — mobile fix #2: wraps, never clips at 375px */
.admin-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin-bottom: 22px;
}
.admin-actions form { display: contents; }   /* buttons wrap as if direct children */

/* tables — mobile fix #1: .table-scroll wrapper scrolls wide tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 22px;
}
.data-table th, .data-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--divider);
  font-size: 0.92rem; white-space: nowrap;
}
.data-table th { background: var(--haze); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
.data-table tr:last-child td { border-bottom: none; }
.data-table td.error-cell { white-space: normal; max-width: 340px; word-break: break-word; }

/* buttons in admin */
.btn {
  display: inline-block; padding: 9px 16px; font-size: 0.92rem; font-weight: 650; font-family: inherit;
  border-radius: var(--radius-control); cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--border); background: var(--card); color: var(--green);
}
.btn:hover { border-color: var(--green); }
.btn-primary-sm { background: var(--green); border-color: var(--green); color: #fdfbf2; }
.btn-primary-sm:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fdfbf2; }

/* badges — poller's status vocabulary: success / partial / failed / running */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-success { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-border); }
.badge-partial { background: #f8ecd2; color: #7a5410; border: 1px solid #e8d5a4; }
.badge-failed { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); }
.badge-running { background: #e4e9f4; color: #34447a; border: 1px solid #ccd5ea; }

.error-text { color: var(--danger); font-size: 0.88rem; word-break: break-word; }
.muted { color: var(--muted); }
.count { margin: 2px 0 10px; }

/* filter chips (admin browsers reuse the public chip look, as links) */
.filter-chips { margin: 6px 0 4px; }
.filter-chips .chip { text-decoration: none; display: inline-block; }

/* admin search bar (subscriber browser) — label + input + button,
   wraps cleanly at 375px instead of pushing the button off-viewport */
.admin .searchbar { flex-wrap: wrap; }
.admin .searchbar label { flex: none; font-weight: 650; font-size: 0.9rem; }
.admin .searchbar input {
  flex: 1 1 160px; min-width: 0;
  padding: 10px 12px; font-size: 0.95rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-control); background: var(--card-raised); color: var(--ink);
}
.admin .searchbar input:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.admin .searchbar .btn { flex: none; }

/* pager */
.pager { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; flex-wrap: wrap; }

/* ── Login + manage-entry cards (standalone, centered) ─────────────────────
 * Kept inline in those templates for the auth tests' benefit; these classes
 * mirror the inline rules so future extraction is a no-op. */
.entry-card, .login-card {
  width: 100%; max-width: 380px; margin: 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 0 1px 0 #fff inset, 0 14px 30px rgba(60, 50, 30, 0.07);
}

/* ── Mobile ────────────────────────────────────────────────────────────────
 * One breakpoint, 480px. 375px is the primary viewport. */
@media (max-width: 480px) {
  .site-header { padding-top: 10px; }
  h1 { font-size: 1.58rem; }
  .scene { height: 56px; }
  .card { padding: 22px 18px; }
  /* D10 (t_344f98d6): per the D10 amendment the mobile lake-list un-cap
     (page-scrolls-then-sticky-bar) is GONE — the capped list keeps its
     internal scroll at 375px so region switching never reflows the page. */
  .count { display: none; }
  .count-mobile { display: block; }
  #map, .map-fallback { height: 340px; }
  .admin h1 { font-size: 1.3rem; }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 0.86rem; }
}

/* --- t_6322a20c: admin events browser + seen-state + dashboard chart ---
   (re-skinned onto the round-7 palette in t_a1dc0302; class names unchanged
   so templates + tests keep working. --color-water aliased to the r7 brand
   green because the server-side chart fill references it.) */

.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 #fff inset, 0 14px 30px rgba(60, 50, 30, 0.07);
  padding: 14px 16px 10px;
  margin: 10px 0 22px;
}

.events-chart { display: block; }

.events-chart rect { fill: var(--green); }

.events-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
}

.events-filter label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}

.events-filter input,
.events-filter select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
}

.events-filter input[type="search"] { min-width: 160px; }
.events-filter input[type="date"] { max-width: 160px; }

/* ── Announcements (kanban t_2f89b3b0, D8) ─────────────────────────────────
 * Public card on the subscribe page + admin compose/list. Same contour-paper
 * skin: card vars, muted date, green pins. JS-OFF safe (pure server HTML). */
.ann-card { margin-top: 18px; }
.ann-card .step-label { margin-bottom: 6px; }
.ann-list { list-style: none; }
.ann-item { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.ann-item:last-child { border-bottom: none; padding-bottom: 4px; }
.ann-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.ann-pin-badge { color: var(--terra); font-size: 0.85em; }
.ann-body { color: var(--ink); font-size: 0.95rem; margin: 0 0 4px; }
.ann-date { color: var(--muted); font-size: 0.8rem; margin: 0; }
.ann-pinned .ann-title::before { content: "★ "; color: var(--terra); font-size: 0.85em; }

/* admin compose form */
.ann-compose { margin: 14px 0 22px; }
.ann-form {
  background: var(--card-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px;
  box-shadow: 0 1px 0 #fff inset, 0 10px 22px rgba(60, 50, 30, 0.06);
}
.ann-form h2 { font-size: 1.02rem; font-weight: 750; margin: 0 0 12px; color: var(--ink); }
.ann-form .field { margin-bottom: 12px; }
.ann-form textarea {
  font: inherit; width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--card); color: var(--ink); resize: vertical;
}
.ann-form textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.ann-pin { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin: 0 0 14px; color: var(--ink); }
.ann-body-cell { max-width: 320px; }
.ann-body-text { display: inline-block; max-height: 3.2em; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.9rem; }

/* ── Email health + provider chain (kanban t_b37157d8) ──────────────────── */
/* amber warning state for at-80% usage cards and non-empty pending piles */
.stat-warning { border-color: #e8c878; background: #fdf6e3; }
.stat-warning .stat-number { color: #8a6414; }

/* breaker banner: amber STOP-and-hold notice with resume button */
.breaker-banner {
  border: 1.5px solid #e8c878; border-radius: var(--radius);
  background: #fdf6e3; padding: 16px 18px; margin: 0 0 22px;
  color: var(--ink);
}
.breaker-banner strong { color: #8a6414; }

/* generic banners (smtp admin error surface) */
.banner { border-radius: var(--radius); padding: 12px 16px; margin: 0 0 18px; }
.banner-error { border: 1.5px solid var(--danger-border); background: var(--danger-soft); color: var(--danger); }

/* provider-chain add form */
.admin-form {
  background: var(--card-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px;
  box-shadow: 0 1px 0 #fff inset, 0 10px 22px rgba(60, 50, 30, 0.06);
  max-width: 640px;
}
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px; margin-bottom: 14px;
}
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; font-weight: 650; color: var(--ink); }
.form-grid input[type="text"], .form-grid input[type="password"], .form-grid input[type="number"] {
  font: inherit; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--card); color: var(--ink);
}
.form-grid input:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.form-grid .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }

/* human verification (kanban t_d8bed263): the Turnstile widget's slot.
   Managed mode normally renders nothing visible, so this is deliberately
   almost empty — just enough spacing to sit quietly under the submit
   button without crowding the consent line. No fixed height: when the
   widget draws a challenge it needs its own room, and a hard height would
   clip it. */
.turnstile-slot { margin-top: 12px; }
.turnstile-slot .cf-turnstile { display: flex; justify-content: center; }