/* Brand fonts (the licensed families): New Science for text, Recife Display for headings. */
@font-face{font-family:"New Science";src:url("../fonts/NewScience_Light.woff2?v=2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"New Science";src:url("../fonts/NewScience_Regular.woff2?v=2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"New Science";src:url("../fonts/NewScience_Medium.woff2?v=2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"New Science";src:url("../fonts/NewScience_SemiBold.woff2?v=2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"New Science";src:url("../fonts/NewScience_Bold.woff2?v=2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Recife Display";src:url("../fonts/RecifeDisplay_Regular.woff2?v=2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Recife Display";src:url("../fonts/RecifeDisplay_SemiBold.woff2?v=2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Recife Display";src:url("../fonts/RecifeDisplay_Bold.woff2?v=2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Her Startup Selection Portal */
/* Her Startup selection portal. Design system carried over from the prototype.
   ============================== tokens ==============================
   Dark-first. The bare :root block is the dark palette; light is the
   alternate and is redefined under prefers-color-scheme:light.        */
:root{
  --violet:#6C3CFF;
  --violet-lift:#8B63FF;
  --pink:#FFACEA;
  --lilac:#CDC5EE;
  --source:#7E92F8;
  --green:#08C175;
  --orange:#F88436;
  --ember:#FF451A;

  /* dark ground */
  --bg:#0E0D12;
  --panel:#17161D;
  --panel-2:#1E1D26;
  --panel-3:#262530;
  --hair:#26252F;
  --ink:#F7F6FA;
  --ink-2:#A6A2B4;
  --ink-3:#6E6A7E;

  --pass:#2FD68F;
  --pass-dim:rgba(47,214,143,.14);
  --fail:#FF5F38;
  --fail-dim:rgba(255,95,56,.14);
  --warn:#FFA359;
  --warn-dim:rgba(255,163,89,.14);
  --accent:#8B63FF;
  --accent-dim:rgba(139,99,255,.16);
  --accent-ink:#fff;

  --chip:#201F29;
  --chip-on:#F7F6FA;
  --chip-on-ink:#0E0D12;
  --logo:#FFACEA;

  --r-panel:18px;
  --r-pill:999px;
  --r-md:10px;
  --sans:"New Science",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ui:"New Science",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Recife Display",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#EFEDF3;
    --panel:#FFFFFF;
    --panel-2:#F6F4FA;
    --panel-3:#ECE9F3;
    --hair:#E2DEEC;
    --ink:#16141C;
    --ink-2:#565266;
    --ink-3:#8B8699;
    --pass:#06A463;
    --pass-dim:rgba(6,164,99,.12);
    --fail:#E63F16;
    --fail-dim:rgba(230,63,22,.1);
    --warn:#D97317;
    --warn-dim:rgba(217,115,23,.12);
    --accent:#6C3CFF;
    --accent-dim:rgba(108,60,255,.1);
    --chip:#FFFFFF;
    --chip-on:#16141C;
    --chip-on-ink:#FFFFFF;
    --logo:#6C3CFF;
  }
}
:root[data-theme="light"]{
  --bg:#EFEDF3;
  --panel:#FFFFFF;
  --panel-2:#F6F4FA;
  --panel-3:#ECE9F3;
  --hair:#E2DEEC;
  --ink:#16141C;
  --ink-2:#565266;
  --ink-3:#8B8699;
  --pass:#06A463;
  --pass-dim:rgba(6,164,99,.12);
  --fail:#E63F16;
  --fail-dim:rgba(230,63,22,.1);
  --warn:#D97317;
  --warn-dim:rgba(217,115,23,.12);
  --accent:#6C3CFF;
  --accent-dim:rgba(108,60,255,.1);
  --chip:#FFFFFF;
  --chip-on:#16141C;
  --chip-on-ink:#FFFFFF;
  --logo:#6C3CFF;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; text-wrap:balance}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ============================== top bar ============================== */
.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:var(--bg); padding:16px 22px 12px;
  display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.brand svg{width:86px; height:auto; display:block}
.brand .bd{width:1px; height:17px; background:var(--hair)}
.brand .bt{font-size:11.5px; color:var(--ink-2); font-weight:500; white-space:nowrap}

.pills{
  display:flex; align-items:center; gap:4px; margin:0 auto;
  background:var(--panel); border-radius:var(--r-pill); padding:4px;
}
.pills .nav-link{
  border:0; background:transparent; cursor:pointer; border-radius:var(--r-pill);
  padding:7px 15px; font-size:12.5px; font-weight:500; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background .15s, color .15s;
}
.pills .nav-link:hover{color:var(--ink)}
.pills .nav-link[aria-current="page"]{background:var(--chip-on); color:var(--chip-on-ink); font-weight:600}
.pills .n{
  font-size:10.5px; font-weight:600; border-radius:var(--r-pill); padding:0 6px;
  background:var(--panel-3); color:var(--ink-2); min-width:18px; text-align:center;
}
.pills .nav-link[aria-current="page"] .n{background:var(--accent); color:#fff}
.pills .n.hot{background:var(--accent); color:#fff}

.tr{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.icb{
  width:34px; height:34px; border-radius:50%; border:0; background:var(--panel);
  color:var(--ink-2); cursor:pointer; display:grid; place-items:center;
  transition:background .15s, color .15s;
}
.icb:hover{background:var(--panel-2); color:var(--ink)}
.icb svg{width:15px; height:15px}
.me{display:flex; align-items:center; gap:8px; background:var(--panel); border-radius:var(--r-pill); padding:4px 12px 4px 4px}
.me .nm{font-size:12px; font-weight:500; color:var(--ink-2)}

.av{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  display:grid; place-items:center; font-size:9.5px; font-weight:700;
  background:var(--panel-3); color:var(--ink-2); font-family:var(--ui);
}
.av.you{background:var(--violet); color:#fff}
.av.lg{width:36px; height:36px; flex:0 0 36px; font-size:12px}
.av.sm{width:21px; height:21px; flex:0 0 21px; font-size:8.5px}

/* ============================== layout ============================== */
.wrap{padding:8px 22px 70px; max-width:1420px; margin:0 auto; width:100%}

.head{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:12px 0 20px}
.head h1{font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1.05; font-family:var(--serif)}
.head h1 .dim{color:var(--ink-3); font-weight:500}
.head .lede{color:var(--ink-2); font-size:13px; margin-top:8px; max-width:70ch; line-height:1.55}
.head .act{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.eyebrow{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:9px; font-family:var(--ui)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:9px 17px; border-radius:var(--r-pill); border:0;
  background:var(--panel); color:var(--ink); font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background .15s, transform .1s;
}
.btn:hover{background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--chip-on); color:var(--chip-on-ink)}
.btn.pri:hover{filter:brightness(.9)}
.btn.vio{background:var(--violet); color:#fff}
.btn.vio:hover{background:var(--violet-lift)}
.btn.good{background:var(--pass); color:#04301F}
.btn.good:hover{filter:brightness(1.08)}
.btn.bad{background:var(--fail-dim); color:var(--fail)}
.btn.bad:hover{background:var(--fail); color:#fff}
.btn.sm{padding:6px 13px; font-size:11.5px}
.btn.gh{background:transparent; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--hair)}
.btn.gh:hover{background:var(--panel); color:var(--ink)}
.btn[disabled]{opacity:.38; cursor:not-allowed}
.btn svg{width:14px; height:14px}

/* panels - borderless, ground shows through the gaps */
.panel{background:var(--panel); border-radius:var(--r-panel); padding:18px 20px}
.panel.flush{padding:0; overflow:hidden}
.ph{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.ph h3{font-size:13px; font-weight:600; letter-spacing:-.005em; display:flex; align-items:center; gap:8px}
.ph .sub{font-size:11.5px; color:var(--ink-3); font-weight:400}
.ph .r{margin-left:auto; display:flex; align-items:center; gap:6px}
.ph svg.hi{width:14px; height:14px; color:var(--ink-3)}

/* ============================== hero figure ============================== */
.hero{display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px}
.hero .fig{flex:0 0 auto; min-width:236px}
.hero .lab{font-size:12px; color:var(--ink-2); margin-bottom:6px}
.big{font-size:56px; font-weight:600; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.big .dim{color:var(--ink-3)}
.delta{font-size:12.5px; font-weight:600; color:var(--accent); margin-left:8px; letter-spacing:0}
.hero .note{font-size:12px; color:var(--ink-2); margin-top:10px}
.hero .note b{color:var(--ink); font-weight:600}
.hero .cta{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}

/* funnel - the flow of the cycle, drawn to scale */
.flow{flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:9px}
.flow .fr{display:flex; align-items:center; gap:12px}
.flow .fname{font-size:11.5px; color:var(--ink-2); width:96px; flex:0 0 96px; text-align:right}
.flow .ftrack{flex:1 1 auto; height:30px; background:var(--panel-2); border-radius:7px; overflow:hidden; position:relative; cursor:pointer}
.flow .fbar{height:100%; border-radius:7px; transition:filter .15s}
.flow .ftrack:hover .fbar{filter:brightness(1.14)}
.flow .fv{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:12.5px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums;
}
.flow .fv.out{left:auto; right:11px; color:var(--ink-2)}
.flow .fpct{font-size:11px; color:var(--ink-3); width:38px; flex:0 0 38px; font-variant-numeric:tabular-nums}

/* ============================== screen-out bars ============================== */
.reasons{display:flex; flex-direction:column; gap:11px}
.rr{display:grid; grid-template-columns:1fr auto; gap:5px 10px; cursor:default}
.rr .rl{font-size:12px; color:var(--ink-2)}
.rr .rn{font-size:12px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.rr .rt{grid-column:1/-1; height:6px; background:var(--panel-2); border-radius:var(--r-pill); overflow:hidden}
.rr .rf{height:100%; background:var(--fail); border-radius:var(--r-pill); opacity:.82}
.judge-strip{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--hair);
  font-size:11.5px; color:var(--ink-3); line-height:1.5;
}
.judge-strip b{color:var(--ink-2); font-weight:600}

/* ============================== heatmap ============================== */
.hm{display:flex; flex-direction:column; gap:4px}
.hm .hrow{display:flex; gap:4px; align-items:center}
.hm .hlab{font-size:10px; color:var(--ink-3); width:34px; flex:0 0 34px; font-family:var(--ui)}
.hm .cell{
  flex:1 1 0; height:22px; border-radius:5px; background:var(--panel-2); cursor:default;
  transition:transform .12s;
}
.hm .cell:hover{transform:scale(1.14)}
.hm .hhead{display:flex; gap:4px; margin-bottom:2px}
.hm .hhead .hlab{visibility:hidden}
.hm .hhead span{flex:1 1 0; font-size:10px; color:var(--ink-3); text-align:center; font-family:var(--ui)}
.hm-key{display:flex; align-items:center; gap:5px; margin-top:12px; font-size:10.5px; color:var(--ink-3)}
.hm-key i{width:14px; height:11px; border-radius:3px; display:block}

/* ============================== activity ============================== */
.acts{display:flex; flex-direction:column; max-height:322px; overflow-y:auto; margin:0 -20px; padding:0 20px}
.act-r{display:grid; grid-template-columns:auto 1fr auto; gap:11px; padding:10px 0; border-bottom:1px solid var(--hair); align-items:center}
.act-r:last-child{border-bottom:0}
.act-r .ad{width:6px; height:6px; border-radius:50%; background:var(--ink-3)}
.act-r.e-pass .ad,.act-r.e-short .ad{background:var(--pass)}
.act-r.e-fail .ad,.act-r.e-rej .ad{background:var(--fail)}
.act-r.e-mail .ad{background:var(--source)}
.act-r.e-open .ad{background:var(--warn)}
.act-r .at{font-size:12px; line-height:1.4}
.act-r .am{font-size:11px; color:var(--ink-3); margin-top:2px}
.act-r .am a{color:var(--ink-2); text-decoration:none; font-weight:500}
.act-r .am a:hover{color:var(--accent)}
.act-r .aw{font-size:10.5px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.tag-auto{
  font-size:9px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; font-family:var(--ui);
  color:var(--ink-3); background:var(--panel-2); border-radius:var(--r-pill); padding:2px 7px; margin-left:6px;
}

/* ============================== targets ============================== */
.tg{margin-bottom:18px}
.tg:last-child{margin-bottom:0}
.tg .tgh{display:flex; align-items:baseline; gap:8px; margin-bottom:10px}
.tg .tgn{font-size:12.5px; font-weight:600}
.tg .tgr{font-size:11px; color:var(--ink-3)}
.tg .tgv{margin-left:auto; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums}
.tg .tgv.over{color:var(--warn)}
.tg .tgv.ok{color:var(--pass)}
.bar2{position:relative; height:8px; background:var(--panel-2); border-radius:var(--r-pill)}
.bar2 .f{position:absolute; inset:0 auto 0 0; border-radius:var(--r-pill); background:var(--pass)}
.bar2.over .f{background:var(--warn)}
.bar2 .mk{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); border-radius:2px; opacity:.55}
.tg .tgs{font-size:11px; margin-top:9px; color:var(--ink-3)}
.tg .tgs.over{color:var(--warn)}
.tg .tgs.ok{color:var(--pass)}

/* ============================== grids ============================== */
.g{display:grid; gap:12px; margin-bottom:12px}
.g > *{min-width:0}
.g-3{grid-template-columns:1.15fr .95fr .95fr}
.g-2{grid-template-columns:1.4fr 1fr}
.g-2e{grid-template-columns:1fr 1fr}

/* ============================== eligibility strip ============================== */
.strip{display:inline-flex; gap:2.5px; align-items:center; vertical-align:middle}
.strip i{width:8px; height:15px; border-radius:2px; display:block; background:var(--pass)}
.strip i.f{background:var(--fail)}
.strip.sm i{width:5.5px; height:11px; border-radius:1.5px}
.strip.lg i{width:13px; height:24px; border-radius:3px}

/* ============================== table ============================== */
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.search{
  flex:1 1 230px; min-width:0; display:flex; align-items:center; gap:9px;
  background:var(--panel); border-radius:var(--r-pill); padding:9px 16px;
}
.search input{border:0; background:transparent; outline:0; width:100%; font-size:12.5px}
.search input::placeholder{color:var(--ink-3)}
.search svg{width:14px; height:14px; color:var(--ink-3); flex:0 0 14px}
.sel{
  border:0; background:var(--panel); border-radius:var(--r-pill);
  padding:9px 14px; font-size:12px; cursor:pointer; font-weight:500; color:var(--ink-2);
}
.chipbar{display:flex; gap:5px; flex-wrap:wrap; align-items:center; background:var(--panel); border-radius:var(--r-pill); padding:4px}
.chip{
  border:0; background:transparent; border-radius:var(--r-pill);
  padding:6px 13px; font-size:11.5px; cursor:pointer; font-weight:500; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px; transition:background .15s, color .15s;
}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--chip-on); color:var(--chip-on-ink); font-weight:600}
.chip .n{font-size:10.5px; opacity:.6; font-variant-numeric:tabular-nums}

.tbl-wrap{position:relative; overflow-x:auto; background:var(--panel); border-radius:var(--r-panel)}
table{border-collapse:collapse; width:100%; min-width:940px}
thead th{
  text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:14px 14px; white-space:nowrap; background:var(--panel);
  position:sticky; top:0; z-index:2; font-family:var(--ui);
}
thead th.srt{cursor:pointer; user-select:none}
thead th.srt:hover{color:var(--ink-2)}
thead th .ar{opacity:.35; margin-left:4px}
thead th[aria-sort] .ar{opacity:1; color:var(--accent)}
tbody tr{border-top:1px solid var(--hair); cursor:pointer; transition:background .1s}
tbody tr:hover{background:var(--panel-2)}
tbody td{padding:11px 14px; font-size:12.5px; vertical-align:middle}
.co{font-weight:600; font-size:13px; letter-spacing:-.008em}
.co-ref{font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:1px; font-family:var(--ui)}
.muted{color:var(--ink-3)}
.cell-fd{display:flex; align-items:center; gap:8px}

.pill{
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  padding:4px 11px; font-size:11px; font-weight:600; white-space:nowrap;
}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 5px}
.p-pending{background:var(--warn-dim); color:var(--warn)}
.p-shortlisted{background:var(--pass-dim); color:var(--pass)}
.p-rejected{background:var(--panel-2); color:var(--ink-3)}
.p-auto-rejected{background:var(--fail-dim); color:var(--fail)}

.sector{font-size:11px; font-weight:500; border-radius:var(--r-pill); padding:3px 10px; background:var(--panel-2); color:var(--ink-2); white-space:nowrap}
.reg{font-size:10.5px; color:var(--ink-3)}
.reg.fr{color:var(--source); font-weight:600}
.empty{padding:56px 20px; text-align:center; color:var(--ink-3); font-size:13px}
.empty b{display:block; font-size:14px; color:var(--ink-2); margin-bottom:6px; font-weight:600}

/* ============================== detail ============================== */
.det{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.85fr); gap:12px; align-items:start}
.back{display:inline-flex; align-items:center; gap:7px; background:transparent; border:0; cursor:pointer; color:var(--ink-3); font-size:12px; font-weight:500; padding:4px 0; margin-bottom:10px}
.back:hover{color:var(--ink)}

.banner{border-radius:var(--r-panel); padding:17px 20px; margin-bottom:12px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.banner .bt{font-size:13px; font-weight:600; margin-bottom:5px; display:flex; align-items:center; gap:9px}
.banner p{margin:0; font-size:12.5px; line-height:1.6; max-width:76ch; color:var(--ink-2)}
.banner .ba{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.b-auto{background:var(--fail-dim)} .b-auto .bt{color:var(--fail)}
.b-short{background:var(--pass-dim)} .b-short .bt{color:var(--pass)}
.b-rej{background:var(--panel)} .b-rej .bt{color:var(--ink)}
.b-open{background:var(--warn-dim)} .b-open .bt{color:var(--warn)}

.dh{margin-bottom:12px}
.dh h2{font-size:26px; font-weight:600; letter-spacing:-.028em; line-height:1.12}
.dh .sub{font-size:12px; color:var(--ink-3); margin-top:7px; display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.dh .sub b{color:var(--ink-2); font-weight:600; font-family:var(--ui)}

.qa{padding:16px 0; border-bottom:1px solid var(--hair)}
.qa:first-child{padding-top:0}
.qa:last-child{border-bottom:0; padding-bottom:0}
.qa h4{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:9px; font-family:var(--ui)}
.qa p{margin:0; font-size:13.5px; line-height:1.65; color:var(--ink-2); max-width:72ch}
.qa p.lead{color:var(--ink); font-size:14.5px; line-height:1.6}

.crit-row{display:grid; grid-template-columns:19px 1fr auto; gap:11px; padding:10px 0; border-bottom:1px solid var(--hair); align-items:center}
.crit-row:last-child{border-bottom:0}
.mk{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; font-family:var(--ui)}
.mk.ok{background:var(--pass); color:#04301F}
.mk.no{background:var(--fail)}
.mk.q{background:transparent; box-shadow:inset 0 0 0 1.5px var(--hair); color:var(--ink-3)}
.cl{font-size:12.5px; font-weight:500}
.cr{font-size:11px; color:var(--ink-3); margin-top:1px}
.cv{font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.cv.no{color:var(--fail)}

.lock{display:flex; align-items:flex-start; gap:8px; font-size:11px; color:var(--ink-3); background:var(--panel-2); border-radius:var(--r-md); padding:9px 11px; margin-top:12px; line-height:1.5}
.lock svg{width:12px; height:12px; flex:0 0 12px; margin-top:2px}

.jh{display:flex; align-items:center; gap:9px; margin-bottom:5px}
.badge-you{font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--accent); background:var(--accent-dim); border-radius:var(--r-pill); padding:3px 8px; font-family:var(--ui)}
.jgrp{display:flex; gap:5px; margin-top:8px}
.jbtn{flex:1 1 0; padding:7px 4px; border-radius:8px; border:0; background:var(--panel-2); cursor:pointer; font-size:11.5px; font-weight:600; color:var(--ink-3); transition:background .14s, color .14s}
.jbtn:hover{background:var(--panel-3); color:var(--ink-2)}
.jbtn[aria-pressed="true"].v-strong{background:var(--pass); color:#04301F}
.jbtn[aria-pressed="true"].v-adequate{background:var(--warn); color:#3A1D05}
.jbtn[aria-pressed="true"].v-weak{background:var(--fail); color:#fff}
.jbtn[disabled]{opacity:.4; cursor:not-allowed}
.decide{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.decide .btn{flex:1 1 auto}
.blocked{font-size:11.5px; color:var(--ink-3); margin-top:10px; line-height:1.5; display:flex; gap:7px; align-items:flex-start}
.blocked svg{width:13px; height:13px; flex:0 0 13px; margin-top:2px; color:var(--warn)}

.facts{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:12.5px; align-items:baseline; margin:0}
.facts dt{color:var(--ink-3); font-size:11.5px}
.facts dd{margin:0; font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.facts dd a{color:var(--accent); text-decoration:none}
.facts dd a:hover{text-decoration:underline}
.up{color:var(--pass); font-weight:600}
.down{color:var(--fail); font-weight:600}

/* sparkline */
.spark{margin:2px 0 14px}
.spark svg{display:block; width:100%; height:54px; overflow:visible}
.spark .cap{font-size:10.5px; color:var(--ink-3); margin-top:6px; display:flex; justify-content:space-between}

.note{display:grid; grid-template-columns:auto 1fr; gap:11px; padding:12px 0; border-bottom:1px solid var(--hair)}
.note:last-of-type{border-bottom:0}
.note .nb{font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.note .nm{font-size:11px; color:var(--ink-3); margin-bottom:3px}
.note .nm b{color:var(--ink); font-weight:600}
.noteform{display:flex; gap:8px; margin-top:12px; align-items:flex-start}
.noteform textarea{flex:1; border:0; border-radius:var(--r-md); background:var(--panel-2); padding:10px 12px; font-size:12.5px; resize:vertical; min-height:40px; outline:0; line-height:1.5}
.noteform textarea:focus{box-shadow:inset 0 0 0 1px var(--accent)}

.asgn{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.asgn .who{font-size:12.5px; font-weight:600}
.asgn .we{font-size:11px; color:var(--ink-3)}

/* reviewer load list */
.loads{display:flex; flex-direction:column; gap:9px}
.load{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; cursor:pointer; background:transparent; border:0; padding:3px 0; text-align:left; width:100%}
.load:hover .lname{color:var(--accent)}
.lname{font-size:12px; color:var(--ink-2); transition:color .14s}
.lbar{height:6px; background:var(--panel-2); border-radius:var(--r-pill); overflow:hidden; margin-top:5px}
.lbar i{display:block; height:100%; background:var(--accent); border-radius:var(--r-pill)}
.lnum{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ============================== shortlist ============================== */
.sl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.slc{background:var(--panel); border-radius:var(--r-panel); padding:17px 18px; cursor:pointer; display:flex; flex-direction:column; gap:10px; transition:background .15s, transform .13s}
.slc:hover{background:var(--panel-2); transform:translateY(-2px)}
.slc .cn{font-size:16.5px; font-weight:600; letter-spacing:-.018em; line-height:1.2}
.slc .fd{font-size:12px; color:var(--ink-2); margin-top:3px}
.slc .mt{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.slc .tr2{display:flex; gap:16px; margin-top:auto; padding-top:11px; border-top:1px solid var(--hair)}
.slc .tr2 div{font-size:10.5px; color:var(--ink-3)}
.slc .tr2 b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; display:block; font-size:13px; margin-top:2px}

/* ============================== emails ============================== */
.mail{display:grid; grid-template-columns:auto 1fr auto; gap:13px; padding:13px 20px; border-top:1px solid var(--hair); cursor:pointer; align-items:center; transition:background .1s}
.mail:first-child{border-top:0}
.mail:hover{background:var(--panel-2)}
.mail .ms{font-size:12.5px; font-weight:500; margin-bottom:3px}
.mail .mto{font-size:11px; color:var(--ink-3)}
.mail .mr{text-align:right; font-size:11px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.kind{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-radius:var(--r-pill); padding:4px 9px; white-space:nowrap; font-family:var(--ui)}
.k-Acceptance{background:var(--pass-dim); color:var(--pass)}
.k-Rejection{background:var(--panel-2); color:var(--ink-3)}
.k-Autorejection{background:var(--fail-dim); color:var(--fail)}
.preview{background:var(--panel-2); border-radius:var(--r-md); padding:18px 20px; font-size:13px; line-height:1.7; color:var(--ink-2); white-space:pre-wrap; max-width:70ch}
.preview .psub{font-weight:600; color:var(--ink); font-size:13.5px; display:block; margin-bottom:14px; white-space:normal; line-height:1.4}

/* ============================== modal ============================== */
.scrim{position:fixed; inset:0; background:rgba(8,7,11,.66); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; z-index:60}
.modal{background:var(--panel); border-radius:var(--r-panel); width:min(580px,100%); max-height:86vh; overflow-y:auto; box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.modal-h{padding:20px 22px 0; display:flex; align-items:flex-start; gap:12px}
.modal-h h3{font-size:17px; font-weight:600; letter-spacing:-.018em}
.modal-h .x{margin-left:auto; background:var(--panel-2); border:0; cursor:pointer; color:var(--ink-2); font-size:14px; line-height:1; padding:7px 10px; border-radius:var(--r-pill)}
.modal-h .x:hover{color:var(--ink)}
.modal-b{padding:16px 22px 22px}
.modal-f{padding:0 22px 22px; display:flex; gap:8px; justify-content:flex-end}

.toasts{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:90; display:flex; flex-direction:column; gap:8px; max-width:350px}
.toast{background:var(--chip-on); color:var(--chip-on-ink); border-radius:12px; padding:12px 16px; font-size:12.5px; box-shadow:0 18px 40px -14px rgba(0,0,0,.5); animation:tin .22s ease-out; line-height:1.5}
.toast b{font-weight:700}
@keyframes tin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ============================== selection + bulk ============================== */
.selbox{
  width:15px; height:15px; border-radius:4px; background:var(--panel-2);
  box-shadow:inset 0 0 0 1.5px var(--hair); cursor:pointer; display:grid; place-items:center;
  flex:0 0 15px; transition:background .12s, box-shadow .12s;
}
.selbox:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.selbox[aria-checked="true"]{background:var(--accent); box-shadow:none}
.selbox[aria-checked="true"]::after{content:"\2713"; color:#fff; font-size:10px; font-weight:700; line-height:1}
.selbox.mixed{background:var(--accent)}
.selbox.mixed::after{content:"\2013"; color:#fff; font-size:11px; font-weight:700}
tbody tr.sel{background:var(--accent-dim)}
tbody tr.sel:hover{background:var(--accent-dim)}
th.cbx,td.cbx{width:34px; padding-right:0}

.bulkbar{
  position:sticky; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:25;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--chip-on); color:var(--chip-on-ink);
  border-radius:var(--r-pill); padding:9px 10px 9px 18px; margin:12px auto 0; width:fit-content; max-width:100%;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.55); animation:tin .18s ease-out;
}
.bulkbar .bn{font-size:12.5px; font-weight:600; white-space:nowrap}
.bulkbar .bsep{width:1px; height:18px; background:currentColor; opacity:.18}
.bulkbar .bb{
  border:0; border-radius:var(--r-pill); padding:7px 13px; font-size:11.5px; font-weight:600;
  cursor:pointer; background:rgba(128,128,128,.18); color:inherit; white-space:nowrap;
}
.bulkbar .bb:hover{background:rgba(128,128,128,.3)}
.bulkbar .bb.go{background:var(--violet); color:#fff}
.bulkbar .bb.go:hover{background:var(--violet-lift)}
.bulkbar select{
  border:0; border-radius:var(--r-pill); padding:7px 11px; font-size:11.5px; font-weight:600;
  background:rgba(128,128,128,.18); color:inherit; cursor:pointer;
}

/* saved views */
.views{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.vchip{
  border:0; background:var(--panel); border-radius:var(--r-pill); padding:6px 12px;
  font-size:11.5px; font-weight:500; color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:background .14s, color .14s;
}
.vchip:hover{color:var(--ink); background:var(--panel-2)}
.vchip[aria-pressed="true"]{background:var(--accent); color:#fff; font-weight:600}
.vchip .vx{opacity:.55; font-size:13px; line-height:1}
.vchip .vx:hover{opacity:1}
.vchip.add{background:transparent; box-shadow:inset 0 0 0 1px var(--hair); color:var(--ink-3)}
.vchip.add:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink-3)}

/* ============================== compare ============================== */
.cmp{display:grid; gap:12px; align-items:start}
.cmp-col{background:var(--panel); border-radius:var(--r-panel); overflow:hidden; min-width:0}
.cmp-h{padding:16px 18px 14px; border-bottom:1px solid var(--hair)}
.cmp-h .cn{font-size:16px; font-weight:600; letter-spacing:-.018em; line-height:1.2}
.cmp-h .cf{font-size:11.5px; color:var(--ink-2); margin-top:4px}
.cmp-h .cx{float:right; background:var(--panel-2); border:0; border-radius:var(--r-pill); width:24px; height:24px; cursor:pointer; color:var(--ink-3); font-size:12px}
.cmp-h .cx:hover{color:var(--ink)}
.cmp-row{padding:11px 18px; border-bottom:1px solid var(--hair); font-size:12.5px}
.cmp-row:last-child{border-bottom:0}
.cmp-row .ck{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:5px; font-family:var(--ui)}
.cmp-row .cvv{font-weight:600; font-variant-numeric:tabular-nums; font-size:14px}
.cmp-row .cvv.best{color:var(--pass)}
.cmp-row p{margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.cmp-empty{
  background:var(--panel); border-radius:var(--r-panel); padding:34px 18px; text-align:center;
  color:var(--ink-3); font-size:12.5px; box-shadow:inset 0 0 0 1px var(--hair);
}

/* ============================== charts (analytics) ============================== */
.barlist{display:flex; flex-direction:column; gap:10px}
.blr{display:grid; grid-template-columns:104px 1fr auto; gap:11px; align-items:center; cursor:pointer}
.blr:hover .bll{color:var(--ink)}
.bll{font-size:11.5px; color:var(--ink-2); text-align:right; transition:color .14s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blt{height:20px; background:var(--panel-2); border-radius:6px; overflow:hidden; display:flex}
.blt i{display:block; height:100%; transition:filter .14s}
.blr:hover .blt i{filter:brightness(1.15)}
.blv{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:52px; text-align:right}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--hair)}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-3)}
.legend i{width:9px; height:9px; border-radius:3px; display:block}

.cols{display:flex; align-items:flex-end; gap:6px; height:130px; margin-top:6px}
.cols .cc{flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%}
.cols .cbar{width:100%; background:var(--accent); border-radius:5px 5px 0 0; min-height:3px; transition:filter .14s}
.cols .cc:hover .cbar{filter:brightness(1.18)}
.cols .cl{font-size:10px; color:var(--ink-3); font-family:var(--ui); white-space:nowrap}
.cols .cvn{font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}

/* ============================== audit ============================== */
.audit{display:grid; grid-template-columns:auto auto 1fr auto auto; gap:0; font-size:12.5px}
.audit > div{padding:11px 14px; border-top:1px solid var(--hair); display:flex; align-items:center; gap:8px}
.audit > div:nth-child(-n+5){border-top:0; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; font-family:var(--ui)}
.audit .ov{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--warn); background:var(--warn-dim); border-radius:var(--r-pill); padding:3px 8px; font-family:var(--ui)}
.audit-row:hover{background:var(--panel-2); cursor:pointer}

/* ============================== founder view ============================== */
.fv-wrap{max-width:720px; margin:0 auto}
.fv-card{background:var(--panel); border-radius:var(--r-panel); overflow:hidden}
.fv-top{padding:26px 28px; background:var(--panel-2)}
.fv-top .fvl{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; font-family:var(--ui)}
.fv-top h2{font-size:23px; font-weight:600; letter-spacing:-.022em; margin-top:9px; line-height:1.15}
.fv-top .fvs{font-size:12.5px; color:var(--ink-2); margin-top:7px}
.fv-status{display:flex; align-items:center; gap:11px; padding:16px 28px; border-bottom:1px solid var(--hair)}
.fv-status .fst{font-size:13px; font-weight:600}
.fv-status .fsd{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.fv-steps{display:flex; gap:0; padding:20px 28px; border-bottom:1px solid var(--hair)}
.fv-step{flex:1 1 0; position:relative; padding-right:10px}
.fv-step .fsl{font-size:11px; color:var(--ink-3)}
.fv-step .fsn{font-size:12.5px; font-weight:600; margin-top:3px}
.fv-step .fsdot{width:9px; height:9px; border-radius:50%; background:var(--panel-3); margin-bottom:9px}
.fv-step.done .fsdot{background:var(--pass)}
.fv-step.now .fsdot{background:var(--warn); box-shadow:0 0 0 4px var(--warn-dim)}
.fv-step.dead .fsdot{background:var(--fail)}
.fv-step::after{content:""; position:absolute; left:9px; top:4px; right:10px; height:1px; background:var(--hair)}
.fv-step:last-child::after{display:none}
.fv-sec{padding:20px 28px; border-bottom:1px solid var(--hair)}
.fv-sec:last-child{border-bottom:0}
.fv-sec h4{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:9px; font-family:var(--ui)}
.fv-sec p{margin:0; font-size:13.5px; line-height:1.65; color:var(--ink-2)}
.fv-note{background:var(--panel-2); border-radius:var(--r-md); padding:13px 15px; font-size:12px; color:var(--ink-3); line-height:1.55}

/* ============================== shortcuts overlay ============================== */
.keys{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px}
.keyr{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2)}
kbd{
  background:var(--panel-2); border-radius:6px; padding:3px 8px; font-size:11px; font-weight:600;
  font-family:var(--ui); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair); min-width:24px; text-align:center;
}
.demo-note{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--panel); border-radius:var(--r-pill); padding:7px 8px 7px 15px; font-size:11.5px; color:var(--ink-3);
}
.demo-note b{color:var(--ink-2); font-weight:600}

/* ============================== responsive ============================== */
@media (max-width:1180px){
  .g-3{grid-template-columns:1fr 1fr}
  .g-3 > :first-child{grid-column:1/-1}
}
@media (max-width:1020px){
  .g-2,.g-2e{grid-template-columns:1fr}
  .det{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr 1fr!important}
}

/* ---------- mobile: bottom tab bar, cards instead of tables ---------- */
.mobile-only{display:none}
.tabbar{display:none}

@media (max-width:860px){
  .top{padding:10px 16px 6px; gap:10px}
  .brand svg{width:74px}
  .brand .bd,.brand .bt{display:none}
  .pills{display:none}          /* replaced by the bottom tab bar */
  .tr{margin-left:auto}
  .me{padding:3px 11px 3px 3px}
  .me .nm{display:none}
  .wrap{padding:4px 14px 88px}  /* clears the tab bar */
  .desktop-only{display:none!important}
  .mobile-only{display:block}

  .tabbar{
    display:flex; position:fixed; left:0; right:0; z-index:40;
    bottom:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    background:var(--panel); border-top:1px solid var(--hair);
  }
  .tabbar .nav-link{
    flex:1 1 0; border:0; background:transparent; cursor:pointer; padding:7px 2px 5px;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:9.5px; font-weight:600; color:var(--ink-3); border-radius:10px; position:relative;
  }
  .tabbar .nav-link{min-width:0}
  .tabbar .nav-link > span:not(.tn){max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tabbar .nav-link svg{width:19px; height:19px}
  .tabbar .nav-link[aria-current="page"]{color:var(--accent)}
  .tabbar .tn{
    position:absolute; top:2px; left:50%; margin-left:5px;
    background:var(--accent); color:#fff; font-size:8.5px; font-weight:700;
    border-radius:var(--r-pill); padding:1px 5px; min-width:15px; text-align:center; line-height:1.4;
  }

  .head{margin:10px 0 16px; gap:12px}
  .head h1{font-size:21px}
  .head .lede{font-size:12.5px}
  .head .act{margin-left:0; width:100%}
  .head .act .btn{flex:1 1 auto}

  /* hero + funnel stack */
  .hero{gap:20px; flex-direction:column}
  .hero .fig{min-width:0; width:100%}
  .big{font-size:42px}
  .flow{flex:1 1 auto; width:100%}
  .panel{padding:16px 15px}
  .g{gap:10px; margin-bottom:10px}
  .g-3{grid-template-columns:1fr}
  .g-3 > :first-child{grid-column:auto}

  /* toolbar wraps cleanly */
  .toolbar{gap:7px}
  .search{flex:1 1 100%; order:-1}
  .chipbar{width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch}
  .chipbar::-webkit-scrollbar{display:none}
  .sel{flex:1 1 calc(50% - 4px); min-width:0}
  .views{overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px}

  /* detail */
  .dh h2{font-size:20px}
  .banner{padding:15px 16px; gap:12px}
  .banner .ba{margin-left:0; width:100%}
  .banner .ba .btn{flex:1 1 auto}
  .qa p.lead{font-size:13.5px}
  .decide{position:sticky; bottom:calc(72px + env(safe-area-inset-bottom,0px)); z-index:20;
          background:var(--panel); padding:10px 0 2px; margin-top:12px}

  /* shortlist / compare / audit */
  .sl-grid{grid-template-columns:1fr 1fr; gap:9px}
  .slc{padding:14px 13px}
  .slc .cn{font-size:14px}
  .slc .tr2{gap:10px; flex-wrap:wrap}
  .cmp{grid-template-columns:1fr!important}
  .audit{grid-template-columns:1fr auto; gap:0}
  .audit > div:nth-child(-n+5){display:none}
  .audit > div{border-top:0; padding:5px 14px}
  .audit .audit-row:nth-child(5n+1){border-top:1px solid var(--hair); padding-top:12px; font-weight:600}
  .audit .audit-row:nth-child(5n){padding-bottom:12px}

  /* emails */
  .mail{grid-template-columns:1fr auto; gap:8px; padding:12px 15px}
  .mail .kind{grid-row:2; justify-self:start}
  .mail .mr{grid-row:2; justify-self:end}

  .modal{max-height:92vh; border-radius:16px}
  .modal-h{padding:17px 18px 0}
  .modal-b{padding:14px 18px 18px}
  .modal-f{padding:0 18px 18px}
  .keys{grid-template-columns:1fr}
  .bulkbar{bottom:calc(76px + env(safe-area-inset-bottom,0px)); width:calc(100% - 28px); justify-content:center}
  .toasts{left:14px; right:14px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); max-width:none}
  .fv-top,.fv-sec,.fv-status,.fv-steps{padding-left:18px; padding-right:18px}
  .fv-steps{flex-wrap:wrap; gap:14px}
  .fv-step{flex:1 1 42%}
  .fv-step::after{display:none}
}

@media (max-width:480px){
  .wrap{padding:4px 12px 88px}
  .flow .fname{width:66px; flex:0 0 66px; font-size:10.5px}
  .flow .fpct{width:32px; flex:0 0 32px}
  .hm .hlab{width:22px; flex:0 0 22px; font-size:9px}
  .hm .cell{height:18px; border-radius:4px}
  .big{font-size:36px}
  .head h1{font-size:19px}
  .sl-grid{grid-template-columns:1fr}
  .cols{height:104px}
  .blr{grid-template-columns:74px 1fr auto}
  .tabbar .nav-link{font-size:9px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}


/* =====================================================================
   Portal extensions: everything the working app needs on top of the
   prototype's design system. Same tokens, same register.
   ===================================================================== */

a{color:inherit}
.btn,.chip,.vchip,.icb,.nav-link,.slc,.load,.mail,.plain,.bb{text-decoration:none}
a.slc,a.mail,a.load,a.plain,a.act-link{color:inherit}
.link{color:var(--accent); text-decoration:none; font-weight:500}
.link:hover{text-decoration:underline}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-3)}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.grow{flex:1 1 auto; min-width:0}
.gap-12{height:12px}
.gap-20{height:20px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
button[disabled],.btn[aria-disabled="true"]{opacity:.38; cursor:not-allowed}
form.inline{display:inline}

/* selection checkbox: a drawn bar for the mixed state, no dash glyph */
.selbox.mixed::after{content:""; width:7px; height:2px; border-radius:2px; background:#fff}

/* ---------------------------------------------------------- top bar extras */
.bell{position:relative}
.bell .dot{
  position:absolute; top:3px; right:2px; min-width:15px; height:15px; padding:0 4px;
  border-radius:var(--r-pill); background:var(--pink); color:#1A0F18;
  font-size:9px; font-weight:700; display:grid; place-items:center; font-family:var(--ui);
}
.cycle-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-3);
  background:var(--panel); border-radius:var(--r-pill); padding:6px 11px; white-space:nowrap;
}
.cycle-chip i{width:6px; height:6px; border-radius:50%; background:var(--pass); display:block}
.cycle-chip.closed i{background:var(--ink-3)}
.cycle-chip.draft i{background:var(--warn)}

/* dropdowns built on <details>, no JavaScript needed */
.dd{position:relative}
.dd > summary{list-style:none; cursor:pointer}
.dd > summary::-webkit-details-marker{display:none}
.menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:50; min-width:236px;
  background:var(--panel); border-radius:14px; padding:6px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55), 0 0 0 1px var(--hair);
}
.menu .mh{padding:10px 12px 9px; border-bottom:1px solid var(--hair); margin-bottom:5px}
.menu .mh b{display:block; font-size:13px; font-weight:600}
.menu .mh span{font-size:11px; color:var(--ink-3)}
.menu a,.menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:9px;
  font-size:12.5px; color:var(--ink-2); text-decoration:none; background:transparent; border:0; cursor:pointer; text-align:left;
}
.menu a:hover,.menu button:hover{background:var(--panel-2); color:var(--ink)}
.menu svg{width:15px; height:15px; flex:0 0 15px; opacity:.85}
.menu .sep{height:1px; background:var(--hair); margin:5px 4px}
.menu.wide{min-width:340px; padding:0}
.notif{display:grid; grid-template-columns:auto 1fr; gap:10px; padding:11px 14px; border-top:1px solid var(--hair); text-decoration:none; color:inherit}
.notif:hover{background:var(--panel-2)}
.notif .nd{width:7px; height:7px; border-radius:50%; margin-top:6px; background:var(--ink-3)}
.notif.unread .nd{background:var(--pink)}
.notif .nt{font-size:12.5px; line-height:1.4; color:var(--ink)}
.notif .nb{font-size:11px; color:var(--ink-3); margin-top:2px}
.nd.accent{background:var(--accent)!important}
.nd.fail{background:var(--fail)!important}

.role{
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; font-family:var(--ui);
  border-radius:var(--r-pill); padding:3px 8px; white-space:nowrap;
}
.role-super_admin{background:rgba(255,172,234,.16); color:var(--pink)}
.role-admin{background:var(--accent-dim); color:var(--accent)}
.role-reviewer{background:var(--panel-2); color:var(--ink-2)}
:root[data-theme="light"] .role-super_admin{color:#B8338F}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .role-super_admin{color:#B8338F}}

/* ---------------------------------------------------------- email kinds */
.k-acceptance{background:var(--pass-dim); color:var(--pass)}
.k-rejection{background:var(--panel-2); color:var(--ink-3)}
.k-auto{background:var(--fail-dim); color:var(--fail)}
.k-received{background:var(--accent-dim); color:var(--accent)}

/* ---------------------------------------------------------- attention centre */
.attn{display:flex; flex-direction:column}
.attn-r{display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:13px 0; border-top:1px solid var(--hair)}
.attn-r:first-child{border-top:0; padding-top:2px}
.attn-r .tone{width:9px; height:9px; border-radius:50%; background:var(--ink-3); display:block}
.attn-r .tone.t-fail{background:var(--fail); box-shadow:0 0 0 4px var(--fail-dim)}
.attn-r .tone.t-warn{background:var(--warn); box-shadow:0 0 0 4px var(--warn-dim)}
.attn-r .tone.t-mail{background:var(--source)}
.attn-r .tt{font-size:13px; font-weight:600}
.attn-r .td{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.all-clear{display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:12.5px}
.all-clear i{width:30px; height:30px; border-radius:50%; background:var(--pass-dim); color:var(--pass); display:grid; place-items:center; font-style:normal; font-weight:700}

/* ---------------------------------------------------------- forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.form-grid .full{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label,.label{font-size:12px; font-weight:600; color:var(--ink)}
.field .req{color:var(--pink); margin-left:2px}
.input{
  width:100%; border:0; background:var(--panel-2); border-radius:11px; padding:10px 13px;
  font-size:13px; color:var(--ink); outline:0; transition:box-shadow .15s, background .15s;
  box-shadow:inset 0 0 0 1px transparent;
}
.input::placeholder{color:var(--ink-3)}
.input:focus{box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--panel)}
textarea.input{resize:vertical; min-height:96px; line-height:1.55}
select.input{cursor:pointer; appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.input.bad{box-shadow:inset 0 0 0 1.5px var(--fail)}
.hint{font-size:11.5px; color:var(--ink-3); line-height:1.45}
.err{font-size:11.5px; color:var(--fail); font-weight:500}
.prefix{position:relative}
.prefix span{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:13px}
.prefix .input{padding-left:26px}

.check{display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.check input{appearance:none; width:17px; height:17px; flex:0 0 17px; margin:1px 0 0; border-radius:5px; background:var(--panel-2); box-shadow:inset 0 0 0 1.5px var(--hair); cursor:pointer; display:grid; place-items:center}
.check input:checked{background:var(--accent); box-shadow:none}
.check input:checked::after{content:"\2713"; color:#fff; font-size:11px; font-weight:700}
.check b{color:var(--ink); font-weight:600}

.switch{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--hair); cursor:pointer}
.switch:first-of-type{border-top:0}
.switch .st{font-size:12.5px; font-weight:600}
.switch .sd{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.switch input{appearance:none; width:38px; height:22px; flex:0 0 38px; border-radius:var(--r-pill); background:var(--panel-3); position:relative; cursor:pointer; transition:background .15s}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(16px)}

.fs{background:var(--panel); border-radius:var(--r-panel); padding:20px 22px; margin-bottom:12px}
.fs-h{margin-bottom:16px}
.fs-h h3{font-size:14px; font-weight:600}
.fs-h p{margin:4px 0 0; font-size:12px; color:var(--ink-3); max-width:70ch; line-height:1.5}
.form-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px}

.alert{border-radius:14px; padding:12px 15px; font-size:12.5px; line-height:1.5; margin-bottom:12px; display:flex; gap:10px; align-items:flex-start}
.alert.bad{background:var(--fail-dim); color:var(--fail)}
.alert.good{background:var(--pass-dim); color:var(--pass)}
.alert.info{background:var(--accent-dim); color:var(--accent)}
.alert b{font-weight:600}
.alert ul{margin:4px 0 0; padding-left:18px}

/* ---------------------------------------------------------- dialogs */
dialog.dlg{
  border:0; padding:0; background:var(--panel); color:var(--ink); border-radius:var(--r-panel);
  width:min(520px,calc(100% - 28px)); max-height:88vh; overflow:auto;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
dialog.dlg::backdrop{background:rgba(8,7,11,.66); backdrop-filter:blur(4px)}
dialog.dlg.wide{width:min(640px,calc(100% - 28px))}
.dlg-h{padding:20px 22px 0; display:flex; gap:12px; align-items:flex-start}
.dlg-h h3{font-size:17px; font-weight:600; letter-spacing:-.018em}
.dlg-h p{margin:5px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5}
.dlg-h .x{margin-left:auto; background:var(--panel-2); border:0; cursor:pointer; color:var(--ink-2); font-size:13px; line-height:1; padding:7px 10px; border-radius:var(--r-pill)}
.dlg-b{padding:16px 22px 4px}
.dlg-f{padding:16px 22px 22px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}

/* ---------------------------------------------------------- sub navigation */
.subnav{display:inline-flex; gap:4px; background:var(--panel); border-radius:var(--r-pill); padding:4px; margin-bottom:16px; flex-wrap:wrap}
.subnav a{padding:7px 14px; border-radius:var(--r-pill); font-size:12px; font-weight:500; color:var(--ink-2); text-decoration:none}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--chip-on); color:var(--chip-on-ink); font-weight:600}

/* ---------------------------------------------------------- pagination */
.pager{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap}
.pager .pi{font-size:11.5px; color:var(--ink-3)}
.pager .pl{display:flex; gap:4px; flex-wrap:wrap}
.pager a,.pager span.pg{
  min-width:32px; height:32px; padding:0 10px; border-radius:var(--r-pill); display:grid; place-items:center;
  font-size:12px; font-weight:500; background:var(--panel); color:var(--ink-2); text-decoration:none;
}
.pager a:hover{color:var(--ink); background:var(--panel-2)}
.pager span.pg.on{background:var(--chip-on); color:var(--chip-on-ink); font-weight:600}
.pager span.pg.off{opacity:.4}

/* ---------------------------------------------------------- code + tokens */
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.6;
  background:var(--panel-2); border-radius:12px; padding:14px 16px; overflow-x:auto; white-space:pre; color:var(--ink-2);
}
.token-reveal{display:flex; gap:8px; align-items:center; background:var(--pass-dim); border-radius:12px; padding:12px 14px; flex-wrap:wrap}
.token-reveal code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--ink); word-break:break-all; flex:1 1 260px}
.ph-chip{
  display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;
  background:var(--panel-2); color:var(--ink-2); border:0; border-radius:8px; padding:5px 9px; cursor:pointer;
}
.ph-chip:hover{background:var(--accent-dim); color:var(--accent)}
.ph-chip span{font-family:var(--sans); color:var(--ink-3); font-size:10.5px}

/* ---------------------------------------------------------- simple data tables */
.dt{width:100%; border-collapse:collapse; min-width:0}
.dt th{text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:12px 14px; font-family:var(--ui); white-space:nowrap}
.dt td{padding:12px 14px; border-top:1px solid var(--hair); font-size:12.5px; vertical-align:middle}
.dt tr{cursor:default}
.dt tbody tr:hover{background:transparent}

/* ---------------------------------------------------------- auth + public */
.auth{min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr 1fr}
.auth-art{
  background:var(--panel); padding:42px 48px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-art svg.logo{width:170px; height:auto; display:block}
.auth-art .line{position:absolute; left:0; right:0; bottom:120px; width:100%; height:auto; opacity:.9}
.auth-art h2{font-size:34px; font-weight:600; letter-spacing:-.035em; line-height:1.08; max-width:15ch}
.auth-art h2 .dim{color:var(--ink-3)}
.auth-art p{font-size:13px; color:var(--ink-2); max-width:44ch; line-height:1.6; margin:14px 0 0}
.auth-art .foot{font-size:11px; color:var(--ink-3); position:relative}
.auth-form{display:flex; align-items:center; justify-content:center; padding:40px 24px}
.auth-card{width:100%; max-width:380px}
.auth-card h1{font-size:26px; font-weight:600; letter-spacing:-.03em}
.auth-card .sub{font-size:13px; color:var(--ink-2); margin:8px 0 26px; line-height:1.55}
.auth-card form{display:flex; flex-direction:column; gap:14px}
.auth-card .btn{width:100%; padding:12px 16px; font-size:13px}
.auth-card .alt{font-size:12px; color:var(--ink-3); text-align:center; margin-top:18px}
.auth-mobile-logo{display:none}

.pub-top{display:flex; align-items:center; gap:14px; padding:18px 22px; max-width:880px; margin:0 auto}
.pub-top svg{width:92px; height:auto; display:block}
.pub-top .bt{font-size:11.5px; color:var(--ink-3); border-left:1px solid var(--hair); padding-left:12px}
.pub-wrap{max-width:880px; margin:0 auto; padding:10px 22px 80px}
.pub-hero{padding:16px 0 26px}
.pub-hero .eyebrow{margin-bottom:12px}
.pub-hero h1{font-size:38px; font-weight:600; letter-spacing:-.04em; line-height:1.05; max-width:18ch}
.pub-hero h1 .dim{color:var(--ink-3)}
.pub-hero p{font-size:14px; color:var(--ink-2); line-height:1.65; max-width:60ch; margin:14px 0 0}
.rules{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:22px}
.rules div{background:var(--panel); border-radius:14px; padding:13px 14px}
.rules b{display:block; font-size:12px; font-weight:600}
.rules span{font-size:11px; color:var(--ink-3); line-height:1.4; display:block; margin-top:4px}
.honey{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------------------------------------------------------- mobile table cards (class based) */
@media (max-width:860px){
  .tbl-wrap.cards{background:transparent; overflow:visible}
  .tbl-wrap.cards table,.tbl-wrap.cards thead,.tbl-wrap.cards tbody,.tbl-wrap.cards tr,.tbl-wrap.cards td{display:block; width:auto; min-width:0}
  .tbl-wrap.cards thead{display:none}
  .tbl-wrap.cards tbody tr{
    background:var(--panel); border-radius:14px; border-top:0; margin-bottom:9px; padding:13px 15px;
    display:grid; grid-template-columns:auto 1fr auto; gap:5px 10px; align-items:center;
  }
  .tbl-wrap.cards tbody tr.sel{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .tbl-wrap.cards td{padding:0; font-size:12.5px; border:0}
  .tbl-wrap.cards td.c-cbx{grid-column:1; grid-row:1 / span 2; align-self:start; padding-top:2px}
  .tbl-wrap.cards td.c-company{grid-column:2; grid-row:1}
  .tbl-wrap.cards td.c-checks{grid-column:3; grid-row:1; justify-self:end}
  .tbl-wrap.cards td.c-founder{grid-column:2 / span 2; grid-row:2; color:var(--ink-2)}
  .tbl-wrap.cards td.c-founder .co-ref{display:inline; margin-left:6px}
  .tbl-wrap.cards td.c-sector{grid-column:1 / span 2; grid-row:3; margin-top:6px}
  .tbl-wrap.cards td.c-mrr{grid-column:3; grid-row:3; justify-self:end; margin-top:6px; font-weight:600}
  .tbl-wrap.cards td.c-status{grid-column:1 / span 2; grid-row:4; margin-top:2px}
  .tbl-wrap.cards td.c-reviewer{grid-column:3; grid-row:4; justify-self:end; margin-top:2px}
  .tbl-wrap.cards td.c-location,.tbl-wrap.cards td.c-months,.tbl-wrap.cards td.c-submitted{display:none}
  .tbl-wrap.cards tr[data-sub]::after{content:attr(data-sub); grid-column:1 / -1; grid-row:5; font-size:10.5px; color:var(--ink-3); margin-top:4px}
  .tbl-wrap.cards td.c-cbx + td.c-company{grid-column:2}
  .tbl-wrap.cards tr:not(:has(.c-cbx)) td.c-company{grid-column:1 / span 2}
  .tbl-wrap.cards tr:not(:has(.c-cbx)) td.c-founder{grid-column:1 / span 3}

  .form-grid{grid-template-columns:1fr}
  .fs{padding:17px 16px}
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .auth-mobile-logo{display:block; margin-bottom:26px}
  .auth-mobile-logo svg{width:96px; height:auto}
  .pub-top{padding:14px 16px}
  .pub-wrap{padding:6px 16px 70px}
  .pub-hero h1{font-size:28px}
  .rules{grid-template-columns:1fr 1fr}
  .menu{position:fixed; left:12px; right:12px; top:62px; min-width:0}
  .menu.wide{min-width:0}
  .cycle-chip{display:none}
  .dt{display:block; overflow-x:auto}
}
@media (max-width:480px){
  .rules{grid-template-columns:1fr}
}

/* reviewer load rows: the bar needs block boxes to draw */
.load > span:nth-child(2),.load .lname,.load .lbar{display:block}
.flow a.ftrack{display:block}
.rr{text-decoration:none}

/* keep the top bar on one line between tablet and small desktop */
@media (max-width:1320px){
  .pills .nav-link{padding:7px 11px}
  .cycle-chip{display:none}
}
@media (max-width:1100px) and (min-width:861px){
  .brand .bd,.brand .bt{display:none}
  .pills .n{display:none}
  .pills .nav-link{padding:7px 9px; font-size:12px}
}

/* a default button sitting on a panel steps up one shade so it never disappears */
:is(.panel,.fs,dialog,.cmp-col) .btn:not(.pri):not(.vio):not(.good):not(.bad):not(.gh){background:var(--panel-2)}
:is(.panel,.fs,dialog,.cmp-col) .btn:not(.pri):not(.vio):not(.good):not(.bad):not(.gh):hover{background:var(--panel-3)}
.back{text-decoration:none}
.noteform textarea.input{min-height:44px}
:is(.panel,.fs,dialog) .sel{background:var(--panel-2)}
[hidden]{display:none!important}
@media (max-width:860px){ .tbl-wrap.cards td.c-founder > div{display:inline} }

/* uploaded documents on the application page */
.docs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.doc{display:flex; gap:11px; align-items:center; padding:11px 12px; border-radius:12px; background:var(--panel-2); min-width:0; transition:background .14s}
a.doc:hover{background:var(--panel-3)}
.doc-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent); font-size:11px; font-weight:700; flex:0 0 34px; font-family:var(--ui)}
.doc-tx{display:flex; flex-direction:column; min-width:0; flex:1}
.doc-tx b{font-size:12.5px; font-weight:600}
.doc-tx span{font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-go{font-size:11.5px; font-weight:600; color:var(--accent)}
.doc.missing{opacity:.6}
.doc.missing .doc-ic{background:var(--fail-dim); color:var(--fail)}
@media (max-width:860px){.docs{grid-template-columns:1fr}}

/* email delivery state */
.dl{font-weight:600}
.dl-pass{color:var(--pass)}
.dl-fail{color:var(--fail)}
.dl-neutral{color:var(--ink-3)}
.track{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; border-radius:var(--r-pill); padding:3px 9px; white-space:nowrap}
.track::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.track-pass{background:var(--pass-dim); color:var(--pass)}
.track-fail{background:var(--fail-dim); color:var(--fail)}
.track-neutral{background:var(--panel-2); color:var(--ink-3)}

/* brevo sync card */
.tile-stat{background:var(--panel-2); border-radius:14px; padding:13px 15px}
.tile-stat span{display:block; font-size:11px; color:var(--ink-3)}
.tile-stat b{display:block; font-size:22px; font-weight:600; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums}
.tile-stat b.fail-text{color:var(--fail)}

/* document viewer, over the application page */
dialog.doc-viewer{width:min(1100px,calc(100% - 24px)); height:min(92vh,1000px); max-height:none; padding:0; display:none; flex-direction:column; overflow:hidden}
dialog.doc-viewer[open]{display:flex}
.dv-h{display:flex; align-items:center; gap:12px; padding:12px 14px 12px 18px; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.dv-t{min-width:0; flex:1 1 220px; display:flex; flex-direction:column; gap:2px}
.dv-t b{font-size:14px; font-weight:600}
.dv-t span{font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dv-a{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.dv-a .x{background:var(--panel-2); border:0; cursor:pointer; color:var(--ink-2); font-size:15px; line-height:1; padding:8px 11px; border-radius:var(--r-pill); margin-left:4px}
.dv-n{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:3em; text-align:center}
.dv-b{flex:1 1 auto; min-height:0; background:var(--panel-2); display:flex; align-items:center; justify-content:center; overflow:auto}
.dv-b iframe{width:100%; height:100%; border:0; background:#fff}
.dv-b img{max-width:100%; max-height:100%; object-fit:contain; display:block; margin:auto; cursor:zoom-in}
.dv-b img.zoom{max-width:none; max-height:none; cursor:zoom-out}
.dv-b .dv-wait{font-size:12.5px; color:var(--ink-3)}
@media (max-width:760px){
  dialog.doc-viewer{width:100%; height:100%; max-width:none; border-radius:0}
  .dv-a .btn.gh{display:none}
}
.dv-b.pdf{display:block; padding:16px; text-align:center}
.dv-b.pdf canvas{display:block; margin:0 auto 14px; max-width:100%; height:auto; background:#fff; border-radius:6px; box-shadow:0 6px 24px -10px rgba(0,0,0,.35)}