/* Collabocode HR — "Soft blocks": light only. Light grey canvas, white rounded panels,
   one blue accent. Categorical colours validated for colour-vision deficiency on white.
   Plus Jakarta Sans is self-hosted (CSP allows same-origin fonts only; OFL, see fonts/OFL.txt). */
@font-face{font-family:"Plus Jakarta Sans"; src:url("/static/fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap}
:root{
  --ground:#F3F4F6; --surface:#FFFFFF; --surface-2:#F8F9FB; --sunken:#ECEEF2;
  --ink:#1E2230; --ink-2:#4A5163; --muted:#6A7183; --faint:#9AA0AE;
  --rule:#E5E7EB; --rule-strong:#D1D5DB; --deep:#2456D6; --deep-wash:#E6EDFC; --on-deep:#FFFFFF;
  --cat1:#C4532D; --cat2:#1E8A6E; --cat3:#8A4FA3; --cat4:#B7791F; --neutral:#C3C8D1;
  --cat1-wash:#FBE9E2; --cat2-wash:#E2F3EC; --cat3-wash:#F2E8F6; --cat4-wash:#FBF0DC;
  --good:#1E7A4E; --warn:#B26B00; --crit:#C2303F; --info:#2456D6;
  --good-wash:#E3F3EA; --warn-wash:#FDF1DC; --crit-wash:#FCE6E8; --info-wash:#E6EDFC;
  --r-panel:14px; --r-ctl:10px;
  --shadow:0 1px 2px rgba(30,34,48,.04), 0 8px 24px -16px rgba(30,34,48,.16);
  --mono:ui-monospace,"SF Mono","SFMono-Regular","Menlo","Consolas","DejaVu Sans Mono",monospace;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; min-height:100vh}
a{color:var(--deep); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--deep); outline-offset:2px; border-radius:6px}
h1,h2,h3{letter-spacing:-.02em; line-height:1.2; font-weight:700; text-wrap:balance}
h1{font-size:clamp(28px,4.4vw,40px); letter-spacing:-.03em}
h2{font-size:21px; margin-bottom:6px}
h3{font-size:16px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.label{font-size:12.5px; font-weight:600; color:var(--muted)}

/* ---- chrome ---- */
.top{background:var(--surface); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:5}
.topin{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); margin-right:6px}
.brand:hover{text-decoration:none}
.brand i{width:10px; height:10px; border-radius:50%; background:var(--deep)}
.brand span{font-size:14px; font-weight:700; color:var(--ink)}
.brand b{font-size:14px; font-weight:500; color:var(--muted)}
.nav{display:flex; gap:4px; flex-wrap:wrap; margin-right:auto}
.nav a{font-size:14px; font-weight:600; color:var(--ink-2); padding:7px 12px; border-radius:var(--r-ctl)}
.nav a:hover{background:var(--surface-2); text-decoration:none}
.nav a.on{background:var(--deep-wash); color:var(--deep)}
.me{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2)}
.me form{display:inline}
.linkbtn{background:none; border:0; color:var(--deep); font:inherit; font-size:13.5px; cursor:pointer; padding:0}
.linkbtn:hover{text-decoration:underline}

.page{max-width:1180px; margin:0 auto; padding:30px 20px 90px}
.page.narrow{max-width:880px}
.head{display:flex; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; margin-bottom:26px}
.head > div:first-child{margin-right:auto; min-width:0}
.head .sub{color:var(--ink-2); margin-top:6px}
.crumb{font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; display:block}
section{margin-bottom:34px}
.sectionhead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.sectionhead h2{margin:0 auto 0 0}

/* ---- flashes ---- */
.flash{border-radius:var(--r-ctl); padding:11px 15px; margin-bottom:16px; font-size:14.5px; border:1px solid; background:var(--good-wash); border-color:var(--good)}
.flash.err{background:var(--crit-wash); border-color:var(--crit)}
.flash.warn{background:var(--warn-wash); border-color:var(--warn)}

