/* Strategy Eco System: the demonstration build of the monitoring system. */
:root{--bg:#04050b;--panel:rgba(255,255,255,.045);--panel2:rgba(255,255,255,.07);--stroke:rgba(255,255,255,.08);
 /* --txt3 was #5a6485, which measured 3.49:1 on this background and failed WCAG AA
    for normal text. #7b85a3 measures about 5.2:1 on a glass panel and keeps the
    muted step below --txt2. */
 --stroke2:rgba(255,255,255,.17);--txt:#eef2ff;--txt2:#969eba;--txt3:#7b85a3;--good:#34e0a1;--bad:#ff6b8a;
 --blue:#5b8cff;--violet:#8b5cf6;--cyan:#22d3ee;--amber:#f6c544;--grad:linear-gradient(135deg,#5b8cff,#8b5cf6);--radius:22px;
 --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--glide:cubic-bezier(.22,.61,.36,1);
 --white:#fff;--ink:#0c1120;--ink2:#0a0e1c;--ink3:#0b0f1d;--ink4:#0b0f1e;--ink5:#070a15;--ink6:#0d1224;--ink7:#090d1c;
 --txt-hi:#cfe0ff;--txt-hi2:#bcd0ff;--txt-bright:#f2f5ff;--txt-bright2:#e2eaff;--gold-soft:#ffce7a;
 --blue-soft:#7aa6ff;--violet-soft:#a98bff;--mint:#7df0c4;--good2:#2dd4a7;--grey:#8b93a5}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{min-height:100%;height:auto}   /* body must grow with content or the sticky rail cannot stick */
body{font-family:'Inter',-apple-system,sans-serif;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh;overflow-x:hidden;letter-spacing:.1px}
body::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
 background:radial-gradient(1000px 680px at 82% -10%,rgba(139,92,246,.18),transparent 60%),
 radial-gradient(900px 620px at 3% 2%,rgba(91,140,255,.18),transparent 58%),
 radial-gradient(760px 760px at 62% 120%,rgba(34,211,238,.08),transparent 60%)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(rgba(91,140,255,.4),rgba(139,92,246,.4));border-radius:8px}
h1,h2,h3,.sora{font-family:'Sora','Inter',sans-serif}
a{color:var(--blue)}

/* sidebar */
.side{width:74px;flex:none;position:sticky;top:0;height:100vh;z-index:6;display:flex;flex-direction:column;align-items:center;
 padding:18px 0;gap:6px;background:linear-gradient(180deg,rgba(12,16,28,.72),rgba(6,8,16,.72));backdrop-filter:blur(18px);border-right:1px solid var(--stroke)}
.logo{width:44px;height:44px;border-radius:13px;background:var(--grad);display:grid;place-items:center;color:var(--white);box-shadow:0 8px 26px rgba(79,139,255,.5);margin-bottom:14px}
.nav{display:flex;flex-direction:column;gap:4px;flex:1;width:100%;align-items:center}
.nv{width:50px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--txt2);cursor:pointer;position:relative}
.nv:hover{background:var(--panel);color:var(--txt);transform:translateY(-1px)}
.nv.active{color:var(--white);background:linear-gradient(135deg,rgba(79,139,255,.28),rgba(139,92,246,.22));box-shadow:inset 0 0 0 1px rgba(91,140,255,.4),0 10px 30px rgba(91,140,255,.22)}
.nv.active::after{content:"";position:absolute;right:-1px;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--grad)}
.nv svg{width:21px;height:21px}
.nv .nvlab{display:none}
.nv .tip{position:absolute;left:58px;white-space:nowrap;background:var(--ink);border:1px solid var(--stroke2);padding:6px 11px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transform:translateX(-6px);transition:.15s;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nv:hover .tip{opacity:1;transform:none}
.side .out{margin-top:auto}
/* Touch devices get no hover, so the rail becomes a labelled bottom bar. */
@media(max-width:600px){
  .side{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:auto;flex-direction:row;align-items:stretch;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom));border-right:none;border-top:1px solid var(--stroke);z-index:30;gap:0}
  .side .logo{display:none}
  .nav{flex-direction:row;justify-content:space-between;gap:0;flex:1;min-width:0}
  .nv{width:auto;flex:1 1 0;min-width:0;height:auto;padding:6px 1px;border-radius:11px;
    flex-direction:column;gap:3px;display:flex;align-items:center;justify-content:flex-start;min-height:50px}
  .nv svg{width:19px;height:19px;flex:none}
  .nv .nvlab{display:block;font-size:9px;letter-spacing:.1px;text-align:center;line-height:1.15;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nv .tip{display:none}
  .nv.active::after{display:none}
  .side .out{margin-top:0;flex:0 0 40px;border-left:1px solid var(--stroke);border-radius:0;padding-top:12px}
  .side .out .nvlab{display:none}
  body{padding-bottom:70px}
  :root{--navbar-h:66px}
}

/* main + topbar */
.main{flex:1;min-width:0;z-index:1;padding:0 30px 70px;max-width:1280px;margin:0 auto}
.topbar{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:14px;padding:16px 2px 26px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 36%,rgba(4,5,11,0) 100%)}
.chip{display:flex;align-items:center;gap:13px;min-width:0}
.chip .av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:'Sora';font-weight:700;font-size:13px;flex:none;box-shadow:0 0 0 1px var(--stroke2),0 0 0 4px rgba(91,140,255,.1);color:var(--white)}
.chip .nm{font-size:15px;font-weight:600;font-family:'Sora';letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .rl{font-size:11.5px;color:var(--txt2);margin-top:1px}
.sample-pill{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(255,196,75,.38);background:rgba(255,196,75,.09);padding:7px 13px;border-radius:30px;white-space:nowrap}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* bell */
.bell{position:relative;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--stroke);color:var(--txt2);cursor:pointer}
.bell:hover{color:var(--txt);border-color:var(--stroke2)}
/* Dark ink on the pink badge: white measured 2.72:1, the ink measures about 6.9:1. */
.bell .cnt{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:var(--ink);font-size:10.5px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.bellwrap{position:relative;display:flex}
.bell-drop{position:absolute;top:52px;right:0;width:340px;max-width:86vw;background:var(--ink);border:1px solid var(--stroke2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:10px;display:none;z-index:40}
.bell-drop.open{display:block}
.bell-item{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:none;
 padding:11px 12px;border-radius:11px;border-bottom:1px solid var(--stroke);cursor:pointer}
.bell-item .bt,.bell-item .bb,.bell-item .bd{display:block}
.bell-item:last-child{border-bottom:none}
.bell-item:hover{background:var(--panel)}
.bell-item .bt{font-size:13px;font-weight:600}
.bell-item .bb{font-size:12px;color:var(--txt2);margin-top:3px;line-height:1.5}
.bell-item .bd{font-size:10.5px;color:var(--txt3);margin-top:4px}
.bell-item.unread .bt::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:7px;box-shadow:0 0 8px var(--blue)}

/* pages */
.page{display:none;animation:fade .4s ease}.page.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:flex-end;justify-content:space-between;margin:8px 0 22px;flex-wrap:wrap;gap:12px}
.phead .ttl{font-size:32px;font-weight:300;letter-spacing:-1px;line-height:1;font-family:'Sora'}
.phead .ttl b{font-weight:700;background:linear-gradient(100deg,var(--cyan),var(--blue-soft) 38%,var(--violet-soft) 60%,var(--cyan) 92%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phead .sub{font-size:13px;color:var(--txt2);margin-top:8px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.metric{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden}
.metric::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--violet));opacity:.75}
.metric:hover{transform:translateY(-3px);border-color:var(--stroke2);box-shadow:0 18px 38px rgba(0,0,0,.38)}
.metric .v{font-family:'Sora';font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.metric .v{font-variant-numeric:tabular-nums}
.metric .v .vsub{font-size:12px;font-weight:600;color:var(--txt3);letter-spacing:0;margin-left:6px}
.metric .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt2);margin-top:8px}
.metric .d{font-size:12px;color:var(--txt3);margin-top:5px}
/* georai pass 2026-08-11: micro-viz in the band, the flagged tile is the alarm */
.metric .v{display:flex;align-items:center;gap:8px;min-width:0}
.metric .v .mviz{margin-left:auto;flex:none;opacity:.95}
button.metric{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:block}
.metric.alarm{border-color:rgba(246,197,68,.42);background:linear-gradient(135deg,rgba(246,197,68,.13),rgba(246,197,68,.02))}
.metric.alarm::before{background:linear-gradient(90deg,var(--amber),rgba(246,197,68,.2))}
.metric.alarm .v{color:var(--amber)}
.metric.alarm:hover{border-color:var(--amber)}
.metric.alarm:active{transform:scale(.98)}
.glass.flash{animation:intelflash 1.6s var(--ease)}
@keyframes intelflash{0%{border-color:var(--amber);box-shadow:0 0 0 1px rgba(246,197,68,.5),0 18px 44px rgba(0,0,0,.4)}100%{border-color:var(--stroke)}}
.evchip{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;font-size:11.5px;line-height:1.5;
 padding:0 7px;border-radius:7px;border:1px solid var(--stroke2);background:var(--panel2);vertical-align:baseline;white-space:nowrap}
.evchip.code{color:var(--blue-soft);border-color:rgba(91,140,255,.4)}
button.evchip.go{cursor:pointer;font:inherit;font-size:11.5px}
button.evchip.go:hover{background:rgba(91,140,255,.16);border-color:var(--blue)}
button.evchip.go:active{transform:scale(.96)}
.evchip.pct{color:var(--gold-soft);border-color:rgba(246,197,68,.32)}
.reticle{opacity:0;transform:scale(.55) rotate(-40deg);transform-box:fill-box;transform-origin:center;
 transition:opacity .22s var(--ease),transform .38s var(--spring);pointer-events:none}
.ring-node:hover .reticle,.ring-node:focus-visible .reticle{opacity:1;transform:none}
.ret-b{fill:none;stroke:var(--txt-hi);stroke-width:1.6;stroke-dasharray:7 18.13;stroke-linecap:round}
.ret-t{fill:none;stroke:var(--cyan);stroke-opacity:.55;stroke-width:1;stroke-dasharray:1 4.4}
.ring-exptick{stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;opacity:.9}
.ring-expcap{font-size:10px;letter-spacing:.6px;fill:var(--txt3)}
/* in-place area drill: the camera pushes into a segment, its actions open beside it */
.ringwrap{overflow:hidden;border-radius:14px}
.ring{transition:transform .65s var(--glide)}
.ring.nozoomanim{transition:none}
.ringcard{position:relative}
.ringcard.areafocus .ring [data-areacode].dimmed{opacity:.1;pointer-events:none;transition:opacity .45s var(--ease)}
.ringcard.areafocus .ring-lab,.ringcard.areafocus .ring-comet,.ringcard.areafocus .ring-center{opacity:.14;transition:opacity .45s var(--ease)}
.ringcard.areafocus .ringlegend{opacity:.25}
.areapanel{position:absolute;top:56px;bottom:16px;right:18px;width:min(46%,470px);z-index:5;display:flex;flex-direction:column;
 background:linear-gradient(180deg,rgba(16,22,40,.96),rgba(8,11,22,.95));border:1px solid var(--stroke2);border-radius:18px;
 padding:14px 16px;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:rise .5s var(--ease) both}
.ringcard.panel-left .areapanel{right:auto;left:18px}
.ap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ap-nav{display:flex;gap:6px}
.ap-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ap-title h4{font-family:'Sora';font-size:16px;letter-spacing:-.2px}
.ap-title .ld{width:10px;height:10px;border-radius:50%;flex:none}
.ap-stats{display:flex;gap:22px;padding-bottom:12px;border-bottom:1px solid var(--stroke);margin-bottom:10px}
.ap-stats b{font-family:'Sora';font-size:20px;font-weight:700;display:block;line-height:1.1}
.ap-stats span{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt3)}
.ap-stats .warn b{color:var(--amber)}
.ap-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.acard{font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;
 padding:11px 13px;border:1px solid var(--stroke);border-radius:13px;background:var(--panel);animation:rise .45s var(--ease) both;
 transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.acard:hover{border-color:rgba(91,140,255,.45);background:rgba(91,140,255,.07);transform:translateY(-2px)}
.acard:active{transform:scale(.98)}
.acard.warn{border-color:rgba(246,197,68,.35);background:linear-gradient(135deg,rgba(246,197,68,.08),rgba(246,197,68,.01))}
.ac-top{display:flex;align-items:center;gap:8px}
.ac-code{font-size:11px;color:var(--txt3);font-variant-numeric:tabular-nums}
.ac-pct{margin-left:auto;font-family:'Sora';font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ac-obj{font-size:12px;font-weight:600;line-height:1.45;color:var(--txt-bright2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ac-bar i{display:block;height:100%;border-radius:2px}
.ac-meta{font-size:10.5px;color:var(--txt3)}
.ap-reg{margin-top:10px;align-self:flex-start}
@media(max-width:900px){
  .ringcard.areafocus .ring{transform:none !important}
  .areapanel{position:static;width:auto;margin-top:12px;max-height:420px}
}
.glass{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 44px rgba(0,0,0,.28)}
/* Card headings are h2 so each route reads h1 → h2 with nothing skipped. The h3
   selector stays for any card that has not been converted. */
.glass h2,.glass h3{font-family:'Sora';font-size:12.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--txt2);margin-bottom:16px;font-weight:600}
.glass h2 .h3r,.glass h3 .h3r{float:right;font-size:11px;letter-spacing:.4px;text-transform:none;color:var(--txt3);font-weight:400}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 11px;border-bottom:1px solid var(--stroke);vertical-align:top}
th{color:var(--txt3);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;position:sticky;top:0;background:var(--ink2);backdrop-filter:blur(8px);z-index:2}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--panel2)}
tbody tr.rowlink{cursor:pointer}
.tscroll{overflow:auto;max-height:64vh;border-radius:13px;border:1px solid var(--stroke)}
.bar{height:9px;background:rgba(255,255,255,.07);border-radius:5px;overflow:hidden;min-width:70px}
.bar>span{display:block;height:100%;border-radius:5px;background:var(--grad)}
.statuspill{display:inline-block;padding:3px 10px;border-radius:30px;font-size:11px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.flagpill{display:inline-block;padding:3px 9px;border-radius:8px;font-size:10.5px;font-weight:600;letter-spacing:.4px;white-space:nowrap;margin:1px 3px 1px 0}
.hint{color:var(--txt3);font-size:12.5px;line-height:1.6;margin-top:13px}
.summary{color:var(--txt2);font-size:12.5px}.summary b{color:var(--txt)}

/* layout helpers */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.twocol>*{min-width:0}
.wide2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:18px}
.wide2>*{min-width:0}
@media(max-width:820px){.twocol,.wide2{grid-template-columns:1fr}}
@media(max-width:560px){}
@media(max-width:560px){}

/* forms */
label.fl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt2);font-weight:600;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],input[type=tel],input[type=search],select,textarea{
 width:100%;padding:11px 13px;border-radius:12px;background:var(--panel2);border:1px solid var(--stroke2);color:var(--txt);font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23969eba' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
select option{background:var(--ink);color:var(--txt)}
textarea{min-height:88px;resize:vertical;line-height:1.55}
input[type=range]{width:100%;accent-color:var(--blue)}
input[type=file]{font-size:13px;color:var(--txt2)}
input[type=file]::file-selector-button{margin-right:10px;padding:8px 14px;border-radius:10px;border:1px solid var(--stroke2);background:var(--panel2);color:var(--txt);cursor:pointer;font-family:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;border:none;background:var(--grad);color:var(--white);font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;box-shadow:0 10px 26px rgba(91,140,255,.35)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--panel2);border:1px solid var(--stroke2);color:var(--txt);box-shadow:none}
.btn.ghost:hover{border-color:var(--blue)}
.btn.small{padding:7px 13px;font-size:12px;border-radius:10px}
.btn.danger{background:rgba(255,107,138,.14);border:1px solid rgba(255,107,138,.4);color:var(--bad);box-shadow:none}
.btn[disabled]{opacity:.5;cursor:default;filter:none}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.formrow{grid-template-columns:1fr}}

/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(2,4,10,.7);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.modal.open{display:flex}
.modal .box{width:600px;max-width:100%;background:var(--ink3);border:1px solid var(--stroke2);border-radius:20px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.7);animation:fade .3s ease}
.modal .box h2{font-size:18px;font-weight:700;margin-bottom:4px}
.modal .box .msub{font-size:12.5px;color:var(--txt2);margin-bottom:8px}
.modal .mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* feed */
.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:13px;padding:12px 2px;border-bottom:1px solid var(--stroke)}
.fitem:last-child{border-bottom:none}
.fitem .fav{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,139,255,.25),rgba(139,92,246,.2));font-size:11.5px;font-weight:700;font-family:'Sora';color:var(--txt-hi)}
.fitem .fb{min-width:0;flex:1}
.fitem .fh{font-size:12.5px;color:var(--txt2)}
.fitem .fh b{color:var(--txt)}
.fitem .fx{font-size:13.5px;line-height:1.55;margin-top:3px}
.fitem .fd{font-size:11px;color:var(--txt3);margin-top:4px}

/* kpi list */
.kpirow{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--stroke)}
.kpirow:last-child{border-bottom:none}
.kpirow .kc{font-size:11px;color:var(--txt3);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpirow .kd{font-size:13.5px;line-height:1.5}
.kpirow .kp{display:flex;align-items:center;gap:10px}
.kpirow .kp .bar{width:90px}
.kpirow .kwho{font-size:11px;color:var(--txt3);margin-top:3px}
@media(max-width:680px){.kpirow{grid-template-columns:auto 1fr;grid-auto-rows:auto}.kpirow .kp,.kpirow .kact{grid-column:2}}

/* docs */
.docrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--stroke);font-size:13.5px}
.docrow:last-child{border-bottom:none}
.docrow .di{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--panel2);color:var(--txt-hi2)}
.docrow .di svg{width:17px;height:17px}
.docrow .dm{min-width:0;flex:1}
.docrow .dt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docrow .dd{font-size:11px;color:var(--txt3);margin-top:2px}

/* toggle */
.tog{position:relative;width:40px;height:22px;border-radius:12px;background:rgba(255,255,255,.1);
 box-shadow:inset 0 1px 3px rgba(0,0,0,.4);cursor:pointer;transition:.2s;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
 background:rgba(255,255,255,.45);transition:.2s}
.tog.on{background:var(--good);box-shadow:0 0 12px rgba(52,224,161,.4)}
.tog.on::after{left:21px;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* auth screens */
.gate{position:fixed;inset:0;z-index:100;background:radial-gradient(820px 620px at 50% 32%,rgba(91,140,255,.13),transparent 60%),var(--bg);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:32px 0}
.gatebox{width:368px;max-width:90vw;text-align:center;padding:10px;margin:auto}
.gatebox .glogo{height:104px;margin:0 auto 26px;display:block;filter:drop-shadow(0 0 34px rgba(91,140,255,.42));
 animation:emblemIn .8s var(--ease) both}
.gatebox h1{font-size:23px;font-weight:700;letter-spacing:-.4px;animation:rise .55s .1s var(--ease) both}
.gatebox .gsub{color:var(--txt2);font-size:13px;margin:10px 0 26px;animation:rise .55s .18s var(--ease) both}
.gatebox #gate-form{animation:rise .55s .26s var(--ease) both}
.gatebox input{text-align:left;margin-bottom:10px}
.gatebox .btn{width:100%;justify-content:center;margin-top:4px}
.gatebox .alt{margin-top:16px;font-size:12.5px;color:var(--txt3);cursor:pointer}
.gatebox .alt:hover{color:var(--txt2)}
.demo-split{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--txt3);
 font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase}
.demo-split::before,.demo-split::after{content:"";flex:1;height:1px;background:var(--stroke)}
.demo-btn{width:100%;justify-content:flex-start;text-align:left;flex-direction:column;align-items:flex-start;
 gap:3px;margin-bottom:9px;padding:12px 16px}
.demo-btn b{font-size:13.5px;font-weight:600}
.demo-btn i{font-style:normal;font-size:11.5px;color:var(--txt3);line-height:1.35}
.demo-btn:hover{border-color:var(--blue);background:rgba(91,140,255,.1)}
.demo-btn:hover i{color:var(--txt2)}
.gate-err{color:var(--bad);font-size:12.5px;margin-top:12px;min-height:16px}

/* ============ entry sequence ============
   The emblem is the signature: the mark breathing inside expanding rings while
   the plan loads, then collapsing as the dashboard takes over. */
.splash{background:radial-gradient(760px 620px at 50% 42%,rgba(91,140,255,.16),transparent 62%),var(--bg)}
.splashbox{text-align:center;padding:20px;max-width:380px}

.emblem{width:150px;height:150px;position:relative;margin:0 auto 38px}
.emblem .halo{position:absolute;inset:16%;border-radius:50%;
 background:radial-gradient(circle,rgba(120,160,255,.42),rgba(91,140,255,.12) 55%,transparent 72%);
 filter:blur(6px);animation:halo 4.2s ease-in-out infinite}
.emblem .mark{position:absolute;inset:0;display:grid;place-items:center;color:var(--txt-bright);
 filter:drop-shadow(0 0 30px rgba(120,160,255,.7));animation:emblemIn .9s var(--ease) both}
.emblem .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(122,166,255,.55);
 animation:ringOut 3s ease-out infinite}
.emblem .ring:nth-child(3){animation-delay:1s}
.emblem .ring:nth-child(4){animation-delay:2s}
@keyframes emblemIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes ringOut{0%{transform:scale(.46);opacity:.9}100%{transform:scale(1.28);opacity:0}}
@keyframes halo{0%,100%{opacity:.72;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

.sp-title{font-family:'Sora';font-size:26px;font-weight:300;letter-spacing:-.8px;line-height:1;
 animation:rise .6s .15s var(--ease) both}
.sp-title b{font-weight:700;background:linear-gradient(100deg,var(--cyan),var(--blue-soft) 42%,var(--violet-soft) 70%,var(--cyan) 95%);
 background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% center}}
.sp-sub{color:var(--txt2);font-size:12.5px;margin:12px 0 30px;animation:rise .6s .25s var(--ease) both}

.sp-rail{width:190px;height:2px;margin:0 auto;border-radius:2px;background:rgba(255,255,255,.09);
 overflow:hidden;animation:rise .6s .35s var(--ease) both}
.sp-rail>span{display:block;height:100%;width:100%;transform:scaleX(0);border-radius:2px;background:var(--grad);
 box-shadow:0 0 12px rgba(91,140,255,.7);transform-origin:left;transition:transform .45s var(--ease)}
.sp-stage{margin-top:14px;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--txt3);
 animation:rise .6s .45s var(--ease) both;min-height:14px}

/* handoff: emblem lifts away, dashboard rises into place */
.splash.done{animation:splashOut .5s var(--ease) forwards}
@keyframes splashOut{to{opacity:0;transform:scale(1.04)}}
.main.entering{animation:appIn .55s var(--ease) both}
@keyframes appIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.splashbox .alt{margin-top:14px;font-size:12.5px;color:var(--txt3);cursor:pointer}
.splashbox .alt:hover{color:var(--txt2)}
.splashbox .btn{margin-top:6px}

/* toast */
/* bottom offset clears the mobile navigation bar (see the max-width:600px block) */
.toast{position:fixed;bottom:calc(26px + var(--navbar-h, 0px));left:50%;transform:translate(-50%,20px);background:var(--ink);border:1px solid var(--stroke2);color:var(--txt);padding:12px 20px;border-radius:13px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:120;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* filter bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters select,.filters input{width:auto;min-width:130px;padding:9px 12px;font-size:13px}
.filters input[type=text]{min-width:200px;flex:1;max-width:320px}
.filters .spacer{margin-left:auto}

/* misc */
.empty{color:var(--txt3);font-size:13px;padding:16px 4px;text-align:center}
.crumb{font-size:12px;color:var(--txt3);margin-bottom:10px;cursor:pointer}
.crumb:hover{color:var(--txt2)}
.avmini{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--stroke);border-radius:30px;padding:4px 12px 4px 4px;font-size:12px;margin:2px 4px 2px 0}
.avmini i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,rgba(79,139,255,.4),rgba(139,92,246,.35));display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:700;font-family:'Sora';color:var(--txt-bright2)}
.milrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--stroke);font-size:13.5px}
.milrow:last-child{border-bottom:none}
.milrow .mc{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--stroke2);flex:none;display:grid;place-items:center;cursor:pointer;color:transparent}
.milrow .mc.done{background:rgba(52,224,161,.15);border-color:var(--good);color:var(--good)}
.milrow .md2{font-size:11px;color:var(--txt3);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.aud-diff{font-size:11px;color:var(--txt3);font-family:ui-monospace,monospace;word-break:break-all}
.fnote{font-size:11.5px;color:var(--txt3);line-height:1.5;margin-top:6px}
.rowlink-cell,.rowlink-code{cursor:pointer}
.rowlink-cell:hover,.rowlink-code:hover{color:var(--blue)}
.kpirow-live{cursor:pointer;border-radius:10px;margin:0 -8px;padding-left:8px;padding-right:8px}
.kpirow-live:hover{background:var(--panel2)}
.kpirow .kgo{display:block;font-size:10.5px;color:var(--blue);margin-top:5px;text-align:right;opacity:0;transition:opacity .18s}
.kpirow-live:hover .kgo{opacity:1}
/* ============ delivery momentum ============ */
.mom-top{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-bottom:20px}
@media(max-width:680px){.mom-top{grid-template-columns:1fr;gap:18px}}
.mom-dial{text-align:center}
.mdial{--p:0;width:124px;height:124px;border-radius:50%;margin:0 auto;display:grid;place-items:center;position:relative;
 background:conic-gradient(var(--blue) calc(var(--p)*1%),rgba(255,255,255,.07) 0);
 transition:background 1.1s var(--ease)}
.mdial::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--ink3)}
.mdial-v{position:relative;z-index:1;font-family:'Sora';font-size:26px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.mom-cap{font-size:12px;color:var(--txt2);margin-top:12px;max-width:190px;line-height:1.5}
.mom-cap b{color:var(--txt)}
.mom-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.mom-facts{grid-template-columns:1fr}}
.mfact{background:var(--panel2);border:1px solid var(--stroke);border-radius:14px;padding:14px 16px}
.mf-l{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--txt3);font-weight:600}
.mf-v{font-family:'Sora';font-size:24px;font-weight:700;letter-spacing:-.8px;margin-top:6px;font-variant-numeric:tabular-nums}
.mf-v.up{color:var(--good)}.mf-v.down{color:var(--amber)}.mf-v.level{color:var(--txt2)}
.mf-d{font-size:11.5px;color:var(--txt3);margin-top:5px;line-height:1.45}
.standings{border-top:1px solid var(--stroke);padding-top:14px}
.stand{display:grid;grid-template-columns:18px 10px minmax(0,1.35fr) 1fr 44px auto;gap:11px;align-items:center;padding:7px 0;font-size:13px}
.stand .st-rank{font-family:'Sora';font-weight:700;color:var(--txt3);font-size:12px;text-align:center}
.stand .st-dot{width:9px;height:9px;border-radius:3px}
.stand .st-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stand .st-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.stand .st-bar i{display:block;height:100%;border-radius:4px}
.stand .st-pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px}
.stand .st-meta{font-size:11px;color:var(--txt3);white-space:nowrap}
@media(max-width:680px){.stand{grid-template-columns:16px 9px minmax(0,1fr) 42px}.stand .st-bar,.stand .st-meta{display:none}}

/* ============ my cycle ============ */
.cycle{border-color:var(--stroke2)}
.cycle.clear{border-color:rgba(52,224,161,.34);background:linear-gradient(180deg,rgba(52,224,161,.07),rgba(255,255,255,.02))}
.cyc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cyc-t{font-family:'Sora';font-size:17px;font-weight:600;letter-spacing:-.3px}
.cycle.clear .cyc-t{color:var(--mint)}
.cyc-s{font-size:12.5px;color:var(--txt2);margin-top:6px;max-width:62ch;line-height:1.55}
.streak{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--stroke);
 border-radius:14px;padding:9px 15px;flex:none}
.stk-n{font-family:'Sora';font-size:24px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1}
.stk-l{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--txt3);line-height:1.35}
.cyc-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:16px}
.cyc-bar i{display:block;height:100%;border-radius:4px;background:var(--grad);
}
.cycle.clear .cyc-bar i{background:linear-gradient(90deg,var(--good2),var(--good))}
.cyc-list{margin-top:16px;border-top:1px solid var(--stroke);padding-top:6px}
.cyc-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
 padding:9px 6px;border-radius:10px;cursor:pointer;font-size:13px}
.cyc-item:hover{background:var(--panel2)}
.ci-code{color:var(--txt3);font-variant-numeric:tabular-nums;font-size:12px}
.ci-obj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-why{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--txt3);white-space:nowrap}
.ci-why.warn{color:var(--amber)}
@media(max-width:600px){.cyc-item{grid-template-columns:auto minmax(0,1fr)}.ci-why{grid-column:2;font-size:10px}}

/* completion moment */
.celebrate{position:fixed;inset:0;z-index:130;display:grid;place-items:center;pointer-events:none;
 background:radial-gradient(420px 320px at 50% 50%,rgba(52,224,161,.14),transparent 70%);
 animation:celeIn .28s var(--ease),celeOut .4s 1.9s var(--ease) forwards}
.celebox{text-align:center;background:var(--ink3);border:1px solid rgba(52,224,161,.4);border-radius:20px;
 padding:24px 34px;box-shadow:0 26px 70px rgba(0,0,0,.6)}
.cele-ring{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
 background:rgba(52,224,161,.14);border:1.5px solid var(--good);color:var(--good);font-size:24px;
 animation:celePop .5s var(--ease) both}
.cele-t{font-family:'Sora';font-size:16px;font-weight:700}
.cele-s{font-size:12.5px;color:var(--txt2);margin-top:5px;max-width:34ch}
@keyframes celeIn{from{opacity:0}to{opacity:1}}
@keyframes celeOut{to{opacity:0}}
@keyframes celePop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* people picker */
.pgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.pchip{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:30px;
 background:var(--panel2);border:1px solid var(--stroke);color:var(--txt2);font-size:12.5px;
 font-family:inherit;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.pchip i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;
 font-size:9.5px;font-weight:700;font-family:'Sora';color:var(--txt-bright2);
 background:linear-gradient(135deg,rgba(79,139,255,.32),rgba(139,92,246,.28))}
.pchip:hover{border-color:var(--stroke2);color:var(--txt)}
.pchip.on{border-color:var(--blue);background:rgba(91,140,255,.16);color:var(--txt)}
.pchip.on i{background:var(--grad);color:var(--white)}
.kassign{color:var(--blue);cursor:pointer;margin-left:6px;font-size:11px}
.kassign:hover{text-decoration:underline}
.rowdel{cursor:pointer;color:var(--txt3);font-size:17px;line-height:1;padding:0 4px;flex:none}
.rowdel:hover{color:var(--bad)}
@media(hover:none){.kpirow .kgo{opacity:1}}

.metric,.glass,.phead{animation:rise .55s var(--ease) both}
.metric:nth-child(2){animation-delay:.06s}.metric:nth-child(3){animation-delay:.12s}.metric:nth-child(4){animation-delay:.18s}.metric:nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
a,button,.nv,.metric,.chip,.bell,.tog,.btn{transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease)}
@media(min-width:1500px){.main{max-width:1500px}}
@media(max-width:820px){.main{padding:0 16px 60px}.phead .ttl{font-size:26px}}
/* Phone chrome. The sidebar itself becomes a bottom bar in the block above. */
@media(max-width:600px){.chip .rl{display:none}.sample-pill{display:none}.topbar{padding:14px 0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}}

/* ================= action → KPI relationship (2026-08-10) ================= */

/* KPI minimap: one segment per indicator, its own progress inside its status colour */
.kmap{display:flex;gap:8px;margin:2px 0 24px;flex-wrap:wrap}
.kmap-seg{flex:1 1 0;min-width:64px;max-width:150px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.kmap-bar{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:box-shadow .2s var(--ease)}
.kmap-bar i{display:block;height:100%;border-radius:4px;background:var(--c)}
.kmap-cap{display:block;margin-top:6px;font-size:10.5px;color:var(--txt3);font-variant-numeric:tabular-nums;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;transition:color .2s}
.kmap-seg:hover .kmap-bar,.kmap-seg:focus-visible .kmap-bar{box-shadow:inset 0 0 0 1px var(--c),0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}
.kmap-seg:hover .kmap-cap,.kmap-seg:focus-visible .kmap-cap{color:var(--txt)}
@supports not (color: color-mix(in srgb, red 50%, blue)){.kmap-seg:hover .kmap-bar{box-shadow:inset 0 0 0 1px var(--c)}}

/* Spine: the action rolls up from its KPIs, drawn rather than explained */
.ktree{position:relative;padding-left:30px}
.ktree::before{content:"";position:absolute;left:9px;top:26px;bottom:26px;width:2px;border-radius:2px;
 background:linear-gradient(180deg,rgba(139,92,246,.55),rgba(91,140,255,.28) 60%,rgba(91,140,255,.12))}
.ktree-root{position:relative;display:flex;align-items:baseline;gap:8px;padding:4px 0 12px;font-size:13px;color:var(--txt)}
.ktree-rootdot{position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--grad);
 box-shadow:0 0 0 3px rgba(139,92,246,.18),0 0 14px rgba(139,92,246,.6)}
.ktree-rootsub{font-size:12px;color:var(--txt3)}
.ktree .kpirow{position:relative;margin:0;padding-left:12px;padding-right:8px}
.ktree .kpirow::before{content:"";position:absolute;left:-20px;top:50%;width:20px;height:2px;background:rgba(91,140,255,.22)}
.ktree .kpirow::after{content:"";position:absolute;left:-24px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;
 background:var(--node,var(--grey));box-shadow:0 0 8px color-mix(in srgb,var(--node,var(--grey)) 55%,transparent)}
.ktree .kpirow-live:hover{background:var(--panel2)}
.kgo{font-size:11.5px;color:var(--blue);margin-left:10px;white-space:nowrap}

/* Contributor hint replaces the old catch-all update form */
.hintstrip{padding:14px 18px;border:1px solid var(--stroke);border-radius:14px;background:var(--panel);
 font-size:13px;color:var(--txt2);margin-bottom:18px}
.hintstrip b{color:var(--txt)}

/* ================= comments and notes ================= */
.cthread{margin-top:2px}
.citem{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--stroke)}
.citem:last-of-type{border-bottom:none}
.citem .cb{min-width:0;flex:1}
.citem .ch{font-size:12.5px;color:var(--txt2);display:flex;align-items:center;gap:8px}
.citem .ch b{color:var(--txt)}
.citem .cd{font-size:11px;color:var(--txt3)}
.citem .cx{font-size:13.5px;line-height:1.55;margin-top:3px;white-space:pre-wrap}
.compose{display:flex;gap:12px;align-items:flex-end;margin-top:14px}
.compose textarea{flex:1;min-height:46px}
.compose .btn.small{padding:10px 16px}

/* ================= KPI drawer ================= */
.drawer{position:fixed;inset:0;z-index:40;background:rgba(2,3,8,.55);backdrop-filter:blur(4px);
 opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.drawer.open{opacity:1;pointer-events:auto}
.dw{position:absolute;top:0;right:0;bottom:0;width:min(480px,100vw);display:flex;flex-direction:column;outline:none;
 background:linear-gradient(180deg,var(--ink4),var(--ink5));border-left:1px solid var(--stroke2);
 box-shadow:-30px 0 80px rgba(0,0,0,.55);transform:translateX(26px);opacity:0;
 transition:transform .3s var(--ease),opacity .22s var(--ease)}
.drawer.open .dw{transform:none;opacity:1}
.dw-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px}
.dw-eyebrow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt3)}
.dw-close{width:38px;height:38px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
 color:var(--txt2);font-size:20px;line-height:1;cursor:pointer;font-family:inherit;transition:.15s}
.dw-close:hover{color:var(--txt);border-color:var(--stroke2);background:var(--panel2)}
.dw-body{flex:1;overflow-y:auto;padding:2px 22px 22px;overscroll-behavior:contain}
.dw-code{font-family:'Sora';font-size:22px;font-weight:700;letter-spacing:-.4px}
.dw-desc{font-size:13.5px;line-height:1.6;color:var(--txt2);margin:8px 0 16px}
.dw-hero{display:flex;align-items:center;gap:20px;padding:16px 18px;border:1px solid var(--stroke);border-radius:16px;
 background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));margin-bottom:4px}
.dw-pct{font-family:'Sora';font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.dw-pct small{font-size:18px;font-weight:600;color:var(--txt2);margin-left:2px}
.dw-heroright{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dw-heroright .bar{width:100%}
.dw-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--stroke)}
.dw-lab{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt3);margin-bottom:10px}
.dw-form{margin-top:18px;padding:16px;border:1px solid var(--stroke);border-radius:16px;background:var(--panel)}
.dw-form textarea{min-height:64px}
.dw-foot{padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--stroke)}
.dw-foot .btn{width:100%;justify-content:center}
@media(max-width:600px){.dw{width:100vw;border-left:none}}
@media(prefers-reduced-motion:reduce){.drawer,.dw,.kmap-bar i{transition:none}}
@media(max-width:1080px){}
.ring{width:100%;height:auto;display:block;margin:4px auto 0;max-width:520px}
.ring-node{transition:opacity .15s}
.ring-node:hover circle:not([fill="transparent"]){filter:brightness(1.25)}
.ringlegend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:10px}
.legchip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--txt2)}
.legchip i{width:9px;height:9px;border-radius:3px;display:inline-block}
.legchip b{color:var(--txt);font-variant-numeric:tabular-nums}

.tl-wrap{margin-top:6px;position:relative;width:100%}
.tl-axis{position:relative;height:20px;margin-left:88px;font-size:10.5px;color:var(--txt3)}
.tl-year{position:absolute;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.tl-nowlab{position:absolute;transform:translateX(-50%);color:var(--cyan);letter-spacing:.8px;text-transform:uppercase;font-size:9.5px}
.tl-body{position:relative}
.tl-overlay{position:absolute;left:88px;right:0;top:0;bottom:0;pointer-events:none}
.tl-grid{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.05)}
.tl-now{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(rgba(34,211,238,.85),rgba(34,211,238,.15))}
.tl-area{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
 color:var(--txt3);padding:12px 0 6px}
.tl-area .ld{width:8px;height:8px;border-radius:3px}
.tl-row{display:flex;align-items:center;gap:0;height:24px;cursor:pointer;border-radius:8px}
.tl-row:hover{background:var(--panel)}
.tl-code{flex:0 0 88px;font-size:11px;color:var(--txt3);font-variant-numeric:tabular-nums;padding-left:2px}
.tl-row:hover .tl-code{color:var(--txt)}
.tl-track{flex:1;position:relative;height:100%}
.tl-bar{position:absolute;top:6px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--c) 26%,transparent);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent);overflow:hidden}
.tl-bar i{display:block;height:100%;background:var(--c);border-radius:6px;opacity:.85}
@supports not (color: color-mix(in srgb, red 50%, blue)){.tl-bar{background:rgba(255,255,255,.1)}}
@media(max-width:600px){.tl-code{flex-basis:64px}.tl-axis{margin-left:64px}.tl-overlay{left:64px}}

/* ================= AI layer ================= */
.aibrief{position:relative;padding:16px 20px;border-radius:16px;margin-bottom:18px;
 background:linear-gradient(135deg,rgba(91,140,255,.09),rgba(139,92,246,.07));
 border:1px solid rgba(139,92,246,.28)}
.airead{margin-bottom:18px}
.ai-eyebrow{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--violet-soft);margin-bottom:8px}
.ai-eyebrow svg{stroke:var(--violet-soft)}
.ai-when{color:var(--txt3);letter-spacing:.4px;text-transform:none;font-size:10.5px}
.ai-body{font-size:13.5px;line-height:1.65;max-width:88ch}
.coach-why{margin-top:10px;font-size:12px;color:var(--violet-soft);line-height:1.5}

.askbox{display:flex;flex-direction:column;min-height:56vh}
#ask-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px 2px 16px;max-height:58vh}
.ask-msg{max-width:72ch;font-size:13.5px;line-height:1.65;padding:12px 16px;border-radius:14px}
.ask-user{align-self:flex-end;background:linear-gradient(135deg,rgba(91,140,255,.22),rgba(139,92,246,.18));
 border:1px solid rgba(91,140,255,.3)}
.ask-ai{align-self:flex-start;background:var(--panel);border:1px solid var(--stroke)}
.ask-wait{color:var(--txt3);font-style:normal;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.asklink{color:var(--blue);cursor:pointer;font-variant-numeric:tabular-nums}
.asklink:hover{text-decoration:underline}
.ask-hello{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:8px 2px}
.ask-sug{background:var(--panel);border:1px solid var(--stroke);color:var(--txt2);font-family:inherit;
 font-size:13px;padding:10px 16px;border-radius:12px;cursor:pointer;text-align:left}
.ask-sug:hover{color:var(--txt);border-color:var(--stroke2);background:var(--panel2)}
.ask-compose{display:flex;gap:10px;align-items:flex-end;border-top:1px solid var(--stroke);padding-top:14px}
.ask-compose textarea{flex:1;min-height:48px}

.draftbox{font-size:13.5px;line-height:1.7;max-height:52vh;overflow-y:auto;padding:14px 16px;
 border:1px solid var(--stroke);border-radius:12px;background:var(--panel);margin-top:6px}

/* ================= ring v2: full-width card, motion, hover cards ================= */
.ringcard .ring{max-width:600px}
.ringwrap{position:relative}

/* Entrance: arcs draw, labels fade, centre rises, nodes pop in sequence. */
.ring-arc{stroke-opacity:.33;stroke-dasharray:1;stroke-dashoffset:1;animation:arcdraw .8s var(--ease) forwards}
@keyframes arcdraw{to{stroke-dashoffset:0}}
.ring-lab{opacity:0;animation:fadein .6s var(--ease) forwards}
@keyframes fadein{to{opacity:1}}
.ring-center{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.94);
 animation:centerin .7s .35s var(--ease) forwards}
@keyframes centerin{to{opacity:1;transform:none}}
.ring-progress{stroke-dasharray:1;stroke-dashoffset:1;animation:arcdraw 1s .6s var(--ease) forwards}
.ring-node{cursor:pointer;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
 animation:nodepop .45s var(--ease) forwards;transition:transform .18s var(--ease)}
@keyframes nodepop{to{opacity:1;transform:scale(1)}}
.ring-node:hover{transform:scale(1.3)}
.ring:has(.ring-node:hover) .ring-node:not(:hover){opacity:.35}
.ring-halo{transform-box:fill-box;transform-origin:center;animation:halospin 14s linear infinite}
@keyframes halospin{to{transform:rotate(360deg)}}

/* Hover card: the wrapper glides between rows, the card itself springs in */
.ringtip{position:absolute;top:0;left:0;width:252px;pointer-events:none;z-index:6;
 transition:transform .18s var(--glide)}
.ringtip .rt-in{background:linear-gradient(180deg,var(--ink6),var(--ink7));border:1px solid var(--stroke2);
 border-radius:14px;padding:13px 15px;box-shadow:0 18px 50px rgba(0,0,0,.55);
 opacity:0;transform:scale(.9) translateY(9px);transform-origin:top left;
 transition:transform .26s var(--spring),opacity .15s ease}
.ringtip.show .rt-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ringtip,.ringtip .rt-in{transition:none}}
.rt-top{display:flex;align-items:baseline;gap:9px;font-size:13px}
.rt-top b{font-family:'Sora';letter-spacing:.2px}
.rt-status{font-size:11px;letter-spacing:.4px}
.rt-pct{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.rt-obj{font-size:12px;line-height:1.5;color:var(--txt2);margin-top:7px;display:-webkit-box;
 -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rt-meta{font-size:10.5px;color:var(--txt3);margin-top:8px}
.rt-flags{font-size:11px;color:var(--amber);margin-top:6px;line-height:1.45}
.rt-go{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-top:9px}

@media(prefers-reduced-motion:reduce){
  .ring-arc,.ring-lab,.ring-center,.ring-progress,.ring-node{animation:none;opacity:1;transform:none;
   stroke-dasharray:none;stroke-dashoffset:0}
  .ring-halo{animation:none}
}

/* ================= futuristic motion pass: spheres, satellite, living timeline ================= */

/* Ring: glossy sphere nodes with their own glow, breathing aurora, orbiting satellite */
.ring-dot{filter:drop-shadow(0 0 5px var(--nc,var(--blue)))}
.ring-aura{transform-box:fill-box;transform-origin:center;animation:aurapulse 9s ease-in-out infinite alternate}
@keyframes aurapulse{from{opacity:.75;transform:scale(.95)}to{opacity:1;transform:scale(1.06)}}
.ring-comet{pointer-events:none}

/* Timeline: bars grow in on load, one after the other */
.tl-bar{transform:scaleX(0);transform-origin:left;animation:growbar .65s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes growbar{to{transform:scaleX(1)}}

/* Live bars carry a moving light sweep across their progress fill */
.tl-bar i{position:relative;overflow:hidden}
.tl-bar.live i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46%;
 background:linear-gradient(115deg,transparent,rgba(255,255,255,.3) 50%,transparent);
 animation:sweep 3.8s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}

/* A glowing sphere marks the progress frontier of every started action */
.tl-frontier{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
 background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),var(--c) 58%);
 box-shadow:0 0 10px var(--c);opacity:0;animation:fadein .5s forwards;animation-delay:calc(var(--d,0s) + .55s);z-index:2}

/* The today line carries a slow travelling beacon */
.tl-now::after{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,var(--white),var(--cyan) 62%);box-shadow:0 0 14px rgba(34,211,238,.85);
 animation:beacon 7s ease-in-out infinite}
@keyframes beacon{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--tlh,300px))}}

.tl-row:hover .tl-bar{filter:brightness(1.3)}
.tl-row{position:relative}

@media(prefers-reduced-motion:reduce){
  .ring-aura,.tl-bar,.tl-bar.live i::after,.tl-now::after{animation:none}
  .tl-bar{transform:none}
  .tl-frontier{animation:none;opacity:1}
  .ring-comet{display:none}
}

/* ================= system-wide living UI ================= */

/* Ambient: the background aurora drifts forever, so no screen is ever static */
body::before{animation:drift 52s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}
 50%{transform:translate3d(-2.2%,1.6%,0) scale(1.05)}
 100%{transform:translate3d(1.8%,-1.4%,0) scale(1.02)}}

/* Reveal: cards and rows rise in with a stagger (delays set by decorate()) */
.rv{opacity:0;transform:translateY(13px);animation:rvin .5s var(--ease) forwards;animation-delay:var(--rv,0s)}
@keyframes rvin{to{opacity:1;transform:none}}

/* Every progress bar in the system grows from zero */
.bar>span{transform-origin:left;animation:barx .7s var(--ease) both;animation-delay:calc(var(--rv,0s) + .15s)}
@keyframes barx{from{transform:scaleX(0)}}
.kmap-bar i{transform-origin:left;animation:barx .6s var(--ease) both;animation-delay:calc(var(--rv,0s) + .2s)}

/* Stat tiles lift on hover */
.metric{transition:transform .2s var(--ease),border-color .2s}
.metric:hover{transform:translateY(-3px)}

/* Action page: the spine draws itself, nodes light up along it, the root glows */
.ktree::before{transform:scaleY(0);transform-origin:top;animation:spiney .9s var(--ease) .1s forwards}
@keyframes spiney{to{transform:scaleY(1)}}
.ktree .kpirow::after{opacity:0;animation:fadein .4s var(--ease) forwards;animation-delay:calc(var(--rv,0s) + .35s)}
.ktree-rootdot{animation:rootglow 4.5s ease-in-out infinite alternate}
@keyframes rootglow{from{box-shadow:0 0 0 3px rgba(139,92,246,.18),0 0 14px rgba(139,92,246,.55)}
 to{box-shadow:0 0 0 5px rgba(139,92,246,.1),0 0 24px rgba(139,92,246,.9)}}

/* Bell: unread notifications swing occasionally and the counter pulses */
.bell.alive svg{transform-origin:top center;animation:bellswing 7s ease-in-out infinite}
@keyframes bellswing{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(12deg)}91%{transform:rotate(-10deg)}
 94%{transform:rotate(6deg)}97%{transform:rotate(-3deg)}}
.bell.alive .cnt{animation:cntpulse 2.6s ease-in-out infinite}
@keyframes cntpulse{50%{box-shadow:0 0 0 5px rgba(255,107,138,.16)}}

