/* ======================================================================
   FADED FINANCIALS — PLOTTED UI
   Structural visual layer based on the approved desktop/mobile reference.
   This file deliberately contains presentation only. It does not own auth,
   Supabase, dialer state, permissions, Netlify calls, or page routing.
   ====================================================================== */
:root{
  --plot-bg:#05080d;
  --plot-rail:#070b12;
  --plot-panel:#0c111a;
  --plot-panel-2:#101722;
  --plot-panel-3:#151d29;
  --plot-line:#1d2733;
  --plot-line-soft:#151d28;
  --plot-text:#f1f3f6;
  --plot-muted:#8995a5;
  --plot-faint:#617084;
  --plot-gold:#eeb43f;
  --plot-gold-soft:rgba(238,180,63,.10);
  --plot-green:#58cf78;
  --plot-red:#ff6b62;
  --plot-radius:13px;
  --plot-radius-sm:9px;
  --plot-shadow:0 18px 50px rgba(0,0,0,.22);
  --plot-shell:1480px;
  --plot-rail-w:176px;
}

/* Reference palette is the source of truth for the default dark theme. */
:root:not([data-theme]) body:not(.pb-light){
  --bg:var(--plot-bg);
  --surface:var(--plot-panel);
  --surface-2:var(--plot-panel-2);
  --border:var(--plot-line);
  --text:var(--plot-text);
  --text-muted:var(--plot-muted);
  --gold:var(--plot-gold);
  --teal:var(--plot-green);
  --coral:var(--plot-red);
  --radius:var(--plot-radius);
}

html,body{min-height:100%;background:var(--bg);}
body{letter-spacing:-.003em;}

/* ---------- APP SHELL: narrow dark rail + open work canvas ---------- */
@media (min-width:1100px){
  .pb-root{
    width:min(100%,var(--plot-shell));
    max-width:var(--plot-shell);
    grid-template-columns:var(--plot-rail-w) minmax(0,1fr)!important;
    margin:0 auto;
    min-height:100vh;
    background:transparent;
    border-inline:1px solid rgba(255,255,255,.025);
  }
  .pb-root>.pb-nav-rail{
    width:var(--plot-rail-w)!important;
    background:linear-gradient(180deg,var(--plot-rail) 0%,color-mix(in srgb,var(--plot-rail) 92%,black) 100%);
    border-right:1px solid var(--plot-line-soft);
  }
  .pb-root>.pb-nav-rail>.pb-rail-inner{padding:20px 12px 16px!important;}
  .pb-main{padding:26px 30px 42px!important;max-width:none!important;}
  .pb-header{padding-inline:30px!important;}
}

.pb-header{
  min-height:68px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-bottom:1px solid var(--plot-line-soft);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.pb-brand-word,.pb-brand-name{letter-spacing:.16em!important;}
.pb-nav-label{font-size:8.5px!important;letter-spacing:.19em!important;color:var(--plot-faint)!important;}
.pb-nav-rail .pb-nav{gap:4px!important;}
.pb-nav-rail .pb-nav button{
  min-height:38px!important;
  padding:9px 10px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  font-size:12px!important;
  color:var(--plot-muted)!important;
  font-weight:560!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.pb-nav-rail .pb-nav button:hover{background:rgba(255,255,255,.025)!important;color:var(--text)!important;}
.pb-nav-rail .pb-nav button.active{
  color:var(--text)!important;
  background:linear-gradient(90deg,rgba(238,180,63,.14),rgba(238,180,63,.055))!important;
  border-color:rgba(238,180,63,.34)!important;
  box-shadow:inset 0 0 20px rgba(238,180,63,.035)!important;
}
.pb-nav-rail .pb-nav button.active .glyph{color:var(--gold)!important;}

.pb-page{max-width:1240px!important;margin:0 auto!important;}
.pb-v2-pagehead{margin:0 0 24px!important;min-height:54px;align-items:center!important;}
.pb-v2-title{font-size:24px!important;line-height:1.08!important;letter-spacing:-.032em!important;font-weight:720!important;}
.pb-v2-sub{margin-top:7px!important;font-size:12.5px!important;line-height:1.45!important;color:var(--plot-muted)!important;}
.pb-v2-pagehead .r{align-self:center;}

/* section labels imitate the reference's quiet group hierarchy */
.ff-section-label,.pb-v2-rule{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:24px 0 12px!important;
  color:var(--plot-faint)!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  border:0!important;
}
.ff-section-label::after,.pb-v2-rule::after{content:""!important;height:1px!important;flex:1;background:var(--plot-line-soft)!important;margin:0!important;}

/* ---------- UNIVERSAL CARD SYSTEM ---------- */
.pb-card,.pb-v13-panel,.pb-hero,
.pb-tier-card,.pb-cb-row,.pb-team-row,.pb-carrier,.pb-intake-row,
.pb-lb-summary-item,.pb-cal-grid{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,white) 0%,var(--surface) 100%)!important;
  border:1px solid var(--plot-line)!important;
  border-radius:var(--plot-radius)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.015),0 16px 38px rgba(0,0,0,.10)!important;
}
.pb-card,.pb-v13-panel{padding:17px!important;}
.pb-card>h3,.pb-v13-head h3,.pb-dial-title{font-size:13px!important;font-weight:720!important;letter-spacing:-.012em!important;}
.pb-v13-hint{font-size:11px!important;line-height:1.45!important;color:var(--plot-muted)!important;}
.pb-btn-sm,.pb-report-btn,.pb-carrier-btn{
  min-height:34px!important;
  border-radius:8px!important;
  padding:7px 10px!important;
  font-size:10.5px!important;
}
.pb-btn-sm.ghost,.pb-report-btn{background:transparent!important;border-color:var(--plot-line)!important;color:var(--plot-muted)!important;}
.pb-btn-sm.ghost:hover,.pb-report-btn:hover{background:var(--surface-2)!important;color:var(--text)!important;}

/* ---------- DASHBOARD: reference composition ---------- */
#page-dash .pb-v2-pagehead{margin-bottom:22px!important;}
#page-dash .pb-v2-title{font-size:22px!important;}
#page-dash .pb-v2-sub{font-size:12px!important;}
#page-dash .pb-v2-pagehead .pb-btn-sm{border-color:rgba(238,180,63,.75)!important;color:var(--gold)!important;}
#page-dash>.ff-section-label{margin-top:4px!important;}

#page-dash .pb-v2-cols{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(310px,.95fr)!important;
  gap:14px!important;
  align-items:start!important;
}
#page-dash .pb-v2-col{display:flex!important;flex-direction:column!important;gap:12px!important;min-width:0!important;}

