/* Boomerang — one stylesheet, token-driven, light + dark. */

:root{
  --ground:#EEF1EB; --surface:#FFFFFF; --surface-2:#F6F8F3; --surface-3:#E9EDE4;
  --line:#DBE0D3; --line-strong:#C3CBB8;
  --ink:#15211B; --ink-2:#4B5B51; --ink-3:#7A887E;
  --forest:#1B4D3E; --forest-hi:#256A55;
  --gold:#9C6D12; --gold-ink:#7A5407; --gold-soft:#F6E8C8; --gold-line:#E3CE9B;
  --good:#2E7D5B; --good-soft:#DCEFE4;
  --info:#2F6690; --info-soft:#DCE9F2;
  --warn:#A9711A; --warn-soft:#F7E9CE;
  --crit:#A6413A; --crit-soft:#F5DEDC;
  --btn-bg:#1B4D3E; --btn-fg:#FFFFFF; --btn-bg-hover:#256A55;
  --avatar-fg:#FFFFFF;
  --chrome:#12201A; --chrome-2:#1E3229; --chrome-ink:#DFE8E1; --chrome-ink-2:#93A79A;
  --shadow:0 1px 2px rgba(21,33,27,.06), 0 8px 24px -12px rgba(21,33,27,.18);
  --shadow-lift:0 2px 4px rgba(21,33,27,.07), 0 18px 40px -18px rgba(21,33,27,.28);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#070C0A; --surface:#18241E; --surface-2:#22302A; --surface-3:#2D3E36;
    --line:#44554C; --line-strong:#5F7669;
    --ink:#EDF4EF; --ink-2:#B7C6BD; --ink-3:#97AA9F;
    --forest:#7FCEAE; --forest-hi:#9BDCC2;
    --gold:#E5BC6B; --gold-ink:#F2D294; --gold-soft:#3A2F19; --gold-line:#6B5427;
    --good:#7FCEAE; --good-soft:#1D3B2F;
    --info:#8CBBDC; --info-soft:#1B3244;
    --warn:#E3AE58; --warn-soft:#3A2D19;
    --crit:#EA9A94; --crit-soft:#42231F;
    --btn-bg:#7FCEAE; --btn-fg:#070C0A; --btn-bg-hover:#9BDCC2;
    --avatar-fg:#070C0A;
    --chrome:#050908; --chrome-2:#18241E; --chrome-ink:#EDF4EF; --chrome-ink-2:#9FB2A7;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.75);
    --shadow-lift:0 2px 5px rgba(0,0,0,.55), 0 20px 46px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#070C0A; --surface:#18241E; --surface-2:#22302A; --surface-3:#2D3E36;
  --line:#44554C; --line-strong:#5F7669;
  --ink:#EDF4EF; --ink-2:#B7C6BD; --ink-3:#97AA9F;
  --forest:#7FCEAE; --forest-hi:#9BDCC2;
  --gold:#E5BC6B; --gold-ink:#F2D294; --gold-soft:#3A2F19; --gold-line:#6B5427;
  --good:#7FCEAE; --good-soft:#1D3B2F;
  --info:#8CBBDC; --info-soft:#1B3244;
  --warn:#E3AE58; --warn-soft:#3A2D19;
  --crit:#EA9A94; --crit-soft:#42231F;
  --btn-bg:#7FCEAE; --btn-fg:#070C0A; --btn-bg-hover:#9BDCC2;
  --avatar-fg:#070C0A;
  --chrome:#050908; --chrome-2:#18241E; --chrome-ink:#EDF4EF; --chrome-ink-2:#9FB2A7;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.75);
  --shadow-lift:0 2px 5px rgba(0,0,0,.55), 0 20px 46px -20px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.012em}
