/* Uses the existing Ember palette, typography and page grid. */
.compat-hero-link{font:700 clamp(22px,2.5vw,36px)/1.5 var(--f-body);color:var(--ash);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:16px}
.compat-hero-link span{color:var(--gold)}
.compat-hero-link:hover{color:var(--gold)}
.compat-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px) auto;gap:16px;align-items:end;margin:0 0 24px}
.compat-tools label{display:block;font-size:13px;color:var(--ash-dim);margin-bottom:8px}
.compat-tools input,.compat-tools select,.compat-tools button{font:inherit;font-size:15px;min-height:48px;border:1px solid var(--line-2);border-radius:4px;background:var(--ink-2);color:var(--ash);padding:12px 14px;width:100%;min-width:0}
.compat-tools input::placeholder{color:var(--ash-dim)}
.compat-tools button{cursor:pointer;width:auto;color:var(--ash-dim)}
.compat-tools button:hover{border-color:var(--gold);color:var(--ash)}
.compat-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ash-dim);margin-bottom:16px}
.compat-meta p{margin:0}
.compat-head,.compat-game summary{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(105px,.75fr) minmax(0,1fr) minmax(0,1.1fr) 24px;gap:20px;align-items:center}
.compat-head{padding:14px 20px;font-size:12px;color:var(--ash-dim);border-bottom:1px solid var(--line-2)}
.compat-game{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--site-nav-height,80px) + 18px)}
.compat-game summary{cursor:pointer;list-style:none;padding:24px 20px;min-height:104px}
.compat-game summary::-webkit-details-marker{display:none}
.compat-game summary:hover{background:var(--ink-2)}
.compat-game[open]{background:var(--ink-2)}
.compat-game[open] summary{border-bottom:1px solid var(--line)}
.compat-name{min-width:0;display:grid;gap:6px}
.compat-name strong{font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.compat-name small,.compat-renderer,.compat-scope{font-size:13px;line-height:1.6;color:var(--ash-dim);overflow-wrap:anywhere}
.compat-status{font-size:12px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.compat-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.compat-status.play{color:var(--lime)}
.compat-status.issues{color:var(--gold)}
.compat-status.menu{color:var(--ash-dim)}
.compat-status.blocked{color:#ff9b83}
.compat-expand{font-size:21px;color:var(--ash-dim);text-align:center;transition:transform .2s}
.compat-game[open] .compat-expand{transform:rotate(45deg)}
.compat-detail{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;padding:28px 20px 32px}
.compat-detail>div:only-child{grid-column:1/-1;max-width:900px}
.compat-result{font-size:16px;line-height:1.8;margin:0 0 24px}
.compat-detail dl{margin:0}
.compat-detail dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;margin-top:15px;font-size:13px;line-height:1.85}
.compat-detail dt{color:var(--ash-dim)}
.compat-detail dd{margin:0;overflow-wrap:anywhere}
.compat-shot{margin:0;align-self:start}
.compat-shot img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.compat-shot figcaption{font-size:12px;color:var(--ash-dim);margin-top:10px}
.compat-permalink{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--gold);margin-top:15px}
.compat-empty{padding:48px 16px;text-align:center;border-bottom:1px solid var(--line);color:var(--ash-dim)}
.compat-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--line-2);padding-top:24px}
.compat-guide-grid h3{font-size:18px;font-weight:500;margin:0 0 12px}
.compat-guide-grid p{font-size:14px;line-height:1.9;color:var(--ash-dim);margin:0}
.compat-tools :focus-visible,.compat-game summary:focus-visible,.compat-permalink:focus-visible,.compat-hero-link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.compat-meta{scroll-margin-top:calc(var(--site-nav-height,80px) + 18px)}
.compat-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:28px 0 8px}
.compat-pager button{font:inherit;font-size:15px;min-height:44px;min-width:44px;padding:9px 16px;border:1px solid var(--line-2);border-radius:6px;background:var(--ink-2);color:var(--ash-dim);cursor:pointer;white-space:nowrap}
.compat-pager button:hover:not(:disabled){border-color:var(--gold);color:var(--ash)}
.compat-pager button[aria-current]{background:var(--gold);border-color:var(--gold);color:#170b04;font-weight:700;cursor:default}
.compat-pager button:disabled{opacity:.4;cursor:not-allowed}
.compat-pager span{color:var(--ash-dim);padding:0 4px}
.compat-pager :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:760px){
 .compat-tools{grid-template-columns:minmax(0,1fr) auto;gap:12px}.compat-tools>div:first-child{grid-column:1/-1}
 .compat-head{display:none}.compat-game summary{grid-template-columns:minmax(0,1fr) auto 20px;gap:8px 12px;padding:20px 4px}
 .compat-name{grid-column:1;grid-row:1}.compat-status{grid-column:2;grid-row:1}.compat-expand{grid-column:3;grid-row:1}
 .compat-renderer{grid-column:1;grid-row:2}.compat-scope{grid-column:1/-1;grid-row:3}
 .compat-detail{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 12px}.compat-detail dl>div{grid-template-columns:1fr;gap:2px}
 .compat-guide-grid{grid-template-columns:1fr;gap:28px}.compat-status{font-size:11px}.compat-meta{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.compat-expand{transition:none}}