/* ──────────────────────────────────────────────────────────────────────────
   Lab (/lab): a list of posts and a reading page.

   The note and table styles are adapted from Observable Framework
   (ISC, Copyright 2023-2024 Observable, Inc.; license in THIRD_PARTY_LAB.md).
   Colours and fonts are the site theme tokens (static/theme.css). The "Beta"
   tag (.beta-tag) lives in theme.css because the nav uses it on every page.

   Selectors are class-scoped on purpose: Tailwind's preflight is injected
   after this file and would win on bare element selectors.
   ────────────────────────────────────────────────────────────────────────── */

.lab { max-width: 46rem; margin: 0 auto; padding: 3rem 1rem 4rem; }
@media (min-width: 640px) { .lab { padding: 4rem 1.5rem 5rem; } }
.lab .beta-tag { vertical-align: middle; }

/* ── Index ─────────────────────────────────────────────────────────────── */
.lab-head h1 { font: 500 2.5rem/1.1 var(--font-serif); letter-spacing: -.02em; color: var(--text); margin: 0 0 .75rem; }
.lab-head p { font: 400 1.0625rem/1.6 var(--font-ui); color: var(--text-2); margin: 0 0 2.5rem; }

.lab-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.lab-list li { border-bottom: 1px solid var(--border); }
.lab-item { display: grid; gap: .35rem; padding: 1.25rem .25rem; color: inherit; text-decoration: none; border-radius: 8px; }
@media (min-width: 640px) { .lab-item { grid-template-columns: 8.5rem 1fr; gap: 1.5rem; } }
.lab-item:hover .lab-item-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lab-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-date { font: 400 .8125rem/1.6 var(--font-ui); color: var(--text-3); padding-top: .15rem; white-space: nowrap; }
.lab-item-title { display: block; font: 500 1.25rem/1.3 var(--font-serif); letter-spacing: -.01em; color: var(--text); }
.lab-item-summary { display: block; margin-top: .35rem; font: 400 .9375rem/1.55 var(--font-ui); color: var(--text-2); }
.lab-sample { font: 500 .6875rem/1 var(--font-ui); color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: 999px; padding: .15rem .45rem; vertical-align: middle; }
.lab-empty { padding: 2.5rem 0; color: var(--text-3); font: 400 .9375rem var(--font-ui); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0; }

.lab-foot { margin: 2rem 0 0; font: 400 .875rem/1.6 var(--font-ui); color: var(--text-3); }
.lab-foot a, .lab-more a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Pinned post: first row, a small mark instead of the date. */
.lab-pinned { display: inline-flex; align-self: start; align-items: center; gap: .35rem; color: var(--accent-ink); font-weight: 500; }

/* ── Post ──────────────────────────────────────────────────────────────── */
.lab-back { display: inline-flex; align-items: center; gap: .1rem; font: 500 .875rem var(--font-ui); color: var(--text-2); text-decoration: none; }
.lab-back:hover { color: var(--text); }
.lab-title { font: 500 clamp(2rem, 5vw, 2.6rem)/1.12 var(--font-serif); letter-spacing: -.02em; color: var(--text); margin: 1.25rem 0 .6rem; text-wrap: balance; }
.lab-meta { font: 400 .875rem/1.5 var(--font-ui); color: var(--text-3); margin: 0 0 1.75rem; }

.lab-banner { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px dashed var(--border-strong); border-radius: 10px; font: 400 .875rem/1.5 var(--font-ui); color: var(--text-2); }
.lab-banner--old { border-style: solid; border-color: rgb(var(--c-warning) / .45); background: color-mix(in srgb, var(--warning) 9%, var(--bg)); }

.lab-answer { margin: 0 0 2.25rem; padding: 1rem 1.2rem; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.lab-answer strong { display: block; font: 600 .8125rem/1 var(--font-ui); color: var(--accent-ink); margin-bottom: .55rem; }
.lab-answer p { margin: 0; font: 400 1.0625rem/1.6 var(--font-serif); color: var(--text); }

.lab-prose { font: 400 1.0938rem/1.75 var(--font-serif); color: var(--text); }
.lab-prose > :first-child { margin-top: 0; }
.lab-prose p { margin: 0 0 1.15rem; }
.lab-prose h2 { font: 500 1.6rem/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--text); margin: 2.5rem 0 .75rem; scroll-margin-top: 5rem; }
.lab-prose h3 { font: 600 1.0625rem/1.3 var(--font-ui); color: var(--text); margin: 1.8rem 0 .5rem; scroll-margin-top: 5rem; }
.lab-prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lab-prose strong { font-weight: 600; }
.lab-prose ul, .lab-prose ol { margin: 0 0 1.15rem; padding-left: 1.5rem; }
.lab-prose ul { list-style: disc; }
.lab-prose ol { list-style: decimal; }
.lab-prose li { margin: .3rem 0; }
.lab-prose li::marker { color: var(--text-3); }
.lab-prose blockquote { margin: 1.25rem 0; padding-left: 1rem; border-left: 3px solid var(--border-strong); color: var(--text-2); font-style: italic; }
.lab-prose hr { border: 0; height: 1px; background: var(--border); margin: 2rem 0; }
.lab-prose img { max-width: 100%; border-radius: 10px; }
.lab-prose code { font: 400 .84em var(--font-mono); background: var(--bg-code); border: 1px solid var(--border); border-radius: 5px; padding: .08em .35em; }
.lab-prose pre { position: relative; margin: 1.25rem 0; padding: 1rem 1.1rem; overflow-x: auto; background: var(--bg-code); border: 1px solid var(--border); border-radius: 12px; font: 400 .8125rem/1.65 var(--font-mono); color: var(--text); }
.lab-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.lab-copy { position: absolute; top: .5rem; right: .5rem; font: 500 .6875rem/1 var(--font-ui); padding: .4rem .55rem; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--bg-elev); color: var(--text-2); }
.lab-copy:hover { color: var(--text); background: var(--bg-hover); }

/* Observable's table: small sans figures, hairlines, no boxes. */
.lab-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.25rem 0; font: 400 .875rem/1.4 var(--font-ui); }
.lab-prose th { font: 600 .8125rem/1.3 var(--font-ui); color: var(--text); padding: .5rem 1.25rem .5rem 0; border-bottom: 1px solid var(--border-strong); text-align: left; white-space: nowrap; }
.lab-prose td { padding: .5rem 1.25rem .5rem 0; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.lab-prose th:last-child, .lab-prose td:last-child { padding-right: 0; }
.lab-prose tr:last-child td { border-bottom: 0; }

/* Observable's note box, with the heading we give it:
   <aside class="lab-note" data-label="Where we might be wrong"> */
.lab-note { margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--warning); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--warning) 8%, var(--bg)); font: 400 .9688rem/1.6 var(--font-ui); color: var(--text-2); }
.lab-note::before { content: attr(data-label); display: block; margin-bottom: .45rem; font: 600 .8125rem/1.2 var(--font-ui); color: var(--warning); }
.lab-note:not([data-label])::before { content: "Note"; }
.lab-note > :last-child { margin-bottom: 0; }
.lab-note p { margin: 0 0 .7rem; }

.lab-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 3rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2); }
.lab-cta p { margin: 0; font: 500 .9688rem/1.4 var(--font-ui); color: var(--text); }

.lab-more { margin: 2.5rem 0 0; }
.lab-more h2 { font: 600 .875rem/1 var(--font-ui); color: var(--text-3); margin: 0 0 .75rem; }
.lab-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font: 400 1rem/1.4 var(--font-ui); }

@media print { .site-nav, footer, .lab-cta, .lab-copy { display: none !important; } }