/* SGWeather — shared styles. Brand: Singapore red on white. Status colours stay NEA/EPA semantic. */
:root{
  --red:#E4002B; --red-deep:#B3001F; --red-soft:#FCE8EC; --red-tint:#FFF5F6;
  --paper:#FFFFFF; --paper-2:#FAF7F7; --ink:#1E1416; --ink-2:#6E5F62; --rule:#EFDFE1; --card:#FFFFFF;
  --good:#3C9A5F; --moderate:#3E86C7; --unhealthy:#E0B32B; --vunhealthy:#E37A22; --hazard:#C93B3B;
  --on-band:#FFFFFF; --on-yellow:#1E1416;
  --r-north:#3F5FBF; --r-west:#1F9E89; --r-central:#D9534F; --r-east:#8E44AD; --r-south:#C2185B;
  --tap:44px; --pad:18px; --radius:14px; --shadow:0 1px 2px rgba(30,20,22,.06), 0 6px 20px rgba(30,20,22,.05);
  --tabbar:calc(60px + env(safe-area-inset-bottom,0px));
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --red:#FF4D63; --red-deep:#FF7A8A; --red-soft:#3A0F17; --red-tint:#2A0B11; --paper:#160A0D; --paper-2:#1E0F13; --ink:#F7EEF0; --ink-2:#B9A6AA; --rule:#3B2529; --card:#211216; --shadow:none;
    --r-north:#8FA3F0; --r-west:#5CC9B4; --r-central:#F08C88; --r-east:#C08BE0; --r-south:#F06FA8; }
}
:root[data-theme="dark"]{ --red:#FF4D63; --red-deep:#FF7A8A; --red-soft:#3A0F17; --red-tint:#2A0B11; --paper:#160A0D; --paper-2:#1E0F13; --ink:#F7EEF0; --ink-2:#B9A6AA; --rule:#3B2529; --card:#211216; --shadow:none; }
*{box-sizing:inherit;margin:0}
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.5;font-feature-settings:"tnum" 1;padding-bottom:var(--tabbar)}
@media (min-width:760px){ body{padding-bottom:0} }
a{color:var(--red-deep)}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:8px;background:var(--red);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:720px}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:-0.02em}
.brand .mark{width:30px;height:30px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;letter-spacing:0}
.brand em{font-style:normal;color:var(--red)}
.nav{display:none;gap:4px}
.nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:15px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--red-soft);color:var(--red-deep)}
@media (min-width:760px){ .nav{display:flex} }
.clock{font-size:13px;color:var(--ink-2);white-space:nowrap}

