/* Ported design tokens from the People & Growth Studio HTML app */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;}
body{font-family:'TT Norms',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#F2F1EC;color:#1A1A18;min-height:100vh;}
:root{
  --bg:#F2F1EC;--surface:#FFFFFF;--surface-2:#F8F7F3;--border:#E2E1DC;--border-2:#D0CFC9;
  --text:#1A1A18;--text-2:#6B6A65;--text-3:#A0A09A;--yellow:#FFD600;
  --radius:8px;--radius-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);}
a{color:inherit;text-decoration:none;}

/* topbar */
.topbar{position:sticky;top:0;z-index:100;background:var(--text);height:48px;display:flex;
  align-items:center;justify-content:space-between;padding:0 24px;gap:16px;}
.topbar-logo{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);}
.topbar-breadcrumb{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.5px;color:rgba(255,255,255,.5);min-width:0;flex:1;}
.bc-sep{color:rgba(255,255,255,.25);} .bc-active{color:rgba(255,255,255,.9);}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.tb-user{font-size:11px;color:rgba(255,255,255,.6);}
.tb-btn{font:inherit;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:5px 12px;border-radius:4px;border:1.5px solid rgba(255,255,255,.2);background:transparent;
  color:rgba(255,255,255,.7);cursor:pointer;transition:all .12s;}
.tb-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff;}
.tb-btn.active{background:var(--yellow);color:var(--text);border-color:var(--yellow);}

.page{padding:24px;max-width:1100px;margin:0 auto;}
.flash{max-width:1100px;margin:12px auto 0;padding:8px 14px;background:#FFF8CC;border:1px solid var(--yellow);
  border-radius:var(--radius);font-size:12px;}

/* directory / teams */
.home-section{margin-bottom:32px;}
.home-section-header{display:flex;align-items:center;margin-bottom:12px;padding-bottom:10px;
  border-bottom:1.5px solid var(--border);gap:10px;}
.track-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.track-name{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.track-count{font-size:11px;font-weight:600;color:var(--text-2);}
.team-view-link{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:4px;border:1.5px solid var(--border-2);color:var(--text-2);}
.team-view-link:hover{border-color:var(--text-2);color:var(--text);}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,220px));gap:8px;}
.person-card{background:var(--surface);border-radius:var(--radius);border:1.5px solid var(--border);
  padding:12px 14px;box-shadow:var(--shadow);transition:all .15s;display:block;}
.person-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.pc-name{font-size:13px;font-weight:700;margin-bottom:2px;}
.pc-meta{font-size:11px;color:var(--text-2);display:flex;gap:6px;align-items:center;}
.pc-track-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}

/* page head */
.page-head{margin-bottom:24px;}
.back-btn{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-2);}
.back-btn:hover{color:var(--text);}
.page-head h1{font-size:24px;font-weight:800;margin:8px 0;padding-left:12px;border-left:4px solid var(--text);}
.profile-meta{font-size:12px;color:var(--text-2);}
.readonly-tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:#B8860B;
  background:#FFF8CC;border:1px solid var(--yellow);border-radius:4px;padding:2px 8px;}
.langs{margin-top:8px;display:flex;gap:6px;}
.lang-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;border:1.5px solid var(--border-2);
  color:var(--text-3);} .lang-badge.on{background:var(--text);color:#fff;border-color:var(--text);}

/* score blocks */
.block{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow);}
.block h2{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-2);margin-bottom:14px;}
.group{margin-bottom:14px;}
.group-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;margin-bottom:6px;}
.score-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--border);}
.sr-label{flex:1;min-width:0;}
.sr-name{font-size:13px;font-weight:600;}
.sr-desc{display:block;font-size:11px;color:var(--text-3);line-height:1.35;}
.dots{display:flex;gap:6px;flex-shrink:0;}
.dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-2);display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-3);
  background:var(--surface-2);}
.dots.editable .dot{cursor:pointer;}
.dots.editable .dot:hover{border-color:var(--text-2);}
.dot.on{color:#fff;border-color:transparent;}
.dot.s1.on{background:#E0A800;} .dot.s2.on{background:#2A9D8F;} .dot.s3.on{background:#2A7A52;}

/* spider / radar charts */
.spiders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.spider-card{background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:14px;text-align:center;}
.spider-card canvas{width:100%;max-width:380px;height:auto;display:block;margin:0 auto;}
.sc-title{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.sc-sub{font-size:11px;color:var(--text-3);margin-bottom:6px;}

/* profile: chart left, scores right, facing each other */
.profile-split{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:28px;align-items:start;}
.ps-chart{position:sticky;top:64px;}
.ps-chart canvas{width:100%;max-width:360px;height:auto;display:block;margin:0 auto;}
.ps-scores{min-width:0;}
@media(max-width:760px){
  .profile-split{grid-template-columns:1fr;gap:12px;}
  .ps-chart{position:static;}
}

/* config */
.cfg-table{width:100%;border-collapse:collapse;font-size:13px;}
.cfg-table th,.cfg-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border);}
.cfg-key{font-weight:800;width:40px;}
.muted{font-size:12px;color:var(--text-2);} code{background:var(--surface-2);padding:1px 5px;border-radius:3px;}

/* login / 403 */
.login-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:40px;text-align:center;box-shadow:var(--shadow-md);max-width:360px;}
.login-logo{font-size:16px;font-weight:800;letter-spacing:3px;color:var(--text);}
.login-sub{font-size:13px;color:var(--text-2);margin:8px 0 24px;}
.login-btn{display:inline-block;background:var(--text);color:#fff;font-weight:700;font-size:13px;
  padding:11px 22px;border-radius:var(--radius);}
.login-btn:hover{background:#000;}
.login-note{font-size:11px;color:var(--text-3);margin-top:16px;}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--text);color:#fff;font-size:12px;font-weight:600;padding:10px 18px;border-radius:var(--radius);
  pointer-events:none;transition:all .2s;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}