/* Left at the Scarecrow - husk paper by day, a lantern-lit field by night. Colours are tokens on :root. */
:root {
  --bg: #f4ecd8; --panel: #fffaf0; --ink: #2b2618; --muted: #6b6250; --line: #d9ccaa;
  --corn: #5c7a2c; --tassel: #c99a1e; --soil: #ead7ab; --barn: #a8461a; --barn-ink: #fff8ec;
  --kraft: #e7d3a8; --kraft-ink: #3b3020; --post: #fff7e4; --post-ink: #7a4a1e;
  --ok-bg: #e2efcf; --ok-ink: #2f4d12; --warn-bg: #fbe3c8; --warn-ink: #7a3b06; --bad-bg: #f6d6cf; --bad-ink: #7d2312;
  --leaf: #4f6b24; --blank: #574e3c; --walker: #1f5fa8; --seen: rgba(31, 95, 168, .14); --trail: #a8461a;
  --shadow: 0 1px 0 rgba(60, 45, 10, .08), 0 6px 18px rgba(60, 45, 10, .08);
  --serif: "Rockwell", "Roboto Slab", "Zilla Slab", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #12150d; --panel: #1b2014; --ink: #ece4cc; --muted: #b0a78d; --line: #34402a;
  --corn: #6f9440; --tassel: #e2b84a; --soil: #3a3020; --barn: #e07a3f; --barn-ink: #1a1208;
  --kraft: #2e2618; --kraft-ink: #f0e2c0; --post: #2a2214; --post-ink: #f0c27a;
  --ok-bg: #26391a; --ok-ink: #cfe9a8; --warn-bg: #3f2a12; --warn-ink: #f5c98f; --bad-bg: #44201a; --bad-ink: #f6b5a6;
  --leaf: #3b5520; --blank: #cbbd98; --walker: #7db7ff; --seen: rgba(125, 183, 255, .18); --trail: #f09a5e;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--barn); }
.hidden { display: none !important; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
h1, h2, h3, .brand strong { font-family: var(--serif); letter-spacing: .01em; }

/* Header */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.back { color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.brand strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 30px; height: 30px; flex: none; }
.lg-soil { fill: var(--soil); }
.lg-corn { fill: none; stroke: var(--corn); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lg-post { fill: var(--barn); }
.session { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Pills, chips, badges */
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: 600 .9rem var(--sans); cursor: pointer; text-decoration: none; }
.pill:hover:not(:disabled) { border-color: var(--corn); }
.pill.solid { background: var(--barn); border-color: var(--barn); color: var(--barn-ink); }
.pill.solid:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--barn); color: var(--barn-ink); }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: .8rem; }
.pill.big { padding: 10px 20px; font-size: 1rem; }
.pill:disabled { opacity: .55; cursor: not-allowed; }
.chip { border: 1px dashed var(--corn); background: transparent; color: var(--ink); border-radius: 8px; padding: 5px 10px; font: 600 .88rem var(--sans); cursor: pointer; }
.chip.on { background: var(--leaf); color: #fff; border-style: solid; }
.badge { display: inline-block; border-radius: 6px; padding: 2px 10px; font: 700 .82rem var(--sans); background: var(--kraft); color: var(--kraft-ink); white-space: nowrap; }
.badge.v-ready { background: var(--ok-bg); color: var(--ok-ink); }
.badge.v-short { background: var(--warn-bg); color: var(--warn-ink); }
.badge.v-unusable { background: var(--bad-bg); color: var(--bad-ink); }

/* Layout */
main { max-width: 1060px; margin: 0 auto; padding: 18px 16px 40px; }
.hero { padding: 18px 0 8px; }
.kicker { font-size: .85rem; color: var(--muted); border-left: 4px solid var(--tassel); padding-left: 10px; margin: 0 0 10px; }
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.15; margin: 0 0 10px; overflow-wrap: anywhere; }
.lede { max-width: 760px; margin: 0 0 14px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 16px 0; box-shadow: var(--shadow); }
.ph { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.3rem; }
.step-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--leaf); color: #fff; font: 700 .95rem var(--sans); flex: none; }
.lbl { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 4px; }
input[type=text], select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 8px 10px; font: inherit; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, .field-host:focus { outline: 2px solid var(--tassel); outline-offset: 1px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.seedbox { grid-column: span 2; }
.seedrow { display: flex; gap: 8px; }
.seedrow input { flex: 1; min-width: 0; }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; margin: 10px 0; }
.note { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 8px 10px; }

