/**
 * apps/web/home.css — Civic Bold home page.
 *
 * Mobile-first: base styles are the single-column phone layout (the most
 * common viewport during a real event); min-width queries add the desktop
 * two-column band. Palette is fixed (no dark/light theme on the home page —
 * the full dashboard at /live/ keeps its theme toggle).
 */
:root {
  --green: #0C3B2E;
  --green-2: #0A3328;
  --paper: #F4F1E8;
  --orange: #FF5A1F;
  --ink: #121512;
  --paper-mut: #B9C9C0;
  --ok: #7BE3B1;
  --amber: #E8A11C;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--green); color: var(--paper); font-family: var(--sans); }
button { font-family: inherit; }
a { color: inherit; }

.skel { display: inline-block; min-width: 5ch; background: #ffffff14; border-radius: 8px; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { 50% { opacity: 0.5; } }

/* ── Status ribbon: tier-coloured ── */
.ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-weight: 800; font-size: 12px; line-height: 1.45; letter-spacing: 0.02em;
  background: #14583F; color: var(--paper);
  transform: translateY(-100%); transition: transform 0.25s ease;
}
.ribbon.scrolled { transform: translateY(0); }
body.t-takecare .ribbon { background: var(--orange); color: #1A0C04; }
body.t-headsup .ribbon { background: var(--amber); color: #1A1204; }
.ribbon .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: blink 1.8s infinite; flex-shrink: 0; }
@keyframes blink { 50% { opacity: 0.3; } }
@media (min-width: 700px) { .ribbon { font-size: 13px; padding: 9px 22px; gap: 14px; } }

header.mast { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.word-logo { font-weight: 900; font-size: 18px; letter-spacing: -0.03em; }
.word-logo span { color: var(--orange); }
.mast nav { display: flex; gap: 14px; font-size: 13px; font-weight: 650; align-items: center; margin-left: auto; }
.mast nav a { color: var(--paper-mut); text-decoration: none; }
.share-btn { background: none; border: none; color: var(--paper-mut); cursor: pointer; display: flex; align-items: center; padding: 4px; }
.share-btn:hover { color: var(--paper); }
.mast nav a:hover { color: var(--paper); }
.feedok { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--paper-mut); }
.feedok i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.feedok.degraded i { background: var(--amber); }
@media (max-width: 540px) { .mast nav { display: none; } }
@media (min-width: 700px) { header.mast { padding: 18px 24px; } }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 24px; } }

