/* Resilience dashboard — built from the Claude Design handoff.
   Three palettes (brand / MTP / ceremonial) each with a light variant; the
   viewer's choice is remembered in localStorage. */

:root, :root.pal-brand{
  --bg:#0B0C09; --panel:#11130E; --panel-2:#171A13; --raise:#1E2219;
  --line:#2A2F22; --line-2:#454C36; --text:#EDEFE6; --text-2:#B4BAA6; --text-3:#7E8672;
  --brand:#E4002B; --brand-2:#5C7229; --brand-3:#BDB395;
  --scan:rgba(255,255,255,.020); --glow:rgba(228,0,43,.10);
  --sev-0:#3FB27C; --sev-1:#D8B12E; --sev-2:#E9832F; --sev-3:#F0483C;
  --warn-bg:#2A1A0C; --warn-line:#8A5A1C;
}
:root.pal-mtp{
  --bg:#0E0F0A; --panel:#15170F; --panel-2:#1B1E14; --raise:#242819;
  --line:#2E3323; --line-2:#4E5739; --text:#F0EEE3; --text-2:#BDB8A3; --text-3:#867F6C;
  --brand:#CC7A33; --brand-2:#5A6B3B; --brand-3:#C7B48C;
  --scan:rgba(255,255,255,.020); --glow:rgba(204,122,51,.10);
  --sev-0:#4CB47F; --sev-1:#D5B033; --sev-2:#E4842F; --sev-3:#E9503F;
  --warn-bg:#2A200F; --warn-line:#8A6520;
}
:root.pal-cer{
  --bg:#070A12; --panel:#0D1220; --panel-2:#121929; --raise:#182134;
  --line:#222C42; --line-2:#3A4A6A; --text:#EAEEF7; --text-2:#AAB6CC; --text-3:#75809A;
  --brand:#C8102E; --brand-3:#C5A253; --brand-2:#2A4C86;
  --scan:rgba(255,255,255,.022); --glow:rgba(200,16,46,.10);
  --sev-0:#3FB58C; --sev-1:#D9B63A; --sev-2:#EA8A38; --sev-3:#F04C46;
  --warn-bg:#20182A; --warn-line:#6F5A8A;
}
:root.rz-light{
  --bg:#F3F2EC; --panel:#FFFFFF; --panel-2:#ECEAE0; --raise:#E1DED1;
  --line:#D3CFC0; --line-2:#A29C88; --text:#14160F; --text-2:#4B4F3E; --text-3:#727565;
  --scan:rgba(0,0,0,.030); --glow:rgba(0,0,0,.03);
  --sev-0:#176E45; --sev-1:#856605; --sev-2:#B4561A; --sev-3:#AD1A12;
  --warn-bg:#F8ECD6; --warn-line:#C08A38;
}
:root.pal-cer.rz-light{
  --bg:#F1F3F8; --panel:#FFFFFF; --panel-2:#E8ECF4; --raise:#DDE3EE;
  --line:#CAD2E0; --line-2:#8F9BB2; --text:#0A0F1C; --text-2:#3D4660; --text-3:#69738C;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}

a{color:var(--brand-3);text-decoration:none}
a:hover{color:var(--text);text-decoration:underline}
button,select,input{font:inherit;color:inherit}

/* Display and mono faces come from Google Fonts; these fallbacks keep the
   layout intact if the page is opened somewhere without network access. */
.dsp{font-family:'Chakra Petch',system-ui,sans-serif}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

@keyframes rz-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes rz-fade{from{opacity:0}to{opacity:1}}

#app{min-height:100vh;background:var(--bg);color:var(--text);
  background-image:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}

.wrap{max-width:1420px;margin:0 auto;padding:0 22px}

.row-btn{width:100%;text-align:left;background:var(--panel);border:0;
  border-bottom:1px solid var(--line);color:inherit;cursor:pointer;font:inherit}
.row-btn:hover{background:var(--panel-2)}
.row-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.tab{padding:6px 14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pal-btn{display:flex;align-items:center;gap:6px;padding:5px 9px;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

.btn{padding:8px 14px;background:var(--raise);border:1px solid var(--line-2);cursor:pointer;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.btn:hover{border-color:var(--brand-3)}

select{padding:8px 10px;background:var(--panel);border:1px solid var(--line-2);font-size:13.5px}

.notch{position:relative;background:var(--line);padding:1px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.notch-in{position:relative;background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  display:grid;grid-template-columns:250px 1fr 300px;overflow:hidden}
.scanlines{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 4px)}

.card{position:relative;border:1px solid var(--line);background:var(--panel);padding:15px 18px 12px}
.card .cnr-tl{position:absolute;top:0;left:0;width:11px;height:11px;
  border-top:1px solid var(--brand-3);border-left:1px solid var(--brand-3)}
.card .cnr-br{position:absolute;bottom:0;right:0;width:11px;height:11px;
  border-bottom:1px solid var(--brand-3);border-right:1px solid var(--brand-3)}

.grid-row{display:grid;grid-template-columns:minmax(190px,1.15fr) 250px minmax(270px,1fr) 60px;
  gap:16px;align-items:center}

.blink{animation:rz-blink 2s steps(1) infinite}
.pulse{animation:rz-blink 1.6s ease-in-out infinite}

.scroll-x{overflow-x:auto}

@media (max-width:1100px){
  .notch-in{grid-template-columns:1fr}
  .notch-in > div{border-right:0 !important;border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .grid-row{grid-template-columns:1fr 1fr;row-gap:10px}
  .grid-row .col-parts{grid-column:1 / -1}
  .split-2,.split-3{grid-template-columns:1fr !important}
}