/* symbrew — lab pages: /pages/lab-reports (Paper 10a) and the batch metaobject page /pages/batch/<lot> (Paper 10b).
   Values from Paper "Brand book v3 (EN)" via get_jsx. Classes: sb-lab-* (list page), sb-batchpage-* (batch page). */

:root { --sb-lab-row-line: color-mix(in srgb, var(--sb-cobalt) 20%, transparent); }

.sb-lab-hero, .sb-lab-list, .sb-lab-tests, .sb-batchpage-hero, .sb-batchpage-results {
  --sb-lab-pad: max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2 + var(--sb-gutter)));
  padding-inline: var(--sb-lab-pad);
}

/* ---------- Shared: column heads + pills ---------- */
.sb-lab-list__table, .sb-batchpage-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sb-lab-list__table thead th, .sb-batchpage-table thead th {
  padding: 14px 0;
  border-bottom: 1.5px solid var(--sb-cobalt);
  font: 400 12px/16px var(--sb-font-mono); letter-spacing: 0.08em;
  color: var(--sb-cobalt); text-align: left; text-transform: uppercase;
}
.sb-lab-pill, .sb-batchpage-pill {
  display: inline-block; border-radius: 999px;
  font-family: var(--sb-font-mono); color: var(--sb-ink); white-space: nowrap;
}
.sb-lab-pill { padding: 5px 10px; font-size: 12px; line-height: 16px; }
.sb-lab-pill--passed { background: var(--sb-lime); }
.sb-lab-pill--pending { border: 1px solid var(--sb-ink); }

/* =========================================================
   10a — Lab reports
   ========================================================= */
.sb-lab-hero { display: flex; align-items: flex-end; gap: 64px; padding-block: 72px 56px; }
.sb-lab-hero__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sb-lab-hero__title {
  font: 800 96px/90px var(--sb-font-display); letter-spacing: -0.05em;
  color: var(--sb-cobalt); margin: 0;
}
.sb-lab-hero__body { width: 560px; max-width: 100%; font: 400 19px/29px var(--sb-font-text); color: var(--sb-ink); }

.sb-lab-find {
  flex-shrink: 0; width: 440px; max-width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px; border-radius: 20px;
  background: var(--sb-cobalt); color: var(--sb-cream);
}
.sb-lab-find__title { margin: 0; font: 600 16px/20px var(--sb-font-text); }
.sb-lab-find__note { font: 400 13px/19px var(--sb-font-text); opacity: 0.85; }
.sb-lab-find .sb-batch { width: 100%; gap: 8px; }
/* the kit writes inline padding/height on its controls → !important is the only override; scoped to this card */
.sb-lab-find .sb-batch .sb-batch__input, .sb-lab-find .sb-batch .sb-batch__submit {
  height: 52px !important; padding-block: 0 !important;
}
.sb-lab-find .sb-batch .sb-batch__input { padding-inline: 20px !important; }
.sb-lab-find .sb-batch .sb-batch__submit { padding-inline: 22px !important; font-size: 15px !important; line-height: 18px !important; }
.sb-lab-find .sb-batch__error { color: var(--sb-lime); }
/* no-JS fallback (replaced by the island when it mounts) */
.sb-lab-find__fallback { display: flex; gap: 8px; }
.sb-lab-find__fallback input {
  flex: 1 1 0; min-width: 0; height: 52px; padding-inline: 20px; border: 0; border-radius: 999px;
  background: var(--sb-cream); color: var(--sb-ink); font: 400 15px/18px var(--sb-font-mono);
}
.sb-lab-find__fallback input::placeholder { color: color-mix(in srgb, var(--sb-ink) 50%, transparent); }
.sb-lab-find__fallback .sb-btn { height: 52px; padding: 0 22px; font-size: 15px; line-height: 18px; }