#apStrip{
  grid-column:1/-1;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 14px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#apStrip .pb-v2-cell{
  position:relative!important;
  min-height:108px!important;
  padding:15px 16px 14px 16px!important;
  background:linear-gradient(180deg,var(--surface-2),var(--surface))!important;
  border:1px solid var(--plot-line)!important;
  border-radius:12px!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  grid-template-rows:auto 1fr auto!important;
  column-gap:9px!important;
  align-items:start!important;
  box-shadow:0 12px 30px rgba(0,0,0,.10)!important;
}
#apStrip .pb-kpi-ico{
  grid-row:1;grid-column:1;
  width:24px!important;height:24px!important;border-radius:7px!important;
  display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.035)!important;color:var(--plot-muted)!important;
}
#apStrip .pb-kpi-ico.lead{background:var(--plot-gold-soft)!important;color:var(--gold)!important;}
#apStrip .pb-kpi-ico svg{width:13px!important;height:13px!important;}
#apStrip .pb-v2-k{grid-row:1;grid-column:2;align-self:center;font-size:9px!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--plot-muted)!important;}
#apStrip .pb-v2-v{grid-row:2;grid-column:1/-1;align-self:end;font-family:inherit!important;font-size:25px!important;line-height:1!important;font-weight:720!important;letter-spacing:-.035em!important;color:var(--text)!important;margin-top:12px!important;}
#apStrip .pb-ap-meter{grid-row:3;grid-column:1/-1;height:4px!important;margin-top:13px!important;background:rgba(255,255,255,.07)!important;border-radius:999px!important;overflow:hidden!important;}
#apStrip .pb-ap-meter i{background:var(--gold)!important;}
#apStrip .pb-v2-cell-link{display:none!important;}

#callFirstCard{border-top-color:rgba(238,180,63,.48)!important;box-shadow:0 18px 44px rgba(0,0,0,.14)!important;}
#callFirstCard .pb-v13-hint{display:none!important;}
#callFirstList{margin-top:7px!important;}
#callFirstList .pb-v13-row{
  min-height:54px!important;
  padding:9px 4px!important;
  border:0!important;
  border-bottom:1px solid var(--plot-line-soft)!important;
  background:transparent!important;
  border-radius:0!important;
  grid-template-columns:28px minmax(0,1fr) auto!important;
  gap:9px!important;
}
#callFirstList .pb-v13-row:last-child{border-bottom:0!important;}
#callFirstList .pb-v13-rank{width:27px!important;height:27px!important;display:grid!important;place-items:center!important;border-radius:7px!important;background:var(--surface-2)!important;color:var(--text)!important;font-size:11px!important;}
#callFirstList .pb-v13-name{font-size:11.5px!important;font-weight:700!important;}
#callFirstList .pb-v13-sub{font-size:9.5px!important;color:var(--plot-muted)!important;margin-top:3px!important;}
#callFirstList .pb-v13-go{min-width:54px!important;min-height:29px!important;display:grid!important;place-items:center!important;border:1px solid rgba(238,180,63,.55)!important;border-radius:7px!important;color:var(--gold)!important;font-size:10px!important;padding:0 8px!important;}

#bizHealthCard,#dashHealthCard,#activityCard{padding:15px!important;}
#bizHealthCard{min-height:140px!important;}
#dashHealthCard{min-height:72px!important;}
#activityCard{min-height:138px!important;}
#activityCard>summary{min-height:24px!important;}
#activityCard .pb-v13-hint{display:none!important;}

.pb-v2-more{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:0!important;}
.pb-v2-more a{
  min-height:62px!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  padding:12px 14px!important;
  background:var(--surface)!important;
  border:1px solid var(--plot-line)!important;
  border-radius:11px!important;
  color:var(--text)!important;
  font-size:11.5px!important;font-weight:700!important;
}
.pb-v2-more a span{font-size:9.5px!important;font-weight:500!important;color:var(--plot-muted)!important;margin-top:4px!important;}

/* ---------- DIALER: three-column call workspace feel ---------- */
#page-dialer{max-width:1180px!important;}
#page-dialer #setupDetail{padding:14px 16px!important;margin-bottom:12px!important;}
#page-dialer #setupDetail h3{font-size:12px!important;margin-bottom:5px!important;}
#page-dialer .pb-dialtabs{
  display:inline-flex!important;
  padding:3px!important;
  margin:0 0 8px!important;
  border:1px solid var(--plot-line)!important;
  border-radius:10px!important;
  background:var(--surface-2)!important;
  gap:2px!important;
}
#page-dialer .pb-dialtab{min-height:34px!important;padding:7px 12px!important;border-radius:7px!important;border:0!important;background:transparent!important;color:var(--plot-muted)!important;font-size:10.5px!important;}
#page-dialer .pb-dialtab.active{background:var(--surface)!important;color:var(--text)!important;box-shadow:0 4px 12px rgba(0,0,0,.18)!important;}
#dialerpane-auto>.pb-dial-panel{padding:13px!important;margin-top:8px!important;}
#page-dialer .pb-dial-header{display:grid!important;grid-template-columns:minmax(250px,.82fr) minmax(0,1.55fr)!important;gap:12px!important;align-items:start!important;}
#page-dialer .pb-dial-header-main,#powerDialPanel{
  border:1px solid var(--plot-line-soft)!important;
  border-radius:11px!important;
  background:color-mix(in srgb,var(--surface-2) 62%,var(--surface))!important;
  padding:14px!important;
  min-width:0!important;
}
#page-dialer .pb-dial-title{font-size:15px!important;margin-top:2px!important;}
#page-dialer .pb-dial-eyebrow{font-size:8.5px!important;letter-spacing:.13em!important;color:var(--plot-muted)!important;}
#page-dialer .pb-scope-wrap{padding:12px 0!important;border-top:1px solid var(--plot-line-soft)!important;margin-top:12px!important;}
#page-dialer .pb-scope-label{font-size:8.5px!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--plot-muted)!important;}
#page-dialer .pb-dial-source{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;margin-top:7px!important;}
#page-dialer #dialCueBtn{grid-column:1/-1!important;background:transparent!important;border-color:var(--plot-line)!important;color:var(--plot-muted)!important;}
#page-dialer .pb-dial-controls{margin-top:0!important;}
#page-dialer .pb-lines-stepper input{min-height:40px!important;font-size:16px!important;border-radius:8px!important;}
#powerDialPanel{min-height:250px!important;}