p{margin:0}
a{color:var(--forest)}
img{max-width:100%}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--forest-hi); outline-offset:2px; border-radius:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.wrap{max-width:1180px; margin:0 auto; padding:34px 20px 72px}
.narrow{max-width:840px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- app nav ---------- */
.nav{background:var(--chrome); color:var(--chrome-ink); position:sticky; top:0; z-index:60;
  border-bottom:1px solid rgba(255,255,255,.07)}
.nav-in{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.mark{display:inline-flex; align-items:center; gap:8px; font-weight:700; letter-spacing:-.02em; color:var(--chrome-ink); text-decoration:none}
.mark .wm{font-size:16px}
.nav-links{display:flex; gap:3px; flex-wrap:wrap}
.nav-links a{color:var(--chrome-ink-2); padding:6px 11px; border-radius:7px; font-size:13px;
  font-weight:500; text-decoration:none; transition:.15s}
.nav-links a:hover{color:var(--chrome-ink); background:var(--chrome-2)}
.nav-links a[aria-current="page"]{background:var(--chrome-2); color:#fff}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:11px}
.nav-right .nav-who{font-size:12.5px; color:var(--chrome-ink-2)}
.nav-right form{margin:0}
/* scoped to the form so it can't reach the theme toggle sitting beside it */
.nav-right form button{background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--chrome-ink);
  padding:5px 11px; border-radius:7px; font-size:12.5px}
.nav-right form button:hover{background:var(--chrome-2)}

/* ---------- theme toggle ---------- */
.themetoggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--ink-2); flex:none;
  transition:background .16s, color .16s;
}
.themetoggle:hover{background:var(--surface-3); color:var(--ink)}
/* Both icons sit stacked and cross-fade, so the swap reads as a transition. */
.themetoggle svg{
  position:absolute; display:block;
  transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.4,.5,1);
}
.themetoggle .t-sun{opacity:1; transform:rotate(0) scale(1)}
.themetoggle .t-moon{opacity:0; transform:rotate(90deg) scale(.5)}
.themetoggle[data-mode="dark"] .t-sun{opacity:0; transform:rotate(-90deg) scale(.5)}
.themetoggle[data-mode="dark"] .t-moon{opacity:1; transform:rotate(0) scale(1)}
/* inside the dark nav bar it takes the chrome palette, not the page palette */
.nav-right .themetoggle{border:0; border-radius:50%; padding:0; color:var(--chrome-ink-2)}
.nav-right .themetoggle:hover{background:var(--chrome-2); color:var(--chrome-ink)}
/* public pages have no nav, so it sits in the top-right corner of the page */
.themebar{max-width:1180px; margin:0 auto; padding:12px 16px 0; display:flex; justify-content:flex-end}
.themebar + .wrap{padding-top:10px}
@media (prefers-reduced-motion: reduce){ .themetoggle svg{transition:none} }

/* ---------- flash ---------- */
.flash{max-width:1180px; margin:16px auto -10px; padding:0 20px}
.flash div{padding:11px 15px; border-radius:9px; font-size:13.5px; font-weight:500}
.flash .ok{background:var(--good-soft); color:var(--good); border:1px solid var(--good)}
.flash .err{background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit)}

