/* Athena · Operating Model Visualiser — styles. Brand tokens only.
   All motion is CSS transition/keyframe driven (no rAF), so it animates even
   when the tab is backgrounded. Gate colours: auto=cyan, approve=amber, advise=violet. */

.om{--abyss:#05080D;--hull:#0A101A;--plate:#111927;--plate2:#0c1420;--line:#1E2C40;
  --tx:#EDF2F7;--tx2:#93A1B5;--tx3:#5C6B80;--cyan:#3EE0F0;--cyan2:#18B5C8;--azure:#2A9DFF;
  --violet:#7A68D6;--amber:#F2B538;--danger:#F87171;--ok:#10B981;
  max-width:1200px;margin:0 auto;padding:0 24px;font-family:'Inter',system-ui,sans-serif;}

/* ── scenario chips ── */
.om-scnbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.om-chip{font-size:13px;font-weight:600;color:var(--tx2);padding:9px 15px;border-radius:999px;
  border:1px solid rgba(38,52,79,0.85);background:rgba(12,19,34,0.5);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s,transform .12s;}
.om-chip:hover{color:var(--tx);border-color:rgba(62,224,240,0.45);}
.om-chip.is-on{color:var(--abyss);background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 6px 22px -10px rgba(62,224,240,0.8);}

/* ── grid ── */
.om-grid{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start;}
@media(max-width:880px){.om-grid{grid-template-columns:1fr;}}

/* ── left: authority ── */
.om-left{background:linear-gradient(180deg,rgba(17,25,39,0.7),rgba(10,16,26,0.7));
  border:1px solid var(--line);border-radius:16px;padding:20px;position:sticky;top:84px;}
@media(max-width:880px){.om-left{position:static;}}
.om-panel-h,.om-actions-h{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 14px;}
.om-dial{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.om-mode{font-size:13px;font-weight:600;color:var(--tx2);padding:11px 10px;border-radius:10px;
  border:1px solid rgba(38,52,79,0.85);background:rgba(8,12,22,0.55);cursor:pointer;text-align:left;
  transition:all .16s;}
.om-mode:hover{color:var(--tx);border-color:rgba(62,224,240,0.4);}
.om-mode.is-on{color:var(--tx);border-color:var(--cyan);background:rgba(62,224,240,0.1);
  box-shadow:inset 0 0 0 1px rgba(62,224,240,0.3);}
.om-mode.om-hyb{grid-column:1 / -1;text-align:center;border-style:dashed;}
.om-mode.om-hyb.is-on{border-style:solid;border-color:var(--violet);background:rgba(122,104,214,0.14);
  box-shadow:inset 0 0 0 1px rgba(122,104,214,0.35);}
.om-mode-sub{font-size:13px;line-height:1.5;color:var(--tx2);margin:13px 2px 18px;min-height:38px;}

/* ── authority matrix ── */
.om-matrix{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(5,8,13,0.4);}
.om-mx-head{display:flex;justify-content:space-between;padding:9px 13px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--tx3);
  border-bottom:1px solid var(--line);background:rgba(12,19,34,0.6);}
.om-mx-hint{font-style:normal;color:var(--violet);opacity:0;transition:opacity .2s;}
.om.is-hybrid .om-mx-hint{opacity:1;}
.om-mx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;
  border-bottom:1px solid rgba(30,44,64,0.5);}
