/* Calculator page: hero strip, share-import banner, the clone panel (plant header row, add box + Scan Rust, text
   editor, tools, Calculate + Options, then "Your clones": lines to fix and the Rust box from clone-box.css), the
   gene keypad (touch screens only, docked at the bottom), the clone edit dialog and the Options dialog.
   Phone first: the keypad and Calculate stay thumb-sized; wide screens scroll the panel inside itself. */

/* ---------- hero ---------- */
.calc-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem;
  margin: 2px 0 16px; padding: .2rem 0 .1rem;
}
.calc-title {
  flex: 0 1 auto; margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.1;
  text-transform: uppercase; letter-spacing: .03em;
}
.calc-guide-link { flex: none; margin-left: auto; }

/* ---------- share-link import banner ---------- */
.import-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  margin: 0 0 16px; padding: .75rem .9rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: url(../img/noise.svg), var(--panel); box-shadow: var(--shadow);
  animation: calc-drop .2s ease-out;
}
.import-text { display: grid; gap: .35rem; min-width: 0; }
.import-text p { margin: 0; }
.import-q { display: flex; align-items: center; gap: .55rem; font-size: 1rem; }
.import-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.import-actions { flex: none; }

/* ---------- clone panel: plant header row, then add / edit / tools / Calculate, then "Your clones" ---------- */
.clone-panel { display: flex; flex-direction: column; }
.clone-body { display: grid; gap: .75rem; }
/* the plant picker as the panel's header strip (like .panel-head, but the picker keeps its own fonts) */
.type-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--pad); padding: .45rem var(--pad);
  background: var(--head); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
}
.type-label { font-size: .95rem; letter-spacing: .07em; }
.type-label::before {
  content: ""; display: inline-block; width: 3px; height: .9em; margin-right: .55rem; vertical-align: -.08em; background: var(--accent);
}
.type-pick { min-width: 0; }

/* "Your clones": a header strip across the panel, then the box(es) */
.clones-head { margin: .35rem calc(var(--pad) * -1) 0; border-top: 1px solid var(--line); }
/* the current plant's sprite in the "Your clones" title (page-calc.js fills #clonesIc) */
.clones-title { display: inline-flex; align-items: center; }
.clones-ic { display: inline-flex; margin-right: .5rem; }
.clones-ic:empty { display: none; }

.hl-strip {
  margin: 0; padding: .35rem .6rem; border-radius: var(--radius);
  color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
}

.clone-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.clone-empty p { flex: 1 1 16rem; margin: 0; color: var(--muted); text-wrap: pretty; }

/* lines that don't parse: not in the box, listed above it with Edit / Remove */
.line-warn {
  display: grid; gap: .35rem; padding: .5rem .6rem; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 7%, transparent);
}
.lw-head, .lw-more { margin: 0; }
.lw-head { color: var(--bad); font-weight: 600; }
.lw-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .1rem .6rem; min-width: 0; }
.lw-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; min-width: 0; font-size: .88rem; }
.lw-where { font-variant-numeric: tabular-nums; }
.lw-err { color: var(--bad); }
.lw-raw { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font: .82rem/1.3 var(--mono); color: var(--muted); }
.lw-acts { display: inline-flex; gap: .3rem; flex: none; }
.lw-acts .btn { min-height: 32px; padding-block: .15rem; }

/* the box(es) use the column's full width here (clone-box.css caps them at 640px elsewhere) */
.clone-box-host { min-width: 0; }
.clone-box-host .cb-box { max-width: none; }

@keyframes calc-drop { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- add box + gene keypad ---------- */
.add-box {
  display: grid; gap: .5rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); container: addbox / inline-size;
}
.add-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .6rem;
}
/* a narrow add box (phones, and the ≥1000px left column up to about 1360px wide): label + preview on top, then a
   wide input + Add. One row needs about 325px of fixed parts (label, 6-slot preview, Add, gaps) plus ~140px for the
   input, so the cut-off is the box's own width, not the viewport's. */
