/* Labs index (/labs).
   Part of the /labs stylesheet, split out of one 3,400-line labs.css.

   THE NUMBER IN THE FILENAME IS LOAD-BEARING. stylesheet_link_tag :app
   collects every stylesheet under app/assets and serves them sorted by
   path, so the ordinal prefix is the only thing holding the cascade order
   these rules were written in — and several classes are shared across labs
   (.lp-head, .lab-entry, .lab-block, .dt-table). Renaming a file without
   renumbering it, or inserting one out of sequence, reorders the cascade
   silently.

   Nothing in this comment may contain the two characters that close a CSS
   comment. The first version of it wrote a shell glob here, which closed
   the comment early; the leaked text then parsed as a selector and ate the
   first real rule in all nine files. There is a test for that now.
   ============================================================ */

/* ============================================================
   Labs index (/labs) — a short catalogue of the prototypes.
   Number-rail + content layout, monochrome, hairline rules.
   ============================================================ */
.lab-list { margin-top: clamp(24px, 4vw, 40px); }
.lab-entry {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 28px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
}
.lab-entry:first-child { border-top: none; padding-top: 0; }
@media (max-width: 680px) {
  .lab-entry { grid-template-columns: 1fr; gap: 12px; }
}
/* Grid items default to min-width:auto, which refuses to shrink below the
   intrinsic width of their own contents. Signal Line puts a 950px .dt-scroll
   table in here, so the track grew to fit it and the scroller never engaged —
   the whole page scrolled sideways below about 950px instead. Observatory and
   Monday Brief share this grid, so this covers them before they hit it too. */
.lab-main { min-width: 0; }
.lab-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding-top: 6px;
}
.lab-main .eyebrow { display: block; margin-bottom: 12px; }
.lab-name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.lab-name a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.lab-name a:hover { border-bottom-color: var(--ink); }

.lab-block { margin-top: 22px; }
.lab-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.lab-block p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 64ch;
  margin: 0;
}
.lab-block p.lab-wide { max-width: none; }   /* span the full column, like the stack block */

.lab-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 9999px;
  padding: 11px 18px;
  transition: gap 0.2s, opacity 0.2s;
}
.lab-open:hover { gap: 12px; opacity: 0.85; }
.lab-open svg { flex: 0 0 auto; }

.lab-block p strong { color: var(--ink); font-weight: 500; }
.lab-block p code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--ink);
  word-break: break-word;
}

.lab-num svg { display: block; }

/* ============================================================
   Labs index (/labs) — the long form of the homepage's section 01,
   in the same language: a mono stage tick, the lab's name in its
   stage colour, hairline rules, no tinted cards.

   Namespaced .lab-index-* on purpose. The older .lab-entry /
   .lab-block / .lab-name / .lab-num / .lab-list rules above are
   shared with the Observatory, Monday Brief, Signal Line and every
   Proving Ground partial, and .lp-head/.lp-title/.lp-subtitle with
   all of them — so this page gets its own rules rather than
   redefining theirs.

   The five hues are NOT declared here: the entry carries a
   .labs-stage-* class from application.css, which is served on every
   page alongside this file. One definition, both surfaces.
   ============================================================ */
/* Same --page-top as .lp-head and the hero. This page had its own smaller formula (72px against
   their 96px) for no reason anyone chose. */
.lab-index-head {
  padding-block: var(--page-top) 0;
}
.lab-index-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 16px;
  max-width: 20ch;
  text-wrap: balance;
}
.lab-index-title em { font-style: italic; }
.lab-index-sub {
  margin-top: 22px;
  color: var(--ink-muted);
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.55;
}
.lab-index-sub-data {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s;
}
.lab-index-sub-data:hover { border-bottom-color: var(--ink); }

.lab-index-entry {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(30px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.lab-index-entry.is-dataset {
  --stage: rgba(0, 0, 0, 0.3);
  --stage-ink: var(--ink);
  border-bottom: none;
}
@media (max-width: 760px) {
  .lab-index-entry { grid-template-columns: 1fr; gap: 10px; }
}

/* The bar is a flex sibling of the word, never an absolutely-positioned marker —
   at left:0 it lands on top of the first letter, and "CONNECT" makes that obvious. */
.lab-index-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stage-ink);
}
.lab-index-tick i {
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--stage);
}

.lab-index-name-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.lab-index-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--stage-ink);
  margin: 0;
}
.lab-index-name a { color: inherit; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.lab-index-name a:hover { border-bottom-color: currentColor; }
/* Coloured, and beside the name rather than under it. Set in grey directly above
   "WHY IT EXISTS" it was typographically identical to a block label, so it read as a
   fourth section heading instead of naming the lab. The rule across this entry is:
   coloured mono names the lab, grey mono labels the prose. */
.lab-index-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stage-ink);
}

/* The three blocks are one repeated row, not a stack: label in a fixed rail, prose
   beside it, a hairline between. Four labels down one left edge is what made the old
   entry read as a form. `gap: 0` on the container because the rows carry their own rules. */
.lab-index-blocks { margin-top: 22px; display: grid; gap: 0; }
.lab-index-block {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.lab-index-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  /* Nudged so the 11px label's cap-height meets the 16px prose's first baseline —
     `align-items: baseline` aligns the boxes' first lines, not their optical tops. */
  padding-top: 2px;
}
.lab-index-block p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 64ch;
  margin: 0;
}
/* The built-with row is the same row as the other two; only its body is mono. */
.lab-index-stack {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0;
}
@media (max-width: 720px) {
  .lab-index-block { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .lab-index-block-label { padding-top: 0; }
}

/* A text link, not a button. No fill, so the label is always dark type on the page's
   own white — a filled pill put small mono type on a coloured ground and lost it. */
.lab-index-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stage-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--stage-ink) 40%, transparent);
  padding-bottom: 3px;
  transition: gap 0.2s, border-color 0.2s;
}
.lab-index-open:hover { gap: 12px; border-bottom-color: var(--stage-ink); }
.lab-index-open svg { flex: 0 0 auto; }

.lab-index-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  margin-top: 20px;
}
.lab-index-fig b {
  display: block;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lab-index-fig span {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}