/* ---------- LEADS: reference-style lead desk while preserving batch workflow ---------- */
#page-leads .pb-v2-pagehead{border:0!important;padding-bottom:0!important;}
#page-leads::before{content:"LEAD INVENTORY";display:block;margin:0 0 10px;color:var(--plot-faint);font-size:9px;font-weight:800;letter-spacing:.16em;}
#page-leads .pb-tier-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0!important;}
#page-leads .pb-tier-card{
  min-height:126px!important;
  padding:14px!important;
  text-align:left!important;
  cursor:pointer!important;
  position:relative!important;
}
#page-leads .pb-tier-card:hover{transform:translateY(-1px)!important;border-color:rgba(238,180,63,.36)!important;}
#page-leads .pb-tier-badge{position:absolute!important;top:12px!important;right:12px!important;width:22px!important;height:22px!important;font-size:9px!important;background:var(--surface-2)!important;}
#page-leads .pb-tier-name{font-size:11px!important;color:var(--plot-muted)!important;font-weight:650!important;}
#page-leads .pb-tier-count{font-family:inherit!important;font-size:27px!important;line-height:1!important;font-weight:740!important;letter-spacing:-.04em!important;margin:27px 0 7px!important;color:var(--text)!important;}
#page-leads .pb-tier-sub{font-size:9px!important;line-height:1.35!important;text-transform:none!important;letter-spacing:0!important;color:var(--plot-muted)!important;}
#page-leads #myBatchRequestsList{
  display:block!important;
  border:1px solid var(--plot-line)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}
#page-leads #myBatchRequestsList>*{border-radius:0!important;box-shadow:none!important;border-inline:0!important;border-top:0!important;border-bottom:1px solid var(--plot-line-soft)!important;margin:0!important;}
#page-leads #myBatchRequestsList>*:last-child{border-bottom:0!important;}

/* ---------- CALLBACKS: flat task table / queue ---------- */
#page-callbacks #cbList{display:block!important;border:1px solid var(--plot-line)!important;border-radius:12px!important;overflow:hidden!important;background:var(--surface)!important;}
#page-callbacks .pb-cb-row{min-height:58px!important;padding:10px 12px!important;border:0!important;border-bottom:1px solid var(--plot-line-soft)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
#page-callbacks .pb-cb-row:last-child{border-bottom:0!important;}
#page-callbacks .pb-cb-name{font-size:11.5px!important;}
#page-callbacks .pb-cb-sub,#page-callbacks .pb-cb-when,#page-callbacks .pb-cb-who{font-size:9.5px!important;}
#page-callbacks .pb-cb-scope{padding:2px!important;border-radius:9px!important;}

/* ---------- AGENCY PRODUCTION: chart-led analytical surface ---------- */
#page-analytics .pb-v2-cols{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(290px,.8fr)!important;gap:12px!important;align-items:start!important;}
#page-analytics .pb-v2-col{gap:12px!important;}
#page-analytics .pb-chart-wrap{height:220px!important;}
#page-analytics .pb-card{padding:16px!important;}
#page-analytics #apStripDetail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;background:transparent!important;border:0!important;padding:0!important;}
#page-analytics #apStripDetail .pb-v2-cell{min-height:108px!important;padding:12px!important;background:var(--surface-2)!important;border:1px solid var(--plot-line-soft)!important;border-radius:10px!important;}
#page-analytics #apStripDetail .pb-v2-v{font-family:inherit!important;font-size:20px!important;}

/* ---------- LEADERBOARD / TEAM / SETTINGS: same product, less legacy chrome ---------- */
#page-lb .pb-lb-toggle{border-radius:9px!important;padding:3px!important;background:var(--surface-2)!important;border-color:var(--plot-line)!important;}
#page-lb .pb-lb-toggle button{font-size:10px!important;min-height:32px!important;padding:6px 10px!important;}
#page-lb .pb-lb-toggle button.active{background:var(--surface)!important;box-shadow:0 3px 9px rgba(0,0,0,.16)!important;}
#page-lb .pb-lb-summary{gap:9px!important;}
#page-lb .pb-lb-summary-item{padding:12px!important;}
#page-team #teamList{border:1px solid var(--plot-line)!important;border-radius:12px!important;overflow:hidden!important;background:var(--surface)!important;}
#page-team .pb-team-row{border:0!important;border-bottom:1px solid var(--plot-line-soft)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
#page-team .pb-team-row:last-child{border-bottom:0!important;}
#page-settings .pb-settings-tabs{border-bottom-color:var(--plot-line)!important;}
#page-settings .pb-settings-tab-btn{font-size:10.5px!important;}
#page-settings .pb-theme-card{border-radius:10px!important;overflow:hidden!important;}

/* ---------- MODALS / DRAWER ---------- */
.pb-modal,.pb-v13-drawer,.pb-pal-box,.pb-profile-menu{
  background:var(--surface)!important;
  border:1px solid var(--plot-line)!important;
  border-radius:13px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.50)!important;
}
.pb-modal-backdrop,.pb-v13-scrim,.pb-pal{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}

