/* /labs hub and lab profiles (2026-10-09).
 * Mobile first: the comparison table is a list of compact cards until 1024px,
 * with the desktop-only columns hidden under 720px; a full table from 1024px.
 * Theme tokens only (theme/tokens.css). Neutral 1px dividers, no gold, no
 * left-edge rules, no coloured card edges, no pills. Focus uses the global
 * neutral outline from theme/components.css. No horizontal scroll at 320px.
 * Spec: docs/changes/2026-10-09-labs-knowledge-base.md, section 7.11.
 */
html[data-tl-theme="light"][data-tl-ui="canonical"] .labs-page {
  --labs-divider: 1px solid var(--tl-border-subtle);
  padding-top: var(--tl-space-6);
  padding-bottom: var(--tl-space-8);
  color: var(--tl-text);
  overflow-wrap: break-word;
}
.labs-src, .labs-sources { overflow-wrap: anywhere; }
.labs-page :where(h1, h2, h3, p, ul, ol, dl, dd, table) { margin: 0; }
.labs-page a { color: var(--tl-action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.labs-page a:hover { color: var(--tl-action-hover); }
.labs-page .tlc-button { text-decoration: none; }

.labs-crumb { font-size: var(--tl-note-size); color: var(--tl-text-muted); margin-bottom: var(--tl-space-4); }
.labs-crumb a { color: var(--tl-text-secondary); }

.labs-head { display: grid; gap: var(--tl-space-3); max-width: var(--tl-reading-max); padding-bottom: var(--tl-space-6); border-bottom: var(--labs-divider); }
.labs-h1 {
  font-family: var(--tl-font-display); font-weight: var(--tl-heading-weight);
  font-size: var(--tl-title-size); line-height: var(--tl-heading-leading); letter-spacing: var(--tl-heading-tracking);
}
.labs-answer { font-size: 18px; line-height: 1.55; color: var(--tl-text); }
.labs-checked { font-size: var(--tl-note-size); color: var(--tl-text-muted); }
.labs-action { margin-top: var(--tl-space-2); }

.labs-section { padding: var(--tl-space-6) 0; border-bottom: var(--labs-divider); }
.labs-section:last-child { border-bottom: 0; }
.labs-section > * + * { margin-top: var(--tl-space-3); }
.labs-section > .labs-h2 + * { margin-top: 0; }
.labs-h2 {
  font-family: var(--tl-font-display); font-weight: var(--tl-heading-weight);
  font-size: var(--tl-section-title-size); line-height: var(--tl-heading-leading); letter-spacing: var(--tl-heading-tracking);
  margin-bottom: var(--tl-space-4);
}
.labs-h3 { font-size: var(--tl-subtitle-size); font-weight: var(--tl-heading-weight); margin: var(--tl-space-6) 0 var(--tl-space-3); }
.labs-prose { max-width: var(--tl-reading-max); line-height: 1.6; }
.labs-prose p + p { margin-top: var(--tl-space-3); }
.labs-note, .labs-filter, .labs-next { max-width: var(--tl-reading-max); font-size: var(--tl-note-size); color: var(--tl-text-secondary); line-height: 1.55; margin-top: var(--tl-space-3); }
.labs-filter { margin-top: 0; color: var(--tl-text); font-size: var(--tl-body-size); }
.labs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Chooser: one plain list of links. */
.labs-needs { list-style: none; padding: 0; display: grid; gap: 0; max-width: 640px; border-top: var(--labs-divider); }
.labs-needs li { border-bottom: var(--labs-divider); }
.labs-needs a { display: block; padding: var(--tl-space-3) 0; min-height: var(--tl-compact-target); font-size: 17px; }
.labs-needs a[aria-current="true"] { color: var(--tl-text); font-weight: 600; text-decoration: none; }

/* From 720px the six needs sit in two, then three, columns so the table
   starts on the first screen. */
@media (min-width: 720px) {
  .labs-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tl-space-6); max-width: 760px; }
}
@media (min-width: 1024px) {
  .labs-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
}

