/* ============================================================================
   lab.css — the experiments page of a project, in the Experiments Lab idiom:
   graph-paper ground, white cards, a verdict pill per part, green findings and
   a yellow sticky note for gotchas. Ported from the site's lab notebook
   (my_site/src/app/experiments/lab.css). Everything is scoped under .lab and
   every class is prefixed lab-, so nothing meets carebun.css.
   ========================================================================== */
.lab {
  --bg: #f5f4f0; --surface: #ffffff; --surface-2: #faf9f6;
  --ink: #1d2029; --ink-2: #565b6a; --ink-3: #8b90a0;
  --line: #e6e4dc; --line-strong: #d5d3c9;
  --accent: #4a53d0; --accent-soft: #eeeffc; --grid: rgba(78, 86, 214, 0.055);
  --adopted: #1b7a52; --adopted-dot: #2fa163; --adopted-soft: #e5f4ec;
  --testing: #8a6210; --testing-dot: #e7c242; --testing-soft: #fbf3de;
  --rejected: #b8433b; --rejected-dot: #d6493f; --rejected-soft: #fbeae8;
  --more-data: #2b5fb8; --more-data-dot: #4a82e4; --more-data-soft: #e8effc;
  --insight: #6d5a9c; --insight-dot: #8f7cc0; --insight-soft: #efecf8;
  --sticky: #fff6c9; --sticky-edge: #e8d98a; --highlight: rgba(255, 228, 86, 0.65);
  --shadow: 0 1px 2px rgba(29, 32, 41, 0.05), 0 4px 16px rgba(29, 32, 41, 0.05);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Public Sans", -apple-system, system-ui, sans-serif;
  --lab-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px;

  font-family: var(--font-body); color: var(--ink); font-size: 15px; line-height: 1.6;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  min-height: 80vh;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lab {
    --bg: #15161b; --surface: #1c1d24; --surface-2: #22232b; --ink: #e8e9ee; --ink-2: #aeb2c0; --ink-3: #7c8193;
    --line: #2c2e38; --line-strong: #3a3d49; --accent: #8f97ff; --accent-soft: #262a4a; --grid: rgba(143, 151, 255, 0.05);
    --adopted-soft: #17291f; --testing-soft: #2c2616; --rejected-soft: #2e1a19; --more-data-soft: #18233a; --insight-soft: #231f33;
    --adopted: #5cc58f; --testing: #e1b85a; --rejected: #ef7a70; --more-data: #7fa8f0; --insight: #b3a2e6;
    --sticky: #3a3520; --sticky-edge: #5a5230; --highlight: rgba(231, 194, 66, 0.35);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] .lab {
  --bg: #15161b; --surface: #1c1d24; --surface-2: #22232b; --ink: #e8e9ee; --ink-2: #aeb2c0; --ink-3: #7c8193;
  --line: #2c2e38; --line-strong: #3a3d49; --accent: #8f97ff; --accent-soft: #262a4a; --grid: rgba(143, 151, 255, 0.05);
  --adopted-soft: #17291f; --testing-soft: #2c2616; --rejected-soft: #2e1a19; --more-data-soft: #18233a; --insight-soft: #231f33;
  --adopted: #5cc58f; --testing: #e1b85a; --rejected: #ef7a70; --more-data: #7fa8f0; --insight: #b3a2e6;
  --sticky: #3a3520; --sticky-edge: #5a5230; --highlight: rgba(231, 194, 66, 0.35);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}

.lab *, .lab *::before, .lab *::after { box-sizing: border-box; }
.lab h1, .lab h2, .lab h3, .lab h4 { margin: 0; font-family: var(--font-body); line-height: 1.2; letter-spacing: 0; }
.lab p { margin: 0; }
.lab a { color: var(--accent); text-decoration: none; }
.lab a:hover { text-decoration: underline; }
.lab :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab mark { background: linear-gradient(100deg, transparent 0.5%, var(--highlight) 3%, var(--highlight) 96%, transparent 99%); color: inherit; padding: 0.06em 0.25em; margin: 0 -0.08em; border-radius: 4px; }
.lab code { font-family: var(--lab-mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0.08em 0.35em; overflow-wrap: anywhere; }
.lab strong, .lab b { font-weight: 650; }

/* three columns: the parts, the page, the rail */
.lab-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr) 292px; align-items: start; max-width: 1440px; margin: 0 auto; }
.lab-side { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 22px 12px 40px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 62%, transparent); min-height: calc(100vh - 80px); }
.lab-side h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); padding: 14px 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-side a { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.lab-side a:hover { background: var(--surface-2); text-decoration: none; }
.lab-side a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lab-side a b { font-family: var(--lab-mono); font-size: 11px; color: var(--accent); font-weight: 600; flex: none; }
.lab-main { min-width: 0; padding: 30px clamp(18px, 3.4vw, 48px) 80px; }
.lab-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; padding: 30px 22px 40px 0; }

