/* Grows Here - a seed shop counter: kraft-paper ground, cream seed packets printed in two inks (leaf green and
 * terracotta), a mustard rubber stamp. Dark mode is the potting shed after dusk: soil-brown night, packets lit by a
 * lamp, inks lifted so every label still reads. */
:root {
  --bg: #efe5d2; --bg-2: #e4d7bd; --card: #fbf6ea; --ink: #2b2519; --ink-2: #5a5040; --line: #d6c7a8;
  --accent: #345f33; --accent-ink: #ffffff; --accent-2: #9a4a26; --mustard: #8a6410;
  --paper: #fffaf0; --paper-edge: #b9a57f; --crease: #d9c9a6; --print: #2b2519; --print-2: #5a5040;
  --leaf: #4c8a45; --leaf-2: #7aa83a; --stem: #3c6b35; --soil: #8a6a4a; --soil-2: #6e5238; --pot: #b8643c; --pot-rim: #94502f; --tape: #d9b54a; --wilt: #9c8a5a;
  --them: #9a4a26; --you: #2f5b2e; --track: #cbb994;
  --g-match: #2f6b34; --g-small: #7a5a06; --g-big: #9a3412; --g-unknown: #5c5a54;
  --v-compost: #8a3d18; --v-graft: #6d5a0c; --v-pot: #8c4a2a; --v-plant: #2f6b34; --v-ink: #ffffff;
  --l-opposite: #8a3d18; --l-blend: #6d5a0c; --l-trial: #2d5b7a; --l-original: #2f6b34;
  --warn-bg: #fbe8e5; --warn-ink: #8a1c1c; --note-bg: #f8eed6; --note-ink: #6b4305; --ok-bg: #e3efe1; --ok-ink: #1f5428;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1b1712; --bg-2: #241e17; --card: #2a231b; --ink: #f1e8d6; --ink-2: #c6b9a0; --line: #4a3f31;
  --accent: #9fd39a; --accent-ink: #13200f; --accent-2: #f0a77c; --mustard: #e6c069;
  --paper: #332b21; --paper-edge: #6b5c45; --crease: #4d4234; --print: #f1e8d6; --print-2: #cdbfa4;
  --leaf: #8ccf7e; --leaf-2: #c3df7a; --stem: #8ccf7e; --soil: #6e5238; --soil-2: #8a6a4a; --pot: #c97a52; --pot-rim: #e0936a; --tape: #e6c069; --wilt: #c9b884;
  --them: #f0a77c; --you: #9fd39a; --track: #5c4f3c;
  --g-match: #9fd39a; --g-small: #e6c069; --g-big: #ffab8a; --g-unknown: #c6c0b4;
  --v-compost: #ffab8a; --v-graft: #e6c069; --v-pot: #f0b48f; --v-plant: #9fd39a; --v-ink: #1b1712;
  --l-opposite: #ffab8a; --l-blend: #e6c069; --l-trial: #9cc9ea; --l-original: #9fd39a;
  --warn-bg: #3b1a16; --warn-ink: #ffcdc5; --note-bg: #362a14; --note-ink: #ffdda1; --ok-bg: #18301a; --ok-ink: #bdebc0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); overflow-x: hidden; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); line-height: 1.18; overflow-wrap: anywhere; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 0.88rem; }
.muted { color: var(--ink-2); }
.mono { font-family: var(--mono); }

/* Header: the shop's awning */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); flex-wrap: wrap;
  border-bottom: 6px solid transparent; border-image: repeating-linear-gradient(90deg, var(--accent-2) 0 18px, var(--paper) 18px 36px) 6; }
