/* SROI calculator — shared styles for the admin SROI pages.
   Shell tokens and components match admin-crm.html. */
:root{
  --pink:#e42281; --pink-dark:#c2185b;
  --bg:#f4f5f7; --panel:#ffffff; --panel-2:#f4f5f7; --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.16); --ink:#0b0b0c;
  --w-1:#0b0b0c; --w-2:#2f3136; --w-3:#6b6f76; --w-4:#9a9ea6; --w-5:#d0d3d8;
  --r-lg:16px; --r-md:12px; --r-sm:8px; --r-pill:14px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --hatch:repeating-linear-gradient(135deg,#c4c7cd 0 4px,#e4e6ea 4px 8px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--w-1);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Epilogue',sans-serif;letter-spacing:-.01em;line-height:1.1;margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}

/* sidebar */
.sidebar{background:#0f1011;border-right:1px solid rgba(255,255,255,.09);padding:22px 16px;display:flex;flex-direction:column;gap:4px;color:#f5f5f6}
.sb-logo{display:flex;color:#fff;align-items:center;gap:10px;padding:6px 10px 22px}
.sb-logo .mark{width:30px;height:30px;border-radius:9px;display:block}
.sb-logo span{font:700 15px 'Epilogue'}
.sb-section{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#55585e;padding:16px 10px 6px}
.sb-link{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:#8b8f96}
.sb-link .ico{width:18px;text-align:center;opacity:.9}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-link.on{background:var(--pink);color:#fff}
.sb-foot{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 10px;border-top:1px solid rgba(255,255,255,.09)}
.sb-foot .av{width:32px;height:32px;border-radius:50%;background:#1a1b1d;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font:700 12px 'Epilogue';color:#fff}
.sb-foot .who b{display:block;font-size:13px;color:#fff}
.sb-foot .who span{font-size:11px;color:#8b8f96}
.sb-close{display:none}

/* mobile top bar */
.mobilebar{display:none;position:sticky;top:0;z-index:30;background:#0f1011;color:#fff;border-bottom:1px solid rgba(255,255,255,.09);padding:12px 16px;align-items:center;justify-content:space-between}
.mobilebar .logo{display:flex;align-items:center;gap:10px;font:700 15px 'Epilogue';color:#fff}
.mobilebar .logo img{width:28px;height:28px;border-radius:8px}
.mobilebar .menu{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer;color:#fff;font-size:18px}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39}

/* page */
.main{padding:26px 32px 90px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px;flex-wrap:wrap}
.topbar h1{font-size:26px;font-weight:800}
.topbar p{color:var(--w-3);font-size:14px;margin-top:2px;font-family:var(--mono)}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 13px 'Epilogue';padding:10px 16px;border-radius:var(--r-sm);border:0;cursor:pointer;white-space:nowrap}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:var(--pink-dark)}
.btn-ghost{background:var(--panel);border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn:disabled{opacity:.4;cursor:default}

.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;min-width:0}
.kpi .eyebrow{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--w-3)}
.kpi .bignum{font:800 24px 'Epilogue';margin:8px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.hl .bignum{color:var(--pink)}
.kpi .delta{font:600 11px var(--mono);color:var(--w-3)}

.mchart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-width:0}
.mchart .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.eyebrow{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--w-3)}
.badge{font:700 10px 'Epilogue';padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--w-2);white-space:nowrap}
.badge.pink{background:var(--pink);border-color:var(--pink);color:#fff}
.hint{font:600 11px var(--mono);color:var(--w-4);margin-top:12px}
.empty{font:600 12px var(--mono);color:var(--w-4);padding:18px 0}

/* form controls */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.field > .lab{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--w-3)}
.inp{font:600 14px 'Barlow';padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);width:100%;min-width:0;height:38px}
.inp::placeholder{color:var(--w-4);font-weight:500}
.inp:focus{outline:2px solid var(--pink);outline-offset:-1px;border-color:var(--pink)}
.inp.num{font:600 13px var(--mono);text-align:right}
.inp.sel{width:auto;height:40px;padding:0 10px;font:700 13px 'Epilogue';cursor:pointer}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.affix{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);height:38px;min-width:0}
.affix:focus-within{outline:2px solid var(--pink);outline-offset:-1px;border-color:var(--pink)}
.affix span{font:600 12px var(--mono);color:var(--w-3);padding:0 0 0 10px;white-space:nowrap}
.affix.suf span{padding:0 10px 0 0}
.affix .inp{border:0;height:36px;outline:0;background:transparent;padding-left:6px}
.affix.suf .inp{padding-left:10px;padding-right:4px}
.xbtn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--w-3);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;flex:none}
.xbtn:hover{border-color:var(--pink);color:var(--pink)}
.addrow{width:100%;margin-top:12px;border:1px dashed var(--w-5);border-radius:var(--r-md);padding:10px;text-align:center;font:600 12px var(--mono);color:var(--w-3);background:transparent;cursor:pointer}
.addrow:hover{border-color:var(--pink);color:var(--pink)}
input[type=range]{width:100%;height:28px;accent-color:var(--pink);cursor:pointer}

/* editable tables */
.tbl-scroll{overflow-x:auto;margin:10px -4px 0;padding:0 4px}
.grid-tbl{width:100%;border-collapse:collapse}
.grid-tbl.outcomes{min-width:1040px}
.grid-tbl th{font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-3);text-align:left;padding:0 4px 8px;white-space:nowrap}
.grid-tbl th.r{text-align:right}
[data-tip]{cursor:help}
.grid-tbl th[data-tip]{text-decoration:underline dotted var(--w-4);text-underline-offset:3px}
.grid-tbl td{padding:5px 4px;border-top:1px solid var(--line);vertical-align:middle}
.grid-tbl td.val{font:700 13px var(--mono);text-align:right;white-space:nowrap;padding-left:10px}
.grid-tbl tfoot td{font:700 13px var(--mono);border-top:1px solid var(--line-2);padding-top:10px}
.w-x{width:36px}
.w-amt{width:150px}
.w-n{width:84px}
.w-pct{width:86px}
.w-out{min-width:190px}
.w-st{min-width:130px}

/* horizontal bars (outcome value) */
.bars{display:grid;gap:10px;margin-top:12px}
.bars .row{display:grid;grid-template-columns:150px 1fr 64px;align-items:center;gap:12px}
.bars .lbl{font-size:12.5px;font-weight:600;color:var(--w-2);line-height:1.2;min-width:0;overflow-wrap:anywhere}
.bars .lbl i{display:block;font:600 10px var(--mono);font-style:normal;color:var(--w-4);margin-top:2px}
.bars .track{height:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.bars .fill{height:100%;border-radius:var(--r-pill);background:var(--ink)}
.bars .fill.pink{background:var(--pink)}
.bars b{font:700 12px var(--mono);text-align:right;white-space:nowrap}

/* waterfall, horizontal */
.wf{display:grid;gap:9px;margin-top:12px}
.wf .row{display:grid;grid-template-columns:124px 1fr 92px;gap:12px;align-items:center}
.wf .lbl{font-size:12.5px;font-weight:600;color:var(--w-2);line-height:1.2}
.wf .lbl i{display:block;font:600 10px var(--mono);font-style:normal;color:var(--w-4);margin-top:2px}
.wf .track{position:relative;height:14px;background:var(--panel-2);border-radius:4px}
.wf .seg{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--ink);min-width:2px}
.wf .seg.minus{background:var(--hatch)}
.wf .seg.pv{background:var(--pink)}
.wf b{font:700 12px var(--mono);text-align:right;white-space:nowrap}
.wf .row.total{padding-top:10px;border-top:1px dashed var(--line-2)}

/* waterfall, vertical columns */
.wfc{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:230px;margin-top:34px;border-bottom:1px solid var(--line-2)}
.wfc .c{position:relative;height:100%}
.wfc .b{position:absolute;left:10%;right:10%;border-radius:4px;background:var(--ink);min-height:2px}
.wfc .b.minus{background:var(--hatch)}
.wfc .b.pv{background:var(--pink)}
.wfc .v{position:absolute;left:-6px;right:-6px;text-align:center;font:700 11px var(--mono);white-space:nowrap}
.wfc-x{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px}
.wfc-x span{text-align:center;font:600 10.5px var(--mono);color:var(--w-3);line-height:1.25}

/* year columns */
.cols{display:flex;align-items:flex-end;gap:10px;height:190px;margin-top:30px;border-bottom:1px solid var(--line-2)}
.cols .c{flex:1;height:100%;position:relative;min-width:0}
.cols .ghost{position:absolute;left:12%;right:12%;bottom:0;border:1.5px dashed var(--w-4);border-bottom:0;border-radius:4px 4px 0 0}
.cols .b{position:absolute;left:12%;right:12%;bottom:0;background:var(--ink);border-radius:4px 4px 0 0;min-height:2px}
.cols .v{position:absolute;left:-4px;right:-4px;text-align:center;font:700 11px var(--mono);white-space:nowrap}
.cols-x{display:flex;gap:10px;margin-top:8px}
.cols-x span{flex:1;text-align:center;font:600 10.5px var(--mono);color:var(--w-3)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font:600 11px var(--mono);color:var(--w-3);margin-top:12px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px;background:var(--ink)}
.legend i.ghost{background:transparent;border:1.5px dashed var(--w-4)}
.legend i.hatch{background:var(--hatch)}
.legend i.pink{background:var(--pink)}

/* sensitivity */
.sens{display:grid;gap:10px;margin-top:12px}
.sens .row{display:grid;grid-template-columns:150px 1fr 84px;gap:12px;align-items:center}
.sens .lbl{font-size:12.5px;font-weight:600;color:var(--w-2);line-height:1.2}
.sens .track{position:relative;height:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.sens .fill{height:100%;border-radius:var(--r-pill);background:var(--ink)}
.sens .fill.down{background:var(--hatch)}
.sens .base{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--pink);border-radius:2px}
.sens b{font:700 12px var(--mono);text-align:right;white-space:nowrap}
.sens b em{font-style:normal;color:var(--w-4);margin-left:6px;font-weight:600}

/* ratio hero */
.ratio-big{font:900 64px 'Epilogue';letter-spacing:-.03em;line-height:1;margin:10px 0 8px;white-space:nowrap}
.ratio-big span{font-size:30px;color:var(--w-4);font-weight:800;letter-spacing:0}
.ratio-say{font-size:15px;color:var(--w-2)}
.ratio-say b{color:var(--ink)}
.callout{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);font:600 11.5px var(--mono);color:var(--w-3);line-height:1.5}

/* labelled slider with a typed value */
.sl{display:grid;gap:6px}
.sl-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sl-top > span{font:700 12.5px 'Epilogue';line-height:1.2}
.sl-top > span i{display:block;font:600 10px var(--mono);font-style:normal;color:var(--w-4);margin-top:2px}
.sl .affix{width:92px;height:32px;flex:none}
.sl .affix .inp{height:30px}

/* tooltip */
.tip{position:fixed;z-index:100;pointer-events:none;background:#0f1011;color:#fff;font:600 12.5px/1.45 'Barlow';padding:8px 11px;border-radius:8px;max-width:280px;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;transition:opacity .12s}
.tip.on{opacity:1}

/* sample layout switcher (sample stage only) */
.sample-switch{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:4px;background:#0f1011;color:#8b8f96;border-radius:999px;padding:5px 5px 5px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);font:700 10.5px var(--mono);letter-spacing:.08em}
.sample-switch span{margin-right:6px}
.sample-switch a{padding:8px 13px;border-radius:999px;color:#c9ccd2;white-space:nowrap}
.sample-switch a:hover{color:#fff}
.sample-switch a.on{background:var(--pink);color:#fff}

@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .mobilebar{display:flex}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:272px;z-index:40;transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;overflow-y:auto}
  body.nav-open .sidebar{transform:none;visibility:visible;transition:transform .22s ease}
  .mobilebar .logo{min-height:44px}
  .mobilebar .menu{width:44px;height:44px}
  .btn,.addrow{min-height:44px}
  .inp,.inp.sel{height:44px}
  .affix,.sl .affix{height:auto}
  .affix .inp,.sl .affix .inp{height:44px}
  .xbtn{width:44px;height:44px}
  input[type=range]{height:44px}
  .linkbtn{min-height:44px}
  body.nav-open .scrim{display:block}
  .sb-close{display:grid;place-items:center;position:absolute;top:14px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:16px;cursor:pointer}
  .main{padding:18px 16px 96px}
  .topbar h1{font-size:22px}
  .topbar p{font-size:12px}
  .top-actions{width:100%}
  .top-actions .btn{flex:1}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi .bignum{font-size:20px}
  .ratio-big{font-size:52px}
  .bars .row,.sens .row{grid-template-columns:110px 1fr 70px;gap:10px}
  .wf .row{grid-template-columns:96px 1fr 84px;gap:10px}
  .wfc-x span{font-size:9px}
  .wfc .v{font-size:9.5px}
  .sample-switch{left:12px;right:12px;bottom:12px;justify-content:center;padding-left:5px}
  .sample-switch span{display:none}
  .sample-switch a{padding:0 10px;min-height:44px;display:flex;align-items:center}
}