/* Planter Lab (lab.html + js/page-lab.js): planter + slot editor on the left, live results on the right.
   Phones stack them: planter first, then the editor, then the results. */

.lab-intro { margin: .25rem 0 1rem; }
.lab-intro h1 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
.lab-lead { margin: 0; max-width: 60rem; color: var(--muted); }
/* the route bar (from a result card): Back to results, then Step 1 / Step 2 / … each with the genes it breeds */
.lab-route { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; }
.lab-stepbar > button { display: inline-flex; align-items: center; gap: .45rem; }
.lab-stepbar .genes { --chip: 14px; --gap: 2px; }
/* the current step is filled with the accent (red): a light ring keeps its red W/X genes apart from it */
.lab-stepbar > button[aria-pressed="true"] .genes { --gene-link: var(--on-accent); }
.lab-stepbar > button[aria-pressed="true"] .gene { box-shadow: 0 0 0 1px var(--on-accent); }

.lab-h3 { margin: 0; font-size: .92rem; letter-spacing: .07em; }

/* ---------- planter panel ---------- */
.lab-type { width: auto; max-width: 100%; min-width: 0; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 400; }
.lab-planter-host { padding: .4rem 0 .2rem; }
.lab-planter-host .planter { max-width: 500px; }   /* flat fallback (minecart, plant pot); the scene sizes itself */
.lab-planter-host .planter.cols-2 { max-width: 360px; }
.lab-planter-host .planter.cols-1 { max-width: 200px; }

/* The planter explains its own marks in tooltips (planter.js TIPS), so there is no legend line. The pill below is the
   planting-order list's copy of the scene's pin. */
.lab-mark {
  display: inline-block; padding: 0 6px; border-radius: 99px; white-space: nowrap;
  font-family: var(--head-font); font-stretch: 87.5%; font-size: 11px; font-weight: 700; line-height: 16px;
  letter-spacing: .03em; text-transform: uppercase;
}
.lab-mark-order { background: #f0b43c; color: #1a1408; }   /* fixed, like the scene's .pls-pin, in both themes */
.lab-planter-btns { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }

/* ---------- slot editor ---------- */
.lab-slot-info { display: grid; gap: .5rem; margin-bottom: .7rem; }
.lab-slot-info p { margin: 0; }
.lab-role-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.lab-role {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 .5rem; border-radius: 2px;
  font-family: var(--head-font); font-stretch: 87.5%; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--muted);
}
.lab-role-center { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lab-role-touch { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.lab-role-idle { border-style: dashed; }
.lab-current { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.lab-slot-btns { margin-bottom: .9rem; }

.lab-type-form { display: grid; gap: .55rem; padding: .75rem 0; border-block: 1px solid var(--line); }
.lab-input-row { display: flex; gap: .5rem; min-width: 0; }
.lab-genes-input {
  flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase;
}
.lab-genes-input::placeholder { letter-spacing: .04em; text-transform: none; font-family: inherit; font-size: .9rem; }
.lab-input-row .btn { flex: none; }
.lab-err { margin: 0; color: var(--bad); font-weight: 600; }
.lab-err:empty { display: none; }
.lab-keypad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; max-width: 22rem; }
.lab-key { min-height: 38px; justify-content: center; padding-inline: 0; font-family: var(--head-font); font-size: .95rem; font-weight: 800; }
.lab-key[data-key="G"] { box-shadow: inset 0 -3px 0 var(--gG); }
.lab-key[data-key="Y"] { box-shadow: inset 0 -3px 0 var(--gY); }
.lab-key[data-key="H"] { box-shadow: inset 0 -3px 0 var(--gH); }
.lab-key[data-key="W"] { box-shadow: inset 0 -3px 0 var(--gW); }
.lab-key[data-key="X"] { box-shadow: inset 0 -3px 0 var(--gX); }

.lab-clones { display: grid; gap: .5rem; padding-top: .8rem; }
.lab-clones-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; }
.lab-plant { flex: 1 1 13rem; min-width: 0; max-width: 20rem; }   /* plant-picker.js mounts here */
.lab-filter-row { display: grid; gap: .3rem; }
.lab-filter { width: 100%; }
.lab-filter-note { margin: 0; font-variant-numeric: tabular-nums; }
/* your clones: the Rust Large Wood Box (js/clone-box.js + css/clone-box.css) */
.lab-box { min-width: 0; }
.lab-clones-empty p { margin: 0; }

/* ---------- results ---------- */
.lab-results-body { display: grid; gap: 1.1rem; min-width: 0; }
.lab-sec { display: grid; gap: .55rem; min-width: 0; }
.lab-sec + .lab-sec, .lab-notes + .lab-sec { padding-top: 1rem; border-top: 1px solid var(--line); }
.lab-empty { padding-block: 1.4rem; }

.lab-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lab-note {
  display: flex; gap: .55rem; align-items: baseline; padding: .5rem .65rem; font-size: .88rem;
  border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--radius); background: var(--panel-2);
}
.lab-note-warn { border-left-color: var(--warn); }
.lab-note-tag { flex: none; font-size: .7rem; letter-spacing: .07em; color: var(--info); }
.lab-note-warn .lab-note-tag { color: var(--warn); }