/* ---- surfaces ---- */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-panel); box-shadow:var(--shadow)}
.card.stripe{border-left:4px solid var(--stripe,var(--deep))}
.pad{padding:20px 22px}
.grid{display:grid; gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

.tile{padding:17px 19px; display:flex; flex-direction:column; gap:3px; min-width:0}
.tile .v{font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums}
.tile .v small{font-size:15px; color:var(--muted); font-weight:600; letter-spacing:0}
.tile .d{font-size:13px; color:var(--muted)}

/* ---- pills ---- */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--rule); white-space:nowrap}
.pill.team,.pill.org{background:var(--cat1-wash); border-color:transparent; color:var(--ink)}
.pill.individual{background:var(--cat2-wash); border-color:transparent; color:var(--ink)}
.pill.unmarked{background:transparent}
.pill i{width:7px; height:7px; border-radius:50%; display:inline-block}
.pill.team i,.pill.org i{background:var(--cat1)} .pill.individual i{background:var(--cat2)} .pill.unmarked i{background:var(--neutral)}
.pill.good{background:var(--good-wash); border-color:transparent; color:var(--ink)}
.pill.warn{background:var(--warn-wash); border-color:transparent; color:var(--ink)}
.pill.info{background:var(--info-wash); border-color:transparent; color:var(--ink)}
.pill.crit{background:var(--crit-wash); border-color:transparent; color:var(--ink)}
.pill.role-admin{background:var(--cat3-wash); border-color:transparent; color:var(--ink)}
.pill.role-hr{background:var(--cat4-wash); border-color:transparent; color:var(--ink)}
.pill.role-lead{background:var(--deep-wash); border-color:transparent; color:var(--ink)}

/* ---- buttons & forms ---- */
.btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14px; font-weight:600; padding:9px 15px; border-radius:var(--r-ctl);
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--ink-2); background:var(--surface-2); text-decoration:none}
.btn.primary{background:var(--deep); border-color:var(--deep); color:var(--on-deep)}
.btn.primary:hover{filter:brightness(1.08); background:var(--deep)}
.btn.small{font-size:12.5px; padding:5px 10px}
.btn.danger{color:var(--crit); border-color:var(--crit)}
input[type=text],input[type=email],input[type=number],input[type=date],select,textarea{
  font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-ctl); padding:8px 11px; width:100%; min-width:0}
textarea{resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--deep); outline-offset:0; border-color:transparent}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field > span{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.field small{color:var(--muted); font-size:12.5px}
.check{display:flex; align-items:center; gap:8px; font-size:14.5px}
.check input{width:16px; height:16px; accent-color:var(--deep)}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px}
.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.inline select{width:auto}

/* ---- tables ---- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{font-size:12.5px; color:var(--muted); font-weight:600;
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); white-space:nowrap; background:var(--surface-2)}
.tbl td{padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--surface-2)}
.tbl .r{text-align:right}
.tbl .who{display:flex; flex-direction:column; min-width:0}
.tbl .who b{font-weight:650}
.tbl .who span{font-size:12.5px; color:var(--muted)}
.tbl tr.off td{opacity:.55}

/* ---- meters: score 0-120 with a tick at 100 ---- */
.meter{position:relative; height:8px; background:var(--sunken); border-radius:999px; min-width:70px}
.meter > i{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--deep)}
.meter > b{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); opacity:.55; border-radius:1px}
.meter.progress > i{background:var(--cat2)}

/* stacked weight bar: team / individual / not stated, 2px surface gaps */
.stack{display:flex; height:10px; gap:2px; border-radius:4px; overflow:hidden; min-width:80px}
.stack i{display:block; height:100%}
.stack .t{background:var(--cat1)} .stack .i{background:var(--cat2)} .stack .u{background:var(--neutral)}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:2px; display:inline-block}

/* ---- histogram ---- */
.hist{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; align-items:end; height:170px; padding-top:18px}
.hist .col{display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; height:100%; gap:5px; position:relative}
.hist .bar{background:var(--deep); border-radius:6px 6px 0 0; min-height:2px}
.hist .bar.zero{background:var(--rule)}
.hist .n{font-size:12px; font-weight:700; text-align:center; color:var(--ink)}
.hist .x{font-size:11.5px; color:var(--muted); text-align:center; border-top:1px solid var(--rule-strong); padding-top:5px}
.hist .col:hover .bar{filter:brightness(1.1)}