/* Ask SIMS: the waiting state types its dots */
.ask-wait::after{content:"";display:inline-block;width:1.3em;text-align:left;animation:dots 1.4s steps(1) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* Sign-in: the emblem breathes while it waits */
.glogo{animation:logobreathe 5s ease-in-out infinite alternate}
@keyframes logobreathe{from{filter:drop-shadow(0 0 10px rgba(139,92,246,.22))}
 to{filter:drop-shadow(0 0 26px rgba(91,140,255,.5))}}

@media(prefers-reduced-motion:reduce){
  body::before,.rv,.bar>span,.kmap-bar i,.ktree::before,.ktree .kpirow::after,.ktree-rootdot,
  .bell.alive svg,.bell.alive .cnt,.ask-wait::after,.glogo{animation:none}
  .rv{opacity:1;transform:none}
  .ktree::before{transform:none}
  .ktree .kpirow::after{opacity:1}
}

/* Data refresh re-renders in place: entrances do not replay, live motion keeps running */
#pages.noanim .page{animation:none}
#pages.noanim .rv{animation:none;opacity:1;transform:none}
#pages.noanim .bar>span,#pages.noanim .kmap-bar i,#pages.noanim .tl-bar{animation:none;transform:none}
#pages.noanim .tl-frontier{animation:none;opacity:1}
#pages.noanim .ring-arc,#pages.noanim .ring-progress{animation:none;stroke-dashoffset:0}
#pages.noanim .ring-lab,#pages.noanim .ring-node,#pages.noanim .ring-center{animation:none;opacity:1;transform:none}
#pages.noanim .ktree::before{animation:none;transform:none}
#pages.noanim .ktree .kpirow::after{animation:none;opacity:1}

/* ================= plan editor ================= */
.pe-kpirow{display:flex;gap:10px;align-items:center;margin-top:8px}
.pe-kpirow input{flex:1}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* The plan editor used to repaint .btn.danger solid pink while the base rule kept
   pink text, so "Delete" was pink on pink and unreadable. The base outline style
   is the one style now; the danger zone around it already carries the weight. */
.dangerzone{margin-top:22px;padding:14px 16px;border:1px solid rgba(255,107,138,.35);border-radius:14px;background:rgba(255,107,138,.05)}
.dz-lab{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--bad);margin-bottom:4px}
.dz-row{display:flex;gap:10px;margin-top:8px;align-items:center}
.dz-row input{flex:1}

/* ================= search: Cmd-K palette + Overview live box ================= */
.palette{position:fixed;inset:0;z-index:70;background:rgba(2,4,10,.66);backdrop-filter:blur(6px);
 display:none;justify-content:center;align-items:flex-start;padding:12vh 16px}
.palette.open{display:flex}
.pal{width:640px;max-width:100%;background:linear-gradient(180deg,var(--ink6),var(--ink7));
 border:1px solid var(--stroke2);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.7);
 overflow:hidden;animation:palin .22s var(--spring) both}
@keyframes palin{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:none}}
.pal input{width:100%;background:none;border:none;outline:none;color:var(--txt);font-family:inherit;
 font-size:16px;padding:18px 20px;border-bottom:1px solid var(--stroke)}
.pal-list{max-height:46vh;overflow-y:auto;padding:8px}
.sr-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;cursor:pointer}
.sr-row.active,.sr-row:hover{background:var(--panel2)}
.sr-kind{flex:none;width:52px;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--txt3)}
.sr-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.sr-code{font-variant-numeric:tabular-nums;font-size:12.5px;flex:none}
.sr-title{font-size:13px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-row.active .sr-title,.sr-row:hover .sr-title{color:var(--txt)}
.sr-sub{flex:none;font-size:11px;color:var(--txt3)}
.pal-list .empty{padding:22px;text-align:center}

.ovsearch{position:relative;width:min(300px,100%)}
.ovsearch input{width:100%}
.ovs-drop{position:absolute;top:calc(100% + 8px);right:0;width:min(520px,92vw);display:none;z-index:20;
 background:linear-gradient(180deg,var(--ink6),var(--ink7));border:1px solid var(--stroke2);
 border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:6px;animation:palin .18s var(--spring) both}
.ovs-drop.open{display:block}
@media(max-width:600px){.ovs-drop{left:0;right:auto;width:92vw}}

/* ================= @mentions ================= */
.compose{position:relative}
.mentiondrop{position:absolute;bottom:calc(100% + 8px);left:46px;width:min(280px,80%);display:none;z-index:12;
 background:linear-gradient(180deg,var(--ink6),var(--ink7));border:1px solid var(--stroke2);border-radius:12px;
 box-shadow:0 18px 50px rgba(0,0,0,.55);padding:5px;animation:palin .16s var(--spring) both}
.mentiondrop.open{display:block}
.mention-item{padding:9px 12px;border-radius:9px;font-size:13px;cursor:pointer}
.mention-item:hover{background:var(--panel2)}
.mention{color:var(--blue);font-weight:600}

/* ================= plan history ================= */
.planhist{max-height:320px;overflow-y:auto}
.ph-row{display:grid;grid-template-columns:86px 130px 1fr;gap:12px;padding:9px 2px;
 border-bottom:1px solid var(--stroke);font-size:12.5px;align-items:baseline}
.ph-row:last-child{border-bottom:none}
.ph-when{color:var(--txt3);font-size:11px;white-space:nowrap}
.ph-who{color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-what{color:var(--txt2);line-height:1.5}
.ph-what b{color:var(--txt);font-variant-numeric:tabular-nums}
@media(max-width:600px){.ph-row{grid-template-columns:1fr;gap:2px}}

/* ================= mobile pass ================= */
@media(max-width:700px){
  /* The timeline keeps its readable width and scrolls sideways under the thumb */
  .tl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .tl-axis,.tl-body{min-width:560px}
  .main{padding:0 16px 70px}
  .phead .ttl{font-size:26px}
  .dw-pct{font-size:32px}
  .sample-pill{display:none}   /* the prototype banner crowds a phone topbar; the gate said it already */
  .kmap{gap:6px}
  .kmap-seg{min-width:52px}
  .modal{padding:3vh 10px}
  .modal .box{padding:18px}
  .palette{padding:6vh 10px}
  .sr-kind{display:none}
  .sr-sub{display:none}
  .ph-what{font-size:12px}
  .compose .btn.small{padding:10px 13px}
}

/* ================= presence: who is in the room ================= */
.presence{display:flex;align-items:center}
.pz{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:'Sora';
 font-size:10px;font-weight:700;color:var(--txt-hi);margin-left:-8px;
 background:linear-gradient(135deg,rgba(79,139,255,.35),rgba(139,92,246,.3));
 border:2px solid var(--bg);position:relative}
.pz:first-child{margin-left:0}
.pz::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
 background:var(--good);border:2px solid var(--bg);animation:pzpulse 2.6s ease-in-out infinite}
@keyframes pzpulse{50%{box-shadow:0 0 8px rgba(52,224,161,.8)}}
.pz.more::after{display:none}
@media(prefers-reduced-motion:reduce){.pz::after{animation:none}}

/* ================= agentic proposals in Ask SIMS ================= */
.ask-prop{border-color:rgba(139,92,246,.4);background:linear-gradient(135deg,rgba(91,140,255,.08),rgba(139,92,246,.06))}
.prop-eyebrow{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--violet-soft);margin-bottom:8px}
.prop-sum{font-size:13px;font-weight:600;margin-bottom:6px}
.prop-steps{margin:0 0 12px 18px;font-size:12.5px;color:var(--txt2);line-height:1.7}
.prop-btns{display:flex;gap:10px}
.prop-done{font-size:12.5px;line-height:1.6;color:var(--txt2)}
.prop-done .ok{color:var(--good)}
.prop-done .bad{color:var(--bad)}

/* ================= momentum standings: the single home of area progress ================= */
.stand{cursor:pointer;border-radius:11px;transition:background .18s var(--ease)}
.stand:hover{background:var(--panel)}
.st-bar{height:7px;border-radius:4px}
.st-bar i{border-radius:4px;box-shadow:0 0 8px color-mix(in srgb,currentColor 0%,transparent)}

/* ================= the visual suite: sky, radar, flow, orbit ================= */

/* Indicator sky */
.constwrap{position:relative}
.constfield{width:100%;height:auto;display:block}
.const-drift{animation:constdrift 70s ease-in-out infinite alternate}
@keyframes constdrift{from{transform:translate(0,0)}to{transform:translate(-9px,5px)}}
.star{cursor:pointer}
.star-core{animation:twinkle 4s ease-in-out infinite;animation-delay:var(--tw,0s)}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.45}}
.star.trouble .star-core{animation:flicker 1.6s steps(2) infinite;animation-delay:var(--tw,0s)}
@keyframes flicker{0%,100%{opacity:.95}25%{opacity:.3}50%{opacity:.85}75%{opacity:.4}}
.star:hover .star-glow{opacity:.55}
.star:hover .star-core{animation:none;opacity:1;filter:drop-shadow(0 0 6px var(--nc))}
.const-lab{font-size:9.5px;letter-spacing:1.8px;fill:var(--txt3);cursor:pointer}
.const-lab:hover{fill:var(--txt2)}

/* Radar */
.radarwrap,.orbitwrap{position:relative;display:flex;justify-content:center}
.radar,.orbit{width:min(380px,100%);height:auto}
.sweep{transform-box:view-box;transform-origin:center;animation:sweepspin 5.2s linear infinite}
@keyframes sweepspin{to{transform:rotate(360deg)}}
.blip{cursor:pointer}
.blip-dot{filter:drop-shadow(0 0 5px currentColor)}
.blip-ping{animation:ping 2.8s ease-out infinite;animation-delay:var(--bd,0s);transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{transform:scale(.5);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.radar-cap{font-size:9px;letter-spacing:1.2px;fill:var(--txt3)}
.radar-clear{font-family:'Sora';font-size:13px;letter-spacing:2.5px;fill:var(--good)}

/* Commitment flow */
.flow{width:100%;height:auto;display:block}
.flow-lab{font-size:11px;fill:var(--txt2)}
.flow-ribbon{cursor:pointer;transition:opacity .2s var(--ease)}
.flow-ribbon:hover{opacity:.38}

/* Workload orbit */
.planet{cursor:pointer}
.planet-ini{font-family:'Sora';font-size:8.5px;font-weight:700;fill:var(--txt-bright);pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .const-drift,.star-core,.star.trouble .star-core,.sweep,.blip-ping{animation:none}
}

/* ================= the AI orb and AI mode ================= */

/* Floating orb: a fluid gradient sphere, always within reach */
.ai-orb{position:fixed;right:26px;bottom:26px;z-index:52;width:58px;height:58px;border-radius:50%;
 border:none;padding:0;cursor:pointer;overflow:hidden;display:none;
 box-shadow:0 8px 30px rgba(91,140,255,.45),0 0 0 1px rgba(255,255,255,.12);
 animation:orbbreathe 4.5s ease-in-out infinite;transition:transform .2s var(--spring)}
body.in-app .ai-orb{display:block}
.ai-orb:hover{transform:scale(1.12)}
@keyframes orbbreathe{0%,100%{box-shadow:0 8px 30px rgba(91,140,255,.4),0 0 0 1px rgba(255,255,255,.12)}
 50%{box-shadow:0 8px 42px rgba(139,92,246,.65),0 0 0 1px rgba(255,255,255,.2)}}
.orb-core{position:absolute;inset:-30%;border-radius:50%;
 background:conic-gradient(from 0deg,var(--cyan),var(--blue),var(--violet),var(--bad),var(--amber),var(--cyan));
 filter:blur(9px) saturate(1.3);animation:orbspin 6s linear infinite}
@keyframes orbspin{to{transform:rotate(360deg)}}
.ai-orb::after{content:"";position:absolute;inset:0;border-radius:50%;
 background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,.08) 46%,transparent 60%)}
.ai-orb.thinking .orb-core{animation-duration:1.1s}

/* AI mode: the viewport gets the glowing edge, the panel floats centre */
.aio{position:fixed;inset:0;z-index:66;display:none;align-items:flex-start;justify-content:center;
 padding:9vh 16px;background:rgba(2,3,9,.72);backdrop-filter:blur(10px)}
.aio.open{display:flex}
.aio-edge{position:absolute;inset:0;pointer-events:none;padding:3px;
 background:conic-gradient(from 0deg,var(--cyan),var(--blue),var(--violet),var(--bad),var(--amber),var(--cyan));
 -webkit-mask:linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
 animation:edgeflow 7s linear infinite}
.aio-edge.soft{padding:7px;filter:blur(16px);opacity:.65}
@keyframes edgeflow{to{filter:hue-rotate(360deg)}}
.aio-edge.soft{animation:edgeflowsoft 7s linear infinite}
@keyframes edgeflowsoft{to{filter:blur(16px) hue-rotate(360deg)}}
.aio.thinking .aio-edge{animation-duration:1.6s}
.aio.thinking .aio-edge.soft{animation-duration:1.6s;opacity:.95}

.aio-panel{position:relative;width:min(760px,100%);max-height:82vh;display:flex;flex-direction:column;
 background:linear-gradient(180deg,var(--ink6),var(--ink7));border:1px solid var(--stroke2);border-radius:22px;
 box-shadow:0 40px 110px rgba(0,0,0,.75);overflow:hidden;animation:palin .3s var(--spring) both}
.aio-head{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--stroke)}
.aio-head b{font-family:'Sora';font-size:15px;display:block}
.aio-sub{font-size:11px;color:var(--txt3);display:block;margin-top:2px}
.aio-head .dw-close{margin-left:auto}
.aio-orb-mini{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
 box-shadow:0 0 14px rgba(91,140,255,.55)}
.aio-orb-mini .orb-core{inset:-30%;filter:blur(6px) saturate(1.3)}
.aio.thinking .aio-orb-mini .orb-core{animation-duration:1.1s}
#aio-body{overflow-y:auto;padding:6px 16px 16px}
#aio-body .askbox.compact{border:none;background:none;box-shadow:none;margin:0;min-height:52vh}
#aio-body .page{animation:none}

@media(max-width:600px){
  .ai-orb{right:16px;bottom:calc(84px + env(safe-area-inset-bottom))}
  .aio{padding:4vh 8px}
  .aio-panel{max-height:88vh}
}
@media(prefers-reduced-motion:reduce){
  .ai-orb,.orb-core,.aio-edge,.aio-edge.soft{animation:none}
}

/* =====================================================================
   Accessibility pass (2026-08-16), from the full product audit.
   Every rule here exists to answer a specific finding.
   ===================================================================== */

/* Text for assistive technology only. Used for form labels the design carries
   visually as placeholders, and for the settled value of an animating counter. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Keyboard users land on the rail first; this jumps them past it. */
.skiplink{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-160%);
 background:var(--ink);color:var(--txt);border:1px solid var(--stroke2);border-radius:10px;
 padding:10px 16px;font-size:13px;text-decoration:none;transition:transform .18s var(--ease)}
.skiplink:focus{transform:none}
#pages:focus{outline:none}

/* One visible focus ring for everything reachable by keyboard. The app previously
   relied on hover alone, so a tab stop was invisible. */
