/* Cockpit surface for app.html — glass language shared with index.html.
   Consumes the custom properties atmosphere.ts sets at runtime:
   --risk (0-100, root), --subrisk/--sc/--sc-rgb (dial rings),
   --factor/--fc/--fc-rgb (exposure cells), --signal/--signal-rgb (global). */

/* ---------- shell and command center ---------- */
.risk-shell{max-width:1240px;margin:0 auto;padding:28px 20px 10px}
.risk-command-center{position:relative;overflow:hidden;padding:clamp(22px,3vw,38px);border:1px solid transparent;border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-high) 84%,transparent),color-mix(in srgb,var(--surface-low) 76%,transparent)) padding-box,linear-gradient(125deg,color-mix(in srgb,var(--signal) 62%,white),var(--white-glint) 35%,color-mix(in srgb,var(--signal) 32%,transparent)) border-box;box-shadow:0 28px 100px rgba(var(--signal-rgb),.2),inset 0 1px 0 var(--white-glint);backdrop-filter:blur(38px) saturate(165%)}
.risk-command-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:23px;border-bottom:1px solid color-mix(in srgb,var(--signal) 22%,var(--line))}
.risk-command-head h1{margin:8px 0;font-size:clamp(34px,4.2vw,64px);line-height:.94;letter-spacing:-.07em}
.risk-command-head h1 span{color:var(--signal);text-shadow:0 0 34px rgba(var(--signal-rgb),.28)}
.risk-command-head p{max-width:720px;margin:0;color:var(--text-soft);font-size:14px}
.cockpit-purpose{margin:0 0 6px!important;color:var(--text)!important;font-weight:650}
.risk-location-line{display:flex;align-items:center;gap:8px;margin:8px 0 0!important;color:var(--muted)!important;font-size:12.5px!important}
.risk-location-line .live-dot{flex:0 0 auto}
#risk-summary{margin-top:10px!important;color:var(--muted)!important;font-size:12.5px!important;line-height:1.55}

/* ---------- command grid ---------- */
.risk-command-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 0}
.risk-dial-panel,.risk-intelligence-panel,.risk-action-panel,.risk-horizon,.risk-channel-ribbon{min-width:0;border:1px solid color-mix(in srgb,var(--signal) 18%,var(--line));border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-high) 65%,transparent),color-mix(in srgb,var(--surface-low) 75%,transparent));box-shadow:inset 0 1px 0 var(--white-glint);backdrop-filter:blur(20px)}
.risk-dial-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.risk-intelligence-panel{padding:18px}
.risk-intelligence-panel .risk-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}
.risk-intelligence-panel .risk-matrix-cell{min-height:88px;padding:13px}
.risk-action-panel{display:flex;flex-direction:column;padding:18px}
.risk-action-panel .life-risk-action{width:100%;margin-top:18px}
.risk-horizon{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:16px}
.risk-channel-ribbon{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;padding:14px}
.risk-risk-note{max-width:280px;margin:12px 0 0;color:var(--muted);font-size:10px;line-height:1.45}
@media (min-width:1080px){
  .risk-command-grid{grid-template-columns:minmax(250px,.85fr) minmax(380px,1.5fr) minmax(225px,.75fr)}
  .risk-dial-panel{grid-area:1/1/3/2}
  .risk-intelligence-panel{grid-area:1/2/3/3}
  .risk-action-panel{grid-area:1/3/3/4}
  .risk-horizon{grid-area:3/1/4/4;grid-template-columns:repeat(5,minmax(0,1fr))}
  .risk-channel-ribbon{grid-area:4/1/5/4}
}