/* ---- attention list ---- */
.attn{display:flex; flex-direction:column}
.attn li{list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:13px 18px; border-bottom:1px solid var(--rule)}
.attn li:last-child{border-bottom:0}
.attn .dot{width:9px; height:9px; border-radius:50%; margin-top:7px}
.attn .dot.warn{background:var(--warn)} .attn .dot.crit{background:var(--crit)} .attn .dot.info{background:var(--info)}
.attn b{font-weight:650; display:block}
.attn span{font-size:13.5px; color:var(--muted)}

/* ---- scorecard ---- */
.hero{margin-bottom:24px}
.hero .facts{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tabs a{font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--rule-strong); color:var(--ink-2); background:var(--surface)}
.tabs a.on{background:var(--deep); border-color:var(--deep); color:var(--on-deep)}
.tabs a:hover{text-decoration:none; border-color:var(--ink)}
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1px; background:var(--rule); border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--rule); margin-bottom:22px}
.summary > div{background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:6px; min-width:0}
.summary .v{font-size:26px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.summary .d{font-size:12.5px; color:var(--muted); line-height:1.4}
.notice{border-radius:var(--r-ctl); padding:12px 16px; font-size:14px; margin-bottom:18px; background:var(--info-wash); border:1px solid var(--info)}
.notice.warn{background:var(--warn-wash); border-color:var(--warn)}

.kra{padding:0; overflow:hidden; margin-bottom:12px}
.kra .kh{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:14px; padding:17px 20px 12px; align-items:start}
.kra .no{font-size:13px; font-weight:700; color:var(--deep); padding-top:2px}
.kra .kn{font-weight:700; font-size:16.5px; letter-spacing:-.01em; line-height:1.35}
.kra .kt{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.kra .w{text-align:right}
.kra .w .num{font-size:22px; font-weight:700; letter-spacing:-.02em; display:block; line-height:1.1}
.kra .body{padding:0 20px 16px 68px}
.target{white-space:pre-line; font-size:14px; color:var(--ink-2); line-height:1.6; background:var(--surface-2); border-radius:var(--r-ctl); padding:12px 14px; border:1px solid var(--rule)}
.target.empty{color:var(--muted); font-style:italic}
.target.clamp{max-height:9.6em; overflow:hidden; position:relative}
details.more > summary{cursor:pointer; font-size:13px; color:var(--deep); margin-top:6px; list-style:none}
details.more > summary::-webkit-details-marker{display:none}
details.more[open] > summary{display:none}
.result{display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:12px 18px; margin-top:14px; align-items:center}
.result .sc{display:flex; flex-direction:column; gap:6px}
.result .sc .num{font-size:19px; font-weight:700; text-align:right}
.result .sc .num small{font-size:12px; color:var(--muted); font-weight:600}
.said{font-size:14px; color:var(--ink-2)}
.said b{font-size:12px; font-weight:600; color:var(--muted); display:block; margin-bottom:2px}
.by{font-size:12px; color:var(--faint); margin-top:4px}
.editrow{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule-strong)}
.selfnote{margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule-strong)}
.savebar{position:sticky; bottom:0; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-panel); box-shadow:var(--shadow); padding:12px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.savebar .muted{margin-right:auto; font-size:13.5px}

/* ---- login ---- */
.loginwrap{min-height:calc(100vh - 60px); display:grid; place-items:center; padding:30px 20px}
.login{max-width:420px; width:100%; padding:34px 32px; text-align:left}
.login h1{font-size:30px; margin:10px 0 8px}
.login p{color:var(--ink-2); font-size:15px}
.login .providers{display:flex; flex-direction:column; gap:10px; margin-top:24px}
.login .btn{justify-content:center; padding:11px 16px; font-size:15px}
.login .foot{margin-top:22px; font-size:12.5px; color:var(--muted)}
.dev{margin-top:22px; padding-top:18px; border-top:1px dashed var(--rule-strong)}

.empty{padding:40px 24px; text-align:center; color:var(--muted)}
.empty h3{color:var(--ink); margin-bottom:6px}

.kraedit{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:18px 20px; border-bottom:1px solid var(--rule)}
.kraedit:last-child{border-bottom:0}
.kraedit .no{font-weight:700; color:var(--deep); padding-top:8px}
.kraedit .row2{display:grid; grid-template-columns:minmax(0,1fr) 110px 170px auto; gap:10px; align-items:end}

