/* Agent Tracker — light theme + 11/10 coaching update (loaded last).
   Why a separate sheet: the 11/10 brief was "the left panel is poor and the color scheme is too dark overall".
   Nothing in the earlier sheets is edited — this file re-skins the shell (sidebar, heroes, dark tiles) and styles
   the new pieces (sidebar Success Plan push, Tools + Quick links kit, Overview push card, pipeline editor,
   assessment feature tiles). Delete the <link> in index.html and the 10/26 dark look is back.

   Rules this sheet keeps:
   - neutrals are cool (no beige / tan / brown anywhere)
   - the brand accent (--gold, set per agency) is a FILL only: bars, rings, buttons, the active marker — never text
   - anything that stays dark carries bold white text
   - one typeface (Inter) */

:root{
  --paper:#f4f6f9;--card:#fff;--line:#e2e7ee;--line2:#cfd6e0;--soft:#f1f4f8;--soft2:#eef2f7;
  --hair:#e7ebf1;--edge:#e2e7ee;--gold-soft:#eef2f7;
  --ink:#0d1321;--body:#1f2937;--muted:#475467;--faint:#667085;
  --side:#fff;--side-line:#e2e7ee;--side-hover:#f1f4f8;
}
html,body{background:var(--paper)}

/* =====================================================================
 * SIDEBAR — white, bold dark labels, the brand accent as the marker
 * ===================================================================== */
