/* The agent dashboard's Agent Score tab, on top of dashboard.css (the shell: tabs, banner, header chips, phone page).
   Settled on the Agent Score design board (design 1, the weigh-in; rounds 1-4, 2026-10-23). */

/* the score chip is lit on its own tab */
.scorechip.on{background:#fff6c8;box-shadow:0 -3px 0 0 #8a5a00,0 3px 0 0 #8a5a00,-3px 0 0 0 #8a5a00,3px 0 0 0 #8a5a00,6px 8px 0 0 rgba(8,60,54,.16)}
.ph-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.panel{min-width:0}

/* ---------- buttons ---------- */
.btn1,.btn2,.lnk2{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:700 13px/1 var(--tiny);text-transform:uppercase}
.btn1{padding:10px 14px;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);box-shadow:0 0 0 3px var(--plum),0 5px 0 3px var(--plum)}
.btn1:hover{filter:brightness(1.08)}
.btn1:disabled{cursor:default;filter:grayscale(1) opacity(.55)}
.btn2{padding:9px 12px;background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark),0 4px 0 3px var(--teal-dark)}
.btn2:hover{background:#fff6c8}
.btn2.sm{padding:7px 9px;font-size:12px}
.lnk2{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.x{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;font:400 13px/1 var(--ps);background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark)}
:is(.btn1,.btn2,.lnk2,.x,.term,.tb,.fh):focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.main button *{pointer-events:none}

/* words underlined in place (click for the definition), lawyer tags, placeholders */
.term{all:unset;cursor:pointer;font-weight:700;color:var(--teal);text-decoration:underline dotted 2px;text-underline-offset:3px}
.law{display:inline-block;margin-left:4px;padding:4px 6px 3px;font:400 8px/1.25 var(--ps);text-transform:uppercase;color:#fff;background:#4a2a8f;transform:rotate(-3deg);box-shadow:2px 2px 0 #241452;vertical-align:1px;white-space:nowrap}
.phd{display:inline;padding:2px 6px;background:#fff1a8;border:1px dashed #b98a10;color:#4a3500;font:700 13px/1.6 var(--pxf);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tdef{position:absolute;z-index:60;padding:12px 14px;background:#222;color:#fff;font:600 15px/1.5 var(--pxf);box-shadow:0 0 0 3px #fff,0 0 0 6px #222}
.tdef b{display:block;margin-bottom:4px;font:700 13px/1.2 var(--tiny);text-transform:uppercase;letter-spacing:.05em;color:var(--coin)}
.tdef[hidden]{display:none}

/* the state note above the page */
.sb{display:flex;align-items:center;gap:16px;margin:0 0 22px;padding:12px 18px;background:var(--paper)}
.sb b{display:block;font:700 20px/1.2 var(--pxf);color:var(--teal-dark)}
.sb span{font:600 15px/1.4 var(--pxf)}
.sb canvas{flex:none;width:36px;height:36px}
.sb.fresh canvas{width:72px;height:58px}
.sb.warn{background:#fff1dc;box-shadow:0 -3px 0 0 #9a4a10,0 3px 0 0 #9a4a10,-3px 0 0 0 #9a4a10,3px 0 0 0 #9a4a10,6px 8px 0 0 rgba(8,60,54,.16)}
.sb.warn b{color:#9a4a10}
.sb.stop{background:#ffe1e0;box-shadow:0 -3px 0 0 #8f1d16,0 3px 0 0 #8f1d16,-3px 0 0 0 #8f1d16,3px 0 0 0 #8f1d16,6px 8px 0 0 rgba(8,60,54,.16)}
.sb.stop b{color:#8f1d16}
.sb.fresh{background:#effaf1}
.sb .coins.big{margin-left:auto}
.coins.big i{width:26px;height:26px}

/* ---------- the weigh-in: the dial and the ranges side by side ---------- */
.d1top{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:stretch;margin:0 0 24px}
.scale .mwrap{padding:4px 0 0}
.mwrap{display:flex;justify-content:center;min-width:0}
.meter{position:relative;flex:none}
.meter canvas{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
.mtip{position:absolute;z-index:3;padding:8px 11px 7px;white-space:nowrap;background:#222;color:#fff;font:700 15px/1.25 var(--pxf);box-shadow:0 0 0 3px #fff,0 0 0 6px #222}
.mtip b{font:400 15px/1 var(--ps);color:var(--coin);margin-right:6px}
.mtip small{display:block;margin-top:4px;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:#cfd8d4}
.mtip.up{transform:translate(calc(-1 * var(--ax,50%)),-100%)}
.mtip.up::after{content:'';position:absolute;left:var(--ax,50%);bottom:-10px;margin-left:-4px;width:8px;height:8px;background:#222;box-shadow:0 3px 0 #fff}
.mtip.readout{transform:translateX(-50%);text-align:center;background:#1b2b28;box-shadow:0 0 0 3px #5c1414,0 0 0 6px #c8443a,0 0 0 9px #5c1414}
.mtip.readout b{display:inline}
.mtip.readout b.only{display:block;margin:0;text-align:center}
.mtip .wn{color:#ff6a5f}
.dl{position:absolute;transform:translate(-50%,-50%);padding:3px 4px 2px;font:400 11px/1 var(--ps);color:var(--teal-dark);background:#fff;box-shadow:0 0 0 2px var(--teal-dark)}
.dnum{position:absolute;transform:translate(-50%,-50%);text-align:center}
.dnum b{display:block;font:400 34px/1 var(--ps);color:var(--teal-dark);text-shadow:3px 3px 0 #f1e3c6}
.dnum small{display:block;margin-top:6px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.plate{position:absolute;transform:translate(-50%,0);padding:3px 6px 2px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:#fff6c8;background:#6b4226;box-shadow:0 0 0 2px #3d240f}
/* pointing at the dial: the distance to the next range, over the needle */
.meter.dial{outline:none}
.mtip.dhov{display:none;z-index:4;pointer-events:none}
.meter.dial:hover .dhov,.meter.dial:focus-visible .dhov{display:block}
.meter.dial:focus-visible{outline:3px dashed var(--pink);outline-offset:6px}

/* what each range does */
.rngh,.rng li{display:grid;grid-template-columns:18px 84px minmax(0,1fr) 64px;align-items:center;gap:10px}
.rngh{align-items:end;padding:0 10px 6px;font:400 8px/1.5 var(--ps);text-transform:uppercase;color:var(--muted)}
.rngh span:first-child{grid-column:1/3}
.rngh span:last-child{text-align:right}
.rng{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rng li{position:relative;padding:7px 10px;background:#fff;box-shadow:0 0 0 2px #e6dcc4}
.rng em{font:400 13px/1 var(--ps);font-style:normal;color:#c9347d;text-align:right;white-space:nowrap}
.rng em.no{font:400 8px/1.38 var(--ps);text-transform:uppercase;color:#8f1d16}
.rng .you{display:inline-flex;align-items:center;gap:4px;margin-left:8px;vertical-align:-3px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:#c9347d}
.rng .you canvas{width:26px;height:21px}
.rng li i{width:18px;height:18px}
.rng .r{font:400 12px/1 var(--ps);color:var(--teal-dark);white-space:nowrap}
.rng b{font:700 15px/1.25 var(--pxf);color:var(--text)}
.rng li.on{background:#fff6c8;box-shadow:0 0 0 3px var(--teal-dark),4px 5px 0 3px rgba(8,60,54,.16)}
.tip .bub{min-width:0}

/* ---------- the sections under the dial: each bar opens its section ---------- */
.folds{display:grid;gap:18px}
.fold{padding:0}
.fh{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px}
.fh:hover{background:#fff6c8}
.fh:focus-visible{outline:3px dashed var(--pink);outline-offset:-6px}
.fh canvas{flex:none;width:28px;height:28px}
.fhd{margin:0}
.ft{font:700 22px/1.1 var(--pxf);color:var(--teal-dark);text-align:left}
.fs{margin-left:auto;font:700 12px/1.2 var(--tiny);text-transform:uppercase;color:var(--teal)}
.chev{flex:none;width:30px;height:30px;margin-left:auto;background:#fff;box-shadow:0 0 0 3px var(--teal-dark);position:relative}
.fs+.chev{margin-left:0}
.chev::before{content:'';position:absolute;left:9px;top:10px;border:6px solid transparent;border-top:8px solid var(--teal-dark);border-bottom:0}
.fold.open .chev::before{top:8px;border-top:0;border-bottom:8px solid var(--teal-dark)}
.fold.open .fh{box-shadow:inset 0 -3px 0 #e6dcc4}
.fb{padding:16px 18px 18px}
.fb p{margin:0}

/* how fast new leads reach you: the sum, then the example lead */
.lp{margin:0 0 14px !important;font:600 16px/1.45 var(--pxf)}
.lp.out{color:#8f1d16}
.eq{display:flex;align-items:stretch;gap:10px;margin:0 0 10px}
.eqb{flex:1;display:grid;justify-items:center;align-content:start;gap:4px;padding:10px 8px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark);text-align:center;min-width:0}
.eqb canvas{height:36px;width:auto}
.eqb small{font:400 8px/1.65 var(--ps);text-transform:uppercase;color:var(--muted)}
.eqb b{font:700 18px/1.1 var(--pxf);color:var(--teal-dark)}
.eqb .v{font:400 15px/1 var(--ps);color:#c9347d}
.eqb.tot{background:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark),0 6px 0 3px #052a26;align-content:center}
.eqb.tot small{color:#cfe9e4}
.eqb.tot small .term{color:var(--coin)}
.eqb small .term{font:inherit;font-weight:700}
.eqb.tot .v{font-size:26px;color:var(--coin);margin-top:6px}
.op{align-self:center;font:400 20px/1 var(--ps);color:var(--teal-dark)}
.lanes{margin-top:14px;padding:12px 14px 12px;background:#e9f6ef;box-shadow:0 0 0 2px #7fd08c}
.lh{margin:0 0 10px !important;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:#127a34}
.lanes ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lanes li{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.who b{font:600 14px/1.2 var(--pxf);color:var(--teal-dark);white-space:nowrap}
.lanes li.me .who b{font:700 13px/1 var(--tiny);text-transform:uppercase;color:#c9347d}
.lane{position:relative;height:30px;background:repeating-linear-gradient(90deg,#d3eedb 0 1px,transparent 1px calc(100% / var(--ticks,30)));box-shadow:inset 0 0 0 2px #b8e3c0;background-color:#fff}
.lane i{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;gap:8px;padding:0 8px;background:#a6e58a;box-shadow:0 0 0 2px #2f6b1e;white-space:nowrap}
.lane i b{font:400 11px/1 var(--ps);color:var(--teal-dark)}
.lane i small{font:400 8px/1.25 var(--ps);text-transform:uppercase;color:var(--teal-dark)}
.lanes li.me .lane i{background:var(--coin);box-shadow:0 0 0 3px var(--teal-dark)}
.axis{position:relative;height:16px;margin:6px 0 0 162px}
.axis span{position:absolute;top:0;transform:translateX(-50%);font:400 10px/1 var(--ps);color:#127a34;white-space:nowrap}
.axis span:first-child{transform:none}
.axis span:last-child{transform:translateX(-100%)}
.lcap{margin:8px 0 0 !important;font:600 15px/1.4 var(--pxf);color:#1f4a43}

/* how your score is built */
.bl{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:9px}
.bl li{font:600 15px/1.4 var(--pxf);padding-left:16px;position:relative}
.bl li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--coin);box-shadow:0 0 0 2px #8a5a00}
.bl b{color:var(--teal-dark)}
.moves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.mv{padding:9px 10px;font:600 14px/1.35 var(--pxf);background:#fff}
.mv b{display:block;margin-bottom:3px;font:700 12px/1.2 var(--tiny);text-transform:uppercase}
.mv.up{box-shadow:0 0 0 3px #127a34}.mv.up b{color:#127a34}
.mv.mid{box-shadow:0 0 0 3px #b9ab88}.mv.mid b{color:#6b5f3a}
.mv.dn{box-shadow:0 0 0 3px #b3261e}.mv.dn b{color:#b3261e}
.mv.ng{box-shadow:0 0 0 3px #cdbf9e;background:#f6f1e3}.mv.ng b{color:var(--muted)}

/* your graded leads: the row of blocks, then the list */
.trk{margin:0 0 16px;padding:12px 14px 12px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.trh{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.trh b{margin-right:auto;font:700 13px/1 var(--tiny);color:var(--teal-dark)}
.trh .ar{width:40px;height:2px;background:var(--muted);position:relative}
.trh .ar::after{content:'';position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:6px solid var(--muted);border-right:0}
.tbs{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px}
.tb{all:unset;box-sizing:border-box;display:block;height:34px;cursor:pointer}
.tb.up{background:#43d35b;box-shadow:inset -3px -3px 0 #2a9a42,0 0 0 2px #127a34}
.tb.mid{background:#e6dcc4;box-shadow:inset -3px -3px 0 #cdbf9e,0 0 0 2px #9a8c66}
.tb.prac{background:#fff;box-shadow:inset 0 0 0 3px #2fbf55,0 0 0 2px var(--teal-dark)}
.tb.dn{background:#ff9a3a;box-shadow:inset -3px -3px 0 #d97416,0 0 0 2px #9a4a10}
.tb.dn2{background:#e8403a;box-shadow:inset -3px -3px 0 #b3261e,0 0 0 2px #6b1610}
.tb.empty{background:repeating-linear-gradient(45deg,#f3eedf 0 4px,#e9e1c9 4px 8px);box-shadow:0 0 0 2px #d9cfb2;cursor:default}
.tb:hover{transform:translateY(-2px)}
.tb.empty:hover{transform:none}
.tb.on{outline:3px solid var(--teal-dark);outline-offset:3px}
.leg{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg .tb{width:14px;height:14px;cursor:default}
.leg .tb:hover{transform:none}
.thint{margin:10px 0 0 !important;font:600 13px/1.3 var(--pxf);color:var(--muted)}
.tpop{position:relative;margin:12px 0 0;padding:10px 46px 10px 10px;background:#fff6c8;box-shadow:0 0 0 3px #8a5a00}
.tpop .x{position:absolute;right:8px;top:8px}
.glist{display:grid}
.gh,.gr{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.5fr) 130px 104px;gap:6px 12px;align-items:center}
.gh{padding:0 8px 6px;font:400 8px/1.25 var(--ps);text-transform:uppercase;color:var(--muted);border-bottom:3px solid var(--teal-dark)}
.gr{padding:9px 8px;border-bottom:2px dashed #e6dcc4}
.gr.pop{padding:0;border:0}
.gr.sel:not(.pop){background:#fff6c8}
.gd{font:400 11px/1.2 var(--ps);color:var(--teal-dark);white-space:nowrap}
.gn b{display:block;font:700 16px/1.2 var(--pxf);color:var(--teal-dark)}
.gn small,.ga small{display:block;font:400 8px/1.62 var(--ps);text-transform:uppercase;color:var(--muted)}
.ga{font:600 14px/1.3 var(--pxf)}
.ge{display:flex;align-items:baseline;gap:6px}
.ge b{font:400 14px/1 var(--ps)}
.ge small{font:400 8px/1.5 var(--ps);text-transform:uppercase}
.ge.up b,.ge.up small{color:#127a34}
.ge.mid b,.ge.mid small{color:#6b5f3a}
.ge.dn b,.ge.dn small{color:#b3261e}
.ge.dn2 b,.ge.dn2 small{color:#8f1d16}
.ge.ng small{color:var(--muted)}
.gr .btn2,.gr .sentc{justify-self:end}
.sentc{padding:5px 7px 4px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:#1f4fa8;background:#e3edff;box-shadow:0 0 0 2px #6fb6ff}
.dsp{grid-column:1/-1;display:grid;gap:10px;margin:6px 0 4px;padding:12px;background:#fff;box-shadow:0 0 0 3px var(--teal)}
.dsp label span{display:block;margin:0 0 6px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--teal-dark)}
.dsp textarea{display:block;width:100%;box-sizing:border-box;padding:8px 10px;font:600 15px/1.4 var(--pxf);color:var(--text);background:#fbf6ea;border:0;box-shadow:0 0 0 2px var(--teal-dark);resize:none}
.dsp textarea:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.att{display:flex;align-items:center;gap:8px;font:600 13px/1.35 var(--pxf);color:var(--muted)}
.att canvas{flex:none;width:24px;height:24px}
.dbt{display:flex;align-items:center;gap:18px}
.dsp.sent{font:600 14px/1.45 var(--pxf);background:#e3edff;box-shadow:0 0 0 3px #6fb6ff}
.dsp.sent b{color:#1f4fa8}
.more{margin-top:12px}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .d1top{grid-template-columns:minmax(0,1fr)}
  .d1top .side{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
}
@media (max-width:900px){
  .moves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh{display:none}
  .gr{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"d n a" "e e e" "t t t"}
  .gr>.gd{grid-area:d}.gr>.gn{grid-area:n}.gr>.ge{grid-area:e}.gr>.ga{grid-area:t}
  .gr>.btn2,.gr>.sentc,.gr>span:empty{grid-area:a}
  .eq{flex-wrap:wrap}
  .eqb{flex:1 1 120px}
  .lanes li{grid-template-columns:110px minmax(0,1fr)}
  .axis{margin-left:122px}
  .fs{display:none}
}