@container addbox (max-width: 470px) {
  .add-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .add-label { grid-area: 1 / 1; }
  .add-preview { grid-area: 1 / 2 / 2 / 4; justify-self: end; }
  .add-input { grid-area: 2 / 1 / 3 / 3; }
  .add-btn { grid-area: 2 / 3; min-width: 5.5rem; }
}
/* browsers without container queries (Safari 15 and older): the phone layout by viewport, as before */
@supports not (container-type: inline-size) {
  @media (max-width: 560px) {
    .add-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .add-label { grid-area: 1 / 1; }
    .add-preview { grid-area: 1 / 2 / 2 / 4; justify-self: end; }
    .add-input { grid-area: 2 / 1 / 3 / 3; }
    .add-btn { grid-area: 2 / 3; min-width: 5.5rem; }
  }
}
.add-label { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.add-preview { display: inline-flex; min-width: 0; }
.add-slot { background: transparent; box-shadow: none; border: 1px dashed var(--line-strong); }
.add-slot.next { border-style: solid; border-color: var(--focus); animation: slot-pulse 1.2s ease-in-out infinite; }
.add-input { font-family: var(--mono); letter-spacing: .08em; }
/* the placeholder ("Add genes here...") in the normal font, so it stays short enough for the one-row layout */
.add-input::placeholder { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
.add-btn.ready { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.add-msg { margin: 0; color: var(--muted); min-height: 1.2em; }
.add-msg.good { color: var(--good); }
.add-msg.warn { color: var(--warn); }
.add-msg.bad { color: var(--bad); }

.keypad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.key {
  appearance: none; display: grid; place-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 54px;
  margin: 0; padding: .3rem .2rem; border: 1px solid var(--gene-edge); border-radius: 5px;
  color: var(--gene-text); background: var(--btn); cursor: pointer; touch-action: manipulation;
  font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .22);
  transition: filter .1s, transform .05s;
}
.key:hover { filter: brightness(1.08); }
.key:active { transform: translateY(1px); filter: brightness(.93); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .22); }
.key-l { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.key-n { font-size: .6rem; font-weight: 700; letter-spacing: .06em; line-height: 1; opacity: .8; }
.key-G { background: var(--gG); }
.key-Y { background: var(--gY); }
.key-H { background: var(--gH); }
.key-W { background: var(--gW); }
.key-X { background: var(--gX); color: var(--gX-text); }
.key-back { grid-column: span 2; color: var(--text); border-color: var(--line-strong); }
.key-back svg { width: 26px; height: 26px; }
.key-enter { grid-column: span 3; background: var(--accent); color: var(--on-accent); border-color: transparent; }
.key-enter .key-l { font-size: 1.05rem; letter-spacing: .08em; }

/* Scan Rust: the big button under the add row */
.scan-btn {
  width: 100%; min-height: 48px; font-size: 1rem; letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.scan-btn .tag { font-size: .62rem; padding: .05rem .38rem; }

/* ---------- the gene keypad: touch screens only, docked at the bottom of the screen ---------- */
/* Sean: big keys are for phones; with a mouse you type. On a touch screen it stays up the whole time you're on the
   Calculator, except while a text field has the phone's own keyboard up. The page gets room under it (--dock-room:
   two 52px key rows, the 6px gap, 8px padding, borders, 8px off the bottom edge) so the end of the page and the
   toasts stay above it. The edit dialog clones this keypad (page-calc.js), and its copy shows everywhere. */
.key-dock { display: none; }
.key-preview .genes { --chip: 9px; --gap: 3px; }
.key-preview .gene { text-shadow: none; }
.key-preview .gene + .gene::before { display: none; }
.key-preview .add-slot { background: transparent; border: 1px solid currentColor; opacity: .6; }
@media (hover: none) and (pointer: coarse) {
  body[data-page="calc"] {
    --dock-room: calc(2 * 52px + 6px + 2 * 8px + 2px + 8px + 10px + env(safe-area-inset-bottom));
    padding-bottom: var(--dock-room);
  }
  body[data-page="calc"] .toast-host { bottom: var(--dock-room); }
  .key-dock {
    display: block; position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(520px, calc(100% - 16px)); margin: 0 auto; padding: 8px;
    border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 4px);
    background: var(--panel-solid); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  }
  .key-dock .key { min-height: 52px; }
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]), textarea):focus) .key-dock { display: none; }
}