.lab-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lab-outcomes > li { display: flex; min-width: 0; }
.lab-outcome {
  flex: 1 1 auto; min-width: 0; display: grid; align-items: center; gap: .4rem .9rem;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  padding: .5rem .65rem; text-align: left; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.lab-outcome:hover { border-color: var(--accent-2); }
.lab-outcome.is-aim { border-color: var(--focus); box-shadow: inset 3px 0 0 var(--focus); background: var(--head); }
.lab-outcome-genes { min-width: 0; }
.lab-outcome-odds { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .1rem .5rem; min-width: 0; }
.lab-pct { font-family: var(--head-font); font-stretch: 87.5%; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lab-bar {
  grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--line);
}
.lab-bar > span { display: block; height: 100%; width: var(--p, 0%); max-width: 100%; background: linear-gradient(to right, var(--green), var(--green-hi)); }
.lab-outcome-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; }
.lab-more { justify-self: start; }

.lab-aim { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lab-verdict { margin: 0; }
.lab-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.lab-steps > li { padding-left: .2rem; }
.lab-order { list-style: none; margin: .45rem 0; padding: 0; display: grid; gap: .3rem; }
.lab-order > li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.lab-inline { display: inline-flex; vertical-align: middle; }

/* ---------- why table ---------- */
.lab-why > summary { cursor: pointer; list-style-position: outside; margin-left: 1rem; width: fit-content; }
.lab-why > summary:focus-visible { outline-offset: 3px; }
.lab-why[open] > summary { margin-bottom: .1rem; }
.lab-why-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lab-why-table th, .lab-why-table td { padding: .45rem .5rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.lab-why-table thead th {
  font-family: var(--head-font); font-stretch: 87.5%; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--head);
}
.lab-why-table tbody th { font-family: var(--head-font); font-weight: 800; font-variant-numeric: tabular-nums; width: 3rem; }
.lab-why-tie { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.lab-totals { display: flex; flex-wrap: wrap; gap: .25rem .7rem; }
.lab-total { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-total.is-top { color: var(--text); font-weight: 700; }
.lab-verdict-text { margin-right: .35rem; }
.lab-tie-tag { margin-right: .35rem; }
.lab-why-note { display: block; margin-top: .15rem; }
.lab-why-kept .lab-verdict-text { color: var(--muted); }

/* ---------- layout ---------- */
@media (min-width: 1000px) {
  /* 460px min: the clone box slots stay >= 66px, the size where their gene letters show (G, Y and H share one green) */
  .lab-cols { grid-template-columns: minmax(460px, 5fr) minmax(0, 6fr); }
  .lab-results { position: sticky; top: 76px; max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1400px) {
  .lab-cols { grid-template-columns: minmax(420px, 1fr) minmax(0, 1.25fr); }
}

/* Phones: outcome rows stack, the why table becomes one small card per slot. */
@media (max-width: 640px) {
  .lab-outcome { grid-template-columns: minmax(0, 1fr) auto; }
  .lab-outcome-genes { grid-column: 1 / -1; }
  .lab-outcome-meta { justify-content: flex-end; }
  .lab-why-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lab-why-table, .lab-why-table tbody, .lab-why-table tr, .lab-why-table th, .lab-why-table td { display: block; width: auto; }
  .lab-why-table tr { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); padding: .35rem 0; border-bottom: 1px solid var(--line); }
  .lab-why-table th, .lab-why-table td { border: 0; padding: .2rem .3rem; }
  .lab-why-table tbody th { width: auto; }
  .lab-why-table td::before, .lab-why-table tbody th::before {
    content: attr(data-label); display: block; font-family: var(--head-font); font-stretch: 87.5%; font-size: .68rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .lab-why-table tbody th { grid-column: 1; }
  .lab-why-table td[data-label="Bred plant"] { grid-column: 2; }
  .lab-why-table td[data-label="Neighbour totals"], .lab-why-table td[data-label="Result"] { grid-column: 1 / -1; }
  .lab-input-row { flex-wrap: wrap; }
  .lab-input-row .btn { flex: 1 1 auto; }
  .lab-keypad { max-width: none; }
  .lab-key { min-height: 44px; }
}

@media print {
  .lab-keypad, .lab-type-form, .lab-clones, .lab-planter-btns, .lab-slot-btns { display: none !important; }
  .lab-results { position: static; max-height: none; overflow: visible; }
}