/* ---------- PHONE: actual native composition, never desktop squeezed down ---------- */
@media (max-width:859px){
  :root{--plot-radius:11px;}
  .pb-root{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;}
  .pb-main{width:100%!important;max-width:none!important;min-width:0!important;padding:14px 14px calc(78px + env(safe-area-inset-bottom))!important;}
  .pb-page{width:100%!important;max-width:none!important;margin:0!important;}
  .pb-header{min-height:58px!important;padding:8px 14px!important;}
  .pb-v2-pagehead{min-height:0!important;margin-bottom:15px!important;align-items:flex-start!important;}
  .pb-v2-title{font-size:20px!important;}
  .pb-v2-sub{font-size:11px!important;line-height:1.4!important;margin-top:4px!important;}
  .pb-v2-pagehead .r{display:none!important;}

  .pb-card,.pb-v13-panel{padding:13px!important;border-radius:11px!important;}
  .pb-tabbar{
    left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;min-height:58px!important;
    padding:5px!important;
    background:rgba(8,12,18,.94)!important;
    border:1px solid var(--plot-line)!important;
    border-radius:16px!important;
    box-shadow:0 16px 40px rgba(0,0,0,.40)!important;
    backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
  }
  .pb-tabbar button{min-height:47px!important;border-radius:11px!important;font-size:9px!important;}
  .pb-tabbar button[aria-current="page"]{background:var(--plot-gold-soft)!important;color:var(--gold)!important;}

  #page-dash .pb-v2-pagehead{margin-bottom:12px!important;}
  #page-dash .pb-v2-title{font-size:18px!important;}
  #page-dash .pb-v2-sub{font-size:10.5px!important;}
  /* align-items:stretch is REQUIRED here. The desktop rule above sets
     align-items:start!important and is not media-gated, so it also applied on
     phones -- and in a column flex container `start` is the horizontal axis,
     so every card shrank to its own content width. Measured at 390 before
     this: Business Health 350px, System health 268px, Call these first 293px,
     Activity 111px, against a 366px page. Pre-existing (identical on 4d03c72,
     verified by rendering both), and fixed here because this pass is where it
     was found. */
  #page-dash .pb-v2-cols{display:flex!important;flex-direction:column!important;gap:9px!important;align-items:stretch!important;}
  #page-dash .pb-v2-col{display:contents!important;}
  #apStrip{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0 0 3px!important;
    order:1!important;
  }
  #apStrip .pb-v2-cell{min-height:82px!important;padding:9px!important;display:block!important;}
  #apStrip .pb-kpi-ico{display:none!important;}
  #apStrip .pb-v2-k{font-size:7.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  #apStrip .pb-v2-v{font-size:16px!important;margin-top:9px!important;}
  #apStrip .pb-ap-meter{height:3px!important;margin-top:10px!important;}

  #bizHealthCard{order:2!important;min-height:104px!important;}
  #dashHealthCard{order:3!important;min-height:64px!important;}
  #callFirstCard{order:4!important;}
  #activityCard{order:5!important;min-height:108px!important;}
  .pb-v2-more{order:6!important;display:none!important;}

  #callFirstCard .pb-v13-head .pb-btn-sm{font-size:0!important;width:42px!important;min-width:42px!important;}
  #callFirstCard .pb-v13-head .pb-btn-sm::after{content:"All";font-size:10px!important;}
  #callFirstList .pb-v13-row{min-height:50px!important;padding:8px 0!important;grid-template-columns:26px minmax(0,1fr) auto!important;}
  #callFirstList .pb-v13-rank{width:24px!important;height:24px!important;font-size:9px!important;}
  #callFirstList .pb-v13-name{font-size:10.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  #callFirstList .pb-v13-sub{font-size:8.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  #callFirstList .pb-v13-go{min-width:34px!important;width:34px!important;font-size:0!important;padding:0!important;}
  #callFirstList .pb-v13-go::after{content:"›";font-size:16px!important;}

  #page-dialer .pb-dial-header{display:block!important;}
  #page-dialer .pb-dial-header-main,#powerDialPanel{padding:12px!important;margin-bottom:9px!important;}
  #page-dialer .pb-dial-source{grid-template-columns:1fr 1fr!important;}
  #page-dialer #setupDetail{padding:12px!important;}

  #page-leads .pb-tier-grid{grid-template-columns:1fr 1fr!important;gap:7px!important;}
  #page-leads .pb-tier-card{min-height:112px!important;padding:12px!important;}
  #page-leads .pb-tier-count{font-size:23px!important;margin-top:25px!important;}
  #page-leads .pb-tier-sub{font-size:8.5px!important;}

  #page-analytics .pb-v2-cols{display:block!important;}
  #page-analytics .pb-v2-col{display:flex!important;flex-direction:column!important;gap:9px!important;margin-bottom:9px!important;}
  #page-analytics .pb-chart-wrap{height:180px!important;}
  #page-analytics #apStripDetail{grid-template-columns:1fr 1fr!important;}

  #page-callbacks .pb-cb-row{min-height:62px!important;padding:10px!important;}
  #page-team .pb-v2-pagehead .r{display:block!important;width:100%!important;margin-top:8px!important;}
  #page-team .pb-leads-tools{width:100%!important;}
  #page-team #teamFilter{max-width:none!important;width:100%!important;}
}

@media (max-width:390px){
  .pb-main{padding-inline:12px!important;}
  #apStrip{gap:5px!important;}
  #apStrip .pb-v2-cell{padding:8px!important;}
  #apStrip .pb-v2-v{font-size:15px!important;}
  #page-leads .pb-tier-card{min-height:105px!important;}
}

/* ======================================================================
   INTEGRATION FIX — PHONE TOUCH FLOOR
   ----------------------------------------------------------------------
   Added during integration, not part of the plotted layer above.

   The control sizes in this file are a DESKTOP density -- .pb-btn-sm and
   .pb-report-btn at 34px, .pb-dialtab at 34px, the leaderboard toggles at
   32px, settings chips at 40px -- and they carry !important, so they
   override the 44px mobile floor the app sets in its own stylesheet. The
   phone block above restores that floor for .pb-tabbar button and nothing
   else, which left 21 controls under 44px at 768/430/390: every dialer mode
   and source button, the leaderboard range toggles, the Team row actions,
   the Secure Intake pickers, and the settings tabs.

   This restores the floor on phones ONLY. Desktop density is untouched, so
   the plotted composition is unchanged at every width it was designed for.
   ====================================================================== */
/* ---- dialer: the idle right column, and the cue toggle ---------------- */
/* THE TWO-COLUMN DIALER LEFT A HOLE WHEN NOBODY WAS ON A CALL.
   #powerDialPanel is the second track, and the app already collapses it while
   it is empty:
       .pb-dial-header-panel:not(:has(> div:not(:empty))){display:none;}
   Under the old flex row that let the main panel take the full width. A grid
   with two declared tracks keeps the second one whether or not anything is in
   it, so an idle dialer showed a ~700px void beside a 380px panel.

   Same predicate, applied to the parent: one track while the panel is empty,
   two the moment a call populates it. :has() is already a dependency of the
   rule above, so this adds no new support requirement.

   Collapsing to a bare 1fr swaps one problem for another: the source pair is
   `1fr 1fr`, so across a full 1152px row "Agency pool" became a 560px slab.
   The plotted split gives the main panel .82fr of the row -- about 400px at
   1440 -- so the idle single column is capped near that instead of running
   the full width. */
#page-dialer .pb-dial-header:not(:has(> .pb-dial-header-panel > div:not(:empty))){
  grid-template-columns:minmax(0,560px)!important;
}

/* The plotted layer spans the cue toggle across the source grid with
   grid-column:1/-1, but the app's own rule still puts margin-left:auto on it
   (that is what floats it right of the two sources on a wide toolbar). Inside
   a grid that margin shrinks the spanned item and pins it to the right edge,
   so "Sound on" sat in the second column instead of under both. */
#page-dialer #dialCueBtn{margin-left:0!important;}