/* bottom tab bar (mobile) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;text-decoration:none;color:var(--ink-2);font-size:11px;font-weight:600;min-height:60px;justify-content:center}
.tabbar a svg{width:22px;height:22px}
.tabbar a[aria-current="page"]{color:var(--red)}
@media (min-width:760px){ .tabbar{display:none} }

/* type */
h1{font-size:clamp(28px,6.4vw,40px);line-height:1.12;letter-spacing:-0.02em;font-weight:800;text-wrap:balance}
h2{font-size:22px;font-weight:800;letter-spacing:-0.01em;margin:0 0 10px}
h2 .stamp,h3 .stamp{font-size:13px;font-weight:500;color:var(--ink-2);margin-left:8px}
h3{font-size:17px;font-weight:700;margin:0 0 6px}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch}
.prose p{margin:0 0 14px;max-width:70ch}
.prose ul,.prose ol{margin:0 0 14px 22px;max-width:70ch}
.prose li{margin-bottom:6px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.note{font-size:13px;color:var(--ink-2);margin-top:10px}
.warn{color:#9A6A00}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .warn{color:#F2C766} }
.small{font-size:14px;color:var(--ink-2)}

/* layout */
section.block{padding:22px 0;border-bottom:1px solid var(--rule)}
section.block:last-of-type{border-bottom:0}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr 1fr}
@media (min-width:640px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.card.red{background:var(--red);color:#fff;border-color:var(--red)}
.card.red a{color:#fff}
.card.soft{background:var(--red-tint)}

/* hero */
.hero{padding:16px 0 18px}
.hero .say{font-size:clamp(22px,6vw,38px);line-height:1.12;font-weight:800;letter-spacing:-0.02em;text-wrap:balance;margin:4px 0 0}
.hero .say .band{white-space:nowrap}
.hero .sub{font-size:13px;color:var(--ink-2)}
.hero .row{margin-top:14px}
/* red hero band — the social-card look; same in light and dark, so sprites always sit on red */
.heroband{background:#E4002B;color:#fff;border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow)}
.heroband .eyebrow.light{color:#FFD5DC}
.heroband .say{color:#fff}
.heroband .sub{color:#FFD5DC;margin-top:8px}
.heroband .says{color:#fff;opacity:.95;margin-top:10px;font-size:15px}
.heroband .says b{color:#FFD5DC}
.herostats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.herostats{display:grid;grid-template-columns:repeat(3,1fr)}
.herostats div{background:rgba(255,255,255,.16);border-radius:12px;padding:8px 10px;min-width:0}
.herostats b{display:block;font-size:20px;white-space:nowrap;line-height:1.05;font-weight:800;letter-spacing:-0.02em}
.herostats span{font-size:12px;color:#FFD5DC}
.herostats .chip{font-size:16px;padding:1px 7px;vertical-align:1px}
.heroband .herogrid{grid-template-columns:1fr 96px;gap:10px;align-items:center}
.heroband .hero-mascot{width:96px;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.25))}
@media (min-width:480px){ .heroband{padding:22px 24px 20px} .heroband .herogrid{grid-template-columns:1fr 130px;gap:16px} .heroband .hero-mascot{width:130px} }
@media (min-width:760px){ .heroband .herogrid{grid-template-columns:1fr 170px;gap:24px} .heroband .hero-mascot{width:170px} .herostats{max-width:560px} }

/* status tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:760px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tile{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px;min-height:96px;box-shadow:var(--shadow)}
.tile .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tile .v{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-0.02em}
.tile .d{font-size:13px;color:var(--ink-2)}
.tile .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--rule)}

/* now-near card */
.now{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.now svg{width:52px;height:52px}
.now b{font-size:22px;display:block;line-height:1.2}
.now span{font-size:14px;color:var(--ink-2)}
.obs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.obs div{background:var(--paper-2);border-radius:10px;padding:8px 10px}
.obs b{display:block;font-size:18px;line-height:1.2}
.obs span{font-size:12px;color:var(--ink-2)}

/* controls */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .grow{flex:1;min-width:0}
select,input[type=date]{min-height:var(--tap);font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:0 12px;appearance:none;-webkit-appearance:none;min-width:0}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236E5F62' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.btn{min-height:var(--tap);padding:0 16px;border-radius:10px;border:1px solid var(--red);background:transparent;color:var(--red-deep);font:inherit;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.btn.primary{background:var(--red);color:#fff}
.btn.ghost{border-color:var(--rule);color:var(--ink)}
.btn:disabled{opacity:.5}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{min-height:38px;padding:0 14px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--red);color:#fff}

/* details / expanders */
details.x{border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);margin-top:10px;box-shadow:var(--shadow)}
details.x>summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:var(--tap)}
details.x>summary::-webkit-details-marker{display:none}
details.x>summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s;flex:none}
details.x[open]>summary::after{transform:rotate(-135deg)}
details.x>summary .stamp{font-weight:500;font-size:13px;color:var(--ink-2);margin-left:auto;text-align:right}
details.x>.body{padding:0 16px 14px}

/* compass */
.compass{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;aspect-ratio:1/1;max-width:400px;margin:0 auto}
.region{border-radius:14px;padding:10px 10px 8px;display:flex;flex-direction:column;justify-content:space-between;color:var(--on-band);background:var(--rule);min-height:0}
.region.north{grid-column:2;grid-row:1}.region.west{grid-column:1;grid-row:2}.region.central{grid-column:2;grid-row:2}.region.east{grid-column:3;grid-row:2}.region.south{grid-column:2;grid-row:3}
.region b{font-size:clamp(26px,8vw,38px);font-weight:800;line-height:1;letter-spacing:-0.02em}
.region .nm{font-size:13px;font-weight:600;opacity:.92}
.region .pm{font-size:12px;opacity:.92;line-height:1.25}
.b-good{background:var(--good)!important}.b-moderate{background:var(--moderate)!important}
.b-unhealthy{background:var(--unhealthy)!important;color:var(--on-yellow)!important}
.b-vunhealthy{background:var(--vunhealthy)!important}.b-hazard{background:var(--hazard)!important}
.b-none{color:var(--ink-2)!important}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.advice{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--red-tint);border:1px solid var(--rule);font-size:15px}
.advice b{display:block;margin-bottom:2px}

/* chips + tables */
.chip{display:inline-block;min-width:34px;padding:2px 7px;border-radius:7px;font-weight:700;text-align:center;color:var(--on-band)}
.c-good{background:var(--good)}.c-moderate{background:var(--moderate)}.c-unhealthy{background:var(--unhealthy);color:var(--on-yellow)}.c-vunhealthy{background:var(--vunhealthy)}.c-hazard{background:var(--hazard)}
.c-none{background:transparent;color:var(--ink-2);font-weight:400}
.us-good{background:#00E400;color:#1E1416}.us-moderate{background:#FFFF00;color:#1E1416}.us-usg{background:#FF7E00;color:#fff}.us-unhealthy{background:#FF0000;color:#fff}.us-vunhealthy{background:#8F3F97;color:#fff}.us-hazard{background:#7E0023;color:#fff}.us-none{color:var(--ink-2);font-weight:400}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:12px;background:var(--card)}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th,table.t td{padding:9px 8px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
table.t th:first-child,table.t td:first-child{text-align:left;padding-left:12px}
table.t th{font-weight:600;color:var(--ink-2);font-size:13px}
table.t tbody tr:last-child td{border-bottom:0}
table.t td small{display:block;font-size:12px;color:var(--ink-2);font-weight:400;white-space:normal}
table.t.center td,table.t.center th{text-align:center}
table.t.center th:first-child,table.t.center td:first-child{text-align:left}
tr.latest td{font-size:16px}
.more{margin-top:8px;text-align:center}

/* chart */
.chart{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 6px 4px;margin-bottom:10px}
.chart svg{width:100%;height:auto;display:block}
.chart .axis{font-size:10px;fill:var(--ink-2)}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .b1{fill:var(--unhealthy);opacity:.10}.chart .b2{fill:var(--vunhealthy);opacity:.10}.chart .b3{fill:var(--hazard);opacity:.10}
.rlegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--ink-2);margin:0 0 10px 2px}
.rlegend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:3px}

/* forecast blocks */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-size:19px;line-height:1.2}
.stat span{font-size:13px;color:var(--ink-2)}
.periods{display:flex;flex-direction:column;gap:8px}
.period{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.period .t{font-size:14px;color:var(--ink-2);grid-column:1/-1}
.period .f{font-size:17px;font-weight:600}
.period .regions{grid-column:1/-1;font-size:13px;color:var(--ink-2);margin-top:2px}
.period svg,.day svg{width:28px;height:28px}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.day{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 8px;text-align:center}
.day .d{font-size:14px;font-weight:600}
.day svg{margin:6px auto;display:block}
.day .r{font-size:15px}
.day .s{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.25}
.nowcast{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px}
.nowcast svg{width:44px;height:44px;flex:none}
.nowcast b{font-size:20px;display:block;line-height:1.2}
.nowcast span{font-size:14px;color:var(--ink-2)}
.arealist{columns:2;column-gap:16px;font-size:14px}
.arealist div{break-inside:avoid;display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--rule)}
.arealist div span:last-child{color:var(--ink-2);text-align:right}

/* radar map */
.map{position:relative;height:min(62vh,480px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.map .leaflet-container{height:100%;width:100%;font:inherit}
.map .stamp{position:absolute;left:10px;top:10px;z-index:400;background:rgba(255,255,255,.92);color:#1E1416;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600}
.mapctl{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.mapctl input[type=range]{flex:1;min-width:120px}
.rainlegend{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-2);margin-top:8px;flex-wrap:wrap}
.rainlegend i{display:inline-block;width:18px;height:10px;border-radius:2px}
.station-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:14px}
@media (min-width:640px){ .station-list{grid-template-columns:repeat(3,1fr)} }
.station-list div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule)}
.station-list div b{white-space:nowrap}

/* explore */
.zonecards{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .zonecards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .zonecards{grid-template-columns:repeat(3,1fr)} }
.zonecard{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.zonecard h3{margin:0 0 4px;font-size:20px}
.zonecard .live{margin-top:10px;font-size:14px;color:var(--ink-2)}
.zonecard:hover{border-color:var(--red)}
.livestrip{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:640px){ .livestrip{grid-template-columns:repeat(4,1fr)} }
.livestrip div{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.livestrip b{display:block;font-size:18px;line-height:1.2}
.livestrip span{font-size:12px;color:var(--ink-2)}
.packlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.packlist li{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.packlist li svg{width:22px;height:22px;flex:none;color:var(--red)}
.packlist li b{display:block}
.packlist li span{font-size:14px;color:var(--ink-2)}
.faq details{border-bottom:1px solid var(--rule);padding:10px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;min-height:var(--tap);display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:8px 0 0;color:var(--ink-2);max-width:70ch}
.crumbs{font-size:13px;color:var(--ink-2);padding:12px 0 0}
.crumbs a{color:var(--ink-2)}
.crumbs span{margin:0 6px}

/* ads */
.ad{margin:16px 0;display:none}
.ad.on{display:block}
.ad .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:center;margin-bottom:4px}
.ad .slot{min-height:100px;background:var(--paper-2);border:1px dashed var(--rule);border-radius:10px;display:grid;place-items:center}
@media (min-width:760px){ .ad .slot{min-height:250px} }

/* consent */
.consent{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar) + 12px);z-index:60;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:14px;display:none}
.consent.on{display:block}
.consent .row{margin-top:10px}
@media (min-width:760px){ .consent{left:auto;right:16px;bottom:16px;max-width:380px} }

/* errors, footer */
.err{padding:12px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--card);font-size:15px;margin-top:10px}
footer.foot{margin-top:28px;border-top:1px solid var(--rule);padding:22px 0 16px;font-size:13px;color:var(--ink-2);line-height:1.55}
footer.foot .cols{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){ footer.foot .cols{grid-template-columns:2fr 1fr 1fr} }
footer.foot h4{font-size:13px;color:var(--ink);margin:0 0 6px;font-weight:700}
footer.foot ul{list-style:none;margin:0;padding:0}
footer.foot li{margin-bottom:4px}
footer.foot a{color:var(--ink-2)}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){ .region,.tile,.day{transition:background-color .3s} }

/* hourly scroller */
.hourly{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;scroll-snap-type:x proximity}
.hourly .hr{flex:0 0 64px;scroll-snap-align:start;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.hourly .hr svg{width:26px;height:26px}
.hourly .hr .t{font-size:12px;color:var(--ink-2);font-weight:600}
.hourly .hr b{font-size:17px}
.hourly .hr .p{font-size:12px;color:var(--moderate);font-weight:600}
.hourly .hr .p.wet{color:var(--red)}
.hourly .hr .w{font-size:11px;color:var(--ink-2)}
.sun{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sun div{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:8px 10px}
.sun b{display:block;font-size:18px;line-height:1.2}
.sun span{font-size:12px;color:var(--ink-2)}
.days.seven{grid-template-columns:repeat(7,minmax(70px,1fr));overflow-x:auto}

/* alert line */
.alert{margin:12px 0 0;border-radius:12px;overflow:hidden}
.alert a{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:inherit;font-size:15px;line-height:1.35}
.alert .dot{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor}
.alert .txt{flex:1}
.alert .more{font-size:12px;opacity:.8;white-space:nowrap}
.alert.danger{background:var(--red);color:#fff}
.alert.warn{background:#FFF1C2;color:#5A3D00;border:1px solid #F0D48A}
.alert.ok{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--rule)}
.alert.ok .dot{background:var(--good)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .alert.warn{background:#3A2C00;color:#F2C766;border-color:#5A4400} }
.chip.small{display:block;font-size:11px;min-width:28px;padding:1px 5px;margin:3px auto 0;line-height:1.3}
table.t.center td .chip{display:inline-block}
table.t.center td .chip.small{display:block}
.tile .v .chip{font-size:20px;padding:2px 9px}

.chart .u1{fill:#FFFF00;opacity:.12}.chart .u2{fill:#FF7E00;opacity:.12}.chart .u3{fill:#FF0000;opacity:.12}.chart .u4{fill:#8F3F97;opacity:.12}.chart .u5{fill:#7E0023;opacity:.12}
.seg button:disabled{opacity:.4}
details.x+details.x{margin-top:10px}

/* mascots */
.mascot{display:block;object-fit:contain;height:auto;flex:none}
/* on dark surfaces the brown line work needs a light rim; on light surfaces a soft plate keeps them from floating */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mascot:not(.hero-mascot):not(.avatar){filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 1px rgba(255,255,255,.6))} }
:root[data-theme="dark"] .mascot:not(.hero-mascot):not(.avatar){filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 1px rgba(255,255,255,.6))}
.mplate{display:grid;place-items:center;background:var(--red-tint);border-radius:50%;padding:10px}
.herogrid{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.herogrid .mascot{width:120px;height:auto}
@media (min-width:640px){ .herogrid .mascot{width:150px} }
.hero-mascot{transition:opacity .3s}
.says{margin-top:8px;font-size:15px;color:var(--ink-2)}
.says b{color:var(--red)}
.zonecard.withguide{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.zonecard.withguide .mascot{width:88px}
.guides{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .guides{grid-template-columns:1fr 1fr} }
.guide{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.guide .mascot{width:96px}
.alert .avatar{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover}