/* eXp retention calculator — standalone page.

   Palette, type roles and the header/footer shape are taken from the member
   hub (assets/hub.css) so the two sit together. 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}