.bar .back { color: inherit; opacity: 0.88; text-decoration: none; font-size: 0.9rem; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; flex: 1; min-width: 0; font-family: var(--display); white-space: nowrap; }
.logo { width: 28px; height: 28px; flex: none; }
.lg-pack { fill: #fffaf0; stroke: #2b2519; stroke-width: 1; }
.lg-fold { fill: none; stroke: #9a4a26; stroke-width: 1.4; }
.lg-stem { stroke: #345f33; stroke-width: 1.6; }
.lg-leaf { fill: #4c8a45; }
.session { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bar .pill { background: transparent; border-color: currentColor; color: inherit; }
.bar .pill.solid { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Buttons */
.pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: 600 0.88rem var(--sans); cursor: pointer; text-decoration: none; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill.ghost { cursor: default; }
.pill.big { padding: 10px 22px; font-size: 1rem; }
.pill.tiny { padding: 3px 10px; font-size: 0.8rem; }
.pill:disabled { opacity: 0.55; cursor: not-allowed; }
.chip { border: 1px dashed var(--accent-2); background: transparent; color: var(--ink); border-radius: 4px; padding: 5px 12px; font: 0.86rem var(--sans); cursor: pointer; }
.chip.on { background: var(--accent-2); border-style: solid; color: #ffffff; }
:root[data-theme="dark"] .chip.on { color: #1b1712; }

/* Layout */
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
.hero { padding: 22px 0 8px; }
.kicker { font-size: 0.86rem; color: var(--ink-2); margin: 0 0 8px; max-width: 780px; }
.hero h1 { font-size: clamp(1.75rem, 4.6vw, 2.9rem); margin: 4px 0 10px; max-width: 860px; }
.lede { max-width: 780px; margin: 0 0 14px; }
.lanes { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.lane { flex: 1 1 240px; text-align: left; border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: 10px 14px; cursor: pointer; font: 0.86rem var(--sans); }
.lane b { display: block; font: 600 1.08rem var(--display); }
.lane span { color: var(--ink-2); }
.lane.on { border-color: var(--accent); box-shadow: inset 0 -4px 0 var(--accent); }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 16px; min-width: 0; }
.layout .panel { margin-top: 0; }
.ph { font-size: 1.35rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--accent-2); color: #ffffff; font: 700 0.85rem var(--sans); flex: none; transform: rotate(-4deg); }
:root[data-theme="dark"] .step-no { color: #1b1712; }
.lbl { display: block; font-size: 0.82rem; font-weight: 600; margin: 8px 0 4px; color: var(--ink-2); }
input, select, textarea { width: 100%; font: 0.95rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; min-width: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.drop { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }
.drop.over { border-color: var(--accent); background: var(--bg-2); }
.filelbl { color: var(--accent); text-decoration: underline; cursor: pointer; }
.note { background: var(--note-bg); color: var(--note-ink); border-radius: 6px; padding: 6px 10px; }

/* The soil test */
.soil-rows { display: grid; gap: 8px; }
.soil-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px dotted var(--line); }
.soil-row:last-child { border-bottom: 0; }
.soil-name b { display: block; font-size: 0.95rem; }
.soil-name span { font-size: 0.8rem; color: var(--ink-2); }
.soil-row .lbl { margin-top: 0; }
.soil-mark { display: inline-block; margin-top: 3px; font: 700 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; }
.m-match { color: var(--g-match); } .m-small { color: var(--g-small); } .m-big { color: var(--g-big); } .m-unknown { color: var(--g-unknown); }

/* The packet */
.packet-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px; justify-content: center; }
.packet-host svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(60, 40, 10, 0.18)); }
.pk-paper { fill: var(--paper); stroke: var(--paper-edge); stroke-width: 1.2; }
.pk-crease { stroke: var(--crease); stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; }
.pk-brand { font: 700 15px var(--display); letter-spacing: 3px; fill: var(--accent-2); }
.pk-area { font: 600 11px var(--sans); letter-spacing: 1.5px; fill: var(--print-2); }
.pk-name { font: 600 18px var(--display); fill: var(--print); }
.pk-empty { fill: var(--print-2); font-style: italic; }
.pk-from { font: italic 12.5px var(--display); fill: var(--print-2); }
.pk-sow { font: 600 11px var(--sans); letter-spacing: 1px; fill: var(--accent); text-transform: uppercase; }
.pk-stamp circle { fill: none; stroke: currentColor; stroke-width: 3; }
.pk-stamp circle.st-in { stroke-width: 1.2; }
.pk-stamp text { font: 800 11px var(--sans); letter-spacing: 0.4px; fill: currentColor; }
.st-compost { color: var(--v-compost); } .st-graft { color: var(--v-graft); } .st-pot { color: var(--v-pot); } .st-plant { color: var(--v-plant); }
.sp-ground { fill: var(--soil); } .sp-heap { fill: var(--soil-2); } .sp-crumb { fill: var(--soil); }
.sp-stem { stroke: var(--stem); stroke-width: 3; fill: none; stroke-linecap: round; }
.sp-leaf { fill: var(--leaf); } .sp-leaf2 { fill: var(--leaf-2); }
.sp-pot { fill: var(--pot); } .sp-rim { fill: var(--pot-rim); } .sp-tape { fill: var(--tape); }
.sp-wilt { stroke: var(--wilt); stroke-width: 3; fill: none; stroke-linecap: round; } .sp-wleaf { fill: var(--wilt); }
.sp-seed { fill: var(--soil-2); }
.gc-scale { font: 600 11px var(--sans); fill: var(--print-2); text-transform: uppercase; letter-spacing: 1px; }
.gc-label { font: 600 14px var(--display); fill: var(--print); }
.gc-mark { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: 0.6px; }
.gc-mark.m-match { fill: var(--g-match); } .gc-mark.m-small { fill: var(--g-small); } .gc-mark.m-big { fill: var(--g-big); } .gc-mark.m-unknown { fill: var(--g-unknown); }
.gc-track { stroke: var(--track); stroke-width: 2; }
.gc-tick { fill: var(--track); }
.gc-link { stroke-width: 5; stroke-linecap: round; opacity: 0.75; }
.l-small { stroke: var(--g-small); } .l-big { stroke: var(--g-big); }
.gc-them { fill: var(--paper); stroke: var(--them); stroke-width: 3; }
.gc-you { fill: var(--you); }
.gc-q { font: 700 14px var(--sans); fill: var(--g-unknown); }
.legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
.k-them { border: 3px solid var(--them); background: var(--paper); }
.k-you { background: var(--you); }
.k-match, .k-small, .k-big { width: 22px; height: 6px; border-radius: 3px; }
.k-q { border-radius: 0; width: auto; height: auto; font: 700 0.95rem var(--sans); color: var(--g-unknown); }
.k-match { background: var(--g-match); } .k-small { background: var(--g-small); } .k-big { background: var(--g-big); }

/* Run */
.askbox .ph span:last-child { min-width: 0; }
.runrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.gate { background: var(--note-bg); color: var(--note-ink); border-radius: 6px; padding: 8px 10px; margin: 10px 0 6px; }
.progress .steps { list-style: none; padding: 0; margin: 8px 0; }
.step { padding: 3px 0; color: var(--ink-2); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--g-match); }
.step-ic { display: inline-block; width: 1.2em; font-family: var(--mono); }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.8rem var(--mono); background: var(--bg); padding: 10px; border-radius: 6px; max-height: 420px; overflow: auto; }

/* The result: an opened packet */
.result { border-top: 6px solid var(--accent-2); }
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: 1.55rem; min-width: 0; }
.stamp { display: inline-block; font: 800 0.8rem var(--sans); text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 10px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-3deg); color: var(--ink-2); }
.stamp.v-compost { color: var(--v-compost); } .stamp.v-graft { color: var(--v-graft); } .stamp.v-pot { color: var(--v-pot); } .stamp.v-plant { color: var(--v-plant); }
.stamp.l-opposite { color: var(--l-opposite); } .stamp.l-blend { color: var(--l-blend); } .stamp.l-trial { color: var(--l-trial); } .stamp.l-original { color: var(--l-original); }
.summary { font-size: 1.05rem; max-width: 820px; }
.result h3 { font-size: 1.12rem; margin: 18px 0 8px; }
.roots, .cases { padding-left: 1.3em; margin: 0; }
.roots li, .cases li { margin: 0 0 10px; }
.roots q { display: block; font: italic 1rem var(--display); quotes: "\201C" "\201D"; }
.roots p { margin: 2px 0 0; }
.tag { display: inline-block; font: 700 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 3px; background: var(--bg-2); color: var(--ink); margin-right: 6px; }
.gaps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.gaps li { border-left: 4px solid var(--line); padding: 6px 10px; background: var(--bg); border-radius: 0 6px 6px 0; }
.gaps li.gap-big { border-left-color: var(--g-big); } .gaps li.gap-small { border-left-color: var(--g-small); }
.gaps li.none, .plain li.none, .roots li.none, .cases li.none { border: 0; background: none; color: var(--ink-2); padding-left: 0; list-style: none; }
.gaps .gap-way { font-size: 0.82rem; color: var(--ink-2); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.plain-version, .common { font: 1.05rem var(--display); background: var(--bg); border: 1px dashed var(--accent); border-radius: 8px; padding: 10px 12px; margin: 0; }
.confidence { margin: 0; }
.twin { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 10px; align-items: end; margin-top: 12px; }
.twin-card { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 6px; padding: 12px; min-height: 120px; position: relative; }
.twin-card p { margin: 6px 0 0; font: 1.02rem var(--display); }
.twin-lab { font: 700 0.74rem var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-2); }
.t-opp .twin-lab { color: var(--accent); }
.stake svg { width: 150px; height: auto; display: block; margin: 0 auto; }
.stk-post { fill: var(--soil); } .stk-board { fill: var(--paper); stroke: var(--paper-edge); stroke-width: 1.5; }
.stk-text { font: 700 11px var(--sans); fill: var(--print); }
.stk-split { stroke: var(--paper-edge); stroke-width: 1.5; stroke-dasharray: 3 2; }
.stk-ground { stroke: var(--soil); stroke-width: 4; stroke-linecap: round; }
.plain { padding-left: 1.2em; margin: 0; }
.sow { margin-top: 16px; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 8px; padding: 4px 14px 8px; }
.sow p { margin: 4px 0; }
.ask { font: italic 1.08rem var(--display); margin: 0; }
.handoff { margin: 14px 0 4px; }
.recon { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.recon li { padding: 6px 10px; border-radius: 6px; font-size: 0.88rem; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.note { background: var(--note-bg); color: var(--note-ink); }
.recon li.none { background: var(--ok-bg); color: var(--ok-ink); }
.exports, .cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* The seed tin */
.tin { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tin li.none { color: var(--ink-2); }
.tin .hrow { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 10px; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 8px; padding: 8px; }
.tin .hrow svg { width: 48px; height: auto; grid-row: span 2; }
.tin .hinfo { min-width: 0; }
.tin .hinfo b { display: block; font: 600 0.95rem var(--display); overflow-wrap: anywhere; }
.tin .hbtns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Footer, toasts */
.aboutbox p { max-width: 900px; }
.foot { max-width: 1180px; margin: 0 auto; padding: 8px 16px 40px; color: var(--ink-2); font-size: 0.86rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; transition: opacity 0.5s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.toast.err { background: var(--warn-ink); color: var(--warn-bg); }
.toast a { color: inherit; }
.toast.gone { opacity: 0; }

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .packet-pair { grid-template-columns: minmax(0, 1fr); }
  .two, .three { grid-template-columns: minmax(0, 1fr); }
  .soil-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .soil-name { grid-column: 1 / -1; }
  .twin { grid-template-columns: minmax(0, 1fr); }
  .stake { order: 3; }
  .bar { gap: 8px; }
  .brand { font-size: 1.05rem; }
}