/* eXp single-agent calculator — standalone page.

   Palette, type roles and the header/footer shape are shared with the business
   calculator at pages/exp-retention-calculator, which takes them from the
   member hub. Nothing loads from a CDN: the font stack names Archivo and Inter
   and falls back to the system grotesque when they are not installed.

   Mobile first. Every table that cannot shrink scrolls inside its own box, so
   the page itself never scrolls sideways. */

:root{
  --lime:#CCFF00;--lime-dim:#BEEE00;--lime-type:#6E8C00;
  --carbon:#0E0E0E;--grey:#6B6B66;--line:#E4E4E0;
  --paper:#FAFAF8;--raised:#FFFFFF;--sunk:#F2F2EE;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --num:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --dls:-.028em;--h1ls:-.038em;
  --barh:64px;
  --gutter:clamp(16px,3.2vw,56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--carbon);font-family:var(--sans);
  font-weight:400;font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:60;background:var(--raised);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);min-height:var(--barh)}
.mark{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  line-height:1;white-space:nowrap;font-size:.9rem}
.mark .blk{position:relative;display:inline-block;line-height:1;margin-left:.06em}
.mark .blk>i{position:relative;z-index:1;font-style:normal;color:var(--carbon)}
.mark .blk::before{content:"";position:absolute;z-index:0;background:var(--lime);
  left:-.15em;right:.04em;top:-.02em;bottom:-.02em}
.top .where{font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);text-align:right}

/* ---------- page ---------- */
main{padding:clamp(24px,3.4vw,44px) var(--gutter) 80px}
.wrap{max-width:1080px;margin:0 auto}

.d{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:var(--dls);
  text-transform:uppercase;margin:0}
h1.d{font-weight:900;font-size:clamp(1.6rem,4.4vw,2.42rem);line-height:.98;
  letter-spacing:var(--h1ls);margin:0 0 12px}
h2.d{font-weight:900;font-size:clamp(1.04rem,2.4vw,1.3rem);line-height:1;margin:0}
h3.d{font-weight:800;font-size:clamp(.92rem,2vw,1.02rem);margin:0}
.kick{display:block;font-weight:700;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);margin:0 0 12px}
.sub{font-size:1rem;color:var(--grey);margin:0}
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin:0 0 18px}
section{margin:clamp(32px,4vw,54px) 0 0}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}

/* ---------- panels ---------- */
.panel{background:var(--raised);border:1px solid var(--line);padding:clamp(16px,2.6vw,28px)}
.panel+.panel{margin-top:14px}
.note{background:var(--sunk);border-left:3px solid var(--lime);padding:12px 14px;
  font-size:.86rem;color:var(--carbon);margin:14px 0 0}
.note b{font-weight:700}
.warn{border-left-color:#E0A500}
.work{font-size:.8rem;color:var(--grey);margin:4px 0 0}
.work code{font-family:var(--num);font-size:.94em;background:var(--sunk);padding:1px 4px}

/* ---------- fields ---------- */
.fields{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.f .hint{font-size:.76rem;color:var(--grey);line-height:1.4}
input[type=number],input[type=text],select{width:100%;font-family:var(--num);font-size:1.02rem;
  font-weight:600;color:var(--carbon);background:var(--paper);border:1px solid var(--line);
  border-radius:0;padding:11px 12px;min-width:0}
select{font-family:var(--sans);font-size:.92rem;font-weight:500}
input:focus,select:focus{outline:2px solid var(--lime);outline-offset:-1px;border-color:var(--carbon)}
input[readonly]{background:var(--sunk);color:var(--carbon);border-style:dashed}
input[type=range]{width:100%;accent-color:var(--lime-type);padding:0;border:0;background:none}
.splitrow{display:grid;grid-template-columns:1fr 92px;gap:10px;align-items:center}

/* ---------- figures ---------- */
.big{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.big>div{background:var(--raised);padding:16px 16px 18px}
.big .lbl{display:block;font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin:0 0 8px}
.big .val{font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.32rem,3.8vw,1.86rem);line-height:1;display:block}
.big .val.lime{background:var(--lime);display:inline-block;padding:2px 7px;margin-left:-4px}
.big .sml{display:block;font-size:.78rem;color:var(--grey);margin-top:7px;line-height:1.4}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
/* The first column carries the label and is the one that wraps. Give it room
   so a phone shows a two-line label rather than a four-line one. */
th:first-child,td:first-child{min-width:170px}
th,td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);border-bottom:1px solid var(--carbon)}
tbody td{font-family:var(--num);font-weight:500}
tbody td:first-child{font-family:var(--sans)}
tr.tot td{font-weight:800;border-top:2px solid var(--carbon);border-bottom:0}
tr.off td{color:var(--grey)}
td.pos{color:var(--lime-type);font-weight:700}

/* ---------- member cards ---------- */
.members{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.mcard{background:var(--raised);border:1px solid var(--line);padding:16px 16px 18px;min-width:0}
.mcard h3{margin:0 0 12px}
.mcard .lines{margin-top:14px;border-top:1px solid var(--line)}
.mcard .ln{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:.86rem}
.mcard .ln span:last-child{font-family:var(--num);font-weight:600;white-space:nowrap}
.mcard .ln.key{font-weight:700}
.mcard .ln.key span:last-child{font-weight:800}
.mcard .ln.sub2{color:var(--grey);font-size:.78rem}

/* ---------- assumptions ---------- */
details.ass{background:var(--raised);border:1px solid var(--carbon)}
details.ass>summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;display:flex;
  justify-content:space-between;gap:12px;align-items:center}
details.ass>summary::-webkit-details-marker{display:none}
details.ass>summary::after{content:"Open";color:var(--grey);font-size:.62rem}
details.ass[open]>summary::after{content:"Close"}
details.ass>summary:hover{background:var(--lime)}
.assbody{padding:4px 16px 20px;border-top:1px solid var(--line)}
.assgrp{margin-top:20px}
.assgrp>h4{font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.reset{margin-top:22px}

/* ---------- buttons and foot ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 22px;border:2px solid var(--lime);background:var(--lime);color:var(--carbon);cursor:pointer}
.btn:hover{background:var(--lime-dim);border-color:var(--lime-dim)}
.btn.ghost{background:transparent;border-color:var(--carbon)}
.btn.ghost:hover{background:var(--carbon);color:#fff}

.cta{background:var(--carbon);color:#fff;padding:clamp(22px,3.4vw,36px)}
.cta h2{color:#fff}
.cta p{color:#C9C9C4;margin:12px 0 20px}
.cta .btn{border-color:var(--lime)}

footer.site{border-top:1px solid var(--line);background:var(--raised);
  padding:clamp(24px,3.4vw,40px) var(--gutter)}
footer.site .wrap{max-width:1080px;margin:0 auto}
footer.site .disc{font-size:.8rem;color:var(--grey);line-height:1.6;margin:16px 0 0}
footer.site .disc b{color:var(--carbon)}
footer.site .flinks{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;
  font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
footer.site .flinks a{border-bottom:2px solid var(--lime);padding-bottom:2px}

/* ---------- editable rows: staff and bills ---------- */
.rowline{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px;
  align-items:center;margin-bottom:10px}
.rowline .del{background:transparent;border:1px solid var(--line);cursor:pointer;
  font-weight:700;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:11px 12px;
  color:var(--grey)}
.rowline .del:hover{border-color:var(--carbon);color:var(--carbon)}
@media (max-width:520px){
  .rowline{grid-template-columns:minmax(0,1fr) auto}
  .rowline input[type=text]{grid-column:1 / -1}
}

/* The sources table carries a sentence, not a number, in its second column.
   Every other table holds its figures on one line; this one has to wrap. */
#rates-table{min-width:620px}
#rates-table th:nth-child(2),#rates-table td:nth-child(2){text-align:left;white-space:normal;
  font-family:var(--sans);min-width:280px;line-height:1.45}

/* ---------- the deals grid ---------- */
/* The operator's own sheet: GCI down the side, average fee across the top,
   deals in the cells. It is wide by nature and scrolls inside its box. */
#grid-table{min-width:760px;font-size:.78rem}
#grid-table th,#grid-table td{padding:6px 8px;min-width:0}
#grid-table th:first-child,#grid-table td:first-child{min-width:96px;font-weight:700}
#grid-table tbody td{font-family:var(--num)}
#grid-table td.col{background:#F6FBE0}
#grid-table tr.row td{background:#F6FBE0}
#grid-table td.hit{background:var(--lime);font-weight:800}
#grid-table tr.row td.col{background:#EDF7C4}
/* The marked cell sits on both the shaded row and the shaded column, so it
   has to beat them both. */
#grid-table tr.row td.hit{background:var(--lime)}

/* ---------- the month table ---------- */
tr.cap td{background:var(--lime)}
tr.cap td:first-child{font-weight:800}
.stage{font-size:.74rem;color:var(--grey);white-space:nowrap}

/* The sources table quotes the deck, so its middle column carries sentences. */
#src-table{min-width:640px}
#src-table th:nth-child(2),#src-table td:nth-child(2),
#src-table th:nth-child(3),#src-table td:nth-child(3){text-align:left;white-space:normal;
  font-family:var(--sans);line-height:1.45}
#src-table td:nth-child(2){min-width:300px}
#src-table td:nth-child(3){min-width:130px;color:var(--grey);font-size:.82rem}

/* A field set to hidden must actually go. The .f rule sets display:flex, which
   would otherwise beat the browser's default for the hidden attribute. */
[hidden]{display:none !important}