@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f1f4ec;
  --paper: #ffffff;
  --ink: #1c2620;
  --muted: #4a574d;
  --line: #cfd8c9;
  --brand: #24382a;
  --brand-ink: #eef3e6;
  --accent: #a8481f;
  --accent-ink: #ffffff;
  --accent-soft: #f6e4d9;
  --focus: #1d6fa5;
  --sel: #24382a;
  --sel-ink: #eef3e6;
  --warn-bg: #fff3d6;
  --warn-ink: #6b4a00;
  --err-bg: #fde6e1;
  --err-ink: #8b2414;
  --ok: #2f6b3d;
  --pot: #c4622d;
  --pot-rim: #8f3f17;
  --soil: #5b4331;
  --soil-2: #6a4f3a;
  --guide: #e9d9b8;
  --tsoil: #6a4f3a;
  --f-red: #d23a2f;
  --f-pink: #e77fa8;
  --f-orange: #ee8a2a;
  --f-yellow: #f2c230;
  --f-white: #f4f1e8;
  --f-purple: #7d4bb0;
  --f-blue: #4a6fd1;
  --head: "Fraunces", Georgia, "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121a14;
    --paper: #1a241d;
    --ink: #e8efe4;
    --muted: #b4c2b4;
    --line: #34443a;
    --brand: #0c120e;
    --brand-ink: #dfe9d4;
    --accent: #f08a5d;
    --accent-ink: #1a0d06;
    --accent-soft: #3a2519;
    --focus: #7fbde6;
    --sel: #c9dfbd;
    --sel-ink: #0f1a10;
    --warn-bg: #3a2f12;
    --warn-ink: #f4d58a;
    --err-bg: #3d1b15;
    --err-ink: #f7b2a3;
    --ok: #8fd19e;
    --pot: #b0582a;
    --pot-rim: #7a3714;
    --soil: #4a3627;
    --soil-2: #57402f;
    --guide: #d9c49b;
    --tsoil: #57402f;
    --f-white: #e9e5da;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

.topbar { background: var(--brand); color: var(--brand-ink); }
.topbar-in { display: flex; align-items: center; min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 700 20px/1 var(--head); }

h1, h2, h3, .h3 { font-family: var(--head); font-weight: 700; line-height: 1.15; }
.hero { padding: 24px 0 6px; max-width: 760px; }
h1 { font-size: clamp(30px, 6.4vw, 44px); margin: 0 0 8px; letter-spacing: -.01em; }
.lede { margin: 0; color: var(--muted); font-size: 18px; max-width: 60ch; }

/* tabs */
.tabs { display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 2px solid var(--line); }
.tabs [role=tab] { font: 600 16px/1.2 var(--body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 14px; min-height: 46px; cursor: pointer; }
.tabs [role=tab][aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }

.linkbar { margin: 14px 0 0; padding: 10px 14px; background: var(--accent-soft); border-left: 4px solid var(--accent); }
.linkbar p { margin: 4px 0; }
.lb-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* layout */
.panel { display: grid; gap: 22px; margin: 18px 0 40px; align-items: start; }
@media (min-width: 900px) { .panel { grid-template-columns: 384px minmax(0, 1fr); gap: 34px; } }

.inputs fieldset { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
legend { font: 700 19px/1.2 var(--head); padding: 0; margin: 0 0 10px; }
.field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; min-width: 0; }
.field label, .lab { font-weight: 600; font-size: 15px; }
input[type=text], input[type=date], select {
  font: 16px/1.3 var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 6px; padding: 10px 10px; min-height: 46px; width: 100%; min-width: 0;
}
input[aria-invalid=true] { border-color: var(--err-ink); }
select { padding-right: 26px; padding-left: 8px; }
.row2 { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; }
.row2.opts > .field { flex: 1 1 140px; margin-bottom: 0; }
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dims .field { margin-bottom: 0; justify-content: flex-end; }
.err { color: var(--err-ink); font-weight: 600; margin: 8px 0 0; font-size: 15px; }

.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; padding: 0 13px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--sel); color: var(--sel-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.wrapseg { flex-wrap: wrap; }
.units { margin-left: auto; }

.layers { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.layer { display: grid; grid-template-columns: 12px minmax(0, 1fr) minmax(0, 6.6em) 44px; gap: 8px; align-items: center; margin: 0 0 8px; }
.sw { width: 12px; height: 34px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); }
@container (max-width: 379px) {
  .layer { grid-template-columns: 12px minmax(0, 1fr) 44px; row-gap: 6px; margin-bottom: 14px; }
  .layer .col { grid-column: 2; grid-row: 2; width: 9em; max-width: 100%; }
  .layer .sw { grid-row: 1 / span 2; height: 100%; }
}
.x { width: 44px; height: 44px; border: 1.5px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 6px; font-size: 24px; line-height: 1; cursor: pointer; }
.x-pad { width: 44px; }
.add-row { margin: 4px 0 0; }

.more { border-top: 1px solid var(--line); padding-top: 4px; }
.more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--muted); }
.more[open] summary { margin-bottom: 8px; }