.om-mx-row:last-child{border-bottom:0;}
.om-mx-dom{display:flex;flex-direction:column;gap:2px;min-width:0;}
.om-mx-dom b{font-size:13px;font-weight:600;color:var(--tx);}
.om-mx-dom i{font-size:11px;font-style:normal;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.om-mx-auth{flex:none;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
  padding:5px 10px;border-radius:7px;border:1px solid transparent;cursor:default;white-space:nowrap;
  transition:all .18s;}
.om.is-hybrid .om-mx-auth{cursor:pointer;}
.om.is-hybrid .om-mx-auth:hover{filter:brightness(1.25);transform:translateY(-1px);}
.om-mx-auth[data-level=advisory]{color:#b9adf0;background:rgba(122,104,214,0.16);border-color:rgba(122,104,214,0.4);}
.om-mx-auth[data-level=supervised]{color:#f4c95f;background:rgba(242,181,56,0.14);border-color:rgba(242,181,56,0.38);}
.om-mx-auth[data-level=autonomous]{color:#6fe9f6;background:rgba(62,224,240,0.14);border-color:rgba(62,224,240,0.4);}
.om-mx-auth[data-level=lights-out]{color:var(--abyss);background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 4px 14px -6px rgba(62,224,240,0.7);}
.om-mx-foot{font-size:11.5px;line-height:1.5;color:var(--tx3);margin:13px 2px 0;}
.om-mx-foot b{color:var(--tx2);}

/* ── right: stage flow ── */
.om-stagewrap{background:linear-gradient(180deg,rgba(17,25,39,0.6),rgba(10,16,26,0.55));
  border:1px solid var(--line);border-radius:16px;padding:22px;min-width:0;}
.om-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 16px;}
.om-sc-title{font-family:'Saira',sans-serif;font-size:clamp(20px,2.4vw,27px);font-weight:700;
  letter-spacing:-0.02em;color:#fff;margin:0;}
.om-sc-threat{font-size:13.5px;line-height:1.5;color:var(--tx2);margin:6px 0 0;max-width:52ch;}
.om-meta-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;}
.om-sc-sev{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;color:var(--amber);
  background:rgba(242,181,56,0.12);border:1px solid rgba(242,181,56,0.35);white-space:nowrap;}
.om-sc-sev[data-sev=critical]{color:var(--danger);background:rgba(248,113,113,0.12);border-color:rgba(248,113,113,0.4);}
.om-sc-sev[data-sev=medium]{color:#7db8ff;background:rgba(42,157,255,0.12);border-color:rgba(42,157,255,0.35);}
.om-sc-agent{font-size:12px;color:var(--tx3);white-space:nowrap;}

/* progress + stepper */
.om-prog{height:3px;border-radius:3px;background:rgba(30,44,64,0.7);overflow:hidden;margin:0 0 14px;}
.om-prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan2),var(--cyan));
  border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.om-stages{display:flex;gap:6px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;}
.om-stages::-webkit-scrollbar{display:none;}
.om-stage{flex:1 1 0;min-width:78px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:9px 11px;border-radius:10px;border:1px solid rgba(30,44,64,0.7);background:rgba(8,12,22,0.4);
  cursor:pointer;transition:all .2s;}
.om-stage:hover{border-color:rgba(62,224,240,0.4);}
.om-stage-n{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--tx3);
  background:rgba(30,44,64,0.8);transition:all .2s;}
.om-stage-l{font-size:12.5px;font-weight:600;color:var(--tx2);transition:color .2s;}
.om-stage-t{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--tx3);}
.om-stage.is-done .om-stage-n{color:var(--cyan2);background:rgba(62,224,240,0.16);}
.om-stage.is-done .om-stage-l{color:var(--tx2);}
.om-stage.is-active{border-color:var(--cyan);background:rgba(62,224,240,0.08);box-shadow:0 6px 20px -10px rgba(62,224,240,0.6);}
.om-stage.is-active .om-stage-n{color:var(--abyss);background:var(--cyan);}
.om-stage.is-active .om-stage-l{color:#fff;}

/* stage detail */
.om-detail{min-height:118px;border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  background:rgba(5,8,13,0.45);margin:0 0 16px;}
.om-detail-h{font-size:13.5px;line-height:1.55;color:var(--tx2);margin:0 0 10px;animation:omfade .35s ease both;}
.om-detail-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--cyan);margin-right:10px;padding:3px 8px;border-radius:6px;
  background:rgba(62,224,240,0.1);border:1px solid rgba(62,224,240,0.25);}