@media (max-width:859px){
  /* THE "ALL NUMBERS" CELL CAME BACK ON PHONES.
     The desktop block hides it with `#apStrip .pb-v2-cell-link{display:none
     !important}`, but the phone block's `#apStrip .pb-v2-cell{display:block
     !important}` matches the same element at equal specificity and sits later
     in the file, so it won -- the link reappeared as a fourth KPI card taking
     a full row under the three real ones. Re-asserted here, after it. */
  #apStrip .pb-v2-cell-link{display:none!important;}

  #page-dash .pb-btn-sm,
  .pb-page .pb-btn-sm,
  .pb-page .pb-report-btn,
  .pb-page .pb-carrier-btn,
  .pb-page button,
  .pb-page [role="button"],
  #page-dialer .pb-dialtab,
  #page-lb .pb-lb-toggle button,
  #page-settings .pb-settings-tab-btn,
  .pb-nav-drawer button,
  .pb-profile-menu button{
    min-height:44px!important;
  }
  /* Text controls take the floor and the 16px that stops iOS zooming on
     focus -- #teamFilter, #userSelect and #acgFilterAgent were 42px. */
  .pb-page input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .pb-page select,
  .pb-page textarea{
    min-height:44px!important;
    font-size:16px!important;
  }
  /* Two survivors needed ID-level specificity to reach: the plotted layer
     sets #page-dialer .pb-lines-stepper input at 40px (1,1,1) and
     faded-complete.css sets #page-team #teamFilter at 42px (1,1,0), and
     !important does not break a specificity tie -- the more specific
     selector still wins. */
  #page-dialer .pb-lines-stepper input,
  #page-dialer #dialCountInput{min-height:44px!important;font-size:16px!important;}
  #page-team #teamFilter,
  #page-commission #acgFilterAgent,
  #page-settings #userSelect{min-height:44px!important;font-size:16px!important;}

  /* Chips and glyphs are not finger targets and must keep their shape. */
  .pb-page .pb-status-chip,
  .pb-page .pb-notif-badge,
  .pb-page .pb-nav-badge,
  .pb-page .pb-tab-badge,
  .pb-page .pb-score,
  .pb-page .pb-health-live,
  .pb-page .pb-tier-badge,
  .pb-page .pb-v2-chev,
  .pb-page .bh-na{
    min-height:0!important;
  }
}

/* ---- the canvas behind the page ---------------------------------------
   The palette above is declared on `body` (`:root:not([data-theme])
   body:not(.pb-light)`), so <html> keeps the older root-level --bg. The
   layer then paints BOTH with `html,body{background:var(--bg)}`, which left
   html at #070910 against body's plotted #05080d -- a lighter band that
   shows when the page is overscrolled or rubber-banded.

   Scoped exactly like the palette rule it is correcting, so only the default
   dark theme is touched; light and the three named themes resolve --bg at
   :root and already paint correctly. */
:root:not([data-theme]):has(body:not(.pb-light)){
  background:var(--plot-bg)!important;
}

/* ======================================================================
   FUNCTIONALITY-PRESERVATION PASS (post-4d03c72)
   ----------------------------------------------------------------------
   Two controls came back. Neither changes the plotted design: the refresh
   is icon-only and sits inside the head row the plot already draws, and
   Report a problem is invisible on desktop-width because it stays exactly
   where it was.
   ====================================================================== */

/* Icon-only, square, same height as the ghost button beside it. */
#callFirstRefreshBtn{
  width:34px;min-width:34px;padding:0!important;
  display:inline-grid!important;place-items:center!important;
}
#callFirstRefreshBtn svg{display:block;}

@media (max-width:859px){
  /* The plotted phone rule blanks every .pb-btn-sm in this head and stamps
     "All" on it via ::after -- written when the head held exactly one button.
     It must keep doing that to "View all" and must not do it to the refresh,
     whose label is its icon. */
  #callFirstCard .pb-v13-head #callFirstRefreshBtn{
    font-size:inherit!important;width:44px!important;min-width:44px!important;
  }
  #callFirstCard .pb-v13-head #callFirstRefreshBtn::after{content:none!important;}

  /* THE DRAWER'S OWN CONTROLS WERE FALLING OFF THE EDGE OF IT.
     .pb-header-secondary is display:flex with no wrap -- correct for the one
     header row it was written for, wrong in a 227px drawer, where its four
     children form a single non-wrapping row: measured with the drawer open at
     390, Effects ran to 280px and Log out to 329px against a right edge of
     243. Both were unreachable on a phone.

     Pre-existing (identical at 4d03c72, verified before and after), but this
     is the surface Report a problem was just relocated into, so it is fixed
     here rather than left to sit next to the new control. One property,
     scoped to the drawer; the header row is untouched. */
  #pbDrawerSecondary .pb-header-secondary{
    flex-wrap:wrap!important;
    width:100%;
  }
  #pbDrawerSecondary .pb-header-secondary > *{flex:1 1 auto;min-width:0;}

  /* Report a problem, once the mover has parked it in the drawer: a full-width
     row like the controls it now sits beside, not a floating pill. */
  #pbDrawerSecondary #reportProblemBtn{
    width:100%;justify-content:flex-start;
    min-height:44px!important;
    padding:0 var(--sp-3)!important;
    font-size:13px!important;
    background:transparent!important;
    border:1px solid var(--border)!important;
    border-radius:var(--r-sm)!important;
    color:var(--text)!important;
  }
  #pbDrawerSecondary #reportProblemBtn:hover{background:var(--surface-2)!important;}
}

/* ======================================================================
   DESKTOP SHELL — USE THE SCREEN
   ----------------------------------------------------------------------
   Measured before this block, dashboard, viewport vs content:

       1280   page 1042   62px unused
       1440   page 1202   62px unused
       1920   page 1240  504px unused  (26%)
       2560   page 1240 1144px unused  (45%)

   Three caps stacked to produce that: .pb-root at --plot-shell (1480),
   .pb-page at 1240 CENTRED inside it, and an older
   max-width:calc(--shell-rail + --shell-max) = 1626 underneath both. Past
   1480 the app simply stopped growing and sat in the middle of the screen.

   The rail is a fixed column and the content takes the rest. Nothing here
   uses 100vw -- the grid's second track is minmax(0,1fr), which is the
   remaining space after the rail by construction, so there is nothing to
   overflow.
   ====================================================================== */
