/* Precision Labs — the two trust pages: purity & testing, and batch lookup.

   Rules this file keeps to, all of them the same rules the rest of the theme
   keeps to:

     • Every colour is a var(--pl-*) from tokens.css. There are no literals.
     • Every corner is square. The border-radius: 0 declarations below are
       deliberate — iOS rounds search inputs and buttons on its own, so they
       have to be said out loud, not merely omitted.
     • Nothing under 12px, and no interactive box under 44px, below 768px.
       The site is audited for both at 375/390/412px and must keep passing.
     • Wide tables scroll inside .pl-table-scroll. The page itself never scrolls
       sideways, so the tables are allowed to be as wide as their content needs.

   The shared component kit (.pl-wrap, .pl-section, .pl-card, .pl-panel,
   .pl-info, .pl-btn, .pl-badge, .pl-field, the type scale) is defined in
   base.css and is only ever extended here, never redefined.

   Load order note: this file is enqueued after lab.css and before mobile.css,
   so mobile.css's small-screen corrections still win ties without !important. */

/* ══ shared ═══════════════════════════════════════════════════════════════ */

/* The one containment box every wide table on these pages sits in. mobile.css
   already flips this to display:block below 768px; declaring it here makes it
   true at every width, which is where the desktop 1280px report table needs it
   on a narrow laptop.

   position: relative is NOT decoration. Measured at 375px: the visually hidden
   `<span class="pl-sr">` in the report table's last header cell is
   position:absolute, so without a positioned ancestor its containing block is
   the page itself. It then escapes this box's clip and lands at x=848 — a 1px
   element that dragged documentElement.scrollWidth to 849 and scrolled the
   whole page sideways by 474px, while the table inside was behaving perfectly.
   Making this box the containing block clips the hidden span with everything
   else. Any .pl-sr inside any scroll container needs this. */
.pl-table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pl-rtable {
  min-width: 100%;
  border-collapse: collapse;
  background: var(--pl-surface);
}

.pl-rtable caption { text-align: left; }

.pl-rtable thead th {
  padding: 13px 16px;
  background: var(--pl-surface-alt);
  border-bottom: 1px solid var(--pl-bd-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pl-muted);
  text-align: left;
  white-space: nowrap;
}

.pl-rtable tbody th,
.pl-rtable tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--pl-bd);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.pl-rtable tbody tr:last-child th,
.pl-rtable tbody tr:last-child td { border-bottom: 0; }

.pl-rtable tbody tr:hover { background: var(--pl-surface-alt); }

.pl-rtable__lot {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--pl-navy);
}

.pl-rtable__assay { font-weight: 400; color: var(--pl-muted); }
.pl-rtable__v  { font-weight: 700; color: var(--pl-ink); }
.pl-rtable__mu { color: var(--pl-muted); }

.pl-rtable__act { text-align: right; }
.pl-rtable__btn { min-width: 44px; white-space: nowrap; border-radius: 0; }

/* The certificate view's table is read, not scanned — long spec text is
   allowed to wrap rather than pushing the panel into a scroll. */
.pl-rtable--coa tbody th,
.pl-rtable--coa tbody td { white-space: normal; }
.pl-rtable--coa tbody td.pl-rtable__mu { white-space: nowrap; }

.pl-disc {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--pl-bd);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pl-muted);
  text-wrap: pretty;
}

/* ══ page 1 — purity & testing ════════════════════════════════════════════ */

.pl-trust__intro { padding-bottom: 30px; }

.pl-trust__h { margin-top: 10px; }

.pl-trust__lead {
  max-width: 720px;
  margin-top: 16px;
}

/* The editor's optional intro. Typography comes from prose.css (.pl-prose);
   only the measure and the space above it belong to this page. */
.pl-trust__prose {
  max-width: 720px;
  margin-top: 20px;
}

/* ── live aggregate stats ───────────────────────── */

.pl-trust__stats { padding-bottom: var(--pl-section-y); }

/* 1px gaps over a line-coloured backdrop draw the hairline grid without
   doubling borders where two cells meet. */
.pl-statgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  border: 1px solid var(--pl-bd);
  background: var(--pl-bd);
  list-style: none;
}

.pl-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  background: var(--pl-surface);
}

.pl-stat__n {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--pl-navy);
}

.pl-stat__k {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
}

.pl-statgrid__note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pl-faint);
}

/* ── what is measured ───────────────────────────── */

.pl-trust__cards { margin-top: 22px; }

.pl-trust__cardh { margin-top: 8px; }

.pl-trust__cards .pl-card__body > * + * { margin-top: 12px; }

.pl-trust__range {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pl-bd);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--pl-t3);
}

.pl-trust__absent { margin-top: 20px; }
.pl-trust__absent > * + * { margin-top: 12px; }

.pl-notlist {
  display: grid;
  gap: 10px;
  padding-left: 20px;
  list-style: disc;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-t2);
}
.pl-notlist li { text-wrap: pretty; }

/* ── the laboratory ─────────────────────────────── */

.pl-trust__labp { margin-top: 14px; }
.pl-trust__lab .pl-body { margin-top: 12px; }
.pl-trust__labl { margin-top: 16px; }

.pl-trust__aside > * + * { margin-top: 12px; }

/* ── every report on file ───────────────────────── */

