/* ==========================================================================
   togo-lab-cards.css — screen + print styles for the /lab-card-* pages
   Cluster 35 (items 1141-1145) of upgrade-roadmap-2000.md.

   Each lab-card page is a single A4 sheet with:
     - factual table-driven content (no marketing)
     - white background, black text, full-bleed minimal margins on print
     - dark-mode preview on screen (matches site chrome)

   This file complements togo-print.css. The .lab-sheet / .ref-card classes
   and the @media print rules in togo-print.css remain the source of truth
   for chrome-stripping. This file adds layout primitives unique to lab
   cards (multi-column grids, tier rows, mini-bars).
========================================================================== */

/* Wrapper around the printable artifact — gives screen-mode a soft frame
   so the user knows what will appear on paper. */
.lab-card-frame {
  display: block;
  margin: 0 auto;
  max-width: 21cm;
  padding: 0;
}

/* Card body — same visual language as .lab-sheet but with denser typography
   tuned for tabular reference data. */
.lab-card {
  background: #fff;
  color: #000;
  padding: 1.4cm 1.4cm 1.2cm;
  margin: 0 auto 2rem;
  max-width: 21cm;
  min-height: 27.4cm;             /* feels like a sheet on screen */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}

.lab-card__header {
  border-bottom: 2px solid #000;
  padding-bottom: 0.6em;
  margin-bottom: 1.1em;
}
.lab-card__eyebrow {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #555;
  margin: 0 0 0.2em;
}
.lab-card__title {
  font-size: 1.45rem;
  margin: 0 0 0.2em;
  color: #000;
  letter-spacing: -0.005em;
}
.lab-card__sub {
  font-size: 0.85rem;
  color: #444;
  margin: 0;
}

.lab-card__section {
  margin: 1.1em 0 1.4em;
  break-inside: avoid;
  page-break-inside: avoid;
}
.lab-card__section h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #000;
  margin: 0 0 0.5em;
  border-bottom: 1px solid #999;
  padding-bottom: 0.25em;
}
.lab-card__section p {
  margin: 0 0 0.5em;
  font-size: 0.82rem;
  color: #222;
}

/* Table style — uniform across every lab card */
.lab-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 0 0 0.6em;
  color: #000;
}
.lab-card th,
.lab-card td {
  border: 1px solid #888;
  padding: 0.36em 0.55em;
  text-align: left;
  vertical-align: top;
  color: #000;
}
.lab-card th {
  background: #ececec;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.lab-card td.num,
.lab-card th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tier-band rows for half-life card */
.lab-card__band {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 0.6em;
  align-items: stretch;
  margin: 0 0 0.55em;
  break-inside: avoid;
}
.lab-card__band-label {
  background: #000;
  color: #fff;
  padding: 0.45em 0.6em;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lab-card__band-label small {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #cfcfcf;
  text-transform: none;
  margin-top: 0.1em;
}
.lab-card__band-body {
  border: 1px solid #888;
  padding: 0.4em 0.6em;
  font-size: 0.78rem;
  color: #000;
}
.lab-card__band-body strong { font-weight: 700; }

/* Two-column layout (used for storage-card + conversions card) */
.lab-card__cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em;
}
.lab-card__cols-2 > * { break-inside: avoid; }

/* Glossary 3-column print layout */
.lab-card__glossary-cols {
  column-count: 3;
  column-gap: 0.9em;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #000;
}
.lab-card__glossary-term {
  break-inside: avoid;
  margin-bottom: 0.45em;
}
.lab-card__glossary-term dt {
  font-weight: 700;
  display: inline;
  color: #000;
}
.lab-card__glossary-term dd {
  display: inline;
  margin: 0 0 0 0.25em;
  color: #333;
}

/* Footer / disclaimer line */
.lab-card__footer {
  margin-top: 1.3em;
  padding-top: 0.5em;
  border-top: 1px solid #999;
  font-size: 0.66rem;
  color: #666;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Dark-mode preview: invert colours just for the page chrome around the
   card so it stays readable on the public site. The card itself remains
   bright white — exactly how it will print. */
[data-theme="dark"] .lab-card-frame,
body[data-page^="lab-card-"] .lab-card-frame {
  /* nothing extra; chrome handled by site stylesheet */
}

@media screen and (max-width: 640px) {
  body[data-page^="lab-card-"] .lab-card-frame {
    width: 100%;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }

  body[data-page^="lab-card-"] .lab-card {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 18px 14px 16px;
    box-sizing: border-box;
    overflow: hidden;
  }

  body[data-page^="lab-card-"] .lab-card__cols-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7em;
  }

  body[data-page^="lab-card-"] .lab-card table {
    max-width: 100%;
    table-layout: fixed;
    font-size: 0.68rem;
  }

  body[data-page^="lab-card-"] .lab-card th,
  body[data-page^="lab-card-"] .lab-card td {
    padding: 0.34em 0.38em;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body[data-page^="lab-card-"] .lab-card td.num,
  body[data-page^="lab-card-"] .lab-card th.num {
    white-space: normal;
  }

  body[data-page^="lab-card-"] .lab-card__band {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35em;
  }
}

/* Print rules: full-bleed A4, pure white, every chrome element gone.
   Most chrome is already hidden by togo-print.css. We just make the card
   itself fill the page and drop screen decoration. */
@media print {
  @page {
    size: A4;
    margin: 1.5cm;
  }
  body[data-page^="lab-card-"] {
    background: #fff !important;
    color: #000 !important;
  }
  body[data-page^="lab-card-"] .hero,
  body[data-page^="lab-card-"] .section__eyebrow,
  body[data-page^="lab-card-"] .lede,
  body[data-page^="lab-card-"] .print-button,
  body[data-page^="lab-card-"] [data-no-print] {
    display: none !important;
  }
  .lab-card-frame { max-width: 100% !important; }
  .lab-card {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
  .lab-card__band-label {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lab-card th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}