.lab-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); margin-bottom: 10px; }
.lab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--lab-mono); font-size: 12px; color: var(--ink-3); }
.lab h1 { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 10px; }
.lab-lede { font-size: 16.5px; color: var(--ink-2); max-width: 64ch; }

/* verdict pills */
.lab-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; font-family: var(--font-body); }
.lab-pill i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.lab-pill.adopted, .lab-pill.kept { color: var(--adopted); background: var(--adopted-soft); } .lab-pill.adopted i, .lab-pill.kept i { background: var(--adopted-dot); }
.lab-pill.rejected, .lab-pill.discarded { color: var(--rejected); background: var(--rejected-soft); } .lab-pill.rejected i, .lab-pill.discarded i { background: var(--rejected-dot); }
.lab-pill.needs-data, .lab-pill.did-not-complete { color: var(--more-data); background: var(--more-data-soft); } .lab-pill.needs-data i, .lab-pill.did-not-complete i { background: var(--more-data-dot); }
.lab-pill.insight, .lab-pill.measured { color: var(--insight); background: var(--insight-soft); } .lab-pill.insight i, .lab-pill.measured i { background: var(--insight-dot); }

/* rail panels */
.lab-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.lab-panel h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); margin-bottom: 10px; }
.lab-panel.lab-sum { border-color: var(--accent); }
.lab-panel.lab-sum h4 { color: var(--accent); }
.lab-panel.lab-sum p { font-size: 13.5px; color: var(--ink-2); }
.lab-score { display: flex; flex-direction: column; gap: 8px; }
.lab-score div { display: flex; align-items: center; justify-content: space-between; }
.lab-score b { font-family: var(--lab-mono); }
.lab-facts { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lab-facts dt { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 1px; }
.lab-facts dd { font-size: 13.5px; margin: 0; overflow-wrap: anywhere; }
.lab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.lab-panel .lab-tags { margin: 0; }
.lab-tag { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; }
.lab-code { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; }

/* sections */
.lab-section { margin: 30px 0; }
.lab-section h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.lab-section p { margin-bottom: 10px; max-width: 72ch; }
.lab-question { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin: 18px 0; }
.lab-question h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.lab-question p { font-size: 17px; font-style: italic; font-family: var(--font-display); font-weight: 500; }
.lab-verdict { display: flex; align-items: center; gap: 18px; padding: 18px 20px; margin: 20px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lab-verdict p { font-size: 15.5px; font-weight: 500; }

/* tables */
.lab-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 12px 0; max-width: 100%; }
.lab-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.lab-table th, .lab-table td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.lab-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); background: var(--surface-2); white-space: nowrap; font-weight: 700; }
.lab-table td { font-family: var(--lab-mono); font-size: 12.8px; white-space: nowrap; }
.lab-table td:first-child { font-family: var(--font-body); font-weight: 600; }
.lab-runs tr:not(.lab-what) td { border-bottom: none; padding-bottom: 4px; }
.lab-runs tr.lab-what td { white-space: normal; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: var(--ink-2); padding-top: 0; padding-bottom: 12px; overflow-wrap: anywhere; }
.lab-runs tr.lab-what span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 1px; }
.lab-runs tr:hover td, .lab-runs tr:hover + tr.lab-what td { background: none; }
.lab-table tr:last-child td { border-bottom: none; }
.lab-table tr:hover td { background: var(--surface-2); }

/* metric tiles */
.lab-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 22px 0; }
.lab-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.lab-tile .l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.lab-tile .v { font-family: var(--lab-mono); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }

/* charts: the bars or the line, and for bars the same numbers in a table beside them */
.lab-chart { margin: 22px 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lab-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.lab-chart .t { font-weight: 600; font-size: 14px; }
.lab-chart .u { font-size: 12px; color: var(--ink-3); font-family: var(--lab-mono); white-space: nowrap; }
.lab-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab-chart svg text { font-family: var(--lab-mono); fill: var(--ink-3); font-size: 11px; }
.lab-chart svg text.v { fill: var(--ink); font-size: 12px; }
.lab-chart svg .bar { fill: var(--accent); }
.lab-chart svg .bar.best { fill: var(--adopted-dot); }
.lab-chart svg .pt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.lab-chart svg .pt.best { fill: var(--adopted-dot); }
.lab-chart svg .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lab-chart svg .gr { stroke: var(--line); stroke-width: 1; }
.lab-chart-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lab-chart-2 .lab-table { margin: 0; }
.lab-tip { position: absolute; z-index: 60; max-width: 260px; background: var(--ink); color: var(--bg); font-family: var(--lab-mono); font-size: 11.5px; line-height: 1.4; padding: 6px 9px; border-radius: 6px; pointer-events: none; }

/* callouts */
.lab-callout { margin: 26px 0; padding: 18px 22px; border-radius: var(--radius); border: 1px solid var(--line); position: relative; }
.lab-callout h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.lab-callout ul { padding-left: 4px; display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; }
.lab-callout li { padding-left: 26px; position: relative; max-width: 78ch; }
.lab-callout li::before { position: absolute; left: 2px; top: 0; font-weight: 700; }
.lab-callout.findings { background: var(--adopted-soft); border-color: transparent; }
.lab-callout.findings h3 { color: var(--adopted); }
.lab-callout.findings li::before { content: "✓"; color: var(--adopted); }
.lab-callout.gotchas { background: var(--sticky); border: 1px solid var(--sticky-edge); box-shadow: 0 6px 14px rgba(29, 32, 41, 0.09); transform: rotate(-0.4deg); }
.lab-callout.gotchas::before { content: ""; position: absolute; top: -11px; left: 50%; width: 96px; height: 22px; background: rgba(214, 208, 185, 0.45); border: 1px solid rgba(29, 32, 41, 0.08); transform: translateX(-50%) rotate(-2deg); border-radius: 2px; }
.lab-callout.gotchas h3 { color: var(--testing); }
.lab-callout.gotchas li::before { content: "⚠"; color: var(--testing); font-size: 13px; top: 1px; }

/* the protocol: every part, in order */
.lab-protocol { display: flex; flex-direction: column; margin-top: 14px; position: relative; }
.lab-protocol::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
.lab-protocol a { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 0; color: var(--ink); border-radius: 10px; position: relative; }
.lab-protocol a:hover { background: var(--surface); text-decoration: none; }
.lab-protocol .num { font-family: var(--lab-mono); font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1; }
.lab-protocol .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lab-protocol .t { font-weight: 600; font-size: 14.5px; }
.lab-protocol .v { font-size: 13px; color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.lab-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.lab-prevnext a { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.lab-prevnext a:hover { border-color: var(--accent); text-decoration: none; }
.lab-prevnext span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.lab-prevnext strong { font-size: 13.5px; line-height: 1.3; }
.lab-prevnext .next { text-align: right; align-items: flex-end; }

@media (max-width: 1180px) {
  .lab-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .lab-rail { grid-column: 2; position: static; padding: 0 clamp(18px, 3.4vw, 48px) 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .lab-main { padding-bottom: 30px; }
}
@media (max-width: 780px) {
  .lab-shell { grid-template-columns: minmax(0, 1fr); }
  .lab-side { position: static; min-height: 0; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; display: flex; gap: 6px; overflow-x: auto; }
  .lab-side h4 { display: none; }
  .lab-side a { white-space: nowrap; flex: none; border: 1px solid var(--line); background: var(--surface); }
  .lab-rail { grid-column: 1; padding: 0 18px 50px; }
  .lab-chart-2 { grid-template-columns: minmax(0, 1fr); }
  .lab-verdict { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lab-prevnext { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lab * { transition: none !important; } }