@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #f4f7fa;
  --panel: #ffffff;
  --ink: #14202e;
  --muted: #475567;
  --line: #cdd7e2;
  --line-strong: #7d8da0;
  --grid: #e1e9f2;
  --grid-major: #c5d4e4;
  --blue: #1d4a7a;
  --blue-ink: #ffffff;
  --blue-soft: #e2ebf5;
  --bar: #10263f;
  --bar-ink: #eaf1f9;
  --warn: #7f4505;
  --warn-bg: #fdf0dc;
  --bad: #a3261b;
  --bad-bg: #fbe5e1;
  --ok: #1d6638;
  --ok-bg: #e1f1e6;
  --focus: #c25b12;
  --keep: #8d97a3;
  --c-apple: #d8573a;
  --c-crab: #c9558a;
  --c-pear: #9fb03a;
  --c-asianpear: #c9b23a;
  --c-cherry: #9e1f3d;
  --c-tart: #d63a4e;
  --c-plum: #6b4091;
  --c-peach: #ef8a4c;
  --c-nectarine: #d9673d;
  --c-apricot: #eaa52c;
  --r: 4px;
  --r2: 10px;
  --head: "Instrument Serif", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1828;
    --panel: #10223a;
    --ink: #e4edf7;
    --muted: #a6b6c9;
    --line: #26405f;
    --line-strong: #6f88a6;
    --grid: #15304f;
    --grid-major: #1f4166;
    --blue: #8fbcef;
    --blue-ink: #08182a;
    --blue-soft: #18365a;
    --bar: #071321;
    --bar-ink: #e4edf7;
    --warn: #f3c27c;
    --warn-bg: #33270f;
    --bad: #ff9a8a;
    --bad-bg: #3a1a17;
    --ok: #86d6a1;
    --ok-bg: #12301f;
    --focus: #ffb36b;
    --keep: #5f7085;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--blue); }
h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.1; letter-spacing: .005em; }
h2 { font-size: 2rem; margin: 2.2rem 0 .5rem; }
h3 { font-size: 1.4rem; margin: 1.4rem 0 .4rem; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.printable { display: none; }

/* top bar */
.bar { background: var(--bar); color: var(--bar-ink); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--head); font-size: 1.45rem; }
.bar a.side { color: var(--bar-ink); font-size: .95rem; padding: 12px 0; }

.intro { padding: 20px 0 4px; max-width: 48rem; }
h1 { font-size: 2.5rem; margin: 0 0 .35rem; }
.lede { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* form basics */
label.lab, .lab { display: block; font-weight: 650; font-size: .95rem; margin-bottom: 4px; }
input[type=number], input[type=text], select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--r); min-height: 44px; padding: 7px 9px; width: 100%; min-width: 0;
}
input[type=number] { -moz-appearance: textfield; }
input:invalid { border-color: var(--bad); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.btn {
  font: inherit; font-size: .98rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--blue); color: var(--blue-ink); border-color: var(--blue); }
.btn.small { min-height: 40px; padding: 6px 10px; font-size: .93rem; }
.linkbtn { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.hint { color: var(--muted); font-size: .93rem; margin: 6px 0 0; }
.err { color: var(--bad); font-size: .95rem; margin: 6px 0 0; }
.err:empty { display: none; }

/* yard bar */
.yard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 16px 0 12px; align-items: end; }
.yard .units, .yard .northf { grid-column: span 1; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.seg label { position: relative; display: block; margin: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 6px; border-left: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
.seg label:first-child span { border-left: 0; }
.seg input:checked + span { background: var(--blue); color: var(--blue-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (min-width: 720px) {
  .yard { grid-template-columns: 130px 130px auto auto; justify-content: start; }
}

/* the board: plan + verdict */
.board { display: grid; gap: 14px; }
.plan-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: 10px; }
/* One-finger swipes over the plan scroll the page; trees move by touch only after "Move trees" (mouse and pen drag
   always). */
.plan-svg { display: block; width: 100%; height: auto; max-height: 78vh; touch-action: pan-x pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.plan-svg.moving { touch-action: none; }
.plan-box:has(.plan-svg.moving) { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.move-toggle { display: none; }
.move-toggle[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
@media (pointer: coarse) { .move-toggle { display: inline-flex; min-height: 44px; } }
.plan-svg .gminor { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan-svg .gmajor { stroke: var(--grid-major); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan-svg .yardline { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.plan-svg .edge-open { stroke-dasharray: 8 6; }
.plan-svg .edge-house { stroke-width: 7; }
.plan-svg .keep { fill: var(--keep); fill-opacity: .28; stroke: var(--keep); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: grab; }
.plan-svg .keep.k-building { fill-opacity: .55; }
.plan-svg .keeplab { fill: var(--ink); font-size: 13px; font-weight: 600; pointer-events: none; }
.plan-svg .canopy { fill-opacity: .32; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.plan-svg .canopy.bad { stroke: var(--bad) !important; stroke-width: 3; stroke-dasharray: 6 4; }
.plan-svg .trunk { stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.plan-svg .tnum { fill: #fff; font-weight: 700; font-size: 13px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.plan-svg g.tree.sel .canopy { stroke-width: 3.5; fill-opacity: .45; }
.plan-svg g.tree:focus { outline: none; }
.plan-svg g.tree:focus-visible .trunk { stroke: var(--focus); stroke-width: 4; }
.plan-svg .scale line { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.plan-svg .scale text, .plan-svg .compass text { fill: var(--ink); font-size: 13px; font-weight: 600; }
.plan-svg .compass path { fill: var(--ink); }
.plan-svg .dim { fill: var(--muted); font-size: 12px; }
.plan-svg .linkline { stroke: var(--bad); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.plan-svg .form-strip { fill-opacity: .4; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.plan-svg.dragging, .plan-svg.dragging * { cursor: grabbing; }
.plan-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-top: 8px; font-size: .93rem; color: var(--muted); }
.plan-foot .btn { color: var(--ink); }

.verdict { scroll-margin-top: 10px; }
.verdict .big { font-family: var(--head); font-size: 1.75rem; line-height: 1.15; margin: 0 0 6px; }
.verdict .big.good { color: var(--ok); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checks li { border-left: 4px solid var(--warn); background: var(--warn-bg); padding: 7px 10px; font-size: .97rem; border-radius: 0 var(--r) var(--r) 0; }
.checks li.bad { border-color: var(--bad); background: var(--bad-bg); }
.checks li.info { border-color: var(--line-strong); background: var(--blue-soft); }
.checks li.okline { border-color: var(--ok); background: var(--ok-bg); }
.checks li button.tn { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.more-checks { margin-top: 6px; }

@media (min-width: 900px) {
  .board { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: start; }
  .board .plan-box { position: sticky; top: 10px; }
  .board .side .addform { grid-template-columns: 1fr; }
}

/* tree list */
.trees { margin-top: 18px; }
.trees h2 { margin-top: .6rem; }
.trees h2, .sec h2 { margin-top: 1.2rem; }
.tlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tlist > li { border-bottom: 1px solid var(--line); }
.trow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem; }
.tname { font-weight: 650; overflow-wrap: anywhere; }
.tmeta { color: var(--muted); font-size: .93rem; }
.tmeta .flag { color: var(--bad); font-weight: 600; }
.tmeta .okf { color: var(--ok); font-weight: 600; }
.trow .acts { display: flex; gap: 4px; }
.iconbtn { font: inherit; min-width: 44px; min-height: 44px; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--muted); cursor: pointer; font-size: .93rem; font-weight: 600; padding: 0 8px; }
.iconbtn:hover { border-color: var(--line-strong); color: var(--ink); }
.tlist > li.sel { background: var(--blue-soft); }
.tedit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 4px 0 14px 44px; }
.tedit .full { grid-column: 1 / -1; }
.tedit .row-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.srcline { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); margin: 0; }
@media (max-width: 480px) { .tedit { grid-template-columns: 1fr; padding-left: 0; } }

.addform { display: grid; grid-template-columns: 1fr; gap: 10px 12px; margin-top: 14px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r2); }
.addform .own { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.addform .own .full { grid-column: 1 / -1; }
.addform .go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (min-width: 720px) and (max-width: 899px) { .addform { grid-template-columns: 1fr 1.5fr 1.5fr auto; align-items: end; } .addform .own, .addform .err, .addform .hint { grid-column: 1 / -1; } }

/* settings disclosures */
details.box { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); }
details.box > summary { cursor: pointer; padding: 10px 14px; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
details.box > .in { padding: 4px 14px 14px; }
.edges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.keeps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.keeps li { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); }
.keeps li .full { grid-column: 1 / -1; display: flex; gap: 8px; align-items: end; }
.keeps li .full > div { flex: 1; }
@media (max-width: 480px) { .keeps li { grid-template-columns: 1fr 1fr; } }
.house { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

/* results sections */
.sec { margin-top: 10px; }
.sec .sub { color: var(--muted); margin: 0 0 8px; font-size: .95rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tbl th, .tbl td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: .88rem; color: var(--muted); font-weight: 650; }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.pstat { font-weight: 650; }
.pstat.ok { color: var(--ok); }
.pstat.bad { color: var(--bad); }
.pstat.warn { color: var(--warn); }
@media (max-width: 600px) {
  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .tbl.stack td { display: block; border: 0; padding: 2px 0; }
  .tbl.stack td[data-k]::before { content: attr(data-k) ": "; color: var(--muted); font-size: .88rem; }
  .tbl.stack td:empty { display: none; }
  .tbl.stack td.num { text-align: left; }
}

/* yield bars */
.ylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ylist li { display: grid; gap: 4px; }
.ybar { position: relative; height: 16px; background: var(--grid); border-radius: 2px; }
.ybar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.ybar i.use { background: transparent; border-right: 3px solid var(--ink); }
.ynote { color: var(--muted); font-size: .93rem; }

/* harvest chart */
.hchart { --nm: 9.5rem; position: relative; margin-top: 6px; }
.hmonths { display: grid; grid-template-columns: var(--nm) repeat(var(--cols), minmax(0, 1fr)); font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.hmonths span { padding: 2px 0 4px; text-align: center; border-left: 1px solid var(--line); }
.hmonths span:first-child { border-left: 0; }
.hrow { display: grid; grid-template-columns: var(--nm) minmax(0, 1fr); align-items: center; min-height: 34px; border-bottom: 1px solid var(--grid); }
.hrow b { font-weight: 600; font-size: .93rem; overflow-wrap: anywhere; padding-right: 6px; line-height: 1.25; }
.htrack { position: relative; height: 16px; }
.htrack i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.htrack i.soft { opacity: .45; }
.hgrid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--grid); }
@media (max-width: 480px) { .hchart { --nm: 6.6rem; } .hmonths { font-size: .74rem; } }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.toast { min-height: 1.5em; color: var(--ok); font-size: .95rem; margin: 4px 0; }
.saved { color: var(--muted); font-size: .93rem; margin: 6px 0 0; }
.saved.warn { color: var(--warn); }
.kept { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: .93rem; color: var(--muted); }
.kept[hidden] { display: none; }
.kept select { max-width: 100%; min-width: 0; font-size: 16px; }
.banner { margin: 12px 0; padding: 10px 12px; border-left: 4px solid var(--blue); background: var(--blue-soft); border-radius: 0 var(--r) var(--r) 0; }
.banner .go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.undo-toast { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; background: var(--bar); color: var(--bar-ink); padding: 8px 8px 8px 14px; border-radius: var(--r2); display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 24px); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.undo-toast .btn { min-height: 40px; }

/* content */
.content { max-width: 46rem; margin-top: 30px; }
.content p, .content li { max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 11px 0; font-weight: 650; min-height: 44px; }
.faq details p { margin: 0 0 12px; }
.sources { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.sib { margin-top: 14px; }
.spt { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 8px 0; }
.spt th, .spt td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.spt th { font-size: .88rem; color: var(--muted); }

footer { margin-top: 40px; padding: 22px 0 30px; border-top: 1px solid var(--line); font-size: .93rem; color: var(--muted); }
footer a { color: var(--blue); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- print ---------- */
@media print {
  @page { size: auto; margin: 11mm 11mm; }
  :root { --bg: #fff; --panel: #fff; --ink: #000; --muted: #333; --line: #999; --grid: #e4e4e4; --grid-major: #c8c8c8; --keep: #8a8a8a; }
  body { font-size: 10pt; background: #fff; color: #000; }
  .skip, .bar, .intro, .tool, .content, footer, .undo-toast, .banner { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .printable { display: block !important; }
  .pr-sheet { break-after: page; }
  .pr-sheet:last-child { break-after: auto; }
  .pr-head { display: flex; justify-content: space-between; gap: 12pt; align-items: baseline; border-bottom: 1.2pt solid #000; padding-bottom: 3pt; margin-bottom: 6pt; }
  .pr-head h2 { font-size: 20pt; margin: 0; }
  .pr-head p { margin: 0; font-size: 9pt; text-align: right; }
  .pr-plan { break-inside: avoid; }
  .pr-plan svg { display: block; width: 100%; height: auto; max-height: 140mm; }
  .pr-plan .canopy, .pr-plan .trunk, .pr-plan .keep, .pr-plan .form-strip, .pr-dot, .pr-plan .gminor, .pr-plan .gmajor, .pr-hbar i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-plan .plan-svg { max-height: 140mm; }
  .pr-t { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 6pt; }
  .pr-t th { text-align: left; font-size: 8.5pt; border-bottom: 1.2pt solid #000; padding: 3pt 4pt 3pt 0; }
  .pr-t td { vertical-align: top; border-bottom: .6pt solid #999; padding: 3.5pt 4pt 3.5pt 0; font-size: 9pt; line-height: 1.3; }
  .pr-t tr { break-inside: avoid; }
  .pr-t thead { display: table-header-group; }
  .pr-t td.box::before { content: ""; display: inline-block; width: 9pt; height: 9pt; border: 1pt solid #000; vertical-align: -1pt; }
  .pr-dot { display: inline-block; width: 13pt; height: 13pt; border-radius: 50%; color: #fff; font-weight: 700; font-size: 7.5pt; text-align: center; line-height: 13pt; }
  .pr-checks { margin: 6pt 0 0; padding-left: 12pt; font-size: 9pt; }
  .pr-checks li { margin: 0 0 2pt; }
  .pr-note { font-size: 8.5pt; color: #333; margin: 5pt 0 0; break-before: avoid; }
  .pr-h3 { font-family: var(--head); font-size: 14pt; margin: 9pt 0 3pt; break-after: avoid; }
  .pr-steps { margin: 4pt 0 0; padding-left: 14pt; font-size: 9.5pt; }
  .pr-steps li { margin: 0 0 3pt; }
  .pr-hchart { margin-top: 4pt; break-inside: avoid; }
  .pr-hrow { display: grid; grid-template-columns: 34mm 1fr; align-items: center; height: 13pt; font-size: 8.5pt; border-bottom: .4pt solid #ddd; }
  .pr-hbar { position: relative; height: 8pt; }
  .pr-hbar i { position: absolute; top: 0; bottom: 0; }
  .pr-hmon { display: grid; grid-template-columns: 34mm 1fr; font-size: 8pt; }
  .pr-hmon div { display: grid; }
  .pr-hmon span { border-left: .4pt solid #999; padding-left: 2pt; }
  .pr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12pt; }
  .pr-lines td { height: 18pt; }
}

/* pollination chart page */
.crumbs { font-size: .93rem; color: var(--muted); padding-top: 14px; }
.chart-page .intro { max-width: 52rem; }
.chart-page section { margin-top: 10px; }
.tbl.chart th[scope=row] { font-weight: 650; }
.tbl.chart td.src, .tbl.chart .w { font-size: .9rem; color: var(--muted); }
.tbl.chart td.src a { color: var(--blue); }
.hnotes { margin-top: 8px; font-size: .93rem; }
.hnotes summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.hnotes ul { margin: 4px 0 0; padding-left: 18px; }
details.sources summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
details.sources ul { padding-left: 18px; }