:root{ /* AppGenie brand palette - STD-BRAND-APPGENIE Section 7 (canonical). Deep Navy + AppGenie Blue form the primary identity; Azure Accent is used for section/data accents only. */ --navy:#0A1B2B; --blue:#0E5F8C; --azure:#16B5D8; --slate:#64748B; --cloud:#F8FAFC; --compliance:#1E40AF; --graphite:#111827; --void:var(--navy); --deep:var(--navy); --panel:var(--graphite); --panel2:#0d2233; --line:rgba(100,116,139,.20); --line2:rgba(100,116,139,.34); --azure-dim:var(--blue); --ink:var(--cloud); --ink2:rgba(248,250,252,.64); --mute:var(--slate); --met:#2fbe8f; --part:#d69a34; --gap:#e26982; /* Semantic surfaces (dark defaults; overridden wholesale by html[data-theme="light"]). The hardcoded dark hex that used to be scattered through this file now resolve here so the whole page themes from one place, and the two canvas colours are readable per theme. */ --bg-glow:#0f2740; --sunk:#0a1a28; --track:#22303f; --chip:#0c1e2c; --tip:#0b1a27; --hero1:#0c2437; --hero2:#0a1723; --seg-on:#26384a; --tint-met:#0a2620; --tint-part:#241a08; --tint-gap:#2a0e15; --tint-info:#08202e; --cv-plot:#0d2233; --cv-dot:#F8FAFC; --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace; } /* ---- Light theme (default; set on by an early inline script) --------------------- */ html[data-theme="light"]{ --void:#eef2f6; --deep:#ffffff; --panel:#ffffff; --panel2:#f1f5f9; --ink:#0f1e2c; --ink2:#47586a; --mute:#6b7c8d; --line:rgba(15,30,46,.12); --line2:rgba(15,30,46,.20); --azure:#0E5F8C; --azure-dim:#0E5F8C; --bg-glow:#ffffff; --sunk:#e3e9f0; --track:#dce3ec; --chip:#eef3f8; --tip:#ffffff; --hero1:#eef4f9; --hero2:#e2ebf3; --seg-on:#d3dde7; --tint-met:#e4f6ee; --tint-part:#fbf0da; --tint-gap:#fbe6ea; --tint-info:#e4f0fa; --cv-plot:#eef2f6; --cv-dot:#0A1B2B; } /* On light, accent text sitting on pale tints needs darkening; filled CTAs need light text. */ html[data-theme="light"] .uh-cta, html[data-theme="light"] .tab.on, html[data-theme="light"] .modeseg button.on{color:#ffffff} html[data-theme="light"] .modeseg button.on span{color:rgba(255,255,255,.85)} html[data-theme="light"] .lv .lh .lvcount.l-met, html[data-theme="light"] .axis.gov, html[data-theme="light"] .imp-done, html[data-theme="light"] .e8chip-l3, html[data-theme="light"] .e8pill.e8chip-l3{color:#0a7a52} html[data-theme="light"] .lv .lh .lvcount.l-part, html[data-theme="light"] .e8chip-l1, html[data-theme="light"] .e8pill.e8chip-l1{color:#8a5a10} html[data-theme="light"] .axis.cap, html[data-theme="light"] .e8chip-l2, html[data-theme="light"] .e8pill.e8chip-l2{color:#0E5F8C} html[data-theme="light"] .e8chip-l0, html[data-theme="light"] .e8pill.e8chip-l0{color:#b0243c} html[data-theme="light"] .ki.gov .kc{color:#47586a} /* ---- Theme toggle (floating, bottom-right; visible in every tier) ---------------------- */ .theme-toggle{position:fixed;bottom:16px;right:16px;z-index:100;display:inline-flex;align-items:center;gap:7px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; background:var(--chip);border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:7px 12px; cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)} .theme-toggle:hover{border-color:var(--azure);color:var(--ink)} .theme-toggle .tt-dot{width:10px;height:10px;border-radius:50%;background:var(--azure);box-shadow:inset 0 0 0 2px var(--panel)} .theme-toggle:focus-visible{outline:2px solid var(--azure);outline-offset:2px} *{box-sizing:border-box} html,body{margin:0} body{background:radial-gradient(1200px 700px at 78% -10%, var(--bg-glow) 0%, var(--void) 60%) fixed,var(--void); color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--azure);opacity:.85} a{color:var(--azure)} header{padding:26px 30px 8px;max-width:1240px;margin:0 auto} header h1{margin:6px 0 4px;font-size:26px;font-weight:700;letter-spacing:-.02em;text-wrap:balance} header .lede{color:var(--ink2);font-size:13px;max-width:70ch} main{max-width:1240px;margin:0 auto;padding:14px 30px 80px} .console{display:grid;grid-template-columns:1fr 1fr 340px;gap:16px;align-items:stretch;margin:14px 0 8px} @media(max-width:1080px){.console{grid-template-columns:1fr 1fr}.console .readout{grid-column:1/-1}} @media(max-width:760px){.console{grid-template-columns:1fr}} .instrument{background:linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);border:1px solid var(--line); border-radius:14px;padding:14px 14px 8px;position:relative;overflow:hidden} .instrument .cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .instrument .cap .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)} .instrument canvas{width:100%;height:auto;display:block} .readout{background:linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px} .bigscore{display:flex;gap:18px} .bigscore .b{flex:1} .bigscore .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)} .bigscore .v{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.05} .bigscore .v small{font-size:15px;color:var(--mute)} .quad-name{font-family:var(--mono);font-size:12px;color:var(--azure);letter-spacing:.02em} .quad-desc{font-size:11.5px;color:var(--ink2);line-height:1.4;margin-top:4px;max-width:36ch} .prog{height:6px;background:var(--sunk);border-radius:4px;overflow:hidden} .prog>i{display:block;height:100%;background:linear-gradient(90deg,var(--azure-dim),var(--azure));transition:width .5s cubic-bezier(.2,.7,.2,1)} .tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .btn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--chip);border:1px solid var(--line2); color:var(--ink2);border-radius:8px;padding:7px 11px;cursor:pointer} .btn:hover{border-color:var(--azure-dim);color:var(--ink)} .btn:focus-visible,.seg button:focus-visible,summary:focus-visible{outline:2px solid var(--azure);outline-offset:2px} .grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px} .dim{background:linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);border:1px solid var(--line);border-radius:14px;overflow:hidden} .dim>summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;flex-direction:column;gap:10px} .dim>summary::-webkit-details-marker{display:none} .dim .hd{display:flex;justify-content:space-between;align-items:center;gap:10px} .dim .nm{font-weight:650;font-size:14.5px;letter-spacing:-.01em} .dim .lvl{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent} .strip{display:flex;gap:4px} .strip .s{flex:1;height:7px;border-radius:3px;background:var(--sunk);position:relative;overflow:hidden} .strip .s>i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1)} .strip .s.on>i{transform:scaleX(1);background:var(--azure)} .strip .s.part>i{transform:scaleX(1);background:var(--azure);opacity:.42} .strip .s.ach>i{transform:scaleX(1);background:linear-gradient(90deg,var(--met),var(--azure))} .dim .sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .body{border-top:1px solid var(--line);padding:4px 16px 14px} .lv{padding:12px 0;border-bottom:1px solid var(--line)} .lv:last-child{border-bottom:none} .lv .lh{display:flex;align-items:center;gap:10px;margin-bottom:4px} .lv .code{font-family:var(--mono);font-size:11px;color:var(--azure);border:1px solid var(--line2);border-radius:6px;padding:1px 7px} .lv .ln{font-weight:600;font-size:13px} .lv .desc{color:var(--ink2);font-size:12.5px;margin:0 0 8px} .lv .lh .lvcount{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:2px 9px;white-space:nowrap} .lv .lh .lvcount.l-met{color:#37d6a3;border-color:#1c5c48;background:var(--tint-met)} .lv .lh .lvcount.l-part{color:#f0a83d;border-color:#5c4a1c;background:var(--tint-part)} .qs{margin-left:12px;padding-left:14px;border-left:2px solid var(--line)} .q{padding:9px 0;border-top:1px dashed var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap} .q .txt{font-size:13px;color:var(--ink);flex:1;min-width:0} .dimrefs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px} .dimrefs .drk{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:2px} .dimrefs code,.rem code,.qwhy .qwr code{font-family:var(--mono);font-size:10.5px;background:var(--chip);border:1px solid var(--line);color:var(--ink2);border-radius:5px;padding:1px 6px} .stdpill{cursor:help} .stdpill:hover{border-color:var(--azure);color:var(--ink)} .stdtip{position:absolute;z-index:60;width:320px;max-width:calc(100vw - 24px);background:var(--tip);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;box-shadow:0 12px 34px rgba(0,0,0,.55);pointer-events:none} .stdtip .tt-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--azure);margin-bottom:6px} .stdtip .tt-h span{color:var(--ink2)} .stdtip .tt-b{font-size:12px;line-height:1.5;color:var(--ink2)} .seg{display:inline-flex;flex:0 0 auto;border:1px solid var(--line2);border-radius:9px;overflow:hidden} .seg button{font-family:var(--mono);font-size:11px;letter-spacing:.05em;background:transparent;color:var(--ink2);border:0;border-left:1px solid var(--line2);padding:6px 12px;cursor:pointer} .seg button:first-child{border-left:0} .seg button.on-met{background:var(--met);color:#052018} .seg button.on-part{background:var(--part);color:#241701} .seg button.on-no{background:var(--seg-on);color:var(--ink)} .seg button.on-dk{background:var(--tint-info);color:var(--azure)} .qcomment{flex:1 0 100%;width:100%;box-sizing:border-box;margin-top:9px;font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--ink);background:var(--chip);border:1px solid var(--line2);border-radius:8px;padding:7px 9px;resize:vertical} .qcomment:focus{outline:2px solid var(--azure);outline-offset:1px} .qcomment::placeholder{color:var(--mute)} /* Per-signal "Why this matters" + Standards line (#1673). Full-width row under the question. */ .qwhy{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin-top:2px;font-size:12px;color:var(--ink2);line-height:1.5} .qwhy .qwk{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);flex:0 0 auto;padding-top:1px} .qwhy .qwd{flex:1 1 240px;min-width:0} .qwhy .qwr{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;gap:6px} /* Small-group stepper (#1673 Slice B): one level's signals at a time, with progress dots + nav. */ .stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px} .stepdots{display:inline-flex;gap:6px;flex-wrap:wrap} .stepdot{font-family:var(--mono);font-size:11px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--chip);color:var(--ink2);cursor:pointer;padding:0;line-height:1;text-align:center} .stepdot:hover{border-color:var(--azure);color:var(--ink)} .stepdot.done{border-color:var(--met);color:var(--met)} .stepdot.on{background:var(--azure);border-color:var(--azure);color:#052018} .stepdot.on.done{background:var(--met);border-color:var(--met);color:#052018} .stepmeta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .stepnav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px} .stepnav .stepprog{font-size:12px;color:var(--ink2);text-align:center;flex:1 1 auto} .stepbtn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;background:var(--chip);color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:8px 14px;cursor:pointer} .stepbtn:hover:not([disabled]){border-color:var(--azure)} .stepbtn[disabled]{opacity:.4;cursor:default} .rem{margin-top:12px;font-size:12px;color:var(--ink2);display:flex;gap:8px;align-items:flex-start} .rem .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:2px;white-space:nowrap} .dataprot{margin-top:26px;border-top:1px solid var(--line2);padding-top:14px;color:var(--ink2);font-size:12px;line-height:1.6;max-width:80ch} .dataprot .dp-h{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px} .foot{margin-top:14px;color:var(--mute);font-size:11px;font-family:var(--mono)} /* ---- anonymous teaser ---- */ .unlock-hero{margin-top:14px;background:linear-gradient(135deg,var(--hero1),var(--hero2));border:1px solid var(--line2);border-radius:16px;padding:24px 26px} .unlock-hero .uh-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--azure);margin-bottom:8px} .unlock-hero h2{margin:0 0 8px;font-size:22px;letter-spacing:-.01em;color:var(--ink)} .unlock-hero p{margin:0 0 16px;color:var(--ink2);font-size:13.5px;line-height:1.6;max-width:78ch} .uh-cta{font-family:var(--mono);font-size:12px;letter-spacing:.03em;background:var(--azure);color:#052330;border:0;border-radius:9px;padding:11px 18px;font-weight:650;cursor:pointer} .uh-cta:hover{filter:brightness(1.08)} .uh-cta.sm{padding:9px 14px;font-size:11px} .tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px} @media(max-width:820px){.tgrid{grid-template-columns:1fr}} .tcard{background:linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);border:1px solid var(--line);border-radius:14px;padding:16px} .tc-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px} .tc-nm{font-weight:650;font-size:14.5px;letter-spacing:-.01em} .tc-ab{color:var(--ink2);font-size:12.5px;line-height:1.5;margin:0 0 12px} .tc-q{border-top:1px dashed var(--line);padding-top:11px} .tc-ql{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:5px} .tc-q .txt{font-size:13px;color:var(--ink);margin-bottom:9px} .tc-lock{margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--mute);cursor:pointer;display:flex;gap:6px;align-items:center} .tc-lock span{color:var(--azure);border-bottom:1px dotted var(--azure)} .tc-lock::before{content:'LOCKED';font-size:8px;letter-spacing:.1em;border:1px solid var(--line2);border-radius:4px;padding:1px 5px;color:var(--mute)} .locked-panel{margin-top:16px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:repeating-linear-gradient(135deg,var(--tip),var(--tip) 10px,var(--chip) 10px,var(--chip) 20px);border:1px dashed var(--line2);border-radius:14px;padding:18px 20px} .locked-panel .lp-h{font-size:14.5px;font-weight:650;color:var(--ink);margin-bottom:5px} .locked-panel .lp-b{color:var(--ink2);font-size:12.5px;line-height:1.55;max-width:64ch} .teaser-note{font-size:11px;line-height:1.5;color:var(--mute);border-top:1px dashed var(--line);padding-top:10px;margin-top:2px} .soft{margin-top:10px;font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:7px;flex-wrap:wrap} .soft .ring{width:11px;height:11px;border:1.4px solid var(--azure);border-radius:50%;display:inline-block;background:rgba(22,181,216,.12)} .soft b{color:var(--ink);font-family:var(--mono);font-weight:600} .soft .g{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--mute)} .legend{margin-top:8px;display:flex;gap:14px;flex-wrap:wrap;font-size:10px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .legend span{display:inline-flex;align-items:center;gap:5px} .legend i{width:9px;height:9px;border-radius:50%;display:inline-block} .legend .dot{background:var(--azure);box-shadow:0 0 0 2px rgba(22,181,216,.25)} .legend .rng{border:1.4px solid var(--azure);background:rgba(22,181,216,.12)} .legend .base{background:rgba(100,116,139,.4)} .addendum{margin-top:24px;border-top:1px solid var(--line2);padding-top:16px} .ad-h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:13px} .key{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px 20px} .ki{display:flex;align-items:baseline;gap:10px;font-size:12px} .ki .kc{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--ink);background:var(--chip);border:1px solid var(--line2);border-radius:5px;padding:2px 7px;white-space:nowrap;min-width:82px;text-align:center} .ki.cap .kc{border-color:rgba(22,181,216,.5);color:var(--azure)} .ki.gov .kc{border-color:rgba(148,163,184,.45);color:#cbd5e1} .ki .kn{color:var(--ink2)} .ki .kx{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap} .roadmap{margin-top:26px;border-top:1px solid var(--line2);padding-top:16px} .assess{margin-top:26px;border-top:1px solid var(--line2);padding-top:16px} .tsummary{color:var(--ink2);font-size:13px;line-height:1.6;max-width:72ch} .tsummary p{margin:0 0 10px} .tsummary .ts-lead{color:var(--ink);font-size:14.5px;font-weight:650;margin-bottom:12px} .tsummary .ts-note{font-size:12.5px;margin:0 0 14px} .tsummary b{color:var(--ink)} .statrow{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 16px} .stat{flex:1 1 130px;background:linear-gradient(180deg,var(--chip),var(--hero2));border:1px solid var(--line2);border-radius:11px;padding:11px 14px} .stat .sv{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink);line-height:1} .stat .sv small{font-size:11px;color:var(--mute);font-weight:400} .stat .sl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:6px} .dimhead{margin-bottom:10px} .dimmeta{display:flex;gap:8px;align-items:center;margin:7px 0 10px;flex-wrap:wrap} .axis{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid transparent} .axis.cap{color:#16B5D8;background:var(--tint-info);border-color:#1d5570} .axis.gov{color:#37d6a3;background:var(--tint-met);border-color:#1c5c48} .acode{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--mute)} .dimabout{color:var(--ink2);font-size:13px;line-height:1.55;margin:0 0 14px;max-width:72ch} .tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .tab{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink2);background:var(--chip);border:1px solid var(--line2);border-radius:7px;padding:7px 11px;cursor:pointer;white-space:nowrap} .tab:hover{border-color:rgba(22,181,216,.5);color:var(--ink)} .tab.on{background:var(--azure);color:#052330;border-color:var(--azure);font-weight:600} .improve{margin-top:14px} .imp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap} .imp-dim{font-size:15px;color:var(--ink);font-weight:600} .imp-lv{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .imp-impact{margin:8px 0 12px;padding:10px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--tint-info);color:var(--ink2);font-size:13px;line-height:1.55} .imp-impact b{color:var(--azure);font-weight:600} .imp{display:flex;gap:12px;padding:11px 0;border-top:1px solid rgba(100,116,139,.12)} .imp-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--chip);border:1px solid var(--line2);color:var(--azure);font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center} .imp-body{flex:1;min-width:0} .imp-q{font-size:13px;color:var(--ink);line-height:1.5} .imp-meta{margin-top:7px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .imp-lvl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .st{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:4px} .st-partial{color:#241701;background:var(--part)} .st-no{color:var(--ink);background:var(--seg-on)} .st-unanswered{color:var(--mute);background:var(--chip);border:1px solid var(--line2)} .st-dk{color:var(--azure);background:var(--tint-info)} .ref{font-family:var(--mono);font-size:9px;color:var(--ink2);background:var(--tint-info);border:1px solid rgba(22,181,216,.3);border-radius:4px;padding:2px 6px} .imp-do{margin-top:9px;display:flex;gap:10px;align-items:baseline;padding:9px 12px;background:rgba(22,181,216,.08);border-left:2px solid var(--azure);border-radius:0 8px 8px 0} .do-k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--azure);flex:0 0 auto;padding-top:2px} .do-t{font-size:13px;color:var(--ink);line-height:1.5;font-weight:500} .ctls{margin-top:9px;display:flex;flex-direction:column;gap:6px} .ctl{border:1px solid var(--line2);border-radius:8px;background:var(--chip);overflow:hidden} .ctl>summary{cursor:pointer;list-style:none;padding:8px 11px;display:flex;align-items:center;gap:9px} .ctl>summary::-webkit-details-marker{display:none} .ctl>summary::before{content:'+';font-family:var(--mono);font-weight:700;color:var(--mute);width:9px} .ctl[open]>summary::before{content:'-'} .ctl>summary:hover .ctl-ref{color:var(--ink)} .ctl-ref{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--azure)} .ctl-hint{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .ctl[open] .ctl-hint{opacity:0} .ctl-b{padding:0 12px 12px 12px} .ctl-doc{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--ink2);margin:2px 0 8px;padding-top:9px;border-top:1px solid rgba(100,116,139,.14)} .ctl-t{font-size:12px;color:var(--ink2);line-height:1.6;white-space:pre-wrap} .imp-done{font-size:13px;color:#37d6a3;padding:10px 0} .client{color:var(--ink2)} header{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap} .head-main{flex:1 1 340px;min-width:280px} .assurance{flex:0 0 auto;text-align:right;border:1px solid var(--line2);border-radius:14px;padding:15px 18px 14px;background:linear-gradient(180deg,var(--chip),var(--hero2));min-width:160px} .ai-num{font-family:var(--mono);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.02em;color:var(--azure)} .ai-num small{font-size:15px;color:var(--mute);font-weight:400;letter-spacing:0} .ai-lab{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-top:8px} .ai-axes{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink2);margin-top:6px} .ai-axes b{color:var(--ink);font-weight:600} .ai-bar{height:4px;border-radius:2px;background:var(--track);margin-top:9px;overflow:hidden} .ai-bar i{display:block;height:100%;width:0;border-radius:2px;transition:width .35s ease} .ai-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--mute);margin-top:7px} #notice{display:none;margin:14px 0 0;padding:10px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--chip);color:var(--ink2);font-size:12.5px;line-height:1.5} /* Organisation capture + submit (authenticated full console) */ .orgcap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:18px} .orgcap .oc-lede{color:var(--ink2);font-size:13px;margin:6px 0 14px;max-width:60ch} .oc-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end} .oc-field{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)} .oc-field select{min-width:210px;padding:9px 10px;background:var(--deep);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:13px;text-transform:none;letter-spacing:normal} .oc-field select:focus-visible{outline:2px solid var(--azure);outline-offset:2px} .oc-msg{margin-top:12px;font-size:13px;color:var(--ink2);min-height:18px} .oc-result{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} .oc-result .ocr-h{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)} .oc-result .ocr-lede{color:var(--ink2);font-size:13px;margin:6px 0 14px;max-width:60ch} .ocr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .ocr-actions a.uh-cta[aria-disabled="true"]{opacity:.5;pointer-events:none} .ocr-status{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:16px} .ocr-countdown{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink2)} .ocr-countdown.expired{color:var(--azure-dim)} .ocr-spinner{flex:0 0 auto;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--azure);animation:ocrspin .7s linear infinite} @keyframes ocrspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.ocr-spinner{animation:none}} /* Benchmark - "how you compare" (authenticated full console) */ .benchmark{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:18px} .benchmark .bm-lede{color:var(--ink2);font-size:13px;margin:6px 0 16px;max-width:64ch} .bm-row{margin:14px 0} .bm-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink);margin-bottom:6px} .bm-head span:last-child{color:var(--ink2);font-size:11px} .bm-seed{font-style:italic} .bm-track{position:relative;height:16px;background:var(--deep);border:1px solid var(--line);border-radius:8px} .bm-band{position:absolute;top:0;height:100%;background:rgba(80,150,240,.20);border-left:1px solid rgba(80,150,240,.4);border-right:1px solid rgba(80,150,240,.4)} .bm-med{position:absolute;top:-2px;height:calc(100% + 4px);width:2px;background:var(--ink2)} .bm-you{position:absolute;top:-3px;height:calc(100% + 6px);width:3px;background:var(--met);border-radius:2px;transition:left .25s ease} .bm-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--ink2);margin-top:5px} /* Level explainer - "what the levels mean" */ .levels{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:18px 0} .levels .lv-lede{color:var(--ink2);font-size:13px;margin:6px 0 14px;max-width:70ch} .lv-grid{display:flex;flex-direction:column;gap:8px} .lv-row{display:grid;grid-template-columns:28px 112px 1fr;align-items:center;gap:12px} .lv-n{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#0b0f14} .lv-n.l1{background:#e5484d}.lv-n.l2{background:#f0a83d}.lv-n.l3{background:#d9cf52}.lv-n.l4{background:#5aa9e6}.lv-n.l5{background:#37d6a3} .lv-name{font-weight:600;font-size:13px;color:var(--ink)} .lv-mean{color:var(--ink2);font-size:13px} .lv-note{margin-top:14px;padding:12px 14px;border-left:3px solid var(--azure);background:var(--deep);border-radius:8px;font-size:13px;color:var(--ink2);line-height:1.5} .lv-note b{color:var(--ink)} @media(max-width:640px){.lv-row{grid-template-columns:26px 1fr;grid-template-areas:'n name' 'n mean'}.lv-n{grid-area:n}.lv-name{grid-area:name}.lv-mean{grid-area:mean}} /* ---- Essential Eight quick assessment (gated) ---------------------------- */ /* View toggle: Essential Eight | ISO 9001 | Comprehensive. Lead with Essential Eight; #fullview holds the comprehensive console. The .assurance meter is full-view only. */ #e8view{display:block} #iso9001view{display:none} #fullview{display:none} main[data-view="full"] #e8view{display:none} main[data-view="full"] #iso9001view{display:none} main[data-view="full"] #fullview{display:block} main[data-view="iso9001"] #e8view{display:none} main[data-view="iso9001"] #fullview{display:none} main[data-view="iso9001"] #iso9001view{display:block} main[data-view="e8"] .assurance,main[data-view="iso9001"] .assurance{display:none} .modeseg{margin:16px 0 4px;border-radius:11px} .modeseg button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:9px 16px;line-height:1.3} .modeseg button span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .modeseg button.on{background:var(--azure);color:#052330} .modeseg button.on span{color:#063245;opacity:.85} .e8-hero{margin-top:12px} .e8-hero h2{font-size:21px} .e8-summary{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:16px 0 4px; background:linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .e8-score{min-width:210px} .e8-ml{font-family:var(--mono);font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--azure)} .e8-ml span{color:var(--ink)} .e8-mllab{font-size:12px;color:var(--ink2);margin-top:4px} .e8-score .ai-bar{max-width:220px} .e8-score .ai-bar i{background:linear-gradient(90deg,var(--blue),var(--azure))} .e8-chips{display:flex;flex-wrap:wrap;gap:7px;flex:1} .e8pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;border:1px solid var(--line2);border-radius:999px;padding:3px 9px;color:var(--ink2)} .e8pill b{color:var(--ink);margin-left:2px} /* Maturity-level colour ramp: 0 gap, 1 amber, 2 blue, 3 green */ .e8chip-unset{border-color:var(--line2);color:var(--mute)} .e8chip-l0,.e8pill.e8chip-l0{border-color:#5c2230;background:var(--tint-gap);color:#f0889a} .e8chip-l1,.e8pill.e8chip-l1{border-color:#5c4a1c;background:var(--tint-part);color:#f0a83d} .e8chip-l2,.e8pill.e8chip-l2{border-color:#1f4a6b;background:var(--tint-info);color:#5cc4e6} .e8chip-l3,.e8pill.e8chip-l3{border-color:#1c5c48;background:var(--tint-met);color:#37d6a3} .e8chip-dk,.e8pill.e8chip-dk{border-color:var(--line2);background:var(--chip);color:var(--azure)} #e8root{display:flex;flex-direction:column;gap:12px;margin:16px 0} .e8card{background:linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);border:1px solid var(--line);border-radius:14px;padding:14px 16px} .e8card.answered{border-color:var(--line2)} .e8card-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px} .e8n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--chip);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--azure)} .e8t{flex:1;min-width:0} .e8title{font-weight:650;font-size:15px;letter-spacing:-.01em} .e8why{color:var(--ink2);font-size:12.5px;margin-top:2px} .e8chip{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;border:1px solid var(--line2);border-radius:999px;padding:2px 9px;white-space:nowrap} .e8opts{display:flex;flex-direction:column;gap:7px} .e8opt{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s} .e8opt:hover{border-color:var(--line2);background:var(--chip)} .e8opt input{margin-top:2px;accent-color:var(--azure)} .e8opt-ml{font-family:var(--mono);font-size:11px;color:var(--azure);border:1px solid var(--line2);border-radius:6px;padding:1px 6px;flex:0 0 auto} .e8opt-txt{font-size:13px;color:var(--ink2);line-height:1.5} .e8opt:has(input:checked){border-color:var(--azure);background:var(--tint-info)} .e8opt:has(input:checked) .e8opt-txt{color:var(--ink)} .e8-get{margin-top:6px} .e8-gatenote{color:var(--part);font-size:12px}