/* County Now app shell — county-agnostic styles.
   Branding colors arrive as CSS custom properties set from app_config.json
   (branding.*) by app.js at boot; the defaults below are neutral dark. */
:root{
  --bg:#050507; --surface:#121218; --surface2:#1b1b23; --text:#f2f2f5;
  --muted:#9a9aa5; --accent:#e8112d; --ok:#7be2a8;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important} /* explicit display rules below must never defeat the hidden state */
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-top:var(--sat);
  -webkit-font-smoothing:antialiased;
}

/* --- Splash --- */
#splash{
  position:fixed; inset:0; z-index:60; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition:opacity .45s ease; padding:24px; text-align:center;
}
#splash.done{opacity:0; pointer-events:none}
#splash-icon{width:104px;height:104px;border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#splash-name{font-size:26px;font-weight:800;letter-spacing:.2px;margin-top:8px}
#splash-tag{font-size:14px;color:var(--muted);max-width:280px;line-height:1.45}
.proto-badge{
  display:inline-block; margin-top:10px; padding:3px 10px; border:1px solid var(--accent);
  color:var(--accent); border-radius:999px; font-size:11px; font-weight:700; letter-spacing:2px;
}

/* --- App bar --- */
#appbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
#appbar-icon{width:30px;height:30px;border-radius:8px}
#appbar-title{font-size:17px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#appbar .proto-badge, #appbar-badge{margin-top:0;font-size:9px;padding:2px 7px}

/* --- Back bar --- */
#backbar{
  position:sticky; top:53px; z-index:39; display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:var(--bg); border-bottom:1px solid rgba(255,255,255,.07);
}
#backbtn{background:none;border:0;color:var(--accent);font-size:16px;font-weight:600;padding:4px 6px;cursor:pointer}
#backtitle{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Views --- */
main{padding:0 0 calc(76px + var(--sab)); min-height:60vh}
.view{padding:14px 16px 8px; animation:fadein .18s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h2.sec{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
h2.sec:first-child{margin-top:2px}
.muted{color:var(--muted)} .small{font-size:13px;line-height:1.5}
.card{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px;margin-bottom:10px}
button.card{display:block;width:100%;text-align:left;color:var(--text);cursor:pointer;font:inherit}
.row{display:flex;gap:12px;align-items:center}
.thumb{width:56px;height:70px;object-fit:cover;border-radius:10px;background:var(--surface2);flex:none}
.thumb.sq{width:56px;height:56px}
.name{font-weight:700;font-size:16px;line-height:1.25}
.sub{color:var(--muted);font-size:13px;margin-top:2px;line-height:1.4}
.chev{margin-left:auto;color:var(--muted);font-size:20px;flex:none}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.4px;background:var(--surface2);color:var(--muted)}
.pill.live{color:#0a0f0a;background:var(--ok)}
.pill.off{color:var(--text);background:#3a3a44}
.chip{display:inline-block;background:var(--surface2);border-radius:8px;padding:3px 8px;font-size:12px;margin:2px 4px 2px 0;color:var(--text)}

/* Hero */
.hero{border-radius:20px;padding:18px;background:linear-gradient(150deg, var(--surface2), var(--surface) 60%);border:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.hero .big{font-size:24px;font-weight:800;line-height:1.2}
.hero .wxline{margin-top:8px;font-size:15px}
.hero .tag{color:var(--muted);font-size:14px;line-height:1.5;margin-top:6px}

/* Story */
.story h3{margin:0 0 4px;font-size:17px;line-height:1.3}
.story p{font-size:15px;line-height:1.6;margin:0 0 10px}
.reader p{font-size:16.5px;line-height:1.65;margin:0 0 14px}
.reader h1{font-size:24px;line-height:1.25;margin:4px 0 8px}

/* Mugshot grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid figure{margin:0;background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.grid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--surface2)}
.grid figcaption{font-size:11px;padding:6px 8px;line-height:1.35;color:var(--text)}
.grid figcaption .sub{font-size:11px}

/* Scanner */
.scanner-hero{text-align:center;padding:26px 16px 20px}
.station{font-size:20px;font-weight:800}
.playbtn{
  width:96px;height:96px;border-radius:50%;border:0;margin:18px auto 8px;display:block;cursor:pointer;
  background:var(--accent);color:#fff;font-size:34px;line-height:1;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.playbtn.playing{background:var(--surface2);color:var(--ok);border:2px solid var(--ok)}
.seg{display:flex;justify-content:space-between;align-items:center;gap:10px}
.seg audio{width:62%;height:34px}

/* Search */
.search{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:var(--surface);color:var(--text);font-size:16px;margin-bottom:12px}

/* More list */
.moreitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:15px 14px;margin-bottom:9px;color:var(--text);cursor:pointer;font:inherit}
.moreitem .mi-t{font-weight:700;font-size:16px}
.moreitem .mi-s{color:var(--muted);font-size:13px;margin-top:1px}
a.ext{color:var(--accent);text-decoration:none;font-weight:600}

/* Weather */
.wxnow{display:flex;align-items:baseline;gap:12px}
.wxnow .t{font-size:44px;font-weight:800}
.wxdays{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wxday{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:11px 12px}
.wxday .d{font-weight:700;font-size:14px}
.wxday .f{color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:3px}

/* Tab bar */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.09); padding-bottom:var(--sab);
}
#tabbar .tab{
  flex:1; background:none; border:0; color:var(--muted); cursor:pointer;
  padding:8px 2px 7px; display:flex; flex-direction:column; align-items:center; gap:2px; font:inherit;
}
#tabbar .tab-ic{font-size:19px;line-height:1}
#tabbar .tab-tx{font-size:10.5px;font-weight:600}
#tabbar .tab.active{color:var(--accent)}
#tabbar .tab[hidden]{display:none}
.empty{color:var(--muted);font-size:14px;padding:18px 4px;line-height:1.5}