/* ---------- "Edit as text" ---------- */
.text-edit { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.text-edit > summary {
  display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem .7rem; cursor: pointer;
  font-size: .85rem; color: var(--muted); list-style: none;
}
.text-edit > summary::-webkit-details-marker { display: none; }
.text-edit > summary::before {
  content: ""; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.text-edit[open] > summary::before { transform: rotate(45deg); }
.text-edit > summary:hover { color: var(--text); }
.text-edit[open] { padding-bottom: .7rem; }
.text-edit-hint { display: block; margin: 0 .7rem .45rem; }
.text-edit-hint code { font: .85em var(--mono); color: var(--text); }
.list-text { width: calc(100% - 1.4rem); margin: 0 .7rem; min-height: 11rem; font-family: var(--mono); font-size: .9rem; letter-spacing: .04em; }

/* a little tighter than .btn-sm, so all five fit one row in the clone column at 1280px (about 445 of its 470px) */
.list-tools { gap: .3rem; }
.list-tools .btn-sm { padding-inline: .45rem; letter-spacing: .04em; }

/* ---------- Calculate + Options (above "Your clones", so it's never far from the keypad) ---------- */
.calc-bar {
  padding: .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: url(../img/noise.svg), var(--panel-solid);
}
.calc-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.calc-btn { flex: 1 1 11rem; min-height: 52px; font-size: 1.25rem; letter-spacing: .12em; }
.calc-bar.running .calc-btn { cursor: progress; }
.opt-btn, .cancel-btn { min-height: 52px; }
.estimate { margin: .45rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.estimate.warn { color: var(--warn); }
.estimate.done { color: var(--good); }
.calc-progress { display: grid; gap: .3rem; margin-top: .55rem; }
.progress-text { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- results panel before results.js takes over ---------- */
#results { scroll-margin-top: 80px; }
.calc-results-empty { min-height: 16rem; align-content: center; }
.calc-results-empty p { text-wrap: pretty; }

/* ---------- Options dialog ---------- */
.opt-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.opt-panel { display: grid; gap: 1.1rem; }
.opt-panel[hidden] { display: none; }
.opt-panel .hint { margin: 0; }
.opt-range { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; }
.opt-range label { color: var(--text); font-size: .9rem; }
.opt-num-select { width: auto; min-width: 4.6rem; }
.score-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.score-cell { display: grid; justify-items: center; gap: .3rem; min-width: 0; text-align: center; cursor: pointer; }
.score-cell .gene { --chip: 28px; }
.score-name { font: 700 .66rem/1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.score-cell .input { text-align: center; padding-inline: .25rem; }
.opt-adv { border-top: 1px solid var(--line); padding-top: .6rem; }
.opt-adv > summary { cursor: pointer; font-size: .85rem; color: var(--muted); padding: .2rem 0; }
.opt-adv > summary:hover { color: var(--text); }
.opt-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: .8rem; }
.opt-minscore { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.opt-minscore-input { width: 6.5rem; }
.opt-checks { gap: .15rem; }
/* base.css styles a .field's direct labels as small caps headings; checkbox rows read as normal text */
.opt-panel .field > label.check {
  font: inherit; font-size: .95rem; text-transform: none; letter-spacing: normal; color: var(--text);
}

/* share link fallback dialog (clipboard blocked) */
.link-dlg .dlg-body p { margin-bottom: .6rem; }
.link-input { font-family: var(--mono); font-size: .85rem; }

/* ---------- edit one clone (page-calc.js openEditor: from a box slot or a line that needs fixing) ---------- */
.ed-dlg { width: min(430px, calc(100vw - 32px)); }
.ed-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ed-title { display: flex; align-items: center; gap: .55rem; }
.ed-body { display: grid; gap: .7rem; }
.ed-body > p { margin: 0; }
.ed-bad { color: var(--bad); }
.ed-bad code { font: .9em var(--mono); color: var(--text); overflow-wrap: anywhere; }
/* the six genes in one row, like the slot tooltip; the picked one is ringed */
.ed-genes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ed-gene {
  appearance: none; display: grid; place-items: center; min-width: 0; min-height: 54px; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.ed-gene .gene { --chip: 34px; }
.ed-gene:hover { border-color: var(--line-strong); }
.ed-gene.is-cur { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 40%, transparent); }
.ed-gene:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ed-hint { color: var(--muted); }
.ed-note-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; }
.ed-note-label { font-size: .8rem; color: var(--muted); }
.ed-msg { color: var(--bad); }
.ed-msg:empty { display: none; }
.ed-dlg .dlg-foot .btn { min-height: 40px; }

@keyframes slot-pulse { 50% { border-color: transparent; } }

/* ---------- wide screens: the clone panel stays in view (scrolling inside itself) beside long results ---------- */
@media (min-width: 1000px) {
  /* The clone column never gets under 29rem (464px), so the Large Wood Box slots stay >= 66px, the size where their
     gene letters show: a 416px box (clone-box.css) + the panel's 29.2px edge + up to 17px of panel scrollbar. */
  .calc-cols { grid-template-columns: minmax(29rem, 5fr) minmax(0, 7fr); }
  /* Result cards draw their planter at the Planter Lab's size for the same window (Sean: "the calculator just adopt
     that size"). lab.css makes the Lab's planter column max(460px, 5/11 of the row), 1/2.25 of it from 1400px, and the
     picture is that column minus its panel's 29.2px edge (2 x .85rem padding + 2 x 1px border). The row can't be seen
     from inside the card, so it's worked back from the card (100cqw, its container): the results column is the card
     + 66.4px (panel 2 x .85rem + card 2 x 1.1rem + four 1px borders), and the row is 12/7 of that column, or the
     column + 29rem while the clone column sits at its floor. The picture is never wider than the card (width: 100%),
     so on ~1000-1025px windows it fills the card. tests/results-css.test.mjs checks this against lab.css. */
  .calc-cols .rs-scene {
    --row: max((100cqw + 66.4px) * 12 / 7, 100cqw + 66.4px + 29rem);
    max-width: calc(max(460px, var(--row) * 5 / 11) - 29.2px);
  }
  .key { min-height: 46px; }
  /* sticky makes the panel a stacking context, so the plant picker pop-over (.pp-pop, z 45) and the box's info card
     (.cb-card, z 60) only count inside it: z 2 lifts the whole panel over the results column (cards, chips and the
     planter picture are positioned and come later in the page) but keeps it under the sticky top bar (z 30) */
  .clone-panel { position: sticky; z-index: 2; top: 72px; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; }
  .clone-box-host .cb-slot { scroll-margin: 12px 0; }
}
@media (min-width: 1400px) {
  .calc-cols .rs-scene { max-width: calc(max(420px, var(--row) * 4 / 9) - 29.2px); }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  .calc-hero { gap: .5rem; margin-bottom: 12px; }
  .calc-guide-link { margin-left: 0; }
  .import-actions { width: 100%; }
  .import-actions .btn { flex: 1 1 auto; }
  /* the add row's two-line layout comes from the addbox container query above */
  .key { min-height: 56px; }
  .type-row { gap: .5rem; }
  .lw-acts { margin-left: auto; }
  .ed-gene { min-height: 48px; }
  .ed-gene .gene { --chip: 30px; }
  .calc-btn { font-size: 1.15rem; }
  .score-name { font-size: .58rem; letter-spacing: .02em; }
}
@media (max-width: 380px) {
  .keypad { gap: 5px; }
  .key-n { display: none; }
}