/* Results panel (js/results.js): target presets, filters and the result cards: outcome genes on a dark plate, an
   overhead planter picture (planter.js renderPlanterScene) as big as the Planter Lab's, with the chance hung under it,
   then the buttons and the Steps pane. Each card is its own size container. */

.rs-panel { min-width: 0; }
.rs-summary { margin-left: auto; text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rs-body { container: rs / inline-size; display: grid; gap: .75rem; min-width: 0; }
.rs-k {
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}

/* ---------- controls ---------- */
.rs-controls { display: grid; gap: .6rem; min-width: 0; }
.rs-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.rs-presets > .rs-k { margin-right: .15rem; }
.rs-preset {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 32px; padding: .25rem .6rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--field); color: var(--muted);
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .78rem; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.rs-preset:hover { color: var(--text); border-color: var(--muted); background: var(--btn); }
.rs-preset[aria-pressed="true"] {
  color: var(--text); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px var(--accent);
}
.rs-custom { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.rs-pattern {
  width: 8.5em; min-height: 32px; padding: .25rem .5rem;
  font-family: var(--mono); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
}
.rs-pattern::placeholder { letter-spacing: .12em; }

.rs-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .75rem; min-width: 0; }
.rs-ftoggle { align-self: end; min-height: 36px; }
.rs-ftoggle::after {
  content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg); transition: transform .15s;
}
.rs-ftoggle[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.rs-ftoggle.is-on { border-color: var(--accent); color: var(--text); }
.rs-fcount { color: var(--accent-2); }
.rs-sort { margin-left: auto; grid-template-columns: auto minmax(0, 12rem); align-items: center; gap: .5rem; }
.rs-sort > label { margin: 0; }
.rs-sort .select { min-height: 36px; }

.rs-fpanel {
  display: grid; gap: .7rem; padding: .75rem; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.rs-fset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rs-fset > legend { padding: 0; margin-bottom: .3rem; font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rs-fgrid { display: grid; gap: .4rem; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.rs-fgrid-3 { max-width: 26rem; }
.rs-fmore { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); max-width: none; }
.rs-mini { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem; }
.rs-mini > label { margin: 0; min-width: 1em; font-family: var(--head-font); font-weight: 700; color: var(--text); }
.rs-mini .select { min-height: 32px; padding: .2rem 1.6rem .2rem .45rem; }
.rs-fend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* ---------- list bar, notes, empty states ---------- */
.rs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; min-height: 32px; font-size: .85rem; color: var(--muted); }
.rs-count { font-variant-numeric: tabular-nums; }
.rs-msg { display: grid; gap: .5rem; }
.rs-msg:empty { display: none; }
.rs-msg-note {
  margin: 0; padding: .55rem .75rem; border-radius: var(--radius); font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); border-left-width: 3px;
  background: color-mix(in srgb, var(--info) 9%, transparent); color: var(--text);
}
.rs-msg-note.is-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.rs-empty-ic { display: inline-grid; color: var(--dim); }
.rs-empty-ic svg { width: 40px; height: 40px; }


.rs-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; min-width: 0; }
.rs-divider {
  display: flex; align-items: center; gap: .6rem; margin: .4rem 0 0;
  font-size: .8rem; color: var(--muted); letter-spacing: .08em;
}
.rs-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.rs-more { justify-self: center; min-width: min(100%, 16rem); }

/* ---------- cards: a dark Rust panel, few lines ---------- */
.rs-card {
  position: relative; min-width: 0; container: rscard / inline-size;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--head), transparent 8rem), var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--shadow);
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.rs-card:hover { border-color: var(--line-strong); }
/* the card is a stacking context (container query): lift the one in use, so its tooltips aren't drawn under the
   next card */
.rs-card:is(:hover, :focus-within) { z-index: 1; }
.rs-card.is-target::after {
  content: ""; position: absolute; left: -1px; top: .9rem; bottom: .9rem; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--good);
}
.rs-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow);
}
/* (no "Highlighted" tag on the selected card: the accent border says it — Sean) */
.rs-card :is(button, summary, select, input, .rs-alts) { cursor: auto; }
.rs-card :is(button, summary) { cursor: pointer; }

