/* Jawda V6 design system: cinematic dark hero, light operational pages. */
:root{
  --navy-950:#050B18; --navy-900:#0A1630; --navy-800:#0F2A4A; --navy-700:#1D4472; --navy-500:#3D6BA3;
  --gold:#C9A227; --gold-2:#E8CF7A; --gold-soft:#F6EED3;
  --cyan:#5FD4F2; --cyan-soft:#DDF6FC;
  --page:#F3F5F9; --card:#FFFFFF; --line:rgba(15,42,74,.09); --line-2:rgba(15,42,74,.16);
  --ink:#0B1B2E; --ink-2:#4A5568; --muted:#8A94A6; --grid:#E6E9EF;
  --s1:#2A78D6; --s2:#EB6834;
  --good:#0CA30C; --warn:#FAB219; --serious:#EC835A; --crit:#D03B3B;
  --r:18px; --shadow:0 1px 2px rgba(15,42,74,.05),0 8px 28px rgba(15,42,74,.07);
  --font:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ===================== HERO ===================== */
.landing{background:var(--navy-950);color:#fff}
.hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero-fallback{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(ellipse 60% 22% at 50% 19%,rgba(255,244,214,.55),transparent 60%),
  radial-gradient(ellipse 90% 40% at 50% 16%,rgba(95,212,242,.16),transparent 70%),
  radial-gradient(ellipse 120% 60% at 50% 120%,#0A1630,transparent 70%),var(--navy-950)}
.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.hero-vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 50%,rgba(5,11,24,.75))}

.hnav{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(16px,4vw,48px);gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold),var(--gold-2));color:var(--navy-900);font-weight:800;font-size:22px;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 30px rgba(201,162,39,.35)}
.brand b{display:block;font-size:17px;line-height:1.2}.brand small{opacity:.65;font-size:12px}
.logo-in{animation:logoIn 1.1s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:translateY(-8px) scale(.82);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hnav-links{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.hnav-links button{all:unset;cursor:pointer;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.78);transition:background .25s,color .25s}
.hnav-links button:hover{background:rgba(255,255,255,.1);color:#fff}

.hero-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(70px,13vh,140px) 16px 0}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(5,11,24,.62);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(5,11,24,.4)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hero h1{margin:20px 0 0;font-size:clamp(30px,5.4vw,66px);font-weight:800;line-height:1.28;letter-spacing:-.5px;max-width:1000px}
.hero h1 .ln{display:block}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .12em}
.w>span{display:inline-block;transform:translateY(105%);opacity:0;filter:blur(10px);animation:wordIn .95s var(--ease) forwards;animation-delay:var(--d)}
.w.accent>span{background:linear-gradient(100deg,#FFF6D8,var(--gold-2) 40%,var(--gold) 70%,#9FE6F7);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes wordIn{to{transform:none;opacity:1;filter:none}}
.lede{max-width:680px;margin:20px auto 0;color:rgba(232,238,248,.78);font-size:clamp(15px,1.5vw,17.5px)}
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .9s var(--ease) forwards;animation-delay:var(--d)}
@keyframes fadeUp{to{opacity:1;transform:none}}
.cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.mbtn{position:relative;border:0;cursor:pointer;padding:14px 26px;border-radius:14px;font-weight:700;font-size:15px;transform:translate(var(--mx,0),var(--my,0));transition:transform .35s var(--ease),box-shadow .3s,background .3s}
.mbtn.primary{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy-900);box-shadow:0 10px 34px rgba(201,162,39,.38),inset 0 1px 0 rgba(255,255,255,.5)}
.mbtn.primary:hover{box-shadow:0 14px 44px rgba(201,162,39,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.mbtn.ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.mbtn.ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(95,212,242,.5)}
.mbtn .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.mbtn .shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.mbtn:hover .shine::after{left:120%}

.preview-stage{width:min(1080px,94vw);margin:56px auto 0;perspective:1600px}
.preview{transform:rotateX(calc(14deg + var(--ty,0deg))) rotateY(var(--tx,0deg)) translateY(30px);transform-origin:50% 0;transition:transform .5s var(--ease);border-radius:20px 20px 0 0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,245,249,.98));color:var(--ink);box-shadow:0 -1px 0 rgba(255,255,255,.4),0 -30px 120px rgba(95,212,242,.18),0 -10px 60px rgba(201,162,39,.16);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.preview-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.preview-bar i{width:10px;height:10px;border-radius:50%;background:#D8DDE5}
.preview-body{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px;min-height:320px}
.pv-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:right}
.pv-kpi b{display:block;font-size:26px;color:var(--navy-800);font-variant-numeric:tabular-nums}
.pv-kpi span{font-size:12px;color:var(--ink-2)}
.pv-wide{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}

.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 clamp(16px,4vw,48px) 22px;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);position:relative;z-index:2}
.hstat{background:rgba(5,11,24,.55);padding:14px 18px;display:flex;flex-direction:column;gap:2px;text-align:right}
.hstat b{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.1;background:linear-gradient(120deg,#fff,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.hstat span{font-size:12.5px;color:rgba(232,238,248,.85);font-weight:600}
.hstat small{font-size:11px;color:rgba(232,238,248,.55)}
.hero-body{will-change:transform,opacity}
@media (max-width:860px){.hstats{grid-template-columns:1fr 1fr}}
.scroll-cue{margin:26px auto 0;width:26px;height:42px;border-radius:14px;border:2px solid rgba(255,255,255,.3);position:relative}
.scroll-cue::after{content:"";position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold-2);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* landing sections after hero (transition dark -> light) */
.journey-sec{position:relative;background:linear-gradient(180deg,var(--navy-950) 0,var(--navy-900) 30%,#E9EEF6 100%);padding:80px 16px 110px}
.sec-title{text-align:center;font-size:clamp(22px,3vw,34px);font-weight:800;margin:0 0 6px}
.sec-sub{text-align:center;color:rgba(232,238,248,.72);margin:0 auto 40px;max-width:640px}
.journey{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1180px;margin:0 auto;position:relative}
.journey::before{content:"";position:absolute;top:34px;right:6%;left:6%;height:2px;background:linear-gradient(90deg,rgba(95,212,242,.1),var(--gold),rgba(95,212,242,.1));transform:scaleX(var(--p,0));transform-origin:right;transition:transform 1.4s var(--ease)}
.jstep{text-align:center;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*120ms)}
.journey.in .jstep{opacity:1;transform:none}
.jstep .ic{width:68px;height:68px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;font-size:24px;font-weight:800;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);position:relative;z-index:1;box-shadow:0 0 30px rgba(95,212,242,.12)}
.jstep.live .ic{background:linear-gradient(140deg,var(--gold),var(--gold-2));color:var(--navy-900);box-shadow:0 0 40px rgba(201,162,39,.45)}
.jstep b{display:block;font-size:15px}.jstep span{font-size:12.5px;color:rgba(232,238,248,.7);display:block;margin-top:4px}
.jstep .st{display:inline-block;margin-top:8px;font-size:11px;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}

/* ===================== APP SHELL (light) ===================== */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--navy-900),var(--navy-800));color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow:auto}
.side .brand{margin:2px 6px 22px}
.navlink{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:rgba(255,255,255,.75);text-decoration:none;font-weight:600;font-size:14px;transition:background .2s,color .2s;position:relative}
.navlink:hover{background:rgba(255,255,255,.07);color:#fff}
.navlink.on{background:linear-gradient(90deg,rgba(201,162,39,.08),rgba(201,162,39,.22));color:#fff}
.navlink.on::before{content:"";position:absolute;right:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.navlink .ni{width:22px;text-align:center;opacity:.9}
.side .grow{flex:1}
.rolebox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;font-size:12px}
.rolebox select{width:100%;margin-top:6px;padding:7px;border-radius:8px;border:0;background:#fff;color:var(--ink)}
.rolebox small{display:block;opacity:.6;margin-top:6px;line-height:1.4}
main.view{padding:26px clamp(16px,3vw,36px) 70px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.top h1{margin:0;font-size:26px;font-weight:800;color:var(--navy-800)}
.top p{margin:2px 0 0;color:var(--ink-2);font-size:13.5px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters select,.inp{padding:9px 12px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);min-width:150px}
.btn{border:1px solid var(--line-2);background:#fff;color:var(--navy-800);padding:9px 15px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));border:0;color:var(--navy-900)}
.btn[disabled]{opacity:.45;pointer-events:none}

.grid{display:grid;gap:16px}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2{grid-column:span 2}.s3{grid-column:span 3}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);min-width:0;position:relative}
.card h3{margin:0;font-size:15.5px;color:var(--navy-800);font-weight:700}
.card .sub{margin:2px 0 12px;color:var(--muted);font-size:12.5px}
.card.click{cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.card.click:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(15,42,74,.12)}
.sect{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--navy-800);margin:28px 0 12px}
.sect::before{content:"";width:4px;height:18px;border-radius:4px;background:var(--gold)}
.kpi .v{font-size:32px;font-weight:800;color:var(--navy-800);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--ink-2);font-size:12.5px;font-weight:600}
.kpi .h{color:var(--muted);font-size:11.5px;margin-top:2px}
.kpi::after{content:"";position:absolute;inset:auto 18px 0 18px;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--cyan),var(--gold));opacity:.55;transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease) .2s}
.kpi.in::after{transform:scaleX(1)}