.sidebar{background:var(--side);color:var(--ink);border-right:1px solid var(--side-line)}
.sb-brand{border-bottom:1px solid var(--side-line)}
.sb-brand .t b{color:var(--ink)}
.sb-brand .t span{color:var(--faint);font-weight:700}
.sb-brand.has-logo .bm-tile.bm-dark{background:var(--navy)}
.sb-fold{border-color:var(--line2);background:#fff;color:var(--muted)}
.sb-fold:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sb-scroll{scrollbar-color:var(--line2) transparent;padding:6px 0 14px}
.sb-sec{padding:16px 18px 6px}
.sb-sec .k,.sidebar .sb-sec .k{color:var(--faint);font-weight:800;font-size:10.5px}
.sb-sec .btn{border-color:var(--line2);background:#fff;color:var(--ink);font-weight:700}
.sb-sec .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sb-nav{padding:0 10px;display:grid;gap:2px}
.sb-nav a,.sb-nav button,.sb-settings{color:var(--body);font-weight:700;border-radius:10px}
.sb-nav a:hover,.sb-nav button:hover,.sb-settings:hover{background:var(--side-hover);color:var(--ink)}
.sb-nav a.on,.sb-nav button.on,.sb-settings.on{background:var(--ink);color:#fff;font-weight:800;box-shadow:none}
.sb-nav svg,.sb-settings svg{opacity:1}
.sb-nav .n{background:var(--soft2);color:var(--ink);font-weight:700}
.sb-nav a.on .n{background:rgba(255,255,255,.18);color:#fff}
.sb-ws,.sb-switch{background:var(--soft);border-color:var(--line);color:var(--ink)}
.sb-ws .t span,.sb-switch .t span{color:var(--muted)}
.sb-switch svg{color:var(--ink)}
.sb-switch:hover,.sb-switch:focus-visible{background:var(--soft2);border-color:var(--line2)}
.sb-search input{border-color:var(--line2);background:#fff;color:var(--ink)}
.sb-search input::placeholder{color:var(--faint)}
.sb-search input:focus{border-color:var(--ink)}
.sidebar .roster a{color:var(--ink)}
.roster a:hover{background:var(--side-hover);color:var(--ink)}
.roster a.on{background:var(--soft2);color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.roster .av{background:var(--soft2);color:var(--ink)}
.roster .t b{text-transform:none;font-size:13px;letter-spacing:0}
.roster .t span,.sidebar .roster .t span{color:var(--muted)}
.roster .p{background:var(--line)}
.roster .none{color:var(--muted)}
.sb-foot{border-top:1px solid var(--side-line);background:#fff}
.sb-user .t b{color:var(--ink)}
.sb-user .t span,.sidebar .sb-user .t span{color:var(--muted)}
.sb-user .ib{border-color:var(--line2);color:var(--muted)}
.sb-user .ib:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sb-preview{border-top-color:var(--side-line);color:var(--muted)}
.sb-preview button{color:var(--ink)}
.sb-unfold{background:var(--ink)}
.sb-unfold:hover{background:var(--ink);color:#fff}
@media (max-width:900px){.sb-x{color:var(--ink)}.sidebar{box-shadow:0 0 60px rgba(13,19,33,.28)}}

/* Success Plan push — the first thing in the sidebar until the plan is complete */
.sb-plan{display:flex;align-items:center;gap:12px;margin:12px 12px 2px;padding:12px;border-radius:14px;background:var(--ink);color:#fff;transition:transform .15s var(--ease),box-shadow .15s}
.sb-plan:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(13,19,33,.6)}
.sbp-ring{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.22) 0)}
.sbp-ring b{width:36px;height:36px;border-radius:50%;background:var(--ink);display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;line-height:1}
.sb-plan .t{min-width:0;display:grid;gap:1px}
.sb-plan .k{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.8}
.sb-plan .t>b{font-size:13.5px;font-weight:800;color:#fff}
.sb-plan .nx{font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tools + Quick links: one kit, two tidy lists that sit together (never split by the team list) */
.sb-kit{margin:10px 10px 0;padding:2px 0 8px;border:1px solid var(--side-line);border-radius:14px;background:var(--soft)}
.sb-kit .sb-sec{padding:12px 12px 6px}
.sb-kit .sb-sec+.sb-links,.sb-kit .sb-ptools{padding:0 6px}
.sb-kit .sb-ptools+.sb-sec{margin-top:6px;border-top:1px solid var(--side-line)}
.sb-ptools,.sb-links{display:grid;gap:2px}
.sb-ptools a,.sb-links a{display:flex;align-items:center;gap:10px;min-height:36px;padding:5px 8px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none}
.sb-ptools a:hover,.sb-links a:hover{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--side-line),0 0 0 1px var(--side-line)}
.sb-ptools a.on{background:var(--ink);color:#fff;box-shadow:none}
.sb-ptools a .ic,.sb-links a .ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--side-line);color:var(--ink)}
.sb-ptools a .ic svg,.sb-links a .ic svg{width:14px;height:14px;color:inherit;opacity:1;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-ptools a.on .ic{background:var(--gold);border-color:var(--gold);color:var(--on-gold,var(--ink))}
.sb-ptools a span,.sb-links a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-ptools a .ext,.sb-links a .ext{display:inline-flex;opacity:.55;flex:none}
.sb-ptools a .ext svg,.sb-links a .ext svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-ptools a.on .ext{opacity:.9}
.sb-kit .roster .none{padding:4px 8px 6px}

/* =====================================================================
 * PAGE CHROME — tabs, header, heroes
 * ===================================================================== */
.ah .k{color:var(--faint)}
.hero2,.hero2.has-photo{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 34px -28px rgba(13,19,33,.5)}
.hero2 .k{color:var(--muted)}
.hero2 h2{color:var(--ink)}
.hero2 h2 em{color:var(--ink);box-shadow:inset 0 -.34em 0 var(--gold)}
.hero2 p{color:var(--body);font-weight:500}
.hero2-sp{border-left-color:var(--line2)}
.hero2-sp b,.hero2-prog b{color:var(--ink)}
.hero2-sp span,.hero2-prog span{color:var(--muted)}
.hero2-r,.hero2-prog{background:var(--soft);border-color:var(--line);backdrop-filter:none}
.hero2.has-photo:not(.onb):not(.sys-hero) .hero2-r{background:transparent}
.hero2.has-photo:not(.onb):not(.sys-hero) .hero2-sp{border-left-color:var(--line2)}
.hero2.has-photo .hero2-l h2,.hero2.has-photo .hero2-l p{text-shadow:none}
.hero2 .ring.hero-ring{background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--line) 0)}
.hero2 .ring.hero-ring b{background:#fff;color:var(--ink)}
/* the agency's banner photo sits in its own rounded frame on the right and fades into the white card */
.hero2 .hero-photo{top:10px;right:10px;bottom:10px;border-radius:12px;width:min(46%,560px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.hero2.has-photo .hero-photo{width:min(46%,560px);background-position:center 30%}
.hero2.has-photo .hero2-l{max-width:54%}
.hero2 .hero-art{opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%);border-radius:0 16px 16px 0;width:min(44%,520px)}
.hero2.onb.has-photo .hero-art{width:min(44%,520px)}
.hero2-quote{background:#fff;border-color:var(--line);backdrop-filter:none;box-shadow:0 10px 26px -18px rgba(13,19,33,.5)}
.hero2-quote p{color:var(--ink)}
.hero2-quote span{color:var(--ink)}
.hero2 .btn.on-dark,.btn.on-dark{background:#fff;color:var(--ink);border-color:var(--line2)}
.hero2 .btn.on-dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pl-all{color:var(--ink)!important}
@media (max-width:900px){
  .hero2 .hero-photo,.hero2.has-photo .hero-photo{position:relative;top:auto;right:auto;bottom:auto;order:-1;width:100%;height:120px;opacity:1;flex:none;
    -webkit-mask-image:none;mask-image:none}
  .hero2.has-photo .hero2-l{max-width:none}
  .hero2 .hero-art{display:none}
}
/* the team page hero */
.hero:not(.hero2){background:#fff;color:var(--ink);border:1px solid var(--line)}
.hero:not(.hero2)::after{display:none}
.hero:not(.hero2) .k{color:var(--muted)}
.hero:not(.hero2) h2{color:var(--ink)}
.hero:not(.hero2) p,.hero:not(.hero2) p b{color:var(--body)!important}
.hero:not(.hero2) .legend{color:var(--body)!important;font-weight:600}
.hero:not(.hero2) .team-bar{background:var(--line)}

/* dark tiles that had no reason to be dark */
.stat.navy{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:inset 0 3px 0 var(--ink)}
.stat.navy .k,.stat.navy b,.stat.navy .v,.stat.navy span{color:var(--ink)!important}
.tl-hero{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)}
.tl-hero *{color:var(--ink)!important}
.tl-hero .k,.tl-hero .tl-kicker{color:var(--muted)!important}

/* =====================================================================
 * SUCCESS PLAN — step parts, Overview push card, daily prompt
 * ===================================================================== */
.pl-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:12px}
.pl-part{display:grid;grid-template-columns:20px 1fr;column-gap:8px;align-items:center;text-align:left;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink)}
button.pl-part{cursor:pointer}
button.pl-part:hover{border-color:var(--ink)}
.pl-part>svg{width:16px;height:16px;color:var(--green)}
.pl-part>i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);justify-self:center}
.pl-part b{font-size:13px;font-weight:800}
.pl-part small{grid-column:2;font-size:11.5px;font-weight:600;color:var(--red);line-height:1.35}
.pl-part.done{background:var(--green-soft);border-color:transparent}

.pl-push{padding:18px 20px;display:grid;gap:14px;border:1px solid var(--line);box-shadow:inset 4px 0 0 var(--gold)}
.pl-push-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pl-push-h .pl-ov-t{flex:1;min-width:220px;display:grid;gap:2px}
.pl-push-h .pl-ov-t>b{font-size:19px;font-weight:800;color:var(--ink);line-height:1.2}
.pl-push-h .pl-ov-t>span{font-size:13.5px;color:var(--muted);font-weight:500}
.pl-push .ring{flex:none}
.pl-todo{display:flex;flex-wrap:wrap;gap:8px}
.pl-todo .pl-td{flex:1 1 calc(100% / var(--cols,4) - 8px);min-width:210px;width:auto}
.pl-todo.one{flex-direction:column;flex-wrap:nowrap}
.pl-todo.one .pl-td{flex:none;width:100%;min-width:0}
.pl-todo.one .tx small{white-space:normal}
.pl-td{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#fff;text-align:left;font:inherit;color:var(--ink);text-decoration:none}
button.pl-td,a.pl-td{cursor:pointer;transition:border-color .12s,transform .12s var(--ease)}
button.pl-td:hover,a.pl-td:hover{border-color:var(--ink);transform:translateY(-1px)}
.pl-td .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--soft2);color:var(--ink)}
.pl-td .ic svg{width:17px;height:17px}
.pl-td .tx{flex:1;min-width:0;display:grid}
.pl-td .tx b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-td .tx small{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-td .go{flex:none;color:var(--faint)}
.pl-td .go svg{width:15px;height:15px}
.pl-td:hover .go{color:var(--ink)}
.pl-nudge-p{font-size:13.5px;line-height:1.5;color:var(--body);margin:0 0 12px}
@media (max-width:640px){.pl-push{padding:16px 14px}.pl-push-h .btn{width:100%;justify-content:center}.pl-todo .pl-td{flex:1 1 100%;min-width:0}}

/* team table: Success Plan column */
.tbl td.c-plan{white-space:nowrap}
.tm-plan{display:inline-block;vertical-align:middle;width:54px;height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-right:8px}
.tm-plan i{display:block;height:100%;background:var(--ink);border-radius:999px}
.tm-plan.done i{background:var(--green)}
.tm-plan.low i{background:var(--red)}

/* =====================================================================
 * EDIT PROFILE — address row, "No children / No pets"
 * ===================================================================== */
.pf-sz{grid-template-columns:1fr 1fr;gap:12px;margin:0}
.pf-none{align-items:center;gap:12px;margin-top:8px}
.pf-ck{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;min-height:32px}
.pf-ck input{width:17px;height:17px;accent-color:var(--ink)}
.pf-ck[hidden],#spouseWrap[hidden]{display:none}
/* lead record: a field that only shows while its switch is on (Spouse's name / age while Married = Yes) */
.f-if{display:contents}
.f-if.off{display:none}

/* =====================================================================
 * PIPELINE EDITOR
 * ===================================================================== */
.pe{display:grid;gap:14px}
.pe-top{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.pe-pick{flex:1;min-width:220px}
.pe-newtag{height:40px;display:flex;align-items:center;padding:0 12px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;font-size:13.5px}
.pe-locked{padding:10px 12px;border-radius:10px;background:var(--soft);border:1px solid var(--line);display:grid;gap:2px}
.pe-locked b{font-size:14px;font-weight:800;color:var(--ink)}
.pe-locked span{font-size:12.5px;color:var(--muted);font-weight:500}
.pe-sth{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pe-sth label{font-size:12.5px;font-weight:800;color:var(--ink)}
.pe-sth label em{font-style:normal;font-weight:600;color:var(--faint);margin-left:6px}
.pe-legend{font-size:11.5px;color:var(--muted)}
.pe-legend b{color:var(--ink);font-weight:800}
.pe-stages{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pe-st{display:grid;grid-template-columns:22px 30px minmax(0,1fr) 112px 62px 32px;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.pe-st.pe-ghost{opacity:.4}
.pe-grip{cursor:grab;color:var(--faint);display:grid;place-items:center;height:32px;touch-action:none}
.pe-grip svg{width:16px;height:16px}
.pe-col{position:relative;display:grid;place-items:center}
.pe-dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0}
.pe-pal{position:absolute;z-index:5;top:30px;left:-4px;display:grid;grid-template-columns:repeat(5,24px);gap:6px;padding:8px;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 30px -14px rgba(13,19,33,.45)}
.pe-pal button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0}
.pe-pal button.on{box-shadow:0 0 0 2px var(--ink)}
.pe-st .in{height:36px}
.pe-n{font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;white-space:nowrap}
.pe-add{display:flex;gap:8px;flex-wrap:wrap}
.pe-note{padding:10px 12px;border-radius:10px;background:var(--blue-soft);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.5}
.pe-danger{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.btn.danger-o{color:var(--red);border-color:var(--line2);background:#fff}
.btn.danger-o:hover{background:var(--red);color:#fff;border-color:var(--red)}
.pe-msg{font-size:12.5px;font-weight:700;max-width:60%;line-height:1.35}
.pe-msg.bad{color:var(--red)}
.pe-msg.ok{color:var(--green)}
@media (max-width:640px){
  .pe-st{grid-template-columns:22px 30px minmax(0,1fr) auto;row-gap:6px}
  .pe-st .pe-kind{grid-column:3;grid-row:2}
  .pe-st .pe-n{grid-column:4;grid-row:2;text-align:right;min-width:32px}
  .pe-st .pe-rm{grid-column:4;grid-row:1;justify-self:end}
  .pe-legend{display:none}
  .pe-msg{max-width:100%;flex-basis:100%}
  .pe-top .btn{width:100%;justify-content:center}
}

/* =====================================================================
 * ASSESSMENTS — two featured families
 * ===================================================================== */
.as-feat{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.as-ft{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:#fff;text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .12s,transform .12s var(--ease),box-shadow .12s}
.as-ft:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(13,19,33,.55)}
.as-ft .ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--ink);color:#fff}
.as-ft.asf-home .ic{background:var(--gold);color:var(--on-gold,var(--ink))}
.as-ft .ic svg{width:23px;height:23px}
.as-ft .tx{flex:1;min-width:0;display:grid;gap:2px}
.as-ft .k{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.as-ft .tx>b{font-size:17px;font-weight:800;line-height:1.2}
.as-ft .tx small{font-size:12px;font-weight:500;color:var(--muted);line-height:1.4}
.as-ft .ct{flex:none;text-align:center;padding-left:14px;border-left:1px solid var(--line)}
.as-ft .ct b{display:block;font-size:24px;font-weight:800;line-height:1}
.as-ft .ct b i{font-style:normal;font-size:14px;color:var(--faint)}
.as-ft .ct small{font-size:11px;font-weight:700;color:var(--muted)}
.as-sec-h{margin-top:6px;display:grid;gap:2px;scroll-margin-top:90px}
.as-sec-h .k{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.as-sec-h h3{font-size:20px;font-weight:800;color:var(--ink)}
.as-sec-h p{font-size:13.5px;color:var(--muted)}
.as-fam{scroll-margin-top:90px}
@media (max-width:820px){.as-feat{grid-template-columns:1fr}.as-ft .tx small{display:none}}

/* avatars: white initials on the dark circle (never accent-colored text) */
.av,.ah .av,.av.lg,.sb-user .av{color:#fff}
.av.av-brand{color:#fff}
/* Onboarding "Your tools": white cards like the rest of the page */
.onb-tools.kit .onb-tool{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.onb-tools.kit .onb-tool:hover{box-shadow:0 14px 28px -20px rgba(13,19,33,.55);border-color:var(--ink)}
.onb-tools.kit .onb-tool .ic,.onb-tools.kit .onb-tool .ic.gold,.onb-tools.kit .onb-tool .ic.indigo,.onb-tools.kit .onb-tool .ic.green,.onb-tools.kit .onb-tool .ic.violet{background:var(--ink);color:#fff}
.onb-tools.kit .onb-tool b{color:var(--ink)}
.onb-tools.kit .onb-tool p{color:var(--muted);font-weight:500;opacity:1}
.onb-tools.kit .onb-tool .go{color:var(--faint)}

/* highlighted tiles: cool, not cream */
.stat.kpi.hi{background:#fff;border-color:var(--line);box-shadow:inset 0 3px 0 var(--gold)}
.kpi-ic.gold{background:var(--ink);color:#fff}
.pc2.now{background:#fff;border-color:var(--ink);box-shadow:inset 0 3px 0 var(--gold)}
.pc2.now .pi{background:var(--ink);color:#fff}
.pf-ck{text-transform:none;letter-spacing:0}
/* a little tighter so a coach's team list starts higher */
.sb-kit .sb-ptools a,.sb-kit .sb-links a{min-height:34px;padding:4px 8px}

/* Onboarding tool tiles: the arrow never pushes past the card on a phone */
.onb-tool .top{min-width:0}
.onb-tool .top b{min-width:0}
.onb-tool .go{flex:none}

/* no brown / amber text anywhere: labels that were dark-gold are ink on a cool tint */
:root{--gold-ink:#0d1321}
.tl-tag{color:var(--ink);background:var(--soft2);border-color:var(--line2)}
.tl-go{color:var(--ink)}

/* Overview pipeline tiles: an agent can now have more than six pipelines — rows always fill the full width (no stray tile) */
.ov-stats{display:flex;flex-wrap:wrap}
.ov-stats>.ov-stat{flex:1 1 150px;min-width:0}
@media (max-width:900px){.ov-stats>.ov-stat{flex:1 1 calc(33.333% - 10px)}}
@media (max-width:480px){.ov-stats>.ov-stat{flex:1 1 calc(50% - 8px)}}
.pcard.crm.won{background:#f0fdf4;border-color:#bbf7d0}
/* no purple anywhere: the old purple tone, KPI icon and lead colour are teal */
.stage-pill.tone-purple{background:#ecfdf9;color:#0f766e;border-color:#c6f0e8}
.kpi-ic.violet,.onb-tool .ic.violet{background:#ecfdf9;color:#0f766e}
.csw-purple{background:#0d9488}
.pcard.c-purple{background:#ecfdf9}
.pcard.crm.c-purple{box-shadow:inset 4px 0 0 #0d9488,var(--shadow-1)}
:root{--launch:#0d9488}

/* ---- 11/10c: the primary colour on the light theme is the agency's dark colour, not its accent.
   A bright accent (gold, yellow) on white is hard to read, so fills, rings and buttons use the dark with bold white text. ---- */
body{--gold:var(--navy);--on-gold:#fff;--gold-tint:rgba(13,19,33,.07);--gold-on-dark:#fff}
.sbp-ring{background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.22) 0)}
.sb-ptools a.on .ic{background:#fff;border-color:#fff;color:var(--ink)}
.hero2 h2 em{box-shadow:inset 0 -.3em 0 rgba(13,19,33,.12)}
.btn.gold{font-weight:800}
/* the banner photo keeps its own shape (16:9) in a crisp frame: nothing cropped off, no fade */
.hero2 .hero-photo,.hero2.has-photo .hero-photo{width:auto;aspect-ratio:16/9;max-width:46%;-webkit-mask-image:none;mask-image:none;background-position:center;background-size:cover}
@media (max-width:900px){.hero2 .hero-photo,.hero2.has-photo .hero-photo{max-width:none;width:100%;height:auto;aspect-ratio:16/9}}
/* foldable sidebar groups (Tools, Quick links, the team) */
.sb-grp-h{gap:6px}
.sb-tog{appearance:none;border:0;background:transparent;padding:4px 0;margin:-4px 0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;flex:1;min-width:0;text-align:left}
.sb-tog .chev{width:14px;height:14px;flex:none;display:grid;place-items:center;color:var(--muted);transition:transform .15s var(--ease)}
.sb-tog .chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sb-grp.shut .sb-tog .chev{transform:rotate(-90deg)}
.sb-tog .n{font-size:10.5px;font-weight:800;color:var(--ink);background:var(--soft2);border-radius:999px;padding:2px 7px}
.sb-tog:hover .k{color:var(--ink)}
.sb-tog:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.sb-grp.shut>.sb-body{display:none}
.sb-grp:not(.shut)>.sb-stack{display:none}
.sb-kit .sb-grp+.sb-grp{margin-top:4px;border-top:1px solid var(--side-line)}
.sb-kit .sb-grp.shut .sb-sec{padding-bottom:4px}
.sb-kit .sb-links.sb-body,.sb-kit .sb-ptools.sb-body{padding:0 6px}
.sb-kit{padding-bottom:6px}
.sb-stack{display:flex;align-items:center;flex-wrap:wrap;padding:2px 18px 6px;gap:5px}
.sb-stack a{display:block;border-radius:50%;transition:transform .12s var(--ease)}
.sb-stack a:hover{transform:translateY(-2px);z-index:1}
.sb-stack .av{width:30px;height:30px;font-size:10.5px}
.sb-stack a.more{border-radius:999px;font-size:11.5px;font-weight:800;color:var(--ink);background:var(--soft2);padding:6px 9px;text-decoration:none}
/* one scroll area in the sidebar, with a quiet scrollbar */
.sidebar .roster{max-height:none;overflow:visible}
.sb-scroll{scrollbar-width:thin}
.sb-scroll::-webkit-scrollbar{width:6px}.sb-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}.sb-scroll::-webkit-scrollbar-track{background:transparent}
.stage-pill.tone-indigo{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}
.stage-pill.tone-teal{background:#e8eefc;color:#1e40af;border-color:#c7d5f7}
@media (max-width:900px){.sidebar .sb-brand{padding-right:52px}}
.tm-plan{width:40px;margin-right:6px}
td:has(>.tm-plan){white-space:nowrap;padding-right:16px}
#view .tbl th,#view .tbl td{padding-left:10px;padding-right:10px}
#view .tbl th:first-child,#view .tbl td:first-child{padding-left:16px}
#view .tbl th:last-child,#view .tbl td:last-child{padding-right:16px}
/* team list in the sidebar: readable last-login text, and each agent on its own bordered row */
.sidebar .roster .ll-txt{color:var(--ink);font-weight:800}
.sidebar .roster a{margin:0 10px 6px;padding:8px 10px;border:1px solid var(--line2);border-radius:12px;background:#fff}
.sidebar .roster a:hover{border-color:var(--ink);background:#fff}
.sidebar .roster a.on{border-color:var(--ink);background:var(--soft);box-shadow:inset 3px 0 0 var(--ink)}
.sidebar .roster a:last-child{margin-bottom:4px}
.sidebar .roster .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sidebar .sb-search input{padding-left:12px}
.sidebar .roster .t b span{display:inline;font-size:9.5px;font-weight:800;color:var(--muted)!important;letter-spacing:.06em}
/* windows never fill the screen edge to edge: capped height, always a margin, sized from the backdrop (so browser zoom cannot push it off screen) */
@media (min-width:901px){
  .mbd{grid-template-rows:minmax(0,1fr);padding:24px}
  .mbox{max-height:min(100%,680px);align-self:center}
  .mbox.rec2{max-height:min(100%,720px)}
}
.mbox [data-sec="story"] textarea{min-height:54px;height:54px}
.mbox [data-sec] .k{margin-top:2px}
/* page banner graphics: one wide shape (about 2.9:1), vertically centred in the card, never cropped into the artwork's words */
.hero2 .hero-photo.page-art,.hero2.has-photo .hero-photo.page-art{top:50%;bottom:auto;transform:translateY(-50%);height:auto;width:min(46%,600px);max-width:none;aspect-ratio:780/276;background-size:cover;background-position:center;border-radius:14px;box-shadow:0 10px 26px -18px rgba(13,19,33,.55)}
@media (max-width:900px){.hero2 .hero-photo.page-art,.hero2.has-photo .hero-photo.page-art{position:relative;top:auto;transform:none;width:100%;height:auto;aspect-ratio:780/276}}
/* layout beside a page banner graphic: text keeps to the left half, nothing sits on top of the artwork */
@media (min-width:901px){
  .hero2:has(.page-art) .hero2-l,.hero2.onb.has-photo:has(.page-art) .hero2-l{max-width:calc(54% - 40px);align-self:flex-start}
  .hero2.has-photo:has(.page-art){flex-direction:column;align-items:flex-start;justify-content:center;min-height:250px}
  .hero2.onb.has-photo:has(.page-art){align-items:flex-start;padding-bottom:30px;min-height:270px}
  .hero2.onb.has-photo:has(.page-art) .hero2-quote{margin:0;align-self:flex-start;width:calc(54% - 40px);max-width:calc(54% - 40px)}
  .hero2.sys-hero:has(.page-art) .sys-a{align-self:flex-start;width:auto}
}
@media (max-width:900px){
  .hero2.has-photo:has(.page-art){flex-direction:column;align-items:stretch}
  .hero2:has(.page-art) .hero2-l{max-width:none}
  .hero2.onb.has-photo:has(.page-art) .hero2-quote{margin:0;width:100%}
}
.hero2.sys-hero .sys-stage,.hero2.sys-hero .sys-stage strong{color:var(--ink)}
.hero2.sys-hero .sys-a .btn svg{stroke:currentColor;color:var(--ink)}
.hero2-prog b{text-wrap:balance}
@media (max-width:480px){.hero2.onb .hero2-prog b{font-size:16px;white-space:nowrap}.as-hero .btn,.pl-hero .btn,.un-hero .btn{max-width:100%;white-space:normal;height:auto;min-height:40px;text-align:left}}
.as-hero .btn,.pl-hero .btn,.un-hero .btn{text-wrap:balance}
/* corner guide player: the box takes the video's own 9:16 shape at every screen height, so there are no dark bars beside the video */
#guide .g-v{max-height:none}
#guide:not(.big):not(.min){width:min(272px,calc(min(62vh,520px) * 9 / 16),calc(var(--vw,100vw) - 24px))}
#guide.big{width:min(420px,calc((100vh - 140px) * 9 / 16),calc(100vw - 48px))}
#guide.big .g-v{max-height:none}

/* ---- 11/10h: dream and goal windows ---- */
.dream-cats{display:flex;flex-wrap:wrap;gap:8px}
.dcat{flex:1 1 calc(25% - 8px);min-width:132px;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line2);background:#fff;position:relative;transition:border-color .12s,box-shadow .12s,transform .12s var(--ease)}
.dcat .ic{width:36px;height:36px;border-radius:10px}
.dcat .ic svg{width:17px;height:17px}
.dcat b{font-size:13.5px;font-weight:800}
.dcat small{font-size:11.5px;font-weight:600;color:var(--muted)}
.dcat:hover{transform:translateY(-1px);box-shadow:0 10px 22px -16px rgba(13,19,33,.5)}
.dcat.on{border-color:var(--ink);background:var(--ink);box-shadow:0 12px 26px -16px rgba(13,19,33,.7)}
.dcat.on b,.dcat.on small{color:#fff;font-weight:800}
.dcat.on::after{content:"";position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.dream-m .mb textarea{min-height:62px}
.dream-m .tf{display:flex;flex-wrap:wrap;gap:6px}
.dream-m .tf .chip{height:34px;padding:0 14px;border-radius:999px;font-weight:700}
.dream-m .tf .chip.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:800}
.gcat{border-radius:14px;border-color:var(--line2);transition:border-color .12s,box-shadow .12s,transform .12s var(--ease)}
.gcat:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 10px 22px -16px rgba(13,19,33,.5)}
.gcat .ic{width:36px;height:36px;border-radius:10px}
.gcat b{font-weight:800}
@media (max-width:560px){.dcat{flex:1 1 calc(50% - 8px);min-width:0}.dcat small{display:block}.dream-why{grid-template-columns:1fr}}

/* ---- 11/10h: a richer light theme — same white cards, with depth and a blue second colour ---- */
:root{--blue:#2563eb;--paper:#eef2f8}
html,body{background:linear-gradient(180deg,#e6edf8 0,#eef2f8 360px,#f3f5f9 100%) fixed}
.hero2,.hero2.has-photo{background:linear-gradient(115deg,#fff 0,#fff 46%,#eaf1fd 100%);border-color:#d9e2f0;box-shadow:0 18px 40px -30px rgba(15,35,80,.55),inset 5px 0 0 var(--ink)}
.hero2 .k{color:var(--blue);font-weight:800}
.hero2 h2 em{box-shadow:inset 0 -.3em 0 rgba(37,99,235,.22)}
.hero2 .ring.hero-ring,.pl-push .ring,.ring.hero-ring{background:conic-gradient(var(--blue) calc(var(--p)*1%),#dfe6f1 0)}
.bar i,.sys-bar i,.tm-plan i,.roster .p i{background:linear-gradient(90deg,var(--ink),var(--blue))}
.tab.on{border-bottom-color:var(--blue)}
.panel,.ov-stat,.stat,.pc2,.goal,.tbl-wrap{box-shadow:0 10px 26px -22px rgba(15,35,80,.45)}
.ov-stat{border-color:#d9e2f0;position:relative;overflow:hidden;transition:transform .12s var(--ease),box-shadow .12s,border-color .12s}
.ov-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--blue))}
.ov-stat:nth-child(6n+1){--c:#0d1321}.ov-stat:nth-child(6n+2){--c:#2563eb}.ov-stat:nth-child(6n+3){--c:#0d9488}.ov-stat:nth-child(6n+4){--c:#f07c2e}.ov-stat:nth-child(6n+5){--c:#0ea5e9}.ov-stat:nth-child(6n+6){--c:#16a34a}
.ov-stat:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 16px 30px -20px rgba(15,35,80,.6)}
.sb-nav a.on,.sb-nav button.on,.sb-settings.on,.sb-ptools a.on{background:linear-gradient(100deg,var(--ink),#1e3a8a)}
.sidebar{background:linear-gradient(180deg,#fff 0,#f6f8fc 100%)}
.sbp,#sbPlan>a,#sbPlan>div{background-image:linear-gradient(120deg,var(--ink),#1e3a8a)}
.pl-push{background:linear-gradient(115deg,#fff 55%,#eef4fe);box-shadow:inset 5px 0 0 var(--blue),0 10px 26px -22px rgba(15,35,80,.45)}
.btn.gold{background:linear-gradient(100deg,var(--ink),#1e3a8a);border-color:transparent;color:#fff}
.btn.gold:hover{filter:brightness(1.12)}
.ah .av,.av.lg{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(37,99,235,.35)}
.pc2.now{box-shadow:inset 0 3px 0 var(--blue),0 10px 26px -22px rgba(15,35,80,.45)}
.stat.kpi.hi{box-shadow:inset 0 3px 0 var(--blue),0 10px 26px -22px rgba(15,35,80,.45)}
.dcat small{text-wrap:balance}
/* licence map: every state code readable. Licensed = dark, resident state = blue, both with bold white codes; not licensed = cool grey */
.usmap path{fill:#dde3ec;stroke:#fff}
.usmap path.lic{fill:var(--ink)}
.usmap path.res{fill:#2563eb}
.usmap text{fill:#475467;font-weight:800}
.usmap text.lic,.usmap text.res{fill:#fff;font-weight:800}
.usmap .legend i.lg-lic{background:var(--ink)}.usmap .legend i.lg-res{background:#2563eb}.usmap .legend i.lg-none{background:#dde3ec}