.btn { font: 600 16px/1.2 var(--body); border: 1.5px solid var(--accent); color: var(--accent); background: var(--paper); border-radius: 6px; padding: 10px 16px; min-height: 46px; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { border-style: dashed; }
.linkbtn { background: none; border: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; padding: 10px 0; min-height: 44px; }

/* phone: the answer at a glance, between the pot size and the bulb list */
.peek { display: grid; grid-template-columns: minmax(0, 128px) minmax(0, 1fr); gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; }
.peek:has(.peek-msg) { display: block; background: var(--err-bg); color: var(--err-ink); }
.peek-msg { margin: 0; font-weight: 600; }
.peek-fix { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.peek-fix a { color: inherit; }
.peek-pic .side-svg { max-height: 160px; }
.peek-list { list-style: none; margin: 0; padding: 0; }
.peek-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; margin: 0 0 5px; line-height: 1.3; }
.peek-list .n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sel); color: var(--sel-ink); font: 700 12px var(--body); position: relative; top: 3px; }
.peek-list .pd { display: block; color: var(--muted); font-size: 14px; }
.peek-warn { margin: 2px 0 4px; color: var(--warn-ink); font-size: 14px; font-weight: 600; }
.peek-go { display: inline-block; font-size: 15px; font-weight: 600; padding: 6px 0 2px; }
@media (min-width: 900px) { .peek { display: none !important; } }

/* results */
.results { min-width: 0; }
#pot-out, #force-out { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; }
.msg.warn { background: var(--warn-bg); color: var(--warn-ink); }
.msg.info { background: var(--paper); border: 1px solid var(--line); }
.err-box { background: var(--err-bg); color: var(--err-ink); }
.err-box p { margin: 4px 0; }

.drawing { display: grid; gap: 14px; }
@media (min-width: 620px) { .drawing { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.side-svg { width: 100%; height: auto; max-height: 70vh; display: block; }
.side-svg .pot { fill: var(--pot); }
.side-svg .rim { stroke: var(--pot-rim); stroke-width: 5; }
.side-svg .soil { fill: var(--soil); }
.side-svg .grass { stroke: #5c8a3a; stroke-width: 5; }
.side-svg .guide { stroke: var(--guide); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .8; }
.side-svg .bulb { stroke: rgba(0, 0, 0, .35); stroke-width: .8; }
.side-svg .root { stroke: #e8dcc3; stroke-width: 1; fill: none; opacity: .75; }
.side-svg .ruler, .side-svg .tick { stroke: var(--muted); stroke-width: 1.2; }
.side-svg .tl { fill: var(--muted); font: 12px var(--body); }
.side-svg .badge circle { fill: var(--sel); }
.side-svg .badge text { fill: var(--sel-ink); font: 700 13px var(--body); }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin: 0 0 10px; }
.steps p { margin: 0; }
.steps .n, .top .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sel); color: var(--sel-ink); font: 700 13px var(--body); }
.steps .n.end { background: none; border: 2px solid var(--line); width: 24px; }
.steps .dep { display: block; color: var(--muted); font-size: 15px; }

.tops { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.top { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.top svg { display: block; max-width: 100%; height: auto; }
.top .tsoil { fill: var(--tsoil); }
.top .tb { stroke: rgba(0, 0, 0, .35); stroke-width: .5; }
.top figcaption { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.tops-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 15px; }

.h3 { font-size: 20px; margin: 20px 0 8px; }
.bgrid { display: grid; gap: 6px; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n w" "t t"; gap: 2px 10px; align-items: end; }
.bname { grid-area: n; font-size: 15px; font-weight: 600; }
.btrack, .baxis { grid-area: t; }
.btrack { position: relative; height: 18px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 6)); border-radius: 3px; }
.bbar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .5); }
.bwhen { grid-area: w; color: var(--muted); font-size: 14px; }
.brow.axis .bwhen, .brow.axis .bname { display: none; }
.baxis { display: grid; grid-template-columns: repeat(6, 1fr); font-size: 13px; color: var(--muted); }
.note { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.shop, .care, .fnotes { margin: 0; padding-left: 20px; }
.shop li, .care li, .fnotes li { margin: 0 0 4px; }
.col-n { color: var(--muted); }
.shop .for { list-style: none; margin-left: -20px; color: var(--muted); font-size: 15px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.saved { color: var(--muted); font-size: 15px; margin: 4px 0; }
.saved.warn { color: var(--warn-ink); }
.toast { min-height: 1.5em; margin: 0; color: var(--ok); font-weight: 600; }
.undo-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--sel); color: var(--sel-ink); padding: 8px 10px 8px 16px; border-radius: 8px; display: flex; gap: 12px; align-items: center; z-index: 20; max-width: calc(100% - 24px); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.undo-bar .btn { background: var(--paper); }

/* forcing */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 22px; background: var(--paper); font-size: 15px; font-weight: 600; color: var(--muted); }
.chip input:checked + span { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.fhead { margin: 0 0 10px; font-size: 18px; }
.ftable { width: 100%; border-collapse: collapse; container-type: inline-size; }
.ftable th, .ftable td { text-align: left; vertical-align: top; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.ftable thead th { font-size: 14px; color: var(--muted); }
.ftable tr.hurry th { box-shadow: inset 4px 0 0 #d79a1c; }
.ftable tr.late th { box-shadow: inset 4px 0 0 var(--err-ink); }
.ftable tr.ok th { box-shadow: inset 4px 0 0 var(--ok); }
.ftable th[scope=row] { padding-left: 12px; white-space: nowrap; }
.ftable td:last-child { white-space: nowrap; }
@media (max-width: 620px) {
  .ftable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ftable, .ftable tbody, .ftable tr, .ftable th, .ftable td { display: block; }
  .ftable tr { border-bottom: 1px solid var(--line); padding: 6px 0 8px; }
  .ftable th, .ftable td { border: 0; padding: 3px 8px 3px 12px; }
  .ftable td::before { content: attr(data-l) ": "; color: var(--muted); font-size: 14px; }
}
.fnotes { margin-top: 12px; color: var(--muted); font-size: 15px; }

/* content */
.content { max-width: 760px; margin: 10px 0 40px; }
.content h2 { font-size: 26px; margin: 30px 0 10px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; min-height: 44px; }
.faq details p { margin: 0 0 14px; }
.sources { color: var(--muted); font-size: 15px; }

footer { border-top: 1px solid var(--line); padding: 18px 0 30px; color: var(--muted); font-size: 15px; }
.sb-more { line-height: 1.8; }

.printable { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- print ---------- */
@page { margin: 11mm 12mm; }
@media print {
  :root { --sel: #24382a; --sel-ink: #fff; --paper: #fff; --ink: #000; --muted: #333; --line: #bbb; --brand: #24382a; --brand-ink: #fff; --soil: #8a6a50; --soil-2: #8a6a50; --tsoil: #9c7d62; --pot: #d9875a; --guide: #fff; --f-white: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body > *:not(main), main > .wrap > *:not(.printable), .undo-bar { display: none !important; }
  body[data-print=card] #print-card, body[data-print=force] #print-force { display: block; }
  .card { font-size: 10.5pt; line-height: 1.35; }
  .ch h2 { font: 700 22pt/1.1 var(--head); margin: 0 0 2pt; }
  .ch p { margin: 0 0 8pt; color: #333; }
  .ch .csrc { font-size: 8.5pt; margin-top: -5pt; color: #444; }
  .card h3 { font: 700 13pt/1.2 var(--head); margin: 0 0 5pt; }
  .cwarn p { margin: 0 0 6pt; padding: 5pt 8pt; border: 1px solid #b58900; }
  .cgrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14pt; align-items: start; break-inside: avoid; }
  .cside .side-svg { max-height: 90mm; width: 100%; }
  .cgrid2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14pt; margin-top: 10pt; break-inside: avoid; }
  .steps li { margin-bottom: 6pt; grid-template-columns: 20pt 1fr; gap: 6pt; }
  .steps .n { width: 17pt; height: 17pt; font-size: 9pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .steps .dep, .note, .bwhen { font-size: 9.5pt; }
  .card .steps .dep { display: inline; }
  .card .steps .dep::before { content: "("; } .card .steps .dep::after { content: ")"; }
  .bname { font-size: 10pt; }
  .bbar, .side-svg, .btrack { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .shop li, .care li, .fnotes li { margin-bottom: 2pt; }
  .card ul + h3 { margin-top: 9pt; }
  .ctops { margin-top: 8pt; break-inside: avoid; }
  .ctops .tops { margin: 0; padding: 0; border: 0; gap: 8pt 18pt; }
  .ctops .tops-note { display: none; }
  .ctops .top figcaption { font-size: 9.5pt; }
  .ctops .top .n { width: 15pt; height: 15pt; font-size: 8.5pt; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ctops svg, .top svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cline { display: flex; gap: 24pt; margin: 12pt 0 0; break-inside: avoid; }
  .cline span { flex: 1; border-bottom: 1px solid #000; padding-bottom: 12pt; font-size: 10pt; }
  .ckeep { break-inside: avoid; }
  .cfoot { margin-top: 12pt; font-size: 8.5pt; color: #444; border-top: 1px solid #bbb; padding-top: 5pt; }
  .ftable.print { container-type: normal; }
  .ftable.print thead { position: static; width: auto; height: auto; clip: auto; display: table-header-group; }
  .ftable.print, .ftable.print tbody { display: table; width: 100%; }
  .ftable.print tbody { display: table-row-group; }
  .ftable.print tr { display: table-row; break-inside: avoid; }
  .ftable.print th, .ftable.print td { display: table-cell; padding: 6pt 6pt; border-bottom: 1px solid #999; }
  .ftable.print td::before { content: none; }
  .ftable.print .box { width: 14mm; }
  .ftable.print td[data-l="Bring indoors"] { white-space: nowrap; }
  .ftable.print .box::after { content: ""; display: inline-block; width: 11pt; height: 11pt; border: 1.2px solid #000; }
  .ftable.print tr th { box-shadow: none; }
  a { color: #000; text-decoration: none; }
}