.sb-lab-list { padding-bottom: 64px; scroll-margin-top: 24px; }
.sb-lab-list__table thead th:nth-child(1) { width: 220px; }
.sb-lab-list__table thead th:nth-child(2) { width: 200px; }
.sb-lab-list__table thead th:nth-child(3) { width: 200px; }
.sb-lab-list__table thead th:nth-child(4) { width: 260px; }
.sb-lab-list__table thead th:nth-child(6) { width: 120px; }
.sb-lab-list__table .sb-lab-list__end { text-align: right; }
.sb-lab-list__row > * {
  padding: 20px 0; border-bottom: 1px solid var(--sb-lab-row-line);
  font: 400 17px/22px var(--sb-font-text); color: var(--sb-ink); text-align: left; vertical-align: middle;
}
.sb-lab-list__row > .sb-lab-list__end { text-align: right; }
.sb-lab-list__row.is-pending > * { opacity: 0.55; }
.sb-lab-list__batch { font: 500 17px/22px var(--sb-font-mono) !important; }
.sb-lab-list__mg { color: var(--sb-tangerine); font-weight: 600; }
.sb-lab-list__link {
  color: var(--sb-cobalt) !important; font-weight: 600; text-decoration: none;
  transition: opacity 150ms var(--sb-ease);
}
@media (hover: hover) and (pointer: fine) { .sb-lab-list__link:hover { text-decoration: underline; text-underline-offset: 3px; } }

.sb-lab-tests { display: flex; gap: 20px; padding-bottom: 96px; }
.sb-lab-tests__card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px; border-radius: 20px; background: #FFFFFF; color: var(--sb-ink);
}
.sb-lab-tests__eyebrow { font: 400 12px/16px var(--sb-font-mono); letter-spacing: 0.08em; color: var(--sb-cobalt); }
.sb-lab-tests__title { margin: 0; font: 800 28px/34px var(--sb-font-display); letter-spacing: -0.03em; }
.sb-lab-tests__body { font: 400 15px/23px var(--sb-font-text); }

/* =========================================================
   10b — Single batch
   ========================================================= */
.sb-batchpage-hero {
  display: flex; gap: 56px; padding-block: 56px 64px;
  background: var(--sb-cobalt); color: var(--sb-cream);
}
.sb-batchpage-hero__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sb-batchpage-hero__eyebrow { font: 400 13px/16px var(--sb-font-mono); letter-spacing: 0.08em; color: var(--sb-lime); }
.sb-batchpage-hero__eyebrow a { color: var(--sb-lime) !important; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sb-batchpage-hero__eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.sb-batchpage-hero__number {
  margin: 0; font: 500 88px/88px var(--sb-font-mono); letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.sb-batchpage-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sb-batchpage-hero__meta p { font: 400 16px/20px var(--sb-font-text); }
.sb-batchpage-pill { padding: 7px 14px; font-size: 13px; line-height: 16px; background: var(--sb-lime); }
.sb-batchpage-pill.is-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--sb-cream); color: var(--sb-cream); }
.sb-batchpage-hero__intro { width: 600px; max-width: 100%; padding-top: 8px; font: 400 19px/29px var(--sb-font-text); }

.sb-batchpage-dial {
  flex-shrink: 0; width: 300px; height: 300px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--sb-tangerine); color: var(--sb-cream);
}
.sb-batchpage-dial__figure { font: 800 72px/66px var(--sb-font-display); letter-spacing: -0.05em; }
.sb-batchpage-dial__label { font: 400 13px/16px var(--sb-font-mono); letter-spacing: 0.08em; }

.sb-batchpage-results { display: flex; align-items: flex-start; gap: 56px; padding-block: 64px 96px; }
.sb-batchpage-table { flex: 1 1 0; min-width: 0; }
.sb-batchpage-table thead th:nth-child(1) { width: 30.4%; }
.sb-batchpage-table thead th:nth-child(2) { width: 21.7%; }
.sb-batchpage-table thead th:nth-child(3) { width: 21.7%; }
.sb-batchpage-table tbody > tr > * {
  padding: 18px 12px 18px 0; border-bottom: 1px solid var(--sb-lab-row-line);
  font: 400 16px/20px var(--sb-font-text); color: var(--sb-ink); text-align: left; vertical-align: top;
}
.sb-batchpage-table tbody > tr:last-child > * { border-bottom: 0; }
.sb-batchpage-table tbody th { font-weight: 600; }
.sb-batchpage-table .sb-batchpage-table__result { font-family: var(--sb-font-mono); }