@keyframes omfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.om-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.om-tl li{font-size:13px;color:var(--tx2);display:flex;gap:10px;align-items:baseline;}
.om-src{flex:none;min-width:96px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan2);}
.om-reason{font-size:13.5px;line-height:1.6;color:var(--tx2);margin:0;}
.om-agent,.om-src.om-agent{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--abyss);background:var(--cyan);padding:2px 8px;border-radius:6px;margin-right:9px;font-weight:600;}
.om-line{font-size:13.5px;line-height:1.6;color:var(--tx2);margin:0;}
.om-line b{color:var(--tx);}
.om-line .g-auto{color:var(--cyan);}.om-line .g-approve{color:var(--amber);}.om-line .g-advise{color:var(--violet);}
.om-ok{color:#7ce0c0;}
.om-hl,.om-ran{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.om-hl li,.om-ran li{font-size:13px;color:var(--tx2);display:flex;gap:9px;align-items:baseline;}
.om-hl li b{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 7px;border-radius:5px;}
.om-hl li.g-approve b{color:var(--amber);background:rgba(242,181,56,0.14);}
.om-hl li.g-advise b{color:var(--violet);background:rgba(122,104,214,0.16);}
.om-ran li{justify-content:space-between;}
.om-undo{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--tx3);flex:none;margin-left:12px;}

/* live action list */
.om-actions-h i{font-style:normal;font-family:'Inter';text-transform:none;letter-spacing:0;color:var(--tx3);
  font-weight:500;margin-left:8px;}
.om-actions{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;}
.om-act{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;
  border:1px solid rgba(30,44,64,0.7);background:rgba(8,12,22,0.45);transition:border-color .25s,background .25s;}
.om-act-risk{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  padding:3px 7px;border-radius:5px;color:var(--tx3);background:rgba(38,52,79,0.5);width:54px;text-align:center;}
.om-act-risk.r-medium{color:#7db8ff;background:rgba(42,157,255,0.13);}
.om-act-risk.r-high{color:#ff9aa6;background:rgba(248,113,113,0.14);}
.om-act-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.om-act-main b{font-size:13.5px;font-weight:600;color:var(--tx);}
.om-act-main i{font-size:11px;font-style:normal;color:var(--tx3);}
.om-act-gate{flex:none;display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px;border:1px solid transparent;}
.om-dot{width:7px;height:7px;border-radius:50%;flex:none;}
.om-act.gate-auto{border-color:rgba(62,224,240,0.4);background:rgba(62,224,240,0.05);}
.om-act.gate-auto .om-act-gate{color:var(--cyan);background:rgba(62,224,240,0.1);}
.om-act.gate-auto .om-dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.om-act.gate-approve .om-act-gate{color:var(--amber);background:rgba(242,181,56,0.1);}
.om-act.gate-approve .om-dot{background:var(--amber);animation:ompulse 1.8s ease-in-out infinite;}
.om-act.gate-advise .om-act-gate{color:var(--violet);background:rgba(122,104,214,0.12);}
.om-act.gate-advise .om-dot{background:var(--violet);}
@keyframes ompulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(242,181,56,0.5);}50%{opacity:.55;box-shadow:0 0 0 5px rgba(242,181,56,0);}}

/* outcome + transport */
.om-outcome{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:13px;
  border:1px solid var(--line);background:rgba(5,8,13,0.5);flex-wrap:wrap;transition:box-shadow .3s;}
.om-outcome.is-flash{animation:omflash .7s ease;}
@keyframes omflash{0%{box-shadow:0 0 0 1px rgba(62,224,240,0.7),0 0 26px -4px rgba(62,224,240,0.6);}100%{box-shadow:none;}}
.om-ring{width:62px;height:62px;flex:none;transform:rotate(-90deg);}
.om-ring-bg{fill:none;stroke:rgba(30,44,64,0.9);stroke-width:6;}
.om-ring-fg{fill:none;stroke:var(--cyan);stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);}
.om-out-tx{flex:1 1 220px;min-width:0;}
.om-out-top{display:flex;align-items:baseline;gap:9px;}
.om-ring-num{font-family:'Saira',sans-serif;font-size:21px;font-weight:700;color:#fff;}
.om-out-lbl{font-size:12px;color:var(--tx3);}
.om-sum{font-size:13px;color:var(--tx2);margin-top:4px;}
.om-human{font-size:12px;color:var(--tx3);margin-top:3px;}
.om-human.is-on{color:var(--amber);}
.om-controls{display:flex;align-items:center;gap:7px;flex:none;}
.om-controls button{font-size:13px;font-weight:600;color:var(--tx2);border:1px solid rgba(38,52,79,0.9);
  background:rgba(12,19,34,0.5);border-radius:9px;padding:8px 12px;cursor:pointer;transition:all .15s;}
.om-controls button:hover{color:var(--tx);border-color:rgba(62,224,240,0.5);}
.om-prev,.om-next{width:38px;font-size:18px;line-height:1;padding:7px 0;}
.om-play{min-width:64px;}

@media(prefers-reduced-motion:reduce){
  .om *,.om *::before,.om *::after{animation:none!important;transition:none!important;}
}

/* ── page-level: illustrative note + the static legend ── */
.om-illus{font-size:12.5px;line-height:1.55;color:#5C6B80;max-width:560px;margin:26px auto 0;
  padding:9px 15px;border:1px solid rgba(30,44,64,0.7);border-radius:999px;background:rgba(8,12,22,0.4);}
.om-illus b{color:#93A1B5;font-weight:600;}
.om-legend{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:26px;align-items:start;}
@media(max-width:760px){.om-legend{grid-template-columns:1fr;}}
.om-leg-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.om-leg-modes{grid-template-columns:1fr;}}
.om-leg{border:1px solid rgba(30,44,64,0.8);border-radius:11px;padding:13px 15px;background:rgba(12,19,34,0.4);}
.om-leg b{display:block;font-size:14px;color:#EDF2F7;margin-bottom:4px;}
.om-leg span{font-size:12.5px;line-height:1.5;color:#93A1B5;}
.om-leg-key{display:flex;flex-direction:column;gap:11px;border:1px solid rgba(30,44,64,0.8);border-radius:11px;
  padding:15px 17px;background:rgba(5,8,13,0.4);}
.om-key{display:flex;align-items:center;gap:10px;font-size:13px;color:#93A1B5;}
.om-key i{width:9px;height:9px;border-radius:50%;flex:none;}
.om-key.k-auto i{background:#3EE0F0;box-shadow:0 0 8px #3EE0F0;}
.om-key.k-approve i{background:#F2B538;}
.om-key.k-advise i{background:#7A68D6;}