/* ── Hero ── */
.hero { padding: 26px 0 30px; }
.hero .reo { font-size: 13px; font-weight: 700; color: var(--ok); letter-spacing: 0.08em; text-transform: uppercase; }
body.t-headsup .hero .reo { color: var(--amber); }
body.t-takecare .hero .reo { color: var(--orange); }
.hero h1 { font-size: clamp(52px, 13vw, 150px); font-weight: 900; line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; margin: 8px 0 4px; }
.hero h1 .stroke { color: transparent; -webkit-text-stroke: 2.5px var(--paper); }
.hero .brief { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 24px; align-items: start; }
@media (min-width: 840px) { .hero { padding: 44px 0 40px; } .hero .brief { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 40px; margin-top: 34px; } }
.hero p.big { font-size: clamp(18px, 5vw, 27px); line-height: 1.35; font-weight: 650; letter-spacing: -0.015em; text-wrap: balance; }
.hero p.big b { color: var(--ok); }
body.t-headsup .hero p.big b { color: var(--amber); }
body.t-takecare .hero p.big b { color: var(--orange); }
.hero .sub { color: var(--paper-mut); font-size: 14.5px; line-height: 1.6; margin-top: 12px; max-width: 56ch; text-wrap: pretty; }
.aikit { font-size: 12px; color: var(--paper-mut); margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aikit .pill { border: 1px solid #ffffff2c; padding: 3px 10px; border-radius: 999px; font-weight: 650; }
.aifb { display: inline-flex; gap: 6px; align-items: center; margin-left: 4px; transition: gap 0.25s ease; }
.aifb-label { font-size: 11px; font-weight: 650; color: var(--paper-mut); margin-right: 2px; transition: color 0.25s ease, transform 0.25s ease; }
.aifb button { background: none; border: 1px solid #ffffff2c; border-radius: 999px; color: var(--paper-mut); width: 26px; height: 26px; cursor: pointer; display: grid; place-items: center; transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease, margin 0.25s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.aifb button:hover:not(:disabled) { color: var(--paper); border-color: #ffffff66; }
.aifb button:disabled { cursor: default; }
.aifb button.sel { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 70%, transparent); background: color-mix(in srgb, var(--ok) 18%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 28%, transparent); }
.aifb.voted-down button.sel { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 70%, transparent); background: color-mix(in srgb, var(--amber) 18%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 28%, transparent); }
.aifb button.pop { animation: aifb-pop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1); }
.aifb.is-voted .aifb-label { color: var(--ok); font-weight: 800; animation: aifb-label-in 0.35s ease; }
.aifb.is-voted.voted-down .aifb-label { color: var(--amber); }
.aifb.is-voted.voted-up .btn-down,
.aifb.is-voted.voted-down .btn-up { opacity: 0; width: 0; margin: 0; padding: 0; border-width: 0; pointer-events: none; overflow: hidden; }
.aifb.is-busy button { pointer-events: none; }
.aifb.is-error .aifb-label { color: var(--orange); animation: aifb-shake 0.4s ease; }
.aifb svg { width: 13px; height: 13px; }
@keyframes aifb-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@keyframes aifb-label-in {
  0% { opacity: 0.35; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes aifb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* AI summary feedback modal (matches /live/ flow) */
.fb-modal[hidden] { display: none; }
.fb-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fb-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 30, 24, 0.72); backdrop-filter: blur(2px);
}
.fb-modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--paper); color: var(--ink);
  border-radius: 20px; padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.fb-modal-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: #6E7570; cursor: pointer;
  display: grid; place-items: center;
}
.fb-modal-x:hover { background: #E8E4DA; color: var(--ink); }
.fb-modal-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.fb-modal-sub { margin: 0 0 18px; font-size: 0.92rem; color: #6E7570; line-height: 1.45; }
.fb-modal-textarea {
  width: 100%; min-height: 80px; padding: 10px;
  border: 1px solid #D8D2C4; border-radius: 8px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 14px; resize: vertical; margin-bottom: 16px;
}
.fb-modal-textarea:focus { outline: none; border-color: var(--orange); }
.fb-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.fb-btn-submit {
  background: var(--orange); color: #fff; border: none;
  padding: 8px 16px; border-radius: 8px; font-weight: 700; cursor: pointer;
}
.fb-btn-submit:hover { filter: brightness(1.05); }
.fb-btn-cancel {
  background: transparent; color: var(--ink); border: 1px solid #D8D2C4;
  padding: 8px 16px; border-radius: 8px; font-weight: 650; cursor: pointer;
}
.fb-btn-cancel:hover { background: #E8E4DA; }
footer a { text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--paper); }

.statboard { background: var(--green-2); border: 1px solid #ffffff1a; border-radius: 18px; overflow: hidden; }
.statboard .row { display: grid; grid-template-columns: 1fr 1fr; }
.stat { padding: 16px 18px; border-bottom: 1px solid #ffffff14; }
.stat:nth-child(odd) { border-right: 1px solid #ffffff14; }
.stat b { display: block; font-size: clamp(26px, 7vw, 42px); font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat b.hot { color: var(--orange); }
.stat b.ok { color: var(--ok); }
.stat b.warn { color: var(--amber); }
.stat span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--paper-mut); }

/* ── Near you ── */
.near-you { background: var(--green-2); border: 1px solid #ffffff1a; border-radius: 18px; padding: 18px; margin-bottom: 30px; }
.ny-head { display: flex; align-items: center; gap: 10px; }
.ny-head .pin { width: 30px; height: 30px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex-shrink: 0; }
.ny-head .pin svg { width: 15px; height: 15px; color: var(--green); }
.near-you.warn .ny-head .pin { background: var(--orange); }
.ny-head b { font-size: 16px; letter-spacing: -0.01em; }
.ny-head small { display: block; color: var(--paper-mut); font-size: 11.5px; font-weight: 600; }
.ny-change { margin-left: auto; background: none; border: 1px solid #ffffff2c; color: var(--paper-mut); border-radius: 999px; font: 700 11.5px var(--sans); padding: 6px 13px; cursor: pointer; flex-shrink: 0; }
.ny-change:hover { color: var(--paper); border-color: #ffffff55; }
.ny-pick { margin-top: 12px; }
.ny-gps { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; background: none; border: 1.5px solid #ffffff2c; color: var(--paper); border-radius: 999px; font: 700 12px var(--sans); padding: 8px 14px; cursor: pointer; }
.ny-gps svg { width: 13px; height: 13px; }
.ny-answer { margin: 13px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.ny-answer .okword { color: var(--ok); }
.ny-answer .hotword { color: var(--orange); }
.ny-todo { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.ny-todo span { font-size: 12px; font-weight: 650; background: #ffffff10; border: 1px solid #ffffff1c; border-radius: 999px; padding: 5px 12px; color: var(--paper); }
.ny-evidence { margin-top: 12px; font-size: 12.5px; color: var(--paper-mut); }
.ny-evidence summary { cursor: pointer; font-weight: 700; }
.ny-evidence ul { margin: 8px 0 0 18px; line-height: 1.7; }
.ny-limits { margin-top: 8px; font-size: 11px; }

/* ── Paper band: feed + map ── */
.band { background: var(--paper); color: var(--ink); border-radius: 24px 24px 0 0; padding: 38px 0 52px; }
.band h2, .korero h2 { font-size: clamp(26px, 7vw, 44px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.band h2 small, .korero h2 small { display: block; font-size: 13px; font-weight: 700; color: var(--orange); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.bandgrid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 22px; }
@media (min-width: 840px) { .band { padding: 50px 0 64px; } .bandgrid { grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: 48px; } }

.filters { display: flex; gap: 7px; overflow-x: auto; padding: 18px 0 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.fchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--sans); padding: 8px 13px; border-radius: 999px; cursor: pointer; border: 2px solid #12151225; background: transparent; color: var(--ink); }
.fchip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.feedmeta { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 12px; color: #6E7570; font-weight: 600; flex-wrap: wrap; }

.seclabel { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: #6E7570; margin: 22px 0 4px; display: flex; align-items: baseline; gap: 10px; }
.seclabel small { font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: auto; text-align: right; }

.alist { display: flex; flex-direction: column; }
.acard { display: flex; gap: 13px; align-items: flex-start; padding: 15px 4px; border-bottom: 2px solid #12151215; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; text-align: left; width: 100%; color: var(--ink); font-family: inherit; }
.acard:hover { background: #1215120A; }
.badge { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px; }
.badge svg { width: 22px; height: 22px; }
.badge.cat-earthquake { background: #D7263D; }
.badge.q.minor, .badge.cat-earthquake.minor { background: #8A8F8A; }
.badge.cat-weather { background: #E8851C; }
.badge.cat-tsunami { background: #0B7285; }
.badge.cat-volcano { background: #7A2E8D; }
.badge.cat-civil { background: var(--green); }
.badge.cat-road { background: #B25600; }
.badge.cat-police { background: #1B4F9C; }
.badge.cat-community { background: var(--green); }
.acard h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.acard .meta { display: block; color: #6E7570; font-size: 12.5px; margin-top: 3px; font-weight: 500; line-height: 1.45; }
.acard .age { margin-left: auto; font-weight: 800; font-size: 11.5px; color: var(--orange); white-space: nowrap; padding-top: 3px; }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; }
.tag.force { background: #FF5A1F22; color: #B23A0E; }
.tag.chat { background: #0C3B2E14; color: var(--green); border: 1px solid #0C3B2E33; }
.tag.src { background: #12151210; color: #4A4F4A; }
.feed-empty, .comm-empty { padding: 16px 4px; color: #6E7570; font-size: 13.5px; font-weight: 500; }

.routine summary { list-style: none; cursor: pointer; display: flex; gap: 13px; align-items: center; padding: 15px 4px; border-bottom: 2px solid #12151215; }
.routine summary::-webkit-details-marker { display: none; }
.routine summary h3 { font-size: 15.5px; font-weight: 800; }
.routine summary .meta { color: #6E7570; font-size: 12.5px; font-weight: 500; }
.routine summary .chev { margin-left: auto; transition: rotate 0.2s; color: #6E7570; flex-shrink: 0; }
.routine[open] summary .chev { rotate: 180deg; }
.routine .alist .acard { padding-left: 14px; }
.routine .alist .badge { width: 38px; height: 38px; font-size: 12px; border-radius: 10px; }

.feltcta { margin-top: 24px; background: var(--green); color: var(--paper); border-radius: 18px; padding: 18px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feltcta b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.feltcta span { font-weight: 600; font-size: 13.5px; }
.feltcta button { margin-left: auto; background: var(--orange); color: #1A0C04; border: none; border-radius: 999px; font: 800 13.5px var(--sans); padding: 12px 22px; cursor: pointer; }
body.t-takecare .feltcta { background: var(--orange); color: #1A0C04; }
body.t-takecare .feltcta button { background: #1A0C04; color: var(--paper); }

/* ── Community strip ── */
.commwrap { margin-top: 30px; }
.commnote { font-size: 12px; color: #6E7570; margin-top: 8px; line-height: 1.5; display: flex; gap: 7px; align-items: flex-start; }
.commnote svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.ccard { display: flex; gap: 12px; align-items: flex-start; padding: 13px 4px; border-bottom: 2px solid #12151212; }
.ccard-click { cursor: pointer; }
.ccard-click:hover { background: #1215120A; }
.ccard .badge { width: 40px; height: 40px; border-radius: 11px; }
.ccard h4 { font-size: 14px; font-weight: 800; }
.ccard .meta { display: block; color: #6E7570; font-size: 12px; margin-top: 2px; font-weight: 500; }
.votes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.votes button { font: 700 10.5px var(--sans); padding: 5px 10px; border-radius: 999px; border: 1.5px solid #12151228; background: transparent; cursor: pointer; white-space: nowrap; color: var(--ink); }
.votes button.von { border-color: var(--green); color: var(--green); background: #0C3B2E10; }
.votes button:disabled { opacity: 0.55; cursor: default; }

/* ── Map card ── */
/* align-self: start — grid items stretch to row height by default, which
   left a huge empty green void under the map next to a long feed column
   (and stranded the Report FAB at its bottom). */
.mapcard { background: var(--green); border-radius: 20px; padding: 14px; position: relative; align-self: start; }
.mapwrap { position: relative; }
@media (min-width: 840px) { .mapcard { position: sticky; top: 56px; padding: 18px; } }
.maplive { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; color: var(--paper-mut); margin-bottom: 8px; }
.mapdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: blink 2s infinite; }
.maplive .expand { margin-left: auto; background: #ffffff14; border: 1px solid #ffffff22; color: var(--paper); border-radius: 999px; font: 700 11px var(--sans); padding: 6px 12px; cursor: pointer; letter-spacing: 0; text-decoration: none; }
.mapframe { border-radius: 12px; overflow: hidden; background: #11503E; }
.mapframe iframe { display: block; width: 100%; height: 420px; border: none; }
@media (min-width: 840px) { .mapframe iframe { height: 520px; } }
.mapfab { position: absolute; bottom: 14px; left: 14px; display: flex; align-items: center; gap: 7px; background: var(--orange); color: #1A0C04; border: none; border-radius: 999px; font: 800 13px var(--sans); padding: 11px 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(255,90,31,0.4); z-index: 2; }
.mapcap { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--paper-mut); }
.mapcap a { color: var(--paper); }
.mapframe .maplibregl-ctrl-bottom-right { z-index: 10; }

/* ── Kōrero band ── */
.korero { background: var(--green-2); padding: 42px 0 54px; }
.kgrid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 0; align-items: start; }
@media (min-width: 840px) { .korero { padding: 56px 0 70px; } .kgrid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 48px; } }
.korero h2 { color: var(--paper); }
.korero .pitch { color: var(--paper-mut); font-size: 14.5px; line-height: 1.6; margin-top: 12px; max-width: 44ch; }
.korero .pitch b { color: var(--paper); }
.rooms { display: flex; flex-direction: column; gap: 9px; }
.room { display: flex; align-items: center; gap: 11px; text-align: left; background: #ffffff0c; border: 1.5px solid #ffffff1c; border-radius: 14px; padding: 13px 14px; cursor: pointer; color: var(--paper); width: 100%; text-decoration: none; }
.room:hover { border-color: var(--orange); }
.room .rdot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: blink 2s infinite; flex-shrink: 0; }
.room b { font-size: 13.5px; display: block; letter-spacing: -0.01em; }
.room small { color: var(--paper-mut); font-size: 11.5px; }
.room .here { margin-left: auto; font: 800 12px var(--mono); color: var(--orange); white-space: nowrap; flex-shrink: 0; }
.room { font-family: inherit; }
.room.on { border-color: var(--orange); background: #FF5A1F14; }
.chatframe-col { align-self: start; width: 100%; display: flex; flex-direction: column; margin-bottom: 28px; }
.chatframe-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  min-height: 36px;
}
.chat-board-toggle {
  font: 800 11px var(--sans);
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(123,227,177,0.45);
  background: rgba(123,227,177,0.12);
  color: #7BE3B1;
  cursor: pointer;
  white-space: nowrap;
}
.chat-board-toggle:hover { background: rgba(123,227,177,0.22); }
.chat-board-toggle[hidden] { display: none !important; }
.chatframe-inner {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0C3B2E;
  border: 1px solid rgba(255,255,255,0.12);
}
.chatframe-inner iframe { display: block; width: 100%; height: 440px; border: none; background: #0C3B2E; }
@media (min-width: 840px) { .chatframe-inner iframe { height: 480px; } }
.chat-full-link {
  font: 700 11px var(--sans);
  color: var(--paper);
  text-decoration: none;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}
.chat-full-link:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }
.quietchat { background: var(--paper); color: var(--ink); border-radius: 20px; padding: 22px; }
.quietchat b { font-size: 16.5px; font-weight: 900; letter-spacing: -0.02em; display: block; }
.quietchat p { color: #6E7570; font-size: 13.5px; line-height: 1.55; margin-top: 7px; max-width: 52ch; }

/* ── Digest band ── */
.digestband { background: var(--green); padding: 36px 0 44px; }
.digestband .inner { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.digestband b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.digestband p { color: var(--paper-mut); font-size: 13px; margin-top: 4px; max-width: 46ch; }
.digest { display: flex; max-width: 380px; flex: 1; min-width: 260px; }
.digest input { flex: 1; min-width: 0; border: 1px solid #ffffff30; border-right: none; background: #ffffff10; color: var(--paper); border-radius: 999px 0 0 999px; padding: 11px 16px; font: 13.5px var(--sans); outline: none; }
.digest input::placeholder { color: #ffffff70; }
.digest button { border: none; background: var(--orange); color: #1A0C04; font: 800 13px var(--sans); padding: 0 20px; border-radius: 0 999px 999px 0; cursor: pointer; }
.digest-msg { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--ok); }

footer { padding: 24px 16px 96px; font-size: 11.5px; color: var(--paper-mut); line-height: 1.6; max-width: 1180px; margin: 0 auto; }
footer p + p { margin-top: 8px; }
@media (min-width: 840px) { footer { padding-bottom: 40px; } }

/* ═══════════ SWIPE DECK (phones only) ═══════════
   Desktop (≥840px) keeps the page as a normal vertical scroll: #deck is plain
   block flow and .band stays the two-column grid below. On phones the page
   becomes a horizontal pager — each top-level section is a full-screen panel
   you swipe between, with a segment bar up top and a tab bar at the bottom. */
.pager, .tabs, .report-fab { display: none; } /* phone-only; enabled in the query below */

@media (max-width: 839px) {
  /* The whole app becomes one viewport-tall column: header + pager + deck +
     tab bar. Only the active panel scrolls (vertically); the deck scrolls
     horizontally. The body itself never scrolls. */
  body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
  header.mast { flex: 0 0 auto; }

  .pager { display: flex; gap: 4px; padding: 9px 16px 7px; flex: 0 0 auto; }
  .pager .seg { flex: 1; height: 3px; border-radius: 2px; background: #ffffff22; transition: background 0.2s; }
  .pager .seg.on { background: var(--ok); }
  body.t-headsup .pager .seg.on { background: var(--amber); }
  body.t-takecare .pager .seg.on { background: var(--orange); }

  .deck {
    flex: 1 1 auto; min-height: 0;
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .deck::-webkit-scrollbar { display: none; }

  /* Collapse the band wrappers so the feed and map become sibling panels of
     the deck (instead of a nested 2-col grid). */
  .band, .bandgrid { display: contents; }

  .panel {
    flex: 0 0 100%; width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    scroll-snap-align: start; scroll-snap-stop: always;
    scrollbar-width: none; padding-bottom: 84px;
  }
  .panel::-webkit-scrollbar { display: none; }

  /* The paper .band box is gone under display:contents, so the feed panel
     carries its own paper surface + padding (the inner .wrap is gone too). */
  .p-feed { background: var(--paper); color: var(--ink); border-radius: 20px 20px 0 0; padding: 22px 16px 84px; }
  .p-feed h2 { margin-bottom: 4px; }
  /* The map panel is the green .mapcard itself; let it fill the panel. */
  .p-map { padding: 14px 14px 84px; }
  .p-map .home-map { height: calc(100dvh - 280px); min-height: 340px; }
  .korero { padding-bottom: 96px; }
  .digestband { margin-top: 22px; }

  /* Bottom tab bar — jumps between panels, reflects the active one. */
  .tabs { display: flex; flex: 0 0 auto; background: var(--green-2); border-top: 1px solid #ffffff1f; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; color: var(--paper-mut); font: 700 10px var(--sans); cursor: pointer; padding: 5px 0; }
  .tab svg { width: 20px; height: 20px; }
  .tab.on { color: var(--orange); }

  /* Persistent Report FAB, floating above the tab bar. */
  .report-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 80; width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--orange); color: #1A0C04; cursor: pointer; box-shadow: 0 8px 24px rgba(255,90,31,0.45); }
  .report-fab svg { width: 22px; height: 22px; }
}

/* ── Sheets: bottom sheet mobile, modal desktop ── */
.sheetveil { position: fixed; inset: 0; background: rgba(10, 30, 24, 0.6); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--paper); color: var(--ink); width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 18px 18px 28px; position: relative; }
@media (min-width: 700px) { .sheetveil { align-items: center; padding: 30px; } .sheet { max-width: 560px; border-radius: 22px; max-height: 84vh; } }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: #12151225; margin: 0 auto 14px; }
@media (min-width: 700px) { .sheet .grab { display: none; } }
.sheet .x { position: absolute; top: 14px; right: 14px; background: #12151210; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.sheet .cat { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--green); }
.sheet h3 { font-size: 21px; font-weight: 900; letter-spacing: -0.025em; margin: 9px 0 3px; line-height: 1.15; }
.sheet .meta { color: #6E7570; font-size: 12.5px; font-weight: 600; }
.qgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 15px; }
.qcell { background: #12151208; border-radius: 13px; padding: 11px 13px; }
.qcell .l { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #6E7570; }
.qcell .v { display: block; font-size: 21px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.qcell .v small { font-size: 12px; font-weight: 700; color: #6E7570; }
.mmibar { display: flex; gap: 2px; margin-top: 6px; }
.mmibar i { flex: 1; height: 7px; border-radius: 2px; background: #12151215; }
.mmibar i.f1 { background: #8A8F8A; }
.mmibar i.f2 { background: #E8A11C; }
.mmibar i.f3 { background: #E8851C; }
.mmibar i.f4 { background: #D7263D; }
.didfeel { margin-top: 15px; background: #0C3B2E0C; border-radius: 14px; padding: 13px 15px; }
.didfeel b { font-size: 14px; }
.didfeel small { display: block; color: #6E7570; font-size: 11px; margin-top: 2px; }
.didfeel .opts { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.didfeel .opts button { font: 700 12px var(--sans); padding: 8px 14px; border-radius: 999px; border: 1.5px solid #0C3B2E40; background: transparent; cursor: pointer; color: var(--green); }
.didfeel .opts button.sel { background: var(--green); color: var(--paper); }
.didfeel .msg { font-size: 12px; font-weight: 700; color: var(--green); margin-top: 9px; }
.sheet .summ { margin-top: 15px; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.sheet .acts { margin-top: 13px; }
.sheet .acts h4, .sheet .news h4 { font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #6E7570; }
.sheet .acts ul { margin: 7px 0 0 17px; font-size: 13.5px; line-height: 1.7; }
.sheet .news { margin-top: 13px; }
.sheet .news a { display: block; font-size: 13px; font-weight: 700; color: var(--green); margin-top: 6px; }
.sheetbtns { display: flex; gap: 8px; margin-top: 17px; }
.sheetbtns button, .sheetbtns a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; font: 800 13px var(--sans); padding: 12px; cursor: pointer; border: none; text-decoration: none; }
.sheetbtns .pri { background: var(--green); color: var(--paper); }
.sheetbtns .sec { background: transparent; border: 1.5px solid #12151230; color: var(--ink); }
.sheetattr { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px dashed #12151225; font-size: 11px; color: #6E7570; font-weight: 600; }
.sheetattr .st { font-weight: 900; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* Report sheet */
.rsearch { display: flex; align-items: center; gap: 9px; border: 2px solid #12151225; border-radius: 999px; padding: 11px 15px; margin-top: 14px; background: #fff; }
.near-you .rsearch { border-color: #ffffff2c; background: #ffffff10; }
.near-you .rsearch input { color: var(--paper); }
.near-you .rsearch input::placeholder { color: #ffffff70; }
.rsearch svg { width: 15px; height: 15px; color: #6E7570; flex-shrink: 0; }
.near-you .rsearch svg { color: var(--paper-mut); }
.rsearch input { flex: 1; min-width: 0; border: none; outline: none; font: 14px var(--sans); background: transparent; color: var(--ink); }
.rsugg { margin-top: 7px; border: 1.5px solid #12151218; border-radius: 14px; overflow: hidden; background: #fff; }
.near-you .rsugg { background: var(--paper); }
.rsugg button { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 10px 14px; background: none; border: none; border-bottom: 1px solid #12151210; font: 600 13px var(--sans); cursor: pointer; text-align: left; color: var(--ink); }
.rsugg button:last-child { border-bottom: none; }
.rsugg button:hover { background: #1215120A; }
.rsugg .s-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rsugg .s-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsugg .s-meta { font-size: 12px; font-weight: 500; color: #6E7570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsugg .k { font-size: 9.5px; font-weight: 900; letter-spacing: 0.08em; color: #6E7570; margin-left: auto; text-transform: uppercase; flex-shrink: 0; }
.ropts { display: flex; gap: 8px; margin-top: 11px; }
.ropts button, .ropts a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 12.5px var(--sans); padding: 11px; border-radius: 13px; border: 1.5px solid #12151225; background: none; cursor: pointer; color: var(--ink); text-decoration: none; }
.ropts svg { width: 14px; height: 14px; }
.rstatus { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--green); }
.rstatus i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.rnote { margin-top: 14px; }
.rnote label { font-size: 12.5px; font-weight: 800; }
.rnote input { width: 100%; margin-top: 6px; border: 2px solid #12151225; border-radius: 12px; padding: 10px 13px; font: 13.5px var(--sans); outline: none; background: transparent; }
.rnote small { display: block; font-size: 10.5px; color: #6E7570; margin-top: 4px; }
.rtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rtile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border-radius: 14px; border: 1.5px solid #12151220; background: none; cursor: pointer; font: 700 11.5px var(--sans); color: var(--ink); }
.rtile:hover { border-color: var(--green); }
.rtile:disabled { opacity: 0.5; cursor: default; }
.rtile svg { width: 21px; height: 21px; }
.rerr { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #B23A0E; }
.rsuccess { text-align: center; padding: 8px 0; }
.rsuccess .tick { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: grid; place-items: center; margin: 0 auto 10px; }
.rsuccess .tick svg { width: 20px; height: 20px; color: var(--paper); }
.rsuccess b { font-size: 16px; }
.rsuccess p { font-size: 12.5px; color: #6E7570; margin-top: 3px; }
.poll { margin-top: 14px; background: #12151208; border-radius: 14px; padding: 13px 16px; text-align: left; }
.poll b { font-size: 12.5px; }
.poll .prow { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-top: 7px; color: #4A4F4A; }
.poll .prow span:last-child { font-weight: 900; color: var(--ink); }

/* ═══════════ NATIVE HOME MAP ═══════════
   Marker visuals come from the shared /live/map-markers.css (the shared
   map-core builds identical DOM on both surfaces). Its theme variables are
   pinned to civic values on the map container; the few civic deviations from
   the live look are scoped overrides below. */
.home-map {
  /* overflow:hidden contains the tile canvas AND off-map markers (far-field
     quakes project to pixels well outside the frame). Popup clipping near an
     edge is handled by panning the marker toward centre on open (home-map.js). */
  height: 420px; border-radius: 12px; overflow: hidden; background: #AFC8CF;
  --transition-fast: 0.15s ease;
  --transition-standard: 0.3s ease;
  --text-main: #1B2030;
  --text-muted: #7A7060;
  --bg-lifted: #FFFFFF;
  --bg-deep: #F7F0DD;
  --border: rgba(27, 32, 48, 0.18);
  --font-display: var(--sans);
  --font-mono: var(--mono);
}
@media (min-width: 840px) { .home-map { height: 520px; } }
.home-map-fallback { padding: 40px 16px; text-align: center; color: var(--paper-mut); font-size: 13px; }
.home-map-fallback a { color: var(--paper); }
.home-map .maplibregl-ctrl-attrib { background: rgba(247, 240, 221, 0.85); font-size: 10px; }
/* MapLibre auto-expands the compact credit into a full-width bar on every data
   refresh, which overlaps the bottom-left Report button. Keep it as the (i)
   toggle and reveal the full credit only on hover/focus (a tap focuses the (i)
   button on mobile), so attribution stays available without the overlap. */
.home-map .maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { display: none; }
.home-map .maplibregl-ctrl-attrib.maplibregl-compact:hover .maplibregl-ctrl-attrib-inner,
.home-map .maplibregl-ctrl-attrib.maplibregl-compact:focus-within .maplibregl-ctrl-attrib-inner { display: block; }
.home-map .maplibregl-cooperative-gesture-screen { font: 700 13px var(--sans); }

/* Civic deviations from the shared marker styles: aged quakes fade harder on
   the small card, and area-chip type/icons use the page's own flat style. */
.home-map .quake-marker[data-age="aging"] { opacity: 0.62; }
.home-map .quake-marker[data-age="stale"] { opacity: 0.38; filter: none; }
.home-map .community-chip-icon { width: auto; height: auto; border-radius: 0; background: none; color: var(--accent-color); }
.home-map .community-chip-icon svg { width: 13px; height: 13px; }
.home-map .community-chip-label { font: 800 11px var(--sans); max-width: none; }
.home-map .community-chip-count { font: 800 10.5px var(--mono); }


/* Civic popup card (all marker types) */
.home-map .maplibregl-popup-content {
  background: var(--paper); color: var(--ink); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.3); padding: 13px 15px; font-family: var(--sans);
}
.home-map .maplibregl-popup-tip { border-top-color: var(--paper) !important; border-bottom-color: var(--paper) !important; }
.home-map .maplibregl-popup-close-button { font-size: 16px; color: #6E7570; right: 4px; top: 2px; }
.home-popup { display: flex; flex-direction: column; min-width: 180px; max-width: 260px; }
.home-popup strong { font-size: 13.5px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.3; padding-right: 12px; }
.home-popup-meta { font-size: 11.5px; color: #6E7570; font-weight: 600; margin-top: 3px; }
.home-popup-btn {
  margin-top: 10px; align-self: flex-start; background: var(--green); color: var(--paper);
  border: none; border-radius: 999px; font: 800 11.5px var(--sans); padding: 8px 14px; cursor: pointer;
}
.home-popup-btn:hover { background: #11503E; }

[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}