/* Compliance & Test Reports — page-local layout variant.
   Enqueued by functions.php only on /customization/quality-assurance/compliance/
   Class prefix: .cmp-: colours, type and radii come from assets/css/tokens.css and
   the shared pattern vocabulary in style.css; nothing here restates either. */

/* ---------- 01 · The table: read the way a lab sheet is read ----------------
   One row per report, ruled the way the specification table is (style.css §17), and
   scrolling sideways rather than being squeezed once four columns of prose no longer
   fit — the same move single-product-bottle.css makes for the spec table.        */
.cmp-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  overflow-x:auto}
table.cmp-table{width:100%;min-width:680px;border-collapse:collapse;font-size:14px}
table.cmp-table thead th{padding:11px 16px;text-align:left;vertical-align:bottom;
  border-bottom:1px solid var(--line);background:var(--off);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel)}
table.cmp-table tbody th,table.cmp-table tbody td{padding:14px 16px;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--line)}
table.cmp-table tbody tr:last-child th,
table.cmp-table tbody tr:last-child td{border-bottom:0}
table.cmp-table tbody th{width:20%;font-weight:600;color:var(--charcoal)}
table.cmp-table tbody td{color:var(--muted);line-height:1.55}
.cmp-table__scheme{width:9%;white-space:nowrap;font-weight:600;color:var(--charcoal)}
.cmp-table__res{width:26%;color:var(--ink)}

/* The two sentences that bound what a report means sit directly under the table, in
   the site's own note voice and held to a readable measure. The report's own
   abbreviations are explained once below them, as a hairline list. */
.cmp-note{margin:16px 0 0;max-width:82ch}
.cmp-keys{margin-top:clamp(24px,3vw,34px);max-width:84ch}
.cmp-keys .kicker{margin-bottom:10px}
.cmp-keys .plain{margin-bottom:0}
.cmp-keys .plain li{font-size:14px;color:var(--muted)}

/* ---------- 02 · The four documents: one ruled record per report -------------
   Four reports are a register, not four offers, so each is a ruled record rather
   than a card: the metadata in the left column, the tested items in the right, and
   the PDF on its own hairline at the foot. The heading and the download span both
   columns, so a row still reads top to bottom on a phone.                        */
.cmp-docs{margin-top:clamp(4px,1vw,10px);border-top:1px solid var(--line-2)}
.cmp-doc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(14px,1.8vw,22px);
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
.cmp-doc__h{grid-column:1 / -1;min-width:0}
.cmp-doc__h .kicker{margin-bottom:6px}
.cmp-doc__h h3{margin:0;font-size:17px}
.cmp-doc__meta{margin:0;display:grid;gap:7px;align-content:start;min-width:0}
.cmp-doc__row{display:grid;grid-template-columns:106px minmax(0,1fr);gap:0 14px}
.cmp-doc__row dt{font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.8;color:var(--steel)}
.cmp-doc__row dd{margin:0;font-size:14px;line-height:1.55;color:var(--ink);
  min-width:0;overflow-wrap:anywhere}
.cmp-doc__tests{min-width:0}
.cmp-doc__tests .kicker{margin-bottom:8px}
.cmp-list{list-style:none;margin:0;padding:0}
.cmp-list li{position:relative;margin:0 0 7px;padding-left:15px;
  font-size:14px;line-height:1.5;color:var(--muted)}
.cmp-list li::before{content:"";position:absolute;left:1px;top:.62em;width:4px;height:4px;
  border-radius:50%;background:var(--steel-2)}
.cmp-list li:last-child{margin-bottom:0}

/* The download is the page's purpose, so it carries the site's filled accent button
   (.btn) rather than the grey outline it was drawn with first: the four downloads are
   the reason the page exists, and an outline read as decoration beside the prose. */
.cmp-doc__f{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 16px;padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--line)}
.cmp-dl{padding:12px 20px;font-size:14px}
.cmp-dl__ic{display:inline-block;margin-left:7px;font-size:13px;
  transition:transform var(--dur-fast) ease}
.cmp-dl:hover .cmp-dl__ic{transform:translate(1px,-1px)}
.cmp-doc__hint{font-size:12.5px;color:var(--muted)}

/* ---------- 03 · The copy that is current -----------------------------------
   The closing band is one column of copy and the ask, so it is held to a measure
   rather than run the full width of the band; the buttons keep the shared row.    */
.cmp-ask{max-width:84ch}
.cmp-ask .kicker{margin-bottom:10px}
.cmp-ask .plain{margin-bottom:0}
.cmp-ask .head-actions{margin-top:clamp(22px,2.6vw,30px)}

/* ---------- Small screens: one column, nothing to scroll sideways ----------- */
@media (max-width:820px){
  .cmp-doc{grid-template-columns:1fr}
  .cmp-doc__row{grid-template-columns:100px minmax(0,1fr)}
}
@media (max-width:640px){
  table.cmp-table{font-size:13.5px}
  table.cmp-table thead th,table.cmp-table tbody th,table.cmp-table tbody td{padding:12px 14px}
  .cmp-doc__row{grid-template-columns:1fr;gap:1px 0}
  .cmp-doc__row dt{line-height:1.6}
  .cmp-doc__row dd{margin-bottom:7px}
  .cmp-doc__row .mono-num{margin-bottom:9px}
}
@media (prefers-reduced-motion:reduce){
  .cmp-dl__ic,.cmp-dl:hover .cmp-dl__ic{transition:none;transform:none}
}