:root{
  --ink:#1a1a18; --muted:#6a6660; --rule:#ddd8cf; --rule-hard:#c4bdb1;
  --bg:#fbfaf7; --panel:#fff; --accent:#2a4b6b; --accent-soft:#e8eef4;
  --drop:#b04a3f; --q1:#eef3f7; --q2:#c6d9e6; --q3:#8fb4cd; --q4:#4f83a8; --q5:#1f4d6e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:31px} h2{font-size:23px} h3{font-size:18px} h4{font-size:15px}
a{color:var(--accent)}
code{font-family:var(--mono);font-size:.88em;background:#f1efe9;padding:1px 4px;border-radius:3px}

header.site{border-bottom:1px solid var(--rule-hard);background:var(--panel);padding:26px 0 20px}
header.site h1{margin-bottom:2px}
.sub{color:var(--muted);margin:0 0 14px;font-size:14.5px}
.tabs{display:flex;gap:2px;margin-bottom:-21px}
.tabs a{font-size:14px;padding:8px 18px;text-decoration:none;color:var(--muted);
  border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;background:transparent}
.tabs a:hover{color:var(--ink);background:var(--surface-2,#f5f2ea)}
.tabs a.on{color:var(--ink);font-weight:600;background:var(--bg);
  border-color:var(--rule-hard);position:relative;top:1px}

.crumbs{padding:14px 28px 0;font-size:13px;color:var(--muted);min-height:18px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--rule-hard)}
.crumbs span.sep{margin:0 7px;color:var(--muted)}

main{padding:18px 28px 50px}
.loading{color:var(--muted)}

/* ---- controls ---- */
.controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:5px;margin-bottom:18px}
.controls input[type=search]{font:inherit;padding:7px 10px;border:1px solid var(--rule-hard);
  border-radius:4px;width:260px;background:#fff}
.yearbtns{display:flex;gap:0;border:1px solid var(--rule-hard);border-radius:4px;overflow:hidden}
.yearbtns button{font:inherit;font-size:13px;padding:6px 13px;border:0;border-right:1px solid var(--rule);
  background:#fff;cursor:pointer;color:var(--muted)}
.yearbtns button:last-child{border-right:0}
.yearbtns button.on{background:var(--accent);color:#fff;font-weight:600}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:auto}
.legend i{width:22px;height:12px;display:inline-block;border:1px solid rgba(0,0,0,.13)}

/* ---- ranked occupation list ---- */
.controls select{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--rule-hard);
  border-radius:4px;background:#fff;max-width:260px}

.listmeta{margin:0 0 10px}
.listmeta #count{font-size:13px;font-weight:600;color:var(--ink)}
.listmeta .cap{margin:2px 0 0;font-size:12px;text-align:left}

/* shared row geometry for header + rows */
.listhead,.row{display:flex;align-items:center;gap:12px;padding:0 12px}
.listhead .rk,.row .rk{flex:0 0 42px;text-align:right;font-family:var(--mono);font-size:12px;
  color:var(--muted)}
.listhead .nm,.row .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.listhead .gp,.row .gp{flex:0 0 210px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12px;color:var(--muted)}
.listhead .br,.row .br{flex:0 0 150px}
.listhead .sc,.row .sc{flex:0 0 58px;text-align:right;font-family:var(--mono);font-size:13px}

.list{background:var(--panel);border-bottom:1px solid var(--rule-hard)}
.listhead{position:sticky;top:0;z-index:2;background:var(--panel);
  border-bottom:1px solid var(--rule-hard);padding-top:8px;padding-bottom:6px;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.listhead .rk,.listhead .sc{font-family:var(--sans);font-size:11px}

.row{cursor:pointer;border-bottom:1px solid var(--rule);font-size:14px;height:30px}
.row:hover{background:var(--accent-soft)}
.row:hover .nm{text-decoration:underline;text-decoration-color:var(--rule-hard)}
.row .br i{display:block;height:11px;border-radius:1px;border:1px solid rgba(0,0,0,.1)}
.row .sc{font-weight:600}

.q1{background:var(--q1)}.q2{background:var(--q2)}.q3{background:var(--q3)}
.q4{background:var(--q4)}.q5{background:var(--q5)}

.tip{position:fixed;z-index:50;background:#26241f;color:#fff;padding:7px 10px;border-radius:4px;
  font-size:12.5px;line-height:1.4;pointer-events:none;max-width:270px;box-shadow:0 3px 12px rgba(0,0,0,.25)}
.tip b{font-weight:600}
.tip .n{font-family:var(--mono);color:#ffd9a0}

/* ---- detail pages ---- */
.head{border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.head .who h2{margin-bottom:3px}
.head .who p{margin:0;color:var(--muted);font-size:13px}
.bignums{display:flex;gap:26px;align-items:flex-end}
.bignum{text-align:right}
.bignum .v{font-family:var(--serif);font-size:27px;line-height:1}
.bignum .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.spark{display:block}

.note{background:var(--accent-soft);border-left:3px solid var(--accent);padding:11px 14px;
  border-radius:0 4px 4px 0;margin:16px 0;font-size:14px}
.note.warn{background:#fbf0ee;border-left-color:var(--drop)}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0 18px}
th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);border-bottom:1px solid var(--rule-hard);padding:6px 8px;white-space:nowrap}
td{padding:5px 8px;border-bottom:1px solid var(--rule)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:12.5px}
tr.dropped td{color:#9a948b}
tr.dropped td.ab::after{content:" dropped";font-size:10px;color:var(--drop);
  border:1px solid var(--drop);border-radius:2px;padding:0 3px;margin-left:6px;vertical-align:1px}
tr.nullrow td.ab::after{content:" no benchmark";font-size:10px;color:var(--muted);
  border:1px solid var(--rule-hard);border-radius:2px;padding:0 3px;margin-left:6px;vertical-align:1px}
tr.kept td.ab{font-weight:600}
tbody tr:hover{background:#f7f4ee}
td.ab a{text-decoration:none;border-bottom:1px solid var(--rule-hard)}
.bar{height:9px;background:var(--accent);border-radius:1px;display:inline-block;vertical-align:middle}
.bar.d{background:#cdc6bb}

.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;
  background:#efece5;color:var(--muted);border:1px solid var(--rule)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:12px;margin:12px 0 20px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:5px;padding:12px 14px}
.card h4{margin:0 0 5px;font-size:14px}
.card .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:2px 0;color:var(--muted)}
.card .kv b{font-family:var(--mono);color:var(--ink);font-weight:500}
.card a{cursor:pointer}

footer{border-top:1px solid var(--rule-hard);padding:24px 28px 40px;margin-top:20px;
  font-size:13px;color:var(--muted);background:var(--panel)}
footer h3{color:var(--ink)}
footer p{max-width:760px}
/* Secondary text: one shade (--muted) everywhere. --rule-hard is borders only. */
.meta,.cap{color:var(--muted)}
.meta{font-family:var(--mono);font-size:11.5px;line-height:1.5}
.cap{font-size:12.5px;line-height:1.5;margin:4px 0 12px}

@media (max-width:860px){
  .listhead .gp,.row .gp{display:none}
  .listhead .br,.row .br{flex:0 0 90px}
}
@media (max-width:640px){
  .wrap{padding:0 16px} main{padding:14px 16px 40px}
  .legend{margin-left:0} .head{flex-direction:column;align-items:flex-start}
  table{font-size:12.5px}
  .controls input[type=search],.controls select{width:100%;max-width:none}
  .listhead,.row{gap:8px;padding:0 6px}
  .listhead .rk,.row .rk{flex-basis:30px}
  .listhead .br,.row .br{flex:0 0 56px}
}


/* ---- methodology tab ---- */
.paper{max-width:820px}
.paper h2{font-size:26px;margin-bottom:6px}
.lede{font-size:15.5px;color:var(--muted);margin:0 0 26px;max-width:680px}

.step{margin:0 0 38px;padding-top:22px;border-top:1px solid var(--rule)}
.step:first-of-type{border-top:0;padding-top:0}
.step h3{font-size:19px;margin-bottom:12px}
.stepno{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);border-radius:3px;padding:2px 8px;margin-right:10px;
  vertical-align:2px}

.paper figure{margin:0;padding:16px 16px 12px;background:var(--panel);
  border:1px solid var(--rule);border-radius:5px}
.paper figcaption{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--rule)}
svg.fig{display:block;overflow:visible}
svg.fig .ft{font:600 12px var(--sans);fill:var(--ink)}
svg.fig .fl{font:11px var(--sans);fill:var(--muted)}
svg.fig .fv{font:11px var(--mono);fill:var(--ink)}
svg.fig .ax{stroke:var(--rule-hard);stroke-width:1}
svg.fig .dl{stroke:var(--rule);stroke-width:1}
svg.fig .mark{stroke:var(--drop);stroke-width:1.5;stroke-dasharray:3 3}

footer p{margin:0 0 6px}