/**
 * Build an Offspring Lab styles.
 *
 * Page-local palette per the house lab convention, with light and dark
 * token sets. Dark applies when the site theme cookie says dark (the head
 * script sets html[data-theme]) or, with no cookie, when the device prefers
 * dark. Nothing relies on color alone: correctness feedback carries a check
 * or cross plus words, chromosome sources carry an M or F letter, selected
 * rods carry a "Passing on" label.
 *
 * WCAG 2.1 AA: 0.75rem minimum font size, 44px touch targets on every
 * control, :focus-visible rings, reduced motion respected (the sorter
 * animation is skipped in main.js).
 *
 * The Lab Notebook panel's structure comes from
 * assets/labs/shared/lab-notebook.css; this file only sets its colors
 * under .labnb--bo and styles the caller-owned bo-nb-* classes.
 */
:root {
  --bg: #eef4f1;
  --paper: #ffffff;
  --ink: #1b2a2f;
  --muted: #4f6068;
  --line: #d2dfdb;
  --accent: #1d4e89;
  --accent-bg: #eaf1fa;
  --good: #1a7f4b;
  --good-bg: #e9f8ef;
  --bad: #b42323;
  --bad-bg: #fff1f1;
  --stage: #eaf2fb;
  --btn-hover: #f0f5f3;
  --primary: #1b2a2f;
  --primary-ink: #ffffff;
  --primary-hover: #2c4048;
  --shadow: rgba(27, 42, 47, .06);
}
:root[data-theme="dark"] {
  --bg: #11181b;
  --paper: #1a2428;
  --ink: #e6eef0;
  --muted: #a3b4ba;
  --line: #34454b;
  --accent: #8cb8f0;
  --accent-bg: #1c2d42;
  --good: #5fd08f;
  --good-bg: #17301f;
  --bad: #ff8a8a;
  --bad-bg: #3a1c1c;
  --stage: #26364a;
  --btn-hover: #243137;
  --primary: #e6eef0;
  --primary-ink: #11181b;
  --primary-hover: #cfdde1;
  --shadow: rgba(0, 0, 0, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11181b;
    --paper: #1a2428;
    --ink: #e6eef0;
    --muted: #a3b4ba;
    --line: #34454b;
    --accent: #8cb8f0;
    --accent-bg: #1c2d42;
    --good: #5fd08f;
    --good-bg: #17301f;
    --bad: #ff8a8a;
    --bad-bg: #3a1c1c;
    --stage: #26364a;
    --btn-hover: #243137;
    --primary: #e6eef0;
    --primary-ink: #11181b;
    --primary-hover: #cfdde1;
    --shadow: rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body { background: var(--bg); color: var(--ink); }
.bo-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 28px; }
.bo-wrap, .bo-wrap * { font-family: 'Inter', system-ui, sans-serif; }
.bo-wrap h1, .bo-wrap h2, .bo-wrap h3, .bo-wrap h4, .bo-eyebrow, .bo-part { font-family: 'Bitter', Georgia, serif; }
.bo-mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace !important; font-weight: 700; }
.bo-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bo-wrap :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.bo-wrap [tabindex="-1"]:focus { outline: none; }
.bo-small { font-size: .8rem; color: var(--muted); line-height: 1.4; }

/* HERO ------------------------------------------------------------------ */
.bo-hero { padding: 18px 8px 6px; text-align: center; }
.bo-hero-title { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bo-hero h1 { font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.05; letter-spacing: -.01em; }
.bo-eyebrow {
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem;
  color: #fff; background: #2f7d32; padding: 5px 12px; border-radius: 6px;
}
.bo-sub { max-width: 720px; margin: 8px auto 0; color: var(--muted); font-size: 1rem; font-weight: 500; line-height: 1.5; }
.bo-standard {
  display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); font-size: .8rem; font-weight: 600; color: var(--muted);
}
.bo-preview {
  margin: 12px 0; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--accent);
  background: var(--accent-bg); color: var(--ink); font-size: .9rem; font-weight: 600;
}