.pl-trust__tablenote {
  max-width: 720px;
  margin-top: 12px;
}

.pl-trust__scroll { margin-top: 20px; }

.pl-trust__empty { margin-top: 18px; }

/* ══ page 2 — batch lookup ════════════════════════════════════════════════ */

.pl-lookup__intro { padding-bottom: 30px; }

.pl-lookup__h { margin-top: 10px; }

.pl-lookup__lead {
  max-width: 700px;
  margin-top: 16px;
}

.pl-lookup__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  max-width: 760px;
  margin-top: 26px;
}

.pl-lookup__field {
  flex: 1 1 300px;
  min-width: 0;
  margin-bottom: 0;
}

.pl-lookup__input {
  min-height: 52px;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: .04em;
  -webkit-appearance: none;
  appearance: none;
}

.pl-lookup__go {
  flex: 0 0 auto;
  min-height: 52px;
  border-radius: 0;
}

.pl-lookup__hint {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pl-faint);
}

/* An empty result slot must take up no room at all, or the page carries a gap
   before anyone has searched for anything. */
.pl-lookup__out:empty { display: none; }
.pl-lookup__outer:focus { outline: none; }

/* pages.js dims the previous answer while the next one is in flight. The
   reduced-motion block in base.css already neutralises the transition. */
.pl-lookup.is-busy .pl-lookup__out { opacity: .5; transition: opacity .15s; }

/* ── the certificate panel ──────────────────────── */

.pl-coa {
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
}

.pl-coa__head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--pl-bd);
}

.pl-coa__ident { flex: 1 1 260px; min-width: 0; }
.pl-coa__name { margin-top: 6px; }

.pl-coa__lot {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--pl-navy);
  overflow-wrap: anywhere;
}

.pl-coa__status { flex: none; align-self: flex-start; }

.pl-coa__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--pl-bd);
  border-bottom: 1px solid var(--pl-bd);
}

.pl-coa__metai {
  padding: 16px 26px;
  background: var(--pl-surface-alt);
}

.pl-coa__metai dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
}

.pl-coa__metai dd {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pl-ink);
  overflow-wrap: anywhere;
}

.pl-coa__results,
.pl-coa__docs { padding: 24px 26px; }

.pl-coa__results { border-bottom: 1px solid var(--pl-bd); }
.pl-coa__results .pl-table-scroll { margin-top: 10px; }

.pl-coa__fig { margin: 12px 0 16px; }
.pl-coa__fig img {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  background: var(--pl-canvas);
  border: 1px solid var(--pl-bd);
}

.pl-coa__dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
/* Two classes deep so it outranks .pl-btn--wide's width:100% in base.css. */
.pl-coa__dl .pl-btn--wide { flex: 1 1 280px; width: auto; }

.pl-coa .pl-disc {
  margin: 0;
  padding: 16px 26px;
  border-top: 1px solid var(--pl-bd);
  background: var(--pl-surface-alt);
}

/* ── the miss, and the error ────────────────────── */

.pl-lookup__miss > * + * { margin-top: 12px; }
.pl-lookup__missh { text-wrap: balance; overflow-wrap: anywhere; }

/* ── every lot on file ──────────────────────────── */

.pl-lookup__all { scroll-margin-top: 24px; }

.pl-lookup__allnote {
  max-width: 640px;
  margin-top: 12px;
}

.pl-lotlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 10px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.pl-lotchip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 13px 16px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd-strong);
  border-radius: 0;
  transition: border-color .16s, background .16s;
}
.pl-lotchip:hover { border-color: var(--pl-navy); background: var(--pl-info-bg); }

.pl-lotchip__code {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pl-navy);
  overflow-wrap: anywhere;
}

.pl-lotchip__name {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pl-muted);
}

.pl-lookup__more { margin-top: 20px; }

/* ══ responsive ═══════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .pl-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-coa__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pl-stat { padding: 20px 18px; }
  .pl-stat__n { font-size: 26px; }

  /* Below the breakpoint the button sits under the field rather than beside
     it, and takes the full row so its target is unmissable. */
  .pl-lookup__field { flex: 1 1 100%; }
  .pl-lookup__go { flex: 1 1 100%; width: 100%; }

  .pl-coa__head,
  .pl-coa__results,
  .pl-coa__docs { padding-left: 18px; padding-right: 18px; }
  .pl-coa__metai { padding-left: 18px; padding-right: 18px; }
  .pl-coa .pl-disc { padding-left: 18px; padding-right: 18px; }

  .pl-coa__dl .pl-btn--wide { flex: 1 1 100%; width: 100%; }
  .pl-coa__fig img { max-height: 220px; }

  /* Type floor. Everything here is at or above 12px at desktop already; these
     are the two that sit closest to the line once the scale steps down. */
  .pl-rtable thead th { font-size: 12px; }
  .pl-rtable tbody th,
  .pl-rtable tbody td { font-size: 13px; padding: 14px 13px; }
  .pl-statgrid__note,
  .pl-lookup__hint,
  .pl-disc { font-size: 12.5px; }

  /* Tap-target floor for the affordances this file introduces. mobile.css
     already covers .pl-btn, .pl-btn--sm and .pl-link at these widths. */
  .pl-rtable__btn,
  .pl-lotchip {
    min-height: 44px;
    min-width: 44px;
  }
  .pl-lookup__input { min-height: 48px; }
}