/* Comparison table: cards first. */
.labs-table { width: 100%; border-collapse: collapse; margin-top: var(--tl-space-4); font-size: 15px; }
.labs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.labs-table, .labs-table tbody, .labs-table tr, .labs-table th, .labs-table td { display: block; }
.labs-table tr { padding: var(--tl-space-4) 0; border-bottom: var(--labs-divider); }
.labs-table tbody tr:first-child { border-top: var(--labs-divider); }
.labs-table th, .labs-table td { padding: 2px 0; text-align: left; vertical-align: top; }
.labs-table td { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: var(--tl-space-3); }
.labs-table td::before { content: attr(data-label); color: var(--tl-text-muted); font-size: var(--tl-note-size); }
.labs-table td.labs-none { color: var(--tl-text-muted); }
.labs-lab { font-weight: 600; font-size: 17px; margin-bottom: var(--tl-space-2); }
.labs-lab a { color: var(--tl-text); }
.labs-sub { display: block; font-weight: 400; font-size: var(--tl-note-size); color: var(--tl-text-muted); }
.labs-due { display: block; font-size: 13px; color: var(--tl-warning); }
.labs-table .labs-wide { display: none; }

@media (min-width: 720px) {
  .labs-table .labs-wide { display: grid; }
}

@media (min-width: 1024px) {
  .labs-table { display: table; table-layout: auto; font-size: 14px; }
  .labs-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .labs-table tbody { display: table-row-group; }
  .labs-table tr { display: table-row; padding: 0; }
  .labs-table tbody tr:first-child { border-top: 0; }
  .labs-table th, .labs-table td, .labs-table .labs-wide, .labs-table td.labs-none { display: table-cell; padding: var(--tl-space-3) var(--tl-space-2); border-bottom: var(--labs-divider); }
  .labs-table thead th { font-size: 13px; font-weight: 600; color: var(--tl-text-secondary); border-bottom: 1px solid var(--tl-border); }
  .labs-table td::before { content: none; }
  .labs-table th:first-child, .labs-table td:first-child { padding-left: 0; }
  .labs-lab { font-size: 15px; margin: 0; min-width: 9em; }
}

/* A filtered table adds the need column; below 1280px its secondary
   columns move to the profiles so the table never runs past the page. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .labs-table--need .labs-wide { display: none; }
}

/* Profile: facts as label and value rows. */
.labs-facts { display: grid; border-top: var(--labs-divider); }
.labs-fact { display: grid; gap: var(--tl-space-1); padding: var(--tl-space-3) 0; border-bottom: var(--labs-divider); }
.labs-fact dt { font-size: var(--tl-note-size); color: var(--tl-text-muted); }
.labs-fact dd { display: grid; gap: 2px; }
.labs-val { color: var(--tl-text); }
.labs-src { font-size: 13px; color: var(--tl-text-muted); line-height: 1.5; }
.labs-src a { color: var(--tl-text-secondary); }
.labs-unit { color: var(--tl-text-muted); font-size: var(--tl-note-size); }
.labs-inline { font-size: var(--tl-note-size); }

@media (min-width: 720px) {
  .labs-fact { grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); gap: var(--tl-space-4); }
}

.labs-prices { width: 100%; border-collapse: collapse; font-size: 15px; }
.labs-prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.labs-prices, .labs-prices tbody, .labs-prices tr, .labs-prices td { display: block; }
.labs-prices tr { padding: var(--tl-space-3) 0; border-bottom: var(--labs-divider); }
.labs-prices tbody tr:first-child { border-top: var(--labs-divider); }
.labs-prices td { padding: 1px 0; }

@media (min-width: 720px) {
  .labs-prices { display: table; }
  .labs-prices thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .labs-prices tbody { display: table-row-group; }
  .labs-prices tr { display: table-row; }
  .labs-prices tbody tr:first-child { border-top: 0; }
  .labs-prices th, .labs-prices td { display: table-cell; padding: var(--tl-space-2) var(--tl-space-3) var(--tl-space-2) 0; text-align: left; vertical-align: top; border-bottom: var(--labs-divider); }
  .labs-prices thead th { font-size: 13px; font-weight: 600; color: var(--tl-text-secondary); border-bottom: 1px solid var(--tl-border); }
}

.labs-claims, .labs-list { padding-left: 1.2em; display: grid; gap: var(--tl-space-3); max-width: var(--tl-reading-max); }
.labs-claims li p { margin-bottom: 2px; }
.labs-steps { padding-left: 1.4em; display: grid; gap: var(--tl-space-2); max-width: var(--tl-reading-max); margin-bottom: var(--tl-space-3); }

.labs-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--tl-space-5); margin-top: var(--tl-space-3); max-width: 760px; }
.labs-shares div { display: flex; justify-content: space-between; gap: var(--tl-space-3); padding: var(--tl-space-2) 0; border-bottom: var(--labs-divider); }
.labs-shares dt { color: var(--tl-text-secondary); }
.labs-shares dd { font-family: var(--tl-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }