/* ===== Profinity Command — shared report design system =====
   Same visual language as CEO_Dashboard.html (Linear/Stripe/Tufte). */
:root{
  /* Cream / navy / gold — matched to the PROfinity Academy logo */
  --bg:#F4EEE0; --bg2:#EBE3D2; --panel:#FFFDF8; --panel2:#F7F1E4; --raise:#FCF8EF;
  --bd:rgba(22,33,63,.12); --bd2:rgba(22,33,63,.22); --bdAccent:rgba(22,48,104,.34);
  --t1:#15233F; --t2:#44506A; --t3:#737B8C; --t4:#9097A6;
  --accent:#1E3D70; --accent2:#2B5193; --accentDim:rgba(30,61,112,.10);
  --pos:#2E8B57; --posBg:rgba(46,139,87,.13);
  --warn:#B07D27; --warnBg:rgba(176,125,39,.15);
  --neg:#C0432F; --negBg:rgba(192,67,47,.11);
  --teal:#2E8E9A;
  --gold:#B8893A; --gold-lt:#94701E; --gold-deep:#73591A; --goldGrad:linear-gradient(180deg,#C9A24A,#9A7B2E 65%,#73591A);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable','Segoe UI',system-ui,sans-serif;
  --r:14px; --r2:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--t1);font-family:var(--font);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;min-height:100vh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1150px 720px at 84% -12%, rgba(201,162,74,.13), transparent 60%),
    radial-gradient(920px 640px at -14% 2%, rgba(30,61,112,.07), transparent 56%),
    radial-gradient(800px 620px at 104% 104%, rgba(201,162,74,.08), transparent 60%),
    radial-gradient(680px 560px at 2% 112%, rgba(30,61,112,.05), transparent 60%),
    linear-gradient(176deg, #F8F2E6 0%, #F4EDDD 46%, #F0E7D4 100%);}
/* fine grain overlay (inline SVG, no request) — kills banding, adds a premium texture */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.num{font-variant-numeric:tabular-nums lining-nums}
main{max-width:1060px;margin:0 auto;padding:0 26px 90px}
a{color:var(--accent2)}
:where(input,textarea,select):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
:where(button,.btn,a,.term,[tabindex]):focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}

/* topbar */
#top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;padding:14px 26px;margin:0 -26px 10px;
  background:linear-gradient(180deg, rgba(246,240,228,.93), rgba(246,240,228,.72));backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--bd)}
.logo{display:flex;align-items:center;gap:11px}
.mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(150deg,#23457e,#15233F);position:relative;box-shadow:0 1px 3px rgba(20,30,60,.28);flex:none}
.mark::after{content:"";position:absolute;inset:6px;border-radius:3px;border:2px solid var(--gold);border-right-color:transparent;border-bottom-color:transparent}
.logo b{font-size:15px;font-weight:700}
.logo span{font-size:11px;color:var(--t3);display:block;margin-top:-2px}
/* Profinity logo — the WHITE monogram + "PROfinity" mark, straight onto the dark theme */
.logoplate{display:inline-flex;align-items:center;flex:none}
.brandlogo{height:30px;width:auto;display:block}
.logoplate.lg .brandlogo{height:56px}
/* parent-brand endorsement: "A programme by [Profinity Academy]" */
.endorse{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.endorse img{height:24px;width:auto;display:block}
/* brain identity: client photo (avatar) + clinic logo */
.brandhead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.brandhead .clinic-logo{max-height:46px;max-width:210px;width:auto;border-radius:8px;background:#fff;padding:5px 9px;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.brandhead .avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--bdAccent);margin-left:auto;box-shadow:0 2px 12px rgba(0,0,0,.3)}
/* brand-asset upload tiles (onboarding + intake) */
.brandtiles{display:flex;gap:16px;margin-top:8px}
.btile{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:11.5px;color:var(--t3)}
.btile .pv{width:76px;height:76px;border-radius:10px;border:1px dashed var(--bd2);background:var(--bg2) center/cover no-repeat;display:grid;place-items:center;transition:border-color .15s}
.btile .pv.round{border-radius:50%}
.btile .pv::after{content:"＋";color:var(--t3);font-size:22px}
.btile .pv.has{border-style:solid;border-color:var(--bdAccent)}
.btile .pv.has::after{content:""}
.btile:hover .pv{border-color:var(--accent2)}
#top .sp{flex:1}
.pill{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--bd2);color:var(--t2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--pos);border-color:rgba(63,185,126,.3);background:var(--posBg)}
.pill.warn{color:var(--warn);border-color:rgba(224,165,59,.3);background:var(--warnBg)}
.pill.crit{color:var(--neg);border-color:rgba(240,97,109,.35);background:var(--negBg)}
.btn{font-size:12px;font-weight:600;color:var(--t2);background:var(--panel2);border:1px solid var(--bd);border-radius:8px;padding:7px 12px;cursor:pointer;text-decoration:none;transition:.16s;white-space:nowrap}
.btn:hover{color:var(--t1);border-color:var(--bd2);background:var(--raise)}
.btn.go{color:#fff;border-color:#1b3766;background:linear-gradient(180deg,#274d8c,#1b3766);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 18px -6px rgba(20,40,90,.42)}
.btn.go:hover{color:#fff;border-color:#15233F;background:linear-gradient(180deg,#2a548f,#19315c)}

/* report masthead */
.rhead{margin:22px 0 6px}
.rhead .kick{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gold-lt);text-transform:uppercase}
.rhead h1{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:5px 0 4px;color:var(--t1)}
.rhead .sub{font-size:13px;color:var(--t3)}

/* lede / verdict hero */
.lede{margin:16px 0 6px;padding:18px 22px;border-radius:var(--r);border:1px solid var(--bdAccent);
  background:linear-gradient(100deg, var(--accentDim), transparent 62%);box-shadow:0 1px 2px rgba(20,30,60,.04),0 18px 44px -24px rgba(30,61,112,.26)}
.lede .lbl{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--gold-lt);text-transform:uppercase;margin-bottom:7px}
.lede p{font-size:16.5px;line-height:1.62;color:var(--t1);max-width:66ch}
.lede.warn{border-color:rgba(224,165,59,.4);background:linear-gradient(100deg, var(--warnBg), transparent 60%)}
.lede.warn .lbl{color:var(--warn)}

/* sections */
.sec{display:flex;align-items:baseline;gap:12px;margin:28px 2px 12px}
.sec h2{font-size:13px;font-weight:700;color:var(--t1)}
.sec .s{font-size:12.5px;color:var(--t3)}
.sec .line{flex:1;height:1px;background:var(--bd);align-self:center}
.sec .lyr{font-family:var(--font);font-size:11px;font-weight:800;color:var(--accent2);background:var(--accentDim);border:1px solid var(--bdAccent);border-radius:7px;width:24px;height:24px;display:grid;place-items:center;flex:none}

.panel{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 1px 2px rgba(20,30,60,.05),0 14px 34px -20px rgba(20,30,60,.16)}
.pad{padding:18px 20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

/* KPI cards */
.kpis{display:grid;gap:12px}
.kpis.c4{grid-template-columns:repeat(4,1fr)} .kpis.c3{grid-template-columns:repeat(3,1fr)} .kpis.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:820px){.kpis.c4,.kpis.c5,.kpis.c3{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:14px 15px 12px}
.kpi .lab{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--t3);text-transform:uppercase}
.kpi .val{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:5px}
.kpi .val.warn{color:var(--warn)}.kpi .val.neg{color:var(--neg)}.kpi .val.pos{color:var(--pos)}
.kpi .sub{font-size:11.5px;color:var(--t3);margin-top:3px}
.kpi .sub b{color:var(--t2)}
.kpi .spark{margin-top:9px}

/* chart bits */
svg{display:block;width:100%;height:auto;overflow:visible}
.chart-title{font-size:14px;font-weight:600}
.chart-cap{font-size:11.5px;color:var(--t3);margin-top:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--t2);margin-top:10px}
.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.legend .dash{height:0;border-top:2px dashed currentColor;opacity:.7}
.ctx{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ctxc{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r2);padding:10px 12px}
.ctxc .l{font-size:10px;color:var(--t3);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.ctxc .v{font-size:17px;font-weight:700;margin-top:2px}
.ctxc .v.neg{color:var(--neg)}.ctxc .v.warn{color:var(--warn)}
#tip{position:fixed;z-index:200;pointer-events:none;opacity:0;transition:opacity .12s;background:#FFFDF8;border:1px solid var(--bd2);border-radius:9px;padding:9px 11px;font-size:12px;box-shadow:0 12px 30px rgba(20,30,60,.20);min-width:120px}
#tip .th{font-size:11px;color:var(--t3);font-weight:600;margin-bottom:5px}
#tip .tr{display:flex;justify-content:space-between;gap:16px;margin:2px 0}
#tip .tr .k{display:flex;align-items:center;gap:6px;color:var(--t2)} #tip .tr .k i{width:8px;height:8px;border-radius:2px}
#tip .tr .vv{font-weight:700;font-variant-numeric:tabular-nums}

/* directives / lists */
.dir{display:flex;gap:13px;align-items:flex-start;padding:13px 14px;border-bottom:1px solid var(--bd)}
.dir:last-child{border-bottom:none}
.dir .mk{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.dir .t{font-size:14.5px;font-weight:600;color:var(--t1)}
.dir .w{font-size:12px;color:var(--t3);margin-top:2px}
.dir .b{flex:none;margin-left:auto;align-self:center;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap}
.b.hard{color:var(--neg);background:var(--negBg)} .b.blocking{color:var(--warn);background:var(--warnBg)}
.lst{list-style:none}
.lst li{font-size:13px;color:var(--t2);margin:8px 0;padding-left:18px;position:relative}
.lst li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.lst.shipped li::before{background:var(--pos)}

/* calendar */
.cal-h{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--accent2);text-transform:uppercase;margin:14px 0 7px}
.cal-h:first-child{margin-top:0}
.cal{display:flex;gap:13px;padding:7px 0;border-bottom:1px solid var(--bd);font-size:13.5px}
.cal:last-child{border:none}
.cal .tm{font-variant-numeric:tabular-nums;color:var(--accent2);font-size:11.5px;font-weight:600;white-space:nowrap;min-width:96px;padding-top:1px}

/* alerts */
.alert{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:var(--r2);margin-bottom:7px;font-size:13px;border:1px solid}
.alert.amber{border-color:rgba(224,165,59,.28);background:var(--warnBg)}
.alert.red{border-color:rgba(240,97,109,.3);background:var(--negBg)}
.alert b{color:var(--t1)}.alert .s{font-size:11.5px;color:var(--t3)}
.alert .who{margin-left:auto;font-size:10.5px;color:var(--t4);white-space:nowrap;font-weight:600}

/* funnel */
.fnl{margin-bottom:15px}.fnl:last-child{margin-bottom:2px}
.fnl .fh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.fnl .fn{font-size:13px;font-weight:600;color:var(--t1)}.fnl .fv{font-size:12.5px;color:var(--t2);font-weight:600}
.track{height:9px;background:var(--bg2);border-radius:6px;position:relative;border:1px solid var(--bd)}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.track .tgt{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--t1)}

/* narrative */
.note{font-size:14px;color:var(--t2);line-height:1.65;max-width:68ch}
.note b{color:var(--t1)}
.headline{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.headline .ic{font-size:13px;flex:none;margin-top:2px}
.headline .h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.headline .x{font-size:13.5px;color:var(--t1)}

/* flight path */
#fp{position:relative;padding:8px 6px 4px}
#fp .rail{position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,transparent,var(--bd2) 12%,var(--bd2) 88%,transparent)}
.fpg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;position:relative}
.fpc{text-align:center}
.fpc .dt{font-size:11.5px;font-weight:700;color:var(--t2)}
.fpc .nd{width:14px;height:14px;border-radius:50%;margin:9px auto;border:2px solid;background:var(--bg);position:relative;z-index:2}
.fpc.on .nd{border-color:var(--pos);box-shadow:0 0 0 4px var(--posBg)}
.fpc.risk .nd{border-color:var(--warn);box-shadow:0 0 0 4px var(--warnBg)}
.fpc.blocked .nd{border-color:var(--neg);box-shadow:0 0 0 4px var(--negBg)}
.fpc .nm{font-size:14px;font-weight:600;color:var(--t1)}
.fpc .tg{font-size:17px;font-weight:700;margin:3px 0}
.fpc.on .tg{color:var(--pos)}.fpc.risk .tg{color:var(--warn)}.fpc.blocked .tg{color:var(--neg)}
.fpc .nt{font-size:11px;color:var(--t3)}
.fpc .pl{display:inline-block;margin-top:6px;font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.fpc.on .pl{color:var(--pos);background:var(--posBg)}.fpc.risk .pl{color:var(--warn);background:var(--warnBg)}.fpc.blocked .pl{color:var(--neg);background:var(--negBg)}

footer{margin-top:34px;border-top:1px solid var(--bd);padding-top:16px;font-size:11.5px;color:var(--t4)}
.hint{margin-top:13px;border:1px solid var(--bd);border-radius:var(--r2);padding:12px 15px;font-size:12.5px;color:var(--t2);background:var(--panel)}
.hint code{background:var(--bg2);border:1px solid var(--bd);border-radius:5px;padding:1px 6px;color:var(--accent2);font-size:11.5px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{background:#fff;color:#111}.btn,.hint{display:none}}