/* MOCKUP 2026-10-23: unified results page (filters + categories) */
main:has(#bx){max-width:1360px;padding-top:12px}
.bx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bx-main{display:flex;gap:28px;align-items:flex-start}
.bx-side{flex:0 0 300px;position:sticky;top:10px;max-height:calc(100dvh - 20px);overflow:auto;background:#121641;border:1px solid #2b3175;border-radius:12px;padding:4px 14px 14px;scrollbar-width:thin}
.bx-res{flex:1;min-width:0}
.bx-res h1{margin:4px 0 6px;font-size:26px}
.bx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:1179px){.bx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bx-top{display:flex;gap:12px;align-items:center;margin:0 0 14px}
.bx-search{display:flex;gap:8px;flex:1;max-width:720px}
.bx-search input[type=search]{flex:1;min-width:0;font-size:16px;padding:10px 12px;margin:0}
.bx-mbtns,.bx-quick,.bx-sh-head,.bx-sh-foot,.bx-drill-open,.bx-drill{display:none}
.bx-rhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.bx-count{margin:0;font-size:15px}
.bx-sort{display:flex;gap:8px;align-items:center;font-size:13px;color:#aab}
.bx-sort select{width:auto;margin:0;padding:6px 8px}
.bx-sec{padding:12px 0;border-bottom:1px solid #2b3175}
.bx-sec h3,.bx-g summary{font-size:14px;margin:0 0 8px;font-weight:700;color:#fff}
.bx-hint,.bx-legend{font-size:12px;color:#99a;margin:6px 0 8px}
.bx-acc{display:flex;border:1px solid #3a418f;border-radius:10px;overflow:hidden}
.bx-acc a{flex:1;text-align:center;padding:9px 6px;color:#dde;font-weight:600;font-size:14px}
.bx-acc a.on{background:#7b3fe4;color:#fff}
.bx-acc a[data-locked]:not(.on){background:#191d52}
.bx-ac{font-weight:400;font-size:12px;opacity:.8}
.bx-tree{font-size:14px}
.bx-tree details>summary{list-style:none;cursor:pointer;position:relative}
.bx-tree details>summary::-webkit-details-marker{display:none}
.bx-tree details>summary::before{content:'›';position:absolute;left:2px;top:6px;color:#889;transition:transform .15s;font-size:15px}
.bx-tree details[open]>summary::before{transform:rotate(90deg)}
.bx-tk{padding-left:12px;border-left:1px solid #2b3175;margin-left:8px}
.bx-tn{display:flex;justify-content:space-between;gap:8px;padding:5px 6px 5px 16px;border-radius:6px;color:#dde;text-decoration:none}
.bx-tree>a.bx-tn{padding-left:6px}
.bx-tn:hover{background:#1d2260}
.bx-tn.on{background:#7b3fe4;color:#fff}
.bx-tn.zero{color:#5c6190;cursor:default}
.bx-tl{min-width:0}
.bx-n{white-space:nowrap;font-size:12px;color:#aab}
.bx-av{color:#7fe0a8;font-weight:700}
.bx-tn.on .bx-av{color:#d6ffe6}
.bx-lk{color:#8a8fb8}
.bx-dot{color:#556}
.bx-tn.zero .bx-av{color:#5c6190}
.bx-g{padding:10px 0;border-bottom:1px solid #2b3175}
.bx-g summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;margin:0}
.bx-g summary::after{content:'+';color:#889}
.bx-g[open] summary::after{content:'–'}
.bx-gb{padding-top:6px}
.bx-opt{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:14px;color:#dde;cursor:pointer}
.bx-opt input{width:auto;margin:0;accent-color:#7b3fe4}
.bx-ol{flex:1}
.bx-oc{font-size:12px;color:#99a}
.bx-opt.zero{color:#5c6190;cursor:default}
.bx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.bx-chip{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:20px;background:#2a2f7a;border:1px solid #4a51b0;color:#fff;font-size:13px;text-decoration:none}
.bx-chip:hover{background:#3a3fa0}
.bx-cx{font-size:11px;opacity:.8}
.bx-chip-clear{align-self:center;font-size:13px;margin-left:4px}
.bx-more{text-align:center;margin:22px 0}
.bx-up{margin-top:22px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-color:#d4a43a}
.bx-up p{margin:0}
.bx-empty{text-align:center}
.bx-sortsheet[hidden]{display:none}
/* ---------- tablet + mobile ---------- */
@media(max-width:999px){
 main:has(#bx){padding:0 14px 24px}
 .bx-top{position:sticky;top:0;z-index:30;flex-wrap:wrap;background:#0b0e2a;margin:0 -14px 12px;padding:10px 14px 8px;border-bottom:1px solid #2b3175}
 .bx-search{flex:1 1 100%;max-width:none}
 .bx-search .btn{display:none}
 .bx-mbtns{display:flex;gap:8px;flex:1 1 100%}
 .bx-mb{flex:1;padding:11px;border-radius:10px;border:1px solid #3a418f;background:#161a4a;color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
 .bx-quick{display:flex;gap:8px;overflow-x:auto;flex:1 1 100%;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .bx-quick::-webkit-scrollbar{display:none}
 .bx-q{flex:none;padding:8px 14px;border-radius:20px;border:1px solid #3a418f;color:#dde;font-size:14px;white-space:nowrap;text-decoration:none}
 .bx-q.on,.bx-q.freemium,.bx-q.premium{background:#2a2f7a;border-color:#7b3fe4;color:#fff}
 .bx-sort{display:none}
 .bx-res h1{font-size:22px}
 .bx-side{display:none;position:fixed;inset:0;z-index:100;max-height:none;border-radius:0;border:0;padding:0;background:#0b0e2a;overflow:hidden}
 body.bx-open .bx-side{display:block}
 body.bx-open{overflow:hidden}
 .bx-form{display:flex;flex-direction:column;height:100%}
 .bx-sh-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px;border-bottom:1px solid #2b3175;font-size:17px}
 .bx-sh-head>:last-child{justify-self:end}
 .bx-x,.bx-back{justify-self:start;background:none;border:0;color:#9fb4ff;font:inherit;font-size:16px;padding:6px 0;cursor:pointer}
 .bx-clear{font-size:15px}
 .bx-sh-body{flex:1;overflow:auto;padding:0 16px 20px}
 .bx-tree,.bx-sec#s-cat .bx-legend{display:none}
 .bx-sec#s-cat .bx-legend{display:block}
 .bx-drill-open{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 12px;border-radius:10px;background:#161a4a;border:1px solid #3a418f;color:#fff;font:inherit;font-size:16px;text-align:left;cursor:pointer}
 .bx-dl{display:block;font-size:12px;color:#99a}
 .bx-dv{display:block;font-weight:600}
 .bx-sec h3,.bx-g summary{font-size:16px}
 .bx-opt{padding:12px 4px;font-size:16px;border-bottom:1px solid #1b1f55}
 .bx-opt input{transform:scale(1.35)}
 .bx-acc a{padding:13px 6px;font-size:16px}
 .bx-sh-foot{display:block;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #2b3175;background:#0b0e2a}
 .bx-see{width:100%;font-size:17px;padding:15px}
 .bx-drill:not([hidden]){display:flex;flex-direction:column;position:absolute;inset:0;background:#0b0e2a;z-index:2}
 .bx-drill-list{flex:1;overflow:auto;padding:0 16px 20px}
 .bx-dr{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:15px 4px;border:0;border-bottom:1px solid #1b1f55;background:none;color:#fff;font:inherit;font-size:16px;text-align:left;cursor:pointer}
 .bx-dr.on{color:#c9b5ff;font-weight:700}
 .bx-dr.zero{color:#5c6190}
 .bx-dr .bx-n{font-size:13px}
 .bx-dr .bx-go{color:#889;font-size:20px;margin-left:6px}
 .bx-dr-all{font-weight:600}
 .bx-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .bx-chip{flex:none}
 .bx-sortsheet:not([hidden]){position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55);display:flex;align-items:flex-end}
 .bx-ss-box{width:100%;background:#0b0e2a;border-radius:16px 16px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
 .bx-ss-box .bx-sh-head{display:grid}
 .bx-sopt{display:block;padding:16px 20px;border-bottom:1px solid #1b1f55;color:#fff;font-size:16px}
 .bx-sopt.on{color:#c9b5ff;font-weight:700}
 .bx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media(max-width:640px){.bx-grid{grid-template-columns:1fr}}
.bx-av.bx-av0{color:#7d82ad;font-weight:500}
/* Smaller header on the results page on phones (approved 2026-10-23): logo icon and links on two short lines instead of four */
@media(max-width:640px){
body:has(#bx)>header{flex-wrap:nowrap;align-items:center;gap:10px;padding:6px 12px}
body:has(#bx)>header .lg-ico{height:30px;width:auto}
body:has(#bx)>header nav{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2px 12px;min-width:0}
body:has(#bx)>header nav a{font-size:14px;line-height:1.5;white-space:nowrap}
body:has(#bx)>header nav a.btn{padding:3px 10px;font-size:13.5px}
body:has(#bx)>header nav select{font-size:12.5px;padding:2px 4px;height:auto}
}