/* Shared stylesheet, retained at the established asset URL. */
:root { color-scheme: light; --ink:#192c38; --muted:#50616b; --accent:#17636a; --accent-dark:#10494f; --paper:#f6f5f1; --surface:#fff; --tint:#eaf2f0; --line:#ced6d5; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:100%; line-height:1.65; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:var(--accent); text-underline-offset:.2em; text-decoration-thickness:1px; overflow-wrap:anywhere; }
a:hover { color:var(--accent-dark); text-decoration-thickness:2px; }
a:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:2px; }
p,ul,ol,dl { margin:0 0 1.25rem; }
ul,ol { padding-left:1.4rem; }
li + li { margin-top:.5rem; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; margin:0 0 1rem; text-wrap:balance; }
h1 { font-size:clamp(2rem,4vw,3.1rem); font-weight:750; }
h2 { font-size:clamp(1.45rem,2.4vw,1.85rem); }
h3 { font-size:1.25rem; }
strong { font-weight:700; }
.container { width:min(100% - 3rem,72rem); margin-inline:auto; }
.skip-link { position:absolute; left:1rem; top:.5rem; z-index:10; padding:.75rem 1rem; background:white; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.masthead { background:var(--surface); border-top:4px solid var(--accent); border-bottom:1px solid var(--line); }
.masthead-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 2rem; padding-block:1.15rem; }
.wordmark { display:inline-block; color:var(--ink); font-size:1.35rem; font-weight:800; letter-spacing:-.045em; text-decoration:none; line-height:1.35; padding-block:.35rem; }
.brand-note { display:block; color:var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-top:.1rem; }
.primary-nav ul,.footer-nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; padding:0; margin:0; }
.primary-nav li,.footer-nav li { margin:0; }
.primary-nav a { display:block; padding-block:.7rem; text-decoration:none; color:var(--ink); font-weight:600; }
.primary-nav a:hover,.primary-nav a[aria-current] { color:var(--accent); text-decoration:underline; text-decoration-thickness:2px; }
main { padding-block:2.75rem 4rem; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; margin-bottom:.9rem; }
.lead { color:var(--muted); font-size:1.15rem; max-width:65ch; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:3.5rem; align-items:start; }
.intro h1 { max-width:19ch; }
.intro .lead { max-width:54ch; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; margin-top:1.5rem; }
.button { display:inline-block; padding:.75rem 1.1rem; border:1px solid var(--accent); background:var(--accent); color:white; border-radius:3px; font-weight:650; text-decoration:none; }
.button:hover { color:white; background:var(--accent-dark); }
.text-link { display:inline-block; padding-block:.65rem; font-weight:650; }
.check-panel { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); padding:1.5rem; }
.check-panel h2 { font-size:1.3rem; }
.check-panel ol { margin-bottom:0; }
.check-panel li { padding-left:.25rem; }
.check-panel li::marker { color:var(--accent); font-weight:700; }
.funding-note { border-left:3px solid var(--accent); padding:1rem 1.25rem; background:var(--tint); font-size:.9rem; margin-block:2rem; }
.funding-note p:last-child { margin-bottom:0; }
.section { margin-top:2.75rem; }
.section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 1.5rem; margin-bottom:1.25rem; }
.section-heading h2,.section-heading p { margin:0; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:1.75rem; }
.card h2,.card h3 { font-size:1.5rem; max-width:30ch; }
.card h2 a,.card h3 a { color:var(--ink); text-decoration:none; }
.card h2 a:hover,.card h3 a:hover { color:var(--accent); text-decoration:underline; }
.card p:not(.eyebrow) { color:var(--muted); }
.card .card-detail { border-top:1px solid var(--line); padding-top:1rem; margin-top:auto; margin-bottom:0; font-size:.85rem; }
.split-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; border-top:1px solid var(--line); padding-top:2rem; }
.split-section p { color:var(--muted); }
.breadcrumb { font-size:.85rem; color:var(--muted); margin-bottom:1.25rem; }
.article-header { max-width:75ch; margin-bottom:2rem; }
.article-header h1 { font-size:clamp(2rem,3.8vw,2.8rem); }
.article-meta { font-size:.85rem; color:var(--muted); }
.article-layout { display:grid; grid-template-columns:minmax(0,75ch) minmax(0,1fr); gap:3rem; align-items:start; }
.prose { min-width:0; max-width:75ch; background:var(--surface); border:1px solid var(--line); padding:2rem; grid-column:1; grid-row:1; }
.prose h2 { margin-top:2.25rem; font-size:1.5rem; }
.prose h2:first-child { margin-top:0; }
.prose h3 { margin-top:1.5rem; }
.prose > :last-child { margin-bottom:0; }
.prose section + section { margin-top:2.25rem; }
.prose section > :last-child { margin-bottom:0; }
.prose section > h2 { scroll-margin-top:1.5rem; }
.contents { padding:1.25rem 0; border-top:2px solid var(--accent); grid-column:2; grid-row:1; }
.contents h2 { font-size:1rem; }
.contents ol { font-size:.9rem; }
.contents a { display:inline-block; padding-block:.3rem; }
.callout { background:var(--tint); border-left:3px solid var(--accent); padding:1rem 1.25rem; margin-block:1.5rem; }
.callout p:last-child { margin-bottom:0; }
.sources { border-top:1px solid var(--line); padding-top:1.5rem; font-size:.9rem; }
.sources h2 { margin-top:0; }
.related { border-top:1px solid var(--line); margin-top:2rem; padding-top:1.5rem; }
.ad-label { display:inline-block; background:var(--ink); color:white; font-size:.8rem; font-weight:750; padding:.15rem .5rem; border-radius:2px; vertical-align:baseline; }
.site-footer { border-top:1px solid var(--line); background:var(--surface); padding-block:2rem; font-size:.85rem; }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; }
.footer-title { font-weight:750; color:var(--ink); }
.site-footer p { color:var(--muted); max-width:72ch; }
.footer-nav a { display:inline-block; padding-block:.65rem; }
.footer-bottom { border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem; }
.footer-bottom p { margin:0; }
@media (max-width:850px) {
  .intro-grid { gap:2rem; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .article-layout { grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .contents { grid-column:1; grid-row:1; max-width:75ch; }
  .contents + .prose { grid-row:2; }
  .contents ol { columns:2; column-gap:2rem; }
  .contents li { break-inside:avoid; }
}
@media (max-width:620px) {
  .container { width:calc(100% - 2rem); }
  .masthead-inner { gap:.25rem; padding-block:.8rem .35rem; }
  .primary-nav { width:100%; }
  .primary-nav ul { gap:.25rem 1.25rem; }
  main { padding-block:1.75rem 2.5rem; }
  .intro-grid,.cards,.split-section { grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .intro h1 { max-width:22ch; }
  .check-panel,.card { padding:1.25rem; }
  .funding-note { padding:.9rem 1rem; margin-block:1.5rem; }
  .section { margin-top:2rem; }
  .prose { padding:1.25rem; }
  .contents ol { columns:1; }
  .lead { font-size:1.05rem; }
  .footer-top { display:block; }
}
@media print {
  .masthead,.site-footer,.actions,.contents,.skip-link { display:none; }
  body,.prose { background:white; color:black; }
  .container,.prose { width:100%; max-width:none; padding:0; border:0; }
  .article-layout { display:block; }
  a { color:black; text-decoration:underline; }
}

/* Builder styles */

.page-build .share-permalink {
  margin-top: 0.85rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--line);
}
.page-build .share-permalink label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.page-build .share-permalink-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.page-build .share-url {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
.page-build .metrics-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.page-build .metric-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.page-build .metric-pill[data-tone="warn"] {
  border-color: #f0c9a0;
  color: var(--warn);
  background: #fffaf4;
}
.page-build .metric-pill[data-tone="match"] {
  border-color: #c5d4cc;
  color: var(--muted);
  background: #f7faf8;
}
.page-build .empty-honesty {
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}
.page-build .button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.page-build .button-ghost:hover {
  border-color: var(--accent-strong);
  color: #0f766e;
}
.page-build .button {
  cursor: pointer;
  border: 0;
  font: inherit;
}
.build-rows {
  display: grid;
  gap: 0.55rem;
}
.build-row {
  display: grid;
  grid-template-columns: 7.25rem 1fr;
  gap: 0.65rem 0.9rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.build-row.is-chosen { border-color: #b7cfc9; background: #fbfefd; }
.build-row-label {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.build-row-name { margin: 0 0 0.15rem; font-weight: 650; font-size: 0.98rem; }
.build-row-meta { margin: 0; font-size: 0.88rem; }
.build-row-empty { margin: 0 0 0.45rem; color: var(--muted); font-size: 0.9rem; }
.build-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
}
.build-row-actions .button-ghost {
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}
.build-row-prices {
  margin-left: 0.15rem;
  font-weight: 650;
  font-size: 0.92rem;
}
.build-row-choose {
  padding: 0.45rem 0.9rem;
  font-size: 0.92rem;
}
.compat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.compat-item {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.compat-badge {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  align-self: start;
}
.compat-warn { border-color: #f0c9a0; background: #fffaf4; }
.compat-warn .compat-badge { color: var(--warn); }
.compat-match { border-color: #c5d4cc; background: #f7faf8; }
.compat-match .compat-badge { color: var(--muted); }
.compat-unknown { border-color: var(--line); }
.compat-unknown .compat-badge { color: var(--muted); }
.build-picker {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0;
  max-width: min(36rem, calc(100vw - 2rem));
  width: 100%;
  background: var(--surface);
  color: var(--ink);
}
.build-picker::backdrop { background: rgba(7, 11, 18, 0.55); }
.build-picker-inner { margin: 0; }
.build-picker-inner header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.build-picker-inner h2 { margin: 0; font-size: 1.2rem; }
.build-picker-options {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.15rem 1.25rem;
  max-height: min(60vh, 28rem);
  overflow: auto;
}
.build-picker-option {
  display: grid;
  gap: 0.2rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  font: inherit;
}
.build-picker-option:hover,
.build-picker-option.is-selected {
  border-color: var(--accent-strong);
  background: var(--tint);
}
.build-picker-option.is-incompatible {
  opacity: 0.55;
  border-style: dashed;
  background: #f6f4f1;
}
.build-picker-option.is-incompatible:hover {
  border-color: #d4a574;
  background: #fffaf4;
  opacity: 0.85;
}
.build-picker-option .picker-reason {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--warn);
  font-weight: 600;
}
.picker-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem 0;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.picker-toggle input { accent-color: var(--accent-strong); }
.compat-groups {
  display: grid;
  gap: 1.25rem;
}
.compat-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.compat-group-warn .compat-group-title { color: var(--warn); }
.compat-item.compat-empty {
  color: var(--muted);
  font-style: italic;
  display: block;
}
.replace-conflict {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid #f0c9a0;
  border-radius: var(--radius);
  background: #fffaf4;
}
.replace-conflict-title { margin: 0 0 0.35rem; }
.replace-conflict-actions { margin-top: 0.75rem; }
@media (max-width: 720px) {
  .build-row,
  .compat-item { grid-template-columns: 1fr; }
  .build-row { align-items: stretch; }
  .build-row-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .build-row-actions .button-ghost,
  .build-row-choose,
  .build-row-prices {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .page-build .share-permalink-row { flex-direction: column; }
  .page-build .share-permalink-row .button-ghost { width: 100%; }
}

@media print {
  .masthead,
  .site-footer,
  .actions,
  .contents,
  .skip-link,
  .home-hero,
  .hero-spike-panel { display: none; }
  body,
  .prose { background: white; color: black; }
  .container,
  .prose { width: 100%; max-width: none; padding: 0; border: 0; }
  .article-layout { display: block; }
  a { color: black; text-decoration: underline; }
}

/* Extensions to the established live publication design. */
[hidden] { display:none !important; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button,input,select { font:inherit; }
.catalogue-filters { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; }
.catalogue-filters label { display:grid; gap:.35rem; flex:1 1 16rem; font-weight:650; }
.catalogue-filters input,.catalogue-filters select { width:100%; padding:.75rem; border:1px solid var(--line-strong); border-radius:3px; color:var(--ink); background:white; }
.catalogue-list { display:grid; gap:.75rem; }
.catalogue-row { display:grid; grid-template-columns:1fr 13rem; gap:1rem; padding:1.25rem; border:1px solid var(--line); background:var(--surface); }
.catalogue-row h2 { font-size:1.15rem; }
.catalogue-row p { margin-bottom:.5rem; }
.catalogue-row .eyebrow { font-size:.875rem; }
.meta { color:var(--muted); font-size:.9rem; }
.table-scroll { overflow:auto; border:1px solid var(--line); background:var(--surface); }
.table-scroll table { width:100%; border-collapse:collapse; min-width:44rem; }
.table-scroll th,.table-scroll td { text-align:left; padding:.85rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-scroll th { background:var(--tint); }
dt { font-weight:650; } dd { margin:0 0 .75rem; }
.page-build .article-header { max-width:75ch; margin-bottom:1rem; }
.page-build .build-scope { margin-bottom:1rem; }
.page-build .build-scope summary { cursor:pointer; color:var(--accent); }
.page-build .build-scope p { margin-top:.75rem; }
.page-build .build-row-label,.page-build .compat-badge { font-size:.875rem; }
.page-build .build-picker-option.is-incompatible { opacity:1; }
@media(max-width:650px) { .catalogue-row { grid-template-columns:1fr; } }
#delivered-offers details { margin: .75rem 0; padding: .75rem; border: 1px solid var(--line, #d9dfe2); border-radius: .4rem; }
#delivered-offers details a { overflow-wrap: anywhere; }
#delivered-offers table td:not(:first-child) { white-space: nowrap; }
#delivered-offers .table-scroll { margin-bottom: 1rem; }

/* Progressive catalogue browsing; shared publication styles above stay intact. */
.catalogue-filters,.catalogue-extra-grid { min-width:0; }
.catalogue-filters label,.catalogue-filters input,.catalogue-filters select { min-width:0; }
.catalogue-advanced { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:1rem; margin:0 0 1rem; }
.catalogue-advanced > summary { cursor:pointer; font-weight:650; }
.catalogue-extra-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.catalogue-extra-grid:empty { display:none; }
.catalogue-extra-grid label { display:grid; gap:.35rem; min-width:0; font-weight:650; }
.catalogue-extra-grid select { width:100%; min-width:0; min-height:44px; padding:.65rem; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink); background:var(--paper); }
.catalogue-advanced .meta { margin-top:1rem; }
.catalogue-advanced button { min-height:44px; margin-top:.5rem; }
.catalogue-price-scope { max-width:95ch; }
.catalogue-row > div { min-width:0; }
.catalogue-row { overflow-wrap:anywhere; }
.catalogue-delivered { font-weight:700; font-size:1rem; }
.catalogue-live-price .meta,.catalogue-spec-notes .meta { font-size:.8rem; line-height:1.45; }
.catalogue-spec-notes { margin-top:.6rem; }
.catalogue-retained { color:var(--warn); font-size:.85rem; font-weight:650; }
.catalogue-row a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:800px) { .catalogue-extra-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:500px) { .catalogue-extra-grid { grid-template-columns:minmax(0,1fr); } }

/* Shared graphite shell and light comparison workbench. */
body { text-rendering:optimizeLegibility; }
button,input,select { font:inherit; }
button,summary { cursor:pointer; }
.container { width:min(100% - 3rem,80rem); }
.masthead { background:#101d24; border-top:3px solid #3dd6bf; border-bottom:1px solid #2d414b; }
.masthead-inner { padding-block:1rem; gap:1rem 2rem; }
.wordmark,.wordmark:hover { color:#f5fafb; font-size:1.35rem; letter-spacing:-.045em; }
.brand-dot { color:#52e0c8; }
.brand-note { color:#b8c9cf; font-size:.8125rem; text-transform:none; letter-spacing:.035em; }
.primary-nav ul { gap:.25rem 1.5rem; }
.primary-nav a { color:#dfebed; padding:.6rem .1rem; font-size:.9375rem; }
.primary-nav a:hover,.primary-nav a[aria-current] { color:#77ebd7; text-decoration:underline; text-underline-offset:.6rem; }
.masthead a:focus-visible { outline-color:#77ebd7; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
main { padding-block:2.25rem 4rem; }
h1 { letter-spacing:-.045em; }
.eyebrow { font-size:.8125rem; letter-spacing:.09em; margin-bottom:.6rem; }
.button,.page-build .button { border-radius:var(--radius); font-weight:650; min-height:44px; }
.button-ghost { display:inline-flex; justify-content:center; align-items:center; padding:.55rem .85rem; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink); background:var(--surface); font-weight:600; min-height:44px; }
.button-ghost:hover { border-color:var(--accent); color:var(--accent); }
.meta { font-size:.875rem; }
.intro { background:#172b35; color:#f3f8fa; padding:2.25rem; border-radius:var(--radius); border-left:4px solid #46d6bc; }
.intro .eyebrow { color:#79e7d4; }
.intro .lead { color:#d2dfe3; }
.intro h1 { font-size:clamp(2.1rem,4vw,3.25rem); }
.intro .button { background:#69e4cd; border-color:#69e4cd; color:#0b2e2a; }
.intro .button:hover { background:#a6f4e5; }
.intro .button:focus-visible { outline-color:#a6f4e5; }
.intro-grid { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:1.5rem; align-items:stretch; }
.check-panel { border-radius:var(--radius); padding:1.75rem; }
.funding-note { font-size:.875rem; }
.site-footer { background:#e6eef0; font-size:.875rem; }
.footer-nav { max-width:38rem; }
.footer-nav ul { gap:.15rem 1.25rem; }
.catalogue-filters { background:var(--surface); padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius); }
.catalogue-list { gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.catalogue-row { border:0; border-bottom:1px solid var(--line); padding:1.1rem 1.25rem; }
.catalogue-row:last-child { border-bottom:0; }
.catalogue-row h2 { margin-bottom:.4rem; }
.catalogue-row h2 a { color:var(--ink); text-decoration:none; }
.catalogue-row h2 a:hover { color:var(--accent); text-decoration:underline; }
.product-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:center; padding:1.5rem; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); }
.product-summary h1 { font-size:clamp(1.8rem,3vw,2.6rem); }
.product-summary p:last-child { margin-bottom:0; }
.product-action { max-width:16rem; }
.product-action .button { display:block; text-align:center; }
.product-action .meta { margin-top:.65rem; }
.product-specs { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:1rem 0 0; }
.product-specs div { min-width:6rem; }
.product-specs dt { color:var(--muted); font-size:.875rem; font-weight:400; }
.product-specs dd { margin:.1rem 0 0; font-weight:650; }
.evidence-details { margin-top:1rem; padding:1rem 1.25rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.evidence-details > summary { font-weight:650; }
.evidence-details[open] > summary { margin-bottom:1rem; }
.evidence-details p:last-child { margin-bottom:0; }
.page-build .article-header { max-width:none; margin-bottom:1.5rem; }
.page-build .article-header .lead { max-width:65ch; margin-bottom:0; }
.build-workspace { display:grid; grid-template-columns:minmax(0,1fr) 21rem; align-items:start; gap:1.5rem; }
.build-parts { grid-column:1; grid-row:1; min-width:0; }
.build-summary { grid-column:2; grid-row:1; position:sticky; top:1rem; min-width:0; padding:1.25rem; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); }
.build-summary h2 { font-size:1.25rem; margin-bottom:.85rem; }
.build-summary > summary { font-size:1.125rem; font-weight:700; }
.build-price-preview { display:block; margin-top:.6rem; font-size:1rem; line-height:1.5; font-variant-numeric:tabular-nums; }
.build-price-basis { display:block; margin-top:.25rem; color:var(--muted); font-size:.8125rem; font-weight:400; line-height:1.5; }
.build-summary-content { margin-top:1rem; }
.build-summary #build-total { color:var(--ink); margin-bottom:1rem; }
.build-summary .metrics-strip { border:0; padding:0; gap:.4rem; }
.build-summary .metric-pill { border-radius:4px; padding:.3rem .45rem; }
.build-summary .summary-link { display:inline-block; padding:.5rem 0; font-weight:650; }
.build-summary .share-permalink { margin-top:1rem; padding-top:1rem; }
.build-summary summary { font-size:.9375rem; font-weight:650; }
.build-summary > summary { font-size:1.125rem; font-weight:700; }
.build-summary .share-permalink-row { margin-top:.75rem; }
.build-summary .share-url { width:100%; flex-basis:100%; }
.build-summary #share-status:empty { display:none; }
.build-summary #share-status { margin:.65rem 0 0; }
.build-save-status { margin:.75rem 0 0; }
.build-feedback p { margin:0 0 .75rem; }
.build-feedback p:empty { display:none; }
button:disabled { cursor:wait; opacity:.65; }
.build-parts .section-heading { margin-bottom:.8rem; }
.build-parts .section-heading h2 { font-size:1.25rem; }
.build-rows { gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; container-type:inline-size; container-name:build-parts; }
.build-row { border:0; border-bottom:1px solid var(--line); border-radius:0; grid-template-columns:6.5rem minmax(0,1fr); gap:1rem; padding:.85rem 1rem; align-items:start; }
@container build-parts (max-width:36rem) {
  .build-row { grid-template-columns:1fr; gap:.4rem; }
}
.build-row:last-child { border-bottom:0; }
.build-row.is-chosen { background:#fff; }
.build-row > div { min-width:0; }
.page-build .build-row-label { font-size:.875rem; letter-spacing:0; text-transform:none; font-weight:650; color:var(--ink); }
.build-row-name { font-size:1rem; }
.build-row-meta { font-size:.875rem; }
.build-row-identity { margin:.25rem 0 .4rem; font-size:.875rem; }
.build-row-price { margin:.3rem 0 .5rem; font-size:.9375rem; font-weight:650; font-variant-numeric:tabular-nums; }
.build-row-price[data-price-state="current"] { color:var(--accent-dark); }
.build-row-price[data-price-state="unpriced"] { color:var(--muted); font-weight:400; }
.build-row-empty { display:none; }
.build-row-choose { background:#e8f5f2; color:var(--accent-dark); }
.build-row-choose:hover { color:#fff; }
.build-row-actions { flex-direction:row; align-items:center; gap:.5rem; }
.page-build .build-row-actions .button-ghost { padding:.4rem .7rem; min-height:44px; }
.build-row-prices { display:inline-flex; align-items:center; min-height:44px; margin-left:.3rem; }
.build-examples { margin-top:1rem; padding:.75rem 1rem; border:1px solid var(--line); border-radius:var(--radius); }
.build-examples summary { color:var(--muted); }
.build-examples .actions { margin-top:.75rem; }
.compatibility-section { margin-top:2rem; }
.page-build .compatibility-section .compat-item { grid-template-columns:8rem minmax(0,1fr); }
.compat-slot-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.page-build .compat-slot-action,.page-build .compat-return { min-height:44px; padding:.45rem .75rem; white-space:normal; text-align:left; }
.compat-return { margin:.25rem 0 .5rem; }
.product-photo { max-width:60rem; margin:1.5rem 0 2rem; }
.product-photo img { display:block; max-width:100%; height:auto; border-radius:var(--radius); }
.product-photo figcaption { margin-top:.75rem; color:var(--muted); font-size:.9rem; line-height:1.6; overflow-wrap:anywhere; }
.product-photo figcaption a { text-underline-offset:.15em; }
.page-build .build-scope { margin:1rem 0; }
.page-build .picker-reason { font-size:.875rem; }
.page-build .build-picker-option.is-incompatible:hover { opacity:1; }
@media(max-width:1000px) {
  .build-workspace { grid-template-columns:minmax(0,1fr) 18rem; gap:1rem; }
  .build-summary { padding:1rem; }
}
@media(max-width:800px) {
  .build-workspace { display:flex; flex-direction:column; }
  .build-summary { position:static; width:100%; }
  .build-parts { width:100%; }
  .build-summary #build-total { max-width:70ch; }
  .product-summary { grid-template-columns:minmax(0,1fr); }
  .product-action { max-width:none; }
  .product-action .button { display:inline-block; }
}
@media(max-width:620px) {
  .container { width:calc(100% - 2rem); }
  .masthead-inner { padding-block:.8rem; gap:.5rem; }
  .primary-nav ul { gap:0 1rem; }
  .primary-nav a { font-size:.875rem; padding-block:.6rem; }
  .intro-grid { grid-template-columns:minmax(0,1fr); }
  .intro,.product-summary { padding:1.25rem; }
  .build-row { grid-template-columns:1fr; gap:.4rem; }
  .build-row-actions .button-ghost,.build-row-prices,.build-row-choose { width:auto; }
  .build-row-actions { flex-direction:row; align-items:center; }
  .page-build .compatibility-section .compat-item { grid-template-columns:1fr; gap:.3rem; }
  .catalogue-row { grid-template-columns:minmax(0,1fr); }
  .page-build .article-header h1 { font-size:2rem; }
  .build-picker { max-height:calc(100dvh - 2rem); overflow:auto; }
}
@media print {
  .build-workspace { display:block; }
  .build-summary { position:static; }
  .build-examples,.share-permalink,.build-row-actions { display:none; }
}
.picker-search-label { display:block; margin:.9rem 1.15rem .35rem; font-size:.875rem; font-weight:650; }
#picker-search { display:block; width:calc(100% - 2.3rem); margin:0 1.15rem .35rem; padding:.6rem .75rem; border:1px solid var(--line-strong); border-radius:var(--radius); background:#fff; color:var(--ink); }
#add-part-dialog .build-picker-inner > p { padding:1rem 1.15rem 0; margin:0; }
#add-part-dialog button { min-height:44px; }
.compat-evidence { margin-top: .55rem; font-size: .88rem; }
.compat-evidence summary { cursor: pointer; font-weight: 650; }
.compat-evidence p { margin: .55rem 0; overflow-wrap: anywhere; }
.compat-item > div { min-width: 0; }
.compat-item > div > p { margin: 0; }
.home-search { margin: 1.25rem 0 0; max-width: 38rem; }
.home-search label { display:block; font-weight:650; color:#f3f8fa; margin-bottom:.35rem; }
.home-search #home-search-hint { color:#b8c9cf; margin:0 0 .65rem; }
.home-search-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.home-search input[type="search"] { flex:1 1 12rem; min-width:0; width:100%; min-height:44px; height:auto; padding:.6rem .75rem; border:1px solid #9bafb5; border-radius:var(--radius); background:#fff; color:var(--ink); }
.home-search button { flex:0 1 auto; white-space:normal; }
.home-entry-actions { margin-top:1rem; }
.intro .home-entry-actions .text-link { color:#d5eef0; }
.intro .home-entry-actions .text-link:hover { color:#a6f4e5; }
.home-categories { margin-top:1.5rem; }
.home-categories h2 { font-size:1.15rem; color:#f3f8fa; margin-bottom:.75rem; }
.home-categories ul { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; }
.home-categories li { margin:0; }
.home-categories li + li { margin-top:0; }
.home-categories a { display:inline-flex; flex-wrap:wrap; align-items:center; min-height:44px; max-width:100%; padding:.35rem .75rem; border:1px solid #5d7a82; border-radius:var(--radius); background:#102229; color:#f3f8fa; text-decoration:none; font-weight:600; overflow-wrap:anywhere; }
.home-categories a:hover { border-color:#77ebd7; color:#77ebd7; }
.home-categories a .meta { color:#b8c9cf; margin:0 0 0 .35rem; font-weight:500; }
.home-search-noscript { color:#d2dfe3; margin:1rem 0 0; }
.intro .home-search input:focus,
.intro .home-search input:focus-visible,
.intro .home-search button:focus,
.intro .home-search button:focus-visible,
.intro .home-entry-actions a:focus,
.intro .home-entry-actions a:focus-visible,
.intro .home-categories a:focus,
.intro .home-categories a:focus-visible { outline:3px solid #a6f4e5; outline-offset:4px; }
@media(max-width:620px) {
  .home-search-row { flex-direction:column; align-items:stretch; }
  .home-search input[type="search"] { flex:0 0 auto; width:100%; }
  .home-search button { width:100%; }
}
/* Owner-approved approximate GPU models (17 Sep 2026): poster first, 3D only on request. */
.product-model { max-width:60rem; }
.product-model [hidden] { display:none !important; }
.product-model-figure { margin:1rem 0 .5rem; }
/* The stage never fills the viewport (phones in landscape, short laptop screens), so page area stays
   around the open viewer for scrolling. Width follows a 70%-of-viewport-height cap at 4:3. */
.product-model-stage { position:relative; width:100%; max-width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#484849; border-radius:var(--radius); margin-inline:auto; }
.product-model-stage { width:min(100%, calc(70vh * 4 / 3)); }
.product-model-stage { width:min(100%, calc(70svh * 4 / 3)); }
.product-model-poster { display:block; width:100%; height:auto; }
.product-model-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.product-model-canvas:active { cursor:grabbing; }
.product-model-canvas:focus-visible { outline:3px solid #a6f4e5; outline-offset:-4px; }
.product-model-figure figcaption { margin-top:.6rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.product-model-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin:.25rem 0 1rem; }
.product-model-controls { display:flex; flex-wrap:wrap; gap:.5rem; width:100%; }
.product-model-hint { flex:1 1 100%; margin:0; }
.product-model button { font:inherit; min-height:44px; max-width:100%; white-space:normal; text-align:center; }
.product-model button.button { cursor:pointer; }
.product-model button[aria-disabled="true"] { opacity:.65; cursor:progress; }
.product-model-status { flex:1 1 16rem; min-width:0; margin:0; }
.product-model-status:empty { display:none; }
.product-model-dims { margin:0 0 .75rem; }
.product-model-evidence h3 { font-size:1.05rem; margin:1.25rem 0 .5rem; }
.product-model-evidence h3:first-of-type { margin-top:0; }
.product-model-evidence ul { margin-bottom:1rem; }
.product-model-evidence li,.product-model-evidence p { overflow-wrap:anywhere; }
.product-model-tag { display:inline-block; padding:0 .4rem; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:.8rem; line-height:1.6; color:var(--muted); }
.product-model-tag.is-manufacturer { border-color:var(--accent); color:var(--accent-dark); background:var(--tint); font-weight:650; }
.product-model-still-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr)); gap:.75rem; list-style:none; padding:0; margin:0; }
.product-model-still-grid li { margin:0; min-width:0; }
.product-model-still-grid figure { margin:0; }
.product-model-still-grid img { display:block; width:100%; height:auto; border-radius:var(--radius); }
.product-model-still-grid figcaption { margin-top:.3rem; color:var(--muted); font-size:.85rem; }
@media(max-width:620px) {
  .product-model-actions .product-model-open { width:100%; }
  .product-model-controls .button-ghost { flex:1 1 calc(50% - .5rem); }
}
.build-row-last-seen { color:var(--muted); margin:.25rem 0 .5rem; }
.price-last-seen { border-left:4px solid var(--warn); background:var(--warn-soft,#fff4e5); padding:.75rem 1rem; border-radius:var(--radius); margin:1rem 0; }

/* css/00-tokens.css */
/* Design tokens: the single place defining the site's colours, spacing, type scale,
   radii, shadows and focus ring. Values equal what the browser renders today (the
   workbench colours layered over the catalogue and baseline settings). */
:root {
  color-scheme: light;
  --ink: #17252d;
  --muted: #4f626d;
  --accent: #096a65;
  --accent-dark: #07524e;
  --accent-strong: var(--accent);
  --paper: #f0f4f5;
  --surface: #fff;
  --tint: #e4f3f0;
  --line: #cdd9dd;
  --line-strong: #9bafb5;
  --warn: #923c0f;
  --graphite: #101d24;
  --graphite-2: #172b35;
  --mint: #3dd6bf;
  --mint-soft: #79e7d4;
  --ok-soft: #e4f3f0;
  --warn-soft: #fff4e5;
  --neutral-soft: #eef2f3;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --text-xs: .8125rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.8rem,3vw,2.4rem);
  --text-3xl: clamp(2.1rem,4vw,3.25rem);
  --radius: 5px;
  --radius-lg: 8px;
  --shadow-1: 0 1px 2px rgba(16,29,36,.08);
  --shadow-2: 0 4px 14px rgba(16,29,36,.12);
  --focus-ring: 3px solid var(--accent);
  --measure: 65ch;
  --container: 80rem;
  --tap: 44px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size: 100%;
  line-height: 1.55;
}
/* Dark colour scheme: reserved for the s3-dark card. Do not add rules here before then. */

/* css/01-components.css */
/* Shared components built only from the 00-tokens.css tokens. New names only;
   no existing publication class is redefined here. */

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.stack { display:flex; flex-direction:column; gap:var(--space-4); }
.cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }

.tile { display:block; min-height:var(--tap); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.tile:focus-visible { outline:var(--focus-ring); outline-offset:3px; }

.thumb { --thumb:4rem; display:inline-flex; align-items:center; justify-content:center; width:var(--thumb); height:var(--thumb); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.thumb img { display:block; width:100%; height:100%; object-fit:contain; }

.chip { display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-3); border:1px solid var(--line-strong); border-radius:999px; font-size:var(--text-xs); font-weight:650; }
.chip--current { background:var(--ok-soft); border-color:var(--accent); color:var(--accent-dark); }
.chip--last-seen { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.chip--none { background:var(--neutral-soft); border-color:var(--line-strong); color:var(--muted); }

.illustration { margin:0 0 var(--space-4); text-align:center; }
.illustration__img { display:block; max-width:100%; height:auto; }
.illustration__caption { color:var(--muted); font-size:var(--text-xs); margin-top:var(--space-2); }

.brand-mark { display:inline-block; flex:none; margin-right:var(--space-2); vertical-align:baseline; }

/* css/10-home.css */
/* s1-home: hero, proof points, category tiles, how it works and scope.
   Layers over the baseline and workbench rules (which styled the old dark
   hero's inline category list); tokens only, no new colours. Never
   restyles .intro, .button or .chip. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem 2.5rem;
  align-items: center;
}
.home-hero__text { min-width: 0; }
.home-hero__figure { margin: 0; min-width: 0; }
.home-hero__figure img { display: block; width: 100%; height: auto; max-width: 30rem; margin-inline: auto; }
.home-hero__figure figcaption { margin-top: .5rem; color: var(--mint-soft); font-size: var(--text-xs); text-align: center; }
.home-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.home-proof li {
  padding: .35rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--graphite);
  color: var(--paper);
  font-size: var(--text-sm);
  font-weight: 600;
}
.home-categories { margin-top: 2.5rem; }
.home-categories h2 { color: var(--ink); }
.home-categories .home-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.home-categories .home-category-grid li + li { margin-top: 0; }
.home-category { text-decoration: none; }
.home-categories .home-category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  min-height: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.home-categories .home-category:hover { border-color: var(--accent); color: var(--accent-dark); }
.home-categories .home-category .home-category__art { display: block; }
.home-categories .home-category .home-category__art img { display: block; }
.home-categories .home-category .meta { margin: 0; color: var(--muted); font-weight: 500; }
.home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: home-step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.home-steps li {
  counter-increment: home-step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 3.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.home-steps li + li { margin-top: 0; }
.home-steps li::before {
  content: counter(home-step);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent-dark);
  font-weight: 750;
}
.home-steps h3 { margin: 0 0 .5rem; font-size: var(--text-base); }
.home-steps p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.home-scope ul {
  list-style: none;
  padding: 0;
  max-width: 65rem;
}
.home-scope li {
  position: relative;
  padding-left: 1.5rem;
}
.home-scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 800px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home-categories .home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-steps { grid-template-columns: minmax(0, 1fr); }
}

/* css/20-product.css */
/* s1-product: product-page-only styles (breadcrumb list, price-state line,
   key facts, media panel). Built from the 00-tokens.css tokens; new names
   only. The price-state chip classes belong to 01-components.css and the
   photo/3D panel classes to their own layers, so none are redefined here. */

nav.breadcrumb { font-size:var(--text-sm); color:var(--muted); margin-bottom:var(--space-5); }

.breadcrumb-list { display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none; }
.breadcrumb-list li { margin:0; }
.breadcrumb-list li + li { margin-top:0; }
.breadcrumb-list li + li::before { content:'/'; margin:0 var(--space-2); color:var(--line-strong); }
.breadcrumb-list a { color:var(--accent-dark); }

.product-price-state { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); margin-top:var(--space-3); }
.price-state-amount { color:var(--muted); font-size:var(--text-sm); }
.price-state-text { color:var(--ink); font-size:var(--text-sm); }

.product-keyfacts { margin-top:var(--space-4); }

.product-media { margin:var(--space-5) 0; }
.product-media > .illustration { max-width:14rem; margin:0 auto var(--space-3); }

/* css/21-catalogue.css */
/* Catalogue row internals (s1-catalogue): thumbnail + text grid, key facts,
   price-state chip and view link. Tokens only; the two-column .catalogue-row
   grid and row borders stay in catalogue.css/workbench.css. */
.catalogue-row-main { --thumb:var(--space-8); display:grid; grid-template-columns:var(--thumb) minmax(0,1fr); gap:var(--space-4); align-items:start; }
.catalogue-row-main .thumb { margin:0; }
.catalogue-row-main .catalogue-row-text { min-width:0; }
.catalogue-row-main .catalogue-spec-notes { grid-column:2; }
.catalogue-row-main .catalogue-facts { margin:0 0 var(--space-3); }
.catalogue-row-aside .catalogue-price-chip { margin:0 0 var(--space-3); }
.catalogue-view-link { display:inline-flex; align-items:center; min-height:var(--tap); font-weight:650; color:var(--accent-dark); }
@media(max-width:650px) {
  .catalogue-row-main { --thumb:var(--space-7); }
}

/* css/30-builder.css */
/* s1-builder: slot illustrations, compact rows, phone-only extra slots
   (GPU 2/3, Drive 2) and the sticky bottom summary bar. Tokens only; this
   layer comes after workbench.css, so equal-specificity rules win here. */

/* (a) one small tinted category illustration per slot row */
.build-row-label { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.build-row-label::before { content:""; flex:none; width:2rem; height:2rem; border-radius:var(--radius); background-color:var(--tint); background-repeat:no-repeat; background-position:center; background-size:contain; }
.build-row[data-category="cpu"] .build-row-label::before { background-image:url(/assets/illustrations/cpu.svg); }
.build-row[data-category="cooler"] .build-row-label::before { background-image:url(/assets/illustrations/cooler.svg); }
.build-row[data-category="motherboard"] .build-row-label::before { background-image:url(/assets/illustrations/motherboard.svg); }
.build-row[data-category="memory"] .build-row-label::before { background-image:url(/assets/illustrations/memory.svg); }
.build-row[data-category="storage"] .build-row-label::before { background-image:url(/assets/illustrations/storage.svg); }
.build-row[data-category="gpu"] .build-row-label::before { background-image:url(/assets/illustrations/gpu.svg); }
.build-row[data-category="case"] .build-row-label::before { background-image:url(/assets/illustrations/case.svg); }
.build-row[data-category="psu"] .build-row-label::before { background-image:url(/assets/illustrations/psu.svg); }

/* (b) compact rows */
.build-row { padding-block:var(--space-3); }

/* (d) the add-another controls are a phone feature (hidden above 800px);
   the conflicts mirror uses the warn colour and stays out of the way when empty */
.build-add-another { display:none; }
.build-conflicts-summary { color:var(--warn); font-weight:650; }
.build-conflicts-summary:empty { display:none; }

@media (max-width:800px) {
  /* (c) extra rows stay hidden until a part is chosen there or the visitor
     reveals them (data-show on #build-rows) */
  .build-rows .build-row[data-slot="gpu2"],
  .build-rows .build-row[data-slot="gpu3"],
  .build-rows .build-row[data-slot="storage2"] { display:none; }
  .build-rows .build-row[data-slot="gpu2"].is-chosen,
  .build-rows .build-row[data-slot="gpu3"].is-chosen,
  .build-rows .build-row[data-slot="storage2"].is-chosen,
  #build-rows[data-show~="gpu2"] .build-row[data-slot="gpu2"],
  #build-rows[data-show~="gpu3"] .build-row[data-slot="gpu3"],
  #build-rows[data-show~="storage2"] .build-row[data-slot="storage2"] { display:grid; }
  .build-add-another:not([hidden]) { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
  /* (e) the summary becomes a bar at the bottom of the screen and never
     hides a focused control */
  html { scroll-padding-bottom:7rem; }
  .build-summary { position:sticky; bottom:0; z-index:5; max-height:70vh; overflow:auto; box-shadow:var(--shadow-2); }
  .page-build main { padding-bottom:var(--space-7); }
}