@media (min-width:1100px){
  :root{--plot-rail-w:240px;}

  .pb-root{
    width:100%!important;
    max-width:none!important;      /* was --plot-shell, 1480 */
    grid-template-columns:var(--plot-rail-w) minmax(0,1fr)!important;
    margin:0!important;
  }
  .pb-main{padding:28px 32px 40px!important;max-width:none!important;}
  .pb-header{padding-inline:32px!important;}

  /* The narrow centred column. This was the single biggest offender. */
  .pb-page{max-width:none!important;margin:0!important;}

  /* Ultrawide still gets a ceiling, but 2040 rather than 1240 -- a 2560
     screen keeps ~250px of breathing room per side instead of 572. */
  @media (min-width:2200px){
    .pb-page{max-width:2040px!important;margin:0 auto!important;}
  }
}

/* ----------------------------------------------------------------------
   DASHBOARD GRID — the desktop composition

     band 1   Today | This Month | Agency Goal        Business Health
     band 2   Call these first                        System health
              Agency Production | Leaderboard         Activity

   Twelve columns. The top band spans both halves; below it the two existing
   .pb-v2-col containers become the 8/4 split and each stacks its own cards,
   so neither column's height is forced by the other. That is why Business
   Health was lifted out of the right column in the markup: it is the only
   card that belongs to the top band rather than to a stack.

   Activity is the last card in the right stack, so it runs down beside
   Agency Production and Leaderboard exactly as the reference shows -- no
   row-spanning tricks and no stretched empty cards.
   ---------------------------------------------------------------------- */
@media (min-width:1100px){
  #page-dash .pb-v2-cols{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    gap:16px!important;
    align-items:start!important;
  }
  #page-dash .pb-v2-col{
    display:flex!important;flex-direction:column!important;
    gap:16px!important;min-width:0!important;
  }

  #page-dash .pb-v2-cols > #apStrip{
    grid-column:1 / span 8!important;
    grid-row:1!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    margin:0!important;
  }
  #page-dash .pb-v2-cols > #bizHealthCard{grid-column:9 / span 4!important;grid-row:1!important;}
  /* Addressed by what each column CONTAINS, not by position. nth-of-type
     counts among sibling <div>s, and #apStrip and #bizHealthCard are divs too,
     so :nth-of-type(1)/(2) matched neither column -- both fell back to full
     width and the bottom band landed 2,000px down the page. */
  #page-dash .pb-v2-cols > .pb-v2-col:has(#callFirstCard){grid-column:1 / span 8!important;grid-row:2!important;}
  #page-dash .pb-v2-cols > .pb-v2-col:has(#dashHealthCard){grid-column:9 / span 4!important;grid-row:2!important;}

  /* Agency Production and Leaderboard are the bottom band of the work column.
     They were 62px link bars; at desktop width they get the proportions of the
     cards they sit under. No content is invented -- they are the same two
     destinations, given room. */
  #page-dash .pb-v2-more{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:16px!important;margin:0!important;
  }
  #page-dash .pb-v2-more a{
    min-height:150px!important;
    align-items:flex-start!important;justify-content:flex-start!important;
    padding:18px 20px!important;font-size:13px!important;
  }
  #page-dash .pb-v2-more a span{font-size:11px!important;margin-top:6px!important;}

  /* The extra width buys hierarchy, not scale. */
  #page-dash #callFirstList .pb-v13-row{min-height:60px!important;padding:11px 6px!important;}
  #page-dash #callFirstList .pb-v13-name{font-size:12.5px!important;}
  #page-dash #callFirstList .pb-v13-sub{font-size:10.5px!important;}
  #page-dash #liveActivityFeed{max-height:none!important;}
}

/* 1100-1399 is the tightest desktop: the right column needs a wider share so
   the ring and its bars are not crushed. */
@media (min-width:1100px) and (max-width:1399px){
  #page-dash .pb-v2-cols{gap:13px!important;}
  #page-dash .pb-v2-cols > #apStrip{grid-column:1 / span 7!important;}
  #page-dash .pb-v2-cols > #bizHealthCard{grid-column:8 / span 5!important;}
  #page-dash .pb-v2-cols > .pb-v2-col:has(#callFirstCard){grid-column:1 / span 7!important;}
  #page-dash .pb-v2-cols > .pb-v2-col:has(#dashHealthCard){grid-column:8 / span 5!important;}
  #page-dash .pb-v2-more a{min-height:120px!important;}
}

/* ======================================================================
   SCREEN PASS 1 — DIALER
   ----------------------------------------------------------------------
   Same shell as the dashboard: no narrow centred container, same spacing,
   radii, borders and type. No call-path logic is touched -- every rule
   here is geometry.

   Measured before: #page-dialer was capped at 1180px and centred, so at
   1920 roughly 470px of viewport sat empty to its right; and inside that,
   the idle dial panel was a full-width card wrapping a 560px column, so
   the card itself was mostly void.
   ====================================================================== */
@media (min-width:1100px){
  /* The cap goes. The page is the shell, like every other screen. */
  #page-dialer{max-width:none!important;}

  /* Setup card and the mode tabs are full-bleed; they are banners, not forms. */
  #page-dialer #setupDetail{width:100%;}

  /* IDLE STATE. #powerDialPanel is the second track and collapses while it is
     empty, so a fixed two-track grid would leave a hole the width of a live
     call panel. One column while idle -- now 760px rather than 560, because
     the page around it is wider -- and two the moment a call populates it. */
  #page-dialer .pb-dial-header:not(:has(> .pb-dial-header-panel > div:not(:empty))){
    grid-template-columns:minmax(0,760px)!important;
  }
  /* Live: the controls keep a workable minimum and the call panel takes the
     rest of the screen, which is the point of the extra width. */
  #page-dialer .pb-dial-header:has(> .pb-dial-header-panel > div:not(:empty)){
    grid-template-columns:minmax(320px,.62fr) minmax(0,1.8fr)!important;
  }

  /* A DIAL FORM DOES NOT WANT 1,600px OF LINE. Lists and call panels fill the
     screen; a two-field form does not become easier to use by getting wider.
     Left-aligned, not centred -- the page itself is still full width. */
  #dialerpane-manual > .pb-card{max-width:860px;}

  /* The CARD follows the same idle rule as the grid inside it. Left at full
     width it was a 1,614px panel drawn around a 760px column -- the void just
     moved from the page into the card. Same :has() predicate: while no call is
     populating the live panel the card sizes to the controls; the moment one
     is, it releases and the two-track layout takes the screen. */
  #page-dialer .pb-dial-panel:not(:has(.pb-dial-header-panel > div:not(:empty))){
    max-width:820px;
  }

  /* THE LIVE CALL PANEL WAS CAPPED AT 520px. .pb-dial-header-panel carries
     max-width:520px from the original flex row, where it was a sensible
     ceiling on a 1,180px page. In the two-track grid it means the widest,
     most useful surface on the screen -- the panel an agent watches during a
     call -- throws the extra width away: measured at 1920, the track was
     allotted 1,171px and the panel drew 520 of it. */
  #page-dialer .pb-dial-header-panel{max-width:none!important;}
}