:where(a,button,input,select,textarea,[tabindex],[role="button"],[role="option"]):focus-visible{
 outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
.ring-node:focus-visible,.star:focus-visible,.blip:focus-visible,.planet:focus-visible{outline-offset:4px}

/* Native elements that replaced clickable divs, restyled to look unchanged.
   The rail is now anchors plus one button, so both need the chrome stripped. */
.nv{text-decoration:none;background:none;border:none;font:inherit;color:var(--txt2);padding:0}
button.nv{cursor:pointer}
.gatebox .alt{display:block;width:100%;background:none;border:none;font:inherit;text-align:center}
.crumb,.kassign,.rowdel,.h3link{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.crumb{color:var(--txt3);display:inline-block}
.kassign{color:var(--blue);font-size:11px;margin-left:6px}
.rowdel{color:var(--txt3);font-size:17px;line-height:1;padding:0 4px;flex:none}
.h3link{color:var(--blue)}
.milrow .mc{background:none;padding:0;font:inherit}
.tl-row,.stand,.cyc-item,.deadline-row{font:inherit;color:inherit;text-align:left;background:none;border:none;width:100%}
.rowlink-code,.rowlink-cell{background:none;border:none;font:inherit;color:inherit;text-align:left;padding:0;cursor:pointer}
.trlink{color:inherit;text-decoration:none;display:inline-block}
.trlink:hover,.trlink:focus-visible{color:var(--blue);text-decoration:underline}

/* Target size. WCAG 2.2 AA asks for 24px; touch pointers get the full 44px so a
   thumb is never asked to hit a 26px KPI tab. */
.btn.small,.dw-close,.rowdel,.kmap-seg,.bell-item{min-height:24px}
.kmap-seg{padding:6px 2px}
button.evchip.go{min-height:24px}
/* The code link is alone in its cell rather than inside a sentence, so it does not
   get the inline exception: pad the hit area out without moving the layout. */
.trlink{padding:5px 4px;margin:-5px -4px}
@media(pointer:coarse){
  .btn,.btn.small,.dw-close,.kmap-seg,.filters select,.filters input,.rowdel,
  .pchip,.bell,.bell-item,.ask-sug,.skiplink{min-height:44px;display:inline-flex;align-items:center}
  .btn,.bell,.kmap-seg{justify-content:center}
  .btn.small{padding-left:16px;padding-right:16px}
  .rowdel{min-width:44px}
  .milrow .mc{width:28px;height:28px}
}

/* Ask SIMS: a failure names itself and offers the same question again. */
.ask-err{border-color:rgba(255,107,138,.4);background:rgba(255,107,138,.07);
 display:flex;flex-direction:column;align-items:flex-start;gap:10px}

/* Every chart says where the same figures can be read as text. */
.chart-alt{display:inline-block;margin-top:12px;font-size:12px;color:var(--txt2)}
.chart-alt a{color:var(--blue)}

/* Scope note: the plan is 55 actions and only some are loaded. */
.scopenote{font-size:11.5px;color:var(--txt3);margin-top:6px;line-height:1.5}

/* Alert rules: one line per rule, every row the same height. A wrapping message
   made rows different heights, so the table shifted under the cursor while the
   administrator worked down the switches. */
.rulestable td{vertical-align:middle;height:56px;white-space:nowrap}
.rulestable .rulemsg{max-width:340px}
.rulestable .rulemsg span{display:block;color:var(--txt2);font-size:12.5px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================================================================
   2026-08-17 pass: role scoping, per-person text size, KPI evidence,
   group reminders, report builder, Boardroom 16:9 stage.
   ================================================================ */

/* Viewers get the register only; the AI orb is not part of their surface. */
body[data-role="viewer"] .ai-orb{display:none}

/* ---- per-person text size -------------------------------------------------
   Applied to the content surfaces, never the chrome. The Boardroom stage sizes
   itself to the screen and is excluded on purpose. */
body[data-fs="lg"] :is(.page:not(.brd),.dw,#modal-box,.bell-drop:not(.fs-drop),.aio-panel){zoom:1.12}
body[data-fs="xl"] :is(.page:not(.brd),.dw,#modal-box,.bell-drop:not(.fs-drop),.aio-panel){zoom:1.25}
.fswrap{position:relative}
.fs-b span{font-family:'Sora';font-size:13px;font-weight:700;letter-spacing:.3px}
.fs-drop{width:250px;padding:4px}
.fs-title{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt3);padding:10px 14px 4px}
.fs-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:none;border:0;
 color:var(--txt);cursor:pointer;text-align:left;border-radius:11px;transition:background .18s ease,transform .18s var(--ease)}
.fs-opt:hover{background:var(--panel2);transform:translateX(2px)}
.fs-opt:active{transform:scale(.97)}
.fs-opt.on{background:rgba(91,140,255,.1)}
.fs-aa{font-family:'Sora';font-weight:700;width:36px;text-align:center;color:var(--txt2);flex:none}
.fs-aa[data-scale="std"]{font-size:13px}
.fs-aa[data-scale="lg"]{font-size:16px}
.fs-aa[data-scale="xl"]{font-size:19px}
.fs-l{display:flex;flex-direction:column;flex:1;min-width:0}
.fs-l b{font-size:13px;font-weight:600}
.fs-l i{font-style:normal;font-size:11.5px;color:var(--txt3)}
.fs-check{opacity:0;color:var(--good);font-weight:700;flex:none}
.fs-opt.on .fs-check{opacity:1}
.fs-note{font-size:11px;color:var(--txt3);padding:6px 14px 10px}

/* ---- evidence rows: the KPI a document belongs to, as a live chip ---- */
.dockpi{font:600 10.5px 'Sora',sans-serif;letter-spacing:.5px;color:var(--cyan);background:rgba(34,211,238,.08);
 border:1px solid rgba(34,211,238,.3);border-radius:7px;padding:1.5px 7px;cursor:pointer;
 transition:transform .18s var(--ease),background .18s ease}
.dockpi:hover{transform:translateY(-1px) scale(1.04);background:rgba(34,211,238,.16)}
.dockpi:active{transform:scale(.97)}
.docact{color:var(--txt3)}
.dw-lab .h3link{text-transform:none;letter-spacing:0;margin-left:8px}

/* Rows respond to the hand: same grammar as the register rows. */
.milrow,.docrow{border-radius:10px;transition:background .18s ease,transform .18s var(--ease)}
.milrow:hover,.docrow:hover{background:rgba(255,255,255,.035);transform:translateX(3px)}
.fitem,.citem{border-radius:10px;transition:background .18s ease}
.fitem:hover,.citem:hover{background:rgba(255,255,255,.028)}
.blip circle,.planet circle{transform-box:fill-box;transform-origin:center;transition:transform .2s var(--ease)}
.blip:hover circle{transform:scale(1.3)}
.planet:hover circle{transform:scale(1.15)}

/* ---- ask for any report ---- */
.repask .rq-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.rq-draft{margin-top:12px}
#rq-out .ask-err{margin-top:12px}
#rq-out .ask-wait{margin-top:12px}

/* ================= Boardroom: the plan staged for a 16:9 screen ============
   Every size inside the stage is a container unit, so the same composition
   holds on a laptop, a projector and the boardroom TV. */
.brd .phead{margin-bottom:16px}
.brd-fit{width:100%}
.brd-stage{position:relative;width:min(100%,calc((100vh - 230px)*16/9));aspect-ratio:16/9;margin:0 auto;
 container-type:size;overflow:hidden;border:1px solid var(--stroke);border-radius:20px;
 background:radial-gradient(120% 135% at 50% -20%,#0b1226 0%,var(--bg) 55%,#03040a 100%);
 box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.02)}
.brd-fit:fullscreen{display:grid;place-items:center;background:#000}
.brd-fit:fullscreen .brd-stage{width:min(100vw,calc(100vh*16/9));border:none;border-radius:0;box-shadow:none}
.brd-fit.idle{cursor:none}
.brd .chart-alt{max-width:none;text-align:center;margin-top:14px}

/* ambient: a starfield that drifts, nothing else in the background moves */
.bs-stars{position:absolute;inset:-14%;pointer-events:none;opacity:.55;background-image:
 radial-gradient(1.3px 1.3px at 11% 22%,rgba(255,255,255,.55),transparent 60%),
 radial-gradient(1px 1px at 24% 64%,rgba(255,255,255,.35),transparent 60%),
 radial-gradient(1.6px 1.6px at 38% 12%,rgba(160,190,255,.5),transparent 60%),
 radial-gradient(1px 1px at 52% 44%,rgba(255,255,255,.3),transparent 60%),
 radial-gradient(1.3px 1.3px at 64% 78%,rgba(255,255,255,.4),transparent 60%),
 radial-gradient(1px 1px at 71% 26%,rgba(180,200,255,.45),transparent 60%),
 radial-gradient(1.5px 1.5px at 84% 56%,rgba(255,255,255,.5),transparent 60%),
 radial-gradient(1px 1px at 93% 14%,rgba(255,255,255,.35),transparent 60%),
 radial-gradient(1.2px 1.2px at 8% 86%,rgba(160,190,255,.4),transparent 60%),
 radial-gradient(1px 1px at 46% 92%,rgba(255,255,255,.3),transparent 60%)}

/* top strip */
.bs-meta{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:flex-start;
 justify-content:space-between;gap:1.6cqw;padding:2.6cqh 2.4cqw 0}
.bs-brand{display:flex;align-items:center;gap:.9cqw}
.bs-brand svg{width:2.1cqw;height:auto;opacity:.95;flex:none}
.bs-brand b{display:block;font-family:'Sora';font-weight:700;font-size:1.2cqw;letter-spacing:.02em}
.bs-brand i{display:block;font-style:normal;font-size:.85cqw;color:var(--txt2);letter-spacing:.14em;text-transform:uppercase;margin-top:.3cqh}
.bs-scope{font-size:.95cqw;color:var(--txt3);margin-top:.6cqh}
.bs-clock{display:flex;align-items:baseline;gap:1cqw}
.bs-clock b{font-family:'Sora';font-weight:700;font-size:2.1cqw;font-variant-numeric:tabular-nums}
.bs-clock i{font-style:normal;font-size:.92cqw;color:var(--txt2)}
.bs-live{display:inline-flex;align-items:center;gap:.45cqw;font-size:.8cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--good)}
/* The pulse is a pseudo-element scaling out: transform and opacity only, no
   box-shadow painting on every frame. */
.bs-dot{position:relative;width:.55cqw;height:.55cqw;border-radius:50%;background:var(--good)}
.bs-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);opacity:0}

/* main split: the hologram and the intel rail */
.bs-main{position:absolute;top:10cqh;bottom:17cqh;left:0;right:0;z-index:2;display:grid;
 grid-template-columns:1fr 27.5cqw;gap:1.8cqw;padding:0 2.4cqw}
.bs-holo{position:relative;min-width:0}

/* the intel rail */
.bs-rail{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:1.8cqh;min-height:0}
.bs-panel{background:rgba(255,255,255,.045);border:1px solid var(--stroke);border-radius:1.1cqw;
 padding:1.8cqh 1.2cqw;backdrop-filter:blur(10px);min-height:0;overflow:hidden;
 transition:transform .2s var(--ease),border-color .2s ease}
.bs-panel:hover{transform:translateY(-2px);border-color:var(--stroke2)}
.bs-panel h3{font-size:.92cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--txt2);font-weight:600;
 margin-bottom:1.4cqh;display:flex;justify-content:space-between;align-items:center;gap:1cqw}
.bs-area{display:grid;grid-template-columns:auto minmax(0,1fr) 8.5cqw auto;align-items:center;gap:.8cqw;width:100%;
 padding:.9cqh .5cqw;background:none;border:0;color:var(--txt);cursor:pointer;border-radius:.6cqw;
 font-size:1cqw;text-align:left;font-family:inherit;transition:background .18s ease,transform .18s var(--ease)}
.bs-area:hover{background:rgba(255,255,255,.05);transform:translateX(.25cqw)}
.bs-area:active{transform:scale(.98)}
.ba-dot{width:.7cqw;height:.7cqw;border-radius:.24cqw;flex:none}
/* The five pillars read whole on the wall: wrap to two lines, never ellipsize. */
.ba-name{color:var(--txt2);font-size:.92cqw;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ba-bar{height:.45cqw;background:rgba(255,255,255,.08);border-radius:1cqw;overflow:hidden}
.ba-bar i{display:block;height:100%;border-radius:1cqw}
.ba-pct{font-family:'Sora';font-weight:700;font-size:1cqw;min-width:2.7cqw;text-align:right;font-variant-numeric:tabular-nums}
.bs-mixbar{display:flex;height:.95cqw;border-radius:1cqw;overflow:hidden;gap:2px;margin-bottom:1.4cqh}
.bs-mixbar i{display:block;height:100%}
.bs-mixleg{display:flex;flex-wrap:wrap;gap:.7cqh 1.2cqw;font-size:.92cqw;color:var(--txt2)}
.bs-mixleg span{display:inline-flex;align-items:center;gap:.4cqw}
.bs-mixleg i{width:.55cqw;height:.55cqw;border-radius:50%}
.bs-mixleg b{color:var(--txt);font-variant-numeric:tabular-nums}
.bs-riskp{display:flex;flex-direction:column}
.bs-riskn{color:var(--amber);letter-spacing:.02em;text-transform:none;font-size:.9cqw;font-weight:600}
.bs-risks{display:flex;flex-direction:column;gap:.5cqh;overflow:auto;min-height:0;margin-right:-.4cqw;padding-right:.4cqw}
.bs-riskrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.9cqw;align-items:center;
 padding:.9cqh .7cqw;border-radius:.6cqw;border:1px solid transparent;background:none;color:var(--txt);
 cursor:pointer;font-size:.95cqw;text-align:left;font-family:inherit;
 transition:background .18s ease,border-color .18s ease,transform .18s var(--ease)}
.bs-riskrow b{font-family:'Sora';font-size:.98cqw}
.br-obj{color:var(--txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-flag{font-weight:600;white-space:nowrap}
.br-lead{color:var(--txt3);white-space:nowrap}
.bs-riskrow:hover{background:rgba(255,255,255,.05);transform:translateX(.25cqw)}
.bs-riskrow:active{transform:scale(.99)}
.bs-riskrow.active{background:rgba(246,197,68,.09);border-color:rgba(246,197,68,.35)}
.bs-clear{color:var(--good);font-size:1cqw;line-height:1.6}

/* outcome band */
.bs-band{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);
 gap:1.2cqw;padding:0 2.4cqw 2.6cqh;align-items:end}
.bs-stat{background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:.95cqw;
 padding:1.6cqh 1.2cqw;transition:transform .2s var(--ease),border-color .2s ease}
.bs-stat:hover{transform:translateY(-3px);border-color:var(--stroke2)}
.bs-stat b{display:block;font-family:'Sora';font-weight:700;font-size:2.3cqw;line-height:1.05;color:var(--txt)}
.bs-stat b i{font-style:normal;font-size:1.05cqw;color:var(--txt3);font-weight:600}
.bs-stat>span{display:block;font-size:.85cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-top:.8cqh}
.bs-stat.warn{border-color:rgba(246,197,68,.4);background:rgba(246,197,68,.06)}
.bs-stat.warn b{color:var(--amber)}

/* the spotlight lower third */
.bs-spot{position:absolute;left:.4cqw;right:.4cqw;bottom:.4cqh;z-index:3;pointer-events:none}
.sp-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:1.6cqw;
 background:rgba(8,11,22,.8);border:1px solid var(--stroke2);border-left:.28cqw solid var(--amber);
 border-radius:.85cqw;padding:1.4cqh 1.1cqw;backdrop-filter:blur(12px)}
.sp-eyebrow{grid-column:1;grid-row:1;font-size:.76cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.sp-card b{grid-column:1;grid-row:2;font-family:'Sora';font-size:1.65cqw;white-space:nowrap}
.sp-card b em{font-style:normal;color:var(--txt2);font-size:1.05cqw;margin-left:.5cqw}
.sp-obj{grid-column:2;grid-row:1/3;font-size:.98cqw;color:var(--txt);line-height:1.45;align-self:center}
.sp-why{grid-column:3;grid-row:1;font-size:.9cqw;color:var(--txt2);text-align:right;white-space:nowrap}
.sp-lead{grid-column:3;grid-row:2;font-size:.9cqw;color:var(--txt3);text-align:right;white-space:nowrap}
.sp-card.clear{border-left-color:var(--good)}
.sp-card.clear{grid-template-columns:auto minmax(0,1fr)}
.sp-card.clear b{grid-column:1;grid-row:1;color:var(--good);font-size:1.35cqw}
.sp-card.clear span{grid-column:2;grid-row:1;font-size:.95cqw;color:var(--txt2);align-self:center}

/* motion: entrance choreography, the drawing arcs, the ping, the drift.
   All additive under the reduced-motion gate. */
@media (prefers-reduced-motion: no-preference){
  .bs-stars{animation:bsDrift 34s linear infinite alternate}
  .bs-meta{animation:bsRise .7s var(--ease) both}
  .bs-tilt{animation:bsRise .8s var(--ease) .15s both}
  .bs-core{animation:bsFade .8s var(--ease) .55s both}
  .bs-panel{animation:bsRise .7s var(--ease) var(--pd,.4s) both}
  .bs-spot{animation:bsRise .6s var(--ease) 1.05s both}
  .bs-band .bs-stat{animation:bsRise .7s var(--ease) both}
  .bs-band .bs-stat:nth-child(1){animation-delay:.62s}
  .bs-band .bs-stat:nth-child(2){animation-delay:.68s}
  .bs-band .bs-stat:nth-child(3){animation-delay:.74s}
  .bs-band .bs-stat:nth-child(4){animation-delay:.8s}
  .bs-band .bs-stat:nth-child(5){animation-delay:.86s}
  .bs-arc{stroke-dasharray:1;stroke-dashoffset:1;animation:bsArc 1.1s var(--ease) both}
  .bs-node{animation:bsFade .5s var(--ease) both}
  .bs-halo{animation:bsSpin 14s linear infinite}
  .bs-node.lit .bs-ping{animation:bsPing 1.8s var(--ease) infinite}
  .bs-dot::after{animation:bsBreathe 2.4s var(--ease) infinite}
  .sp-card{animation:spIn .5s var(--ease) both}
}
@keyframes bsDrift{from{transform:translate3d(-1.1%,-.7%,0)}to{transform:translate3d(1.1%,.9%,0)}}
@keyframes bsRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bsFade{from{opacity:0}to{opacity:1}}
@keyframes bsArc{to{stroke-dashoffset:0}}
@keyframes bsSpin{to{transform:rotate(360deg)}}
@keyframes bsPing{0%{opacity:.9;transform:scale(.55)}70%{opacity:0;transform:scale(2.3)}100%{opacity:0}}
@keyframes bsBreathe{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes spIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* small screens: the stage simply scales with its width; give it room */
@media (max-width: 900px){
  .brd-stage{width:100%}
}

/* ---- design-review fixes, 2026-08-17 ---- */

/* Under mobile device emulation a block-level grid can resolve its auto width to
   zero, which collapsed the update composer's status select to the chevron.
   width:100% resolves identically to a healthy auto here (box-sizing is global). */
.formrow{width:100%}

/* Anchors styled as buttons must not carry the link underline (Open report). */
a.btn{text-decoration:none}

/* A realtime write re-renders the Boardroom in place: entrances stay landed,
   arcs stay drawn, and only live motion (comet, ping, spotlight card) runs. */
#pages.noanim .bs-meta,#pages.noanim .bs-tilt,#pages.noanim .bs-core,#pages.noanim .bs-panel,
#pages.noanim .bs-spot,#pages.noanim .bs-band .bs-stat{animation:none;opacity:1;transform:none}

/* KPI strip on phones: the suffix is the discriminating part, so show K01-style
   short codes instead of seven identical "A008-…" truncations. */
.kc-short{display:none}
@media (max-width: 600px){
  .kc-full{display:none}
  .kc-short{display:inline}
  /* The indicator sky and the commitment flow render below the readable floor at
     this width and both have full text equivalents; the timeline, radar and orbit
     stay. */
  .constcard,.flowcard{display:none}
}

/* Topbar icon buttons meet the 44px touch floor on coarse pointers. */
@media (pointer: coarse){
  .bell{min-width:44px;min-height:44px}
}

/* ============================================================
   Funding module: the counterfactual and the applicant lifecycle.
   Same tokens as the rest of the system. Two new semantic roles:
   --blue is money that was awarded, --amber is work the panel judged
   fundable that the budget never reached. That pairing is the whole
   argument, so it is used consistently and nowhere else.
   ============================================================ */
.floading{padding:34px 4px;color:var(--txt3);font-size:13px}

.modelled{border:1px solid rgba(255,196,75,.32);background:rgba(255,196,75,.07);color:var(--txt2);
 border-radius:14px;padding:13px 16px;font-size:12.5px;line-height:1.6;margin-bottom:18px}
.modelled b{color:var(--gold-soft)}

/* hero */
.fhero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
.fh-lab{font-family:'Sora';font-size:11.5px;text-transform:uppercase;letter-spacing:1.5px;color:var(--txt2)}
.fh-fig{font-family:'Sora';font-weight:700;font-size:82px;line-height:1;letter-spacing:-3px;margin:10px 0 2px;
 color:var(--amber);font-variant-numeric:tabular-nums;text-shadow:0 0 46px rgba(246,197,68,.28)}
.fh-sub{font-size:15px;line-height:1.6;color:var(--txt);max-width:44ch}
.fh-sub b{color:var(--gold-soft)}
.fh-note{font-size:12.5px;line-height:1.6;color:var(--txt3);max-width:46ch;margin-top:10px}
.fhero-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ftile{background:var(--panel2);border:1px solid var(--stroke);border-radius:15px;padding:14px 15px}
.ft-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt3)}
.ft-val{font-family:'Sora';font-weight:600;font-size:23px;margin-top:7px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.ft-sub{font-size:11.5px;color:var(--txt3);margin-top:5px}
@media(max-width:900px){.fhero{grid-template-columns:1fr}.fh-fig{font-size:62px}}

/* the cut line */
.cutlegend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lg{font-size:11.5px;padding:5px 11px;border-radius:20px;border:1px solid var(--stroke2);color:var(--txt2);
 display:inline-flex;align-items:center;gap:7px}
.lg::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--txt3)}
.lg-fund::before{background:var(--blue)}
.lg-gap::before{background:var(--amber)}
.lg-under::before{background:var(--grey)}
.lg-inel::before{background:var(--violet)}
.cutscroll{position:relative}
.cutsvg{width:100%;height:320px;display:block;overflow:visible}
.cgrid{stroke:var(--stroke);stroke-width:1}
.cax{fill:var(--txt3);font-size:11px;font-family:'Inter',sans-serif}
.cbar{transform-box:fill-box;transform-origin:bottom;animation:cgrow .6s var(--ease) both;animation-delay:var(--d,0ms)}
.cbar:hover{opacity:1;filter:brightness(1.25)}
@keyframes cgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* The band between the cut line and the quality bar is the finding, so it is
   the one thing on the page allowed to keep moving. */
.cband{fill:var(--amber);opacity:.1;animation:cbreathe 24s var(--glide) infinite}
@keyframes cbreathe{0%,100%{opacity:.08}50%{opacity:.17}}
.crule{stroke-width:1.6}
.c-thr{stroke:var(--txt2);stroke-dasharray:6 5}
.c-cut{stroke:var(--amber);animation:csweep 1.1s var(--ease) both;animation-delay:.5s}
@keyframes csweep{from{transform:translateY(-26px);opacity:0}to{transform:translateY(0);opacity:1}}
.cutlabels{position:absolute;inset:0;pointer-events:none}
/* The two rules can sit a couple of points apart, so their labels are pinned to
   opposite ends of the plot and can never stack on one another. */
.cl{position:absolute;transform:translateY(-50%);font-size:11px;letter-spacing:.2px;
 padding:3px 9px;border-radius:8px;white-space:nowrap;background:var(--ink);border:1px solid var(--stroke2)}
.cl-thr{left:52px;color:var(--txt2)}
.cl-cut{right:0;color:var(--gold-soft);border-color:rgba(246,197,68,.4)}
.cutread{margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--txt2)}
.cutread b{color:var(--txt)}
/* On a phone the plot is narrow enough that a label pinned left and one pinned
   right still meet in the middle, so the two are separated vertically instead:
   the cut line sits above its rule, the quality bar below its own. */
@media(max-width:700px){
  .cutsvg{height:240px}
  .cl{font-size:10px;padding:2px 7px}
  .cl-tail{display:none}
  .cl-thr{left:38px;transform:translateY(10%)}
  .cl-cut{transform:translateY(-110%)}
}

/* ledger */
.linkish{background:none;border:none;padding:0;font:inherit;color:var(--txt);cursor:pointer;text-align:left;
 border-bottom:1px solid transparent;min-height:24px}
.linkish:hover{color:var(--blue-soft);border-bottom-color:var(--blue)}
.tsub{font-size:11px;color:var(--txt3);margin-top:3px}
.tnum{font-variant-numeric:tabular-nums;white-space:nowrap}
.press{font-variant-numeric:tabular-nums;padding:3px 8px;border-radius:7px;background:var(--panel2);color:var(--txt2)}
.press.hi{background:rgba(246,197,68,.14);color:var(--gold-soft)}
.press.lo{background:rgba(52,224,161,.12);color:var(--good)}
.gapfig{color:var(--gold-soft)}
.row-clear td{opacity:.62}

/* undersubscribed */
.underrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.undercard{background:var(--panel2);border:1px solid var(--stroke);border-radius:15px;padding:15px}
.uc-name{font-family:'Sora';font-weight:600;font-size:14px;letter-spacing:-.2px}
.uc-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.07);margin:12px 0 9px;overflow:hidden}
.uc-bar span{display:block;height:100%;border-radius:5px;background:var(--good);
 animation:ucfill 1s var(--ease) both;transform-origin:left}
@keyframes ucfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.uc-fig{font-size:12.5px;color:var(--txt2);font-variant-numeric:tabular-nums}
.uc-sub{font-size:11px;color:var(--txt3);margin-top:4px}

/* trend */
.trend{display:flex;gap:14px;align-items:flex-end;height:210px}
.tbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:7px}
.tb-val{font-size:11.5px;color:var(--gold-soft);font-variant-numeric:tabular-nums}
.tb-col{width:100%;flex:1;display:flex;align-items:flex-end;background:rgba(255,255,255,.03);border-radius:9px 9px 0 0}
.tb-col span{display:block;width:100%;border-radius:9px 9px 0 0;
 background:linear-gradient(180deg,var(--amber),rgba(246,197,68,.24));
 transform-origin:bottom;animation:cgrow .8s var(--ease) both;animation-delay:var(--d,0ms)}
.tb-cnt{font-family:'Sora';font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.tb-yr{font-size:11px;color:var(--txt3)}

/* the two callouts */
.frow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:stretch}
.frow .glass{margin-bottom:0}
.fcall{display:flex;flex-direction:column}
.fc-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.fc-half{border-radius:15px;padding:16px;border:1px solid var(--stroke);background:var(--panel2)}
.fc-bad{border-color:rgba(255,107,138,.28)}
.fc-amber{border-color:rgba(246,197,68,.3)}
.fc-fig{font-family:'Sora';font-weight:700;font-size:40px;line-height:1;letter-spacing:-1.6px;font-variant-numeric:tabular-nums}
.fc-fig.big{font-size:56px}
.fc-bad .fc-fig{color:var(--bad)}
.fc-amber .fc-fig{color:var(--amber)}
.fc-lab{font-size:13px;color:var(--txt);margin-top:8px}
.fc-note{font-size:11.5px;line-height:1.6;color:var(--txt3);margin-top:8px}
@media(max-width:900px){.frow{grid-template-columns:1fr}.frow .glass{margin-bottom:18px}
 .fc-split{grid-template-columns:1fr}}

/* lifecycle band */
.lifeband{display:flex;flex-wrap:wrap;gap:9px}
.lb{flex:1 1 var(--w);min-width:150px;background:none;border:1px solid var(--stroke);border-radius:13px;
 padding:12px 13px;text-align:left;font:inherit;color:var(--txt2);cursor:pointer}
.lb:hover{border-color:var(--stroke2);color:var(--txt)}
.lb.on{border-color:var(--c);color:var(--txt);background:var(--panel2)}
.lb-bar{display:block;height:5px;border-radius:4px;background:var(--c);opacity:.8;margin-bottom:10px;
 transform-origin:left;animation:ucfill .7s var(--ease) both}
.lb-txt{font-size:12px;line-height:1.5;display:block}
.lb-txt b{font-family:'Sora';font-size:17px;color:var(--txt);display:block;margin-bottom:2px;font-variant-numeric:tabular-nums}
.lifepill{font-size:11px;padding:4px 10px;border-radius:20px;white-space:nowrap;
 border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.lifepill.big{font-size:12.5px;padding:6px 13px}

/* retention curve */
.rwrap{overflow-x:auto}
.rsvg{width:100%;min-width:540px;height:260px;display:block}
.rline{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
 stroke-dasharray:1400;stroke-dashoffset:1400;animation:rdraw 1.5s var(--glide) both;animation-delay:var(--d,0ms)}
@keyframes rdraw{to{stroke-dashoffset:0}}
.rdot{fill:var(--c);animation:rpop .4s var(--spring) both;animation-delay:var(--d,0ms)}
@keyframes rpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.rlab{fill:var(--c);font-size:11px;font-family:'Inter',sans-serif;animation:rfade .5s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rfade{from{opacity:0}to{opacity:1}}

/* the 360 */
.p360-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.p360-mean{font-size:12px;color:var(--txt3)}
.p360-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:16px}
.p360-stat{background:var(--panel2);border:1px solid var(--stroke);border-radius:13px;padding:12px 13px}
.ps-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--txt3)}
.ps-val{font-family:'Sora';font-weight:600;font-size:18px;margin-top:6px;font-variant-numeric:tabular-nums}
.outc{font-size:11.5px;white-space:nowrap}
.outc.good{color:var(--good)}
.outc.amber{color:var(--gold-soft)}
.outc.dim{color:var(--txt3)}
.rlegend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.rl{font-size:11.5px;padding:5px 11px;border-radius:20px;border:1px solid var(--stroke);color:var(--txt3)}
.rl-mean{border-color:rgba(91,140,255,.45);color:var(--blue-soft)}
.rline.faint{stroke:var(--txt3);stroke-width:1.3;opacity:.4}
.rline.rmean{stroke:var(--blue);stroke-width:3}
.rdot.rmeandot{fill:var(--blue)}
.rval{fill:var(--txt-hi);font-size:11.5px;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;
 animation:rfade .5s var(--ease) both;animation-delay:var(--d,0ms)}
.rread{margin-top:14px;font-size:13.5px;line-height:1.65;color:var(--txt2)}
.rread b{color:var(--txt)}
/* The applicant 360 carries a six column history, which is cramped in the
   standard 600px dialog. */
.modal .box:has(.p360-head){width:880px}
@media(max-width:920px){.modal .box:has(.p360-head){width:100%}}

/* ============================================================================
 * ACCOUNTS: registration, the holding screen, and the rights ladder.
 * Added 2026-08-26 for go-live. Same tokens, same motion vocabulary: nothing here
 * introduces a new colour or a new easing curve.
 * ========================================================================== */

/* ---- the sign-in gate, now several panels wide ---- */
.gatebox{width:392px}
.gpanel{animation:rise .5s .1s var(--ease) both;text-align:left}
.gpanel .btn{width:100%;justify-content:center;margin-top:14px}
.gatebox .gpanel input,.gatebox .gpanel select{margin-bottom:0}
.gatebox #gate-form input{margin-bottom:10px}
.glinks{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.glinks .alt{margin-top:0;font-size:12.5px}
.gswitch{margin-top:18px;text-align:center;font-size:12.5px;color:var(--txt3)}
.glink{background:none;border:none;padding:0;font:inherit;color:var(--blue);cursor:pointer;font-weight:600}
.glink:hover{color:var(--blue-soft);text-decoration:underline}
.freq{font-size:11.5px;color:var(--txt3);text-align:center;margin-bottom:4px}
label.fl .opt{text-transform:none;letter-spacing:0;color:var(--txt3);font-weight:400;font-size:10.5px}
.gnote{margin-top:14px;font-size:12px;line-height:1.6;color:var(--txt3);
 border-left:2px solid rgba(91,140,255,.45);padding-left:11px}

/* Password strength: the one place on this screen where something moves as you type. */
.pwbar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
.pwbar>span{display:block;height:100%;width:100%;border-radius:3px;background:var(--bad);
 transform:scaleX(0);transform-origin:left center;
 transition:transform .35s var(--ease),background .35s var(--ease)}
.pwbar.ok>span{background:var(--amber)}
.pwbar.good>span{background:var(--good)}
.pwhint{font-size:11.5px;color:var(--txt3);margin-top:6px}
.pwhint.bad{color:var(--bad)}

.sent-mark{width:54px;height:54px;margin:6px auto 16px;border-radius:16px;display:grid;place-items:center;
 background:linear-gradient(135deg,rgba(79,139,255,.22),rgba(139,92,246,.18));border:1px solid var(--stroke2);color:var(--blue-soft)}
.sent-mark svg{width:26px;height:26px}
#gate-sent{text-align:center}
#gate-sent .alt{margin-top:18px}

/* Demo entry is a prototype affordance, not part of the live sign-in. It appears
   only on localhost or behind ?demo, so the production screen is clean. */
.demo-only{display:none}
body.demo .demo-only{display:flex}
body.demo .demo-split{display:flex}

/* ---- the holding screen: confirmed, not yet approved ---- */
.holdbox{width:430px;text-align:center}
.holdbox h1{margin-top:6px}
.hold-mark{display:flex;justify-content:center;gap:7px;margin:0 0 20px}
.hold-mark span{width:9px;height:9px;border-radius:50%;background:var(--amber);opacity:.3;
 animation:holdpulse 1.9s var(--ease) infinite}
.hold-mark span:nth-child(2){animation-delay:.28s}
.hold-mark span:nth-child(3){animation-delay:.56s}
@keyframes holdpulse{0%,100%{opacity:.25;transform:scale(.82)}45%{opacity:1;transform:scale(1)}}
.holdcard{text-align:left;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;
 padding:16px 18px;margin:22px 0 20px;font-size:13px;line-height:1.65;color:var(--txt2)}
.holdcard dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin-top:2px}
.holdcard dt{color:var(--txt3);font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;padding-top:2px}
.holdcard dd{color:var(--txt);font-size:13px}
.holdbox .btn{width:100%;justify-content:center}
.holdbox .alt{display:block;margin:14px auto 0;font-size:12.5px;color:var(--txt3);cursor:pointer;background:none;border:none;font-family:inherit}
.holdbox .alt:hover{color:var(--txt2)}

/* ---- People and access ---- */
.peoplegrid{display:grid;grid-template-columns:minmax(0,306px) minmax(0,1fr);gap:16px;margin-bottom:18px}
@media(max-width:1040px){.peoplegrid{grid-template-columns:1fr}}

.queue{display:flex;flex-direction:column;gap:10px}
.qcard{border:1px solid rgba(246,197,68,.34);background:rgba(246,197,68,.06);border-radius:16px;padding:14px 15px}
.qcard .qtop{display:flex;align-items:center;gap:11px}
.qcard .qav{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
 font-family:'Sora';font-weight:700;font-size:12px;color:var(--ink);background:linear-gradient(135deg,var(--amber),var(--gold-soft))}