@media (max-width:640px){
  .page{padding:22px 16px 80px}
  .topin{padding:10px 16px; gap:10px}
  .kra .kh{grid-template-columns:26px minmax(0,1fr); padding:15px 16px 10px}
  .kra .w{grid-column:2; text-align:left; display:flex; gap:8px; align-items:baseline}
  .kra .w .num{display:inline; font-size:17px}
  .kra .body{padding:0 16px 14px}
  .result,.editrow{grid-template-columns:minmax(0,1fr)}
  .kraedit{grid-template-columns:minmax(0,1fr); padding:16px}
  .kraedit .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hide-sm{display:none}
}

.demobar{background:var(--warn); color:#fff; text-align:center; font-size:13px; font-weight:600; padding:6px 16px}

/* ---- reporting lines ---- */
.org .root{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--rule)}
.org .root b{font-size:16px}
.org .subtrees{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:14px 22px}
.org + .org{margin-top:22px}
.tree,.tree ul{list-style:none; margin:0; padding:0}
.tree ul{margin:2px 0 0 7px; padding-left:14px; border-left:1px solid var(--rule-strong)}
.tree li{padding:3px 0}
.tree .node{display:flex; gap:4px 8px; align-items:baseline; flex-wrap:wrap; font-size:14px}
.tree .node > a{font-weight:650}
.tree .node .t{color:var(--muted); font-size:12.5px}
.tree .node .pill{font-size:9.5px; padding:1px 6px}
.leadsel{min-width:150px; font-size:13.5px; padding:5px 8px}

/* ---- overview / ladders / market / pay ---- */
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.draftbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--cat4-wash); border:1px solid #EBD3A6; border-radius:var(--r-ctl); padding:10px 14px; margin-bottom:18px; font-size:14px}
.draftbar.official{background:var(--good-wash); border-color:#BFE0CC}
.draftbar form{margin-left:auto}
.gc1{--gc:var(--deep)} .gc2{--gc:var(--cat1)} .gc3{--gc:var(--cat2)} .gc4{--gc:var(--cat3)} .gc5{--gc:var(--cat4)}

.lgridwrap{overflow:auto; max-height:78vh; border-radius:var(--r-panel)}
table.lgrid{border-collapse:separate; border-spacing:0; font-size:13px}
.lgrid th,.lgrid td{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); vertical-align:top; text-align:left}
.lgrid thead th{position:sticky; background:var(--surface); z-index:2}
.lgrid thead tr:first-child th{top:0; font-size:12px; font-weight:600; color:var(--muted); padding:10px 12px 4px; border-bottom:0; border-top:4px solid var(--gc,transparent)}
.lgrid thead tr:nth-child(2) th{top:33px; font-size:13.5px; font-weight:700; padding:4px 12px 10px; border-bottom:1px solid var(--rule-strong)}
.lgrid th.rowh{position:sticky; left:0; background:var(--surface); z-index:1; min-width:170px; max-width:190px; padding:12px; border-right:1px solid var(--rule-strong)}
.lgrid thead th.rowh{z-index:3; border-top-color:transparent}
.lgrid th.rowh b{display:block; font-size:15px; line-height:1.25}
.lgrid th.rowh .yr{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:3px}
.lgrid td{min-width:240px; max-width:280px; padding:10px 12px; white-space:pre-wrap; line-height:1.5}
.lgrid td.todo{background:var(--surface-2); color:var(--faint); font-style:italic}
.lv{display:inline-block; font-size:12px; font-weight:700; color:var(--deep); background:var(--deep-wash); padding:2px 9px; border-radius:999px; margin-bottom:6px}
.lv.m{color:var(--cat3); background:var(--cat3-wash)}

.comp{display:grid; grid-template-columns:200px minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--rule)}
.comp:last-child{border-bottom:0}
.comp > div{padding:14px 16px; white-space:pre-wrap; font-size:14px; line-height:1.55; min-width:0}
.comp > div:first-child{border-left:4px solid var(--gc,var(--deep)); white-space:normal}
.comp > div:first-child b{display:block; font-size:15px; line-height:1.3}
.comp > div:first-child span{font-size:12px; font-weight:600; color:var(--gc,var(--muted))}
.comp .now{background:var(--deep-wash)}
.comp .todo{color:var(--faint); font-style:italic}
.comp.head > div{font-size:12.5px; font-weight:700; color:var(--muted); padding-top:12px; padding-bottom:12px; border-left-color:transparent}
@media (max-width:760px){.comp{grid-template-columns:1fr}.comp > div:first-child{border-left-width:4px}}