/* Tablet: the call panel stacks under the controls rather than squeezing. */
@media (min-width:860px) and (max-width:1099px){
  #page-dialer{max-width:none!important;}
  #page-dialer .pb-dial-header{grid-template-columns:minmax(0,1fr)!important;}
  /* Same 520px ceiling bites here: in a single 712px column the live panel
     was still drawing 520 and leaving 190 beside it. */
  #page-dialer .pb-dial-header-panel{max-width:none!important;}
  #dialerpane-manual > .pb-card{max-width:none;}
}

/* ======================================================================
   SCREEN PASS 2 — LEADS
   ----------------------------------------------------------------------
   The page already filled the shell. What did not survive the extra width
   was the request list: the plotted layer draws #myBatchRequestsList as one
   unified bordered list, which reads well at ~1,100px and badly at 1,614 --
   each row became a full-width band with "250 requested" stranded a
   thousand pixels from the tier it belongs to.

   Past 1400 the list becomes a grid of cards instead. Below that it stays
   the unified list the plotted design specifies. Nothing about the batch
   workflow, the tier RPCs or the download handlers is touched.
   ====================================================================== */
@media (min-width:1400px){
  #page-leads #myBatchRequestsList{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    background:none!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
  }
  /* Each request is a card again -- the unified-list rule above strips the
     border, radius and shadow off every child, which is right in a list and
     wrong in a grid. */
  #page-leads #myBatchRequestsList > *{
    border:1px solid var(--plot-line)!important;
    border-left-width:2px!important;
    border-radius:var(--plot-radius)!important;
    background:var(--surface)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.015),0 16px 38px rgba(0,0,0,.10)!important;
    padding:14px 16px!important;
  }
  /* An empty-state or error line is a sentence, not a card in a column. */
  #page-leads #myBatchRequestsList > .pb-v13-empty,
  #page-leads #myBatchRequestsList > .pb-read-failed{
    grid-column:1 / -1!important;
  }
}
@media (min-width:1800px){
  #page-leads #myBatchRequestsList{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}

/* The tier row keeps four across on a wide screen but should not let a card
   grow past the point where its sub-line stops being readable. */
@media (min-width:1600px){
  #page-leads .pb-tier-card{padding:18px!important;}
  #page-leads .pb-tier-count{font-size:30px!important;}
}

/* ======================================================================
   SCREEN PASS 3 — CALLBACKS
   ----------------------------------------------------------------------
   The queue already filled the shell and had no overflow. What it did not
   have was a readable measure: the renderer joins state, timestamp, who set
   it and the note into one string, and at 1920 that line was 1,480px wide.

   The row becomes aligned columns instead -- when, name, metadata -- so the
   queue scans down each column the way a desktop list should, and the note
   gets a bounded measure rather than the width of the monitor. One column,
   not two: this is an ordered queue and left-to-right reading would fight
   the ordering.

   Renderer untouched: it still emits .pb-cb-when and .pb-cb-main, and
   pbSetCallbackScope / renderCallbacksPage are not involved.
   ====================================================================== */
@media (min-width:1100px){
  #page-callbacks .pb-cb-row{
    display:grid!important;
    grid-template-columns:118px minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
    padding:12px 16px!important;
  }
  #page-callbacks .pb-cb-when{justify-self:start;}
  #page-callbacks .pb-cb-main{
    display:grid!important;
    grid-template-columns:minmax(210px,300px) minmax(0,1fr)!important;
    gap:6px 28px!important;
    align-items:baseline!important;
    min-width:0!important;
  }
  #page-callbacks .pb-cb-name{margin:0!important;}
  #page-callbacks .pb-cb-sub{
    margin:0!important;
    max-width:104ch;              /* a note is prose; it stops being readable long before 1,480px */
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* Tablet: name over note, when still leading the row. */
@media (min-width:860px) and (max-width:1099px){
  #page-callbacks .pb-cb-row{
    display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;
    align-items:center!important;gap:14px!important;padding:11px 14px!important;
  }
  #page-callbacks .pb-cb-sub{max-width:none;}
}

/* ======================================================================
   SCREEN PASS 4 — AGENCY PRODUCTION
   ----------------------------------------------------------------------
   The page already fills the shell with no overflow. The one thing that
   did not scale was the AP detail strip: five cells laid out two across
   inside a 1,023px card, so each cell was ~510px wide around a figure and
   three short lines. The card looked padded rather than composed.

   Three across past 1400, four past 1800 -- the fifth cell (Streak, the
   .pb-v2-cell-narrow) stops spanning two columns once there is room for it
   to sit in its own. No metric is added, removed or recalculated.
   ====================================================================== */
@media (min-width:1400px){
  #page-analytics #apStripDetail{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #page-analytics #apStripDetail .pb-v2-cell{min-height:0!important;padding:14px 16px!important;}
  #page-analytics #apStripDetail .pb-v2-cell-narrow{grid-column:auto!important;}
}
@media (min-width:1800px){
  #page-analytics #apStripDetail{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}

/* The right-hand reading column holds three short panels; on a very wide
   screen it should not stretch its prose across the whole track. */
@media (min-width:1600px){
  #page-analytics .pb-v2-col:last-child .pb-v13-hint,
  #page-analytics .pb-v2-col:last-child p{max-width:62ch;}
}

/* ======================================================================
   SCREEN PASS 5 — LEADERBOARD
   ----------------------------------------------------------------------
   No overflow, but three things did not survive the full-width shell:

     - #lbList rows ran the whole 1,614px with no container at all, so a
       name sat on the left and its figure 1,500px away with nothing
       joining them.
     - .pb-lb-summary is a flex row, so its four figures bunched at the
       left and left the rest of the width empty.
     - the "Top this month" card below was 888px while the list above it
       was 1,614 -- two different pages stacked.

   The list becomes the same bordered surface #cbList and #teamList
   already use, which is the plotted list language. renderLeaderboard,
   pbShowAgentDetail and the month navigation are untouched.
   ====================================================================== */
@media (min-width:860px){
  /* Four figures, four equal cards, across the width. */
  #page-lb .pb-lb-summary{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
    background:none!important;border:0!important;padding:0!important;
    margin:14px 0 16px!important;
  }
  #page-lb .pb-lb-summary-item{
    padding:14px 16px!important;
    background:var(--surface)!important;
    border:1px solid var(--plot-line)!important;
    border-radius:var(--plot-radius)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.015),0 16px 38px rgba(0,0,0,.10)!important;
  }

  /* One surface for the board, rows separated by a hairline -- the same
     treatment Callbacks and Team already get. */
  #page-lb #lbList{
    border:1px solid var(--plot-line)!important;
    border-radius:var(--plot-radius)!important;
    background:var(--surface)!important;
    overflow:hidden!important;
  }
  #page-lb #lbList .pb-lb-row{
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr) minmax(120px,auto)!important;
    align-items:center!important;
    gap:16px!important;
    margin:0!important;
    padding:12px 18px!important;
    border-radius:0!important;
    border-top:1px solid var(--plot-line-soft)!important;
    background:transparent!important;
  }
  #page-lb #lbList .pb-lb-row:first-child{border-top:0!important;}
  #page-lb #lbList .pb-lb-amt{justify-self:end;font-variant-numeric:tabular-nums;}
}

