/* Empower WV brand palette — blue / gold / purple. */
  :root { --brand:#4a7fb0; --brand-accent:#c9992f; --brand-purple:#7a6fb0; --sky:#a9c4dc; --bg:#f4f7f9; }
  body { font-family: system-ui, sans-serif; margin: 0; background:var(--bg); color:#1a1a1a; }
  /* Parallax hero: still sky gradient + panning cloud layers + still logo.
     Height scales with viewport width -> more sky on desktop, compact on mobile. */
  header { position:relative; overflow:hidden; height:clamp(185px, 24vw, 320px);
    background:linear-gradient(to top, #f7ca89 4%, #e4d1ab 18%, #cddcd7 38%, #c5e0e8 49%, #a1bcd1 82%);
    display:flex; align-items:center; justify-content:center; }
  header .cloud { position:absolute; bottom:0; left:50%; width:120%; height:auto;
    transform:translateX(-50%); pointer-events:none; }
  /* Same duration so all layers turn the corners together. Gold(back) + white
     (front) sway one way; blue(mid) counter-sways (alternate-reverse). Amplitude
     gives the depth (subtle back, bold front) and bumps up on desktop. */
  header .c-gold  { --amp:16px; animation: sway 30s ease-in-out infinite alternate; }
  header .c-blue  { --amp:24px; animation: sway 30s ease-in-out infinite alternate-reverse; }
  header .c-white { --amp:36px; animation: sway 30s ease-in-out infinite alternate; }
  @media (min-width:820px){
    header .c-gold  { --amp:30px; }
    header .c-blue  { --amp:46px; }
    header .c-white { --amp:66px; }
  }
  @keyframes sway { 0%,9%{transform:translateX(calc(-50% - var(--amp)))} 91%,100%{transform:translateX(calc(-50% + var(--amp)))} }
  @media (prefers-reduced-motion:reduce){ header .cloud{animation:none} }
  /* Logo: floors ~165px on narrow screens (≈30vw near 570px), scales at 20vw
     through desktop, capped so it stays in the banner on big monitors. */
  header img.logo { position:relative; z-index:2; height:clamp(165px, 20vw, 230px); width:auto; max-width:92%;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
  /* top mode nav — pill/segmented */
  .modenav { display:flex; justify-content:center; align-items:center; gap:4px; flex-wrap:wrap;
    background:#fff; border-bottom:1px solid #e5e5e8; padding:9px 12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04); }
  .modenav a { padding:8px 20px; font-size:14px; font-weight:600; color:#4a5568;
    text-decoration:none; border-radius:22px; transition:background .15s,color .15s; }
  .modenav a:hover { background:#eef2f6; color:var(--brand); }
  .modenav a.on { background:linear-gradient(90deg,var(--brand),var(--brand-purple)); color:#fff;
    box-shadow:0 2px 8px rgba(74,127,176,.3); }
  .modenav a.admin { margin-left:6px; color:#8a93a0; font-size:13px; }
  .modenav a.admin.on { background:#5a6472; box-shadow:none; }
  .subbar { background:linear-gradient(90deg,var(--brand),var(--brand-purple)); color:#fff;
    padding:8px 20px; font-size:13px; text-align:center; }
  .betabar { background:#fff4d6; color:#7a5b12; border-bottom:1px solid #f0e0b0;
    padding:6px 20px; font-size:12.5px; text-align:center; }
  .betabar b { color:#8a4b00; }
  .controls { padding:14px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  select { padding:6px 10px; font-size:14px; }
  .meta { color:#666; font-size:13px; }
  .card { background:#fff; margin:16px 20px; border:1px solid #e5e5e8; border-radius:8px; position:relative; }
  .busyover { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(255,255,255,.6); z-index:600; border-radius:8px; }
  .busyover.on { display:flex; }
  .spinner { width:30px; height:30px; border:3px solid #d3dbe4; border-top-color:var(--brand);
    border-radius:50%; animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .card h2 { font-size:14px; margin:0; padding:10px 14px; border-bottom:1px solid #eee; color:#444; }
  details.explore { margin:22px 20px 10px; }
  details.explore > summary { cursor:pointer; user-select:none; font-size:14px; font-weight:700; color:var(--brand);
    padding:10px 14px; background:#f4f7fa; border:1px solid #dde5ec; border-radius:8px; }
  details.explore[open] > summary { border-radius:8px 8px 0 0; }
  details.explore > summary:hover { background:#eef3f8; }
  details.explore .explore-intro { padding:10px 14px 2px; max-width:74ch; }
  details.explore > .card { margin-left:0; margin-right:0; }
  .chart { height:320px; }
  #map { height:360px; border-radius:0 0 8px 8px; }
  #w-map { height:440px; border-radius:0 0 8px 8px; }
  #fr-map { height:340px; border-radius:6px; margin:0 0 10px; }
  .legend { font-size:12px; color:#666; padding:6px 14px; }
  .sensorlist { display:flex; flex-direction:column; gap:2px; max-height:120px; overflow:auto;
    border:1px solid #ddd; border-radius:6px; padding:6px 10px; font-size:13px; min-width:200px; }
  .layerbar { padding:2px 20px 4px; }
  .layers { font-size:13px; display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
  .layers > b { align-self:center; }
  .layers details { min-width:150px; }
  .layers summary { cursor:pointer; user-select:none; padding:1px 0; }
  .layers details.ctxgroup > summary { color:#667; font-weight:600; }
  .layers details.ctxgroup > .children > details { margin-top:2px; }
  .layers .ctx-intro { font-size:11.5px; color:#556; margin:2px 0 6px; max-width:32ch; line-height:1.4; }
  .layers .ctx-help { font-size:11px; color:#667; margin:1px 0 4px; max-width:34ch; line-height:1.4; }
  .layers .ctx-intro a, .layers .ctx-help a { color:var(--brand); }
  .layers .children { padding:2px 0 0 20px; display:flex; flex-direction:column; gap:1px; }
  .layers label { display:block; }
  .layers .cnt { color:#aaa; font-size:11px; }
  .layers .srow { cursor:pointer; padding:1px 2px; border-radius:3px; }
  .layers .srow:hover { color:var(--brand); background:#f0f4f8; }
  .layers .srow.on { font-weight:700; color:#111; }
  .layers .srow.on::before { content:'●'; color:var(--brand-accent); margin-right:4px; font-size:10px; }
  .layers .star { cursor:pointer; color:#c9b45a; margin-right:4px; font-size:12px; user-select:none; }
  .layers .star:hover { color:var(--brand-accent); }
  .layers .star.on { color:var(--brand-accent); }
  .o3mk { width:13px; height:13px; transform:rotate(45deg); border:1.5px solid #333; box-shadow:0 0 2px #0006; }
  button { padding:6px 12px; font-size:13px; cursor:pointer; }
  table { width:calc(100% - 28px); margin:10px 14px 14px; border-collapse:collapse; font-size:13px; }
  th, td { text-align:left; padding:6px 10px; border-bottom:1px solid #eee; }
  th { color:#666; font-weight:600; }
  .guide { padding:10px 14px; display:flex; flex-wrap:wrap; gap:8px; }
  .guide .chip { display:flex; align-items:center; gap:6px; font-size:12px; border:1px solid #eee;
    border-radius:6px; padding:4px 8px; }
  .guide .sw { width:14px; height:14px; border-radius:3px; border:1px solid #0002; }
  .guide .note { flex-basis:100%; color:#666; font-size:12px; margin-top:4px; }
  .about { padding:10px 14px; font-size:13px; color:#444; max-width:70ch; }
  .about a { color:var(--brand); }
  footer { text-align:center; color:#888; font-size:13px; padding:24px 20px; margin-top:20px;
    border-top:1px solid #e5e5e8; background:#fff; }
  footer > a { color:var(--brand); text-decoration:none; font-weight:600; margin:0 2px; }
  footer > a:hover { text-decoration:underline; }
  footer .fnote { color:#98a0a8; font-size:11.5px; margin-top:8px; }
  /* report / feedback modal */
  button.primary { background:var(--brand); color:#fff; border:none; }
  button.primary:disabled { opacity:.5; cursor:not-allowed; }
  /* Ambient "haze": a subtle atmospheric tint that reflects current WV air, strongest
     at the top like horizon smog. Sits above content + maps, below modals; never blocks
     interaction. Experiment — dismissible; JS sets the gradient + opacity. */
  .haze { position:fixed; inset:0; pointer-events:none; z-index:900; opacity:0;
    transition:opacity 1.8s ease; will-change:opacity; }
  .haze-chip { position:fixed; right:12px; bottom:12px; z-index:901; display:none;
    align-items:center; gap:9px; max-width:min(92vw,360px);
    background:rgba(38,33,27,.86); color:#f2ece1; font-size:12px; line-height:1.3;
    padding:7px 12px; border-radius:22px; box-shadow:0 2px 10px rgba(0,0,0,.3); }
  .haze-chip.on { display:flex; }
  .haze-chip .dot { width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.4); }
  .haze-chip b { color:#fff; }
  .haze-chip a, .haze-chip button { color:#ffd39a; background:none; border:none; cursor:pointer;
    font-size:12px; text-decoration:underline; padding:0; white-space:nowrap; }
  @media (prefers-reduced-motion: reduce) { .haze { transition:none; } }
  @media print { .haze, .haze-chip { display:none !important; } }
  .modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none;
    align-items:center; justify-content:center; z-index:1000; }
  .modal.on { display:flex; }
  .modalbox { background:#fff; border-radius:10px; max-width:460px; width:92%;
    max-height:88vh; overflow:auto; padding:0 18px 18px; box-shadow:0 10px 44px rgba(0,0,0,.3); }
  .modalbox h3 { position:sticky; top:0; background:#fff; margin:0; padding:14px 0 8px;
    border-bottom:1px solid #eee; font-size:16px; }
  .modalbox h3 .x { float:right; border:none; background:none; font-size:22px; line-height:1;
    cursor:pointer; color:#999; padding:0; }
  .rform { display:flex; flex-direction:column; gap:10px; padding-top:12px; }
  .rform label { display:flex; flex-direction:column; gap:3px; font-size:13px; color:#444; }
  .rform input, .rform select, .rform textarea { padding:7px 9px; font-size:14px;
    border:1px solid #ccc; border-radius:6px; font-family:inherit; }
  .rform .hp { position:absolute !important; left:-9999px; }
  .rloc { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .rlocbox { display:flex; flex-direction:column; gap:6px; padding:9px 10px; border:1px solid #e2e6ea;
    border-radius:8px; background:#f7f9fb; }
  .rlocbox .rlab { font-size:13px; color:#444; }
  .rlocbox #r-addr { flex:1 1 180px; }
  .rrow { display:flex; gap:6px; align-items:center; margin-bottom:5px; }
  .rrow .rr-param { flex:1 1 auto; }
  .rrow .rr-val { max-width:92px; }
  .rrow .rr-unit { max-width:80px; }
  .rrow .rr-del { border:none; background:#eee; color:#a00; border-radius:5px; cursor:pointer;
    font-size:16px; line-height:1; padding:4px 9px; }
  .rlink { align-self:flex-start; border:none; background:none; color:var(--brand); cursor:pointer;
    font-size:13px; padding:2px 0; text-decoration:underline; }
  .rnote { font-size:12px; color:#7a5b12; background:#fff4d6; padding:7px 9px; border-radius:6px; }
  /* ---- Home hero (real WV community-sensor photo) ---- */
  .hero { position:relative; margin-bottom:12px; overflow:hidden;
    background:#2a3a48 url('/static/hero.jpg') center 38% / cover no-repeat; }
  /* scrim: darken for white text + fade the bottom into the page */
  .hero::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(18,32,46,.62) 0%, rgba(18,32,46,.34) 45%, rgba(244,247,249,.0) 62%, rgba(244,247,249,1) 100%); }
  .hero-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center;
    padding:52px 20px 92px; }
  .hero-inner h1 { font-size:clamp(25px,4.2vw,40px); line-height:1.1; margin:0 0 12px; color:#fff;
    letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.5); }
  .hero-inner p { font-size:clamp(14px,1.7vw,17px); color:#eaf1f7; max-width:56ch; margin:0 auto 18px;
    text-shadow:0 1px 8px rgba(0,0,0,.55); }
  .hero-cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .hbtn { padding:11px 22px; border-radius:24px; font-weight:600; font-size:14px; text-decoration:none;
    background:rgba(255,255,255,.92); color:var(--brand); border:1px solid rgba(255,255,255,.6);
    transition:transform .12s,box-shadow .15s; }
  .hbtn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.28); }
  .hbtn.primary { background:linear-gradient(90deg,var(--brand),var(--brand-purple)); color:#fff; border:none; }
  .hero-credit { position:absolute; right:12px; bottom:8px; z-index:2; font-size:11px; color:rgba(255,255,255,.82);
    text-shadow:0 1px 4px rgba(0,0,0,.6); max-width:60%; text-align:right; }
  /* ---- Home / content pages ---- */
  .ov-wrap, .page { max-width:1000px; margin:0 auto; }
  .ov-intro { text-align:center; padding:26px 20px 6px; }
  .ov-intro h1 { font-size:clamp(23px,3.4vw,32px); margin:0 0 8px; color:#1a2b3c; line-height:1.15; }
  .ov-intro p { font-size:15px; color:#556; max-width:60ch; margin:0 auto; }
  .ov-sechead { max-width:1000px; margin:22px 20px 2px; font-size:13px; letter-spacing:.06em;
    text-transform:uppercase; color:#8a93a0; }
  .ov-headline { margin:14px 20px 4px; padding:13px 17px; border-radius:10px; font-size:15px;
    background:#eef4f9; border:1px solid #d9e6f0; }
  .ov-headline.good { background:#edf8ed; border-color:#cfe9cf; }
  .ov-headline.warn { background:#fff4e5; border-color:#f5d9a8; }
  .ov-headline .meta { font-size:12.5px; }
  .ov-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin:12px 20px; }
  .statcard { background:#fff; border:1px solid #e5e5e8; border-radius:10px; padding:16px;
    text-align:center; border-top:3px solid var(--brand); }
  .statval { font-size:32px; font-weight:700; line-height:1.05; color:#1a1a1a; }
  .statlabel { font-size:12.5px; color:#556; margin-top:4px; font-weight:600; }
  .statsub { font-size:11px; color:#98a0a8; margin-top:2px; }
  .ov-mapcard #ov-map { height:400px; }
  .ov-maplink { float:right; font-size:12px; font-weight:600; color:var(--brand); text-decoration:none; }
  .ov-maplink:hover { text-decoration:underline; }
  /* navigation cards (home / about / learn) */
  .ov-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:8px 20px 4px; }
  .navcard { display:flex; flex-direction:column; gap:5px; background:#fff; border:1px solid #e5e5e8;
    border-radius:12px; padding:20px 18px; text-decoration:none; color:#1a1a1a;
    transition:transform .12s,border-color .15s,box-shadow .15s; }
  .navcard:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:0 6px 18px rgba(74,127,176,.15); }
  .navcard .ico { font-size:28px; }
  .navcard b { font-size:16px; color:#1a2b3c; }
  .navcard small { font-size:12.5px; color:#667; line-height:1.4; }
  .navcard.accent { border-color:var(--brand-accent); background:linear-gradient(180deg,#fffdf6,#fff); }
  .navcard.accent b { color:#a5761a; }
  /* recent reports feed */
  .ov-reports { padding:4px 14px 6px; }
  .ov-rep { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #f0f0f2; }
  .ov-rep:last-child { border-bottom:none; }
  .ov-rep .rico { font-size:20px; }
  .ov-repdesc { font-size:13px; color:#444; margin-top:2px; }
  .rbadge { font-size:10.5px; border-radius:4px; padding:1px 6px; background:#eef0f6; color:#667; }
  .rbadge.ok { background:#e4f4e4; color:#2a7a2a; }
  .ov-repnote { padding:0 14px 12px; font-size:11.5px; }
  /* learn page tabs */
  .ltabs { display:flex; gap:2px; flex-wrap:wrap; max-width:1000px; margin:10px auto 0; padding:0 20px;
    border-bottom:2px solid #e5e5e8; }
  .ltab { padding:9px 18px; border:none; background:none; font-size:14px; font-weight:600; color:#667;
    cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
  .ltab:hover { color:var(--brand); }
  .ltab.on { color:var(--brand); border-bottom-color:var(--brand-accent); }
  .lpanel[hidden] { display:none; }
  .lnow { display:flex; gap:12px; align-items:center; max-width:1000px; margin:14px 20px 0;
    background:#fff; border:1px solid #e5e5e8; border-left:5px solid var(--brand); border-radius:8px;
    padding:12px 16px; font-size:14px; color:#333; }
  .lnow .lnow-dot { flex:0 0 auto; width:16px; height:16px; border-radius:50%; border:1px solid #0002; }
  .lnow a { color:var(--brand); font-weight:600; white-space:nowrap; }
  /* prose / content pages (learn, about) */
  .prose { padding:16px 20px; max-width:74ch; }
  .prose h3 { font-size:17px; color:#1a2b3c; margin:20px 0 8px; }
  .prose h3:first-child { margin-top:2px; }
  .prose p, .prose li { font-size:14.5px; line-height:1.6; color:#333; }
  .prose ul { padding-left:20px; } .prose li { margin:4px 0; }
  .prose a { color:var(--brand); }
  .deflist > div { margin:10px 0; } .deflist b { color:#1a2b3c; } .deflist p { margin:3px 0 0; }
  /* inline diagrams (particle size, inversion) */
  .diagram { margin:14px 0 6px; }
  .diagram svg { width:100%; height:auto; max-width:520px; display:block; margin:0 auto;
    border:1px solid #eee; border-radius:8px; background:#fff; }
  .diagram .cap { font-size:12px; color:#667; text-align:center; max-width:520px; margin:6px auto 0; }
  /* WV DEP report box */
  .depbox { background:#eef6ee; border:1px solid #cfe4cf; border-left:5px solid #2a7a2a;
    border-radius:8px; padding:12px 16px; margin:14px 0 6px; }
  .depbox > b { font-size:15px; color:#1a2b3c; }
  .depbox ul { margin:8px 0; padding-left:20px; font-size:14px; }
  .depbox li { margin:4px 0; }
  .depbox a { color:var(--brand); font-weight:600; }
  .depbox .meta { display:block; margin-top:6px; }
  table.aqi { width:100%; border-collapse:collapse; margin:6px 0; }
  table.aqi td { padding:7px 8px; border-bottom:1px solid #eee; font-size:13.5px; vertical-align:top; }
  table.aqi td:nth-child(3) { white-space:nowrap; color:#556; }
  table.aqi .sw { display:inline-block; width:16px; height:16px; border-radius:4px; border:1px solid #0002; }
  .aqibar { display:flex; border-radius:7px; overflow:hidden; margin:10px 0 6px; box-shadow:0 1px 3px rgba(0,0,0,.12); }
  .aqibar span { flex:1; padding:8px 4px; text-align:center; font-size:11.5px; font-weight:600;
    color:#fff; white-space:nowrap; }
  @media (max-width:560px){ .aqibar span { font-size:9.5px; padding:7px 2px; } }
  /* ---- Sources & Facilities page ---- */
  .carousel-wrap { position:relative; margin:2px 20px 10px; }
  .carousel { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:6px 2px 12px; scrollbar-width:thin; }
  .carousel .srccard { scroll-snap-align:start; flex:0 0 240px; }
  .carbtn { position:absolute; top:50%; transform:translateY(-60%); z-index:5; width:36px; height:36px;
    border-radius:50%; border:1px solid #dce3ea; background:#fff; font-size:20px; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.15); color:var(--brand); }
  .carbtn.prev { left:-6px; } .carbtn.next { right:-6px; }
  .carbtn:hover { background:var(--brand); color:#fff; }
  .src-filter { margin:6px 20px 0; }
  .src-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:10px 20px; }
  .srccard { display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden;
    background:#fff; border:1px solid #e5e5e8; border-radius:12px; cursor:pointer; font:inherit; color:inherit;
    transition:transform .12s,box-shadow .15s,border-color .15s; }
  .srccard:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:0 6px 18px rgba(74,127,176,.16); }
  .srccard-img, .srccard .ph { width:100%; height:118px; object-fit:cover; display:block; }
  .ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .ph .ph-ic { font-size:38px; line-height:1; }
  .ph .ph-cap { font-size:10.5px; font-weight:600; color:#5b6875; opacity:.75; letter-spacing:.02em; }
  .srccard-body { padding:10px 12px 12px; }
  .srccard-name { font-weight:700; font-size:14px; color:#1a2b3c; line-height:1.25; }
  .srccard-meta { margin:5px 0 3px; }
  .catpill { display:inline-block; color:#fff; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:20px; }
  .srccard-op { font-size:12px; color:#667; }
  /* detail modal */
  .srcbox { max-width:560px; }
  .sd-imgwrap { margin:10px 0; }
  .sd-img, .sd-imgwrap .ph { width:100%; height:240px; object-fit:cover; border-radius:8px; display:block; }
  .sd-imgwrap .ph .ph-ic { font-size:60px; }
  .sd-imgwrap .ph .ph-cap { font-size:12.5px; }
  .sd-chip { display:inline-block; color:#fff; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; }
  .sd-compliance { color:#fff; font-size:13px; padding:8px 12px; border-radius:7px; margin:2px 0 12px; }
  .sd-compliance a { color:#fff; }
  .sd-former { background:#f4efe4; border-left:3px solid #c9a24a; padding:6px 10px; border-radius:5px; margin:8px 0 0; }
  .sd-known-as { margin:2px 0 6px; color:#77808c; }
  .sd-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:12px 0; }
  .sd-facts > div { display:flex; flex-direction:column; font-size:13.5px; }
  .sd-facts b { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#8a93a0; }
  .sd-section { border-top:1px solid #eee; padding-top:10px; margin-top:10px; }
  .sd-section > b { font-size:13px; color:#1a2b3c; display:block; margin-bottom:5px; }
  .sd-sensors { width:100%; border-collapse:collapse; font-size:13px; }
  .sd-sensors td { padding:4px 6px; border-bottom:1px solid #f0f0f2; }
  .sd-actions { display:flex; gap:10px; flex-wrap:wrap; }
  .sd-actions .hbtn { border:1px solid #cdddea; }
  /* ---- Events page ---- */
  .ev-list { display:flex; flex-direction:column; gap:12px; margin:10px 20px; }
  .evcard { display:flex; gap:14px; text-align:left; background:#fff; border:1px solid #e5e5e8;
    border-radius:12px; padding:16px; cursor:pointer; font:inherit; color:inherit;
    transition:transform .12s,border-color .15s,box-shadow .15s; }
  .evcard:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:0 6px 18px rgba(74,127,176,.14); }
  .evico { font-size:30px; line-height:1; }
  .evcard-title { font-weight:700; font-size:15.5px; color:#1a2b3c; }
  .evcard-meta { font-size:12.5px; color:#667; margin:2px 0 4px; }
  .evcard-desc { font-size:13px; color:#556; }
  .evbadge { font-size:10.5px; font-weight:600; border-radius:20px; padding:2px 8px; background:#eef0f6; color:#667;
    vertical-align:middle; margin-left:4px; }
  .evbadge.cap { background:#e4f1fb; color:#2c6a9e; }
  .evbadge.med { background:#eaf5ee; color:#2a7a4a; }
  .evbox { max-width:640px; }
  .ev-meta { font-size:12.5px; color:#667; margin:2px 0 8px; }
  .ev-desc { font-size:14.5px; line-height:1.6; color:#333; }
  .ev-body { white-space:pre-wrap; }
  .ev-facts { background:#f6f9fc; border:1px solid #e5edf4; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
  .ev-fact { display:flex; gap:8px; font-size:13.5px; padding:2px 0; }
  .ev-fact b { flex:0 0 118px; color:#556; font-weight:600; }
  .ev-links { margin-top:10px; font-size:13px; }
  .ev-links a { color:var(--brand); text-decoration:none; margin-right:2px; }
  .ev-links a:hover { text-decoration:underline; }
  .ev-sub { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#8a93a0; margin:12px 0 4px; }
  .ev-chartwrap { border-top:1px solid #eee; margin-top:10px; padding-top:6px; }
  .ev-chart { height:320px; }
  .ev-nodata { border-top:1px solid #eee; margin-top:10px; padding-top:12px; font-size:13px; color:#7a5b12;
    background:#fffaf0; border-radius:6px; padding:10px 12px; }
  .ev-section a { color:var(--brand); }
  .ev-section ul { margin:4px 0; padding-left:20px; font-size:13.5px; }
  /* admin moderation cards */
  .acard { border:1px solid #e5e5e8; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
  .acard .tag { background:#eef0f6; color:#446; border-radius:4px; padding:1px 6px; font-size:11px; }
  .acard .tag.flag { background:#fdecec; color:#a00; }
  .arow { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
  .arow button.danger { color:#a00; border-color:#e0b0b0; }
  .acard .tag.cap { background:#e4f1fb; color:#2c6a9e; }
  .evform { display:flex; flex-direction:column; gap:8px; background:#fafcff; }
  .evform input, .evform select, .evform textarea { padding:7px 9px; font-size:13.5px;
    border:1px solid #ccc; border-radius:6px; font-family:inherit; width:100%; box-sizing:border-box; }
  .evform .evrow { display:flex; gap:8px; } .evform .evrow > * { flex:1; }
  .evform .evlbl { display:flex; flex-direction:column; font-size:11px; color:#667; gap:2px; }
  .evform .evchk { font-size:13px; color:#444; display:flex; align-items:center; gap:6px; }

  /* Alert sign-up */
  .lvl { display:flex; align-items:flex-start; gap:9px; padding:8px 4px; cursor:pointer; border-radius:6px; }
  .lvl:hover { background:#f5f7f9; }
  .lvl input { margin-top:3px; }
  .lvl span { display:flex; flex-direction:column; gap:1px; font-size:14px; color:#222; }
  .lvl small { color:#667; font-size:12px; }
  .lvl .sw { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid #0002; margin-right:5px; vertical-align:middle; }
  .a-fs { border:1px solid #e0e0e0; border-radius:8px; padding:6px 12px 10px; }
  .a-fs > legend { font-size:13px; color:#555; padding:0 6px; font-weight:600; }
  .soon { font-size:10px; font-weight:700; color:#7a5b12; background:#fff4d6; border-radius:4px;
    padding:1px 5px; vertical-align:middle; margin-left:2px; }
  #alertform input[type=email], #alertform select { border:1px solid #cfd6dc; border-radius:7px; font-size:15px; }

  /* Sources — compliance & permits (EPA ECHO) */
  .fac-summary { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px; }
  .fac-stat { border:1px solid #d7dde3; border-left-width:4px; border-radius:7px; padding:7px 12px; font-size:13px; color:#556; background:#fff; }
  .fac-stat b { font-size:18px; margin-right:4px; }
  table.fac-table { width:100%; border-collapse:collapse; font-size:14px; }
  table.fac-table th { text-align:left; padding:9px 12px; background:#f5f7f9; color:#556; font-weight:600; position:sticky; top:0; }
  table.fac-table td { padding:9px 12px; border-top:1px solid #eef1f4; vertical-align:top; }
  table.fac-table tr:hover td { background:#fafbfc; }
  .fac-badge { display:inline-block; color:#fff; font-size:12px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; }
  .prog-chip { display:inline-block; font-size:11px; color:#445; background:#eef1f4; border-radius:20px; padding:1px 7px; white-space:nowrap; }

  /* Measured-water chips in the coal discharge popup (Water page) */
  .cn-wqbox { margin-top:5px; border-top:1px solid #eee; padding-top:5px; }
  .wq-chip { display:inline-block; font-size:11px; border:1px solid #ccc; border-left-width:3px;
             border-radius:4px; padding:0 5px; margin:1px 2px 1px 0; background:#fff; }

  /* "What's near me?" hazard guide (/nearby) */
  .nb-disc { padding:12px 16px; background:#fff8f0; border-left:4px solid #e07b00; color:#5a4326; font-size:14px; }
  .nb-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
  .nb-chip { border:1px solid #cfd6dc; background:#fff; border-radius:20px; padding:6px 12px; font-size:13px; cursor:pointer; }
  .nb-chip:hover { background:#f5f7f9; }
  .nb-chip.on { background:#2c3e70; color:#fff; border-color:#2c3e70; }
  .nb-group.rel { box-shadow:0 0 0 2px #2c3e70 inset; }
  .nb-match { font-size:11px; background:#2c3e70; color:#fff; border-radius:20px; padding:1px 9px; margin-left:6px; vertical-align:middle; }
  .nb-list { display:flex; flex-direction:column; }
  .nb-item { display:flex; align-items:center; gap:10px; padding:8px 14px; border-top:1px solid #eef1f4; }
  .nb-item.rel { background:#fbfbfe; }
  .nb-ic { font-size:18px; width:22px; text-align:center; }
  .nb-body { flex:1; min-width:0; }
  .nb-title { font-size:14px; font-weight:600; color:#222; }
  .nb-meta { font-size:12px; color:#667; }
  .nb-actions { display:flex; gap:12px; font-size:13px; white-space:nowrap; }
  .nb-flag { font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:#fff; border-radius:20px; padding:1px 7px; margin-left:6px; }
  .nb-orphan, .nb-violation, .nb-impaired, .nb-spill { background:#c0392b; }