/* ---------- public referral page ---------- */
.pub{display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; align-items:start}
@media (max-width:860px){ .pub{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.idcard{padding:26px 22px; text-align:center; position:sticky; top:82px}
@media (max-width:860px){ .idcard{position:static} }
.avatar{width:78px; height:78px; margin:0 auto 14px; border-radius:50%; background:var(--forest);
  color:var(--avatar-fg); overflow:hidden; display:grid; place-items:center;
  font-family:"Newsreader",Georgia,serif; font-size:29px; font-weight:500}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.idcard h2{font-family:"Newsreader",Georgia,serif; font-size:23px; font-weight:500; line-height:1.2}
.idcard .role{font-size:13px; color:var(--ink-3); margin-top:3px}
.idcard .org{font-size:13.5px; color:var(--ink-2); margin-top:9px; font-weight:500}
.contacts{display:flex; flex-direction:column; gap:7px; margin-top:18px}
.contacts a{display:block; text-decoration:none; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font-size:13px; color:var(--ink); background:var(--surface-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.15s}
.contacts a:hover{border-color:var(--forest); color:var(--forest)}

.ticket{margin-top:20px; background:var(--gold-soft); border:1px solid var(--gold-line);
  border-radius:9px; padding:15px 14px; text-align:left}
.ticket .amt{font-family:"Newsreader",Georgia,serif; font-size:34px; font-weight:600;
  color:var(--gold-ink); line-height:1; font-variant-numeric:tabular-nums}
.ticket .what{font-size:12.5px; font-weight:600; color:var(--gold-ink); margin-top:8px}
.ticket .when{font-size:12px; color:var(--ink-2); margin-top:6px; line-height:1.45}
.ticket .when.lbl{font-size:12.5px; font-weight:600; color:var(--gold-ink); letter-spacing:.02em}
.ticket[hidden]{display:none}
/* The self-quote face of the card. Quiet on purpose — it is the one state that
   isn't offering money, so dressing it in gold would be a mixed message. */
.ticket.plain{background:var(--surface-2); border-color:var(--line)}
.ticket.plain .head{font-family:"Newsreader",Georgia,serif; font-size:19px; font-weight:500;
  color:var(--ink); line-height:1.15}
.ticket.plain .what{color:var(--ink-2); margin-top:7px}

.hero{padding:34px 34px 30px; border-bottom:1px solid var(--line)}
@media (max-width:600px){ .hero{padding:26px 20px 24px} }
.hero h1{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:clamp(28px,4.2vw,40px);
  line-height:1.12; max-width:16ch}
.hero .eyebrow + h1{margin-top:11px}
.hero .pitch{margin-top:15px; max-width:56ch; color:var(--ink-2); font-size:15.5px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line)}
@media (max-width:600px){ .steps{grid-template-columns:1fr} }
.step{padding:16px 20px; border-right:1px solid var(--line); background:var(--surface-2)}
.step:last-child{border-right:0}
.step[hidden]{display:none}
/* Self-quote tab: the reward step is gone, so the row closes up rather than
   leaving a gap. :last-child still points at the hidden third step, so the
   trailing border has to be cleared from the second one explicitly. */
.steps[data-two]{grid-template-columns:repeat(2,1fr)}
.steps[data-two] .step:nth-child(2){border-right:0}
@media (max-width:600px){ .step{border-right:0; border-bottom:1px solid var(--line)} }
.step .n{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--forest); font-weight:600; letter-spacing:.1em}
.step .t{font-size:13.5px; font-weight:600; margin-top:5px}
.step .d{font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.4}

.seg{display:flex; padding:20px 34px 0}
@media (max-width:600px){ .seg{padding:16px 20px 0} }
.seg-track{display:flex; background:var(--surface-3); border-radius:9px; padding:3px; gap:3px; width:100%}
.seg-track button{flex:1; background:transparent; border:0; border-radius:7px; padding:9px 12px;
  font-size:13.5px; font-weight:600; color:var(--ink-2); transition:.15s}
.seg-track button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

.formzone{padding:22px 34px 30px}
@media (max-width:600px){ .formzone{padding:20px} }
/* Both halves of the referral form are contained, so the line between "about
   you" and "who you're referring" is a panel edge rather than something the
   reader has to infer from spacing. The tint marks the half about the person
   filling it in; the other half stays plain so the person blocks inside it
   still read as the nested things they are. */
.fs{border:1px solid var(--line); border-radius:10px; padding:16px 17px 18px; margin:0 0 16px;
  background:var(--surface)}
/* A legend is normally cut into the fieldset border by the browser. Floating it
   takes it out of that treatment so the panel edge stays unbroken. */
.fs legend{padding:0; font-size:15px; font-weight:600; margin-bottom:3px; float:left; width:100%}
.fs .sub{clear:both; font-size:13px; color:var(--ink-2); margin-bottom:13px; max-width:60ch}
.fs-you{background:var(--surface-2)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:12px; font-weight:600; color:var(--ink-2)}
.field input, .field textarea, .field select{font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  padding:10px 12px; transition:.15s; width:100%}
.field textarea{resize:vertical; min-height:78px; line-height:1.5}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3)}
.field input:focus, .field textarea:focus, .field select:focus{outline:0; border-color:var(--forest);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent)}
.field input[aria-invalid="true"]{border-color:var(--crit); background:var(--crit-soft)}
.field input[disabled], .field textarea[disabled]{background:var(--surface-2); color:var(--ink-3); cursor:not-allowed}
.field .hint{font-size:11.5px; color:var(--ink-3)}
.err{font-size:11.5px; color:var(--crit); font-weight:500}

/* What is still needed, listed once at the top of the form that was submitted. */
.errsummary{margin:0 0 18px; padding:14px 16px; border-radius:10px;
  border:1px solid var(--crit); background:var(--crit-soft); color:var(--crit)}
.errsummary b{display:block; font-size:14px; letter-spacing:-.005em}
.errsummary ul{margin:8px 0 0; padding-left:18px}
.errsummary li{font-size:13px; line-height:1.55}
.errsummary p{margin:9px 0 0; font-size:12.5px; color:var(--ink-2)}

.refblock{border:1px solid var(--line); border-radius:9px; padding:15px; margin-bottom:10px; background:var(--surface-2)}
.refblock-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
.refblock-head .lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.linkbtn{background:none; border:0; padding:0; color:var(--ink-3); font-size:12px; font-weight:600;
  text-decoration:underline; text-underline-offset:2px}
.linkbtn:hover{color:var(--crit)}
.addrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.addmore{background:none; border:1px dashed var(--line-strong); border-radius:8px; flex:1;
  min-width:190px; padding:10px; font-size:13.5px; font-weight:600; color:var(--forest); transition:.15s}
.addmore:hover{border-color:var(--forest); background:var(--surface-2)}
.addmore[disabled]{opacity:.45; cursor:not-allowed}
.tally{font-size:12.5px; font-weight:600; color:var(--gold-ink); background:var(--gold-soft);
  border:1px solid var(--gold-line); border-radius:999px; padding:7px 14px; white-space:nowrap;
  font-variant-numeric:tabular-nums}

.consent{display:flex; gap:11px; align-items:flex-start; padding:13px 14px; margin-top:16px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2)}
.consent input{width:17px; height:17px; margin:1px 0 0; accent-color:var(--forest); flex:none}
.consent .txt{font-size:13px; color:var(--ink-2); line-height:1.45}
.consent.bad{border-color:var(--crit); background:var(--crit-soft)}

.signup-note{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:0 34px 4px;
  padding:14px 16px; border-radius:9px; background:var(--info-soft); border:1px solid var(--info)}
@media (max-width:600px){ .signup-note{margin:0 20px 4px} }
.signup-note .txt{flex:1; min-width:220px; font-size:13px; color:var(--ink); line-height:1.5}
.sending-as{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 15px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2); margin-bottom:22px}
.sending-as .avatar{width:38px; height:38px; margin:0; font-size:15px; flex:none}
.sending-as .nm{font-weight:600; font-size:14px}
.sending-as .rl{font-size:12px; color:var(--ink-3)}
.sending-as .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.actions{display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap}
.btn{background:var(--btn-bg); color:var(--btn-fg); border:0; border-radius:8px; padding:11px 26px;
  font-size:14.5px; font-weight:600; transition:.15s; text-decoration:none; display:inline-block}
.btn:hover{background:var(--btn-bg-hover)}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--line-strong);
  padding:9px 16px; font-size:13px}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.sm{padding:6px 12px; font-size:12.5px; border-radius:6px}
.btn.wide{width:100%; text-align:center}
.btn.danger{background:transparent; color:var(--crit); border:1px solid var(--crit); padding:6px 12px; font-size:12.5px}
.btn.danger:hover{background:var(--crit-soft)}
.finetxt{font-size:11.5px; color:var(--ink-3); line-height:1.5; max-width:62ch}
.pagefoot{padding:16px 34px 22px; border-top:1px solid var(--line); background:var(--surface-2);
  border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:600px){ .pagefoot{padding:16px 20px} }

.thanks{padding:56px 34px; text-align:center}
.thanks .tick{width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--good-soft);
  color:var(--good); display:grid; place-items:center; font-size:26px}