/* The two panels under the board share the row evenly instead of one
   filling and the other trailing off. */
@media (min-width:1100px){
  #page-lb .pb-v2-cols{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;align-items:start!important;
  }
  #page-lb .pb-v2-col{display:flex!important;flex-direction:column!important;gap:16px!important;min-width:0!important;}
}

@media (max-width:859px){
  /* display:grid must come with the template -- the rule above is gated at
     860, so on a phone this was setting grid-template-columns on a container
     that was still display:flex and the four figures stayed bunched. */
  #page-lb .pb-lb-summary{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
    background:none!important;border:0!important;padding:0!important;margin:12px 0 14px!important;
  }
  #page-lb .pb-lb-summary-item{
    padding:12px!important;background:var(--surface)!important;
    border:1px solid var(--plot-line)!important;border-radius:var(--plot-radius)!important;
  }
  /* The board is a surface at every width, not only on a desktop. */
  #page-lb #lbList{
    border:1px solid var(--plot-line)!important;border-radius:var(--plot-radius)!important;
    background:var(--surface)!important;overflow:hidden!important;
  }
  #page-lb #lbList .pb-lb-row{
    margin:0!important;border-radius:0!important;padding:11px 13px!important;
    border-top:1px solid var(--plot-line-soft)!important;background:transparent!important;
  }
  #page-lb #lbList .pb-lb-row:first-child{border-top:0!important;}
}

/* ---- leaderboard: the top three were unreadable ----------------------
   .pb-rank.r1/.r2/.r3 carry the medal gradients AND color:var(--on-accent),
   a near-black meant to sit on gold. But #page-lb .pb-rank (1,1,0) outranks
   .pb-rank.r1 (0,2,0) and repaints the badge background:var(--surface-2)
   without touching the colour -- so ranks 1, 2 and 3 rendered as near-black
   digits on a dark disc. Measured rgb(20,16,10) on #101722: about 1.1:1.

   The medals are restored at the specificity that beat them. Pre-existing;
   found while sizing this screen. */
#page-lb .pb-rank.r1{background:linear-gradient(145deg,#FFD877,#D69A1E)!important;color:#14100a!important;}
#page-lb .pb-rank.r2{background:linear-gradient(145deg,#DDE3E8,#9BA5AE)!important;color:#14100a!important;}
#page-lb .pb-rank.r3{background:linear-gradient(145deg,#E4A867,#A9642A)!important;color:#14100a!important;}

/* ======================================================================
   SCREEN PASSES 6-8 — TEAM, MY COMMISSION, SETTINGS
   ----------------------------------------------------------------------
   All three already filled the shell with no overflow, no clipped text and
   no undersized touch targets. What they lacked at 1,614px was measure:
   admin cards ran the full width around a single select or one sentence of
   help text, so "Every device that's ever tried to log in..." was set across
   the whole monitor and a lone dropdown sat in a 1,600px card.

   Prose gets a measure. Controls get a column each instead of one per row.
   Lists and tables keep the full width -- they are the things that actually
   benefit from it. No permission, query or handler is involved.
   ====================================================================== */
@media (min-width:1100px){
  /* ---- prose ---------------------------------------------------------
     A help line is read, not scanned; past ~86 characters the eye loses the
     start of the next line. */
  #page-settings .pb-v13-hint,
  #page-settings .pb-card > p,
  #page-settings .pb-dset-note,
  #page-commission .pb-v13-hint,
  #page-commission .pb-card > p,
  #page-team .pb-v13-hint,
  #page-team .pb-card > p{
    max-width:86ch;
  }

  /* ---- forms ---------------------------------------------------------
     .pb-form-row is a flex row, so one field stretched to the card. Auto-fit
     columns give each field a sane width and let two or three share a line,
     which is what the extra space is actually good for. */
  #page-settings .pb-form-row,
  #page-commission .pb-form-row,
  #page-intake .pb-form-row{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
    gap:14px!important;
    max-width:1100px;
  }

  /* A standalone picker is a control, not a banner. Scoped to selects that
     are a direct child of a card so table and row selects are untouched. */
  #page-settings .pb-card > select,
  #page-settings .pb-card > .pb-select-standalone,
  #page-commission .pb-card > select{
    max-width:420px;
  }

  /* ---- Team: the directory is a list, so it keeps the width, but a row
     needs columns rather than a name at one end and buttons at the other. */
  #page-team #teamList .pb-team-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:20px!important;
    padding:13px 18px!important;
  }
  #page-team .pb-team-actions{justify-self:end;flex-wrap:nowrap!important;}
}

/* Tablet keeps the same shapes at a smaller measure. */
@media (min-width:860px) and (max-width:1099px){
  #page-settings .pb-form-row,
  #page-commission .pb-form-row,
  #page-intake .pb-form-row{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;
    gap:12px!important;
  }
}

/* The intake sender-name note: this control used to rename the agent across the
   whole CRM, so the scope of what it changes is now stated next to it. */
.pb-intake-namenote{
  margin-top:6px;font-size:10.5px;line-height:1.5;
  color:var(--text-muted);max-width:52ch;
}

/* Secure Intake: the optional-field marker and its note. */
.pb-field-opt{
  font-weight:400;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin-left:6px;
}
.pb-field-note{
  margin-top:6px;font-size:10.5px;line-height:1.5;color:var(--text-muted);max-width:46ch;
}