.src{display:inline-flex;gap:4px;align-items:center;font-size:11px;color:var(--ink-2);background:#EEF1F5;border-radius:999px;padding:2px 9px;margin-top:8px;border:0;cursor:pointer;font-family:inherit}
.src.warn{background:#FFF4DB;color:#7A5A00}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:999px;white-space:nowrap}
.p-mixed{background:#FCE9E9;color:#8F1F1F}.p-achievement_weakness{background:#FDEEE7;color:#8A3A17}
.p-assessment_variance{background:#FFF4DB;color:#7A5A00}.p-none{background:#E6F6E6;color:#075E07}
.p-draft{background:#EEF1F5;color:var(--navy-800)}.p-approved{background:#E6F6E6;color:#075E07}.p-returned{background:#FCE9E9;color:#8F1F1F}
.p-head_reviewed,.p-assistant_reviewed{background:#E6F0FB;color:#0D366B}

/* empty / awaiting data */
.await{border:1.5px dashed #C3CBD8;background:
  radial-gradient(circle at 20% 20%,rgba(95,212,242,.07),transparent 40%),
  repeating-linear-gradient(135deg,#FAFBFD 0 12px,#F3F5F9 12px 24px);box-shadow:none;text-align:center;padding:26px 20px}
.await .ico{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;border:2px dashed #AEB8C8;color:#7C879A;font-size:20px;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);border-color:var(--cyan)}}
.await b{color:var(--navy-800)}.await p{margin:6px 0 0;color:var(--ink-2);font-size:13px}

/* charts */
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font)}
.bar-r{transition:y .7s var(--ease),height .7s var(--ease),fill .4s}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-bottom:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:5px;vertical-align:middle}
.tip{position:fixed;z-index:200;pointer-events:none;background:var(--navy-900);color:#fff;font-size:12.5px;padding:8px 11px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .12s;max-width:300px;line-height:1.55}
.hm{display:grid;gap:3px;min-width:720px}
.hm .h{font-size:11px;color:var(--ink-2);font-weight:700;text-align:center;line-height:1.3;padding:2px}
.hm .rh{font-size:12px;font-weight:700;color:var(--navy-800);display:flex;align-items:center}
.hm .c{height:46px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:13px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background-color .6s;font-variant-numeric:tabular-nums;border:0}
.hm .c:hover{transform:scale(1.07);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy-800);z-index:2}
.hm .c.na{background:repeating-linear-gradient(135deg,#F3F5F8 0 6px,#E7EAEF 6px 12px);color:var(--muted);font-size:11px;cursor:default}
.scroll-x{overflow-x:auto}
.seg{display:inline-flex;background:#EEF1F5;border-radius:12px;padding:3px;gap:2px}
.seg button{all:unset;cursor:pointer;padding:6px 12px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--navy-800);box-shadow:0 1px 4px rgba(15,42,74,.12)}

/* matrix */
.mx{position:relative;height:340px;border-radius:14px;border:1px solid var(--grid);background:
  linear-gradient(to left,transparent 50%,rgba(208,59,59,.035) 50%),linear-gradient(to top,transparent 50%,rgba(15,42,74,.03) 50%);touch-action:none}
.mx .q{position:absolute;font-size:11px;color:var(--muted);font-weight:700}
.mx .dot{position:absolute;transform:translate(-50%,-50%);min-width:30px;height:30px;padding:0 8px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;cursor:grab;user-select:none;border:2px solid #fff;box-shadow:0 3px 12px rgba(15,42,74,.28);transition:box-shadow .2s,transform .2s}
.mx .dot.drag{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 10px 26px rgba(15,42,74,.35);z-index:5}
.mx .dot.moved{outline:2px dashed var(--gold);outline-offset:2px}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(5,11,24,.42);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-bg.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(560px,100vw);background:#fff;z-index:91;transform:translateX(-105%);transition:transform .45s var(--ease);overflow:auto;padding:22px 24px 40px;box-shadow:20px 0 60px rgba(5,11,24,.25)}
.drawer.on{transform:none}
.drawer h2{margin:0 0 4px;color:var(--navy-800);font-size:20px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:12px}
.crumbs b{color:var(--navy-800)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px;border-bottom:1px solid var(--grid);text-align:right;vertical-align:top}
.tbl th{color:var(--ink-2);font-weight:700;background:#F8F9FB;position:sticky;top:0}
.tbl tr.sel td{background:#FFF9E6}
.tbl tbody tr{cursor:pointer;transition:background .15s}.tbl tbody tr:hover td{background:#F6F8FB}

/* CIP path */
.path{position:relative;display:grid;gap:14px;padding-right:34px}
.path::before{content:"";position:absolute;right:13px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--navy-700),var(--gold),var(--cyan));transform:scaleY(var(--p,1));transform-origin:top;transition:transform 1.2s var(--ease)}
.pnode{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow)}
.pnode::before{content:attr(data-n);position:absolute;right:-34px;top:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--navy-800);color:#fff;border:3px solid var(--page)}
.pnode.pending::before{background:#fff;color:var(--muted);border:2px dashed #B8C2D0}
.pnode h4{margin:0 0 4px;color:var(--navy-800);font-size:14px}
.pnode .k{font-size:12px;color:var(--muted)}
.tag{display:inline-block;font-size:10.5px;font-weight:800;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.t-fact{background:#E6F0FB;color:#0D366B}.t-infer{background:#FFF4DB;color:#7A5A00}.t-prop{background:#EEE8FB;color:#4A2F9C}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);font-weight:700}
.field input,.field select,.field textarea{padding:8px 10px;border:1px solid var(--line-2);border-radius:10px;font-weight:500;color:var(--ink);background:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-900);color:#fff;padding:11px 18px;border-radius:12px;font-size:13.5px;z-index:300;opacity:0;transition:all .3s var(--ease);max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.err{background:#8F1F1F}

/* reveal */
.rv{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ===================== PRESENTATION ===================== */
.present{position:fixed;inset:0;z-index:500;background:radial-gradient(ellipse at 50% -10%,#16305A,var(--navy-950) 60%);color:#fff;display:flex;flex-direction:column}
.present .slides{flex:1;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:4vh 7vw;opacity:0;transform:translateX(-60px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.prev{transform:translateX(60px) scale(.98)}
.slide h2{font-size:clamp(26px,3.6vw,48px);margin:0 0 6px}
.slide .lead{color:rgba(232,238,248,.75);font-size:clamp(14px,1.4vw,19px);margin:0 0 3vh}
.slide .card{background:rgba(255,255,255,.97);color:var(--ink)}
.pbar{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:13px;color:rgba(255,255,255,.8)}
.pbar button{background:rgba(255,255,255,.1);border:0;color:#fff;padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:700}
.pprog{flex:1;height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.pprog i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .6s var(--ease)}
.big{font-size:clamp(48px,7vw,96px);font-weight:800;line-height:1;background:linear-gradient(120deg,#fff,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}

@media (max-width:1100px){.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:4px}
  .side .brand{margin:0 0 0 auto}.side .grow{display:none}.rolebox{width:100%}
  .navlink.on::before{display:none}
  .g6,.g4,.g3,.g2{grid-template-columns:1fr 1fr}.s2,.s3{grid-column:1/-1}
  .hnav-links{display:none}.preview-body{grid-template-columns:1fr 1fr}.pv-wide{grid-column:1/-1}
  .journey{grid-template-columns:repeat(2,1fr)}.journey::before{display:none}
}
@media (max-width:520px){.g6,.g4,.g3,.g2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .w>span,.fade-up{opacity:1;transform:none;filter:none}
  .rv,.jstep{opacity:1;transform:none}
}

/* ===================== V6.2 — unified operational identity ===================== */
/* Every internal page opens with the same navy band: horizon glow, data grid, gold rule. */
.top{position:relative;isolation:isolate;overflow:hidden;margin:-26px calc(-1 * clamp(16px,3vw,36px)) 22px;padding:30px clamp(16px,3vw,36px) 26px;
  background:radial-gradient(ellipse 70% 120% at 85% -30%,rgba(95,212,242,.22),transparent 60%),radial-gradient(ellipse 55% 140% at 10% 140%,rgba(201,162,39,.22),transparent 60%),
  linear-gradient(120deg,var(--navy-950),var(--navy-900) 45%,var(--navy-800));color:#fff;align-items:center;border-bottom:1px solid rgba(201,162,39,.35)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 95%);mask-image:linear-gradient(180deg,#000,transparent 95%)}
.top::after{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-62px;height:90px;border-radius:50%;background:radial-gradient(ellipse at 50% 0,rgba(255,236,190,.55),rgba(201,162,39,.18) 35%,transparent 70%);filter:blur(6px);animation:horizon 9s ease-in-out infinite alternate}
@keyframes horizon{from{opacity:.65;transform:translateX(-3%)}to{opacity:1;transform:translateX(3%)}}
.top h1{color:#fff;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.3px;animation:titleIn .8s var(--ease) both}
.top h1::after{content:"";display:block;width:56px;height:3px;border-radius:3px;margin-top:8px;background:linear-gradient(90deg,var(--gold-2),var(--gold));box-shadow:0 0 14px rgba(201,162,39,.6)}
.top p{color:rgba(232,238,248,.78);animation:titleIn .8s var(--ease) .1s both}
@keyframes titleIn{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.top .btn:not(.gold):not(.primary){background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.top .btn.primary{background:#fff;color:var(--navy-900);border-color:#fff}
.top .filters select{background:rgba(255,255,255,.95)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:12px;color:rgba(232,238,248,.85)}
.chip b{font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
main.view.enter>*{animation:viewIn .55s var(--ease) both}
main.view.enter>*:nth-child(2){animation-delay:.05s}main.view.enter>*:nth-child(3){animation-delay:.1s}main.view.enter>*:nth-child(n+4){animation-delay:.15s}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* light that follows the pointer on cards */
.card{overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(201,162,39,.10),rgba(95,212,242,.06) 35%,transparent 60%)}
.card:hover::before{opacity:1}
.card:hover{border-color:rgba(201,162,39,.28)}
.card>*{position:relative}

/* tables become calm data surfaces */
.tbl{border-collapse:separate;border-spacing:0}
.tbl th{background:linear-gradient(180deg,#F4F6FA,#EDF1F7);color:var(--navy-800);font-size:12px}
.tbl th:first-child{border-top-right-radius:10px}.tbl th:last-child{border-top-left-radius:10px}
.tbl tbody tr:nth-child(even) td{background:#FBFCFE}
.meter{height:7px;border-radius:7px;background:#EEF1F5;overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--s1),var(--cyan));width:0;transition:width 1s var(--ease)}

/* user box + logout */
.userbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;font-size:12px}
.userbox b{display:block;font-size:13px;line-height:1.4}
.userbox .row{margin-top:8px}
.userbox button{all:unset;cursor:pointer;font-weight:700;font-size:12px;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.1)}
.userbox button:hover{background:rgba(201,162,39,.3)}
.navgroup{font-size:10.5px;letter-spacing:.5px;color:rgba(255,255,255,.4);font-weight:800;margin:12px 12px 2px}
.navlink .cnt{margin-inline-start:auto;font-size:11px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;background:var(--gold);color:var(--navy-900);font-weight:800}
.mtoggle{display:none}

/* login */
.login{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;padding:24px 16px}
.login .hero-canvas{position:absolute;inset:0}
.lcard{width:min(420px,100%);background:rgba(10,22,48,.62);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:30px 28px;backdrop-filter:blur(18px);
  box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,39,.15) inset;color:#fff;animation:fadeUp .9s var(--ease) .4s both}
.lcard h1{margin:16px 0 4px;font-size:24px}
.lcard p{margin:0 0 18px;color:rgba(232,238,248,.7);font-size:13px}
.lcard label{display:block;font-size:12px;font-weight:700;color:rgba(232,238,248,.8);margin:12px 0 5px}
.lcard input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-size:15px}
.lcard input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.lcard .mbtn{width:100%;margin-top:20px}
.lcard .err{color:#FFB4B4;font-size:12.5px;min-height:18px;margin-top:10px}
.lcard small{display:block;margin-top:14px;color:rgba(232,238,248,.5);font-size:11.5px;line-height:1.6}

/* improvement cycle wheel & stage lanes */
.cycle{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;position:relative}
.cycle::before{content:"";position:absolute;top:30px;right:5%;left:5%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--navy-700));opacity:.5}
.stage{text-align:center;position:relative;cursor:pointer;background:none;border:0;font-family:inherit;padding:0}
.stage .o{width:60px;height:60px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:20px;background:#fff;color:var(--navy-800);border:2px solid var(--line-2);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.stage.has .o{background:linear-gradient(140deg,var(--navy-800),var(--navy-700));color:#fff;border-color:transparent}
.stage.hot .o{background:linear-gradient(140deg,var(--gold),var(--gold-2));color:var(--navy-900);box-shadow:0 0 0 6px rgba(201,162,39,.18),0 8px 26px rgba(201,162,39,.45)}
.stage:hover .o,.stage.on .o{transform:translateY(-3px) scale(1.06)}
.stage b{display:block;font-size:13px;color:var(--navy-800)}.stage span{font-size:11.5px;color:var(--ink-2)}
.task{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit}
.task .ti{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#EEF3FA;color:var(--navy-800);font-weight:800}
.task.urgent .ti{background:linear-gradient(140deg,var(--gold),var(--gold-2));color:var(--navy-900)}
.task h4{margin:0;font-size:14px;color:var(--navy-800)}.task p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.task .st{font-size:10.5px;font-weight:800;color:var(--muted)}

/* three PD levels */
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lane{border-radius:14px;padding:12px;background:#F6F8FB;border:1px solid var(--line);position:relative}
.lane .n{font-size:11px;font-weight:800;color:var(--muted)}
.lane b{display:block;color:var(--navy-800);font-size:13px;margin:2px 0}
.lane.verified{background:linear-gradient(160deg,#EAF7EA,#F6FBF6);border-color:rgba(12,163,12,.25)}
.lane.uploaded{background:linear-gradient(160deg,#E8F1FC,#F5F9FE);border-color:rgba(42,120,214,.25)}
.lane.available_outside{background:linear-gradient(160deg,#FFF6DF,#FFFBF1);border-color:rgba(201,162,39,.35)}
.lane .st{font-size:12px;color:var(--ink-2)}

/* evidence & reconciliation cards */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.vs .side-v{border-radius:14px;padding:12px;background:#F6F8FB;border:1px solid var(--line)}
.vs .side-v.dated{background:linear-gradient(160deg,#E8F1FC,#F7FAFE)}
.vs .side-v.undated{background:repeating-linear-gradient(135deg,#FBFBF7 0 10px,#F5F3EA 10px 20px)}
.vs .num{font-size:30px;font-weight:800;color:var(--navy-800);font-variant-numeric:tabular-nums;line-height:1.1}
.vs .mid{display:grid;place-items:center;font-weight:800;color:var(--crit);font-size:18px;min-width:56px;text-align:center}
.vs .k{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.reasons{margin:10px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--ink-2)}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchips button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.fchips button.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.dz{border:2px dashed #B8C4D6;border-radius:16px;padding:18px;text-align:center;background:#FAFCFF;transition:border-color .2s,background .2s;cursor:pointer}
.dz.over{border-color:var(--gold);background:#FFFBEF}
.thumb{width:100%;height:120px;object-fit:cover;border-radius:10px;background:#EEF1F5}

/* tool forms & visuals */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.tcard .no{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:linear-gradient(140deg,var(--navy-800),var(--navy-700));color:#fff}
.tcard h4{margin:0;font-size:14px;color:var(--navy-800)}.tcard p{margin:0;font-size:12px;color:var(--ink-2)}
.form{display:grid;gap:12px}
.form textarea{min-height:84px;resize:vertical}
.rows{width:100%;border-collapse:separate;border-spacing:0 6px}
.rows td{padding:0 3px}.rows input,.rows select{width:100%;padding:7px 9px;border:1px solid var(--line-2);border-radius:9px;background:#fff}
.rows th{font-size:11.5px;color:var(--ink-2);text-align:right;padding:0 3px}
.xbtn{all:unset;cursor:pointer;color:var(--crit);font-weight:800;padding:4px 8px}
.rgrid{display:grid;grid-template-columns:28px repeat(5,1fr);gap:4px;font-size:11px}
.rgrid .c{min-height:54px;border-radius:8px;padding:4px;display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start}
.rgrid .c span{background:rgba(255,255,255,.85);border-radius:6px;padding:1px 6px;font-weight:700;color:var(--navy-900)}
.rgrid .ax{display:grid;place-items:center;color:var(--muted);font-weight:800}
.swot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.swot div{border-radius:12px;padding:10px;font-size:12.5px;white-space:pre-wrap;min-height:80px}
.weights{display:flex;height:34px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.weights i{display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:12px;width:0;transition:width 1.1s var(--ease)}
.bandscale{position:relative;height:16px;border-radius:9px;background:linear-gradient(90deg,#E6F6E6 0 35%,#FFF4DB 35% 50%,#FDEEE7 50% 75%,#FCE9E9 75%)}
.versions{font-size:12px;max-height:220px;overflow:auto}
.versions div{padding:6px 0;border-bottom:1px solid var(--grid)}

@media (max-width:860px){
  .top{margin-top:0}
  .side{position:sticky;top:0;z-index:50;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:10px 14px}
  .side .navlink,.side .navgroup,.side .userbox{display:none}
  .side.open{flex-wrap:wrap;max-height:100vh;overflow:auto}
  .side.open .navlink{display:flex;width:100%}.side.open .navgroup{display:block;width:100%}.side.open .userbox{display:block;width:100%}
  .mtoggle{display:grid;place-items:center;margin-inline-start:auto;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer}
  .side .brand{margin:0}
  .cycle{grid-template-columns:repeat(4,1fr)}.cycle::before{display:none}
  .lanes{grid-template-columns:1fr}
  .vs{grid-template-columns:1fr}.vs .mid{min-height:30px}
}
@media (max-width:520px){.cycle{grid-template-columns:repeat(2,1fr)}.top h1{font-size:21px}main.view{padding-top:0}}
@media (prefers-reduced-motion:reduce){.top::after{animation:none}.weights i,.meter i{transition:none}}

/* diagnosis: ranked gap list */
.gap-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(120px,1.1fr) minmax(140px,1.4fr) 54px auto;gap:10px;align-items:center;width:100%;padding:9px 10px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s var(--ease);animation:viewIn .5s var(--ease) both;animation-delay:calc(var(--i)*25ms)}
.gap-row:hover{background:#F6F8FB;transform:translateX(-2px)}
.gap-row.sel{background:#FFF9E6;border-color:rgba(201,162,39,.45)}
.gap-row:focus-visible{outline:3px solid var(--gold)}
.gr-n{font-weight:800;color:var(--muted);font-size:12px;text-align:center}
.gr-t b{display:block;color:var(--navy-800);font-size:13.5px}.gr-t small{font-size:11px;color:var(--muted)}
.gr-b{display:grid;gap:4px}
.gb{display:grid;grid-template-columns:1fr 40px;gap:6px;align-items:center;font-size:11px;font-weight:700;color:var(--ink-2)}
.gb i{display:block;height:8px;border-radius:5px;width:0;transition:width .9s var(--ease)}
.gb i.on{width:var(--w)}
.gr-g{text-align:center;line-height:1.1}.gr-g b{display:block;font-size:17px;color:var(--navy-800)}.gr-g small{font-size:10px;color:var(--muted)}
@media (max-width:620px){.gap-row{grid-template-columns:24px 1fr 46px}.gap-row .gr-b{grid-column:2/4}.gap-row .pill{grid-column:2/4;justify-self:start}}

@media (max-width:520px){#kpis,#rk,#pk{grid-template-columns:1fr 1fr}.kpi .v{font-size:25px}.kpi{padding:14px}.chips .chip b{font-size:14px}}
#ybanner:empty{display:none}

/* execution panel */
.exlist{display:grid;gap:8px}
.exrow{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#FBFCFE;transition:border-color .2s,background .2s}
.exrow:hover{border-color:rgba(201,162,39,.4);background:#fff}
.exdot{width:12px;height:12px;border-radius:50%;margin-top:5px;box-shadow:0 0 0 4px rgba(15,42,74,.06)}
.asg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;margin-top:6px;padding:6px 8px;border-radius:10px;background:#F1F4F9}
.asg select,.asg input,.exrow select,.exrow input{padding:5px 8px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:12.5px}
.envbar{position:fixed;bottom:0;left:0;right:0;z-index:400;text-align:center;padding:6px 12px;font-size:12.5px;font-weight:800;color:var(--navy-900);
  background:repeating-linear-gradient(135deg,#F6D46B 0 14px,#EFC64C 14px 28px);box-shadow:0 -4px 20px rgba(0,0,0,.15)}

/* ===================== V6.3 landing: emblem + pulse section ===================== */
.emblem{position:relative;width:96px;height:96px;margin:0 auto 14px;display:grid;place-items:center}
.emblem svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.e-ring{fill:none;stroke:url(#eg);stroke-width:2.2;stroke-dasharray:330;stroke-dashoffset:330;animation:eDraw 1.6s var(--ease) .2s forwards;filter:drop-shadow(0 0 6px rgba(232,207,122,.6))}
.e-orbit{fill:none;stroke:rgba(95,212,242,.35);stroke-width:1;stroke-dasharray:3 7;transform-origin:60px 60px;animation:spin 26s linear infinite}
.e-dot{fill:#FFF6D8;transform-origin:60px 60px;animation:spin 7s linear infinite;filter:drop-shadow(0 0 6px #E8CF7A)}
.e-mark{position:relative;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:30px;font-weight:800;color:var(--navy-900);
  background:linear-gradient(140deg,var(--gold),var(--gold-2));box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 46px rgba(201,162,39,.55);
  animation:markIn 1.2s var(--ease) .35s both;overflow:hidden}
.e-mark::after{content:"";position:absolute;inset:-40%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);transform:translateX(-120%);animation:sweep 3.6s ease-in-out 1.6s infinite}
@keyframes eDraw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes markIn{from{opacity:0;transform:scale(.4) rotate(-20deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes sweep{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.hero h1 .accent>span{text-shadow:0 0 34px rgba(232,207,122,.25)}

.pulse-sec{position:relative;overflow:hidden;padding:90px clamp(16px,4vw,48px) 70px;background:radial-gradient(ellipse 80% 60% at 50% 0,#0F2A4A,var(--navy-950) 70%)}
.pulse-sec .sec-title{color:#fff}
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;will-change:transform}
.orb.o1{width:420px;height:420px;top:-60px;right:-120px;background:radial-gradient(circle,rgba(201,162,39,.32),transparent 70%)}
.orb.o2{width:520px;height:520px;bottom:-200px;left:-160px;background:radial-gradient(circle,rgba(95,212,242,.22),transparent 70%)}
.pulse-grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;max-width:1240px;margin:0 auto}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(243,245,249,.93));border:1px solid rgba(255,255,255,.4);border-radius:22px;padding:18px 20px;color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(201,162,39,.12)}
.glass h3{margin:0;color:var(--navy-800);font-size:15.5px}.glass .gsub{margin:2px 0 10px;color:var(--muted);font-size:12px}
.glass.wide{grid-column:1/-1}
.gauges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.gauges h3{font-size:13px}.gauges .sub{font-size:11px;margin:0}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.rings .r1{display:grid;place-items:center;gap:4px}.rings b{font-size:11.5px;color:var(--navy-800)}
.reveal{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*120ms)}
.reveal.in{opacity:1;transform:none}
@media (max-width:980px){.pulse-grid{grid-template-columns:1fr}.rings{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.emblem{width:76px;height:76px}.e-mark{width:46px;height:46px;font-size:24px}.rings{grid-template-columns:1fr 1fr 1fr}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.e-ring{stroke-dashoffset:0}.e-mark{opacity:1}}

.hnav .mbtn{white-space:nowrap}

@media (max-width:520px){#k{grid-template-columns:1fr 1fr}#k .kpi .v{font-size:24px}}

/* ===================== V6.4 — readability (B1, approved 2026-10-30) ===================== */
/* Body text 16px; secondary text 13–14px; nothing under 12px. Greys darkened to ≥4.5:1 on white
   (--muted #8A94A6 was ~3:1). Arabic gets more line height. Touch targets ≥44px on phones. */
:root{--muted:#5B677B;--ink-2:#3F4A5C}
body{font-size:16px;line-height:1.75}
.top p{font-size:15px;line-height:1.7}
.card h3{font-size:17px}.card .sub{font-size:13.5px;line-height:1.6}
.sect{font-size:18px}
.kpi .l{font-size:14px}.kpi .h{font-size:13px;line-height:1.55}
.src{font-size:13px;padding:3px 10px}
.pill{font-size:13px;padding:3px 11px}
.tag{font-size:12px;padding:1px 9px}
.legend{font-size:13.5px}
.tip{font-size:14px;line-height:1.65}
.hm .h{font-size:13px}.hm .rh{font-size:13.5px}.hm .c{font-size:14.5px}.hm .c.na{font-size:13px}
.seg button{font-size:14px;padding:8px 14px}
.mx .q{font-size:13px}.mx .dot{font-size:13px;min-width:34px;height:34px}
.crumbs{font-size:13.5px}
.tbl{font-size:14px;line-height:1.65}.tbl th{font-size:13.5px}.tbl th,.tbl td{padding:10px}
.pnode h4{font-size:15.5px}.pnode .k{font-size:13.5px;line-height:1.6}
.pnode::before{font-size:13px}
.field{font-size:13.5px}.field input,.field select,.field textarea{font-size:15px}
.filters select,.inp{font-size:15px}
.btn{font-size:14.5px}
.chip{font-size:13.5px}.chip b{font-size:17px}
.navgroup{font-size:12px;color:rgba(255,255,255,.62)}
.navlink{font-size:15px}.navlink .cnt{font-size:12px}
.userbox{font-size:13px}.userbox b{font-size:14px}.userbox button{font-size:13px}
.rolebox{font-size:13px}
.stage b{font-size:14px}.stage span{font-size:13px}
.task h4{font-size:15px}.task p{font-size:14px;line-height:1.6}.task .st{font-size:12px}
.lane .n{font-size:12.5px}.lane b{font-size:14.5px}.lane .st{font-size:13.5px}
.vs .k{font-size:13.5px}.reasons{font-size:14px}
.fchips button{font-size:14px;padding:8px 14px}
.tcard h4{font-size:15.5px}.tcard p{font-size:14px;line-height:1.6}
.rows th{font-size:13px}.rows input,.rows select{font-size:15px}
.rgrid{font-size:13px}.swot div{font-size:14px}.weights i{font-size:13px}.versions{font-size:13.5px}
.gr-n{font-size:13px}.gr-t b{font-size:15px}.gr-t small{font-size:13px;line-height:1.5}
.gb{font-size:13px}.gr-g b{font-size:18px}.gr-g small{font-size:12px}
.glass h3{font-size:17px}.glass .gsub{font-size:13.5px}
.gauges h3{font-size:14.5px}.gauges .sub{font-size:13px}.rings b{font-size:13px}
.asg,.asg select,.asg input,.exrow select,.exrow input{font-size:14px}
.envbar{font-size:13.5px}
.lcard p{font-size:14.5px}.lcard label{font-size:13.5px}.lcard small{font-size:13px}
.brand small{font-size:12.5px}
.preview-bar{font-size:13px}.pv-kpi span{font-size:13px}
.badge{font-size:13.5px}
.jstep span{font-size:14px;line-height:1.6}.jstep .st{font-size:12.5px}
.hstat span{font-size:14px}.hstat small{font-size:12.5px;color:rgba(232,238,248,.78)}
.sec-sub{color:rgba(232,238,248,.85)}
.await p{font-size:14.5px}
/* ===================== V6.4 — one alerts panel per page (B4) ===================== */
.alerts{border-radius:16px;border:1px solid rgba(201,162,39,.4);background:#FFFBF0;margin:0 0 14px;overflow:hidden}
.alerts.lv-critical{border-color:rgba(208,59,59,.45);background:#FFF7F7}
.alerts.lv-info{border-color:#CDE2FB;background:#F5F9FE}
.al-head{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;padding:12px 16px;cursor:pointer;min-height:48px}
.al-head:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.al-ico{font-size:18px}
.al-title{font-size:15.5px;color:var(--navy-800)}
.al-n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:var(--navy-800);color:#fff;font-size:13px;font-weight:800;margin-inline-start:4px}
.al-counts{display:flex;gap:6px;flex-wrap:wrap}
.al-c{font-size:13px;font-weight:700;padding:3px 10px;border-radius:99px}
.lv-critical.al-c,.al-item.lv-critical .al-lv{background:#FCE9E9;color:#8F1F1F}
.lv-warning.al-c,.al-item.lv-warning .al-lv{background:#FFF0C7;color:#6B4E00}
.lv-info.al-c,.al-item.lv-info .al-lv{background:#E6F0FB;color:#0D366B}
.al-more{margin-inline-start:auto;font-size:13.5px;font-weight:700;color:var(--navy-700)}
.al-more::after{content:" ▾"}.alerts.expanded .al-more::after{content:" ▴"}
.al-list{list-style:none;margin:0;padding:0 16px 10px;display:grid;gap:6px}
.al-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.al-item.lv-critical{border-color:rgba(208,59,59,.35)}
.al-sum{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:15px;color:var(--navy-800)}
.al-lv{font-size:12.5px;font-weight:800;padding:2px 9px;border-radius:99px;white-space:nowrap}
.al-det{display:none;margin-top:6px;font-size:14.5px;color:var(--ink);line-height:1.75}
.al-det p{margin:0 0 6px}.al-det .al-src{font-size:13px;color:var(--ink-2)}
.al-item.open .al-det,.alerts.expanded .al-det{display:block}

/* ===================== V6.4 — hero: live indicators (B3) + phone layout (B2) ===================== */
.lede-short{display:none}
.hkpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(820px,100%);margin:26px auto 0;position:relative;z-index:2}
.hkpi{display:flex;flex-direction:column;gap:2px;text-align:right;padding:12px 16px;border-radius:16px;background:rgba(5,11,24,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.hkpi b{font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1.1;background:linear-gradient(120deg,#fff,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.hkpi .hk-t{display:flex;flex-direction:column;gap:2px}
.hkpi span{font-size:14.5px;font-weight:700;color:#fff}
.hkpi small{font-size:12.5px;color:rgba(232,238,248,.8);line-height:1.5}
.hkpis-note{width:min(820px,100%);margin:8px auto 0;font-size:12.5px;color:rgba(232,238,248,.72)}
.lede{color:rgba(240,244,250,.9);text-shadow:0 1px 14px rgba(5,11,24,.9),0 0 2px rgba(5,11,24,.8)}
.hero h1{text-shadow:0 2px 24px rgba(5,11,24,.75)}
@media (max-width:600px){
  .lede-long{display:none}.lede-short{display:inline}
  .lede{font-size:16px;line-height:1.8;margin-top:16px}
  .hero-body{padding-top:28px}
  .hero h1{font-size:clamp(28px,8.6vw,36px);line-height:1.35}
  .cta{flex-direction:column;align-items:stretch;width:min(340px,100%);margin-inline:auto;gap:10px}
  .cta .mbtn{min-height:52px;font-size:16.5px}
  .hkpis{grid-template-columns:1fr;gap:8px}
  .hkpi{flex-direction:row;align-items:center;gap:12px;padding:10px 14px}
  .hkpi b{min-width:64px;text-align:center}
  .hkpi .hk-t{display:flex;flex-direction:column}
  .hnav{padding:14px 16px}.brand small{display:none}
  .badge{font-size:13px;max-width:100%}
}
@media (max-width:360px){.hnav .mbtn{padding:10px 12px!important;font-size:14px}.brand b{font-size:15px}.emblem{width:64px;height:64px;margin-bottom:8px}.e-mark{width:40px;height:40px;font-size:21px}}

/* ===================== V6.5 — final UX round (approved 2026-10-31) ===================== */
.al-brief{display:none;margin:0;padding:0 16px 12px;font-size:14px;color:var(--ink-2);line-height:1.7}
.jump{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.jump span{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.jump button{all:unset;cursor:pointer;font-size:14px;font-weight:700;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line-2);color:var(--navy-800)}
.jump button:hover{border-color:var(--gold)}.jump button:focus-visible{outline:3px solid var(--gold)}
#path .pnode{scroll-margin-top:84px}#wf,#exec{scroll-margin-top:84px}
/* tools: task question first; compact stepper replaces the tall stage grid on phones */
.task-card h3 label{cursor:pointer}
.task-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;margin:4px 0 16px}
.task-row .inp{width:100%;min-width:0}
#task{font-weight:700;color:var(--navy-800)}
.stepper{display:none}
/* diagnosis guide as an expandable card (open for first-time users) */
.gdet>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.gdet>summary::-webkit-details-marker{display:none}
.gdet>summary h3{margin:0}
.gmore{font-size:13px;font-weight:700;color:var(--navy-700);white-space:nowrap}
.gmore::after{content:" ▾"}.gdet[open] .gmore::after{content:" ▴"}
.gdet>summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.gtolist{display:none}
/* tools stepper: a fade + arrow at the scrolling edge shows there is more (no extra height) */
.stepper-wrap{position:relative}
/* diagnosis: guided initial state */
.guide h3{font-size:17px}
.gsteps{margin:10px 0 0;padding:0;list-style:none;counter-reset:g;display:grid;gap:10px}
.gsteps li{counter-increment:g;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:start}
.gsteps li::before{content:counter(g);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--navy-800);color:#fff}
.gsteps b{font-size:15px;color:var(--navy-800)}.gsteps span{font-size:14px;color:var(--ink-2);line-height:1.6}
.gfirst{margin-top:16px;padding:12px 14px;border-radius:14px;background:#FFF9E6;border:1px solid rgba(201,162,39,.4);display:flex;flex-direction:column;gap:3px}
.gfirst small{font-size:13px;color:#6B4E00;font-weight:700}.gfirst b{font-size:15.5px;color:var(--navy-800)}.gfirst span{font-size:14px;color:var(--ink-2)}
@media (max-width:860px){
  .cycle{display:none}
  .stepper{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;margin:0 -4px;-webkit-overflow-scrolling:touch}
  .step{all:unset;box-sizing:border-box;scroll-snap-align:center;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 12px;border-radius:999px;
    background:#F1F4F9;border:1px solid var(--line-2);font-size:14px;font-weight:700;color:var(--navy-800);cursor:pointer;white-space:nowrap}
  .step i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#fff;color:var(--navy-800)}
  .step span{font-size:12.5px;font-weight:800;padding:1px 7px;border-radius:99px;background:#fff;color:var(--ink-2)}
  .step.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}.step.on i{background:var(--gold);color:var(--navy-900)}
  .step:focus-visible{outline:3px solid var(--gold)}
  .task-row{grid-template-columns:1fr}
  /* diagnosis on phones: the guide / selected details come first, the ranking list below */
  .diag-grid{display:flex;flex-direction:column}.diag-grid #detail{order:-1}
  .gtolist{display:flex;width:100%;justify-content:center;margin:8px 0 2px}
  /* stepper scroll hint: RTL content overflows to the left, so the fade and arrow sit on the left edge */
  .stepper{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px);mask-image:linear-gradient(to right,transparent 0,#000 48px)}
  .stepper-wrap.at-end .stepper{-webkit-mask-image:none;mask-image:none}
  .stepper-wrap::after{content:"‹";position:absolute;left:0;top:0;bottom:6px;width:26px;display:grid;place-items:center;pointer-events:none;
    font-size:22px;font-weight:800;color:var(--navy-700);background:linear-gradient(to right,#fff 55%,rgba(255,255,255,0));animation:nudge 1.6s ease-in-out 3}
  .stepper-wrap.at-end::after{content:none}
  @keyframes nudge{50%{transform:translateX(-4px)}}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.stepper-wrap::after{animation:none}
}
@media (max-width:600px){
  /* CIP and other internal pages: a shorter header band on phones (nothing removed) */
  .top{padding:18px 16px 16px;margin-bottom:14px}
  .top h1{font-size:21px}.top h1::after{margin-top:6px;width:44px}
  .top p{font-size:14px;line-height:1.6}
  .top .filters{gap:6px}.top .filters .btn{padding:8px 12px}
  .alerts:not(.expanded) .al-brief{display:block}
  .alerts:not(.expanded) .al-item:not(.lv-critical){display:none}
  .alerts:not(.expanded) .al-list{padding-bottom:0}
  .alerts:not(.expanded) .al-list:has(.lv-critical){padding-bottom:10px}
  .al-head{padding:10px 14px}
  .jump{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .jump span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* label kept for screen readers */
  .jump button{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
}

/* a school-year range never breaks across lines */
bdi,.top p b,.chip b{white-space:nowrap}

/* phones and touch screens: every control reaches 44×44px */
@media (max-width:860px),(pointer:coarse){
  .btn,.mbtn,.seg button,.fchips button,.filters select,.inp,.field input,.field select,.rows input,.rows select,
  .asg select,.asg input,.exrow select,.exrow input,.userbox button,.navlink,.mtoggle,.lcard input{min-height:44px}
  .seg button,.fchips button,.userbox button{display:inline-flex;align-items:center;justify-content:center}
  .src{min-height:44px;padding:6px 14px}
  .xbtn{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
  .mtoggle{width:44px;height:44px}
  .hnav-links button{min-height:44px}
  .mx .dot{min-width:44px;height:44px}
  .brand{min-height:44px}
  .gap-row{min-height:56px}
  .tbl th,.tbl td{padding:12px 10px}
}

/* V6.6 — tool forms aligned with the book: wide row tables scroll inside their field instead of being clipped */
.form>.field,.form>.gdet{min-width:0}
.field>.scroll-x{max-width:100%}
.path>.pnode{min-width:0}.pnode .scroll-x{max-width:100%}
/* V6.6 — multi-choice boxes from the book's designed forms (tool 1 data sources) */
.mchk{display:flex;flex-wrap:wrap;gap:6px 16px;padding:4px 0}.mchk label{display:inline-flex;align-items:center;gap:6px;font-weight:400;cursor:pointer}.mchk input{width:auto;margin:0}
/* V6.6 — hero motion toggle: the viewer can start or stop the background motion (system reduced-motion is the default) */
.motion-toggle{position:absolute;inset-block-end:14px;inset-inline-end:14px;z-index:4;font:inherit;font-size:13px;color:#FFF6D8;background:rgba(10,22,48,.62);border:1px solid rgba(232,207,122,.45);border-radius:999px;padding:6px 14px;cursor:pointer;backdrop-filter:blur(6px)}
.motion-toggle:hover{background:rgba(10,22,48,.85)}.motion-toggle:focus-visible{outline:2px solid #E8CF7A;outline-offset:2px}
.hero>.motion-toggle{inset-block-start:92px;inset-block-end:auto}
@media (max-width:720px){.hero>.motion-toggle{position:relative;inset:auto;align-self:center;margin:6px auto 0}}
/* V6.6 — hero identity badge: school, role, name (three lines) */
.badge-id{border-radius:18px;padding:8px 18px;align-items:center}.badge-id .bid{display:flex;flex-direction:column;align-items:center;line-height:1.55;text-align:center}.badge-id .bid b{font-weight:700}.badge-id .bid span{font-weight:500;opacity:.9}
/* V6.6 — sign-in: local role cards beside the form (cards only on the local copy; usernames, never passwords) */
.lwrap{position:relative;z-index:1;display:flex;gap:22px;align-items:flex-start;justify-content:center;width:min(1060px,100%);flex-wrap:wrap}
.accpick{flex:1 1 520px;max-width:620px;background:rgba(10,22,48,.55);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:22px;backdrop-filter:blur(16px);max-height:min(78vh,720px);overflow:auto}
.accpick h2{margin:0 0 4px;font-size:20px}.accpick p{margin:0 0 10px;color:rgba(232,238,248,.72);font-size:13.5px;line-height:1.6}
.accg{margin:14px 0 8px;font-size:13px;font-weight:700;color:var(--gold-2)}.accs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.acc{display:flex;gap:10px;align-items:center;text-align:start;font:inherit;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;cursor:pointer;min-height:56px}
.acc:hover{background:rgba(255,255,255,.11)}.acc:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}.acc.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.28)}
.acc .ai{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:800;color:var(--navy-900);background:linear-gradient(140deg,var(--gold),var(--gold-2))}
.acc b{display:block;font-size:13.5px;line-height:1.4}.acc small{display:block;font-size:12px;color:rgba(232,238,248,.6)}
@media (max-width:720px){.accpick{order:2;max-height:none}.lwrap{gap:14px}}

/* ===================================================================== Fit by default + Expand on demand (2026-11-12)
   Design-system rules for every page: cards fit their container; long text wraps; inner columns redistribute; grids drop
   to fewer columns instead of squeezing; a horizontal scroll is left only to genuinely wide tables, and the full detail
   lives in the expanded drawer (web/js/expand.js). UI only. */
.card{max-width:100%}
.grid>*,.card>*,.row>*{min-width:0}
.card h3,.card p,.card li,.card td,.card th,.card small,.card b,.card .sub,.card .pill{overflow-wrap:anywhere}
.tbl td,.tbl th{overflow-wrap:anywhere;word-break:normal}
.card .pill{white-space:normal}
/* grids: never more columns than declared, never narrower than a comfortable minimum — they wrap to rows instead */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(440px,calc((100% - 16px)/2))),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(280px,calc((100% - 32px)/3))),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(180px,calc((100% - 48px)/4))),1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(150px,calc((100% - 80px)/6))),1fr))}
.diag-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(560px,calc((100% - 16px)/2))),1fr))}
/* charts: responsive SVG — the whole drawing fits the card (labels are shortened, full text in the tooltip) */
.chart{max-width:100%;overflow:hidden}
.chart>svg{max-width:100%;height:auto;display:block}
/* gap ranking: a container query re-flows each row to two lines when its card is narrow (no horizontal scroll) */
#gt{container-type:inline-size;overflow-x:hidden}
.gap-row{grid-template-columns:26px minmax(0,1.25fr) minmax(0,1fr) 46px minmax(0,auto)}
@container (max-width:560px){
  .gap-row{grid-template-columns:24px minmax(0,1fr) 46px}
  .gap-row .gr-b{grid-column:2/4}
  .gap-row .pill{grid-column:2/4;justify-self:start}
}
/* expand button — uniform, in the card header (inline-end in RTL = left) */
.xstrip{display:flex;justify-content:flex-end;margin:-6px 0 8px}
.xbtn{border:1px solid var(--line);background:#fff;color:var(--navy-800);
  border-radius:9px;padding:3px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.6}
.xbtn:hover{background:#F6F8FB}.xbtn:focus-visible{outline:3px solid var(--gold)}

/* summary view: detail columns are hidden in the card and shown in the drawer */
.xd-col{display:none}
.xd-on .xd-col{display:table-cell}
.xd-note{font-size:12px;color:var(--muted);margin:6px 0 0}
.xd-on .xd-note{display:none}
/* the drawer: the SAME card element, fixed to the inline-end side (left in RTL) */
.xd-bg{position:fixed;inset:0;background:rgba(5,11,24,.42);backdrop-filter:blur(2px);z-index:94;opacity:0;pointer-events:none;transition:opacity .25s}
.xd-bg.on{opacity:1;pointer-events:auto}
.card.xd-on{position:fixed!important;top:0;bottom:0;left:0;right:auto;width:clamp(55vw,60vw,65vw);max-width:1280px;margin:0!important;
  z-index:95;overflow:auto;border-radius:0;padding:0 24px 32px;box-shadow:20px 0 60px rgba(5,11,24,.25);animation:xdIn .3s var(--ease)}
@keyframes xdIn{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
.card.xd-on>.xstrip{display:none}
.xd-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;
  margin:0 -24px 12px;padding:14px 24px;border-bottom:1px solid var(--line)}
.xd-head .xd-t{display:flex;flex-direction:column;min-width:0}
.xd-head b{color:var(--navy-800);font-size:17px;overflow-wrap:anywhere}.xd-head small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.xd-head .xd-close{flex:0 0 auto}
.card.xd-on [style*="max-height"]{max-height:none!important}
.card.xd-on .chart{overflow:auto}
.card.xd-on .chart>svg{max-width:none;width:100%}
.xd-zoom{display:flex;gap:6px;justify-content:flex-end;margin:8px 0}
.xd-zoom .btn{padding:4px 12px}
html.xd-lock{overflow:hidden}
html.xd-anchor-off,html.xd-anchor-off body{overflow-anchor:none}
.xd-ph{visibility:hidden}
@media (max-width:1024px){.card.xd-on{width:100vw;max-width:none}}
@media (max-width:768px){.xbtn,.xd-close,.xd-zoom .btn{min-height:44px;min-width:44px}}
@media (prefers-reduced-motion:reduce){.card.xd-on{animation:none}}
@media print{.xbtn,.xd-note{display:none}.xd-col{display:table-cell}}
/* mobile: a form row inside a card stacks its fields instead of squeezing them (fit rule, 2026-11-13) */
@media (max-width:520px){.card .row{flex-wrap:wrap}.card .row>.field{flex:1 1 100%!important;min-width:0}}
/* segmented buttons inside a card wrap to a second line instead of pushing past the card edge (fit rule) */
.card .seg{flex-wrap:wrap;max-width:100%;height:auto}

/* diagnosis — tool 5 card (2026-11-13): short header, explanation in a help popover, form below the drawing */
.fbhelp{margin:0 0 8px;font-size:13.5px}
.fbhelp>summary{cursor:pointer;color:var(--navy-800);font-weight:700;width:max-content;max-width:100%;list-style:none}
.fbhelp>summary::-webkit-details-marker{display:none}
.fbhelp[open]>summary{margin-bottom:6px}
.fbhelp>p{margin:4px 0;color:var(--ink-2);background:#F6F8FB;border-radius:10px;padding:8px 12px}
.fbform{flex-wrap:nowrap}
@media (max-width:860px){.fbform{flex-wrap:wrap}}
/* pending data — compact line with details on demand */
.pend{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pend details>summary{cursor:pointer;color:var(--navy-800);font-weight:700;list-style:none}
.pend details>summary::-webkit-details-marker{display:none}
.pend ul{margin:6px 0 0;padding-inline-start:18px;font-size:13px}

/* achievements & evidence center (2026-11-14): multi-image evidence gallery + lightbox */
.agal{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.athumb{all:unset;cursor:zoom-in;width:84px;height:84px;border-radius:10px;overflow:hidden;background:#EEF1F5;box-shadow:inset 0 0 0 1px var(--line-2);box-sizing:border-box}
.athumb img{width:100%;height:100%;object-fit:cover;display:block}
.athumb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.alb{position:fixed;inset:0;z-index:200;background:rgba(5,11,24,.88);display:flex;align-items:center;justify-content:center;gap:10px;padding:16px}
.alb figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.alb img{max-width:100%;max-height:calc(100vh - 90px);border-radius:10px;object-fit:contain;background:#000}
.alb figcaption{color:#fff;font-size:14px;text-align:center}
.alb-x,.alb-n{all:unset;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);border-radius:999px;width:44px;height:44px;display:grid;place-items:center;font-size:22px;flex:none}
.alb-x{position:absolute;top:14px;left:14px}
@media (max-width:520px){.athumb{width:72px;height:72px}.alb{padding:8px;gap:4px}.alb-n{width:36px;height:36px}}
@media (max-width:520px){#ck{grid-template-columns:1fr 1fr}#ck .kpi{padding:12px}#ck .kpi .v{font-size:24px}#ck .kpi .h{font-size:12px}}

/* evidence library card (2026-11-14): primary image + «+ N صور» → gallery / lightbox */
.ev-prev{all:unset;cursor:zoom-in;display:block;position:relative;width:100%;border-radius:10px;overflow:hidden}
.ev-prev:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ev-more{position:absolute;inset:auto auto 8px 8px;background:rgba(5,11,24,.72);color:#fff;font-weight:800;font-size:13px;padding:3px 10px;border-radius:999px}

/* works-vs-exam gap chart (2026-11-14): horizontal rows, two-line labels, no overlap at any width */
.gx{padding:14px 16px}
.gx-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.gx-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.gx-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr 84px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line-2)}
.gx-lab{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.gx-lab b{font-size:15px;color:var(--navy-800);overflow-wrap:anywhere}.gx-lab small{font-size:13px;color:var(--ink-2)}
.gx-bars{display:grid;gap:4px;min-width:0}
.gx-bar{position:relative;height:18px;background:#EEF1F5;border-radius:5px}
.gx-bar i{position:absolute;inset:0 0 0 auto;border-radius:5px}
.gx-bar span{position:absolute;inset-inline-start:6px;top:0;line-height:18px;font-size:12.5px;font-weight:800;color:#0B1A33;text-shadow:0 0 3px #fff}
.gx-gap{text-align:center;font-weight:800;font-size:18px;color:var(--navy-800);display:flex;flex-direction:column;line-height:1.15}
.gx-gap small{font-size:12px;font-weight:600;color:var(--ink-2)}
@media (max-width:620px){.gx-row{grid-template-columns:1fr 72px}.gx-lab{grid-column:1/-1}.gx-gap{font-size:16px}}

/* activity report + title links (2026-11-15): card title → report; thumbnail/gallery → lightbox */
.rep-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line-2)}
.rep-link:hover,.rep-link:focus-visible{color:var(--navy-800);border-bottom-color:var(--gold)}
.rep-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.rep-dl dt{color:var(--ink-2);font-weight:700}.rep-dl dd{margin:0}
.rep-gal .athumb{width:150px;height:150px}
@media (max-width:520px){.rep-gal .athumb{width:calc(50% - 4px);height:130px}}