.thanks h2{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:30px}
.thanks p{margin-top:11px; color:var(--ink-2); max-width:46ch; margin-inline:auto}
.thanks .recap{margin:22px auto 0; max-width:400px; text-align:left; background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:14px 16px; font-size:13.5px}
.thanks .recap .row{display:flex; justify-content:space-between; gap:12px; padding:4px 0}
.thanks .recap .row+.row{border-top:1px dotted var(--line)}

.pageoff{padding:56px 34px; text-align:center}
.pageoff .tick{width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--crit-soft);
  color:var(--crit); display:grid; place-items:center; font-size:24px}
.pageoff h2{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:28px}
.pageoff p{margin-top:11px; color:var(--ink-2); max-width:46ch; margin-inline:auto}

/* ---------- sign in ---------- */
.signin{max-width:400px; margin:22px auto 0}
.signin .card{padding:30px 28px}
.signin .brandline{display:flex; justify-content:center; margin-bottom:20px}
/* .mark paints itself --chrome-ink for the dark nav bar, which on the white
   sign-in card is #DFE8E1 on #FFFFFF — 1.25:1, effectively invisible. Off the
   nav it takes the button's own green instead, so the two always agree. */
.signin .brandline .mark{color:var(--btn-bg)}
.signin h1{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:26px; text-align:center}
.signin .sub{text-align:center; color:var(--ink-2); font-size:13.5px; margin-top:6px; margin-bottom:22px}
.signin .field{margin-bottom:12px}

/* ---------- badges / chips ---------- */
.badge{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; border-radius:999px; padding:3px 8px; white-space:nowrap}
.badge.owner{background:var(--forest); color:var(--avatar-fg)}
.badge.manager{background:var(--info-soft); color:var(--info); border:1px solid var(--info)}
.badge.agent{background:var(--surface-3); color:var(--ink-2)}
.badge.partner{background:var(--gold-soft); color:var(--gold-ink); border:1px solid var(--gold-line)}
.badge.off{background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit)}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  border-radius:999px; padding:4px 10px; white-space:nowrap}
.chip.none{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
.chip.owed{background:var(--gold-soft); color:var(--gold-ink); border:1px solid var(--gold-line)}
.chip.sent{background:var(--good-soft); color:var(--good); border:1px solid transparent}
.chip.stale{background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit)}
.chip.lowres{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line,var(--warn));
  font-size:10.5px; padding:2px 8px; cursor:help}

/* ---------- dashboard ---------- */
.dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.dash-head h1{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:31px; margin-top:6px}
.scopebar{display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:10px 14px; margin-bottom:18px; font-size:13px; color:var(--ink-2); flex-wrap:wrap}
.scopebar .k{font-weight:600; color:var(--ink)}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px}
@media (max-width:800px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px}
.kpi .lab{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.kpi .val{font-family:"Newsreader",Georgia,serif; font-size:34px; font-weight:600; line-height:1.05;
  margin-top:7px; font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px; color:var(--ink-2); margin-top:3px}
.kpi.accent{background:var(--gold-soft); border-color:var(--gold-line)}
.kpi.accent .val, .kpi.accent .lab{color:var(--gold-ink)}
.kpi.alert{background:var(--crit-soft); border-color:var(--crit)}
.kpi.alert .val, .kpi.alert .lab{color:var(--crit)}

.toolbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:13px}
.toolbar input[type="search"], .toolbar select{font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:8px 11px}
.toolbar input[type="search"]{min-width:262px}
.toolbar .spacer{margin-left:auto}
.toolbar form{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:0}

/* custom date range — only on screen when the period is set to Custom */
.daterange{display:inline-flex; gap:8px; align-items:center}
.daterange[hidden]{display:none}
.daterange input[type="date"]{font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px}
.daterange input[type="date"]:focus{outline:0; border-color:var(--forest);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent)}
.daterange .to{font-size:12.5px; color:var(--ink-3)}
/* Dark mode leaves the native picker glyph almost black on a dark field. */
:root[data-theme="dark"] .daterange input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.65)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .daterange input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.65)}
}

.rangenote{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin:-4px 0 13px;
  padding:9px 13px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line);
  font-size:13px; color:var(--ink-2)}
