/* The centre pane can resize while the browser viewport stays unchanged.
   620px is the full-size content width; cap shrinkage to keep text usable.
   Old engines retain the original 1px unit. No draft or JS layout writes. */
[data-hardware-reference] {
  container: live-hardware-reference / inline-size;
  --lc-reference-unit: 1px;
}
@supports (width: 1cqw) {
  [data-hardware-reference] { --lc-reference-unit: clamp(.7px, .16129cqw, 1px); }
}
[data-hardware-reference] .lc-performance-head { gap:calc(7 * var(--lc-reference-unit));margin-bottom:calc(6 * var(--lc-reference-unit)); }
[data-hardware-reference] .lc-performance-head strong { font-size:calc(12 * var(--lc-reference-unit)); }
[data-hardware-reference] .lc-performance-head small { font-size:calc(9 * var(--lc-reference-unit)); }
.lc-reference-choices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:calc(8 * var(--lc-reference-unit));margin:calc(12 * var(--lc-reference-unit)) 0; }
.lc-reference-choice { appearance:none;min-width:0;border:1px solid #d4dfef;border-radius:calc(10 * var(--lc-reference-unit));padding:calc(12 * var(--lc-reference-unit)) calc(10 * var(--lc-reference-unit));background:#f7f9fd;color:#20304a;text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:calc(6 * var(--lc-reference-unit)); }
.lc-reference-choice span { font-size:calc(14 * var(--lc-reference-unit));font-weight:800; }
.lc-reference-choice strong { font-size:calc(14 * var(--lc-reference-unit));line-height:1.5;overflow-wrap:anywhere; }
.lc-reference-choice small { font-size:calc(11 * var(--lc-reference-unit));color:#667895; }
.lc-reference-choice.is-active { border-color:#1764db;background:#edf5ff;box-shadow:inset 0 0 0 1px #1764db; }
.lc-reference-choice:focus-visible,.lc-reference-sources summary:focus-visible { outline:3px solid #f5a524;outline-offset:2px; }
.lc-reference-detail { border-top:1px solid #dbe4f0;padding-top:calc(12 * var(--lc-reference-unit)); }
.lc-reference-detail h3 { margin:0 0 calc(8 * var(--lc-reference-unit));font-size:calc(16 * var(--lc-reference-unit)); }
.lc-reference-note { font-size:calc(12 * var(--lc-reference-unit));line-height:1.7;color:#5b6c86;margin:calc(8 * var(--lc-reference-unit)) 0;overflow-wrap:anywhere; }
.lc-reference-rows { display:grid;grid-template-columns:minmax(calc(100 * var(--lc-reference-unit)),.8fr) minmax(0,1.5fr);gap:0;margin:calc(10 * var(--lc-reference-unit)) 0; }
.lc-reference-rows dt,.lc-reference-rows dd { margin:0;padding:calc(9 * var(--lc-reference-unit)) calc(6 * var(--lc-reference-unit));border-bottom:1px solid #e3eaf3;font-size:calc(12 * var(--lc-reference-unit));line-height:1.6;overflow-wrap:anywhere; }
.lc-reference-rows dt { font-weight:700;background:#f6f8fc; }
.lc-reference-sources { font-size:calc(12 * var(--lc-reference-unit));line-height:1.6;margin:calc(10 * var(--lc-reference-unit)) 0 0;border:1px solid #dde5f0;border-radius:calc(8 * var(--lc-reference-unit));padding:calc(9 * var(--lc-reference-unit)) calc(10 * var(--lc-reference-unit)); }
.lc-reference-sources summary { cursor:pointer;color:#1859b1;font-weight:700; }
.lc-reference-sources a { color:#1859b1;text-decoration:underline;overflow-wrap:anywhere; }
.lc-reference-sources p { margin:calc(8 * var(--lc-reference-unit)) 0 0; }
.lc-reference-sources small { display:block;color:#6b7b91;font-size:calc(11 * var(--lc-reference-unit));margin-top:2px; }
.lc-reference-games .lc-game-performance-preview { margin-top:calc(10 * var(--lc-reference-unit)); }
.lc-reference-games .lc-game-performance-preview b { font-size:calc(26 * var(--lc-reference-unit));overflow-wrap:anywhere; }
.lc-reference-games .lc-game-performance-preview em { font-size:calc(12 * var(--lc-reference-unit));overflow-wrap:anywhere; }
.lc-reference-games .lc-performance-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lc-reference-games .lc-performance-tabs button { min-width:0;text-align:left;font:inherit;cursor:pointer; }
.lc-reference-games .lc-performance-tabs b { font-size:calc(12 * var(--lc-reference-unit));overflow-wrap:anywhere; }
@media print { .lc-reference-sources { break-inside:avoid; } }
.lc-reference-chart { margin:calc(12 * var(--lc-reference-unit)) 0;padding:calc(14 * var(--lc-reference-unit));border:1px solid #dce5f2;border-radius:calc(10 * var(--lc-reference-unit));background:#f8faff;min-width:0; }
.lc-reference-chart figcaption { font-size:calc(14 * var(--lc-reference-unit));font-weight:800;color:#132d54;margin:0 0 calc(14 * var(--lc-reference-unit)); }
.lc-reference-bar-row + .lc-reference-bar-row { margin-top:calc(13 * var(--lc-reference-unit)); }
.lc-reference-bar-heading { display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(4 * var(--lc-reference-unit)) calc(12 * var(--lc-reference-unit));font-size:calc(12 * var(--lc-reference-unit));line-height:1.5;margin-bottom:calc(5 * var(--lc-reference-unit)); }
.lc-reference-bar-heading strong { color:#12376a;font-size:calc(15 * var(--lc-reference-unit));font-variant-numeric:tabular-nums; }
.lc-reference-bar-track { width:100%;height:calc(16 * var(--lc-reference-unit));background:#e4ecf7;border-radius:calc(4 * var(--lc-reference-unit));overflow:hidden; }
.lc-reference-bar-fill { display:block;height:100%;background:#2168d3;border-radius:calc(4 * var(--lc-reference-unit)); }
.lc-reference-bar-fill.is-secondary { background:#179285; }
.lc-reference-axis { display:flex;justify-content:space-between;color:#6b7b91;font-size:calc(10 * var(--lc-reference-unit));margin-top:calc(5 * var(--lc-reference-unit)); }
.lc-reference-sample { min-width:0;margin-top:calc(12 * var(--lc-reference-unit));padding:calc(12 * var(--lc-reference-unit));border:1px solid #cddff8;border-radius:calc(10 * var(--lc-reference-unit));background:#fff; }
.lc-reference-sample-picker { display:flex;flex-direction:column;gap:calc(7 * var(--lc-reference-unit));font-size:calc(13 * var(--lc-reference-unit));font-weight:800;color:#16345f; }
.lc-reference-sample-picker select { box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:calc(37 * var(--lc-reference-unit));border:1px solid #b8cce9;border-radius:calc(7 * var(--lc-reference-unit));padding:calc(5 * var(--lc-reference-unit)) calc(7 * var(--lc-reference-unit));font:inherit;font-size:calc(12 * var(--lc-reference-unit));background:#fff;color:#173357; }
.lc-reference-sample-picker select:focus-visible,.lc-reference-conditions summary:focus-visible { outline:3px solid #f5a524;outline-offset:2px; }
.lc-reference-sample-status { color:#1456ac;background:#edf5ff;padding:calc(8 * var(--lc-reference-unit));border-radius:calc(6 * var(--lc-reference-unit));font-size:calc(12 * var(--lc-reference-unit));font-weight:700;line-height:1.5; }
.lc-reference-sample-status.is-other { color:#80500b;background:#fff5df; }
.lc-reference-chips { display:flex;flex-wrap:wrap;gap:calc(5 * var(--lc-reference-unit)); }
.lc-reference-chips span { display:block;padding:calc(4 * var(--lc-reference-unit)) calc(7 * var(--lc-reference-unit));border:1px solid #dce5f2;border-radius:calc(5 * var(--lc-reference-unit));background:#f7f9fc;font-size:calc(11 * var(--lc-reference-unit));line-height:1.5;overflow-wrap:anywhere;max-width:100%; }
.lc-reference-sample-date { color:#596e8c;font-size:calc(11 * var(--lc-reference-unit));line-height:1.5; }
.lc-reference-conditions { font-size:calc(12 * var(--lc-reference-unit));line-height:1.6;margin-top:calc(8 * var(--lc-reference-unit)); }
.lc-reference-conditions summary { color:#295d9f;cursor:pointer;font-weight:700; }
.lc-reference-games .lc-performance-tabs small { display:block;font-size:calc(10 * var(--lc-reference-unit));color:#607493;line-height:1.5;margin-top:3px; }
.lc-reference-games .lc-performance-tabs { margin-top:calc(4 * var(--lc-reference-unit)); }
@media print { .lc-reference-chart,.lc-reference-sample { break-inside:avoid; } }
/* The quote sheet's generic strong/b rules use nowrap; reference values wrap. */
.lc-reference-choice strong,.lc-reference-chart strong,.lc-reference-games .lc-game-performance-preview strong,
.lc-reference-games .lc-game-performance-preview b,.lc-reference-games .lc-performance-tabs b { white-space:normal; }
/* WebKit's native select can otherwise contribute its full option width. */
.lc-reference-sample-picker { min-width:0;overflow:hidden; }

.lc-reference-games .lc-game-performance-preview { grid-template-columns:minmax(0,.8fr) minmax(0,1fr);min-height:calc(112 * var(--lc-reference-unit)); }
.lc-reference-games .lc-game-performance-preview img { height:calc(112 * var(--lc-reference-unit)); }
.lc-reference-games .lc-game-performance-preview > div { min-width:0;padding:calc(10 * var(--lc-reference-unit)) calc(13 * var(--lc-reference-unit)); }
.lc-reference-games .lc-game-performance-preview span { font-size:calc(9 * var(--lc-reference-unit)); }
.lc-reference-games .lc-game-performance-preview strong { font-size:calc(18 * var(--lc-reference-unit)); }
.lc-reference-games .lc-performance-tabs { gap:calc(4 * var(--lc-reference-unit)); }
.lc-reference-games .lc-performance-tabs button { min-height:calc(36 * var(--lc-reference-unit));padding:calc(4 * var(--lc-reference-unit)) calc(6 * var(--lc-reference-unit));border-radius:calc(4 * var(--lc-reference-unit)); }
.lc-reference-games .lc-performance-tabs span { font-size:calc(9 * var(--lc-reference-unit)); }
/* Only truly small reference panes need two columns; desktop splitters keep 3×2. */
@container live-hardware-reference (max-width:340px) {
  .lc-reference-choices,.lc-reference-games .lc-performance-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lc-reference-rows { grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); }
}