/* The field */
.fieldwrap, .walkwrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.field-host { background: var(--kraft); border-radius: 12px; padding: 8px; }
.field { display: block; width: 100%; height: auto; }
.soil { fill: var(--soil); }
.corn { fill: none; stroke: var(--corn); stroke-width: 9; stroke-linecap: round; }
.tassel { fill: none; stroke: var(--tassel); stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; }
.trail { fill: none; stroke: var(--trail); stroke-width: 2.6; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; }
.seen rect { fill: var(--seen); }
.gate-t { font: 700 11px var(--sans); fill: var(--ink); }
.post-disc { fill: var(--post); stroke: var(--post-ink); stroke-width: 2; }
.post-no { font: 700 10px var(--sans); fill: var(--post-ink); }
.post.now .post-disc { fill: var(--tassel); stroke: var(--barn); }
.post.now .post-no { fill: #2b2618; }
.walker { fill: var(--walker); stroke: var(--panel); stroke-width: 2; }
.sc-pole { stroke: #6b4a25; stroke-width: 2; fill: none; }
:root[data-theme="dark"] .sc-pole { stroke: #c79a60; }
.sc-coat { fill: var(--barn); }
.sc-head { fill: #e9c46a; }
.sc-hat { stroke: var(--ink); stroke-width: 2; fill: none; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.tile b { font: 700 1.25rem var(--serif); }
.factmeta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }

/* Ask + progress */
.runrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.gate { background: var(--kraft); color: var(--kraft-ink); border-radius: 8px; padding: 8px 10px; }
.steps { list-style: none; padding: 0; margin: 8px 0; }
.step { padding: 3px 0; color: var(--muted); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--ok-ink); }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; word-break: break-word; background: var(--bg); padding: 10px; border-radius: 8px; max-height: 360px; overflow: auto; }

/* Result */
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.summary { font-size: 1.02rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plain { padding-left: 18px; margin: 6px 0; }
.plain li { margin: 4px 0; }
.why-tag { display: inline-block; background: var(--kraft); color: var(--kraft-ink); border-radius: 5px; padding: 0 7px; font-size: .8rem; font-weight: 600; }
.recon { list-style: none; padding: 0; margin: 6px 0; }
.recon li { padding: 6px 10px; border-radius: 8px; margin: 4px 0; background: var(--ok-bg); color: var(--ok-ink); font-size: .9rem; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.info { background: var(--kraft); color: var(--kraft-ink); }
.recon li.none { background: var(--ok-bg); color: var(--ok-ink); }
.none { color: var(--muted); font-style: italic; list-style: none; }

/* The passport: a row of punched kraft cards */
.passport { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.pcard { position: relative; background: var(--kraft); color: var(--kraft-ink); border-radius: 10px; padding: 26px 14px 14px; border: 2px dashed rgba(122, 74, 30, .35); }
.punch { position: absolute; top: 9px; right: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.ptab { position: absolute; top: -1px; left: 12px; margin: 0; background: var(--leaf); color: #fff; font: 700 .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 0 0 6px 6px; }
.p-gate .ptab, .p-exit .ptab { background: var(--barn); color: var(--barn-ink); }
.ptitle { margin: 0 0 6px; font-size: 1.15rem; overflow-wrap: anywhere; }
.pbody { margin: 0; font-size: .92rem; }
.pq { font-weight: 700; margin: 0 0 10px; overflow-wrap: anywhere; }
.blankline { color: var(--blank); font-weight: 400; font-style: italic; border-bottom: 1px solid rgba(122, 74, 30, .45); padding-bottom: 2px; }
.pq.tall { padding-bottom: 18px; }
.opt { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); gap: 6px; align-items: center; padding: 5px 0; border-top: 1px dotted rgba(122, 74, 30, .4); font-size: .9rem; }
.opt-turn { font-weight: 700; white-space: nowrap; }
.opt-text { overflow-wrap: anywhere; }
.arr { width: 20px; height: 20px; }
.arr path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.keybox { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.keybox summary { cursor: pointer; font-weight: 700; }
.keylist { margin: 8px 0 4px; padding-left: 22px; }
.keylist li { margin: 3px 0; }
.exports, .cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Walk */
.walkside { display: flex; flex-direction: column; gap: 10px; }
.pad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 46px); gap: 6px; justify-content: start; }
.padbtn { border: 1px solid var(--line); background: var(--kraft); color: var(--kraft-ink); border-radius: 10px; font-size: 1.3rem; cursor: pointer; }
.padbtn:hover { border-color: var(--corn); }
.padbtn.up { grid-column: 2; grid-row: 1; }
.padbtn.lf { grid-column: 1; grid-row: 2; }
.padbtn.dn { grid-column: 2; grid-row: 2; }
.padbtn.rt { grid-column: 3; grid-row: 2; }
.signpanel { position: relative; background: var(--post); color: var(--ink); border: 2px solid var(--post-ink); border-radius: 10px; padding: 24px 12px 12px; }
.signpanel .ptab { background: var(--post-ink); color: var(--post); }
.signopt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 6px 0 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 8px 10px; font: 600 .9rem var(--sans); cursor: pointer; }
.signopt:hover { border-color: var(--corn); }

/* Saved */
.saved { list-style: none; padding: 0; margin: 10px 0 0; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hstamp { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--corn); font: 700 .95rem var(--serif); flex: none; }
.hstamp.v-short { border-color: var(--tassel); }
.hstamp.v-unusable { border-color: var(--barn); }
.hinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hinfo b { overflow-wrap: anywhere; }
.hbtns { display: flex; gap: 6px; }

/* Footer, toasts */
.foot { max-width: 1060px; margin: 0 auto; padding: 10px 16px 40px; color: var(--muted); font-size: .88rem; }
.toasts { position: fixed; bottom: 16px; right: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 50; pointer-events: none; }
.toast { pointer-events: auto; max-width: 420px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: .9rem; transition: opacity .5s; }
.toast.err { background: var(--bad-ink); color: var(--bad-bg); }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

@media (max-width: 760px) {
  .fieldwrap, .walkwrap { grid-template-columns: 1fr; }
  .seedbox { grid-column: auto; }
  .back-t { display: none; }
  .panel { padding: 14px; }
}
@media (max-width: 420px) {
  .brand strong { font-size: .95rem; }
  .pill { padding: 5px 11px; }
}
@media print {
  .bar, .hero, .askbox, .factbox, .walkbox, .histbox, .aboutbox, .foot, .exports, .toasts, #result, #progressPanel, .fieldside, .grid3, .ph .step-no { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { box-shadow: none; border: 0; }
  .pcard { break-inside: avoid; }
  #biggerField, #sizeNote { display: none !important; }
  body.print-pass .mazebox, body.print-pass #keyBox, body.print-pass #passNote { display: none !important; }
  body.print-plan #passport, body.print-plan #passNote { display: none !important; }
}