/* PANELS + PROSE -------------------------------------------------------- */
.bo-prose, .bo-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; margin: 16px 0; box-shadow: 0 6px 20px var(--shadow);
}
.bo-prose h2, .bo-panel h2 { font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bo-part {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary-ink); background: var(--primary); padding: 4px 10px; border-radius: 6px;
}
.bo-optional {
  font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.bo-prose p, .bo-prose li { font-size: 1rem; line-height: 1.6; }
.bo-prose p { margin-bottom: 10px; }
.bo-keylist { list-style: none; margin: 8px 0 12px; }
.bo-keylist li { margin-bottom: 6px; display: flex; gap: 10px; align-items: flex-start; }
.bo-swatch {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: .8rem; color: #1b1b2f; border: 2px solid #1b1b2f;
}
.bo-sw-mother { background: #c3a3ee; }
.bo-sw-father { background: #f2c25b; }
.bo-gloss { font-size: .9rem !important; color: var(--muted); margin-bottom: 0 !important; }
.bo-gloss a { color: var(--accent); font-weight: 600; }
.bo-panel-sub { color: var(--muted); font-size: .95rem; line-height: 1.5; margin-bottom: 14px; }
.bo-h3 { font-size: 1.1rem; font-weight: 700; margin: 18px 0 8px; }
.bo-locked { padding: 12px 14px; border-radius: 10px; background: var(--accent-bg); color: var(--ink); font-size: .95rem; }

/* PROGRESS -------------------------------------------------------------- */
.bo-progress {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0 6px;
  position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg);
}
.bo-prog {
  display: flex; flex-direction: column; gap: 1px; min-height: 44px; padding: 6px 10px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.bo-prog-k { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bo-prog-t { font-weight: 700; font-size: .9rem; }
.bo-prog-v { font-size: .8rem; color: var(--muted); font-weight: 500; }
.bo-prog-done { border-color: var(--good); background: var(--good-bg); }
.bo-prog-done .bo-prog-v { color: var(--good); font-weight: 700; }
.bo-prog-done .bo-prog-t::after { content: ' \2713'; color: var(--good); }
.bo-prog-locked .bo-prog-t { color: var(--muted); }
.bo-complete { font-size: .95rem; font-weight: 600; color: var(--muted); margin: 0 0 4px 4px; }
.bo-complete-done { color: var(--good); }
@media (max-width: 700px) {
  .bo-progress { grid-template-columns: repeat(5, minmax(88px, 1fr)); overflow-x: auto; }
}

/* BUTTONS + FORM CONTROLS ---------------------------------------------- */
.bo-btn {
  min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: .95rem; font-weight: 600; cursor: pointer;
}
.bo-btn:hover:not(:disabled) { background: var(--btn-hover); }
.bo-btn-primary { background: var(--primary); color: var(--primary-ink); }
.bo-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.bo-btn:disabled { opacity: .45; cursor: not-allowed; }
.bo-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.bo-tools { margin-bottom: 12px; }
.bo-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: .95rem; cursor: pointer; }
.bo-toggle input { width: 22px; height: 22px; accent-color: var(--accent); }
.bo-input {
  display: block; margin-top: 6px; width: 110px; min-height: 44px; padding: 8px 12px; font-size: 1rem;
  border: 2px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
}
.bo-q, .bo-predict, .bo-read { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.bo-q legend, .bo-q > label, .bo-predict legend, .bo-read legend { font-size: .95rem; font-weight: 600; line-height: 1.45; padding: 0 6px; }
.bo-q > label { display: block; padding: 0; }
.bo-optrow, .bo-predict-opts, .bo-grid-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bo-opt {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .95rem;
}
.bo-opt:hover { border-color: var(--ink); }
.bo-opt input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.bo-opt-pill { border-radius: 999px; }
.bo-hint { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--accent-bg); font-size: .9rem; }

/* FEEDBACK -------------------------------------------------------------- */
.bo-feedback { margin-top: 12px; font-size: .95rem; line-height: 1.5; }
.bo-feedback:empty { display: none; }
.bo-feedback ul { margin: 6px 0 0 20px; }
.bo-fb-good, .bo-fb-bad { padding: 10px 14px; border-radius: 10px; border: 1.5px solid; }
.bo-fb-good { background: var(--good-bg); border-color: var(--good); }
.bo-fb-bad { background: var(--bad-bg); border-color: var(--bad); }

/* TASK 1 FIGURE --------------------------------------------------------- */
.bo-labelfig { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px; margin-bottom: 8px; border-radius: 12px; background: var(--stage); flex-wrap: wrap; }
.bo-fig-rods { display: flex; gap: 8px; }
.bo-fig-arrow { font-size: 2rem; color: #1b2a2f; }
:root[data-theme="dark"] .bo-fig-arrow { color: #e6eef0; }
.bo-creature { display: block; max-width: 100%; height: auto; }

/* PARENTS + RODS -------------------------------------------------------- */
.bo-parents { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; margin-top: 12px; }
.bo-parent { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--paper); }
.bo-parent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bo-parent-fig { flex: 0 0 auto; background: var(--stage); border-radius: 12px; padding: 4px; }
.bo-parent h3 { font-size: 1.2rem; }
.bo-pairs { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.bo-pair { display: flex; flex-direction: column; align-items: center; }
.bo-pair-h { font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.bo-pair-row { display: flex; align-items: flex-start; gap: 2px; }
.bo-loci { position: relative; width: 58px; height: 140px; }
.bo-locus { position: absolute; left: 0; right: 0; text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); line-height: 18px; }
.bo-rod, .bo-rod-static {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 6px;
  border: 2px solid transparent; border-radius: 12px; background: var(--stage); color: var(--ink);
}
.bo-rod { cursor: pointer; font: inherit; min-width: 74px; }
.bo-rod:hover:not(:disabled) { border-color: var(--ink); }
.bo-rod:disabled { cursor: not-allowed; opacity: .75; }
.bo-rod-on { border-color: var(--accent); background: var(--accent-bg); }
.bo-rod-cap { font-size: .75rem; font-weight: 600; line-height: 1.2; text-align: center; }
.bo-rod-pick { font-size: .75rem; color: var(--muted); font-weight: 600; }
.bo-rod-on .bo-rod-pick { color: var(--accent); }
.bo-rod-static { min-width: 78px; }
.bo-chrom-svg { display: block; }

/* LATEST OFFSPRING ------------------------------------------------------ */
.bo-latest { margin-top: 20px; padding: 16px; border-radius: 14px; border: 2px solid var(--accent); background: var(--paper); }
.bo-latest h3 { font-size: 1.3rem; margin-bottom: 6px; }
.bo-latest h4 { font-size: 1rem; margin: 16px 0 6px; }
.bo-pred-result { font-size: .95rem; margin-bottom: 8px; color: var(--ink); font-weight: 500; }
.bo-pred-result:empty { display: none; }
.bo-latest-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px; align-items: start; }
.bo-latest-creature { background: var(--stage); border-radius: 12px; padding: 8px; text-align: center; }
@media (max-width: 640px) { .bo-latest-grid { grid-template-columns: 1fr; } }
.bo-offchroms { display: flex; flex-wrap: wrap; gap: 14px; }
.bo-trace { margin-top: 14px; }
.bo-trace summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.bo-kind { font-size: .8rem; color: var(--muted); }
.bo-read { margin-top: 16px; background: var(--accent-bg); }

/* TABLES ---------------------------------------------------------------- */
.bo-tablewrap { overflow-x: auto; }
.bo-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.bo-table caption { text-align: left; font-size: .85rem; color: var(--muted); padding: 0 0 8px; }
.bo-table th, .bo-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.4; }
.bo-table thead th { background: var(--stage); font-weight: 700; }
.bo-table tbody th { font-weight: 600; background: var(--paper); }
.bo-table small { font-size: .75rem; color: var(--muted); font-weight: 500; }
.bo-num { white-space: nowrap; }
.bo-grid td { min-width: 160px; }
.bo-chrom-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* GALLERY --------------------------------------------------------------- */
.bo-count { font-weight: 600; margin-bottom: 10px; }
.bo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bo-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; text-align: center;
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit;
}
.bo-card > div { background: var(--stage); border-radius: 8px; padding: 2px; }
.bo-card-sib { cursor: pointer; }
.bo-card-sib:hover { border-color: var(--ink); }
.bo-card-on { border-color: var(--accent); background: var(--accent-bg); }
.bo-card-parent { border-style: dashed; }
.bo-cerlist { list-style: none; display: grid; gap: 6px; font-size: .95rem; }
.bo-cerlist li { padding: 6px 12px; border-radius: 8px; background: var(--stage); }
.bo-cerlist .bo-cer-ok { background: var(--good-bg); font-weight: 600; }

/* NOTEBOOK -------------------------------------------------------------- */
.bo-nb-props { font-size: .9rem; color: var(--muted); }
.bo-nb-props a { color: var(--accent); font-weight: 600; }
.bo-nb-h { font-family: 'Bitter', Georgia, serif; font-size: 1.05rem; }
.bo-nb-label { font-family: 'Bitter', Georgia, serif; font-size: 1.3rem; font-weight: 700; }
.bo-nb-field label { font-size: .95rem; font-weight: 600; line-height: 1.45; display: block; margin-bottom: 4px; }
.bo-nb-field textarea {
  width: 100%; min-height: 96px; padding: 10px 12px; font-size: 1rem; line-height: 1.5; border-radius: 10px;
  border: 2px solid var(--line); background: var(--paper); color: var(--ink);
}
.bo-nb-field textarea:disabled { opacity: .55; cursor: not-allowed; }
.labnb--bo {
  --labnb-surface: var(--paper); --labnb-border: var(--line); --labnb-ink: var(--ink);
  --labnb-muted: var(--muted); --labnb-accent: var(--accent);
  margin-top: 0; border-top: 0; padding-top: 0;
}
.labnb--bo .labnb-log { max-height: 220px; overflow-y: auto; }
.labnb--bo .labnb-log li { font-size: .85rem; }

.bo-copyright { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .bo-wrap * { transition: none !important; animation: none !important; }
}