/* ---------- risk dial ---------- */
.dial-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;margin-bottom:6px;text-align:left}
.dial-title span{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--text)}
.dial-title small{color:var(--muted);font-size:10.5px}
.risk-risk-orbit{position:relative;width:min(252px,74vw);aspect-ratio:1;margin:8px auto 4px;display:grid;place-items:center;border-radius:50%;isolation:isolate}
.risk-risk-orbit .risk-gauge{position:absolute;inset:0;height:auto;margin:0;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:50%;background:transparent;overflow:visible}
.risk-risk-orbit::before{content:"";position:absolute;inset:3px;border-radius:50%;background:conic-gradient(from 210deg,var(--signal) calc(var(--risk,0) * 2.4deg),color-mix(in srgb,var(--line) 62%,transparent) 0);mask:radial-gradient(circle,transparent 0 80%,#000 81%);-webkit-mask:radial-gradient(circle,transparent 0 80%,#000 81%);box-shadow:0 0 42px rgba(var(--signal-rgb),.22);transition:background .6s var(--ease-out)}
.risk-subring{position:absolute;border-radius:50%;background:conic-gradient(var(--sc,var(--signal)) calc(var(--subrisk,0) * 3.6deg),color-mix(in srgb,var(--line) 45%,transparent) 0);mask:radial-gradient(circle,transparent 0 91%,#000 92%);-webkit-mask:radial-gradient(circle,transparent 0 91%,#000 92%)}
.subring-air{inset:-13px}
.subring-weather{inset:-13px;rotate:95deg}
.subring-uv{inset:-24px;rotate:185deg}
.subring-wind{inset:-24px;rotate:275deg}
.subring-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;width:100%;margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--signal) 16%,var(--line))}
.subring-legend span{display:flex;align-items:center;gap:7px;font:750 9.5px var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.subring-legend b{margin-left:auto;color:var(--text);font:800 11px var(--mono);font-variant-numeric:tabular-nums}
.subring-legend i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--signal)}
.lg-air{background:#64a8ff}.lg-weather{background:#8d72ff}.lg-uv{background:#ffb04a}.lg-wind{background:#45e0c1}
.dial-bands{display:flex;justify-content:space-between;gap:6px;width:100%;margin-top:12px;padding:0 10px;pointer-events:none}
.dial-bands i{width:1px;height:9px;border-radius:2px;background:color-mix(in srgb,var(--text) 20%,transparent)}
.risk-scale{display:flex;align-items:center;gap:5px;width:100%;margin-top:12px;font:800 8.5px var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.risk-scale i{flex:1;height:5px;border-radius:99px}
.risk-scale i:nth-of-type(1){background:var(--ok)}
.risk-scale i:nth-of-type(2){background:color-mix(in srgb,var(--ok) 55%,var(--warn))}
.risk-scale i:nth-of-type(3){background:var(--warn)}
.risk-scale i:nth-of-type(4){background:var(--bad)}
.risk-scale i:nth-of-type(5){background:var(--extreme)}
#risk-count{font:800 clamp(30px,7vw,42px)/1 var(--mono);color:var(--signal);font-variant-numeric:tabular-nums}
#risk-level{margin-top:4px;color:var(--muted);font:750 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.signal-core em{color:var(--faint);font-size:9.5px;font-style:normal}
#risk-note{margin-top:14px!important;text-align:center}

/* ---------- risk horizon strip ---------- */
.risk-horizon span{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px 4px;border-radius:14px;background:color-mix(in srgb,var(--surface-low) 55%,transparent)}
.risk-horizon small{color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.08em;text-align:center;text-transform:uppercase}
.risk-horizon b{color:var(--text);font:800 17px var(--mono);font-variant-numeric:tabular-nums}

/* ---------- intelligence panel ---------- */
.subindex-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--signal) 16%,var(--line))}
.subindex-head span{display:block;color:var(--faint);font:800 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.subindex-head strong{display:block;margin-top:5px;font-size:14px;line-height:1.35}
.subindex-head small{max-width:230px;color:var(--muted);font-size:10.5px;line-height:1.4;text-align:right}
.cockpit-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}
.cockpit-kpis article{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-low) 62%,transparent)}
.cockpit-kpis span{color:var(--faint);font:800 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cockpit-kpis b{color:var(--text);font:800 19px var(--mono);font-variant-numeric:tabular-nums}
.cockpit-kpis small{color:var(--muted);font-size:10px;line-height:1.35}
.intelligence-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 10px}
.intelligence-label span{font-size:12.5px;font-weight:750}
.intelligence-label small{color:var(--faint);font-size:10px}
.risk-matrix-cell{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-low) 70%,transparent);cursor:pointer;transition:border-color .25s,transform .25s var(--ease-spring)}
.risk-matrix-cell:hover{border-color:color-mix(in srgb,var(--signal) 42%,var(--line));transform:translateY(-2px)}
.risk-matrix-cell:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.risk-matrix-cell.is-unavailable{opacity:.55;cursor:default}
.risk-matrix-cell.is-unavailable:hover{transform:none}
.exposure-ring{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--fc,var(--signal)) calc(var(--factor,0) * 3.6deg),color-mix(in srgb,var(--line) 55%,transparent) 0)}
.exposure-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface-solid)}
.exposure-ring>*{position:relative;z-index:1}
.er-value{color:var(--text);font:800 11px var(--mono);line-height:1.1}
.er-unit{color:var(--muted);font:700 7.5px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.exposure-copy{min-width:0}
.exposure-copy strong{display:block;font-size:12px;line-height:1.3}
.exposure-copy em,.exposure-copy span,.exposure-copy small{display:block;color:var(--muted);font-size:10px;line-height:1.35}
.exposure-bar{grid-column:1/-1;height:5px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--line) 62%,transparent)}
.exposure-bar i{display:block;height:100%;border-radius:inherit;background:var(--fc,var(--signal))}
.exposure-detail{display:none;grid-column:1/-1;padding-top:9px;border-top:1px solid var(--line)}
.risk-matrix-cell.is-open .exposure-detail{display:block}
.exposure-detail strong{display:block;margin-bottom:4px;font-size:11.5px}
.exposure-detail span{display:block;color:var(--text-soft);font-size:11px;line-height:1.45}
.exposure-detail small{display:block;margin-top:5px;color:var(--faint);font:700 9px var(--mono);letter-spacing:.05em}
.risk-method{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.risk-method summary{display:flex;align-items:center;gap:8px;color:var(--text-soft);font-size:11.5px;font-weight:700;cursor:pointer}
.risk-method p{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.risk-analysis-graph{position:relative;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-low) 58%,transparent)}
.risk-analysis-graph>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.risk-analysis-graph>div:first-child span{font-size:11.5px;font-weight:700}
.risk-analysis-graph>div:first-child small{color:var(--faint);font:750 9px var(--mono);letter-spacing:.08em;text-transform:uppercase}
#risk-history-graph{display:block;width:100%;height:116px;overflow:visible}
.graph-area{fill:color-mix(in srgb,var(--signal) 16%,transparent);stroke:none}
#risk-history-graph polyline{fill:none;stroke:var(--signal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#risk-history-graph circle{fill:var(--signal)}
.graph-axis{display:grid;grid-auto-flow:column;justify-content:space-between;gap:8px;margin-top:7px;color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---------- action panel ---------- */
.action-status{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid color-mix(in srgb,var(--signal) 20%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--signal) 8%,transparent)}
.action-status-icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--signal) 18%,transparent);color:var(--signal);font:800 15px var(--mono)}
.action-status small{display:block;color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.action-status strong{display:block;margin-top:3px;font-size:12.5px;line-height:1.3}
.action-guidance{margin-top:16px}
.action-guidance small{color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.action-guidance strong{display:block;margin:6px 0 5px;font-size:14px;line-height:1.3}
.action-guidance p{margin:0;color:var(--text-soft);font-size:11.5px;line-height:1.5}
.risk-action-buttons{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:16px}
.risk-action-buttons .life-risk-action{width:100%;margin-top:0}
.source-health{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.source-health span{display:flex;align-items:center;gap:6px;color:var(--muted);font:750 9px var(--mono);letter-spacing:.07em;text-transform:uppercase}
.source-health i{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ---------- channel ribbon ---------- */
.risk-channel-ribbon button{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--surface-low) 58%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,transform .25s var(--ease-spring)}
.risk-channel-ribbon button:hover{border-color:color-mix(in srgb,var(--signal) 45%,var(--line));transform:translateY(-2px)}
.risk-channel-ribbon button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.risk-channel-ribbon b{color:var(--text);font:800 17px var(--mono);font-variant-numeric:tabular-nums}
.risk-channel-ribbon small{color:var(--muted);font-size:10.5px;line-height:1.3}

/* ---------- explainer ---------- */
.risk-explainer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-high) 62%,transparent),color-mix(in srgb,var(--surface-low) 72%,transparent))}
.risk-explainer h2{margin:8px 0;font-size:18px;line-height:1.25}
.risk-explainer p{margin:0;color:var(--text-soft);font-size:12.5px;line-height:1.55}
.explainer-links{display:flex;flex-direction:column;gap:8px;justify-content:center}
.explainer-links button{padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-low) 62%,transparent);color:var(--text);font:650 12px var(--font);text-align:left;cursor:pointer;transition:border-color .25s,transform .25s var(--ease-spring)}
.explainer-links button:hover{border-color:color-mix(in srgb,var(--signal) 45%,var(--line));transform:translateX(3px)}

/* ---------- message center ---------- */
.message-center{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-high) 62%,transparent),color-mix(in srgb,var(--surface-low) 72%,transparent))}
.message-center-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.message-center-head h2{margin:8px 0 6px;font-size:19px;line-height:1.25}
.message-center-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.message-live-dot{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--bad);animation:cockpit-pulse 1.8s ease-in-out infinite}
.message-center-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}
.message-priority{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px;border:1px solid color-mix(in srgb,var(--bad) 34%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--bad) 9%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer}
.message-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);font:800 17px var(--mono)}
.message-priority small{display:block;color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.message-priority strong{display:block;margin:4px 0 3px;font-size:13px}
.message-priority em{display:block;color:var(--muted);font-size:11px;font-style:normal;line-height:1.4}
.message-priority b{color:var(--bad);font:800 19px var(--mono)}
.message-channel{display:flex;flex-direction:column;gap:3px;padding:13px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-low) 62%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,transform .25s var(--ease-spring)}
.message-channel:hover{border-color:color-mix(in srgb,var(--signal) 42%,var(--line));transform:translateY(-2px)}
.message-channel span{color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.message-channel strong{font-size:13px}
.message-channel small{color:var(--muted);font-size:10.5px;line-height:1.35}
.warning-taxonomy{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.warning-taxonomy button{padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:transparent;color:var(--text-soft);font:650 11.5px var(--font);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.warning-taxonomy button:hover{border-color:color-mix(in srgb,var(--signal) 45%,var(--line));color:var(--text);background:color-mix(in srgb,var(--signal) 8%,transparent)}
.safety-reassurance{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:16px;padding:15px;border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--ok) 8%,transparent)}
.safety-shield{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);font-size:17px;font-weight:800}
.safety-reassurance small{display:block;color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.safety-reassurance strong{display:block;margin:4px 0 3px;font-size:13px}
.safety-reassurance em{display:block;color:var(--muted);font-size:11px;font-style:normal;line-height:1.4}
@keyframes cockpit-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ---------- brief, rail and about ---------- */
.daily-brief{margin-top:22px}
.daily-brief>header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.daily-brief>header h2{margin:6px 0 0;font-size:20px}
#hero-clock{color:var(--muted);font:800 12px var(--mono);font-variant-numeric:tabular-nums}
.overview-rail{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface-low) 58%,transparent)}
.overview-rail a{padding:7px 14px;border-radius:var(--radius-pill);color:var(--text-soft);font-size:12px;font-weight:650;text-decoration:none;transition:color .2s,background .2s}
.overview-rail a:hover{color:var(--text);background:color-mix(in srgb,var(--signal) 10%,transparent)}
.channel-insight{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:21px;background:color-mix(in srgb,var(--surface-low) 55%,transparent)}
.channel-insight h2{margin:8px 0;font-size:18px}
.channel-insight p{margin:0;color:var(--text-soft);font-size:12.5px;line-height:1.55;max-width:70ch}
.about-waarning{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-high) 62%,transparent),color-mix(in srgb,var(--surface-low) 72%,transparent))}
.about-copy h1{margin:10px 0 12px;font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.03em}
.about-copy p{max-width:74ch;margin:0 0 10px;color:var(--text-soft);font-size:13px;line-height:1.6}
.about-copy small{display:block;margin-top:14px;color:var(--faint);font-size:10.5px;line-height:1.55}
.about-principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:18px}
.about-principles article{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-low) 62%,transparent)}
.about-principles b{color:var(--signal);font:800 11px var(--mono);letter-spacing:.1em}
.about-principles strong{font-size:13px}
.about-principles span{color:var(--muted);font-size:11px;line-height:1.45}
.version-line{display:block;margin-top:10px;color:var(--faint);font:750 10px var(--mono);letter-spacing:.06em}

/* ---------- topbar additions ---------- */
.brand-mark{display:grid;place-items:center;color:var(--accent)}
.language-toggle{min-width:44px;padding:0 10px;border-radius:12px;color:var(--text-soft);font:800 11px var(--mono);letter-spacing:.06em;cursor:pointer}
.language-toggle:hover{color:var(--text)}
.message-bell{position:relative}
.message-bell svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.message-count{position:absolute;top:2px;right:2px;min-width:15px;padding:0 4px;border-radius:99px;background:var(--bad);color:#fff;font:800 9px/15px var(--mono);text-align:center}
.message-count[hidden]{display:none}

/* ---------- spotlight dialog (created by atmosphere.ts) ---------- */
dialog.warning-spotlight{position:fixed;top:50%;left:50%;translate:-50% -50%;width:min(520px,92vw);max-height:86vh;overflow:auto;padding:22px;border:1px solid color-mix(in srgb,var(--bad) 38%,var(--line));border-radius:22px;background:var(--surface-solid);color:var(--text);box-shadow:var(--shadow-3,0 30px 90px rgba(0,0,0,.45))}
dialog.warning-spotlight::backdrop{background:rgba(4,7,14,.62);backdrop-filter:blur(6px)}
dialog.warning-spotlight h2{margin:0 0 8px;font-size:18px}
dialog.warning-spotlight p{margin:0 0 10px;color:var(--text-soft);font-size:13px;line-height:1.55}
dialog.warning-spotlight button{margin-top:6px}

/* ---------- safety net: never let an inline SVG render at default size ---------- */
.risk-command-center svg,.message-center svg,.risk-explainer svg,.risk-channel-ribbon svg,.about-waarning svg{width:18px;height:18px}
.risk-command-center .signal-core svg,.risk-risk-orbit>svg{width:auto;height:auto}

/* ---------- responsive ---------- */
@media (max-width:1079px){
  .risk-explainer{grid-template-columns:minmax(0,1fr)}
  .explainer-links{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:720px){
  .risk-shell{padding:18px 12px 8px}
  .risk-command-head h1{font-size:clamp(28px,8vw,40px);letter-spacing:-.04em}
  .cockpit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .risk-intelligence-panel .risk-matrix{grid-template-columns:minmax(0,1fr)}
  .risk-horizon{grid-template-columns:repeat(3,minmax(0,1fr))}
  .subindex-head{flex-direction:column;gap:6px}
  .subindex-head small{max-width:100%;text-align:left}
  .risk-channel-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .message-center-grid{grid-template-columns:minmax(0,1fr)}
  .safety-reassurance{grid-template-columns:auto minmax(0,1fr)}
  .daily-brief>header{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- portal landing pages (about, map, module, scan, situation, cyber, warnings) ---------- */
.portal-hero{max-width:920px;padding:30px 0 6px}
.portal-hero h1{margin:10px 0 12px;font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.03em}
.portal-hero p{max-width:70ch;margin:0 0 12px;color:var(--text-soft);font-size:15px;line-height:1.6}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin:22px 0}
.portal-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:20px;color:var(--text);text-decoration:none;transition:transform .3s var(--ease-spring),border-color .3s}
.portal-card h2,.portal-card h3{margin:0;font-size:17px;line-height:1.3}
.portal-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.portal-card:hover{transform:translateY(-3px)}
.portal-card .eyebrow{margin-bottom:2px}


/* ---------- one navigation at every width ----------
   ≤760px : the tab bar (5 tabs + "More" sheet) is the only menu; the rail is hidden.
   761px+ : the rail is the only menu; the tab bar is hidden.
   Before this, phones rendered the rail as a bottom bar AND the tab bar on top of it. */
.rail-nav{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (min-width:761px){.wv-tabbar{display:none}body.wv-shell{padding-bottom:0}}
@media (max-width:760px){.app-rail{display:none}}

/* ---------- focused pages use the same 12-column card grid as the cockpit ---------- */
#widget-host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:14px}
body.wv-shell #widget-host{max-width:none}
@media (max-width:900px){#widget-host{grid-template-columns:1fr}}

/* ---------- condition band (weather-app style, leads every focused page) ---------- */
.cond-hero{
  --cond:var(--signal);
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;
  margin:0 0 20px;padding:20px 22px;border:1px solid transparent;border-radius:26px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-high) 78%,transparent),color-mix(in srgb,var(--surface-low) 74%,transparent)) padding-box,
             linear-gradient(130deg,color-mix(in srgb,var(--cond) 55%,transparent),var(--white-glint) 44%,color-mix(in srgb,var(--cond) 24%,transparent)) border-box;
  box-shadow:0 20px 60px color-mix(in srgb,var(--cond) 16%,transparent),inset 0 1px 0 var(--white-glint);
  backdrop-filter:blur(26px) saturate(150%);
}
.cond-hero[data-condition='clear']{--cond:#ffb000}
.cond-hero[data-condition='cloudy']{--cond:#8fa3bd}
.cond-hero[data-condition='fog']{--cond:#9aa4b6}
.cond-hero[data-condition='drizzle']{--cond:#7cc4ff}
.cond-hero[data-condition='rain']{--cond:#5eb8ff}
.cond-hero[data-condition='snow']{--cond:#cfe3ff}
.cond-hero[data-condition='storm']{--cond:#a98aff}
.cond-hero[data-state='idle']{--cond:var(--faint)}
.cond-now{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px}
.cond-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--cond);background:color-mix(in srgb,var(--cond) 14%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--cond) 22%,transparent)}
.cond-temp{display:flex;flex-direction:column;gap:2px;min-width:0}
.cond-temp b{font:800 clamp(26px,4.6vw,40px)/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.cond-temp small{color:var(--text-soft);font-size:12.5px}
.cond-place{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 7px;justify-content:end;text-align:right;min-width:0}
.cond-pin{display:grid;place-items:center;color:var(--cond);grid-row:span 2}
.cond-place strong{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38ch}
.cond-place small{color:var(--muted);font:700 10px var(--mono);letter-spacing:.05em}
.cond-alert{padding:7px 13px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);font-size:11.5px;font-weight:750;white-space:nowrap}
.cond-alert.is-clear{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok)}
.cond-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:0;padding:12px 0 0;border-top:1px solid color-mix(in srgb,var(--cond) 18%,var(--line));list-style:none}
.cond-metrics li{display:flex;flex-direction:column;gap:3px;padding:8px 11px;border-radius:14px;background:color-mix(in srgb,var(--surface-low) 62%,transparent)}
.cond-metrics small{color:var(--faint);font:750 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cond-metrics b{color:var(--aq,var(--text));font:800 14px var(--mono);font-variant-numeric:tabular-nums}
.cond-cta{align-self:center;justify-self:end;padding:9px 15px;border-radius:var(--radius-pill);border:1px solid var(--line);color:var(--text);font-size:12.5px;font-weight:700;text-decoration:none}
.cond-cta:hover{border-color:var(--cond);color:var(--cond)}
@media (max-width:900px){
  .cond-now{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .cond-place{grid-column:1/-1;justify-content:start;text-align:left}
  .cond-icon{width:48px;height:48px}
  .cond-alert{grid-column:1/-1;justify-self:start}
}

/* ============================================================================
   GLOBAL RISK SURFACE — the whole interface is derived from the live signal.
   src/ui/atmosphere.ts sets --signal, --signal-2/3 and --signal-strength from
   real measurements, and sets html[data-threat]. Surfaces, borders, glows,
   gradients, the page wash and the pulse tempo are mixed from those, so the UI
   changes colour, depth and tempo with the actual local risk.
   This file loads after waarning.css / waarning-v2.css, so it is the final word.
   ============================================================================ */
@property --signal-strength { syntax:"<number>"; inherits:true; initial-value:0; }

:root {
  /* Animate the palette itself: registered properties interpolate, so a risk
     change flows through every surface instead of snapping. */
  transition:
    --signal 1.6s var(--ease-out), --signal-2 1.6s var(--ease-out),
    --signal-3 1.6s var(--ease-out), --signal-strength 1.6s var(--ease-out);

  /* Untinted bases (waarning.css values), kept separate so the mixes below
     cannot reference themselves. */
  --wv-line-0: light-dark(rgba(91,112,144,.22), rgba(181,202,233,.14));
  --wv-line-1: light-dark(rgba(75,99,136,.34), rgba(195,216,246,.26));
  --wv-surface-0: light-dark(rgba(255,255,255,.72), rgba(19,27,42,.68));
  --wv-surface-1: light-dark(rgba(255,255,255,.9), rgba(24,34,51,.88));
  --wv-surface-2: light-dark(rgba(245,249,255,.58), rgba(14,21,34,.56));
  --wv-solid: light-dark(#ffffff, #151e2d);

  /* How much colour the risk is allowed to inject: rises with the risk level. */
  --wv-tint: calc(7% + var(--signal-strength, 0) * 22%);
  --wv-glow: color-mix(in srgb, var(--signal) calc(18% + var(--signal-strength, 0) * 48%), transparent);
  --wv-glow-strong: color-mix(in srgb, var(--signal) calc(30% + var(--signal-strength, 0) * 58%), transparent);

  --glass-blur: clamp(18px, 2vw, 30px);
  --shadow-hover: 0 18px 48px var(--wv-glow);

  /* Accent, borders and surfaces all follow the signal. */
  --accent: var(--signal);
  --accent-bright: color-mix(in srgb, var(--signal) 72%, #fff);
  --line: color-mix(in srgb, var(--signal) 26%, var(--wv-line-0));
  --line-strong: color-mix(in srgb, var(--signal) 46%, var(--wv-line-1));
  --surface: color-mix(in srgb, var(--signal) var(--wv-tint), var(--wv-surface-0));
  --surface-high: color-mix(in srgb, var(--signal) var(--wv-tint), var(--wv-surface-1));
  --surface-low: color-mix(in srgb, var(--signal) var(--wv-tint), var(--wv-surface-2));
  --surface-solid: var(--wv-solid);
  --card: var(--surface-solid);
  --card2: color-mix(in srgb, var(--signal) calc(var(--wv-tint) + 3%), var(--wv-solid));
  --shadow-2: 0 20px 60px var(--wv-glow);
  --shadow-3: 0 34px 100px var(--wv-glow-strong);
}

/* ---------- graduated page wash: the background carries the risk ---------- */
body {
  background-image:
    radial-gradient(120% 90% at 12% -10%, color-mix(in srgb, var(--signal) calc(13% + var(--signal-strength, 0) * 26%), transparent), transparent 62%),
    radial-gradient(90% 70% at 92% 6%, color-mix(in srgb, var(--signal-2, #8d72ff) calc(8% + var(--signal-strength, 0) * 18%), transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--signal) calc(6% + var(--signal-strength, 0) * 14%), transparent), transparent 52%);
  background-attachment: fixed;
}
.ambient-orb { opacity: calc(.3 + var(--signal-strength, 0) * .5); }
html[data-threat='warning'] .orbit-sweep, html[data-threat='critical'] .orbit-sweep { animation-duration: 7s; }

/* ---------- glass, on every surface ---------- */
.w-card, .glass, .glass-panel, .area-card, .today-check, .streak-card, .portal-card,
.app-topbar, .app-rail, .cond-hero, .risk-command-center, .risk-explainer, .message-center,
.risk-dial-panel, .risk-intelligence-panel, .risk-action-panel, .risk-horizon,
.risk-channel-ribbon, .message-channel, .message-priority, .safety-reassurance,
.channel-insight, .about-waarning, .about-principles article, .cockpit-kpis article,
.sv-chip, .sv-col, .wv-tabbar, .wv-sheet-panel {
  border: 1px solid transparent;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--module, var(--signal)) 15%, color-mix(in srgb, var(--surface-high) 86%, transparent)),
      color-mix(in srgb, var(--module, var(--signal)) 9%, color-mix(in srgb, var(--surface-low) 80%, transparent))) padding-box,
    linear-gradient(140deg,
      color-mix(in srgb, var(--signal) 72%, transparent),
      var(--white-glint) 44%,
      color-mix(in srgb, var(--module, var(--signal)) 45%, transparent)) border-box;
  backdrop-filter: blur(var(--glass-blur)) saturate(178%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(178%);
  box-shadow: 0 18px 52px var(--wv-glow), inset 0 1px 0 var(--white-glint);
}
.w-card:hover, .portal-card:hover, .message-channel:hover, .sv-col:hover {
  box-shadow: 0 26px 72px var(--wv-glow-strong), inset 0 1px 0 var(--white-glint);
}

/* ---------- pulsating: tempo and depth follow the threat level ---------- */
@keyframes wv-breathe {
  0%, 100% { box-shadow: 0 18px 52px var(--wv-glow), inset 0 1px 0 var(--white-glint); }
  50% { box-shadow: 0 30px 84px var(--wv-glow-strong), inset 0 1px 0 var(--white-glint); }
}
@keyframes wv-halo {
  0%, 100% { opacity: .34; transform: scale(1); }
  50% { opacity: .62; transform: scale(1.045); }
}
html[data-threat='advisory'] .w-card,
html[data-threat='advisory'] .cond-hero { animation: wv-breathe 11s ease-in-out infinite; }
html[data-threat='warning'] .w-card,
html[data-threat='warning'] .cond-hero,
html[data-threat='critical'] .w-card,
html[data-threat='critical'] .cond-hero {
  animation: wv-breathe calc(7.5s - var(--signal-strength, 0) * 3s) ease-in-out infinite;
}
html[data-threat='warning'] .cond-icon,
html[data-threat='critical'] .cond-icon,
html[data-threat='warning'] .signal-core,
html[data-threat='critical'] .signal-core { animation: wv-halo calc(6s - var(--signal-strength, 0) * 2s) ease-in-out infinite; }

/* ---------- graduated numerals ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #risk-count, .cond-temp b, .ov-risk-inner strong, .signal-core strong {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--signal) 62%, #fff) 0%,
      var(--signal) 48%,
      color-mix(in srgb, var(--signal) 58%, var(--text)) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ---------- fluid rhythm ---------- */
.app-content { padding: clamp(16px, 2.2vw, 34px) clamp(14px, 1.8vw, 30px) clamp(46px, 6vw, 86px); }
.risk-shell { padding: clamp(18px, 2.6vw, 34px) clamp(12px, 1.6vw, 22px) 10px; }
.risk-command-center, .cond-hero { border-radius: clamp(20px, 2.4vw, 30px); }
#dashboard-grid, #widget-host { gap: clamp(10px, 1.2vw, 16px); }

/* ---------- accessibility: no motion when the reader asked for none ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .ambient-orb, .ambient-grid, .ambient-grain, .orbit-sweep, .orbit-ring,
  .w-card, .cond-hero, .cond-icon, .signal-core, .message-live-dot {
    animation: none !important;
  }
}

/* ---------- drifting aurora: the graduated wash is in motion ---------- */
@keyframes wv-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.09); }
}
body::before {
  content: ""; position: fixed; inset: -28%; z-index: -2; pointer-events: none; contain: strict;
  background:
    radial-gradient(38% 42% at 24% 30%, color-mix(in srgb, var(--signal) calc(22% + var(--signal-strength, 0) * 34%), transparent), transparent 68%),
    radial-gradient(34% 38% at 76% 64%, color-mix(in srgb, var(--signal-2, #8d72ff) calc(14% + var(--signal-strength, 0) * 26%), transparent), transparent 70%),
    radial-gradient(30% 30% at 52% 88%, color-mix(in srgb, var(--signal-3, #45e0c1) calc(10% + var(--signal-strength, 0) * 18%), transparent), transparent 72%);
  animation: wv-drift 42s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---------- always alive: chrome breathes, tempo follows the risk ---------- */
.signal-core, .app-title-mark, .rail-link.active, .wv-tab.is-active, .message-live-dot {
  animation: wv-halo calc(13s - var(--signal-strength, 0) * 6s) ease-in-out infinite;
}
html[data-threat='advisory'] .app-rail, html[data-threat='warning'] .app-rail, html[data-threat='critical'] .app-rail,
html[data-threat='advisory'] .app-topbar, html[data-threat='warning'] .app-topbar, html[data-threat='critical'] .app-topbar {
  animation: wv-breathe calc(12s - var(--signal-strength, 0) * 4s) ease-in-out infinite;
}
/* ponytail: shadow-breathing runs on every visible card while the risk is elevated.
   If that ever janks on low-end phones, cap it with #dashboard-grid > .w-card:nth-child(-n+6)
   or move the glow into a single fixed overlay. */