.rng{position:relative; height:12px; background:var(--sunken); border-radius:999px; min-width:120px}
.rng .band{position:absolute; top:0; bottom:0; background:#C9D7F6; border-radius:999px}
.rng .med{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--deep); border-radius:1px}
.rng .you{position:absolute; top:-4px; width:12px; height:20px; margin-left:-6px; border-radius:6px; background:var(--ink); border:2px solid var(--surface)}
.rng .you.low{background:var(--crit)} .rng .you.ok{background:var(--good)}
.hbar{display:flex; align-items:center; gap:8px}
.hbar i{display:block; height:10px; border-radius:999px; background:var(--deep)}
.mix{display:flex; height:8px; gap:2px; width:110px; border-radius:999px; overflow:hidden}
.mix i{display:block; height:100%}
.cntry{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:0}
.c-ID{background:#C4532D} .c-SG{background:#2456D6} .c-VN{background:#B7791F} .c-JP{background:#1E8A6E}
.tbl td.num,.tbl th.num{text-align:right; white-space:nowrap}
.tbl .sub{display:block; font-size:12px; color:var(--muted)}
.segnav{display:inline-flex; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-ctl); padding:3px; gap:2px; flex-wrap:wrap}
.segnav a{font-size:13px; font-weight:600; color:var(--ink-2); padding:6px 12px; border-radius:8px}
.segnav a:hover{background:var(--surface-2); text-decoration:none}
.segnav a.on{background:var(--deep); color:var(--on-deep)}
.matrix td.num{min-width:38px}
.matrix td.zero{color:var(--faint)}
.foot-note{font-size:12.5px; color:var(--muted); margin-top:10px}

/* ---- KRA flow ---- */
.todo{border-left:4px solid var(--deep); padding:12px 16px; margin-bottom:18px}
.todo h3{font-size:14px; margin-bottom:6px}
.todo ul{list-style:none}
.todo li{display:flex; gap:10px; align-items:baseline; padding:5px 0; border-top:1px solid var(--rule); font-size:14px}
.todo li:first-child{border-top:0}
.todo li a{margin-right:auto}
.todo .due{font-size:12.5px; color:var(--muted); white-space:nowrap}
.todo .due.late{color:var(--crit); font-weight:700}
.stepper{display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 18px}
.stepper span{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--rule); color:var(--muted)}
.stepper span.done{background:var(--good-wash); border-color:transparent; color:var(--good)}
.stepper span.now{background:var(--deep); border-color:var(--deep); color:var(--on-deep)}
.checks{display:grid; gap:6px; margin:10px 0}
.check{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13.5px; padding:8px 12px; border-radius:var(--r-ctl); background:var(--surface-2); border:1px solid var(--rule)}
.check b.ok{color:var(--good)} .check b.fix{color:var(--crit)}
.check span.d{color:var(--muted); font-size:12.5px}
.flowbox{margin-bottom:18px}
.flowbox h2{font-size:18px; margin-bottom:8px}
.flowbox .actions{margin-top:10px}
.log li{list-style:none; padding:8px 0; border-top:1px solid var(--rule); font-size:13.5px}
.log li:first-child{border-top:0}
.log .meta{font-size:12px; color:var(--muted)}
.vers{font-size:12.5px; color:var(--muted); margin-top:6px}
.vers summary{cursor:pointer; color:var(--deep)}
.kra.inactive{opacity:.6}
.grid-states{width:100%; border-collapse:collapse; font-size:13px}
.grid-states th,.grid-states td{padding:8px 10px; border-bottom:1px solid var(--rule); text-align:center}
.grid-states th:first-child,.grid-states td:first-child{text-align:left}
.grid-states td a{font-weight:700}
.ratingbig{font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1}
.krarow{border:1px solid var(--rule); border-radius:var(--r-ctl); padding:12px 14px; margin-bottom:10px; background:var(--surface)}
.krarow .formgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
textarea.copy{font-family:var(--mono); font-size:12.5px; min-height:120px}

