/* ============================================================================
   testing/compare · page sheet, scoped to `.tcmp` on <body>

   Loaded AFTER devices/ring/compare-materials/compare.css, which draws the
   heads, the sticky name bar, the shaped rows, the "same in all" grid
   and the closing frame. This sheet only carries what the test page does
   differently: the column head's six parts (picker, kit shot, category,
   name, price, Buy; no finish discs) and the report section lists. Type is
   on the Band ladder, nothing under 15px.
   ========================================================================= */

/* ---- 1 · the column head ---------------------------------------------------
   Six parts in one order: picker, photograph, category, name, price, Buy. */
@supports (grid-template-rows: subgrid) {
  .tcmp .cmp-heads { grid-template-rows: repeat(6, auto); }
}
.tcmp .cmp-fig { aspect-ratio: 16 / 11; }
.tcmp .cmp-fig img { object-position: center; padding: 4% 12% 2%; box-sizing: border-box; }
.tcmp-cat {
  margin: 0 0 6px;
  font-size: 16px; line-height: 22px;
  color: var(--cmp-accent);
}
.tcmp .cmp-name { font-size: clamp(21px, 1.8vw, 26px); }

.tcmp .cmp-barc img { width: 44px; height: 36px; }

/* ---- 2 · inside the report ------------------------------------------------
   Every section each test's report carries, one list per column. Lists are
   not line aligned: the counts differ (7 to 16) and that difference is the
   point, so each list runs its own length. */
.tcmp-lists { align-items: start; }
.tcmp-list {
  margin: 0; padding: 0 clamp(0px, 1.6vw, 24px);
  list-style: none;
  counter-reset: sec;
  display: grid; gap: 12px;
}
.tcmp-list li {
  counter-increment: sec;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px;
  font-size: 17px; line-height: 1.4;
  color: var(--cmp-ink);
}
.tcmp-list li::before {
  content: counter(sec, decimal-leading-zero);
  font-size: 15px; line-height: 1.6; font-weight: 600;
  color: #203a85;
  font-variant-numeric: tabular-nums;
}

/* ---- 3 · same in all six: three to a row, so six is two full rows ------- */
.tcmp .tcmp-same-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- 4 · narrower screens ------------------------------------------------- */
@media (max-width: 1180px) {
  .tcmp .tcmp-same-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tcmp .tcmp-same-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---- 5 · on a phone: two side by side (2026-10-09) ------------------------
   Three columns ran off a 390 screen with nothing to say there was a third,
   and the two Buy buttons in view met edge to edge. A phone now compares TWO,
   the way apple.com's compare does: both fit, no sideways scroll, a clear
   gutter between them, and either picker can bring in any of the six (the
   third column is still chosen, only hidden; tests.js lets its test be picked
   and swaps them). The name bar stays, stuck under the navigation, smaller. */
@media (max-width: 734px) {
  .tcmp { --cmp-cols: repeat(2, minmax(0, 1fr)); --cmp-gap: 20px; }
  .tcmp .cmp-table { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tcmp .cmp-heads, .tcmp .cmp-bar, .tcmp .cmp-rows { min-width: 0; }
  .tcmp [data-slot="2"],
  .tcmp .cmp-lines > :nth-child(3n) { display: none; }

  .tcmp .cmp-pick { margin-bottom: 14px; }
  .tcmp .cmp-pick select { height: 42px; font-size: 15px; line-height: 40px; padding-inline: 12px 30px; border-radius: 10px; background-position: right 10px center; }
  .tcmp .cmp-fig { margin-bottom: 12px; }
  .tcmp .cmp-fig img { padding: 2% 4% 0; }
  .tcmp-cat { margin-bottom: 4px; font-size: 13px; line-height: 18px; }
  .tcmp .cmp-name { font-size: 18px; line-height: 1.22; }
  .tcmp .cmp-price { margin: 4px 0 14px; font-size: 15px; line-height: 20px; }
  .tcmp .cmp-buy { min-height: 44px; height: auto; padding: 10px 12px; font-size: 16px; }

  .tcmp .cmp-bar { position: sticky; padding: 8px 0; margin-top: 4px; }
  .tcmp .cmp-top { padding-bottom: 8px; }
  .tcmp .cmp-rows .cmp-grp:first-child { padding-top: 12px; }
  .tcmp .cmp-barc { gap: 8px; }
  .tcmp .cmp-barc img { display: block; width: 34px; height: 28px; }
  .tcmp .cmp-barn { font-size: 14px; line-height: 18px; }
  .tcmp .cmp-barp { font-size: 13px; line-height: 17px; }

  .tcmp .cmp-grp-h { justify-content: center; }
  .tcmp .cmp-pill { position: relative; left: auto; font-size: 16px; padding: 6px 15px 6px 12px; }
  .tcmp .cmp-ln { padding-inline: 0; font-size: 15px; line-height: 21px; }
  .tcmp .cmp-ic { width: 34px; height: 34px; }
  .tcmp .cmp-lines { row-gap: 22px; }
  .tcmp-list { padding: 0; gap: 10px; }
  .tcmp-list li { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
  .tcmp-list li::before { font-size: 12px; line-height: 1.7; }

  /* The name bar shows once the heads have scrolled away (tests.js sets
     .is-stuck), so it does not repeat the names right under them. */
  .tcmp .cmp-bar { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
  .tcmp .cmp-bar.is-stuck { opacity: 1; visibility: visible; transition: opacity .25s; }
}