.qcard .qnm{font-weight:600;font-size:14px;font-family:'Sora';letter-spacing:-.2px}
.qcard .qmeta{font-size:11.5px;color:var(--txt2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard .qwhen{margin-left:auto;font-size:11px;color:var(--txt3);white-space:nowrap}
.qcard .qrow{display:flex;gap:8px;margin-top:12px;align-items:center}
.qcard select{padding:8px 30px 8px 11px;font-size:12.5px;width:auto;flex:1;min-width:0}
.qcard .btn.small{flex:none}

.rostersearch{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.rostersearch input{flex:1;padding:9px 12px;font-size:13px}
.rostersearch select{width:auto;padding:9px 30px 9px 12px;font-size:12.5px}

.ptab td{vertical-align:middle}
.ptab .pname{display:flex;align-items:center;gap:10px;min-width:0}
.ptab .pav{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
 font-family:'Sora';font-weight:700;font-size:10.5px;color:var(--txt-bright2);
 background:linear-gradient(135deg,rgba(79,139,255,.42),rgba(139,92,246,.36));border:1px solid var(--stroke2)}
.ptab .pn{min-width:0}
.ptab .pn b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptab .pn i{font-style:normal;display:block;font-size:11px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.ptab select{padding:6px 26px 6px 9px;font-size:12px;width:auto}
.ptab td,.ptab th{padding-left:9px;padding-right:9px}
.ptab .never{color:var(--txt3)}
.dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}
.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---- the rights ladder: the signature element ----
   Roles read left to right by reach, each column headed by how much of the system
   it opens. Selecting or hovering a role lights its column top to bottom, so what a
   role grants is visible before it is granted. */
.ladder{overflow-x:auto;border-radius:14px;border:1px solid var(--stroke)}
.ladder table{min-width:640px}
.ladder th,.ladder td{padding:0}
.ladder .rlabel{text-align:left;padding:11px 16px;font-size:13px;color:var(--txt2);font-weight:400;
 text-transform:none;letter-spacing:0;position:static;background:none;line-height:1.4}
.ladder tbody tr:hover .rlabel{color:var(--txt)}
.ladder .grouprow td{padding:16px 16px 7px;font-family:'Sora';font-size:10.5px;text-transform:uppercase;
 letter-spacing:1.3px;color:var(--txt3);font-weight:600}
.ladder tbody tr:hover td{background:none}

.rolehead{position:sticky;top:0;z-index:2;background:var(--ink2);backdrop-filter:blur(8px);
 padding:13px 8px 11px;text-align:center;vertical-align:bottom;cursor:pointer;
 border-bottom:1px solid var(--stroke);transition:background .25s var(--ease)}
.rolehead .rname{font-family:'Sora';font-size:11.5px;font-weight:600;color:var(--txt2);letter-spacing:.2px;
 line-height:1.25;text-transform:none;display:block;transition:color .25s var(--ease)}
.rolehead .reach{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.13);margin:9px 8px 6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.rolehead .reach i{display:block;height:100%;width:100%;border-radius:4px;background:var(--grad);box-shadow:0 0 12px rgba(91,140,255,.45);
 transform-origin:left center;transform:scaleX(var(--f,0));
 animation:reachgrow 1s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + 140ms)}
@keyframes reachgrow{from{transform:scaleX(0)}to{transform:scaleX(var(--f,0))}}
@media(prefers-reduced-motion:reduce){.rolehead .reach i{animation:none}}
.rolehead .rcount{display:block;font-size:10.5px;color:var(--txt2);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.rolehead.lit,.rolehead:hover{background:linear-gradient(180deg,rgba(91,140,255,.2),rgba(139,92,246,.09))}
.rolehead.lit .rname,.rolehead:hover .rname{color:var(--txt-bright)}

.cell{text-align:center;padding:11px 8px;border-left:1px solid rgba(255,255,255,.04);transition:background .25s var(--ease)}
.cell.lit{background:rgba(91,140,255,.11)}
.cell .tick{display:inline-block;width:17px;height:17px;color:var(--good)}
.cell .part{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);
 box-shadow:0 0 0 4px rgba(246,197,68,.16)}
.cell .no{display:inline-block;width:11px;height:1.5px;border-radius:2px;background:rgba(255,255,255,.16)}
.ladder tbody tr:hover .cell{background:rgba(255,255,255,.025)}
.ladder tbody tr:hover .cell.lit{background:rgba(91,140,255,.15)}

.ladderfoot{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:14px;font-size:12px;color:var(--txt3)}
.ladderfoot>span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ladderfoot .tick{width:14px;height:14px;flex:none}
.ladderfoot .part,.ladderfoot .no{flex:none}
.ladderfoot .part{box-shadow:0 0 0 3px rgba(246,197,68,.16)}
.rolecard{margin-top:14px;border:1px solid var(--stroke);background:var(--panel);border-radius:14px;padding:14px 16px;
 font-size:13px;line-height:1.65;color:var(--txt2)}
.rolecard b{color:var(--txt);font-family:'Sora';font-weight:600}

/* ---- registration policy ---- */
.policyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.policyrow select{width:auto;min-width:230px}
.domchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.domchip{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--stroke);
 border-radius:30px;padding:5px 12px;font-size:12px;font-family:'Sora'}
.domchip button{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:15px;line-height:1;padding:0;font-family:inherit}
.domchip button:hover{color:var(--bad)}
.peoplesum{display:flex;gap:10px;flex-wrap:wrap}
.psum{flex:1;min-width:96px;border:1px solid var(--stroke);background:var(--panel2);border-radius:14px;padding:13px 14px}
.psum b{display:block;font-family:'Sora';font-size:26px;font-weight:300;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.psum span{display:block;font-size:11px;color:var(--txt3);margin-top:6px;text-transform:uppercase;letter-spacing:.7px}
.psum.active b{color:var(--good)}
.psum.pending b{color:var(--amber)}
.psum.suspended b{color:var(--bad)}

/* ============================================================================
 * BOARDROOM: the commitment wall.
 * Replaced the tilted ring 2026-08-27. Everything sizes in container units, so
 * the stage holds at any 16:9 output from a laptop to a boardroom television.
 * ========================================================================== */
.bw-head{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;
 gap:2cqw;padding:0 .4cqw 1.2cqh}
.bw-read{display:flex;align-items:flex-end;gap:2.6cqw}
.bw-fig b{display:block;font-family:'Sora';font-weight:700;font-size:4.4cqw;line-height:.92;color:var(--txt);
 font-variant-numeric:tabular-nums;text-shadow:0 0 4cqw rgba(91,140,255,.42)}
.bw-fig i{display:block;font-style:normal;font-size:.86cqw;letter-spacing:.26em;text-transform:uppercase;
 color:var(--txt2);margin-top:.9cqh}
/* The expectation is the comparison, so it is quieter than the figure it judges
   and amber only when the delivered figure is behind it. */
.bw-fig.exp b{font-size:2.6cqw;color:var(--amber);text-shadow:0 0 3cqw rgba(246,197,68,.3)}
.bw-fig.exp i{color:var(--txt3)}
.bw-ttl{text-align:right;padding-top:.6cqh;max-width:31cqw}
.bw-ttl b{display:block;font-family:'Sora';font-weight:600;font-size:1.15cqw;letter-spacing:.02em;color:var(--txt-hi)}
.bw-ttl i{display:block;font-style:normal;font-size:.85cqw;line-height:1.5;color:var(--txt3);margin-top:.6cqh}

.bw-plot{position:absolute;left:.4cqw;right:.4cqw;top:11cqh;bottom:15.5cqh;z-index:2;
}
/* The camera never tilts. A rotated plane makes the browser resample every glyph,
   and the block codes and year captions went soft the moment the scene leaned: the
   wall exists to be read across a room, so that trade is the wrong way round.
   The depth is real all the same, built by extruding each block up and to the right
   the way an isometric drawing does, which leaves every label on an untransformed
   plane and perfectly crisp. */
.bw-scene{position:relative;height:100%}
/* The ground the years stand on. A grid running back under the blocks and fading
   out, so the columns sit on a surface instead of floating on the background. */
.bw-ground{position:absolute;left:-6cqw;right:-6cqw;bottom:6.2cqh;height:8.5cqw;pointer-events:none;
 background:
  linear-gradient(to bottom,rgba(91,140,255,.16),rgba(91,140,255,0) 72%),
  repeating-linear-gradient(to right,rgba(255,255,255,.08) 0 1px,transparent 1px 3.4cqw),
  repeating-linear-gradient(to bottom,rgba(255,255,255,.08) 0 1px,transparent 1px 1.5cqw);
 /* Faded on every edge, or the grid reads as a stray panel sitting behind the
    columns rather than as the ground they are standing on. */
 -webkit-mask-image:radial-gradient(ellipse 62% 118% at 50% 0%, var(--white) 12%, transparent 74%);
 mask-image:radial-gradient(ellipse 62% 118% at 50% 0%, var(--white) 12%, transparent 74%)}
.bw-years{position:relative;display:flex;align-items:flex-end;gap:2.3cqw;height:100%}
.bw-year{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
 transition:transform .5s var(--ease)}
.bw-load{text-align:center;margin-bottom:2.6cqh}
.bw-load b{display:block;font-family:'Sora';font-weight:700;font-size:1.9cqw;line-height:1;color:var(--txt-hi);
 font-variant-numeric:tabular-nums}
.bw-load b.none{color:var(--txt3);opacity:.45}
.bw-load i{display:block;font-style:normal;font-size:.8cqw;letter-spacing:.12em;text-transform:uppercase;
 color:var(--txt2);margin-top:.45cqh}

.bw-stack{display:flex;flex-direction:column;justify-content:flex-end;gap:1.1cqh;min-height:0;
 transform-origin:bottom center;animation:bwrise .9s var(--ease) both}
@keyframes bwrise{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.noanim .bw-stack{animation:none}
.bw-none{flex:1}

/* A block is an action. Hollow means its window has not opened: not late, not begun. */
/* --z is the extrusion depth. The front face stays square to the viewer, so the
   label and the fill read exactly as they did flat; the top and side faces are what
   give the block its solidity. overflow lives on the face, never on the block: an
   overflow other than visible flattens a preserve-3d subtree and the faces vanish. */
.bw-seg{position:relative;flex:1 1 0;min-height:1.4cqh;cursor:pointer;padding:0;border:none;background:none;
 --z:1.32cqw;font-family:inherit;text-align:left;color:var(--txt2);
 animation:bwseg .55s var(--ease) both;animation-delay:var(--d)}
.bw-face{position:absolute;inset:0;border-radius:.42cqw;overflow:hidden;
 display:flex;align-items:center;justify-content:space-between;gap:.4cqw;padding:0 .62cqw;
 background:color-mix(in srgb, var(--c) 20%, transparent);
 border:1px solid color-mix(in srgb, var(--c) 62%, transparent)}
/* The extrusion runs up and to the right, so the eye reads the block from slightly
   below and left of it. Light falls from above: the top face is the bright one, the
   right face is in shade. Both are skewed parallelograms, never rotated planes.
   Only the topmost block in a column is capped, because every other one has a block
   sitting on it and its top face would be buried. */
.bw-top{display:none;position:absolute;left:0;right:0;bottom:100%;height:var(--z);
 transform-origin:bottom left;transform:skewX(-45deg);
 background:linear-gradient(to bottom,color-mix(in srgb, var(--c) 62%, transparent),color-mix(in srgb, var(--c) 34%, transparent));
 border-top:1px solid color-mix(in srgb, var(--c) 72%, transparent)}
.bw-seg:first-child .bw-top{display:block}
.bw-side{position:absolute;left:100%;top:0;bottom:0;width:var(--z);
 transform-origin:left bottom;transform:skewY(-45deg);
 background:linear-gradient(to right,color-mix(in srgb, var(--c) 34%, transparent),rgba(4,5,11,.55));
 border-right:1px solid color-mix(in srgb, var(--c) 30%, transparent)}
@keyframes bwseg{from{opacity:0;transform:translateY(.8cqh)}to{opacity:1;transform:none}}
.noanim .bw-seg{animation:none}
.bw-seg.live .bw-face{background:color-mix(in srgb, var(--c) 30%, transparent);border-color:var(--c);}
.bw-seg.live{color:var(--txt)}
.bw-seg.live .bw-top{background:linear-gradient(to bottom,color-mix(in srgb, var(--c) 88%, transparent),color-mix(in srgb, var(--c) 52%, transparent))}
.bw-seg.live .bw-side{background:linear-gradient(to right,color-mix(in srgb, var(--c) 52%, transparent),rgba(4,5,11,.5))}
/* The fill is real progress, drawn behind the label so the label never moves. */
.bw-fill{position:absolute;left:0;top:0;bottom:0;z-index:0;border-radius:.42cqw 0 0 .42cqw;
 background:linear-gradient(90deg, color-mix(in srgb, var(--c) 78%, transparent), color-mix(in srgb, var(--c) 46%, transparent));
 transform-origin:left center;animation:bwfill 1.1s var(--ease) both;animation-delay:calc(var(--d) + .25s)}
@keyframes bwfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.noanim .bw-fill{animation:none}
.bw-code,.bw-pct{position:relative;z-index:1;font-family:'Sora';font-weight:600;font-size:.86cqw;letter-spacing:.04em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-pct{font-variant-numeric:tabular-nums;color:var(--txt-bright);opacity:.9}
.bw-seg.flagged .bw-face{border-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(246,197,68,.28)}
.bw-seg.flagged .bw-top{border-color:var(--amber)}
.bw-seg:hover{filter:brightness(1.22)}
.bw-seg:active{transform:translate(.12cqw,.12cqw)}
.bw-seg:focus-visible{outline:none}
.bw-seg:focus-visible .bw-face{outline:2px solid var(--blue);outline-offset:2px}

/* The spotlight lifts one action and the year it belongs to. */
/* The spotlight pushes the block further out of the wall along the extrusion axis,
   so it reads as lifted rather than merely brighter. */
.bw-seg.lit{color:var(--txt-bright);z-index:4;animation:bwlit 2.4s var(--ease) infinite}
.bw-seg.lit .bw-face{border-color:var(--white)}
@keyframes bwlit{0%,100%{transform:translate(-.2cqw,-.2cqw);filter:drop-shadow(0 0 1.2cqw color-mix(in srgb, var(--c) 55%, transparent))}
 50%{transform:translate(-.5cqw,-.5cqw);filter:drop-shadow(0 0 2.8cqw color-mix(in srgb, var(--c) 90%, transparent))}}
.bw-year.spot{transform:translate(-.28cqw,-.28cqw)}

/* The plinth is the floor the years stand on, and the current year is lit on it. */
.bw-plinth{height:.3cqh;margin-top:1.4cqh;border-radius:2px;background:rgba(255,255,255,.13)}
.bw-year.now .bw-plinth{background:var(--grad);box-shadow:0 0 1.6cqw rgba(91,140,255,.6);height:.42cqh}
.bw-yr{text-align:center;font-family:'Sora';font-weight:300;font-size:1.5cqw;letter-spacing:.06em;
 color:var(--txt3);margin-top:.9cqh}
.bw-year.now .bw-yr{color:var(--txt-hi);font-weight:600}
.bw-year.now .bw-load b{color:var(--txt-bright)}

.bw-undated{position:absolute;left:.4cqw;bottom:13cqh;font-size:.78cqw;color:var(--txt3);letter-spacing:.1em;
 text-transform:uppercase}
.bw-empty{display:grid;place-items:center;height:100%;color:var(--txt3);font-size:1.1cqw}

/* The wall states everything it means through position, height and fill, so with
   reduced motion it simply stands there already built. */
@media(prefers-reduced-motion:reduce){
  .bw-stack,.bw-seg,.bw-fill{animation:none}
  .bw-seg.lit{animation:none}
  .bw-year,.bw-year.spot{transition:none;transform:none}
  .bw-seg.lit{transform:none}
}

/* ============================================================================
 * BOARDROOM ACT: the five strategic areas, as a shelf with one volume open.
 * Four closed spines still carry their name, their figure and a pip per action,
 * so the whole strategy stays on screen while one part of it is being read.
 * ========================================================================== */
.brd-head-r{display:flex;align-items:center;gap:10px}
.actsw{display:inline-flex;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:3px}
.actbtn{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--txt3);
 padding:7px 14px;border-radius:9px;cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease)}
.actbtn:hover{color:var(--txt2)}
.actbtn.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 0 0 1px var(--stroke2)}
.actbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.ba-stage{position:absolute;left:.4cqw;right:.4cqw;top:11cqh;bottom:15.5cqh;z-index:2;
 display:flex;gap:.7cqw;align-items:stretch}
.ba-area{position:relative;display:flex;min-width:0;border-radius:1cqw;overflow:hidden;
 background:linear-gradient(180deg,color-mix(in srgb, var(--c) 13%, transparent),color-mix(in srgb, var(--c) 4%, transparent));
 border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
 flex:0 0 4.6cqw;contain:layout paint;will-change:flex-basis;
 transition:flex-basis .62s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.ba-area.open{flex:1 1 auto;background:linear-gradient(180deg,color-mix(in srgb, var(--c) 20%, transparent),rgba(8,11,22,.5));
 border-color:color-mix(in srgb, var(--c) 78%, transparent);
 box-shadow:0 0 3cqw color-mix(in srgb, var(--c) 22%, transparent)}

/* The spine: readable closed, and it stays put when the volume opens. */
.ba-spine{flex:0 0 4.6cqw;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
 padding:1.5cqh .35cqw;cursor:pointer;border-right:1px solid color-mix(in srgb, var(--c) 22%, transparent)}
.ba-nm{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Sora';font-weight:600;font-size:.95cqw;
 letter-spacing:.1em;color:var(--txt2);text-align:center;flex:1;display:flex;align-items:center;
 max-height:26cqh;overflow:hidden}
.ba-area.open .ba-nm{color:var(--txt-bright)}
.ba-fig{font-family:'Sora';font-weight:700;font-size:1.7cqw;line-height:1;color:var(--txt);
 font-variant-numeric:tabular-nums;margin:1cqh 0 .8cqh}
.ba-fig em{font-style:normal;font-size:.85cqw;color:var(--txt3);margin-left:.1cqw}
.ba-area.open .ba-fig{color:var(--txt-bright);text-shadow:0 0 2cqw color-mix(in srgb, var(--c) 60%, transparent)}
.ba-pips{display:flex;flex-wrap:wrap;gap:.2cqw;justify-content:center;max-width:3.4cqw}
.ba-pips i{width:.46cqw;height:.46cqw;border-radius:50%;opacity:.85}

/* The open volume. Closed ones keep the body in the layout but clipped to nothing,
   so opening is a width change rather than a rebuild. */
.ba-body{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;opacity:0;padding:1.5cqh 0;
 transition:opacity .4s var(--ease);pointer-events:none;overflow:hidden}
.ba-area.open .ba-body{opacity:1;padding:1.5cqh 1.1cqw;pointer-events:auto}
.ba-meta{display:flex;flex:none;flex-wrap:wrap;gap:.5cqh 1.5cqw;margin-bottom:1.2cqh}
.ba-meta span{font-size:.8cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.ba-meta b{font-family:'Sora';font-weight:700;font-size:1.15cqw;color:var(--txt);margin-right:.3cqw;
 font-variant-numeric:tabular-nums;letter-spacing:0}
.ba-meta .warn b{color:var(--amber)}

.ba-acts{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.5cqh}
.ba-act{flex:1 1 0;min-height:1.9cqh;display:grid;grid-template-columns:3.2cqw minmax(0,1fr) 5.4cqw 7cqw 3cqw;align-items:center;gap:.7cqw;
 padding:0 .7cqw;border-radius:.5cqw;cursor:pointer;text-align:left;font-family:inherit;
 background:rgba(255,255,255,.04);border:1px solid var(--stroke);color:var(--txt2);
 animation:baact .45s var(--ease) both}
@keyframes baact{from{opacity:0;transform:translateX(-.8cqw)}to{opacity:1;transform:none}}
.noanim .ba-act{animation:none}
.ba-act:hover{background:rgba(255,255,255,.075);border-color:var(--stroke2)}
.ba-act:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ba-code{font-family:'Sora';font-weight:700;font-size:.92cqw;color:var(--txt)}
.ba-obj{font-size:.88cqw;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-lead{font-size:.82cqw;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-track{height:.55cqh;border-radius:1cqw;background:rgba(255,255,255,.09);overflow:hidden}
.ba-track i{display:block;height:100%;border-radius:1cqw;transform-origin:left center;
 animation:bafill .9s var(--ease) both;animation-delay:.35s}
@keyframes bafill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.noanim .ba-track i{animation:none}
.ba-act .ba-pct{font-family:'Sora';font-weight:600;font-size:.88cqw;text-align:right;color:var(--txt);
 font-variant-numeric:tabular-nums}
.ba-act.flagged{border-color:rgba(246,197,68,.55);background:rgba(246,197,68,.07)}
.ba-act.lit{border-color:var(--white);background:rgba(255,255,255,.11);color:var(--txt-bright);
 animation:balit 2.4s var(--ease) infinite}
@keyframes balit{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 1.4cqw color-mix(in srgb, var(--c) 45%, transparent)}
 50%{box-shadow:0 0 0 1px var(--white),0 0 3cqw color-mix(in srgb, var(--c) 80%, transparent)}}

.ba-team{flex:none;display:flex;align-items:center;gap:.4cqw;margin-top:1.2cqh}
.ba-av{width:1.9cqw;height:1.9cqw;border-radius:50%;display:grid;place-items:center;flex:none;
 font-family:'Sora';font-weight:700;font-size:.72cqw;color:var(--txt-bright2);
 background:color-mix(in srgb, var(--c) 34%, transparent);border:1px solid color-mix(in srgb, var(--c) 55%, transparent)}
.ba-teaml{font-size:.78cqw;color:var(--txt3);margin-left:.4cqw;letter-spacing:.08em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  .ba-area{transition:none}
  .ba-act,.ba-track i,.ba-act.lit{animation:none}
}
.qmatch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:9px 11px;border-radius:11px;
 background:rgba(91,140,255,.1);border:1px solid rgba(91,140,255,.36)}
.qmatch span{flex:1;min-width:150px;font-size:12px;line-height:1.5;color:var(--txt2)}
.qmatch b{color:var(--txt)}

/* ============================================================================
   ULTRAWIDE: the Executive Chairman runs this on a 34 inch 3440x1440 (21:9).
   At a 1500px cap the plan sat in a column with roughly 970px of dead black
   either side, most of his screen. Width is not spent making rows longer, which
   only makes text harder to read. It is spent putting more of the plan beside
   itself: ledger flanks, with the strategy ring as the physical centre of the
   screen, dense reading columns either side, and the two panels that aretime
   axes breaking out to full width, the one place extra pixels improve the data
   itself rather than just the framing.
   Engages at 2100px, so every existing width is untouched.
   ========================================================================= */
@media (min-width: 2100px) {
  .main { max-width: min(3240px, 96vw); padding: 0 44px 90px }

  /* Only the Overview regrids. Every other page keeps its reading measure. */
  #pages .page.overview-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr) minmax(0, 1fr);
    grid-template-areas:
      "head     head     head"
      "brief    brief    brief"
      "cm       cm       cm"
      "metrics  ring     radar"
      "momentum sky      activity"
      "intel    sky      activity"
      "timeline timeline timeline"
      "flow     flow     flow";
    /* Cards fill their row rather than hanging from the top. With panels this
       different in height, aligning to the top left holes of 700px in a column;
       filling reads as a continuous ledger, which is what a dashboard wants. */
    align-items: stretch;
    column-gap: 22px;
    row-gap: 18px;
  }
  .page.overview-wide > .cm           { grid-area: cm }
  .page.overview-wide > .phead        { grid-area: head }
  .page.overview-wide > .aibrief      { grid-area: brief }
  .page.overview-wide > .metrics      { grid-area: metrics }
  .page.overview-wide > .momentum     { grid-area: momentum }
  .page.overview-wide > #intelcard    { grid-area: intel }
  .page.overview-wide > .ringcard     { grid-area: ring }
  .page.overview-wide > .constcard    { grid-area: sky }
  .page.overview-wide > .wide2        { grid-area: radar }
  .page.overview-wide > .activitypair { grid-area: activity }
  .page.overview-wide > .timelinecard { grid-area: timeline }
  .page.overview-wide > .flowcard     { grid-area: flow }

  /* Flank members become single-column stacks: side by side was a compromise
     for a narrow screen, and there is no longer anything to compromise about. */
  /* The KPI band becomes a vertical ledger down the flank: five generous tiles
     rather than a squat block with 600px of nothing beneath it. This is the one
     place the extra height is spent on the numbers themselves. */
  .page.overview-wide > .metrics      { grid-template-columns: 1fr; align-content: stretch }
  .page.overview-wide > .metrics > *  { min-height: 0 }
  .page.overview-wide > .activitypair { grid-template-columns: 1fr }

  /* The ring is the signature, and at 600px it was floating in a 1374px column.
     Let it grow into the centre, bounded by height so it never pushes the flanks
     off the first screen. */
  .page.overview-wide .ringcard .ring { max-width: min(880px, 100%); max-height: 66vh }
  .page.overview-wide .constcard svg  { max-height: 46vh }

  /* Risk radar and workload orbit stay side by side: stacking them made the
     right flank almost twice the height of the left, which grid then pads out
     into dead space. */
  .page.overview-wide > .wide2 { grid-template-columns: 1.5fr 1fr }
}

/* Past about 3000px the flanks would stretch beyond a comfortable measure, so
   the extra width goes to the centre, where the ring can use it. */
@media (min-width: 3000px) {
  #pages .page.overview-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: 30px;
  }
}

/* ============================================================================
   THE COMMITMENT
   The ring says what the plan is. The columns say when it comes due. The threads
   between them are the only thing on this page allowed to move continuously:
   they drift toward the years, so the plan visibly leans forward into time.
   ========================================================================= */
.cm { padding: 20px 24px 14px; overflow: hidden }
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.cm-head h2 .h3r { margin-left: 10px }
.cm-facts { display: flex; gap: 20px; font-size: 12.5px; color: var(--txt2); white-space: nowrap }
.cm-facts b { color: var(--txt); font-variant-numeric: tabular-nums; font-size: 15px; margin-right: 4px }
.cm-facts .hot b { color: var(--amber) }
.cm-svg { width: 100%; height: auto; display: block; margin-top: 6px; max-height: 62vh }

/* the ring */
.cm-arc { opacity: .85 }
.cm-alab { font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; opacity: .9 }
.cm-alab:hover { opacity: 1 }
.cm-an { fill: var(--txt3); font-size: 11px; letter-spacing: 0 }
.cm-dot { fill: var(--c); stroke: var(--bg); stroke-width: 2.5 }
.cm-node.live .cm-dot { filter: drop-shadow(0 0 8px var(--c)) }
.cm-halo { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 2.5 3.5; opacity: .9 }
.cm-node { cursor: pointer }
.cm-node:hover .cm-dot, .cm-node:focus-visible .cm-dot { r: 9.5; filter: drop-shadow(0 0 14px var(--c)) }
.cm-node:focus-visible, .cm-blk:focus-visible { outline: none }

.cm-big { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 62px; fill: var(--txt) }
.cm-cap { font-size: 11px; letter-spacing: 2.6px; fill: var(--txt2) }
.cm-cap2 { font-size: 11px; fill: var(--txt3) }

/* the threads: the one continuous motion on the page */
.cm-thread { fill: none; stroke-width: 1.1; opacity: .26; stroke-dasharray: 5 10 }
.cm-thread.flag { stroke: var(--amber); opacity: .6; stroke-width: 1.5 }
.cm-node:hover ~ .cm-threads .cm-thread { opacity: .1 }

/* the years */
.cm-colbase { stroke: var(--stroke2); stroke-width: 1.5 }
.cm-face { fill: var(--c); fill-opacity: .13; stroke: var(--c); stroke-opacity: .5; stroke-width: 1 }
.cm-side, .cm-top { fill: var(--c); fill-opacity: .2 }
.cm-top { fill-opacity: .3 }
.cm-fill { fill: var(--c); fill-opacity: .5 }
.cm-blk.live .cm-face { stroke-opacity: .95; fill-opacity: .2 }
.cm-blk.flag .cm-face { stroke: var(--amber); stroke-opacity: 1; stroke-width: 1.6 }
.cm-code { fill: var(--txt); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .4px }
.cm-blk:not(.live) .cm-code { fill: var(--txt2) }
.cm-pct { fill: var(--txt); font-size: 12px; font-variant-numeric: tabular-nums }
.cm-blk { cursor: pointer }
.cm-blk:hover .cm-face { fill-opacity: .3; stroke-opacity: 1 }
.cm-yn { fill: var(--txt); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums }
.cm-ys { fill: var(--txt3); font-size: 11px; letter-spacing: .6px }
.cm-yr { fill: var(--txt3); font-size: 21px; letter-spacing: 3px; font-family: 'Sora', sans-serif; font-weight: 300 }

.cm-foot { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--stroke); font-size: 12.5px; color: var(--txt2) }