.sb-batchpage-side { flex-shrink: 0; width: 380px; display: flex; flex-direction: column; gap: 14px; }
.sb-batchpage-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; color: var(--sb-ink); }
.sb-batchpage-card--report { background: #FFFFFF; }
.sb-batchpage-card--read { background: var(--sb-sprout); gap: 8px; }
.sb-batchpage-card__title { margin: 0; font: 700 17px/22px var(--sb-font-text); }
.sb-batchpage-card__body { font: 400 14px/21px var(--sb-font-text); }
.sb-batchpage-card__body a { color: var(--sb-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sb-batchpage-card__body a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.sb-batchpage-card__btn { padding: 13px; font-size: 15px; line-height: 18px; }
.sb-batchpage-card__btn.is-sample { cursor: not-allowed; }
.sb-batchpage-card__sample { font: 400 12px/16px var(--sb-font-mono); color: color-mix(in srgb, var(--sb-ink) 65%, transparent); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1279px) {
  .sb-lab-hero__title { font-size: 80px; line-height: 76px; }
  .sb-lab-list__table thead th:nth-child(1) { width: 180px; }
  .sb-lab-list__table thead th:nth-child(2),
  .sb-lab-list__table thead th:nth-child(3) { width: 150px; }
  .sb-lab-list__table thead th:nth-child(4) { width: 180px; }
  .sb-batchpage-hero__number { font-size: 72px; line-height: 72px; }
  .sb-batchpage-dial { width: 240px; height: 240px; }
  .sb-batchpage-dial__figure { font-size: 60px; line-height: 56px; }
  .sb-batchpage-results { flex-direction: column; align-items: stretch; gap: 40px; }
  .sb-batchpage-side { width: 100%; flex-direction: row; }
  .sb-batchpage-card { flex: 1 1 0; }
}

@media (max-width: 899px) {
  .sb-lab-hero { flex-direction: column; align-items: stretch; gap: 32px; padding-block: 48px 40px; }
  .sb-lab-hero__title { font-size: 56px; line-height: 54px; }
  .sb-lab-hero__body { font-size: 17px; line-height: 26px; }
  .sb-lab-find { width: 100%; padding: 22px; }

  /* Tables → stacked rows */
  .sb-lab-list__table, .sb-lab-list__table tbody, .sb-lab-list__table tr,
  .sb-batchpage-table, .sb-batchpage-table tbody, .sb-batchpage-table tr { display: block; width: 100%; }
  .sb-lab-list__table thead, .sb-batchpage-table thead { display: none; }
  .sb-lab-list__table { border-top: 1.5px solid var(--sb-cobalt); }
  .sb-lab-list__row {
    display: grid !important; grid-template-columns: 1fr auto; gap: 10px 16px;
    padding: 18px 0; border-bottom: 1px solid var(--sb-lab-row-line);
  }
  .sb-lab-list__row > * { display: block; padding: 0; border: 0; }
  .sb-lab-list__row > td:not(.sb-lab-list__end)::before,
  .sb-batchpage-table td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font: 400 11px/14px var(--sb-font-mono); letter-spacing: 0.08em; color: var(--sb-cobalt);
  }
  .sb-lab-list__batch { grid-column: 1; }
  .sb-lab-list__row > .sb-lab-list__end { grid-column: 2; grid-row: 1; }
  .sb-lab-list__row > td:nth-child(2), .sb-lab-list__row > td:nth-child(4) { grid-column: 1; }
  .sb-lab-list__row > td:nth-child(3), .sb-lab-list__row > td:nth-child(5) { grid-column: 2; text-align: right; }

  .sb-lab-tests { flex-direction: column; gap: 14px; padding-bottom: 72px; }
  .sb-lab-tests__card { padding: 24px; }
  .sb-lab-tests__title { font-size: 24px; line-height: 30px; }

  .sb-batchpage-hero { flex-direction: column; gap: 32px; padding-block: 40px 48px; }
  .sb-batchpage-hero__eyebrow { font-size: 11px; line-height: 14px; }
  .sb-batchpage-hero__number { font-size: 48px; line-height: 52px; }
  .sb-batchpage-hero__intro { font-size: 17px; line-height: 26px; padding-top: 0; }
  .sb-batchpage-dial { width: 200px; height: 200px; align-self: center; }
  .sb-batchpage-dial__figure { font-size: 52px; line-height: 50px; }
  .sb-batchpage-dial__label { font-size: 11px; line-height: 14px; }

  .sb-batchpage-results { padding-block: 40px 72px; gap: 32px; }
  .sb-batchpage-table { border-top: 1.5px solid var(--sb-cobalt); }
  .sb-batchpage-table tbody > tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
    padding: 16px 0; border-bottom: 1px solid var(--sb-lab-row-line);
  }
  .sb-batchpage-table tbody > tr:last-child { border-bottom: 0; }
  .sb-batchpage-table tbody > tr > * { display: block; padding: 0; border: 0; }
  .sb-batchpage-table tbody th { grid-column: 1 / -1; }
  .sb-batchpage-table td:last-child { grid-column: 1 / -1; }
  .sb-batchpage-side { flex-direction: column; }
}