.rangenote b{color:var(--ink); font-weight:600}
.rangenote .rn2{font-size:11.5px; color:var(--ink-3)}
.rangenote .rwarn{color:var(--warn); font-weight:600}

.tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:1080px}
thead th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap}
tbody td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13.5px}
tbody tr:last-child td{border-bottom:0}
td.stripe{border-left:3px solid var(--line-strong); padding-left:12px}
td.stripe.s-quoted{border-left-color:var(--warn)}
td.stripe.s-sold{border-left-color:var(--good)}
td.stripe.s-lost{border-left-color:var(--crit)}
td.stripe.s-attempting-contact{border-left-color:var(--info)}
/* Deliberately muted, not red: "Not interested" is a quiet close, and it must not
   read like "Lost" at a glance — the two decide whether a reward is owed. */
td.stripe.s-not-interested{border-left-color:var(--line-strong)}
.who{font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.meta{font-size:12px; color:var(--ink-3); margin-top:2px; white-space:nowrap}
.meta .mono{font-size:11.5px}
.by{font-weight:500; white-space:nowrap}
.kind{font-size:11px; color:var(--ink-3); display:block; margin-top:1px; white-space:nowrap}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-2); font-size:12.5px}
select.status{font:inherit; font-size:12.5px; font-weight:600; border-radius:999px; padding:5px 10px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
select.status.s-quoted{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}
select.status.s-sold{background:var(--good-soft); color:var(--good); border-color:var(--good)}
select.status.s-lost{background:var(--crit-soft); color:var(--crit); border-color:var(--crit)}
select.status.s-attempting-contact{background:var(--info-soft); color:var(--info); border-color:var(--info)}
select.status.s-not-interested{background:var(--surface-3); color:var(--ink-3); border-color:var(--line-strong)}
select.assign{font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:7px; padding:5px 9px; max-width:160px}
.rewardcell{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rewardcell form{margin:0}
/* Chip and button stay on one line however tight the column gets; only the
   explanatory note below is allowed to wrap. */
.rw-main{display:flex; align-items:center; gap:8px; white-space:nowrap}
/* "earned at quote" — shown when a reward is owed on a referral that has since
   moved past Quoted or Sold, so the row explains itself rather than looking wrong. */
.rewardcell .kind{flex-basis:100%; font-size:11px; color:var(--ink-3); margin-top:1px}
.empty{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:14px}

/* ---------- panels ---------- */
.split{display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:780px){ .split{grid-template-columns:1fr} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px}
.panel h2{font-size:16px; font-weight:600}
.panel .psub{font-size:13px; color:var(--ink-2); margin-top:4px; margin-bottom:18px; max-width:62ch}
.panel + .panel{margin-top:16px}
.photoblock{text-align:center}
.photoblock .avatar{width:120px; height:120px; font-size:42px; margin-bottom:14px}
.locked{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-3); font-weight:600}
.rowgap{display:flex; flex-direction:column; gap:14px}
.settingrow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.settingrow:last-of-type{border-bottom:0}
.settingrow .lab{font-size:14px; font-weight:600}
.settingrow .desc{font-size:12.5px; color:var(--ink-2); margin-top:2px; max-width:52ch}
.settingrow select, .settingrow input[type="number"]{font:inherit; font-size:13.5px; background:var(--surface);
  color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; padding:8px 11px}
.switchbox{display:flex; align-items:center; gap:9px; font-size:13.5px}
.switchbox input{width:17px; height:17px; accent-color:var(--forest)}
.teamrow{display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.teamrow:last-of-type{border-bottom:0}
.teamrow.off .nm, .teamrow.off .rl{opacity:.55}
.teamrow.off .avatar{opacity:.45}
.teamrow .avatar{width:38px; height:38px; margin:0; font-size:15px; flex:none}
.teamrow .nm{font-weight:600; font-size:14px}
.teamrow .rl{font-size:12px; color:var(--ink-3)}
.teamrow .right{margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.teamrow .right form{display:flex; gap:8px; align-items:center; margin:0}
.teamrow select{font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:7px; padding:6px 10px}

.linklist{display:grid; gap:11px}
.linkrow{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; display:flex; align-items:center; gap:15px; flex-wrap:wrap}
.linkrow.off .who2, .linkrow.off .role2, .linkrow.off .url{opacity:.55}
.linkrow .avatar{width:42px; height:42px; margin:0; font-size:16px; flex:none}
.linkrow .who2{font-weight:600; font-size:14.5px}
.linkrow .role2{font-size:12px; color:var(--ink-3)}
.linkrow .url{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:6px 11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.linkrow .grow{flex:1; min-width:190px}
.linkrow .right{display:flex; gap:7px; align-items:center; margin-left:auto}

.sechead{margin:34px 0 4px; font-family:"Newsreader",Georgia,serif; font-size:24px; font-weight:500}
.sectxt{color:var(--ink-2); font-size:14px; max-width:66ch}
/* one-time invite link, shown after it is generated */
.invitelink{background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:16px}
.invitelink h3{font-size:15px; font-weight:600; color:var(--gold-ink)}
.invitelink p{font-size:13px; color:var(--ink-2); margin-top:5px; max-width:64ch}
.invitelink .linkrow2{display:flex; gap:9px; align-items:center; margin-top:13px; flex-wrap:wrap}
.invitelink input{flex:1; min-width:260px; font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:8px; padding:10px 12px}
.copied{background:var(--good) !important; color:#fff !important; border-color:var(--good) !important}

.movelist{background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  padding:12px 14px; margin-bottom:16px; font-size:13px}
.movelist .row{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.movelist .row+.row{border-top:1px dotted var(--line)}

/* ---- consent record ---- */
.reclink{color:inherit; text-decoration:none; border-bottom:1px solid var(--line-strong)}
.reclink:hover{color:var(--forest); border-bottom-color:var(--forest)}

.record .norec{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.recrows{border-top:1px solid var(--line)}
.recrow{display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; padding:11px 0;
  border-bottom:1px solid var(--line); align-items:baseline}
.recrow .rk{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.recrow .rv{font-size:13.5px; word-break:break-word}
.recrow .rv .mono{font-size:12.5px}
.recrow .rn{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px}
@media (max-width:560px){ .recrow{grid-template-columns:1fr; gap:3px} }

.consentquote{margin-top:20px; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--forest); border-radius:9px; padding:15px 17px}
.consentquote .cq-lab{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.consentquote blockquote{font-family:"Newsreader",Georgia,serif; font-size:16.5px; line-height:1.55;
  color:var(--ink)}

.tl{padding:10px 0 10px 16px; border-left:2px solid var(--line); position:relative}
.tl::before{content:""; position:absolute; left:-5px; top:16px; width:8px; height:8px;
  border-radius:50%; background:var(--line-strong)}
.tl:last-child{border-left-color:transparent}
.tlw{font-size:13.5px; font-weight:600}
.tlw .mono{font-weight:500; font-size:12.5px; color:var(--ink-2)}
.tlm{font-size:11.5px; color:var(--ink-3); margin-top:2px}

/* The record is meant to be printed and handed over, so print it as a document:
   no app chrome, no dark theme, and the ink dark enough to photocopy. */
.onlyprint{display:none}
@media print{
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]){
    --ground:#fff; --surface:#fff; --surface-2:#fff; --line:#bbb; --line-strong:#888;
    --ink:#000; --ink-2:#333; --ink-3:#555; --forest:#000; --good:#000;
    --shadow:none; --shadow-lift:none;
  }
  body{background:#fff}
  .nav, .norec, .flash, .themetoggle{display:none !important}
  .onlyprint{display:inline}
  .panel{border:1px solid #bbb; box-shadow:none; break-inside:avoid; page-break-inside:avoid}
  .chip{border:1px solid #888 !important; background:#fff !important; color:#000 !important}
  .narrow{max-width:none}
  a{color:#000; text-decoration:none}
  /* On screen the prose is held to a comfortable measure; on paper the panels
     are full width, so matching them reads better than a ragged column. */
  .sectxt, .panel .psub, .finetxt{max-width:none}
  @page{margin:16mm}
}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }