:root { --bg:#0b1016; --panel:#121a23; --panel-2:#18222e; --text:#e8edf2; --muted:#9aa8b7; --line:#2b3744; --accent:#78d9b1; --warning:#f8c66c; --risk:#ef8c88; --link:#8ec9ff; --font:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:13px; line-height:1.55; } .shell { width:min(1720px, calc(100% - 40px)); margin:0 auto; padding:42px 0 28px; } .topbar { border-bottom:1px solid var(--line); padding-bottom:28px; display:flex; justify-content:space-between; gap:32px; align-items:end; } .kicker { color:var(--accent); font-size:11px; letter-spacing:.08em; margin:0 0 10px; } h1 { margin:0; font-size:32px; letter-spacing:-1.5px; } h2 { font-size:14px; margin:0 0 8px; color:var(--text); } .subtitle { max-width:890px; color:var(--muted); margin:10px 0 0; } .dataset-status { display:flex; align-items:baseline; gap:8px; color:var(--muted); white-space:nowrap; } .dataset-status b { color:var(--accent); font-size:31px; } .methodology { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0; } .methodology div { background:var(--panel); padding:14px; display:grid; gap:5px; } .methodology b { color:var(--accent); font-size:11px; text-transform:uppercase; } .methodology span, .research-notes p { color:var(--muted); font-size:12px; } .research-notes { background:var(--panel); border:1px solid var(--line); padding:17px; margin-bottom:22px; } .research-notes p { max-width:1250px; margin:0; } .source-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; } a { color:var(--link); } .source-links a, #clear-filters { border:1px solid var(--line); background:var(--bg); padding:5px 8px; text-decoration:none; font-size:11px; } .controls { display:grid; grid-template-columns:2fr repeat(4, 1fr) auto; gap:10px; align-items:end; padding:14px; background:var(--panel); border:1px solid var(--line); } label { display:grid; gap:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; } input, select, button { background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:0; min-height:34px; padding:7px 9px; font:12px var(--font); } input:focus, select:focus { outline:1px solid var(--accent); border-color:var(--accent); } button { cursor:pointer; color:var(--muted); } button:hover { color:var(--text); border-color:var(--accent); } .table-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; padding:14px 0 8px; } .table-wrap { overflow:auto; border:1px solid var(--line); max-height:65vh; } table { width:100%; min-width:1600px; border-collapse:collapse; background:var(--panel); } th { position:sticky; top:0; background:var(--panel-2); color:var(--accent); font-size:10px; letter-spacing:.05em; text-transform:uppercase; z-index:1; } th button { border:0; background:transparent; color:var(--accent); min-height:0; padding:0; text-align:left; font-size:10px; letter-spacing:.05em; text-transform:uppercase; } th button:hover { color:var(--text); } th, td { text-align:left; border-bottom:1px solid var(--line); padding:11px 10px; vertical-align:top; } td { color:#c5d0db; font-size:11px; } tbody tr:hover { background:#1a2632; } td:nth-child(1) { color:var(--muted); width:35px; } td:nth-child(2) { min-width:140px; color:var(--text); } td:nth-child(3), td:nth-child(6), td:nth-child(7), td:nth-child(8), td:nth-child(9) { white-space:nowrap; } td:nth-child(4) { min-width:110px; } td:nth-child(5) { min-width:220px; } td:nth-child(10) { min-width:250px; } .tag { display:inline-block; border:1px solid var(--line); padding:2px 5px; font-size:10px; } .tag-extensive-history, .tag-top, .tag-favorable { color:var(--accent); border-color:#356451; } .tag-established-history, .tag-high, .tag-mixed { color:var(--warning); border-color:#735d32; } .tag-confirm-per-role, .tag-competitive, .tag-verify { color:var(--muted); } .tag-intensity-risk { color:var(--risk); border-color:#7b4041; } .compensation { color:#d7e4f1; white-space:nowrap; } .jobs-link { font-size:11px; white-space:nowrap; } .verification-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; } .verification-grid article { background:var(--panel); border:1px solid var(--line); padding:16px; } ol { padding-left:18px; margin:0; color:var(--muted); font-size:12px; } li { margin:6px 0; } footer { color:var(--muted); border-top:1px solid var(--line); padding-top:16px; font-size:10px; } @media (max-width:1000px) { .topbar, .methodology, .verification-grid { grid-template-columns:1fr; display:grid; } .controls { grid-template-columns:repeat(2,1fr); } .search-control { grid-column:span 2; } } @media (max-width:600px) { .shell { width:min(100% - 24px, 1720px); padding-top:24px; } h1 { font-size:26px; } .controls { grid-template-columns:1fr; } .search-control { grid-column:auto; } .table-meta { display:grid; gap:5px; } }