/* ---- motion: entrance choreography, then one ambient layer ---- */
@media (prefers-reduced-motion: no-preference) {
  .cm-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cmDraw 1.1s var(--glide) forwards; animation-delay: var(--d) }
  .cm-alab, .cm-centre { animation: cmFade .7s var(--ease) backwards; animation-delay: var(--d, .4s) }
  .cm-node { animation: cmPop .5s var(--spring) backwards; animation-delay: var(--d); transform-origin: center }
  .cm-thread { stroke-dashoffset: 0; animation: cmFlow 2.6s linear infinite, cmFade .8s var(--ease) backwards;
    animation-delay: 0s, var(--d) }
  .cm-blk { animation: cmRise .6s var(--glide) backwards; animation-delay: var(--d) }
  .cm-col text { animation: cmFade .7s var(--ease) backwards; animation-delay: var(--d) }
  .cm-blk.flag .cm-face { animation: cmFlagPulse 3.2s var(--ease) infinite }
  .cm-aura { animation: cmBreathe 24s var(--ease) infinite }
}
@keyframes cmDraw { to { stroke-dashoffset: 0 } }
@keyframes cmFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cmPop { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: scale(1) } }
@keyframes cmRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes cmFlow { to { stroke-dashoffset: -30 } }
@keyframes cmFlagPulse { 0%, 100% { stroke-opacity: .55 } 50% { stroke-opacity: 1 } }
@keyframes cmBreathe { 0%, 100% { opacity: .6 } 50% { opacity: 1 } }
#pages.noanim .cm-arc, #pages.noanim .cm-node, #pages.noanim .cm-blk,
#pages.noanim .cm-alab, #pages.noanim .cm-centre, #pages.noanim .cm-col text { animation: none }

/* It needs width to mean anything: the ring and five year columns cannot share a
   phone. Below this the Overview already answers the same question in text. */
@media (max-width: 1180px) { .cm { display: none } }

/* ---- The Commitment: hover, and the cross-highlight between its two halves ----
   Asking about one thing should not delete the rest of the plan. Everything not
   asked about recedes to a legible ghost, so the shape stays readable behind the
   answer. This is the only place on the page where hovering changes more than
   the thing under the cursor, and that is deliberate: the two halves are one
   object, and the hover is what proves it. */
.cmwrap { position: relative }
.cm-alab, .cm-arc { cursor: pointer }
.cm-alab:focus-visible, .cm-arc:focus-visible { outline: none }
.cm-alab:focus-visible { text-decoration: underline }

.cm.focusing .cm-arc:not(.lit)    { opacity: .12 }
.cm.focusing .cm-alab:not(.lit)   { opacity: .18 }
.cm.focusing .cm-node:not(.lit)   { opacity: .16 }
.cm.focusing .cm-thread:not(.lit) { opacity: .05 }
.cm.focusing .cm-blk:not(.lit)    { opacity: .2 }

.cm.focusing .cm-thread.lit { opacity: .95; stroke-width: 2; stroke-dasharray: none }
.cm.focusing .cm-arc.lit    { stroke-width: 14 }
.cm.focusing .cm-blk.lit .cm-face { fill-opacity: .34; stroke-opacity: 1 }
.cm.focusing .cm-node.lit .cm-dot { r: 9.5 }
.cm.focusing .cm-alab.lit   { opacity: 1 }

/* One transition table for the whole cross-highlight, so it moves as one thing. */
.cm-arc, .cm-alab, .cm-node, .cm-thread, .cm-blk, .cm-face, .cm-dot {
  transition: opacity .22s var(--ease), stroke-width .22s var(--ease),
              fill-opacity .22s var(--ease), stroke-opacity .22s var(--ease),
              r .22s var(--spring);
}
@media (prefers-reduced-motion: reduce) {
  .cm-arc, .cm-alab, .cm-node, .cm-thread, .cm-blk, .cm-face, .cm-dot { transition-duration: 1ms }
}