/* market: three benchmark lanes per level */
.lanekey{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:6px; color:var(--ink-2)}
.lanekey i{display:inline-block; width:14px; height:8px; border-radius:4px; margin-right:6px; vertical-align:middle}
.k-excl{background:var(--deep)} .k-all{background:var(--cat3)} .k-mp{background:var(--cat1)} .lanekey i.k-ours{background:var(--ink); width:8px}
.levelrow{display:grid; grid-template-columns:minmax(150px, 220px) 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--rule)}
.levelname{font-size:14px; font-weight:600}
.levelname .sub{display:block; font-weight:400; font-size:12px; color:var(--muted)}
.lanes{display:grid; grid-template-columns:96px 1fr 150px; gap:6px 10px; align-items:center}
.lanelabel{font-size:12px; color:var(--ink-2)}
.lanev{font-size:13px; text-align:right; font-variant-numeric:tabular-nums}
.lanev .sub{display:block; font-size:11px; color:var(--muted)}
.lanenone{font-size:12px; color:var(--faint)}
.rng.lane-levels_excl .band{background:#C9D7F6} .rng.lane-levels_excl .med{background:var(--deep)}
.rng.lane-levels_all .band{background:#E2CFEA} .rng.lane-levels_all .med{background:var(--cat3)}
.rng.lane-michael_page .band{background:#F3CDBF} .rng.lane-michael_page .med{background:var(--cat1)}
.rng.lane-ours{background:transparent; border-top:1px dashed var(--rule-strong); border-radius:0; height:12px; margin-top:6px}
.rng .dot{position:absolute; top:-7px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--ink); border:2px solid var(--surface)}
@media (max-width:640px){ .levelrow{grid-template-columns:1fr; gap:8px} .lanes{grid-template-columns:70px 1fr 112px} }
.lanev .range{white-space:nowrap; color:var(--ink-2)} .lanev .range b{color:var(--ink)}
@media (max-width:640px){ .lanev .range{font-size:11.5px} }

/* market: abroad by level */
.tbl.abroad td{vertical-align:top}
.tbl.abroad td:first-child{white-space:nowrap; min-width:170px}
.tbl.abroad .big{font-weight:700; font-size:15px}
.tbl.abroad .mult{display:inline-block; margin-left:6px; font-size:12px; font-weight:600; color:var(--muted)}
.tbl.abroad .mult.up{color:var(--good)} .tbl.abroad .mult.down{color:var(--crit)}
.tbl.abroad .sub{display:block; white-space:nowrap}
.tbl.abroad th .sub{font-weight:400}
details.foot-note summary{cursor:pointer; color:var(--ink-2)}
details.foot-note p{margin:6px 0 0}

/* pay: market position */
.pos-lower-end{color:var(--warn)} .pos-upper-end{color:var(--info)}
.tbl tfoot td{border-top:2px solid var(--rule-strong); background:var(--surface-2)}

/* HR: pages inside the current group */
.subtabs{display:flex; gap:4px 18px; flex-wrap:wrap; margin:-6px 0 20px; padding:0 4px; border-bottom:1px solid var(--rule)}
.subtabs a{font-size:13px; font-weight:600; color:var(--muted); padding:8px 0; border-bottom:2px solid transparent; margin-bottom:-1px}
.subtabs a.on{color:var(--deep); border-bottom-color:var(--deep)}
.subtabs a:hover{text-decoration:none; color:var(--ink)}

/* main menu: pages of the current group */
.subnav{border-top:1px solid var(--rule)}
.subnavin{max-width:1180px; margin:0 auto; padding:0 20px; display:flex; gap:4px 20px; flex-wrap:wrap}
.subnav a{font-size:13.5px; font-weight:600; color:var(--muted); padding:9px 0; border-bottom:2px solid transparent}
.subnav a.on{color:var(--deep); border-bottom-color:var(--deep)}
.subnav a:hover{text-decoration:none; color:var(--ink)}
@media (max-width:640px){ .subnavin{padding:0 16px; gap:4px 16px} }

/* HR: benefit usage */
.tbl.usage td{vertical-align:top; min-width:150px}
.tbl.usage .meter{height:6px; background:var(--sunken); border-radius:999px; overflow:hidden; margin:2px 0 6px; max-width:160px}
.tbl.usage .meter i{display:block; height:100%; background:var(--cat2)}
.tbl.usage .meter.over i{background:var(--crit)}
.tbl.usage .sub{display:block}

/* ladders: scope line and drafted cells */
.lgrid .rowh .scope{display:block; margin-top:6px; font-size:12px; font-weight:500; color:var(--ink-2); line-height:1.35}
.lgrid td.drafted{background:var(--warn-wash)}
.lgrid .draftmark{display:inline-block; margin-bottom:6px; font-size:11px}

/* ladder review: one level at a time, Excel vs now */
.levelpick{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.levelpick a{display:flex; flex-direction:column; min-width:92px; padding:8px 12px; border:1px solid var(--rule-strong); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink-2); font-size:12px}
.levelpick a b{font-size:14px; color:var(--ink)}
.levelpick a.on{border-color:var(--deep); background:var(--deep-wash)}
.levelpick a:hover{text-decoration:none; border-color:var(--ink)}
.levelhead .lvtitle{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.levelhead h2{margin:0}
.scopeline{margin:8px 0; font-weight:600; color:var(--ink-2)}
.reviewbar{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px}
.reviewbar .btn{margin-left:4px}
.rcell .rhead{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px}
.rcell h3{margin:2px 0 0}
.rtext{font-size:14px; line-height:1.55; color:var(--ink)}
.rcell.status-draft{border-left:4px solid var(--warn); border-radius:0 var(--r-panel) var(--r-panel) 0}
.pill.st-same{background:var(--surface-2)}
.pill.st-draft{background:var(--warn-wash)}

/* ladder page: one level, competencies stacked */
.levelpick a .you{font-size:11px; font-weight:600; color:var(--deep)}
.compblock{padding:14px 0; border-top:1px solid var(--rule)}
.compblock:first-of-type{border-top:0}
.compblock h3{margin:0 0 6px; font-size:15px}

/* ladder text as lists */
.pts{margin:0; padding-left:20px}
.pts > li{margin:0 0 6px; padding-left:2px}
.pts > li::marker{color:var(--faint)}
.pts ul{margin:4px 0 0; padding-left:18px}
.pts ul li{margin:2px 0}
.pts li.note{list-style:none; margin-left:-20px; margin-top:8px; font-size:12.5px; color:var(--muted); font-style:italic}

/* ladder examples */
.egs{margin-top:8px; padding:8px 12px; background:var(--surface-2); border-radius:var(--r-ctl); font-size:13px; color:var(--ink-2)}
.egs > span{display:block; font-size:11.5px; font-weight:600; color:var(--muted); text-transform:none; margin-bottom:2px}
.egs ul{margin:0; padding-left:18px}
.egs li{margin:2px 0}

/* KRA library */
.kradef{display:grid; grid-template-columns:110px 1fr; gap:6px 12px; margin:6px 0 0; font-size:14px}
.kradef dt{color:var(--muted); font-size:12.5px; font-weight:600; padding-top:2px}
.kradef dd{margin:0; color:var(--ink)}
mark.ph{background:var(--warn-wash); color:var(--ink); padding:0 3px; border-radius:4px}
.libpick{border-top:1px solid var(--rule); padding:10px 0; display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.libpick:first-of-type{border-top:0}
@media (max-width:640px){ .kradef{grid-template-columns:1fr} }

/* goals */
.goalgroup .goal{padding:10px 0}
.goal.sub{margin-left:18px; padding-left:14px; border-left:3px solid var(--rule-strong); margin-top:8px}
.goal h3{margin:2px 0 0}
.goalnums{display:flex; flex-wrap:wrap; gap:4px 18px; margin:8px 0 6px; color:var(--ink-2)}
.goal .meter{height:6px; background:var(--sunken); border-radius:999px; overflow:hidden}
.goal .meter i{display:block; height:100%; background:var(--cat2)}
.pill.st-on_track, .pill.st-done{background:var(--good-wash)} .pill.st-at_risk{background:var(--warn-wash)}
.pill.st-off_track, .pill.st-missed{background:var(--crit-wash)}