/* Pew-Pew-Rankings v2 — shared shell for every tab */
:root{--bg:#0f1012;--bg2:#141618;--panel:#191c1f;--line:#25292e;--line2:#33383f;--ink:#f3f4f2;--ink2:#b9bec6;--ink3:#7d848e;--acc:#ff6a2b;--acc2:#ffa07a;--ok:#5fd38d;--warn:#ffcf5c;--hover:#1f2327;--chip:#22262b;--photo:#fff}
:root[data-theme="light"]{--bg:#f6f5f2;--bg2:#ffffff;--panel:#ffffff;--line:#e3e1dc;--line2:#cfcbc3;--ink:#17191c;--ink2:#4a5059;--ink3:#7c828b;--acc:#e8521a;--acc2:#b83d10;--ok:#1f8f4e;--warn:#9a6b00;--hover:#f0eeea;--chip:#edebe6;--photo:#fff}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--acc)}button{font:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:18px 16px 60px}

/* header: title row, one line, tabs */
.hd{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.hd-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
h1{font-family:"Inter Tight",Inter,sans-serif;font-weight:800;font-size:clamp(28px,4.5vw,40px);letter-spacing:-.03em;line-height:1;margin:0}
h1 em{font-style:normal;color:var(--acc)}
.sub{color:var(--ink2);margin:8px 0 0;max-width:820px;line-height:1.5;font-size:13.5px}.sub b{color:var(--ink)}
.tbtn{background:var(--chip);border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:13px;white-space:nowrap}
.tabs{display:flex;gap:6px;margin:12px 0 0;flex-wrap:wrap}
.tab{border:1px solid var(--line2);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink2);text-decoration:none}
.tab.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.tab:hover:not(.on){background:var(--hover);color:var(--ink)}

/* "how it works" drawer */
details.how{margin:0 0 12px}details.how summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink2);padding:6px 0}
details.how summary::-webkit-details-marker{display:none}
details.how summary::before{content:"▸";color:var(--acc);font-size:12px}details.how[open] summary::before{content:"▾"}
details.how summary .hsum{color:var(--ink3);font-size:12px}details.how summary .hsum b{color:var(--ink);font-weight:600}
.lens{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:8px 0 4px}
.lens div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--ink2);line-height:1.45}
.lens b{display:block;color:var(--ink);font-family:"Inter Tight";font-weight:700;font-size:14px;margin-bottom:3px}
.hnote{font-size:12px;color:var(--ink3);margin:8px 0 0;line-height:1.5}

/* control bar */
.ctl{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctl input,.ctl select{background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;min-height:38px}
.ctl input[type=search]{flex:1 1 220px;min-width:160px}.ctl select{max-width:100%}.ctl select#make{flex:0 1 230px;width:230px}
.sortl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase}
.sortl select{letter-spacing:0;text-transform:none}
.ib{background:var(--panel);border:1px solid var(--line2);color:var(--acc);border-radius:9px;min-width:38px;min-height:38px;cursor:pointer;font-size:12px}
.fbtn{background:var(--panel);border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:13px;min-height:38px}
.fbtn.on{border-color:var(--acc);color:var(--acc);font-weight:600}
.fpanel[hidden]{display:none}.fpanel{width:100%;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:8px 0 2px;border-top:1px dashed var(--line)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{border:1px solid var(--line2);background:transparent;color:var(--ink2);border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;min-height:34px}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}.chip:hover:not(.on){background:var(--hover);color:var(--ink)}
.tg{display:flex;align-items:center;gap:6px;color:var(--ink2);font-size:13px;cursor:pointer;user-select:none}.tg input{accent-color:var(--acc);width:16px;height:16px}
.rng{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.rng input,.rng select{letter-spacing:0;text-transform:none;min-height:34px;padding:6px 8px}.rng input[type=number]{width:88px}.rng input[type=date]{width:144px;color-scheme:dark}
:root[data-theme="light"] .rng input[type=date]{color-scheme:light}.rng.on{color:var(--acc)}.rng.on input{border-color:var(--acc)}
#mhs{font-size:12px;color:var(--ink3);margin-left:8px}#mhs.err{color:var(--warn)}
.count{font-size:13px;color:var(--ink3);margin:10px 2px 8px}.count b{color:var(--ink)}
.clear{background:none;border:none;color:var(--acc);cursor:pointer;font-size:13px;text-decoration:underline;padding:0 6px}

/* table */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg2);border:1px solid var(--line);border-radius:14px}
thead th{position:sticky;top:var(--ctl-h,60px);z-index:4;background:var(--bg2);color:var(--ink3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:10px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
thead th:first-child{border-top-left-radius:14px}thead th:last-child{border-top-right-radius:14px}
tbody td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
tbody tr:last-child td{border-bottom:0}

/* boxes below the table */
.box{margin-top:26px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.box h2{font-family:"Inter Tight";font-weight:800;font-size:18px;margin:0 0 4px}.box .sub{font-size:13px;margin:0 0 10px;color:var(--ink3)}
details.box{padding:0 18px}details.box summary{cursor:pointer;padding:14px 0;font-family:"Inter Tight";font-weight:700;font-size:16px;list-style:none}
details.box p{color:var(--ink2);font-size:13.5px;line-height:1.55;margin:0 0 12px}details.box p b{color:var(--ink)}
footer{margin-top:22px;font-size:12px;color:var(--ink3);line-height:1.6}footer a{color:var(--ink2)}
@media (max-width:860px){.ctl{position:static}.hd-row{align-items:flex-start}}