/* Wiliam · Ascent Enterprise design language (v2)
One source of truth for every page. Derived from Wiliam's own "The Ascent" concept (Declan walkthrough)
and the Atlas: deep teal-black canvas, smoked-glass cards, cyan = action/current, gold = earned/complete,
amber = needs a person. Serif display for page titles only; Inter for all data; mono only for tiny eyebrows.
Load AFTER wiliam.css: */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../vendor/fonts/Inter-var.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(../vendor/fonts/CormorantGaramond-var.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(../vendor/fonts/JetBrainsMono-var.woff2) format("woff2")}
:root{
/* canvas + surfaces */
--a-canvas:#0B151B; --a-canvas-2:#0D181D; --a-surface:rgba(10,23,36,.82); --a-surface-2:rgba(17,35,58,.62); --a-surface-hi:rgba(22,44,70,.72);
--a-border:rgba(255,255,255,.10); --a-border-2:rgba(255,255,255,.16); --a-border-accent:rgba(22,230,242,.32);
/* semantic color */
--a-accent:#16E6F2; --a-on-accent:#06232B; --a-gold:#F2B441; --a-amber:#FF9A2E; --a-alert:#FF2D87; --a-ok:#10B981;
--a-text:#F4F6F8; --a-text-2:#AAB7C4; --a-text-3:#7E8C99;
/* product family */
--a-knckr:#2DD4BF; --a-mngr:#3B82F6; --a-rctr:#EC4899; --a-trnr:#FF8A2B; --a-wiliam:#22D3EE; --a-platform:#94A3B8;
/* type */
--a-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --a-display:"Cormorant Garamond","Iowan Old Style",Georgia,serif; --a-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
/* shape + depth + motion */
--a-r-card:16px; --a-r-row:12px; --a-r-pill:999px; --a-shadow:0 8px 32px rgba(0,0,0,.45); --a-glow:0 0 20px rgba(22,230,242,.35);
--a-ease:cubic-bezier(.22,.61,.36,1); --a-fast:160ms; --a-std:320ms; --a-slow:560ms;
/* map legacy tokens so existing pages inherit the new language without rewrites */
--void:var(--a-canvas); --cyan:var(--a-accent); --ivory:var(--a-text); --amber:var(--a-amber); --mut:var(--a-text-2); --slate:rgba(255,255,255,.12);
--surf:var(--a-surface); --surf-2:var(--a-surface-2); --hair:var(--a-border); --hair-2:var(--a-border-2);
}
html{background:var(--a-canvas)}
body{font-family:var(--a-font)!important;color:var(--a-text);background:radial-gradient(1200px 700px at 50% -10%,rgba(22,230,242,.06),transparent 60%),var(--a-canvas)!important;-webkit-font-smoothing:antialiased}
body,table,input,select,button,td{font-variant-numeric:tabular-nums}
/* ---------- page header: eyebrow + serif title + one-line subtitle ---------- */
.a-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:6px 0 22px}
.a-eyebrow{font:600 10.5px var(--a-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--a-text-3);margin:0 0 6px}
.a-title,.hello h1,main>h1,.page-title{font-family:var(--a-display)!important;font-weight:650!important;font-size:34px!important;line-height:1.05!important;letter-spacing:.005em;color:var(--a-text);margin:0}
.a-sub,.hello .s{font:400 14px var(--a-font);color:var(--a-text-2);margin-top:6px}
/* ---------- cards (smoked glass) ---------- */
.card,.a-card{background:var(--a-surface)!important;border:1px solid var(--a-border)!important;border-radius:var(--a-r-card)!important;box-shadow:var(--a-shadow)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card:hover,.a-card:hover{border-color:var(--a-border-2)!important}
.a-card.is-current,.card.is-current{border-color:var(--a-border-accent)!important;box-shadow:var(--a-shadow),var(--a-glow)!important}
.a-row{background:var(--a-surface-2);border:1px solid var(--a-border);border-radius:var(--a-r-row);padding:12px 14px}
/* KPI card (same anatomy as the Atlas holo card) */
.a-kpi{display:flex;flex-direction:column;gap:2px;padding:14px 16px}
.a-kpi .k-top{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--a-font);letter-spacing:.06em;text-transform:uppercase;color:var(--a-text-2)}
.a-kpi .k-dot{width:7px;height:7px;border-radius:50%;background:var(--a-accent)}.a-kpi.need .k-dot{background:var(--a-amber);box-shadow:0 0 8px var(--a-amber)}
.a-kpi .k-v{font:650 28px/1.1 var(--a-font);color:var(--a-text);display:flex;align-items:baseline;gap:8px;margin-top:4px}
.a-kpi .k-cap{font:400 12px var(--a-font);color:var(--a-text-3)}
/* section labels (replaces mono ALL CAPS walls) */
.eb,.a-section{font:600 12px var(--a-font)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--a-text-2)!important}
.card h3,.card .lbl,h3.lbl{font:600 13px var(--a-font)!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--a-text)!important}
.cap,.card .cap{font:400 12.5px var(--a-font)!important;color:var(--a-text-3)!important}
/* ---------- buttons ---------- */
.a-btn,.btn-primary,button.approve,.approve{font:600 13px var(--a-font);border-radius:var(--a-r-pill);padding:8px 16px;border:0;background:var(--a-accent);color:var(--a-on-accent);cursor:pointer;box-shadow:0 0 14px rgba(22,230,242,.25);transition:filter var(--a-fast) var(--a-ease),transform var(--a-fast) var(--a-ease)}
.a-btn:hover,.approve:hover{filter:brightness(1.08)}.a-btn:active,.approve:active{transform:scale(.98)}
.a-btn.ghost,button.reject,.reject{font:600 13px var(--a-font);border-radius:var(--a-r-pill);padding:7px 15px;background:transparent;color:var(--a-text);border:1px solid var(--a-border-2);cursor:pointer}
.a-btn.ghost:hover,.reject:hover{border-color:var(--a-text-2)}
/* ---------- chips / status ---------- */
.a-chip{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--a-font);letter-spacing:.02em;padding:3px 10px;border-radius:var(--a-r-pill);border:1px solid var(--a-border-2);background:rgba(255,255,255,.03);color:var(--a-text-2);white-space:nowrap}
.a-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.a-chip.ok{color:var(--a-ok);border-color:rgba(16,185,129,.35)}.a-chip.need{color:var(--a-amber);border-color:rgba(255,154,43,.4)}.a-chip.alert{color:var(--a-alert);border-color:rgba(255,45,135,.4)}.a-chip.done{color:var(--a-gold);border-color:rgba(242,180,65,.4)}.a-chip.current{color:var(--a-accent);border-color:var(--a-border-accent)}
/* journey / phase stepper: gold = done, cyan = current, dotted = future */
.a-steps{display:flex;align-items:center;gap:0}
.a-steps .s{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 11.5px var(--a-font);color:var(--a-text-3);flex:1;position:relative}
.a-steps .s::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px dashed var(--a-text-3);background:var(--a-canvas);z-index:1}
.a-steps .s::after{content:"";position:absolute;top:6px;left:50%;width:100%;height:1.5px;background:repeating-linear-gradient(90deg,var(--a-text-3) 0 4px,transparent 4px 8px)}
.a-steps .s:last-child::after{display:none}
.a-steps .s.done{color:var(--a-gold)}.a-steps .s.done::before{border:0;background:var(--a-gold)}.a-steps .s.done::after{background:var(--a-gold)}
.a-steps .s.current{color:var(--a-accent)}.a-steps .s.current::before{border:0;background:var(--a-accent);box-shadow:var(--a-glow)}
/* tables */
table{border-collapse:collapse}
table th{font:600 11px var(--a-font)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--a-text-3)!important;border-bottom:1px solid var(--a-border)!important}
table td{border-bottom:1px solid var(--a-border)!important;color:var(--a-text)}
tbody tr:hover td{background:rgba(255,255,255,.02)}
/* disclosure (declutter): …
…