/* One column: the genes, the planter picture (centred, the Lab's size: see .rs-scene), the buttons, then the Steps
   pane and the other ways. */
.rs-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0; }

/* top: the outcome in Rust's gene circles on the clones' dark plate (like the game's look-at panel) + a small score chip.
   The plate is dark in both themes, so the circles use Rust's own solid colours and the dark theme's dash. */
.rs-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem .9rem; min-width: 0;
}
.rs-top > .rs-title { justify-self: center; }
.rs-top > .rs-score { justify-self: end; }
/* the chance in the top-left corner: green for 100%, orange (caution) for anything less */
.rs-corner {
  justify-self: start; font-family: var(--head-font); font-stretch: 87.5%; font-weight: 800; font-size: 1.45rem; line-height: 1;
  font-variant-numeric: tabular-nums; cursor: help;
}
.rs-corner.is-sure { color: var(--good); }
.rs-corner.is-risk { color: #f0913a; }
:root[data-theme="light"] .rs-corner.is-risk { color: #b45309; }
/* narrow cards: chance and score share the first line, the genes get the full width under them */
@container rscard (max-width: 460px) {
  .rs-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "corner score" "title title"; }
  .rs-top > .rs-corner { grid-area: corner; }
  .rs-top > .rs-score { grid-area: score; }
  .rs-top > .rs-title { grid-area: title; }
}
.rs-title {
  margin: 0; display: flex; min-width: 0; font-size: 1rem; padding: .5rem .6rem; border-radius: 4px;
  background: rgba(39, 36, 29, .9);   /* the same plate as the clones in the planter (.pls-plate --plate) */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 12px rgba(0, 0, 0, .35);
  --gG: #60891b; --gY: #60891b; --gH: #60891b; --gW: #aa4734; --gX: #aa4734;
  --gene-text: #ececec; --gX-text: #ececec; --gene-link: rgba(175, 175, 175, .8); --gene-q: #3d3a35;   /* gray chain line */
}
:root[data-theme="light"] .rs-title { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 10px rgba(40, 25, 10, .28); }
.rs-title .genes { --chip: 32px; --gap: 7px; }
@container rscard (min-width: 420px) {
  .rs-title .genes { --chip: 38px; --gap: 9px; }
}
.rs-score {
  flex: none; display: inline-flex; align-items: baseline; gap: .35rem; padding: .18rem .6rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--field);
  font-family: var(--head-font); font-stretch: 87.5%; line-height: 1.2; cursor: help;
}
.rs-score small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rs-score b { font-size: 1.05rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* the planter picture (drawn when the card scrolls into view) */
.rs-fig { margin: 0; display: grid; justify-items: center; gap: .45rem; min-width: 0; }
/* One cap for every picture: the Planter Lab's own (planter.css .plscene --scene-max, 620px); phones use the full card
   width. On the two-column Calculator (1000px and up) calc.css caps it at the Lab's size for the window width. A
   route's earlier-step planters (md) get no smaller cap here (planter.css caps md scenes itself). */
.rs-scene { width: 100%; max-width: 38.75rem; min-width: 0; }
.rs-scene > * { max-width: 100%; margin-inline: auto; }
.rs-scene.is-pending {
  aspect-ratio: 1; border-radius: var(--radius);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .05), transparent), var(--field);
}


/* buttons */
.rs-side { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.rs-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rs-got, .rs-lab { min-height: 40px; padding-inline: 1.3rem; }
/* The selected card's "Open in Planter Lab" glows softly (Sean). Reduced motion stops the pulse, not the glow. */
.rs-card.is-selected .rs-lab {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: rs-lab-glow 2.6s ease-in-out infinite;
}
@keyframes rs-lab-glow { 50% { box-shadow: 0 0 16px 3px color-mix(in srgb, var(--accent) 55%, transparent); } }
.rs-actions .btn-sm { min-height: 36px; }

/* #n / Step n tags (other ways) */
.rs-tagx {
  display: inline-block; min-width: 2.1rem; padding: .02rem .3rem; border-radius: 2px; text-align: center;
  border: 1px solid var(--line-strong); background: var(--field); color: var(--text); font: 600 .76rem/1.35 var(--mono);
}
.rs-tagx.is-bred { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); font-family: var(--head-font); font-weight: 700; }
.rs-sub { font-size: .8rem; color: var(--muted); }
.rs-note { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }

/* A route's steps, all on the card (Sean: "all steps stacked"): step 1 on top, the final cross last. Each step is a
   quiet panel with a one-line head (Step n · breed GGGYWY · 100%) and its planter; the arrow line between two steps
   says what to do with the plant you just bred. The final step's panel is outlined in the accent. */
.rs-steps { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.rs-step { display: grid; gap: .6rem; min-width: 0; padding: .7rem .75rem .8rem; border-radius: var(--radius); background: var(--field); border: 1px solid var(--line); }
.rs-step.is-final { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rs-step + .rs-step { margin-top: .45rem; }
/* earlier steps' planters are smaller than the final one's, so a 3-step card stays short and the final cross stands out */
.rs-step:not(.is-final) .rs-scene { max-width: 22rem; }
.rs-step-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.rs-step-n {
  padding: .12rem .45rem; border-radius: 3px; background: var(--head); border: 1px solid var(--line-strong);
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text);
}
.rs-step.is-final .rs-step-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rs-step-odds { margin-left: auto; font-family: var(--head-font); font-stretch: 87.5%; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rs-step-odds.is-sure { color: var(--good); }
.rs-step-odds.is-risk { color: #f0913a; cursor: help; }
:root[data-theme="light"] .rs-step-odds.is-risk { color: #b45309; }
/* what to do next, with an arrow down to the next step */
.rs-next {
  margin: 0; justify-self: center; display: grid; justify-items: center; gap: .1rem;
  font-size: .82rem; color: var(--muted); text-align: center;
}
.rs-next::after { content: "\2193"; font-size: 1.15rem; line-height: 1; color: var(--accent-2); }

/* other ways: a quiet link at the bottom */
.rs-alts { min-width: 0; }
.rs-alts > summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: 0 .1rem; list-style: none;
  font-size: .84rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
}
.rs-alts > summary::-webkit-details-marker { display: none; }
.rs-alts > summary::before {
  content: ""; width: .35em; height: .35em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.rs-alts[open] > summary::before { transform: rotate(45deg); }
.rs-alts > summary:hover { color: var(--text); text-decoration-color: currentColor; }
.rs-alt-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.rs-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; padding: .35rem .5rem;
  border-radius: var(--radius); background: var(--field); font-size: .84rem;
}
.rs-alt-odds { font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; min-width: 3.2em; }
/* same caution colour as the card's chance (a darker orange on the light theme's parchment) */
.rs-alt-odds.is-risk { color: #f0913a; }
:root[data-theme="light"] .rs-alt-odds.is-risk { color: #9a4700; }
/* the route words, then each plant's #n with its genes in small circles, wrapping plant by plant */
.rs-alt-who { display: grid; gap: .25rem; flex: 1 1 16rem; min-width: 0; }
/* one plant per line (Sean: "stacked vertically, 1 column") */
.rs-alt-n { display: grid; justify-items: start; gap: .3rem; min-width: 0; }
.rs-alt-p { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-size: .76rem; color: var(--muted); }
.rs-alt-p .genes { --chip: 16px; --gap: 3px; }
.rs-alt .rs-tagx { min-width: 0; font-size: .72rem; }
.rs-alt .btn-sm { margin-left: auto; min-height: 30px; }

/* ---------- perfect clone: the card matches the target you picked (Sean chose variant "B") ----------
   The gene plate glows: a steady green ring and glow, plus a brighter copy on ::after that fades in and out (opacity
   only, so many glowing cards stay cheap). Six of our own leaves blow left to right across the top of the card on a
   gentle wave, turning as they go. They sit behind the card's content (z -1 inside the card; isolation makes the card
   a stacking context, which its container query alone doesn't), so they never cover a gene. Reduced motion (base.css
   stops every animation): a steady glow, no leaves. */
.rs-card.is-target { isolation: isolate; }
.rs-card.is-target .rs-title {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(150, 220, 90, .55), 0 0 10px 2px rgba(120, 200, 60, .45);
}
.rs-card.is-target .rs-title::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(170, 240, 100, .9), 0 0 22px 6px rgba(120, 210, 60, .6);
  animation: rs-perfect-glow 2.8s ease-in-out infinite;
}
@keyframes rs-perfect-glow { 50% { opacity: 1; } }
.rs-leaves {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 5.5rem; overflow: hidden; pointer-events: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* across (translate, steady speed) and up and down (transform, eased) are two animations on one leaf; the svg turns */
.rs-leaf {
  position: absolute; left: 0; top: .3rem; width: 13px; height: 13px; opacity: .92;
  animation: rs-leaf-x 7s linear infinite, rs-leaf-y 1.9s ease-in-out infinite alternate;
}
.rs-leaf > svg { display: block; width: 100%; height: 100%; fill: currentColor; animation: rs-leaf-turn 1.6s ease-in-out infinite alternate; }
.rs-leaf .rib { stroke: rgba(38, 56, 14, .55); stroke-width: 1; stroke-linecap: round; }
.rs-leaf:nth-child(1) { color: #7fae3a; }
.rs-leaf:nth-child(2) { color: #9cc451; top: 1.7rem; width: 11px; height: 11px; animation-duration: 9s, 2.4s; animation-delay: -3s, -.8s; }
.rs-leaf:nth-child(2) > svg { animation-duration: 2.1s; animation-delay: -.5s; }
.rs-leaf:nth-child(3) { color: #6a8f2c; top: .9rem; animation-duration: 6s, 1.7s; animation-delay: -4.6s, -1.2s; }
.rs-leaf:nth-child(3) > svg { animation-duration: 1.4s; animation-delay: -1s; }
.rs-leaf:nth-child(4) { color: #b5d66a; top: 2.7rem; width: 10px; height: 10px; animation-duration: 10s, 2.6s; animation-delay: -7.2s, -.3s; }
.rs-leaf:nth-child(4) > svg { animation-duration: 2.4s; animation-delay: -1.7s; }
.rs-leaf:nth-child(5) { color: #88b340; top: 1.2rem; width: 12px; height: 12px; animation-duration: 8s, 2.1s; animation-delay: -1.4s, -1.6s; }
.rs-leaf:nth-child(5) > svg { animation-duration: 1.8s; animation-delay: -.2s; }
.rs-leaf:nth-child(6) { color: #9cc451; top: 3.5rem; animation-duration: 5.5s, 2.2s; animation-delay: -2.3s, -.6s; }
.rs-leaf:nth-child(6) > svg { animation-duration: 2s; animation-delay: -1.3s; }
/* from just off the left edge to just past the right (100cqw is the card's content width; its padding is ~2.2rem) */
@keyframes rs-leaf-x { from { translate: -16px 0; } to { translate: calc(100cqw + 2.4rem + 16px) 0; } }
@keyframes rs-leaf-y { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes rs-leaf-turn { from { rotate: -35deg; } to { rotate: 55deg; } }
@media (prefers-reduced-motion: reduce) { .rs-leaves { display: none; } }
:root[data-motion="reduce"] .rs-leaves { display: none; }

/* ---------- small screens ---------- */
@container rs (max-width: 520px) {
  .rs-sort { margin-left: 0; flex: 1 1 100%; grid-template-columns: auto minmax(0, 1fr); }
  .rs-fend { justify-content: flex-start; }
}
@container rs (max-width: 420px) {
  .rs-card { padding: .8rem .75rem .85rem; }
  .rs-step { padding: .6rem; }
}
@container rscard (max-width: 330px) {
  .rs-title .genes { --chip: 28px; --gap: 5px; }
  .rs-got, .rs-lab { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-card, .rs-preset, .rs-ftoggle::after, .rs-alts > summary::before { transition: none; }
}

@media print {
  .rs-controls, .rs-bar, .rs-actions, .rs-more, .rs-alt .btn { display: none !important; }
  .rs-card { break-inside: avoid; box-shadow: none; background: #fff; border-color: #999; }
  .rs-leaves { display: none; }
  .rs-card.is-selected::before { display: none; }
}