/* Hardware_OSDR_review page additions on top of the shared CoSE theme.css tokens.
   No CoSE navigation rail: theme.js / sites.js are not loaded on this page. */
body{background:var(--bg)}
header .wrap{padding-top:64px}
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.note{color:var(--muted);font-size:.86rem;margin-top:8px}
.h3{margin:30px 0 6px;font-size:1.08rem}
figure.narrow img{max-width:640px;margin:0 auto;display:block}
figure img{max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tables: scroll inside their own box, never the page */
.tbl{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:10px}
.tbl table{margin:0;min-width:560px}
.tbl.tall{max-height:640px;overflow-y:auto}
.tbl thead th{position:sticky;top:0;background:var(--card);z-index:1}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td small{color:var(--muted);display:block;font-size:.78rem;margin-top:2px}
pre{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  overflow-x:auto;font-size:.84rem;margin-top:16px}

/* tier badge: the letter is always shown, the fill only reinforces it */
.tier{display:inline-block;min-width:1.7em;text-align:center;padding:1px 6px;border-radius:6px;
  font-weight:700;font-size:.82rem;border:1px solid var(--line);color:var(--fg)}
.tier-A{background:var(--accent2);border-color:var(--accent2);color:#fff}
.tier-B{border-color:var(--accent);color:var(--accent)}
.tier-C{color:var(--muted)}

/* explorer: this one section is wider than the reading column */
#explorer .wrap{max-width:1180px}
.xctl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin-top:14px}
.xctl label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
.xctl label.xchk{flex-direction:row;align-items:center;gap:6px;color:var(--fg);font-size:.88rem;padding-bottom:7px}
.xctl input[type=search],.xctl select{font:inherit;font-size:.9rem;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.xsearch{flex:1 1 260px}
.xsearch input{width:100%}
.xcount{color:var(--muted);font-size:.86rem;margin-top:10px}
#xtable th button{all:unset;cursor:pointer;color:var(--muted);font-weight:600}
#xtable th button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
#xtable th button[aria-sort=ascending]::after{content:" ▲";font-size:.7em}
#xtable th button[aria-sort=descending]::after{content:" ▼";font-size:.7em}
#xtable td{vertical-align:top;font-size:.86rem}
#xtable td:first-child{min-width:200px;font-weight:600}
.bar{display:inline-block;vertical-align:middle;width:56px;height:6px;border-radius:3px;
  background:var(--line);margin-left:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.chip{display:inline-block;font-size:.74rem;padding:1px 7px;border-radius:999px;border:1px solid var(--line);
  margin:1px 3px 1px 0;white-space:nowrap;color:var(--fg)}
.dim{color:var(--muted)}

/* model viewer */
.mtabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.mtabs button{font:inherit;font-size:.86rem;padding:7px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--fg)}
.mtabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.mtabs button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.mpanel video{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:var(--card)}
@media (max-width:760px){.mgrid{grid-template-columns:1fr}}

ul.find,ol.recs{margin:12px 0 0 1.2em;padding:0}
ul.find li,ol.recs li{margin:8px 0}
@media (max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  header .wrap{padding-top:60px}
}