/* The site's one stylesheet. Plain CSS with no build step: colour tokens, then the page column,
   then each part. A wide comparison table's rows become cards on a phone. */

:root {
  --ink: #1f2328;
  --muted: #57606a;
  --bg: #ffffff;
  --card: #f4f5f7;
  --rule: #dcdfe3;
  --accent: #1c5d8f;
  --accent-ink: #ffffff;
  --measure: 46rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e2e5e9;
    --muted: #9aa3ad;
    --bg: #14171b;
    --card: #1c2025;
    --rule: #2d333a;
    --accent: #80b6e4;
    --accent-ink: #0d1116;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: calc(var(--measure) + 32px);
  padding: 0 16px 48px;
  font: 17px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 1.2rem 0 .3rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
ul, ol { padding-left: 1.35rem; }
li { margin-bottom: .35rem; }

.site-header { padding: 18px 0 12px; border-bottom: 1px solid var(--rule); }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }

.crumbs ol { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; font-size: .9rem; color: var(--muted); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .3rem; }

.page-note, .lede { color: var(--muted); }
/* Dates, "not tested" and the affiliate disclosure on one quiet line under the title. */
.page-note { font-size: .85rem; margin: 0 0 1.2rem; }
.page-note span + span::before { content: " · "; }

/* The opening answer, set apart so a reader who stops there still has it. */
.answer p { font-size: 1.1rem; border-left: 4px solid var(--accent); padding: .1rem 0 .1rem .9rem; }

/* The quick answer: a card per choice, side by side where there's room, buttons level at the foot. */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; margin: 1.2rem 0 2rem; }
.pick { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: .2rem 1.1rem 1rem; }
.pick h2 { font-size: 1.1rem; margin: .9rem 0 .4rem; }
.pick ul { margin: 0 0 .9rem; }
.pick .shop-grid { margin-top: auto; }
.pick .shop-list { margin: 0; }
.pick .shop-list li { border-bottom: 0; border-top: 1px solid var(--rule); }
.pick .shop-list li:last-child { padding-bottom: 0; }

.cite { font-size: .72em; line-height: 0; margin-left: 1px; }
.cite a { text-decoration: none; }
.fact { font-weight: 600; }

/* Comparison tables. The row label column is the bold one. */
.table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--rule); border-radius: 12px; }
table.compare { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
table.compare th, table.compare td { text-align: left; vertical-align: top; padding: .65rem .85rem; border-bottom: 1px solid var(--rule); }
table.compare thead th { background: var(--card); font-weight: 700; }
table.compare tbody th { font-weight: 600; }
table.compare tbody tr:last-child > * { border-bottom: 0; }
table.compare .help { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }
table.compare .part { display: block; }
table.compare .part + .part { margin-top: .35rem; }

/* On a phone, a table of four or more columns would scroll sideways with no sign of the columns
   it hides. So each row becomes a card: the spec on top, then each value beside its product. */
@media (max-width: 640px) {
  .table-wrap.stack { overflow-x: visible; border: 0; border-radius: 0; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; }
  table.stack tr { border: 1px solid var(--rule); border-radius: 12px; padding: .75rem .9rem; margin-bottom: .75rem; }
  table.stack tbody th, table.stack td { padding: 0; border: 0; }
  table.stack tbody th { font-size: 1.02rem; padding-bottom: .2rem; }
  table.stack td { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--rule); }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; font-weight: 600; }
}

/* Photos: a paragraph of their own with a quiet caption. The scenes are all 16:9, so the space is
   held before the image loads and the page doesn't jump. */
p.photo { margin: 1.4rem 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.photo-caption { display: block; margin-top: .4rem; font-size: .8rem; line-height: 1.35; color: var(--muted); }

/* Charts drawn from the table's values (ChartMarkup): bars, and cabinets side-on to one scale. */
p.figure { margin: 1.4rem 0; }
.chart { display: grid; gap: .5rem; border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; font-size: .92rem; line-height: 1.35; container-type: inline-size; }
.chart-title { font-weight: 700; }
.bar-row { display: grid; grid-template-columns: minmax(7rem, 32%) 1fr auto; gap: .4rem .7rem; align-items: center; }
.bar-track { display: block; height: .7rem; background: var(--card); border-radius: 99px; overflow: hidden; }
.bar { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-value.missing { color: var(--muted); font-weight: 400; }
/* Each cabinet keeps at least 4.5rem, so its number stays readable on a phone; past that the
   drawing scrolls sideways inside its box. */
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; width: 100%; overflow-x: auto; }
.profile-art { display: block; width: 100%; min-width: calc(var(--n) * 4.5rem); height: auto; }
.profile-art .grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.profile-art .wall, .profile-art .ground { stroke: var(--muted); stroke-width: 2; vector-effect: non-scaling-stroke; }
.profile-art .cab { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.profile-art .num { fill: var(--muted); font: 600 var(--num, 5px) sans-serif; text-anchor: middle; }
.profile-labels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .7rem; font-size: .84rem; }
.profile-label b { display: block; }
.chart-note { font-size: .8rem; color: var(--muted); }
@container (max-width: 520px) {
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .profile-labels { grid-template-columns: 1fr; gap: .3rem; }
}

/* Check-price links, at the foot of the page and in each pick card: one grid across every brand,
   model names in the first column and buttons in the second, so the buttons line up under each
   other. Each list and row passes the columns down. Where there's no room, the button goes under
   its name. */
.shop-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; }
.shop-grid h3, .shop-list, .shop-list li { grid-column: 1 / -1; }
.shop-list, .shop-list li { display: grid; grid-template-columns: subgrid; }
.shop-list { list-style: none; padding: 0; margin: 0; }
.shop-list li { align-items: center; row-gap: .4rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.shop-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop, .pick { container-type: inline-size; }
@container (max-width: 24rem) {
  .shop .shop-grid { grid-template-columns: 1fr; }
}
@container (max-width: 14rem) {
  .pick .shop-grid { grid-template-columns: 1fr; }
}
.shop-link { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: .92rem; text-decoration: none; padding: .45rem .9rem; border-radius: 8px; }

.sources, .changes { font-size: .9rem; color: var(--muted); }
.sources li:target { background: var(--card); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.page-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.page-list li { margin: 0; }
.page-list a { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: .8rem 1rem; text-decoration: none; color: var(--ink); }
.page-list a:hover, .page-list a:focus-visible { border-color: var(--accent); }
.page-list b { display: block; color: var(--accent); }
.page-list span { font-size: .92rem; color: var(--muted); }

.site-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--muted); }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }